sozsoft/erp-platform
1
0
Fork 0
Code Issues 5 Pull requests Projects 3 Releases Packages Wiki Activity Actions

Grid Performans çalışmaları

Browse source
This commit is contained in:
Sedat Öztürk 2026-02-04 00:30:51 +03:00
parent 0a5df92812
commit ff3344b3ae
4 changed files with 89 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
api/src/Erp.Platform.Application.Contracts/ListForms/GridOptionsDto/StateStoringDto.cs
View file

@ -15,6 +15,6 @@ public class StateStoringDto
/// <summary> Bir kullanıcının bir değişiklik yapması ile bu değişikliğin kaydedilmesi arasındaki gecikmeyi milisaniye cinsinden belirtir.
/// </summary>
[Range(1500, 5000)]
public int SavingTimeout { get; set; } = 2000;
public int SavingTimeout { get; set; } = 5000;
}

45
ui/src/views/list/Grid.tsx
View file

@ -553,6 +553,11 @@ const Grid = (props: GridProps) => {
[gridDto, cascadeFieldsMap],
)
// StateStoring için storageKey'i memoize et
const storageKey = useMemo(() => {
return gridDto?.gridOptions.stateStoringDto?.storageKey ?? ''
}, [gridDto?.gridOptions.stateStoringDto?.storageKey])
const customSaveState = useCallback(
(state: any) => {
if (isEditingRef.current) {
@ -561,27 +566,29 @@ const Grid = (props: GridProps) => {
return postListFormCustomization({
listFormCode: listFormCode,
customizationType: ListFormCustomizationTypeEnum.GridState,
filterName: `list-${gridRef.current?.instance()?.option('stateStoring')?.storageKey ?? ''}`,
filterName: `list-${storageKey}`,
customizationData: JSON.stringify(state),
}).then(() => {
setGridPanelColor(statedGridPanelColor)
})
},
[listFormCode],
[listFormCode, storageKey],
)
const customLoadState = useCallback(() => {
return getListFormCustomization(
listFormCode,
ListFormCustomizationTypeEnum.GridState,
`list-${gridRef.current?.instance()?.option('stateStoring')?.storageKey ?? ''}`,
`list-${storageKey}`,
).then((response: any) => {
setGridPanelColor(statedGridPanelColor)
if (response.data?.length > 0) {
setGridPanelColor(statedGridPanelColor)
return JSON.parse(response.data[0].customizationData)
}
// Veri yoksa null dön (DevExtreme bunu default state olarak algılar)
return null
})
}, [listFormCode])
}, [listFormCode, storageKey])
useEffect(() => {
if (gridRef?.current) {
@ -778,12 +785,11 @@ const Grid = (props: GridProps) => {
const instance = gridRef?.current?.instance()
if (instance) {
instance.option('remoteOperations', {
groupPaging: true,
paging: true,
filtering: true,
sorting: true,
paging: true,
grouping: true,
summary: true,
grouping: false,
summary: false,
})
instance.option('dataSource', gridDataSource)
}
@ -824,9 +830,13 @@ const Grid = (props: GridProps) => {
stateStoring.customLoad = () => customLoadStateRef.current()
}
instance.option('stateStoring', stateStoring)
instance.state(null)
// State'i yükle - dataSource ve columns hazır olduğunda
if (gridDataSource && columnData) {
instance.state(undefined) // undefined = reload from storage
}
}
}, [gridDto]) // Sadece gridDto'ya bağlı
}, [gridDto, gridDataSource, columnData]) // dataSource ve columns hazır olduğunda state yükle
useEffect(() => {
refListFormCode.current = listFormCode
@ -1069,18 +1079,8 @@ const Grid = (props: GridProps) => {
<div className="p-1">
<DataGrid
ref={gridRef as any}
key={`Grid-${listFormCode}-${gridDataSource ? 'loaded' : 'loading'}`}
key={'Grid-' + listFormCode}
id={'Grid-' + listFormCode}
// dataSource={gridDataSource}
// columns={columnData}
// remoteOperations={{
// groupPaging: true,
// filtering: true,
// sorting: true,
// paging: true,
// grouping: true,
// summary: true,
// }}
height={
gridDto.gridOptions.height > 0
? gridDto.gridOptions.height
@ -1162,6 +1162,7 @@ const Grid = (props: GridProps) => {
}
startEditAction={gridDto.gridOptions.editingOptionDto?.startEditAction}
popup={{
deferRendering: true,
animation: {},
title:
(mode === 'new' ? '✚ ' : '🖊️ ') +

42
ui/src/views/list/Tree.tsx
View file

@ -551,6 +551,11 @@ const Tree = (props: TreeProps) => {
}
}
// StateStoring için storageKey'i memoize et
const storageKey = useMemo(() => {
return gridDto?.gridOptions.stateStoringDto?.storageKey ?? ''
}, [gridDto?.gridOptions.stateStoringDto?.storageKey])
const customSaveState = useCallback(
(state: any) => {
if (isEditingRef.current) {
@ -559,29 +564,29 @@ const Tree = (props: TreeProps) => {
return postListFormCustomization({
listFormCode: listFormCode,
customizationType: ListFormCustomizationTypeEnum.GridState,
filterName: `tree-${gridRef.current?.instance().option('stateStoring')?.storageKey ?? ''}`,
filterName: `tree-${storageKey}`,
customizationData: JSON.stringify(state),
}).then(() => {
setGridPanelColor(statedGridPanelColor)
})
},
[listFormCode],
[listFormCode, storageKey],
)
const customLoadState = useCallback(
() =>
getListFormCustomization(
listFormCode,
ListFormCustomizationTypeEnum.GridState,
`tree-${gridRef.current?.instance().option('stateStoring')?.storageKey ?? ''}`,
).then((response: any) => {
const customLoadState = useCallback(() => {
return getListFormCustomization(
listFormCode,
ListFormCustomizationTypeEnum.GridState,
`tree-${storageKey}`,
).then((response: any) => {
if (response.data?.length > 0) {
setGridPanelColor(statedGridPanelColor)
if (response.data?.length > 0) {
return JSON.parse(response.data[0].customizationData)
}
}),
[listFormCode],
)
return JSON.parse(response.data[0].customizationData)
}
// Veri yoksa null dön (DevExtreme bunu default state olarak algılar)
return null
})
}, [listFormCode, storageKey])
// StateStoring fonksiyonlarını ref'e kaydet - Grid'deki gibi
const customSaveStateRef = useRef(customSaveState)
@ -754,7 +759,12 @@ const Tree = (props: TreeProps) => {
stateStoring.customLoad = () => customLoadStateRef.current()
}
gridRef?.current?.instance().option('stateStoring', stateStoring)
}, [columnData])
// State'i yükle - dataSource ve columns hazır olduğunda
if (treeListDataSource && columnData) {
gridRef?.current?.instance().state(undefined) // undefined = reload from storage
}
}, [columnData, treeListDataSource, gridDto]) // dataSource ve columns hazır olduğunda state yükle
return (
<>

78
ui/src/views/list/useListFormCustomDataSource.ts
View file

@ -275,50 +275,50 @@ const useListFormCustomDataSource = ({
return null
}
},
totalCount: async (loadOptions) => {
const parameters = getLoadOptions(loadOptions, {
listFormCode,
filter: '',
createDeleteQuery: searchParams?.get('createDeleteQuery'),
group: '',
})
// totalCount: async (loadOptions) => {
// const parameters = getLoadOptions(loadOptions, {
// listFormCode,
// filter: '',
// createDeleteQuery: searchParams?.get('createDeleteQuery'),
// group: '',
// })
// 1. Default filter'ı al
const defaultFilter = searchParams?.get('filter')
? JSON.parse(searchParams.get('filter')!)
: null
// // 1. Default filter'ı al
// const defaultFilter = searchParams?.get('filter')
// ? JSON.parse(searchParams.get('filter')!)
// : null
let combinedFilter: any = parameters.filter
// let combinedFilter: any = parameters.filter
// 2. Eğer hem default hem de grid filter varsa merge et
if (defaultFilter && combinedFilter) {
combinedFilter = [defaultFilter, 'and', combinedFilter]
} else if (defaultFilter) {
combinedFilter = defaultFilter
}
// // 2. Eğer hem default hem de grid filter varsa merge et
// if (defaultFilter && combinedFilter) {
// combinedFilter = [defaultFilter, 'and', combinedFilter]
// } else if (defaultFilter) {
// combinedFilter = defaultFilter
// }
if (combinedFilter && combinedFilter.length > 0) {
parameters.filter = JSON.stringify(combinedFilter)
} else {
delete parameters.filter // hiç göndermesin
}
// if (combinedFilter && combinedFilter.length > 0) {
// parameters.filter = JSON.stringify(combinedFilter)
// } else {
// delete parameters.filter // hiç göndermesin
// }
try {
const response = await dynamicFetch('list-form-select/select', 'GET', parameters)
return response.data.totalCount
} catch (error: any) {
// toast.push(
// <Notification type="danger" duration={2000}>
// TotalCount error
// {error.toString()}
// </Notification>,
// {
// placement: 'top-end',
// },
// )
return null
}
},
// try {
// const response = await dynamicFetch('list-form-select/select', 'GET', parameters)
// return response.data.totalCount
// } catch (error: any) {
// // toast.push(
// // <Notification type="danger" duration={2000}>
// // TotalCount error
// // {error.toString()}
// // </Notification>,
// // {
// // placement: 'top-end',
// // },
// // )
// return null
// }
// },
byKey: async (key) => {
const parameters = getLoadOptions(
{ key },