Basic setup for updating pay modifier values

uktrade · Dec 16, 2024 · 580379d · 580379d
1 parent 8aa6f11
commit 580379d
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 26 deletions.
diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
@@ -79,6 +79,10 @@ export default function Payroll() {
     dispatchVacancies({ type: "updatePayPeriods", id, index, enabled });
   }
 
+  function handleUpdatePayModifiers(id, index, value) {
+    dispatchPayModifiers({ type: "updatePayModifiers", id, index, value });
+  }
+
   return (
     <>
       {saveSuccess && (
@@ -124,7 +128,10 @@ export default function Payroll() {
           </a>
         </Tab>
         <Tab label="Pay Modifiers" key="2">
-          <EditPayModifier data={payModifiers} />
+          <EditPayModifier
+            data={payModifiers}
+            onInputChange={handleUpdatePayModifiers}
+          />
         </Tab>
       </Tabs>
       <button className="govuk-button" onClick={handleSavePayroll}>
@@ -164,6 +171,25 @@ const payModifiersReducer = (data, action) => {
     case "fetched": {
       return action.data;
     }
+    case "updatePayModifiers": {
+      return data.map((row) => {
+        if (row.id === action.id) {
+          const updatedPayModifier = row.pay_modifiers.map(
+            (modifier, index) => {
+              if (index === action.index) {
+                return parseFloat(action.value);
+              }
+              return modifier;
+            },
+          );
+          return {
+            ...row,
+            pay_modifiers: updatedPayModifier,
+          };
+        }
+        return row;
+      });
+    }
   }
 };
 

diff --git a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
@@ -1,32 +1,41 @@
 import { monthsToTitleCase } from "../../../Util";
 
-const EditPayModifier = ({ data }) => {
+const EditPayModifier = ({ data, onInputChange }) => {
   return (
     data.length > 0 && (
-      <table className="govuk-table">
-        <thead className="govuk-table__head">
-          <tr className="govuk-table__row">
-            {monthsToTitleCase.map((header) => {
-              return (
-                <th scope="col" className="govuk-table__header" key={header}>
-                  {header}
-                </th>
-              );
-            })}
-          </tr>
-        </thead>
-        <tbody className="govuk-table__body">
-          <tr className="govuk-table__row">
-            {data[0].pay_modifiers.map((value, index) => {
-              return (
-                <td className="govuk-table__cell" key={index}>
-                  {value}
-                </td>
-              );
-            })}
-          </tr>
-        </tbody>
-      </table>
+      <div className="govuk-form-group">
+        <table className="govuk-table">
+          <thead className="govuk-table__head">
+            <tr className="govuk-table__row">
+              {monthsToTitleCase.map((header) => {
+                return (
+                  <th scope="col" className="govuk-table__header" key={header}>
+                    {header}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody className="govuk-table__body">
+            <tr className="govuk-table__row">
+              {data[0].pay_modifiers.map((value, index) => {
+                return (
+                  <td className="govuk-table__cell" key={index}>
+                    <input
+                      className="govuk-input"
+                      id={`modifier-${index}`}
+                      name={`modifier-${index}`}
+                      type="text"
+                      defaultValue={value}
+                      onChange={(e) => onInputChange(data[0].id, index, e.target.value)}
+                    ></input>
+                  </td>
+                );
+              })}
+            </tr>
+          </tbody>
+        </table>
+      </div>
     )
   );
 };