Implemented jobline upsert modal. Updated allocations display on jobline edit to include removal.

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -6,6 +6,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { alphaSort } from "../../utils/sorters";
 import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
 import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
+import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
 import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
 
 export default function JobLinesComponent({
@@ -135,16 +136,26 @@ export default function JobLinesComponent({
       dataIndex: "employee",
       key: "employee",
       width: "10%",
-      sorter: (a, b) => a.act_price - b.act_price, //TODO Fix employee sorting.
+      sorter: (a, b) =>
+        alphaSort(
+          a.allocations[0] &&
+            a.allocations[0].employee.first_name +
+              a.allocations[0].employee.last_name,
+          b.allocations[0] &&
+            b.allocations[0].employee.first_name +
+              b.allocations[0].employee.last_name
+        ),
       sortOrder:
         state.sortedInfo.columnKey === "employee" && state.sortedInfo.order,
       render: (text, record) => (
         <span>
           {record.allocations && record.allocations.length > 0
             ? record.allocations.map(item => (
-                <div
+                <AllocationsEmployeeLabelContainer
                   key={item.id}
-                >{`${item.employee.first_name} ${item.employee.last_name} (${item.hours})`}</div>
+                  refetch={refetch}
+                  allocation={item}
+                />
               ))
             : null}
           <AllocationsAssignmentContainer
@@ -168,8 +179,6 @@ export default function JobLinesComponent({
                 actions: { refetch: refetch },
                 context: record
               });
-              //lineToEdit[1](record);
-              //editLineModalVisible[1](true);
             }}
           >
             {t("general.actions.edit")}
@@ -224,6 +233,16 @@ export default function JobLinesComponent({
                 jobLines={selectedLines}
                 refetch={refetch}
               />
+              <Button
+                onClick={() => {
+                  setJobLineEditContext({
+                    actions: { refetch: refetch },
+                    context: { jobid: jobId }
+                  });
+                }}
+              >
+                {t("joblines.actions.new")}
+              </Button>
             </div>
           );
         }}