Merge branch '324-the-new-sort-works-but-is-not-persisted-with-version-234'

Author: RafaelGB

src/cdm/FolderModel.ts

@@ -54,6 +54,7 @@ export type BaseColumn = {
     isMetadata?: boolean;
     isSorted?: boolean;
     isSortedDesc?: boolean;
+    sortIndex?: number;
     isHidden?: boolean;
     skipPersist?: boolean;
     isDragDisabled?: boolean;

src/components/CsvButton.tsx

@@ -1,12 +1,12 @@
-import Button from "@mui/material/Button";
 import { CsvButtonProps } from "cdm/MenuBarModel";
 import {
   normalizeColumnsToCsvHeader,
   normalizeRowsToCsvData,
 } from "parsers/NormalizeRowsToCSV";
 import React from "react";
 import { CSVLink } from "react-csv";
-import DownloadIcon from "components/img/DownloadIcon";
+import DownloadIcon from "@mui/icons-material/Download";
+import { MenuButtonStyle } from "components/styles/NavBarStyles";
 
 const CsvButton = (CsvButtonProps: CsvButtonProps) => {
   const { columns, rows, name } = CsvButtonProps;
@@ -35,7 +35,7 @@ const CsvButton = (CsvButtonProps: CsvButtonProps) => {
         ref={csvLink}
         target="_blank"
       >
-        <DownloadIcon />
+        <DownloadIcon {...MenuButtonStyle} />
         Download CSV
       </CSVLink>
     </>

src/components/NavBar.tsx

@@ -17,6 +17,7 @@ import Toolbar from "@mui/material/Toolbar";
 import { c } from "helpers/StylesHelper";
 import Typography from "@mui/material/Typography";
 import DataviewFilters from "components/reducers/DataviewFilters";
+import { MenuButtonStyle } from "components/styles/NavBarStyles";
 import { SettingsModal } from "Settings";
 
 export function NavBar(navBarProps: NavBarProps) {
@@ -98,11 +99,11 @@ export function NavBar(navBarProps: NavBarProps) {
             }}
           >
             <MenuItem onClick={handleSettingsClick} disableRipple>
-              <SettingsIcon />
+              <SettingsIcon {...MenuButtonStyle} />
               Settings
             </MenuItem>
             <MenuItem onClick={handleOpenAsMarkdownClick} disableRipple>
-              <InsertDriveFileIcon />
+              <InsertDriveFileIcon {...MenuButtonStyle} />
               Open as Markdown
             </MenuItem>
             <MenuItem disableRipple>

src/components/headerActions/handlers/buttons/SortHandlerAction.tsx

@@ -52,9 +52,7 @@ function sortingUpButton(headerActionResponse: HeaderActionResponse) {
       tablecolumn.isSorted && !tablecolumn.isSortedDesc ? false : true;
     tablecolumn.isSortedDesc = false;
     hooks.setExpanded(false);
-    // Update state
-    columnActions.alterSorting(tablecolumn);
-
+    // Save on memory
     let currentSorting = [...table.options.state.sorting];
     if (tablecolumn.isSorted) {
       currentSorting.remove(
@@ -64,12 +62,16 @@ function sortingUpButton(headerActionResponse: HeaderActionResponse) {
         id: tablecolumn.id,
         desc: tablecolumn.isSortedDesc,
       });
+      tablecolumn.sortIndex = currentSorting.length;
     } else {
       currentSorting.remove(
         currentSorting.find((s) => s.id === tablecolumn.id)
       );
+      tablecolumn.sortIndex = -1;
     }
     table.setSorting(currentSorting);
+    // Save on disk
+    columnActions.alterSorting(tablecolumn);
   };
   const isAscSorted = column.getIsSorted() === "asc";
   return headerButtonComponent({
@@ -96,8 +98,7 @@ function sortingDownButton(headerActionResponse: HeaderActionResponse) {
     tablecolumn.isSortedDesc = true;
 
     hooks.setExpanded(false);
-    // Update state
-    columnActions.alterSorting(tablecolumn);
+    // Update on memory
     let currentSorting = [...table.options.state.sorting];
     if (tablecolumn.isSorted) {
       currentSorting.remove(
@@ -107,12 +108,16 @@ function sortingDownButton(headerActionResponse: HeaderActionResponse) {
         id: tablecolumn.id,
         desc: tablecolumn.isSortedDesc,
       });
+      tablecolumn.sortIndex = currentSorting.length;
     } else {
       currentSorting.remove(
         currentSorting.find((s) => s.id === tablecolumn.id)
       );
+      tablecolumn.sortIndex = -1;
     }
     table.setSorting(currentSorting);
+    // Update on disk
+    columnActions.alterSorting(tablecolumn);
   };
 
   return headerButtonComponent({

src/components/img/DownloadIcon.tsx

@@ -55,4 +55,11 @@ export const PaginationButtonStyle = {
         },
         backgroundColor: StyleVariables.TEXT_ACCENT,
     }
-}
+}
+
+export const MenuButtonStyle = {
+    sx: {
+        color: StyleVariables.TEXT_ACCENT_HOVER,
+    }
+}
+

src/components/styles/NavBarStyles.ts

@@ -8,10 +8,20 @@ function obtainInitialType(columns: TableColumn[]): InitialType {
         if (column.isSorted) {
             sortElemList.push({
                 id: column.key,
-                desc: column.isSortedDesc
+                desc: column.isSortedDesc,
             });
         }
     });
+    // Sort by index
+    sortElemList.sort((a: ColumnSort, b: ColumnSort) => {
+        const aIndex = columns.find((column: TableColumn) => column.key === a.id)?.sortIndex;
+        const bIndex = columns.find((column: TableColumn) => column.key === b.id)?.sortIndex;
+        if (aIndex === -1 || bIndex === -1) {
+            return 0;
+        }
+        return aIndex - bIndex;
+    });
+
     initialType.sortBy = sortElemList;
     return initialType;
 }

src/helpers/InitialType.ts

@@ -47,6 +47,7 @@ export class MarshallColumnsHandler extends AbstractYamlHandler {
                     this.addError(`There was not label in column ${key}`);
                     column.label = key;
                 }
+
                 if (column.skipPersist === undefined) {
                     column.skipPersist = false;
                 }
@@ -55,6 +56,10 @@ export class MarshallColumnsHandler extends AbstractYamlHandler {
                     column.isHidden = false;
                 }
 
+                if (column.sortIndex === undefined || typeof column.sortIndex !== 'number') {
+                    column.sortIndex = -1;
+                }
+
                 /** CONFIG COLUMN INFO */
                 if (!column.config && !(column.config instanceof Object)) {
                     column.config = DEFAULT_COLUMN_CONFIG;

src/parsers/handlers/marshall/MarshallColumnsHandler.ts

@@ -1,5 +1,6 @@
 import { TableColumn } from "cdm/FolderModel";
 import { ColumnsState, TableActionResponse } from "cdm/TableStateInterface";
+import obtainInitialType from "helpers/InitialType";
 import { AbstractTableAction } from "stateManagement/AbstractTableAction";
 
 export default class AlterSortingColumnHandlerAction extends AbstractTableAction<ColumnsState> {
@@ -11,13 +12,29 @@ export default class AlterSortingColumnHandlerAction extends AbstractTableAction
                 const index = newColumns.findIndex((c) => c.id === column.id);
                 newColumns[index].isSorted = column.isSorted;
                 newColumns[index].isSortedDesc = column.isSortedDesc;
+                newColumns[index].sortIndex = column.sortIndex;
                 view.diskConfig.updateColumnProperties(
                     column.id,
                     {
                         isSorted: column.isSorted,
                         isSortedDesc: column.isSortedDesc,
+                        sortIndex: column.sortIndex,
                     }
                 );
+                // reordering index in case of current was removed
+                if (column.sortIndex === -1) {
+                    const sortedColumns = obtainInitialType(newColumns);
+                    sortedColumns.sortBy.forEach((sortElem, index) => {
+                        view.diskConfig.updateColumnProperties(
+                            sortElem.id,
+                            {
+                                isSorted: true,
+                                isSortedDesc: sortElem.desc,
+                                sortIndex: index,
+                            }
+                        );
+                    });
+                }
                 return { columns: newColumns };
             });