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

client/src/components/allocations-employee-label/allocations-employee-label.component.jsx

@@ -0,0 +1,19 @@
+import { Icon } from "antd";
+import React from "react";
+import { MdRemoveCircleOutline } from "react-icons/md";
+
+export default function AllocationsLabelComponent({ allocation, handleClick }) {
+  return (
+    <div style={{ display: "flex" }}>
+      <span>
+        {`${allocation.employee.first_name || ""} ${allocation.employee
+          .last_name || ""} (${allocation.hours || ""})`}
+      </span>
+      <Icon
+        style={{ color: "red", padding: "0px 4px" }}
+        component={MdRemoveCircleOutline}
+        onClick={handleClick}
+      />
+    </div>
+  );
+}

client/src/components/allocations-employee-label/allocations-employee-label.container.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useMutation } from "react-apollo";
+import { DELETE_ALLOCATION } from "../../graphql/allocations.queries";
+import AllocationsLabelComponent from "./allocations-employee-label.component";
+import { notification } from "antd";
+import { useTranslation } from "react-i18next";
+export default function AllocationsLabelContainer({ allocation, refetch }) {
+  const [deleteAllocation] = useMutation(DELETE_ALLOCATION);
+  const { t } = useTranslation();
+  const handleClick = e => {
+    e.preventDefault();
+    deleteAllocation({ variables: { id: allocation.id } })
+      .then(r => {
+        notification["success"]({
+          message: t("allocations.successes.deleted")
+        });
+        if (refetch) refetch();
+      })
+      .catch(error => {
+        notification["error"]({ message: t("allocations.errors.deleting") });
+      });
+  };
+  return (
+    <AllocationsLabelComponent
+      allocation={allocation}
+      handleClick={handleClick}
+    />
+  );
+}