From d4f994b7b17bd96c45ed868e4c94d18ca757e217 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?=
 <76204082+iamsedatozturk@users.noreply.github.com>
Date: Tue, 23 Sep 2025 17:05:42 +0300
Subject: [PATCH] =?UTF-8?q?List=20=C3=BCzerindeki=20Toogle=20butonlar=20d?=
 =?UTF-8?q?=C3=BCzeltildi.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/list/Card.tsx |  29 +++--
 ui/src/views/list/List.tsx | 211 ++++++++++++++++++-------------------
 2 files changed, 121 insertions(+), 119 deletions(-)

diff --git a/ui/src/views/list/Card.tsx b/ui/src/views/list/Card.tsx
index 6a01a7ef..9cc2420d 100644
--- a/ui/src/views/list/Card.tsx
+++ b/ui/src/views/list/Card.tsx
@@ -201,12 +201,18 @@ const Card = (props: CardProps) => {
   const { getLookupDataSource } = useLookupDataSource({ listFormCode })
   const [layoutCount, setLayoutCount] = useState(4)
   const [searchText, setSearchText] = useState('')
+  const [prevValue, setPrevValue] = useState('')
   const [loading, setLoading] = useState(false)
   const [extraFilters, setExtraFilters] = useState<GridExtraFilterState[]>([])
 
   const { states } = useStoreState((state) => state.base.lists)
   const { setStates } = useStoreActions((a) => a.base.lists)
 
+  // props.searchParams varsa onunla başlat
+  const [urlSearchParams, setUrlSearchParams] = useState<URLSearchParams>(
+    searchParams ? new URLSearchParams(searchParams) : new URLSearchParams(),
+  )
+
   const lookupCache = useRef<Map<string, any>>(new Map())
   const getCachedLookupDataSource = useCallback(
     (editorOptions: any, colData: any) => {
@@ -230,12 +236,7 @@ const Card = (props: CardProps) => {
     setCurrentPage(page)
   }
 
-  // props.searchParams varsa onunla başlat
-  const [urlSearchParams, setUrlSearchParams] = useState<URLSearchParams>(
-    searchParams ? new URLSearchParams(searchParams) : new URLSearchParams(),
-  )
-
-  const filtrele = useCallback(
+  const onFilter = useCallback(
     (value?: string) => {
       const text = value !== undefined ? value.trim() : searchText.trim()
 
@@ -363,13 +364,23 @@ const Card = (props: CardProps) => {
                 onChange={(e) => setSearchText(e.target.value)}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') {
-                    filtrele(e.currentTarget.value)
+                    onFilter(e.currentTarget.value)
+                    setPrevValue(e.currentTarget.value.trim()) // Enter ile tetiklenirse güncelle
                   }
                 }}
                 onBlur={(e) => {
-                  filtrele(e.currentTarget.value)
+                  const newValue = e.currentTarget.value.trim()
+
+                  // 1. Değer değişmemişse => hiçbir şey yapma
+                  if (newValue === prevValue) return
+
+                  // 2. Yeni değer boş, ama eskiden değer vardı => filtre temizle
+                  // 3. Yeni değer dolu ve eskisinden farklı => filtre uygula
+                  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"
diff --git a/ui/src/views/list/List.tsx b/ui/src/views/list/List.tsx
index 2d7cf37e..3a208d25 100644
--- a/ui/src/views/list/List.tsx
+++ b/ui/src/views/list/List.tsx
@@ -11,7 +11,6 @@ import Card from './Card'
 import { Button } from '@/components/ui'
 import Pivot from './Pivot'
 import { getList } from '@/services/form.service'
-import { Loading } from '@/components/shared'
 import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
 
 const List = () => {
@@ -28,128 +27,120 @@ const List = () => {
   const { states } = useStoreState((state) => state.base.lists)
   const { setStates } = useStoreActions((a) => a.base.lists)
 
-  const initializeGridAsync = async () => {
-    const response = await getList({ listFormCode })
-    setGridDto(response.data)
-  }
-
   useEffect(() => {
+    const initializeGridAsync = async () => {
+      const response = await getList({ listFormCode })
+      setGridDto(response.data)
+    }
+
     initializeGridAsync()
+      .then(() => {
+        //base içerisine kaydedilen state içerisinden bakılacak
+        const listFormStates = states.find((a) => a.listFormCode === listFormCode)
+        if (listFormStates) {
+          setViewMode(listFormStates.layout || 'grid')
+        } else {
+          setViewMode(gridDto?.gridOptions?.layoutDto.defaultLayout || 'grid')
+        }
+      })
+      .catch((error) => {
+        console.error('Hata oluştu:', error)
+      })
   }, [listFormCode])
 
-  useEffect(() => {
-    if (!gridDto) {
-      return
-    }
-
-    //base içerisine kaydedilen state içerisinden bakılacak
-    const listFormStates = states.find((a) => a.listFormCode === listFormCode)
-    if (listFormStates) {
-      setViewMode(listFormStates.layout)
-    } else {
-      setViewMode(gridDto?.gridOptions?.layoutDto.defaultLayout)
-    }
-  }, [gridDto])
-
   if (!listFormCode) {
     return null
   }
 
   return (
     <Container>
-      {!gridDto ? (
-        <Loading loading={true} />
-      ) : (
-        <>
-          <div
-            className={classNames('flex items-center border-solid gap-1 pb-1', {
-              'border-gray-100': mode === 'light',
-              'border-neutral-700': mode === 'dark',
-            })}
-          >
-            <div className="flex items-center gap-2">
-              {MenuIcon}
-              <h4 className="text-slate-700 text-sm font-medium leading-none">
-                {translate('::' + gridDto?.gridOptions?.title)}
-              </h4>
-            </div>
+      <div
+        className={classNames('flex items-center border-solid gap-1 pb-1', {
+          'border-gray-100': mode === 'light',
+          'border-neutral-700': mode === 'dark',
+        })}
+      >
+        <div className="flex items-center gap-2">
+          {MenuIcon}
+          <h4 className="text-slate-700 text-sm font-medium leading-none">
+            {translate('::' + gridDto?.gridOptions?.title)}
+          </h4>
+        </div>
 
-            {gridDto?.gridOptions?.description === gridDto?.gridOptions?.title ? (
-              <p className="mr-auto"></p>
-            ) : (
-              <p className="text-slate-500 text-xs mr-auto ml-2 leading-none">
-                {translate('::' + gridDto?.gridOptions?.description)}
-              </p>
-            )}
+        {gridDto?.gridOptions?.description === gridDto?.gridOptions?.title ? (
+          <p className="mr-auto"></p>
+        ) : (
+          <p className="text-slate-500 text-xs mr-auto ml-2 leading-none">
+            {translate('::' + gridDto?.gridOptions?.description)}
+          </p>
+        )}
 
-            <div className="flex gap-1">
-              {gridDto?.gridOptions?.layoutDto.grid && (
-                <Button
-                  size="xs"
-                  variant={viewMode === 'grid' ? 'solid' : 'default'}
-                  onClick={() => {
-                    setViewMode('grid')
-                    setStates({ listFormCode, layout: 'grid' })
-                  }}
-                  title="Grid Görünümü"
-                >
-                  <FaList className="w-4 h-4" />
-                </Button>
-              )}
-
-              {gridDto?.gridOptions?.layoutDto.card && (
-                <Button
-                  size="xs"
-                  variant={viewMode === 'card' ? 'solid' : 'default'}
-                  onClick={() => {
-                    setViewMode('card')
-                    setStates({ listFormCode, layout: 'card' })
-                  }}
-                  title="Kart Görünümü"
-                >
-                  <FaTh className="w-4 h-4" />
-                </Button>
-              )}
-              {gridDto?.gridOptions?.layoutDto.pivot && (
-                <Button
-                  size="xs"
-                  variant={viewMode === 'pivot' ? 'solid' : 'default'}
-                  onClick={() => {
-                    setViewMode('pivot')
-                    setStates({ listFormCode, layout: 'pivot' })
-                  }}
-                  title="Pivot Görünümü"
-                >
-                  <FaTable className="w-4 h-4" />
-                </Button>
-              )}
-            </div>
-          </div>
-
-          {viewMode === 'pivot' ? (
-            <Pivot
-              listFormCode={listFormCode}
-              searchParams={searchParams}
-              isSubForm={false}
-              gridDto={gridDto}
-            />
-          ) : viewMode === 'card' ? (
-            <Card
-              listFormCode={listFormCode}
-              searchParams={searchParams}
-              isSubForm={false}
-              gridDto={gridDto}
-            />
-          ) : (
-            <Grid
-              listFormCode={listFormCode}
-              searchParams={searchParams}
-              isSubForm={false}
-              gridDto={gridDto}
-            />
+        <div className="flex gap-1">
+          {gridDto?.gridOptions?.layoutDto.grid && (
+            <Button
+              size="xs"
+              variant={viewMode === 'grid' ? 'solid' : 'default'}
+              onClick={() => {
+                setViewMode('grid')
+                setStates({ listFormCode, layout: 'grid' })
+              }}
+              title="Grid Görünümü"
+            >
+              <FaList className="w-4 h-4" />
+            </Button>
           )}
-        </>
-      )}
+
+          {gridDto?.gridOptions?.layoutDto.card && (
+            <Button
+              size="xs"
+              variant={viewMode === 'card' ? 'solid' : 'default'}
+              onClick={() => {
+                setViewMode('card')
+                setStates({ listFormCode, layout: 'card' })
+              }}
+              title="Kart Görünümü"
+            >
+              <FaTh className="w-4 h-4" />
+            </Button>
+          )}
+          {gridDto?.gridOptions?.layoutDto.pivot && (
+            <Button
+              size="xs"
+              variant={viewMode === 'pivot' ? 'solid' : 'default'}
+              onClick={() => {
+                setViewMode('pivot')
+                setStates({ listFormCode, layout: 'pivot' })
+              }}
+              title="Pivot Görünümü"
+            >
+              <FaTable className="w-4 h-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {viewMode === 'pivot' ? (
+        <Pivot
+          listFormCode={listFormCode}
+          searchParams={searchParams}
+          isSubForm={false}
+          gridDto={gridDto}
+        />
+      ) : viewMode === 'card' ? (
+        <Card
+          listFormCode={listFormCode}
+          searchParams={searchParams}
+          isSubForm={false}
+          gridDto={gridDto}
+        />
+      ) : viewMode === 'grid' ? (
+        <Grid
+          listFormCode={listFormCode}
+          searchParams={searchParams}
+          isSubForm={false}
+          gridDto={gridDto}
+        />
+      ) : null}
     </Container>
   )
 }