Added parts location to job line list view. BOD-208

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

@@ -13,6 +13,7 @@ import { alphaSort } from "../../utils/sorters";
 // import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
 import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
 import JobLineNotePopup from "../job-line-note-popup/job-line-note-popup.component";
+import JobLineLocationPopup from "../job-line-location-popup/job-line-location-popup.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setJobLineEditContext: (context) =>
@@ -170,6 +171,12 @@ export function JobLinesComponent({
       key: "notes",
       render: (text, record) => <JobLineNotePopup jobline={record} />,
     },
+    {
+      title: t("joblines.fields.location"),
+      dataIndex: "location",
+      key: "location",
+      render: (text, record) => <JobLineLocationPopup jobline={record} />,
+    },
     {
       title: t("joblines.fields.status"),
       dataIndex: "status",

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

@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from "react";
+import { Input, notification, Select } from "antd";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+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 { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function JobLineLocationPopup({ bodyshop, jobline }) {
+  const [editing, setEditing] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [location, setLocation] = useState(jobline.location);
+  const [updateJob] = useMutation(UPDATE_JOB_LINE);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (editing) setLocation(jobline.location);
+  }, [editing, jobline.location]);
+
+  const handleChange = (e) => {
+    setLocation(e);
+  };
+
+  const handleSave = async (e) => {
+    setLoading(true);
+    const result = await updateJob({
+      variables: { lineId: jobline.id, line: { location: location || "" } },
+    });
+
+    if (!!!result.errors) {
+      notification["success"]({ message: t("joblines.successes.saved") });
+    } else {
+      notification["error"]({
+        message: t("joblines.errors.saving", {
+          error: JSON.stringify(result.errors),
+        }),
+      });
+    }
+    setLoading(false);
+    setEditing(false);
+  };
+
+  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>
+      </div>
+    );
+  return (
+    <div
+      style={{ width: "100%", minHeight: "2rem", cursor: "pointer" }}
+      onClick={() => setEditing(true)}
+    >
+      {jobline.location}
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobLineLocationPopup);

client/src/components/shop-info/shop-info.component.jsx

@@ -17,6 +17,7 @@ import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ShopInfoIntakeChecklistComponent from "./shop-info.intake.component";
 import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 
 export default function ShopInfoComponent({ form, saveLoading }) {
   const { t } = useTranslation();
@@ -273,6 +274,61 @@ export default function ShopInfoComponent({ form, saveLoading }) {
               );
             }}
           </Form.List>
+
+          <Form.List name={["md_parts_locations"]}>
+            {(fields, { add, remove, move }) => {
+              return (
+                <div>
+                  {fields.map((field, index) => (
+                    <Form.Item
+                      key={field.key}
+                      style={{ padding: 0, margin: 2 }}
+                    >
+                      <div className="imex-flex-row">
+                        <Form.Item
+                          className="imex-flex-row__margin"
+                          label={t("bodyshop.fields.partslocation")}
+                          key={`${index}`}
+                          name={[field.name]}
+                          rules={[
+                            {
+                              required: true,
+                              message: t("general.validation.required"),
+                            },
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+
+                        <DeleteFilled
+                          className="imex-flex-row__margin"
+                          onClick={() => {
+                            remove(field.name);
+                          }}
+                        />
+                        <FormListMoveArrows
+                          move={move}
+                          index={index}
+                          total={fields.length}
+                        />
+                      </div>
+                    </Form.Item>
+                  ))}
+                  <Form.Item>
+                    <Button
+                      type="dashed"
+                      onClick={() => {
+                        add();
+                      }}
+                      style={{ width: "100%" }}
+                    >
+                      {t("bodyshop.actions.addpartslocation")}
+                    </Button>
+                  </Form.Item>
+                </div>
+              );
+            }}
+          </Form.List>
         </Collapse.Panel>
         <Collapse.Panel
           key="speedprint"

client/src/components/shop-info/shop-info.speedprint.component.jsx

@@ -1,5 +1,5 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { Button, Col, Form, Input, InputNumber, Row, Select } from "antd";
+import { Button, Form, Input, Select } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { TemplateList } from "../../utils/TemplateConstants";