Base Store Model değiştirildi.
İçerisine List Form Layout tanımlandı.
This commit is contained in:
parent
74d14268d3
commit
f62c35dec9
4 changed files with 85 additions and 18 deletions
|
|
@ -27,6 +27,12 @@ export interface StoreError {
|
||||||
statusCode?: string
|
statusCode?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface ListState {
|
||||||
|
listFormCode: string
|
||||||
|
layout: 'grid' | 'card' | 'pivot'
|
||||||
|
cardLayoutColumn?: number
|
||||||
|
}
|
||||||
|
|
||||||
export interface BaseStoreModel {
|
export interface BaseStoreModel {
|
||||||
common: {
|
common: {
|
||||||
currentRouteKey: string
|
currentRouteKey: string
|
||||||
|
|
@ -38,6 +44,9 @@ export interface BaseStoreModel {
|
||||||
warning: string[]
|
warning: string[]
|
||||||
aiPosts: Message[]
|
aiPosts: Message[]
|
||||||
}
|
}
|
||||||
|
lists: {
|
||||||
|
states: ListState[]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface BaseStoreActions {
|
export interface BaseStoreActions {
|
||||||
|
|
@ -53,6 +62,9 @@ export interface BaseStoreActions {
|
||||||
addAiPost: Action<BaseStoreModel['messages'], Message>
|
addAiPost: Action<BaseStoreModel['messages'], Message>
|
||||||
setAiPosts: Action<BaseStoreModel['messages'], Message[]>
|
setAiPosts: Action<BaseStoreModel['messages'], Message[]>
|
||||||
}
|
}
|
||||||
|
lists: {
|
||||||
|
setStates: Action<BaseStoreModel['lists'], ListState>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export type BaseModel = BaseStoreModel & BaseStoreActions
|
export type BaseModel = BaseStoreModel & BaseStoreActions
|
||||||
|
|
@ -65,6 +77,9 @@ const initialState: BaseStoreModel = {
|
||||||
warning: [],
|
warning: [],
|
||||||
aiPosts: [],
|
aiPosts: [],
|
||||||
},
|
},
|
||||||
|
lists: {
|
||||||
|
states: [],
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export const baseModel: BaseModel = {
|
export const baseModel: BaseModel = {
|
||||||
|
|
@ -94,11 +109,21 @@ export const baseModel: BaseModel = {
|
||||||
}),
|
}),
|
||||||
addAiPost: action((state, payload) => {
|
addAiPost: action((state, payload) => {
|
||||||
state.aiPosts = [...state.aiPosts, payload]
|
state.aiPosts = [...state.aiPosts, payload]
|
||||||
localStorage.setItem('AiPosts', JSON.stringify(state.aiPosts))
|
|
||||||
}),
|
}),
|
||||||
|
|
||||||
setAiPosts: action((state, payload) => {
|
setAiPosts: action((state, payload) => {
|
||||||
state.aiPosts = payload
|
state.aiPosts = payload
|
||||||
})
|
}),
|
||||||
|
},
|
||||||
|
lists: {
|
||||||
|
...initialState.lists,
|
||||||
|
setStates: action((state, payload) => {
|
||||||
|
const stateId = state.states.findIndex((s) => s.listFormCode === payload.listFormCode)
|
||||||
|
if (stateId !== -1) {
|
||||||
|
state.states[stateId] = payload
|
||||||
|
} else {
|
||||||
|
state.states = [...state.states, payload]
|
||||||
|
}
|
||||||
|
}),
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -65,7 +65,7 @@ export const store = createStore<StoreModel>(
|
||||||
admin: adminModel,
|
admin: adminModel,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
allow: ['auth', 'theme', 'locale'],
|
allow: ['auth', 'theme', 'locale', 'base'],
|
||||||
storage: 'localStorage',
|
storage: 'localStorage',
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ import { useLookupDataSource } from '../form/useLookupDataSource'
|
||||||
import { Container, Loading } from '@/components/shared'
|
import { Container, Loading } from '@/components/shared'
|
||||||
import WidgetGroup from '@/components/common/WidgetGroup'
|
import WidgetGroup from '@/components/common/WidgetGroup'
|
||||||
import { GridExtraFilterState } from './Utils'
|
import { GridExtraFilterState } from './Utils'
|
||||||
|
import { useStoreActions, useStoreState } from '@/store/store'
|
||||||
|
|
||||||
interface CardProps {
|
interface CardProps {
|
||||||
listFormCode: string
|
listFormCode: string
|
||||||
|
|
@ -203,6 +204,9 @@ const Card = (props: CardProps) => {
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
const [extraFilters, setExtraFilters] = useState<GridExtraFilterState[]>([])
|
const [extraFilters, setExtraFilters] = useState<GridExtraFilterState[]>([])
|
||||||
|
|
||||||
|
const { states } = useStoreState((state) => state.base.lists)
|
||||||
|
const { setStates } = useStoreActions((a) => a.base.lists)
|
||||||
|
|
||||||
const lookupCache = useRef<Map<string, any>>(new Map())
|
const lookupCache = useRef<Map<string, any>>(new Map())
|
||||||
const getCachedLookupDataSource = useCallback(
|
const getCachedLookupDataSource = useCallback(
|
||||||
(editorOptions: any, colData: any) => {
|
(editorOptions: any, colData: any) => {
|
||||||
|
|
@ -272,8 +276,7 @@ const Card = (props: CardProps) => {
|
||||||
newParams.delete('filter')
|
newParams.delete('filter')
|
||||||
}
|
}
|
||||||
|
|
||||||
setUrlSearchParams(newParams) // ✅ state güncelleniyor
|
setUrlSearchParams(newParams)
|
||||||
console.log('Applied filter:', filter)
|
|
||||||
},
|
},
|
||||||
[gridDto, urlSearchParams, searchText],
|
[gridDto, urlSearchParams, searchText],
|
||||||
)
|
)
|
||||||
|
|
@ -283,7 +286,12 @@ const Card = (props: CardProps) => {
|
||||||
const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, urlSearchParams)
|
const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, urlSearchParams)
|
||||||
setGridDataSource(dataSource)
|
setGridDataSource(dataSource)
|
||||||
|
|
||||||
setLayoutCount(gridDto.gridOptions.layoutDto.cardLayoutColumn || 4)
|
const listFormStates = states.find((a) => a.listFormCode === listFormCode)
|
||||||
|
if (listFormStates) {
|
||||||
|
setLayoutCount(listFormStates.cardLayoutColumn || 4)
|
||||||
|
} else {
|
||||||
|
setLayoutCount(gridDto.gridOptions.layoutDto.cardLayoutColumn || 4)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [gridDto, listFormCode, urlSearchParams, createSelectDataSource])
|
}, [gridDto, listFormCode, urlSearchParams, createSelectDataSource])
|
||||||
|
|
||||||
|
|
@ -367,7 +375,10 @@ const Card = (props: CardProps) => {
|
||||||
size="xs"
|
size="xs"
|
||||||
variant={layoutCount === 1 ? 'solid' : 'default'}
|
variant={layoutCount === 1 ? 'solid' : 'default'}
|
||||||
className="text-sm"
|
className="text-sm"
|
||||||
onClick={() => setLayoutCount(1)}
|
onClick={() => {
|
||||||
|
setLayoutCount(1)
|
||||||
|
setStates({ listFormCode, layout: 'card', cardLayoutColumn: 1 })
|
||||||
|
}}
|
||||||
title="1 Sütunda Göster"
|
title="1 Sütunda Göster"
|
||||||
>
|
>
|
||||||
1
|
1
|
||||||
|
|
@ -376,7 +387,10 @@ const Card = (props: CardProps) => {
|
||||||
size="xs"
|
size="xs"
|
||||||
variant={layoutCount === 2 ? 'solid' : 'default'}
|
variant={layoutCount === 2 ? 'solid' : 'default'}
|
||||||
className="text-sm"
|
className="text-sm"
|
||||||
onClick={() => setLayoutCount(2)}
|
onClick={() => {
|
||||||
|
setLayoutCount(2)
|
||||||
|
setStates({ listFormCode, layout: 'card', cardLayoutColumn: 2 })
|
||||||
|
}}
|
||||||
title="2 Sütunda Göster"
|
title="2 Sütunda Göster"
|
||||||
>
|
>
|
||||||
2
|
2
|
||||||
|
|
@ -385,7 +399,10 @@ const Card = (props: CardProps) => {
|
||||||
size="xs"
|
size="xs"
|
||||||
variant={layoutCount === 3 ? 'solid' : 'default'}
|
variant={layoutCount === 3 ? 'solid' : 'default'}
|
||||||
className="text-sm"
|
className="text-sm"
|
||||||
onClick={() => setLayoutCount(3)}
|
onClick={() => {
|
||||||
|
setLayoutCount(3)
|
||||||
|
setStates({ listFormCode, layout: 'card', cardLayoutColumn: 3 })
|
||||||
|
}}
|
||||||
title="3 Sütunda Göster"
|
title="3 Sütunda Göster"
|
||||||
>
|
>
|
||||||
3
|
3
|
||||||
|
|
@ -394,7 +411,10 @@ const Card = (props: CardProps) => {
|
||||||
size="xs"
|
size="xs"
|
||||||
variant={layoutCount === 4 ? 'solid' : 'default'}
|
variant={layoutCount === 4 ? 'solid' : 'default'}
|
||||||
className="text-sm"
|
className="text-sm"
|
||||||
onClick={() => setLayoutCount(4)}
|
onClick={() => {
|
||||||
|
setLayoutCount(4)
|
||||||
|
setStates({ listFormCode, layout: 'card', cardLayoutColumn: 4 })
|
||||||
|
}}
|
||||||
title="4 Sütunda Göster"
|
title="4 Sütunda Göster"
|
||||||
>
|
>
|
||||||
4
|
4
|
||||||
|
|
@ -403,7 +423,10 @@ const Card = (props: CardProps) => {
|
||||||
size="xs"
|
size="xs"
|
||||||
variant={layoutCount === 5 ? 'solid' : 'default'}
|
variant={layoutCount === 5 ? 'solid' : 'default'}
|
||||||
className="text-sm"
|
className="text-sm"
|
||||||
onClick={() => setLayoutCount(5)}
|
onClick={() => {
|
||||||
|
setLayoutCount(5)
|
||||||
|
setStates({ listFormCode, layout: 'card', cardLayoutColumn: 5 })
|
||||||
|
}}
|
||||||
title="5 Sütunda Göster"
|
title="5 Sütunda Göster"
|
||||||
>
|
>
|
||||||
5
|
5
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
|
||||||
import Container from '@/components/shared/Container'
|
import Container from '@/components/shared/Container'
|
||||||
import Grid from './Grid'
|
import Grid from './Grid'
|
||||||
import { FaList, FaTable, FaTh, FaUser } from 'react-icons/fa'
|
import { FaList, FaTable, FaTh, FaUser } from 'react-icons/fa'
|
||||||
import { useStoreState } from '@/store/store'
|
import { useStoreActions, useStoreState } from '@/store/store'
|
||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||||
import { GridDto } from '@/proxy/form/models'
|
import { GridDto } from '@/proxy/form/models'
|
||||||
|
|
@ -19,11 +19,15 @@ const List = () => {
|
||||||
const { translate } = useLocalization()
|
const { translate } = useLocalization()
|
||||||
const [searchParams] = useSearchParams()
|
const [searchParams] = useSearchParams()
|
||||||
const listFormCode = params?.listFormCode ?? ''
|
const listFormCode = params?.listFormCode ?? ''
|
||||||
const [viewMode, setViewMode] = useState<'grid' | 'card' | 'pivot'>()
|
|
||||||
const mode = useStoreState((state) => state.theme.mode)
|
const mode = useStoreState((state) => state.theme.mode)
|
||||||
|
const [viewMode, setViewMode] = useState<'grid' | 'card' | 'pivot'>()
|
||||||
|
|
||||||
const [gridDto, setGridDto] = useState<GridDto>()
|
const [gridDto, setGridDto] = useState<GridDto>()
|
||||||
const MenuIcon = useCurrentMenuIcon('w-5 h-5')
|
const MenuIcon = useCurrentMenuIcon('w-5 h-5')
|
||||||
|
|
||||||
|
const { states } = useStoreState((state) => state.base.lists)
|
||||||
|
const { setStates } = useStoreActions((a) => a.base.lists)
|
||||||
|
|
||||||
const initializeGridAsync = async () => {
|
const initializeGridAsync = async () => {
|
||||||
const response = await getList({ listFormCode })
|
const response = await getList({ listFormCode })
|
||||||
setGridDto(response.data)
|
setGridDto(response.data)
|
||||||
|
|
@ -38,7 +42,13 @@ const List = () => {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
setViewMode(gridDto?.gridOptions?.layoutDto.defaultLayout)
|
//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])
|
}, [gridDto])
|
||||||
|
|
||||||
if (!listFormCode) {
|
if (!listFormCode) {
|
||||||
|
|
@ -77,7 +87,10 @@ const List = () => {
|
||||||
<Button
|
<Button
|
||||||
size="xs"
|
size="xs"
|
||||||
variant={viewMode === 'grid' ? 'solid' : 'default'}
|
variant={viewMode === 'grid' ? 'solid' : 'default'}
|
||||||
onClick={() => setViewMode('grid')}
|
onClick={() => {
|
||||||
|
setViewMode('grid')
|
||||||
|
setStates({ listFormCode, layout: 'grid' })
|
||||||
|
}}
|
||||||
title="Grid Görünümü"
|
title="Grid Görünümü"
|
||||||
>
|
>
|
||||||
<FaList className="w-4 h-4" />
|
<FaList className="w-4 h-4" />
|
||||||
|
|
@ -88,7 +101,10 @@ const List = () => {
|
||||||
<Button
|
<Button
|
||||||
size="xs"
|
size="xs"
|
||||||
variant={viewMode === 'card' ? 'solid' : 'default'}
|
variant={viewMode === 'card' ? 'solid' : 'default'}
|
||||||
onClick={() => setViewMode('card')}
|
onClick={() => {
|
||||||
|
setViewMode('card')
|
||||||
|
setStates({ listFormCode, layout: 'card' })
|
||||||
|
}}
|
||||||
title="Kart Görünümü"
|
title="Kart Görünümü"
|
||||||
>
|
>
|
||||||
<FaTh className="w-4 h-4" />
|
<FaTh className="w-4 h-4" />
|
||||||
|
|
@ -98,7 +114,10 @@ const List = () => {
|
||||||
<Button
|
<Button
|
||||||
size="xs"
|
size="xs"
|
||||||
variant={viewMode === 'pivot' ? 'solid' : 'default'}
|
variant={viewMode === 'pivot' ? 'solid' : 'default'}
|
||||||
onClick={() => setViewMode('pivot')}
|
onClick={() => {
|
||||||
|
setViewMode('pivot')
|
||||||
|
setStates({ listFormCode, layout: 'pivot' })
|
||||||
|
}}
|
||||||
title="Pivot Görünümü"
|
title="Pivot Görünümü"
|
||||||
>
|
>
|
||||||
<FaTable className="w-4 h-4" />
|
<FaTable className="w-4 h-4" />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue