List üzerindeki Toogle butonlar düzeltildi.

This commit is contained in:
Sedat ÖZTÜRK 2025-09-23 17:05:42 +03:00
parent 85a14f580c
commit d4f994b7b1
2 changed files with 121 additions and 119 deletions

View file

@ -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"

View file

@ -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>
)
}