Further UI Improvements

client/src/components/job-employee-assignments/job-employee-assignments.component.jsx

@@ -1,12 +1,13 @@
+import { DeleteFilled, PlusCircleFilled } from "@ant-design/icons";
+import { Button, Popover, Select, Spin } from "antd";
 import React, { useState } from "react";
-import DataLabel from "../data-label/data-label.component";
 import { useTranslation } from "react-i18next";
-import { PlusCircleFilled, MinusOutlined } from "@ant-design/icons";
-import { Select, Button, Popover } from "antd";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import DataLabel from "../data-label/data-label.component";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly,
@@ -15,6 +16,8 @@ const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
+const iconStyle = { marginLeft: ".3rem" };
+
 export function JobEmployeeAssignments({
   bodyshop,
   jobRO,
@@ -23,6 +26,7 @@ export function JobEmployeeAssignments({
   prep,
   handleAdd,
   handleRemove,
+  loading,
 }) {
   const { t } = useTranslation();
   const [assignment, setAssignment] = useState({
@@ -68,93 +72,84 @@ export function JobEmployeeAssignments({
   );
 
   return (
-    <div>
-      <Popover destroyTooltipOnHide content={popContent} visible={visibility}>
-        <div style={{ display: "flex" }}>
-          <DataLabel
-            label={t("jobs.fields.employee_body")}
-            style={{ margin: "0rem .5rem" }}
-          >
-            {body ? (
-              <div>
-                <span>{`${body.first_name || ""} ${
-                  body.last_name || ""
-                }`}</span>
-                <MinusOutlined
-                  operation="body"
-                  disabled={jobRO}
-                  onClick={() => !jobRO && handleRemove("body")}
-                />
-              </div>
-            ) : (
-              <PlusCircleFilled
+    <Popover destroyTooltipOnHide content={popContent} visible={visibility}>
+      <Spin spinning={loading}>
+        <DataLabel label={t("jobs.fields.employee_body")}>
+          {body ? (
+            <div>
+              <span>{`${body.first_name || ""} ${body.last_name || ""}`}</span>
+              <DeleteFilled
+                operation="body"
                 disabled={jobRO}
-                onClick={() => {
-                  if (!jobRO) {
-                    setAssignment({ operation: "body" });
-                    setVisibility(true);
-                  }
-                }}
+                style={iconStyle}
+                onClick={() => !jobRO && handleRemove("body")}
               />
-            )}
-          </DataLabel>
-          <DataLabel
-            label={t("jobs.fields.employee_prep")}
-            style={{ margin: "0rem .5rem" }}
-          >
-            {prep ? (
-              <div>
-                <span>{`${prep.first_name || ""} ${
-                  prep.last_name || ""
-                }`}</span>
-                <MinusOutlined
-                  disabled={jobRO}
-                  operation="prep"
-                  onClick={() => !jobRO && handleRemove("prep")}
-                />
-              </div>
-            ) : (
-              <PlusCircleFilled
+            </div>
+          ) : (
+            <PlusCircleFilled
+              disabled={jobRO}
+              style={iconStyle}
+              onClick={() => {
+                if (!jobRO) {
+                  setAssignment({ operation: "body" });
+                  setVisibility(true);
+                }
+              }}
+            />
+          )}
+        </DataLabel>
+        <DataLabel label={t("jobs.fields.employee_prep")}>
+          {prep ? (
+            <div>
+              <span>{`${prep.first_name || ""} ${prep.last_name || ""}`}</span>
+              <DeleteFilled
                 disabled={jobRO}
-                onClick={() => {
-                  if (!jobRO) {
-                    setAssignment({ operation: "prep" });
-                    setVisibility(true);
-                  }
-                }}
+                style={iconStyle}
+                operation="prep"
+                onClick={() => !jobRO && handleRemove("prep")}
               />
-            )}
-          </DataLabel>
-          <DataLabel
-            label={t("jobs.fields.employee_refinish")}
-            style={{ margin: "0rem .5rem" }}
-          >
-            {refinish ? (
-              <div>
-                <span>{`${refinish.first_name || ""} ${
-                  refinish.last_name || ""
-                }`}</span>
-                <MinusOutlined
-                  disabled={jobRO}
-                  operation="refinish"
-                  onClick={() => !jobRO && handleRemove("refinish")}
-                />
-              </div>
-            ) : (
-              <PlusCircleFilled
+            </div>
+          ) : (
+            <PlusCircleFilled
+              disabled={jobRO}
+              style={iconStyle}
+              onClick={() => {
+                if (!jobRO) {
+                  setAssignment({ operation: "prep" });
+                  setVisibility(true);
+                }
+              }}
+            />
+          )}
+        </DataLabel>
+        <DataLabel label={t("jobs.fields.employee_refinish")}>
+          {refinish ? (
+            <div>
+              <span>{`${refinish.first_name || ""} ${
+                refinish.last_name || ""
+              }`}</span>
+              <DeleteFilled
                 disabled={jobRO}
-                onClick={() => {
-                  if (!jobRO) {
-                    setAssignment({ operation: "refinish" });
-                    setVisibility(true);
-                  }
-                }}
+                style={iconStyle}
+                operation="refinish"
+                onClick={() => !jobRO && handleRemove("refinish")}
               />
-            )}
-          </DataLabel>
-        </div>
-      </Popover>
-    </div>
+            </div>
+          ) : (
+            <PlusCircleFilled
+              disabled={jobRO}
+              style={iconStyle}
+              onClick={() => {
+                if (!jobRO) {
+                  setAssignment({ operation: "refinish" });
+                  setVisibility(true);
+                }
+              }}
+            />
+          )}
+        </DataLabel>
+      </Spin>
+    </Popover>
   );
 }
 export default connect(

client/src/components/job-employee-assignments/job-employee-assignments.container.jsx

@@ -1,16 +1,18 @@
 import { useMutation } from "@apollo/client";
 import { notification } from "antd";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import JobEmployeeAssignmentsComponent from "./job-employee-assignments.component";
-import { logImEXEvent } from "../../firebase/firebase.utils";
 
 export default function JobEmployeeAssignmentsContainer({ job, refetch }) {
   const { t } = useTranslation();
   const [updateJob] = useMutation(UPDATE_JOB);
+  const [loading, setLoading] = useState(false);
 
   const handleAdd = async (assignment) => {
+    setLoading(true);
     const { operation, employeeid } = assignment;
     logImEXEvent("job_assign_employee", { operation });
 
@@ -30,8 +32,10 @@ export default function JobEmployeeAssignmentsContainer({ job, refetch }) {
         }),
       });
     }
+    setLoading(false);
   };
   const handleRemove = async (operation) => {
+    setLoading(true);
     logImEXEvent("job_unassign_employee", { operation });
 
     let empAssignment = determineFieldName(operation);
@@ -48,6 +52,7 @@ export default function JobEmployeeAssignmentsContainer({ job, refetch }) {
         }),
       });
     }
+    setLoading(false);
   };
 
   return (
@@ -58,6 +63,7 @@ export default function JobEmployeeAssignmentsContainer({ job, refetch }) {
         prep={job.employee_prep_rel}
         handleAdd={handleAdd}
         handleRemove={handleRemove}
+        loading={loading}
       />
     </div>
   );