From ea5dbe91f5abd0a7408b75cc111c3119fbb8eb53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96zt=C3=BCrk?= <sedat.ozturk@sozsoft.com>
Date: Tue, 23 Sep 2025 22:52:08 +0300
Subject: [PATCH] =?UTF-8?q?Grid,=20Card=20ve=20Pivot=20son=20g=C3=BCncelle?=
 =?UTF-8?q?me?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/ui/Button/Button.tsx    |  2 +-
 ui/src/index.css                          |  4 ++
 ui/src/utils/hooks/useCurrentMenuIcon.tsx |  6 ++-
 ui/src/views/form/FormButtons.tsx         | 55 ++++++++++++-----------
 ui/src/views/form/FormDevExpress.tsx      |  4 +-
 ui/src/views/form/FormView.tsx            |  2 +-
 ui/src/views/form/SubForms.tsx            |  3 +-
 ui/src/views/list/Card.tsx                | 36 ++++++++-------
 ui/src/views/list/Grid.tsx                | 22 +++++++--
 ui/src/views/list/List.tsx                |  6 ++-
 10 files changed, 86 insertions(+), 54 deletions(-)

diff --git a/ui/src/components/ui/Button/Button.tsx b/ui/src/components/ui/Button/Button.tsx
index a93e2bad..12df9320 100644
--- a/ui/src/components/ui/Button/Button.tsx
+++ b/ui/src/components/ui/Button/Button.tsx
@@ -86,7 +86,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
                     `h-${CONTROL_SIZES.xs}`,
                     icon && !children
                         ? `w-${CONTROL_SIZES.xs} ${sizeIconClass} text-base`
-                        : 'px-3 py-1 text-xs'
+                        : 'px-2 py-1 text-xs'
                 )
                 break
             default:
diff --git a/ui/src/index.css b/ui/src/index.css
index 10201f3b..bcaada89 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -1,5 +1,9 @@
 @import './assets/styles/app.css';
 
+.dx-field-item {
+  padding-top: 5px !important;
+}
+
 .dx-toolbar .dx-toolbar-item.no-default {
   all: unset; /* tüm default style'ları sıfırla */
   display: block; /* tekrar görünür yap */
diff --git a/ui/src/utils/hooks/useCurrentMenuIcon.tsx b/ui/src/utils/hooks/useCurrentMenuIcon.tsx
index b7d191a3..45c7da7a 100644
--- a/ui/src/utils/hooks/useCurrentMenuIcon.tsx
+++ b/ui/src/utils/hooks/useCurrentMenuIcon.tsx
@@ -13,9 +13,11 @@ export function useCurrentMenuIcon(className = 'w-6 h-6'): JSX.Element {
     if (!menu.path) return false
 
     // normalize: /list/ -> /form/
-    const formPath = menu.path.replace('/list/', '/form/')
+    const menuPath = menu.path.toLowerCase()
+    const listFormPath = menuPath.replace('/list/', '/form/')
+    const formPath = listFormPath.replace('/list-', '/form-')
 
-    return location.pathname.startsWith(menu.path) || location.pathname.startsWith(formPath)
+    return location.pathname.startsWith(menuPath) || location.pathname.startsWith(listFormPath) || location.pathname.startsWith(formPath)
   })
 
   const IconComponent = currentMenu?.icon ? navigationIcon[currentMenu.icon] || FaUser : FaUser
diff --git a/ui/src/views/form/FormButtons.tsx b/ui/src/views/form/FormButtons.tsx
index 2da72871..1af6df1d 100644
--- a/ui/src/views/form/FormButtons.tsx
+++ b/ui/src/views/form/FormButtons.tsx
@@ -83,7 +83,8 @@ const FormButtons = (props: {
       if (props.onActionNew) {
         props.onActionNew()
       } else {
-        navigate(ROUTES_ENUM.protected.admin.formNew.replace(':formCode', listFormCode))
+        navigate(-1)
+        //navigate(ROUTES_ENUM.protected.admin.formNew.replace(':formCode', listFormCode))
       }
       toast.push(
         <Notification type="success" duration={2000}>
@@ -171,8 +172,10 @@ const FormButtons = (props: {
 
         {!isSubForm && (
           <Button
-            variant="solid"
             size="xs"
+            variant="default"
+            className="dx-button dx-button-mode-contained dx-button-normal"
+            icon={<FaBackward />}
             color="gray-500"
             title={translate('::Cancel')}
             onClick={() => {
@@ -183,13 +186,14 @@ const FormButtons = (props: {
               }
             }}
           >
-            <FaBackward />
           </Button>
         )}
         {mode != 'new' && (
           <Button
-            variant="solid"
             size="xs"
+            variant="default"
+            className="dx-button dx-button-mode-contained dx-button-normal"
+            icon={<FaTrash />}
             color="red-500"
             title={translate('::Delete')}
             onClick={() => {
@@ -197,13 +201,14 @@ const FormButtons = (props: {
             }}
             {...(permissions.d ? {} : { disabled: true })}
           >
-            <FaTrash />
           </Button>
         )}
         {mode != 'new' && (
           <Button
-            variant="solid"
             size="xs"
+            variant="default"
+            className="dx-button dx-button-mode-contained dx-button-normal"
+            icon={<FaPlus />}
             title={translate('::AddNew')}
             onClick={() => {
               if (onActionNew) {
@@ -213,14 +218,14 @@ const FormButtons = (props: {
               }
             }}
             {...(permissions.c ? {} : { disabled: true })}
-          >
-            <FaPlus />
-          </Button>
+          ></Button>
         )}
         {mode == 'view' && (
           <Button
-            variant="solid"
             size="xs"
+            variant="default"
+            className="dx-button dx-button-mode-contained dx-button-normal"
+            icon={<FaEdit />}
             title={translate('::Edit')}
             onClick={() => {
               if (onActionEdit) {
@@ -234,14 +239,14 @@ const FormButtons = (props: {
               }
             }}
             {...(permissions.u ? {} : { disabled: true })}
-          >
-            <FaEdit />
-          </Button>
+          ></Button>
         )}
         {(mode == 'edit' || (onActionView && mode == 'new')) && (
           <Button
-            variant="solid"
             size="xs"
+            variant="default"
+            className="dx-button dx-button-mode-contained dx-button-normal"
+            icon={<FaFileAlt />}
             title={translate('::Detail')}
             onClick={() => {
               if (onActionView) {
@@ -255,26 +260,26 @@ const FormButtons = (props: {
               }
             }}
             {...(permissions.r ? {} : { disabled: true })}
-          >
-            <FaFileAlt />
-          </Button>
+          ></Button>
         )}
         {(mode == 'edit' || mode == 'new') && (
           <Button
-            variant="solid"
             size="xs"
+            variant="default"
+            className="dx-button dx-button-mode-contained dx-button-normal"
+            icon={<FaSave />}
             title={translate('::Save')}
             onClick={handleSubmit}
             {...(permissions.c || permissions.u ? {} : { disabled: true })}
-          >
-            <FaSave />
-          </Button>
+          ></Button>
         )}
         {checkPermission(gridDto?.gridOptions.permissionDto.c) && !isSubForm && (
           <Button
-            variant="solid"
-            color="green-500"
             size="xs"
+            variant="default"
+            className="dx-button dx-button-mode-contained dx-button-normal"
+            icon={<FaInfo />}
+            color="green-500"
             title={translate('::ListForms.ListForm.Manage')}
             onClick={() => {
               window.open(
@@ -285,9 +290,7 @@ const FormButtons = (props: {
                 isPwaMode ? '_self' : '_blank',
               )
             }}
-          >
-            <FaInfo />
-          </Button>
+          ></Button>
         )}
       </div>
       <Dialog
diff --git a/ui/src/views/form/FormDevExpress.tsx b/ui/src/views/form/FormDevExpress.tsx
index 2fd606c6..93b2fcc4 100644
--- a/ui/src/views/form/FormDevExpress.tsx
+++ b/ui/src/views/form/FormDevExpress.tsx
@@ -24,7 +24,7 @@ const FormDevExpress = (props: {
   const { listFormCode, isSubForm, mode, refForm, formData, formItems, setFormData } = props
 
   return (
-    <form className={`${DX_CLASSNAMES} py-2 px-2`}>
+    <form className={`${DX_CLASSNAMES} ${!isSubForm ? 'px-2' : ''} pb-2`}>
       <FormDx
         ref={refForm}
         formData={formData}
@@ -43,6 +43,7 @@ const FormDevExpress = (props: {
         {formItems.map((formGroupItem, i) => {
           return (
             <GroupItemDx
+            
               key={'formGroupItem-' + i}
               colCount={formGroupItem.colCount}
               colSpan={formGroupItem.colSpan}
@@ -96,6 +97,7 @@ const FormDevExpress = (props: {
                   </SimpleItemDx>
                 ) : (
                   <SimpleItemDx
+                    cssClass='font-semibold'
                     key={'formItem-' + i}
                     {...formItem}
                     editorOptions={{
diff --git a/ui/src/views/form/FormView.tsx b/ui/src/views/form/FormView.tsx
index a1070671..4af02b4e 100644
--- a/ui/src/views/form/FormView.tsx
+++ b/ui/src/views/form/FormView.tsx
@@ -99,7 +99,7 @@ const FormView = (
           />
         )}
       </div>
-      <div className="px-2">
+      <div className={`${isSubForm ? 'px-2' : ''}`}>
         <FormDevExpress
           mode={mode}
           refForm={refForm}
diff --git a/ui/src/views/form/SubForms.tsx b/ui/src/views/form/SubForms.tsx
index 8ca92f7b..45c679aa 100644
--- a/ui/src/views/form/SubForms.tsx
+++ b/ui/src/views/form/SubForms.tsx
@@ -11,6 +11,7 @@ import { GridDto, SubFormDto, SubFormTabTypeEnum } from '@/proxy/form/models'
 import FormEdit from './FormEdit'
 import FormNew from './FormNew'
 import FormView from './FormView'
+import { getList } from '@/services/form.service'
 
 const SubForms = (props: {
   gridDto: GridDto
@@ -78,7 +79,7 @@ const SubForms = (props: {
           }
         }
       }}
-      className='mt-2'
+      className="mt-2"
     >
       <TabList>
         {subForms.map((subForm, i) => {
diff --git a/ui/src/views/list/Card.tsx b/ui/src/views/list/Card.tsx
index 9cc2420d..aeb2dabc 100644
--- a/ui/src/views/list/Card.tsx
+++ b/ui/src/views/list/Card.tsx
@@ -20,20 +20,7 @@ import { Container, Loading } from '@/components/shared'
 import WidgetGroup from '@/components/common/WidgetGroup'
 import { GridExtraFilterState } from './Utils'
 import { useStoreActions, useStoreState } from '@/store/store'
-
-interface CardProps {
-  listFormCode: string
-  searchParams?: URLSearchParams
-  isSubForm?: boolean
-  level?: number
-  refreshData?: () => Promise<void>
-  gridDto?: GridDto
-}
-
-type Option = {
-  value: number
-  label: string
-}
+import { FaTrashCan } from 'react-icons/fa6'
 
 const CardItem = ({
   isSubForm,
@@ -189,6 +176,20 @@ const CardItem = ({
   )
 }
 
+interface CardProps {
+  listFormCode: string
+  searchParams?: URLSearchParams
+  isSubForm?: boolean
+  level?: number
+  refreshData?: () => Promise<void>
+  gridDto?: GridDto
+}
+
+type Option = {
+  value: number
+  label: string
+}
+
 const Card = (props: CardProps) => {
   const { listFormCode, searchParams, gridDto } = props
   const { createSelectDataSource } = useListFormCustomDataSource({})
@@ -287,6 +288,7 @@ const Card = (props: CardProps) => {
       const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, urlSearchParams)
       setGridDataSource(dataSource)
 
+      //listFormStates
       const listFormStates = states.find((a) => a.listFormCode === listFormCode)
       if (listFormStates) {
         setLayoutCount(listFormStates.cardLayoutColumn || 4)
@@ -340,7 +342,7 @@ const Card = (props: CardProps) => {
     if (data.length > 0) {
       window.scrollTo({ top: 0, behavior: 'smooth' })
 
-      if (data.length < 3) {
+      if (data.length < 6) {
         setLayoutCount(data.length)
       }
     }
@@ -379,9 +381,9 @@ const Card = (props: CardProps) => {
                   onFilter(newValue)
                   setPrevValue(newValue)
                 }}
-                className="p-1 pl-6 pr-2 border border-1 outline-none text-xs text-gray-700 
-             dark:text-gray-200 placeholder-gray-400 rounded"
+                className="p-1 pl-6 pr-2 border border-1 outline-none text-xs text-gray-700 dark:text-gray-200 placeholder-gray-400 rounded"
               />
+              
               <Button
                 size="xs"
                 variant={layoutCount === 1 ? 'solid' : 'default'}
diff --git a/ui/src/views/list/Grid.tsx b/ui/src/views/list/Grid.tsx
index 265def9d..22a70b3e 100644
--- a/ui/src/views/list/Grid.tsx
+++ b/ui/src/views/list/Grid.tsx
@@ -66,6 +66,7 @@ import { useToolbar } from './useToolbar'
 import { ImportDashboard } from '@/components/importManager/ImportDashboard'
 import WidgetGroup from '@/components/ui/Widget/WidgetGroup'
 import { GridExtraFilterToolbar } from './GridExtraFilterToolbar'
+import { getList } from '@/services/form.service'
 
 interface GridProps {
   listFormCode: string
@@ -79,7 +80,7 @@ interface GridProps {
 const statedGridPanelColor = 'rgba(50, 200, 200, 0.5)' // kullanici tanimli gridState ile islem gormus gridin paneline ait renk
 
 const Grid = (props: GridProps) => {
-  const { listFormCode, searchParams, isSubForm, level, gridDto } = props
+  const { listFormCode, searchParams, isSubForm, level, gridDto: extGridDto } = props
   const { translate } = useLocalization()
   const { smaller } = useResponsive()
 
@@ -91,6 +92,7 @@ const Grid = (props: GridProps) => {
   const [formData, setFormData] = useState<any>()
   const [mode, setMode] = useState<RowMode>('view')
   const [extraFilters, setExtraFilters] = useState<GridExtraFilterState[]>([])
+  const [gridDto, setGridDto] = useState<GridDto>()
 
   const preloadExportLibs = () => {
     import('exceljs')
@@ -103,7 +105,19 @@ const Grid = (props: GridProps) => {
   const defaultSearchParams = useRef<string | null>(null)
 
   useEffect(() => {
-    // sadece 1 kere açılışta al
+    const initializeGrid = async () => {
+      const response = await getList({ listFormCode })
+      setGridDto(response.data)
+    }
+
+    if (extGridDto === undefined) {
+      initializeGrid()
+    } else {
+      setGridDto(extGridDto)
+    }
+  }, [listFormCode, extGridDto])
+
+  useEffect(() => {
     if (!defaultSearchParams.current) {
       defaultSearchParams.current = searchParams?.get('filter') ?? null
     }
@@ -399,9 +413,8 @@ const Grid = (props: GridProps) => {
       gridRef.current.instance.state(null)
     }
 
-    if (refListFormCode.current && refListFormCode.current !== listFormCode) {
+    if (refListFormCode.current !== listFormCode) {
       setExtraFilters([])
-      defaultSearchParams.current = null
     }
   }, [listFormCode])
 
@@ -493,6 +506,7 @@ const Grid = (props: GridProps) => {
       searchParams?.delete('filter')
     }
 
+
     gridRef.current?.instance.refresh()
   }, [extraFilters])
 
diff --git a/ui/src/views/list/List.tsx b/ui/src/views/list/List.tsx
index 3a208d25..acf41c23 100644
--- a/ui/src/views/list/List.tsx
+++ b/ui/src/views/list/List.tsx
@@ -52,6 +52,10 @@ const List = () => {
     return null
   }
 
+    if (!gridDto) {
+    return null
+  }
+
   return (
     <Container>
       <div
@@ -63,7 +67,7 @@ const List = () => {
         <div className="flex items-center gap-2">
           {MenuIcon}
           <h4 className="text-slate-700 text-sm font-medium leading-none">
-            {translate('::' + gridDto?.gridOptions?.title)}
+            {translate('::' + gridDto?.gridOptions?.title) || ''}
           </h4>
         </div>