Use redux to store sorting key and direction

itenium-be · Jan 20, 2025 · bcf4d9d · bcf4d9d
1 parent a539bf6
commit bcf4d9d
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 18 deletions.
diff --git a/frontend/src/components/controls/table/List.tsx b/frontend/src/components/controls/table/List.tsx
@@ -27,18 +27,21 @@ export const List = ({feature}: ListProps) => {
     }
   }
 
-  if (feature.list.sorter) {
-    data = data.slice().sort(feature.list.sorter);
+  if(feature.list.filter?.state?.sort) {
+    const key = feature.list.filter?.state?.sort.columnName;
+    const cell = feature.list.rows.cells.find(col => col.key === key)
+    if(cell && cell.sort){
+      const sortFunc = cell.sort(feature.list.filter?.state?.sort.direction === "asc")
+      data = data.slice().sort(sortFunc);
+    }
   }
-
-  const handleSort = (sort: any) => {
-    data = data.slice().sort(sort);
-    console.log("sorted", data.map((val) => val.consultantName));
+  else if (feature.list.sorter) {
+    data = data.slice().sort(feature.list.sorter);
   }
 
   return (
     <Table size="sm" className={`table-${feature.key}`}>
-      <ListHeader feature={feature} onSort={handleSort} />
+      <ListHeader feature={feature} />
       <tbody>
         {data.slice(page * listSize, page * listSize + listSize).map(model => (
           <ListRow config={config} model={model} key={model._id} />

diff --git a/frontend/src/components/controls/table/ListHeader.tsx b/frontend/src/components/controls/table/ListHeader.tsx
@@ -1,5 +1,8 @@
-import {IFeature} from '../feature/feature-models';
+import { useDispatch } from 'react-redux';
+import { IFeature} from '../feature/feature-models';
 import { ListHeaderCell } from './ListHeaderCell';
+import { updateAppFilters } from '../../../actions';
+import { ListFilters } from './table-models';
 
 
 type ListHeaderProps<TModel> = {
@@ -10,13 +13,13 @@ type ListHeaderProps<TModel> = {
 
 // eslint-disable-next-line arrow-body-style
 export const ListHeader = ({feature, onSort}: ListHeaderProps<any>) => {
+  const dispatch = useDispatch();
   return (
     <thead>
       <tr>
         {feature.list.rows.cells.map(col => {
           let header: string = '';
           let width: string | undefined | number;
-          let addSort: boolean = false;
           if (!col.header) {
             header = feature.trans.props[col.key];
           } else if (typeof col.header === 'string') {
@@ -26,12 +29,29 @@ export const ListHeader = ({feature, onSort}: ListHeaderProps<any>) => {
             width = col.header.width;
           }
 
-          if(col.sort) {
-            addSort = true;
+          const handleSort = (asc: boolean | undefined) => {
+            if(feature.list.filter?.state){
+              const f = feature.list.filter?.state as ListFilters;
+              if(asc !== undefined){
+                f.sort = {
+                  direction: asc? "asc" : "desc",
+                  columnName: col.key
+                }
+              }else{
+                f.sort = undefined
+              }
+
+              dispatch(updateAppFilters(feature.key, f))
+            }
+
           }
 
           return (
-            <ListHeaderCell key={col.key} width={width} header={header} addSort={addSort} onSort={(asc) => { if(onSort && col.sort) onSort(col.sort(asc)) }}/>
+            <ListHeaderCell
+              key={col.key}
+              width={width}
+              header={header}
+              onSort={handleSort}/>
           );
         })}
       </tr>

diff --git a/frontend/src/components/controls/table/ListHeaderCell.tsx b/frontend/src/components/controls/table/ListHeaderCell.tsx
@@ -6,19 +6,33 @@ import { SortIcon } from "../Icon";
 type ListHeaderCellProps = {
   width: string | undefined | number
   header:string
-  addSort: boolean,
-  onSort?: (asc: boolean) => void
+  onSort?: (asc: boolean | undefined) => void
 }
 
-export const ListHeaderCell = ({width, header, addSort, onSort}: ListHeaderCellProps) => {
+export const ListHeaderCell = ({width, header, onSort}: ListHeaderCellProps) => {
   const [hovered, eventHandlers] = useHover();
   const [asc, setAsc] = useState<boolean | undefined>(undefined)
 
   return (
-
     <th style={{width}} {...eventHandlers}>
       {header ? t(header) : <>&nbsp;</>}
-      {addSort && hovered ? <><SortIcon fa={asc ? "fa fa-arrow-up" : "fa fa-arrow-down"} onClick={() => {setAsc(!asc); if(onSort) onSort(!asc);}} size={1}/></> : <>&nbsp;</>}
+      {asc !== undefined || (onSort && hovered) ? <SortIcon
+        fa={asc ? "fa fa-arrow-up" : "fa fa-arrow-down"}
+        onClick={() => {
+          if(asc === false){
+            setAsc(undefined)
+          }else if (asc === undefined){
+            setAsc(true)
+          }else {
+            setAsc(false)
+          }
+
+          if(onSort){
+            onSort(asc);
+          }
+        }}
+        style={{marginLeft: "3px"}}
+        size={1}/> : <>&nbsp;</>}
     </th>
   )
 }
diff --git a/frontend/src/components/controls/table/table-models.ts b/frontend/src/components/controls/table/table-models.ts
@@ -24,6 +24,10 @@ export interface IList<TModel, TFilterModel extends ListFilters = {}, TTag = {}>
 export type ListFilters = {
   freeText?: string;
   showInactive?: boolean;
+  sort?: {
+    direction: "asc" | "desc"
+    columnName: string
+  }
 }
 
 export type ProjectListFilters = ListFilters;

diff --git a/frontend/src/components/project/models/getProjectFeature.tsx b/frontend/src/components/project/models/getProjectFeature.tsx
@@ -120,7 +120,7 @@ const projectListConfig = (config: ProjectFeatureBuilderConfig): IList<FullProje
     key: 'startDate',
     header: 'project.startDate',
     value: p => formatDate(p.details.startDate),
-    sort: undefined
+    sort: (asc) => (p, p2) => p.details.startDate.valueOf() - p2.details.startDate.valueOf() > 0 ? (asc ? 1 : -1) : (asc ? -1 : 1)
   }, {
     key: 'endDate',
     header: 'project.endDate',