FFT-165 Edit forecast columns filtering

front_end/src/Components/EditActionBar/index.jsx

@@ -42,8 +42,8 @@ const EditActionBar = () => {
         </div>
         <div className={getClasses()}>
           <div className="action-bar-content">
-            <h3 className="govuk-heading-m">Show/hide columns</h3>
-            <div className="govuk-checkboxes">
+            <h3 className="govuk-heading-s">Show/hide columns</h3>
+            <div className="govuk-checkboxes govuk-checkboxes--small">
               <div className="govuk-checkboxes__item">
                 <input
                   type="checkbox"
@@ -60,41 +60,76 @@ const EditActionBar = () => {
             </div>
 
             <div className="action-bar-cols">
-              <h4 className="govuk-heading-m">Individual columns</h4>
-              <div className="govuk-checkboxes">
+              <h4 className="govuk-heading-s">Individual columns</h4>
+              <div className="govuk-checkboxes govuk-checkboxes--small">
                 <div className="govuk-checkboxes__item">
                   <input
                     type="checkbox"
-                    name="natural_account_code"
+                    name="nac_code"
                     id="show_hide_nac"
                     className="govuk-checkboxes__input"
-                    checked={hiddenCols.indexOf("natural_account_code") === -1}
+                    checked={hiddenCols.indexOf("nac_code") === -1}
                     onChange={(e) => {
-                      dispatch(TOGGLE_ITEM("natural_account_code"));
+                      dispatch(TOGGLE_ITEM("nac_code"));
                     }}
                   />
                   <label
                     className="govuk-label govuk-checkboxes__label"
-                    htmlFor="natural_account_code"
+                    htmlFor="nac_code"
                   >
-                    Natural account code
+                    NAC code
                   </label>
                 </div>
                 <div className="govuk-checkboxes__item">
                   <input
                     type="checkbox"
-                    name="programme"
+                    name="nac_description"
+                    id="show_hide_nac"
+                    className="govuk-checkboxes__input"
+                    checked={hiddenCols.indexOf("nac_description") === -1}
+                    onChange={(e) => {
+                      dispatch(TOGGLE_ITEM("nac_description"));
+                    }}
+                  />
+                  <label
+                    className="govuk-label govuk-checkboxes__label"
+                    htmlFor="nac_description"
+                  >
+                    NAC description
+                  </label>
+                </div>
+                <div className="govuk-checkboxes__item">
+                  <input
+                    type="checkbox"
+                    name="programme_code"
+                    className="govuk-checkboxes__input"
+                    checked={hiddenCols.indexOf("programme_code") === -1}
+                    onChange={(e) => {
+                      dispatch(TOGGLE_ITEM("programme_code"));
+                    }}
+                  />
+                  <label
+                    className="govuk-label govuk-checkboxes__label"
+                    htmlFor="programme_code"
+                  >
+                    Programme code
+                  </label>
+                </div>
+                <div className="govuk-checkboxes__item">
+                  <input
+                    type="checkbox"
+                    name="programme_description"
                     className="govuk-checkboxes__input"
-                    checked={hiddenCols.indexOf("programme") === -1}
+                    checked={hiddenCols.indexOf("programme_description") === -1}
                     onChange={(e) => {
-                      dispatch(TOGGLE_ITEM("programme"));
+                      dispatch(TOGGLE_ITEM("programme_description"));
                     }}
                   />
                   <label
                     className="govuk-label govuk-checkboxes__label"
-                    htmlFor="programme"
+                    htmlFor="programme_description"
                   >
-                    Programme
+                    Programme description
                   </label>
                 </div>
                 <div className="govuk-checkboxes__item">

front_end/src/Components/Table/index.jsx

@@ -64,17 +64,14 @@ function Table({ rowData, sheetUpdating, payrollData }) {
                 )}
               </button>
             </th>
-            <TableHeader colName="programme">Programme code</TableHeader>
-            <TableHeader colName="programme">Programme description</TableHeader>
-            <TableHeader
-              id="natural_account_code_header"
-              colName="natural_account_code"
-            >
-              NAC code
+            <TableHeader colName="programme_code">Programme code</TableHeader>
+            <TableHeader colName="programme_description">
+              Programme description
             </TableHeader>
-            <TableHeader colName="natural_account_code">
-              NAC description
+            <TableHeader id="natural_account_code_header" colName="nac_code">
+              NAC code
             </TableHeader>
+            <TableHeader colName="nac_description">NAC description</TableHeader>
             <TableHeader colName="analysis1_code">
               Contract Reconciliation
             </TableHeader>
@@ -149,31 +146,28 @@ function Table({ rowData, sheetUpdating, payrollData }) {
                     )}
                   </button>
                 </td>
-                <ToggleCell colName={"programme"} rowIndex={rowIndex}>
+                <ToggleCell colName={"programme_code"} rowIndex={rowIndex}>
                   <CellValue rowIndex={rowIndex} cellKey={"programme"} />
                 </ToggleCell>
 
-                <ToggleCell colName={"programme"} rowIndex={rowIndex}>
+                <ToggleCell
+                  colName={"programme_description"}
+                  rowIndex={rowIndex}
+                >
                   <CellValue
                     rowIndex={rowIndex}
                     cellKey={"programme_description"}
                   />
                 </ToggleCell>
 
-                <ToggleCell
-                  colName={"natural_account_code"}
-                  rowIndex={rowIndex}
-                >
+                <ToggleCell colName={"nac_code"} rowIndex={rowIndex}>
                   <CellValue
                     rowIndex={rowIndex}
                     cellKey={"natural_account_code"}
                   />
                 </ToggleCell>
 
-                <ToggleCell
-                  colName={"natural_account_code"}
-                  rowIndex={rowIndex}
-                >
+                <ToggleCell colName={"nac_description"} rowIndex={rowIndex}>
                   <CellValue rowIndex={rowIndex} cellKey={"nac_description"} />
                 </ToggleCell>
 
@@ -237,10 +231,13 @@ function Table({ rowData, sheetUpdating, payrollData }) {
           })}
           <tr>
             <td className="govuk-table__cell total">Totals</td>
-            <InfoCell cellKey={"programme"} ignoreSelection={true} />
-            <InfoCell cellKey={"programme"} ignoreSelection={true} />
-            <InfoCell cellKey={"natural_account_code"} ignoreSelection={true} />
-            <InfoCell cellKey={"natural_account_code"} ignoreSelection={true} />
+            <InfoCell cellKey={"programme_code"} ignoreSelection={true} />
+            <InfoCell
+              cellKey={"programme_description"}
+              ignoreSelection={true}
+            />
+            <InfoCell cellKey={"nac_code"} ignoreSelection={true} />
+            <InfoCell cellKey={"nac_description"} ignoreSelection={true} />
             <InfoCell cellKey={"analysis1_code"} ignoreSelection={true} />
             <InfoCell cellKey={"analysis2_code"} ignoreSelection={true} />
             <InfoCell cellKey={"project_code"} ignoreSelection={true} />

front_end/src/Reducers/HiddenCols.js

@@ -1,13 +1,36 @@
 import { createSlice } from "@reduxjs/toolkit";
-// Use of this lib guarentees no state mutatation
+// Use of this lib guarantees no state mutation
+
+const loadState = () => {
+  try {
+    const serializedState = localStorage.getItem("hiddenCols");
+    return serializedState ? JSON.parse(serializedState) : undefined;
+  } catch (error) {
+    console.log("Could not load state");
+    return undefined;
+  }
+};
+
+const saveState = (state) => {
+  try {
+    const serializedState = JSON.stringify(state);
+    localStorage.setItem("hiddenCols", serializedState);
+  } catch (error) {
+    console.log("Could not save state");
+  }
+};
+
+const defaultState = {
+  hiddenCols: [],
+  showAll: true,
+};
+
+const initialState = loadState() || defaultState;
 
 const hiddenCols = createSlice({
   name: "hiddenCols",
   slice: "hidden",
-  initialState: {
-    hiddenCols: [],
-    showAll: true,
-  },
+  initialState,
   reducers: {
     TOGGLE_ITEM: (state, action) => {
       let index = state.hiddenCols.indexOf(action.payload);
@@ -17,13 +40,16 @@ const hiddenCols = createSlice({
         state.showAll = false;
         state.hiddenCols.push(action.payload);
       }
+      saveState(state);
     },
     TOGGLE_SHOW_ALL: (state, action) => {
       if (state.showAll) {
         state.showAll = false;
         state.hiddenCols = [
-          "natural_account_code",
-          "programme",
+          "nac_code",
+          "nac_description",
+          "programme_code",
+          "programme_description",
           "analysis1_code",
           "analysis2_code",
           "project_code",
@@ -33,6 +59,7 @@ const hiddenCols = createSlice({
         // Turn on all cols
         state.hiddenCols = [];
       }
+      saveState(state);
     },
   },
 });

front_end/styles/action-bar.scss

@@ -26,6 +26,7 @@
   }
 
   .action-bar-content {
+    display: grid;
     border: 16px solid govuk-colour("mid-grey");
     border-top-width: 0;
     background-color: govuk-colour("light-grey");