Added prepper assignment to job. BOD-214

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

@@ -17,6 +17,7 @@ export function JobEmployeeAssignments({
   bodyshop,
   body,
   refinish,
+  prep,
   handleAdd,
   handleRemove,
 }) {
@@ -34,14 +35,15 @@ export function JobEmployeeAssignments({
   const popContent = (
     <div>
       <Select
-        id='employeeSelector'
+        id="employeeSelector"
         showSearch
         style={{ width: 200 }}
-        optionFilterProp='children'
+        optionFilterProp="children"
         onChange={onChange}
         filterOption={(input, option) =>
           option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-        }>
+        }
+      >
         {bodyshop.employees.map((emp) => (
           <Select.Option value={emp.id} key={emp.id}>
             {`${emp.first_name} ${emp.last_name}`}
@@ -49,12 +51,13 @@ export function JobEmployeeAssignments({
         ))}
       </Select>
       <Button
-        type='primary'
+        type="primary"
         disabled={!assignment.employeeid}
         onClick={() => {
           handleAdd(assignment);
           setVisibility(false);
-        }}>
+        }}
+      >
         Assign
       </Button>
       <Button onClick={() => setVisibility(false)}>Close</Button>
@@ -69,7 +72,7 @@ export function JobEmployeeAssignments({
             <div>
               <span>{`${body.first_name || ""} ${body.last_name || ""}`}</span>
               <MinusOutlined
-                operation='body'
+                operation="body"
                 onClick={() => handleRemove("body")}
               />
             </div>
@@ -82,6 +85,24 @@ export function JobEmployeeAssignments({
             />
           )}
         </DataLabel>
+        <DataLabel label={t("jobs.fields.employee_prep")}>
+          {prep ? (
+            <div>
+              <span>{`${prep.first_name || ""} ${prep.last_name || ""}`}</span>
+              <MinusOutlined
+                operation="prep"
+                onClick={() => handleRemove("prep")}
+              />
+            </div>
+          ) : (
+            <PlusCircleFilled
+              onClick={() => {
+                setAssignment({ operation: "prep" });
+                setVisibility(true);
+              }}
+            />
+          )}
+        </DataLabel>
         <DataLabel label={t("jobs.fields.employee_refinish")}>
           {refinish ? (
             <div>
@@ -89,7 +110,7 @@ export function JobEmployeeAssignments({
                 refinish.last_name || ""
               }`}</span>
               <MinusOutlined
-                operation='refinish'
+                operation="refinish"
                 onClick={() => handleRemove("refinish")}
               />
             </div>

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

@@ -54,6 +54,7 @@ export default function JobEmployeeAssignmentsContainer({ job }) {
       <JobEmployeeAssignmentsComponent
         body={job.employee_body_rel}
         refinish={job.employee_refinish_rel}
+        prep={job.employee_prep_rel}
         handleAdd={handleAdd}
         handleRemove={handleRemove}
       />
@@ -65,7 +66,8 @@ const determineFieldName = (operation) => {
   switch (operation) {
     case "body":
       return "employee_body";
-
+    case "prep":
+      return "employee_prep";
     case "refinish":
       return "employee_refinish";
 

client/src/components/job-line-location-popup/job-line-location-popup.component.jsx

@@ -1,13 +1,13 @@
-import React, { useState, useEffect } from "react";
-import { Input, notification, Select } from "antd";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { notification, Select } from "antd";
+import React, { useEffect, useState } from "react";
 import { useMutation } from "react-apollo";
-import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { useTranslation } from "react-i18next";
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -53,19 +53,21 @@ export function JobLineLocationPopup({ bodyshop, jobline }) {
   if (editing)
     return (
       <div>
-        <Select
-          autoFocus
-          dropdownMatchSelectWidth={100}
-          value={location}
-          onSelect={handleChange}
-          onBlur={handleSave}
-        >
-          {bodyshop.md_parts_locations.map((loc, idx) => (
-            <Select.Option key={idx} value={loc}>
-              {loc}
-            </Select.Option>
-          ))}
-        </Select>
+        <LoadingSpinner loading={loading}>
+          <Select
+            autoFocus
+            dropdownMatchSelectWidth={100}
+            value={location}
+            onSelect={handleChange}
+            onBlur={handleSave}
+          >
+            {bodyshop.md_parts_locations.map((loc, idx) => (
+              <Select.Option key={idx} value={loc}>
+                {loc}
+              </Select.Option>
+            ))}
+          </Select>
+        </LoadingSpinner>
       </div>
     );
   return (