List üzerindeki Toogle butonlar düzeltildi.
This commit is contained in:
parent
85a14f580c
commit
d4f994b7b1
2 changed files with 121 additions and 119 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue