FFT-165 Edit forecast columns filtering (#600)

Co-authored-by: Sam Dudley <[email protected]>

features/show_hide_columns.feature

@@ -1,6 +1,6 @@
 Feature: Show/hide a forecast column
 
-  Scenario: Clicking the NAC column hide link hides the NAC column
-    Given the user wants to hide the NAC column
-     When the user clicks the hide NAC column
-     Then the NAC column is hidden
+  Scenario: Clicking the NAC code column hide link hides the NAC code column
+    Given the user wants to hide the NAC code column
+     When the user clicks the hide NAC code column
+     Then the NAC code column is hidden

features/steps/show_hide_columns.py

@@ -7,27 +7,27 @@
 from features.environment import TEST_COST_CENTRE_CODE, create_test_user
 
 
-@given("the user wants to hide the NAC column")
+@given("the user wants to hide the NAC code column")
 def step_impl(context):
     create_test_user(context)
     context.browser.get(f"{context.base_url}/forecast/edit/{TEST_COST_CENTRE_CODE}/")
 
 
-@when("the user clicks the hide NAC column")
+@when("the user clicks the hide NAC code column")
 def step_impl(context):
     filter_switch_button = WebDriverWait(context.browser, 500).until(
         ec.presence_of_element_located((By.ID, "action-bar-switch"))
     )
 
     filter_switch_button.click()
 
-    show_hide_nac = WebDriverWait(context.browser, 500).until(
-        ec.presence_of_element_located((By.ID, "show_hide_nac"))
+    show_hide_nac_code = WebDriverWait(context.browser, 500).until(
+        ec.presence_of_element_located((By.ID, "show_hide_nac_code"))
     )
-    show_hide_nac.click()
+    show_hide_nac_code.click()
 
 
-@then("the NAC column is hidden")
+@then("the NAC code column is hidden")
 def step_impl(context):
     header_hidden = False
 

front_end/src/Components/ActualsHeaderRow/index.jsx

@@ -1,14 +1,24 @@
 import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
 
 const ActualsHeaderRow = () => {
-  const [numActuals, setNumActuals] = useState(0);
+  const [actualsCount, setActualsCount] = useState(0);
+
+  const hiddenColsCount = useSelector(
+    (state) => state.hiddenCols.hiddenCols.length,
+  );
+
+  // Number of columns from Select All to Budget
+  const colsBeforeMonths = 9;
+  // Number of columns from Apr to Variance %
+  const forecastColCount = 18;
 
   useEffect(() => {
     const timer = () => {
       setTimeout(() => {
         if (window.actuals) {
           if (window.actuals.length > 0) {
-            setNumActuals(window.actuals.length);
+            setActualsCount(window.actuals.length);
           }
         } else {
           timer();
@@ -20,17 +30,23 @@ const ActualsHeaderRow = () => {
 
   return (
     <tr>
-      <th className="govuk-table__head meta-col" colSpan="9"></th>
-      {numActuals > 0 && (
+      <th
+        className="govuk-table__head meta-col"
+        colSpan={colsBeforeMonths - hiddenColsCount}
+      ></th>
+      {actualsCount > 0 && (
         <th
           id="actuals_header"
           className="govuk-table__head meta-col"
-          colSpan={numActuals}
+          colSpan={actualsCount}
         >
           Actuals
         </th>
       )}
-      <th className="govuk-table__head meta-col" colSpan={18 - numActuals}>
+      <th
+        className="govuk-table__head meta-col"
+        colSpan={forecastColCount - actualsCount}
+      >
         Forecast
       </th>
     </tr>

front_end/src/Components/Common/CheckboxItem/index.jsx

@@ -0,0 +1,17 @@
+export default function CheckboxItem({ onChange, checked, name, label }) {
+  return (
+    <div className="govuk-checkboxes__item">
+      <input
+        type="checkbox"
+        name={name}
+        id={`show_hide_${name}`}
+        className="govuk-checkboxes__input"
+        checked={checked}
+        onChange={onChange}
+      />
+      <label className="govuk-label govuk-checkboxes__label" htmlFor={name}>
+        {label}
+      </label>
+    </div>
+  );
+}

front_end/src/Components/EditActionBar/index.jsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { TOGGLE_ITEM, TOGGLE_SHOW_ALL } from "../../Reducers/HiddenCols";
 import { TOGGLE_FILTER } from "../../Reducers/Filter";
+import CheckboxItem from "../Common/CheckboxItem";
 
 const EditActionBar = () => {
   const dispatch = useDispatch();
@@ -42,8 +43,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,94 +61,52 @@ const EditActionBar = () => {
             </div>
 
             <div className="action-bar-cols">
-              <h4 className="govuk-heading-m">Individual columns</h4>
-              <div className="govuk-checkboxes">
-                <div className="govuk-checkboxes__item">
-                  <input
-                    type="checkbox"
-                    name="natural_account_code"
-                    id="show_hide_nac"
-                    className="govuk-checkboxes__input"
-                    checked={hiddenCols.indexOf("natural_account_code") === -1}
-                    onChange={(e) => {
-                      dispatch(TOGGLE_ITEM("natural_account_code"));
-                    }}
-                  />
-                  <label
-                    className="govuk-label govuk-checkboxes__label"
-                    htmlFor="natural_account_code"
-                  >
-                    Natural account code
-                  </label>
-                </div>
-                <div className="govuk-checkboxes__item">
-                  <input
-                    type="checkbox"
-                    name="programme"
-                    className="govuk-checkboxes__input"
-                    checked={hiddenCols.indexOf("programme") === -1}
-                    onChange={(e) => {
-                      dispatch(TOGGLE_ITEM("programme"));
-                    }}
-                  />
-                  <label
-                    className="govuk-label govuk-checkboxes__label"
-                    htmlFor="programme"
-                  >
-                    Programme
-                  </label>
-                </div>
-                <div className="govuk-checkboxes__item">
-                  <input
-                    type="checkbox"
-                    name="analysis1_code"
-                    className="govuk-checkboxes__input"
-                    checked={hiddenCols.indexOf("analysis1_code") === -1}
-                    onChange={(e) => {
-                      dispatch(TOGGLE_ITEM("analysis1_code"));
-                    }}
-                  />
-                  <label
-                    className="govuk-label govuk-checkboxes__label"
-                    htmlFor="analysis1_code"
-                  >
-                    Analysis 1
-                  </label>
-                </div>
-                <div className="govuk-checkboxes__item">
-                  <input
-                    type="checkbox"
-                    name="analysis2_code"
-                    className="govuk-checkboxes__input"
-                    checked={hiddenCols.indexOf("analysis2_code") === -1}
-                    onChange={(e) => {
-                      dispatch(TOGGLE_ITEM("analysis2_code"));
-                    }}
-                  />
-                  <label
-                    className="govuk-label govuk-checkboxes__label"
-                    htmlFor="analysis2_code"
-                  >
-                    Analysis 2
-                  </label>
-                </div>
-                <div className="govuk-checkboxes__item">
-                  <input
-                    type="checkbox"
-                    name="project_code"
-                    className="govuk-checkboxes__input"
-                    checked={hiddenCols.indexOf("project_code") === -1}
-                    onChange={(e) => {
-                      dispatch(TOGGLE_ITEM("project_code"));
-                    }}
-                  />
-                  <label
-                    className="govuk-label govuk-checkboxes__label"
-                    htmlFor="project_code"
-                  >
-                    Project Code
-                  </label>
-                </div>
+              <h4 className="govuk-heading-s">Individual columns</h4>
+              <div className="govuk-checkboxes govuk-checkboxes--small">
+                <CheckboxItem
+                  onChange={() => dispatch(TOGGLE_ITEM("programme_code"))}
+                  checked={hiddenCols.indexOf("programme_code") === -1}
+                  name={"programme_code"}
+                  label={"Programme code"}
+                />
+                <CheckboxItem
+                  onChange={() =>
+                    dispatch(TOGGLE_ITEM("programme_description"))
+                  }
+                  checked={hiddenCols.indexOf("programme_description") === -1}
+                  name={"programme_description"}
+                  label={"Programme description"}
+                />
+                <CheckboxItem
+                  onChange={() => dispatch(TOGGLE_ITEM("nac_code"))}
+                  checked={hiddenCols.indexOf("nac_code") === -1}
+                  name={"nac_code"}
+                  label={"NAC code"}
+                />
+                <CheckboxItem
+                  onChange={() => dispatch(TOGGLE_ITEM("nac_description"))}
+                  checked={hiddenCols.indexOf("nac_description") === -1}
+                  name={"nac_description"}
+                  label={"NAC description"}
+                />
+                <CheckboxItem
+                  onChange={() => dispatch(TOGGLE_ITEM("analysis1_code"))}
+                  checked={hiddenCols.indexOf("analysis1_code") === -1}
+                  name={"analysis1_code"}
+                  label={"Analysis 1"}
+                />
+                <CheckboxItem
+                  onChange={() => dispatch(TOGGLE_ITEM("analysis2_code"))}
+                  checked={hiddenCols.indexOf("analysis2_code") === -1}
+                  name={"analysis2_code"}
+                  label={"Analysis 2"}
+                />
+                <CheckboxItem
+                  onChange={() => dispatch(TOGGLE_ITEM("project_code"))}
+                  checked={hiddenCols.indexOf("project_code") === -1}
+                  name={"project_code"}
+                  label={"Project code"}
+                />
               </div>
             </div>
           </div>

front_end/src/Components/Table/index.jsx

@@ -15,7 +15,7 @@ import OverspendUnderspend from "../../Components/OverspendUnderspend/index";
 import TotalOverspendUnderspend from "../../Components/TotalOverspendUnderspend/index";
 import TotalVariancePercentage from "../../Components/TotalVariancePercentage/index";
 import ActualsHeaderRow from "../../Components/ActualsHeaderRow/index";
-import { getCellId } from "../../Util";
+import { getCellId, monthsToTitleCase } from "../../Util";
 
 import { SET_EDITING_CELL } from "../../Reducers/Edit";
 import {
@@ -64,35 +64,27 @@ 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>
             <TableHeader colName="analysis2_code">Markets</TableHeader>
             <TableHeader colName="project_code">Project Code</TableHeader>
             <TableHeader colName="budget">Budget</TableHeader>
-            <th className="govuk-table__header">Apr</th>
-            <th className="govuk-table__header">May</th>
-            <th className="govuk-table__header">Jun</th>
-            <th className="govuk-table__header">Jul</th>
-            <th className="govuk-table__header">Aug</th>
-            <th className="govuk-table__header">Sep</th>
-            <th className="govuk-table__header">Oct</th>
-            <th className="govuk-table__header">Nov</th>
-            <th className="govuk-table__header">Dec</th>
-            <th className="govuk-table__header">Jan</th>
-            <th className="govuk-table__header">Feb</th>
-            <th className="govuk-table__header">Mar</th>
+            {monthsToTitleCase.map((month) => {
+              return (
+                <th className="govuk-table__header" key={month}>
+                  {month}
+                </th>
+              );
+            })}
             {window.period_display && window.period_display.includes(13) && (
               <th className="govuk-table__header">Adj 1</th>
             )}
@@ -149,31 +141,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 +226,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} />