save grid sorting

NoelKova · NoelKova · commit 7c1017780962 · 2025-07-30T15:56:28.000+02:00
diff --git a/apps/sensenet/src/components/MainRouter.tsx b/apps/sensenet/src/components/MainRouter.tsx
@@ -1,6 +1,7 @@
 import { LoadSettingsContextProvider } from '@sensenet/hooks-react'
 import React, { lazy, Suspense } from 'react'
 import { Route, Switch } from 'react-router-dom'
+import { GridKeyEnum } from '../../src/components/grid/enums/GridKey.enum'
 import { PATHS } from '../application-paths'
 import { InvalidPathErrorBoundary } from './content/InvalidPathErrorBoundary'
 import { ErrorBoundary } from './error-boundary'
@@ -42,6 +43,7 @@ export const MainRouter = () => {
                 showPageTitle
                 rootPath={PATHS.contentTemplates.snPath}
                 colDef={contentTemplatesColumnDefs}
+                gridKey={GridKeyEnum.CONTENTTEMPLATES}
               />
             </InvalidPathErrorBoundary>
           </Route>
diff --git a/apps/sensenet/src/components/content-list/contenttype-list.tsx b/apps/sensenet/src/components/content-list/contenttype-list.tsx
@@ -1,6 +1,7 @@
 import { Switch } from '@sensenet/controls-react'
 import { useRepository } from '@sensenet/hooks-react'
 import React, { lazy, useState } from 'react'
+import { GridKeyEnum } from '../../../src/components/grid/enums/GridKey.enum'
 import { PATHS } from '../../application-paths'
 import { contentTypesColumnDefs } from '../grid/Cols/ColumnDefs.'
 
@@ -41,15 +42,8 @@ const ContentTypeList: React.FC = () => {
     <ContentComponent
       renderBeforeGrid={renderBeforeGrid}
       colDef={contentTypesColumnDefs}
+      gridKey={GridKeyEnum.CONTENTTYPES}
       rootPath={PATHS.contentTypes.snPath}
-      fieldsToDisplay={[
-        { field: 'DisplayName' },
-        { field: 'Name' },
-        { field: 'Description' },
-        { field: 'ParentTypeName' as any },
-        { field: 'ModificationDate' },
-        { field: 'ModifiedBy' },
-      ]}
       loadChildrenSettings={{
         select: ['DisplayName', 'Name', 'Description', 'ParentTypeName' as any, 'ModificationDate', 'ModifiedBy'],
         query: contentTypeQuery,
diff --git a/apps/sensenet/src/components/content/CustomContent.tsx b/apps/sensenet/src/components/content/CustomContent.tsx
@@ -1,6 +1,7 @@
 import { ConstantContent } from '@sensenet/client-core'
 import React, { FunctionComponent, useContext, useEffect } from 'react'
 import { useRouteMatch } from 'react-router-dom'
+import { GridKeyEnum } from '../../../src/components/grid/enums/GridKey.enum'
 import { ResponsivePersonalSettings } from '../../context'
 import { useTreeNavigation } from '../../hooks/use-tree-navigation'
 import { contentExplorerColumnDefs } from '../grid/Cols/ColumnDefs.'
@@ -28,6 +29,7 @@ export const CustomContent: FunctionComponent<ContentProps> = ({ rootPath }) =>
         <Explore
           currentPath={currentPath}
           colDef={contentExplorerColumnDefs}
+          gridKey={GridKeyEnum.CONTENT}
           onNavigate={onNavigate}
           rootPath={path}
           fieldsToDisplay={customDrawer?.settings.columns}
diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx
@@ -14,14 +14,14 @@ import { ColDef } from 'ag-grid-community'
 import { clsx } from 'clsx'
 import React, { useContext, useRef, useState } from 'react'
 import { useHistory } from 'react-router'
+import { GridKeyEnum } from '../../../src/components/grid/enums/GridKey.enum'
 import { ResponsivePersonalSettings } from '../../context'
 import { useGlobalStyles } from '../../globalStyles'
 import { useQuery, useSelectionService, useSnRoute } from '../../hooks'
 import { getPrimaryActionUrl, navigateToAction } from '../../services'
 import { ContentBreadcrumbs } from '../ContentBreadcrumbs'
 import { DocumentViewer } from '../document-viewer'
 import { EditBinary } from '../edit/edit-binary'
-import { contentColumnDefs } from '../grid/Cols/ColumnDefs.'
 import { Grid } from '../grid/Grid'
 import { SimpleTree } from '../tree/simpletree'
 import { BrowseView, EditView, ImageView, NewView, PermissionView, VersionView } from '../view-controls'
@@ -125,7 +125,8 @@ export type ExploreProps = {
   alwaysRefreshChildren?: boolean
   showPageTitle?: boolean
   disableColumnSettings?: boolean
-  colDef?: ColDef[]
+  colDef: ColDef[]
+  gridKey: GridKeyEnum
 }
 
 export function Explore({
@@ -141,6 +142,7 @@ export function Explore({
   alwaysRefreshChildren,
   disableColumnSettings,
   colDef,
+  gridKey,
 }: ExploreProps) {
   const theme = useTheme()
   const selectionService = useSelectionService()
@@ -261,7 +263,8 @@ export function Explore({
           onActivateItem={onActivateItemOverride}
           onActiveItemChange={(item) => selectionService.activeContent.setValue(item)}
           parentIdOrPath={currentPath}
-          colDef={colDef ?? contentColumnDefs}
+          colDef={colDef}
+          gridKey={gridKey}
         />
       </>
     )
diff --git a/apps/sensenet/src/components/content/index.tsx b/apps/sensenet/src/components/content/index.tsx
@@ -2,9 +2,11 @@ import { ConstantContent } from '@sensenet/client-core'
 import { tuple } from '@sensenet/client-utils'
 import React, { FunctionComponent, useContext, useEffect } from 'react'
 import { useRouteMatch } from 'react-router-dom'
+import { GridKeyEnum } from '../../../src/components/grid/enums/GridKey.enum'
 import { ResponsivePersonalSettings } from '../../context'
 import { useLocalization } from '../../hooks'
 import { useTreeNavigation } from '../../hooks/use-tree-navigation'
+import { contentColumnDefs } from '../grid/Cols/ColumnDefs.'
 import { PageTitle } from '../PageTitle'
 import { useTreeLoading } from '../tree/Contexts/TreeLoadingProvider'
 import { Explore, ExploreProps } from './Explore'
@@ -13,24 +15,31 @@ export const BrowseType = tuple('explorer')
 
 type ContentProps = Partial<ExploreProps>
 
-export const Content: FunctionComponent<ContentProps> = ({ rootPath, showPageTitle, ...props }) => {
+export const Content: FunctionComponent<ContentProps> = (props) => {
   const routeMatch = useRouteMatch<{ browseType: string; action?: string }>()
   const settings = useContext(ResponsivePersonalSettings)
-  const path = rootPath || settings.content.root || ConstantContent.PORTAL_ROOT.Path
+  const path = props.rootPath || settings.content.root || ConstantContent.PORTAL_ROOT.Path
   const { currentPath, onNavigate } = useTreeNavigation(path)
   const localization = useLocalization().pageTitles
 
   const { setEnabledPath } = useTreeLoading()
   useEffect(() => {
-    setEnabledPath(rootPath ?? '')
-  }, [rootPath, setEnabledPath])
+    setEnabledPath(props.rootPath ?? '')
+  }, [props.rootPath, setEnabledPath])
 
   switch (routeMatch.params.browseType) {
     default:
       return (
         <>
-          {showPageTitle ? <PageTitle title={localization[currentPath as keyof typeof localization]} /> : null}
-          <Explore currentPath={currentPath} onNavigate={onNavigate} rootPath={path} {...props} />
+          {props.showPageTitle ? <PageTitle title={localization[currentPath as keyof typeof localization]} /> : null}
+          <Explore
+            currentPath={currentPath}
+            onNavigate={onNavigate}
+            rootPath={path}
+            {...props}
+            colDef={props.colDef ?? contentColumnDefs}
+            gridKey={props.gridKey ?? GridKeyEnum.OTHER}
+          />
         </>
       )
   }
diff --git a/apps/sensenet/src/components/grid/Cols/ColumnDefs..tsx b/apps/sensenet/src/components/grid/Cols/ColumnDefs..tsx
@@ -315,7 +315,6 @@ export const trashColumnDefs: ColDef[] = [
     filter: true,
     sortable: true,
     resizable: true,
-    sort: 'desc',
   },
   {
     headerName: 'Actions',
diff --git a/apps/sensenet/src/components/grid/Grid.tsx b/apps/sensenet/src/components/grid/Grid.tsx
@@ -15,7 +15,6 @@ import React, { useCallback, useContext, useEffect, useRef, useState } from 'rea
 import { useSelectionService } from '../../hooks'
 import { ContentContextMenu } from '../context-menu/content-context-menu'
 import { DropFileArea } from '../DropFileArea'
-import { contentColumnDefs } from './Cols/ColumnDefs.'
 import { GridProps } from './Props/GridProps'
 import { useGridLoading } from './Providers/GridLoadingProvider'
 
@@ -44,7 +43,7 @@ export function Grid<T extends GenericContent = GenericContent>(props: GridProps
   const columnApi = useRef<ColumnApi | null>(null)
   const gridRef = useRef<HTMLDivElement>(null)
   const fixedColumns: string[] = ['0', 'Icon', 'Actions']
-  const [columnDefs, setColumnDefs] = useState<ColDef[]>(props.colDef ?? contentColumnDefs)
+  const [columnDefs, setColumnDefs] = useState<ColDef[]>(props.colDef)
   const loadingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
   const setLoadingWithMinDuration = useCallback(
@@ -136,11 +135,32 @@ export function Grid<T extends GenericContent = GenericContent>(props: GridProps
     }
   }
 
+  const restoreSortModel = () => {
+    if (columnApi.current) {
+      const sortModelString = localStorage.getItem(`sortModel-${props.gridKey}`)
+      if (sortModelString) {
+        const sortModel = JSON.parse(sortModelString)
+        console.log('props.gridKey:', props.gridKey)
+        console.log('sortModel:', sortModel)
+        sortModel.forEach((s: { colId: string; sort: 'asc' | 'desc' }) => {
+          const col = columnApi.current!.getColumnState().find((c) => c.colId === s.colId)
+          if (col) {
+            columnApi.current!.applyColumnState({
+              state: [{ colId: s.colId, sort: s.sort }],
+              applyOrder: false,
+            })
+          }
+        })
+      }
+    }
+  }
+
   const onGridReady = (params: GridReadyEvent) => {
     gridApi.current = params.api
     columnApi.current = params.columnApi
     restoreColumnFlexRatios()
-    setLoadingWithMinDuration(false) // Reset loading when grid is ready
+    restoreSortModel()
+    setLoadingWithMinDuration(false)
   }
 
   useEffect(() => {
@@ -149,6 +169,19 @@ export function Grid<T extends GenericContent = GenericContent>(props: GridProps
     }
   }, [props.colDef])
 
+  const onSortChanged = useCallback(() => {
+    if (columnApi.current) {
+      const sortModel = columnApi.current
+        .getColumnState()
+        .filter((c) => c.sort)
+        .map((c) => ({
+          colId: c.colId,
+          sort: c.sort,
+        }))
+      localStorage.setItem(`sortModel-${props.gridKey}`, JSON.stringify(sortModel))
+    }
+  }, [props.gridKey])
+
   return (
     <DropFileArea parentContent={parentContent} style={{ height: '100%', overflow: 'hidden' }}>
       {isGridLoading && (
@@ -175,6 +208,7 @@ export function Grid<T extends GenericContent = GenericContent>(props: GridProps
           onSelectionChanged={onSelectionChanged}
           onCellContextMenu={(event) => onContextMenu(event)}
           onColumnResized={onColumnResized}
+          onSortChanged={onSortChanged}
           suppressNoRowsOverlay={true}
         />
       </div>
diff --git a/apps/sensenet/src/components/grid/Props/GridProps.tsx b/apps/sensenet/src/components/grid/Props/GridProps.tsx
@@ -21,4 +21,5 @@ export interface GridProps<T extends GenericContent> {
   containerProps?: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
   disableColumnSettings?: boolean
   colDef: ColDef[]
+  gridKey: string
 }
diff --git a/apps/sensenet/src/components/grid/enums/GridKey.enum.ts b/apps/sensenet/src/components/grid/enums/GridKey.enum.ts
@@ -0,0 +1,14 @@
+export enum GridKeyEnum {
+  CONTENT = 'Content',
+  USERS = 'Users',
+  GROUPS = 'Groups',
+  SAVEDQUERIES = 'SavedQueries',
+  TRASH = 'Trash',
+  CONTENTTYPES = 'ContentTypes',
+  CONTENTTEMPLATES = 'ContentTemplates',
+  SETTINGS = 'Settings',
+  LOCALIZATION = 'Localization',
+  WEBHOOKS = 'WebHooks',
+  SEARCHRESULTS = 'SearchResults',
+  OTHER = 'Other',
+}
diff --git a/apps/sensenet/src/components/search/saved-queries.tsx b/apps/sensenet/src/components/search/saved-queries.tsx
@@ -4,6 +4,7 @@ import { Query } from '@sensenet/default-content-types'
 import { LoadSettingsContext, useRepository, useRepositoryEvents } from '@sensenet/hooks-react'
 import React, { useContext, useEffect, useState } from 'react'
 import { useHistory, useRouteMatch } from 'react-router-dom'
+import { GridKeyEnum } from '../../../src/components/grid/enums/GridKey.enum'
 import { PATHS } from '../../application-paths'
 import { useLocalization, useQuery, useSelectionService } from '../../hooks'
 import { navigateToAction } from '../../services'
@@ -82,7 +83,11 @@ export default function SavedQueries() {
         return (
           <>
             {queries.length > 0 ? (
-              <Content rootPath={PATHS.savedQueries.snPath} colDef={savedQueriesColumnDefs} />
+              <Content
+                rootPath={PATHS.savedQueries.snPath}
+                colDef={savedQueriesColumnDefs}
+                gridKey={GridKeyEnum.SAVEDQUERIES}
+              />
             ) : (
               <Typography variant="subtitle1" style={{ padding: '0 15px' }}>
                 {localization.noSavedQuery}
diff --git a/apps/sensenet/src/components/search/search-results.tsx b/apps/sensenet/src/components/search/search-results.tsx
@@ -20,6 +20,7 @@ import {
 } from '@sensenet/hooks-react'
 import React, { useContext } from 'react'
 import { useHistory } from 'react-router-dom'
+import { GridKeyEnum } from '../../../src/components/grid/enums/GridKey.enum'
 import { ResponsivePersonalSettings } from '../../context'
 import { useSearch } from '../../context/search'
 import { useSelectionService, useSnRoute } from '../../hooks'
@@ -111,6 +112,7 @@ export const SearchResults = ({
           <CurrentAncestorsContext.Provider value={[]}>
             <Grid
               colDef={searchColumnDefs}
+              gridKey={GridKeyEnum.SEARCHRESULTS}
               parentIdOrPath={0}
               onParentChange={(p) => {
                 history.push(getPrimaryActionUrl({ content: p, repository, uiSettings, location, snRoute }))
diff --git a/apps/sensenet/src/components/settings/index.tsx b/apps/sensenet/src/components/settings/index.tsx
@@ -3,6 +3,7 @@ import SettingsIcon from '@material-ui/icons/Settings'
 import { clsx } from 'clsx'
 import React, { lazy } from 'react'
 import { matchPath, NavLink, useHistory, useLocation, useRouteMatch } from 'react-router-dom'
+import { GridKeyEnum } from '../../../src/components/grid/enums/GridKey.enum'
 import { PATHS, resolvePathParams } from '../../application-paths'
 import { globals, useGlobalStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
@@ -11,7 +12,6 @@ import { ApiKeys } from './api-keys'
 import { Stats } from './stats'
 
 const ContentComponent = lazy(() => import(/* webpackChunkName: "content" */ '../content'))
-const SetupComponent = lazy(() => import(/* webpackChunkName: "setup" */ './setup'))
 const PersonalSettingsEditor = lazy(
   () => import(/* webpackChunkName: "PersonalSettingsEditor" */ './personal-settings-editor'),
 )
@@ -91,6 +91,7 @@ export const Settings: React.FunctionComponent = () => {
             disableColumnSettings
             rootPath={PATHS.localization.snPath}
             colDef={localizationColumnDefs}
+            gridKey={GridKeyEnum.LOCALIZATION}
           />
         )
       case 'settings':
@@ -99,6 +100,7 @@ export const Settings: React.FunctionComponent = () => {
             disableColumnSettings
             rootPath={PATHS.settings.snPath}
             colDef={getSettingsColumnDefs(history)}
+            gridKey={GridKeyEnum.SETTINGS}
           />
         )
       case 'adminui':
@@ -118,6 +120,7 @@ export const Settings: React.FunctionComponent = () => {
               { field: 'SuccessfulCalls' } as any,
             ]}
             colDef={webHooksColumnDefs}
+            gridKey={GridKeyEnum.WEBHOOKS}
             schema={'WebHookSubscription'}
           />
         )
diff --git a/apps/sensenet/src/components/trash/Trash.tsx b/apps/sensenet/src/components/trash/Trash.tsx
@@ -2,6 +2,7 @@ import { ODataParams } from '@sensenet/client-core'
 import { GenericContent, TrashBin } from '@sensenet/default-content-types'
 import React, { memo, useContext } from 'react'
 import { useHistory } from 'react-router-dom'
+import { GridKeyEnum } from '../../../src/components/grid/enums/GridKey.enum'
 import { PATHS, resolvePathParams } from '../../application-paths'
 import { ResponsivePersonalSettings } from '../../context'
 import { useLoadContent } from '../../hooks/use-loadContent'
@@ -42,6 +43,7 @@ const Trash = memo(() => {
       <Content
         rootPath={PATHS.trash.snPath}
         colDef={trashColumnDefs}
+        gridKey={GridKeyEnum.TRASH}
         fieldsToDisplay={[
           { field: 'DisplayName' as keyof GenericContent },
           { field: 'Locked' as keyof GenericContent },
diff --git a/apps/sensenet/src/components/users-and-groups.tsx b/apps/sensenet/src/components/users-and-groups.tsx
@@ -2,6 +2,7 @@ import People from '@material-ui/icons/People'
 import Person from '@material-ui/icons/Person'
 import { GenericContent } from '@sensenet/default-content-types'
 import React, { FunctionComponent } from 'react'
+import { GridKeyEnum } from '../../src/components/grid/enums/GridKey.enum'
 import { PATHS } from '../application-paths'
 import { useGridSwitcher, useLocalization } from '../hooks'
 import { Content } from './content'
@@ -23,6 +24,7 @@ const gridSwitcherConfig = [
     ],
     loadSettings: { filter: "isOf('User')", expand: ['DirectRoles', 'AllRoles', 'CheckedOutTo'] as any },
     colDef: userColumnDefs,
+    gridKey: GridKeyEnum.USERS,
   },
   {
     icon: <People />,
@@ -37,6 +39,7 @@ const gridSwitcherConfig = [
     ],
     loadSettings: { filter: "isOf('Group')" },
     colDef: groupColumnDefs,
+    gridKey: GridKeyEnum.GROUPS,
   },
 ]
 
@@ -50,6 +53,7 @@ const UsersAndGroups: FunctionComponent = () => {
       <Content
         rootPath={PATHS.usersAndGroups.snPath}
         colDef={gridSwitcher.activeItem.colDef}
+        gridKey={gridSwitcher.activeItem.gridKey}
         fieldsToDisplay={gridSwitcher.activeItem.fieldsToDisplay as any}
         renderBeforeGrid={(): JSX.Element => <div style={{ margin: '10px 12px' }}>{gridSwitcher.renderButtons()}</div>}
         schema={gridSwitcher.activeItem.schema}
diff --git a/apps/sensenet/src/hooks/use-grid-switcher.tsx b/apps/sensenet/src/hooks/use-grid-switcher.tsx
@@ -4,6 +4,7 @@ import { GenericContent } from '@sensenet/default-content-types'
 import { ColumnSetting } from '@sensenet/list-controls-react/src/ContentList/content-list-base-props'
 import { ColDef } from 'ag-grid-community'
 import React, { useState } from 'react'
+import { GridKeyEnum } from '../../src/components/grid/enums/GridKey.enum'
 
 interface GridSwitcherItem {
   icon?: JSX.Element
@@ -13,6 +14,7 @@ interface GridSwitcherItem {
   fieldsToDisplay: Array<ColumnSetting<GenericContent>>
   loadSettings?: ODataParams<GenericContent>
   colDef: ColDef[]
+  gridKey: GridKeyEnum
 }
 
 interface GridSwitcherProps {

Original file line number	Diff line number	Diff line change
`@@ -315,7 +315,6 @@ export const trashColumnDefs: ColDef[] = [`
`315`	`315`	`filter: true,`
`316`	`316`	`sortable: true,`
`317`	`317`	`resizable: true,`
`318`		`- sort: 'desc',`
`319`	`318`	`},`
`320`	`319`	`{`
`321`	`320`	`headerName: 'Actions',`
Original file line number	Diff line number	Diff line change
`@@ -21,4 +21,5 @@ export interface GridProps<T extends GenericContent> {`
`21`	`21`	`containerProps?: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>`
`22`	`22`	`disableColumnSettings?: boolean`
`23`	`23`	`colDef: ColDef[]`
	`24`	`+ gridKey: string`
`24`	`25`	`}`