List teki Card üzerinde önemli düzenleme

ui/src/views/form/FormDevExpress.tsx

@@ -13,13 +13,14 @@ import { RowMode, SimpleItemWithColData } from './types'
 import { PlatformEditorTypes } from '@/proxy/form/models'
 
 const FormDevExpress = (props: {
+  isSubForm?: boolean
   mode: RowMode
   refForm: RefObject<FormDx>
   formData: any
   formItems: GroupItem[]
   setFormData: Dispatch<any>
 }) => {
-  const { mode, refForm, formData, formItems, setFormData } = props
+  const { isSubForm, mode, refForm, formData, formItems, setFormData } = props
 
   return (
     <form className={`${DX_CLASSNAMES} p-2`}>

ui/src/views/form/FormView.tsx

@@ -20,7 +20,6 @@ const FormView = (
   const params = useParams()
   const listFormCode = props?.listFormCode ?? params?.listFormCode ?? ''
   const id = props?.id ?? params?.id ?? ''
-  // const refListFormCode = useRef('') //Şimdilik kalsın
   const { translate } = useLocalization()
   const {
     loading,

ui/src/views/form/types.ts

@@ -25,6 +25,7 @@ export type PermissionResults = {
   u: boolean
   d: boolean
   e: boolean
+  i: boolean
 }
 
 export interface FormProps extends Meta {

ui/src/views/form/useGridData.tsx

@@ -183,6 +183,7 @@ const useGridData = (props: {
         gridDto?.gridOptions.editingOptionDto.allowDeleting === true &&
         checkPermission(gridDto?.gridOptions.permissionDto.d),
       e: checkPermission(gridDto?.gridOptions.permissionDto.e),
+      i: checkPermission(gridDto?.gridOptions.permissionDto.i),
     })
 
     // Set js and css

ui/src/views/list/Card.tsx

@@ -1,11 +1,21 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { GridDto } from '@/proxy/form/models'
+import { captionize } from 'devextreme/core/utils/inflector'
 import { useListFormCustomDataSource } from '@/shared/useListFormCustomDataSource'
 import { Pagination, Select } from '@/components/ui'
 import classNames from 'classnames'
 import { getList } from '@/services/form.service'
 import { FaInbox } from 'react-icons/fa'
-import FormView from '../form/FormView'
+import FormDevExpress from '../form/FormDevExpress'
+import { GroupItem, SimpleItem } from 'devextreme/ui/form'
+import { Form as FormDx } from 'devextreme-react/form'
+import FormButtons from '../form/FormButtons'
+import { useNavigate } from 'react-router-dom'
+import { ROUTES_ENUM } from '@/routes/route.constant'
+import CustomStore from 'devextreme/data/custom_store'
+import { PermissionResults } from '../form/types'
+import { usePermission } from '@/utils/hooks/usePermission'
+import { useLocalization } from '@/utils/hooks/useLocalization'
 
 interface CardProps {
   listFormCode: string
@@ -18,21 +28,109 @@ type Option = {
 }
 
 const CardItem = ({
+  isSubForm,
   row,
   gridDto,
   listFormCode,
+  dataSource,
+  refreshData,
 }: {
+  isSubForm?: boolean
   row: any
   gridDto: GridDto
   listFormCode: string
+  dataSource: CustomStore
+  refreshData: () => void
 }) => {
+  const [formData, setFormData] = useState(row)
+  const refForm = useRef<FormDx>(null)
+  const navigate = useNavigate()
+  const { checkPermission } = usePermission()
+  const { translate } = useLocalization()
+
   const keyField = gridDto.gridOptions.keyFieldName
   const rowId = row[keyField!]
 
+  const formItems: GroupItem[] = useMemo(() => {
+    if (!gridDto) return []
+
+    const items: SimpleItem[] = gridDto.columnFormats
+      .filter((col) => col.visible && col.listOrderNo > 0)
+      .sort((a, b) => a.listOrderNo - b.listOrderNo)
+      .slice(0, 10)
+      .map((col) => ({
+        dataField: col.fieldName,
+        label: { text: captionize(col.captionName || col.fieldName!) },
+      }))
+
+    return [
+      {
+        itemType: 'group',
+        colCount: 1,
+        items: items,
+      },
+    ]
+  }, [gridDto])
+
+  const permissionResults: PermissionResults = {
+    c:
+      gridDto?.gridOptions.editingOptionDto.allowAdding === true &&
+      checkPermission(gridDto?.gridOptions.permissionDto.c),
+    r: checkPermission(gridDto?.gridOptions.permissionDto.r),
+    u:
+      gridDto?.gridOptions.editingOptionDto.allowUpdating === true &&
+      checkPermission(gridDto?.gridOptions.permissionDto.u),
+    d:
+      gridDto?.gridOptions.editingOptionDto.allowDeleting === true &&
+      checkPermission(gridDto?.gridOptions.permissionDto.d),
+    e: checkPermission(gridDto?.gridOptions.permissionDto.e),
+    i: checkPermission(gridDto?.gridOptions.permissionDto.i),
+  }
+
+  const onActionEdit = () => {
+    navigate(
+      ROUTES_ENUM.protected.admin.formEdit
+        .replace(':listFormCode', listFormCode)
+        .replace(':id', rowId!),
+    )
+  }
+
+  const onActionNew = () => {
+    navigate(ROUTES_ENUM.protected.admin.formNew.replace(':listFormCode', listFormCode))
+  }
+
   return (
-    <div className="bg-white dark:bg-neutral-800 border dark:border-neutral-700 flex flex-col p-4">
+    <div className="bg-white dark:bg-neutral-800 border dark:border-neutral-700 flex flex-col groupp p-2">
+      <div className={`flex items-center mb-2 ${isSubForm ? 'justify-center' : 'justify-between'}`}>
+        {!isSubForm && <h3>{translate('::' + gridDto?.gridOptions.title)}</h3>}
+        {permissionResults && (
+          <FormButtons
+            isSubForm={true}
+            mode="view"
+            listFormCode={listFormCode}
+            id={rowId}
+            gridDto={gridDto}
+            commandColumnData={{ buttons: [] }}
+            dataSource={dataSource}
+            permissions={permissionResults}
+            handleSubmit={() => ({})}
+            refreshData={refreshData}
+            getSelectedRowKeys={() => [rowId]}
+            getSelectedRowsData={() => [row]}
+            getFilter={() => null}
+            onActionEdit={onActionEdit}
+            onActionNew={onActionNew}
+          />
+        )}
+      </div>
       <div className="flex-grow">
-        <FormView listFormCode={listFormCode} id={rowId} isSubForm={true} />
+        <FormDevExpress
+          mode="view"
+          refForm={refForm}
+          formData={formData}
+          formItems={formItems}
+          setFormData={setFormData}
+        />
       </div>
     </div>
   )
@@ -46,6 +144,7 @@ const Card = ({ listFormCode, searchParams }: CardProps) => {
   const [currentPage, setCurrentPage] = useState(1)
   const [pageSize, setPageSize] = useState(20)
   const [pageSizeOptions, setPageSizeOptions] = useState<Option[]>([])
+  const [dataSource, setDataSource] = useState<CustomStore>()
 
   const onPageSizeSelect = ({ value }: Option) => {
     setPageSize(value)
@@ -56,10 +155,19 @@ const Card = ({ listFormCode, searchParams }: CardProps) => {
     setCurrentPage(page)
   }
 
-  const loadData = useCallback(() => {
-    if (!gridDto) return
+  useEffect(() => {
+    getList({ listFormCode }).then((res: any) => setGridDto(res.data))
+  }, [listFormCode])
 
-    const store = createSelectDataSource(gridDto.gridOptions, listFormCode, searchParams)
+  useEffect(() => {
+    if (gridDto) {
+      const store = createSelectDataSource(gridDto.gridOptions, listFormCode, searchParams)
+      setDataSource(store)
+    }
+  }, [gridDto, listFormCode, searchParams, createSelectDataSource])
+
+  const loadData = useCallback(() => {
+    if (!dataSource) return
 
     const loadOptions = {
       skip: (currentPage - 1) * pageSize,
@@ -67,33 +175,30 @@ const Card = ({ listFormCode, searchParams }: CardProps) => {
       requireTotalCount: true,
     }
 
-    store.load(loadOptions).then((res: any) => {
+    dataSource.load(loadOptions).then((res: any) => {
       setData(res.data)
       setTotalCount(res.totalCount || 0)
     })
-  }, [gridDto, listFormCode, searchParams, currentPage, pageSize])
+  }, [dataSource, currentPage, pageSize])
 
   useEffect(() => {
-    getList({ listFormCode }).then((res: any) => setGridDto(res.data))
-  }, [listFormCode])
+    if (dataSource) {
+      loadData()
+    }
+  }, [dataSource, loadData])
 
   useEffect(() => {
     if (!gridDto) return
 
     const pagerOptions = gridDto.gridOptions.pagerOptionDto
-    const allowedSizes =
-      pagerOptions?.allowedPageSizes
-        ?.split(',')
-        .map((s) => Number(s.trim()))
-        .filter((n) => !isNaN(n) && n > 0) || [20, 50, 100]
+    const allowedSizes = pagerOptions?.allowedPageSizes
+      ?.split(',')
+      .map((s) => Number(s.trim()))
+      .filter((n) => !isNaN(n) && n > 0) || [20, 50, 100]
 
     setPageSizeOptions(allowedSizes.map((size) => ({ value: size, label: `${size} page` })))
   }, [gridDto, listFormCode, searchParams])
 
-  useEffect(() => {
-    loadData()
-  }, [loadData])
-
   if (!gridDto) return null
 
   return (
@@ -112,12 +217,23 @@ const Card = ({ listFormCode, searchParams }: CardProps) => {
         </div>
       )}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4 gap-4">
-        {data.map((row, idx) => {
-          const keyField = gridDto.gridOptions.keyFieldName
-          const rowId = row[keyField!]
+        {dataSource &&
+          data.map((row, idx) => {
+            const keyField = gridDto.gridOptions.keyFieldName
+            const rowId = row[keyField!]
 
-          return <CardItem key={rowId || idx} row={row} gridDto={gridDto} listFormCode={listFormCode} />
-        })}
+            return (
+              <CardItem
+                isSubForm={true}
+                key={rowId || idx}
+                row={row}
+                gridDto={gridDto}
+                listFormCode={listFormCode}
+                dataSource={dataSource}
+                refreshData={loadData}
+              />
+            )
+          })}
       </div>
 
       {gridDto.gridOptions.pagerOptionDto?.visible && totalCount > pageSize && (
@@ -146,4 +262,4 @@ const Card = ({ listFormCode, searchParams }: CardProps) => {
   )
 }
 
-export default Card
+export default Card