BOD-52 #comment Implemented job updating based on owner fields. Currently, which fields are updated are hardcoded.

2020-03-23 15:35:59 -07:00
parent edba734605
commit f04ba766ad
9 changed files with 376 additions and 43 deletions
--- a/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx
+++ b/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx
@@ -1,10 +1,20 @@
-import React from "react";
 import { Table } from "antd";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import { Link } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-export default function OwnerDetailJobsComponent({ owner }) {
+import OwnerDetailUpdateJobsComponent from "../owner-detail-update-jobs/owner-detail-update-jobs.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+function OwnerDetailJobsComponent({ bodyshop, owner }) {
  const { t } = useTranslation();
+  const [selectedJobs, setSelectedJobs] = useState([]);
  const columns = [
    {
      title: t("jobs.fields.ro_number"),
@@ -50,10 +60,31 @@ export default function OwnerDetailJobsComponent({ owner }) {

  return (
    <Table
+      title={() => (
+        <div>
+          <OwnerDetailUpdateJobsComponent
+            selectedJobs={selectedJobs}
+            owner={owner}
+          />
+        </div>
+      )}
      pagination={{ position: "bottom" }}
      columns={columns.map(item => ({ ...item }))}
-      rowKey="id"
+      rowKey='id'
      dataSource={owner.jobs}
+      rowSelection={{
+        onSelect: props => {
+          setSelectedJobs([...selectedJobs, props.id]);
+        },
+        // type: "radio",
+        selectedRowKeys: selectedJobs,
+        getCheckboxProps: record => ({
+          disabled: bodyshop.md_ro_statuses.open_statuses
+            ? !bodyshop.md_ro_statuses.open_statuses.includes(record.status)
+            : true
+        })
+      }}
    />
  );
 }
+export default connect(mapStateToProps, null)(OwnerDetailJobsComponent);
--- a/client/src/components/owner-detail-update-jobs/owner-detail-update-jobs.component.jsx
+++ b/client/src/components/owner-detail-update-jobs/owner-detail-update-jobs.component.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Button } from "antd";
+import { useTranslation } from "react-i18next";
+import { useMutation } from "@apollo/react-hooks";
+import { UPDATE_JOBS } from "../../graphql/jobs.queries";
+
+export default function OwnerDetailUpdateJobsComponent({
+  owner,
+  selectedJobs
+}) {
+  const { t } = useTranslation();
+  const [updateJobs] = useMutation(UPDATE_JOBS);
+  const handlecClick = e => {
+    updateJobs({
+      variables: {
+        jobIds: selectedJobs,
+        fields: {
+          ownr_addr1: owner["ownr_addr1"],
+          ownr_addr2: owner["ownr_addr2"],
+          ownr_co_nm: owner["ownr_co_nm"],
+          ownr_city: owner["ownr_city"],
+          ownr_ctry: owner["ownr_ctry"],
+          ownr_ea: owner["ownr_ea"],
+          ownr_fn: owner["ownr_fn"],
+          ownr_ph1: owner["ownr_ph1"],
+          ownr_ln: owner["ownr_ln"],
+          ownr_ph2: owner["ownr_ph2"],
+          ownr_st: owner["ownr_st"],
+          ownr_title: owner["ownr_title"],
+          ownr_zip: owner["ownr_zip"]
+        }
+      }
+    });
+  };
+
+  return <Button onClick={handlecClick}>{t("owners.actions.update")}</Button>;
+}
--- a/client/src/components/owner-tag-popover/owner-tag-popover.component.jsx
+++ b/client/src/components/owner-tag-popover/owner-tag-popover.component.jsx
@@ -1,26 +1,75 @@
-import { Button, Col, Popover, Row, Tag } from "antd";
+import { Button, Col, Popover, Row, Tag, Descriptions } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-
+import PhoneFormatter from "../../utils/PhoneFormatter";
 export default function OwnerTagPopoverComponent({ job }) {
  const { t } = useTranslation();
  const content = (
-    <div>
-      The Content
+    <div style={{ width: "400px" }}>
      <Row>
-        <Col span={12}>Claim Info</Col>
-        <Col span={12}>Owner Info</Col>
+        <Col span={12}>
+          <Descriptions
+            title={t("owners.labels.fromclaim")}
+            size='small'
+            column={1}>
+            <Descriptions.Item
+              key='1'
+              label={t("jobs.fields.owner")}>{`${job.ownr_fn ||
+              ""} ${job.ownr_ln || ""} ${job.ownr_co_nm ||
+              ""}`}</Descriptions.Item>
+            <Descriptions.Item key='2' label={t("jobs.fields.ownr_ph1")}>
+              <PhoneFormatter>{job.ownr_ph1 || ""}</PhoneFormatter>
+            </Descriptions.Item>
+            <Descriptions.Item key='3' label={t("owners.fields.address")}>
+              {`${job.ownr_addr1 || ""} ${job.ownr_addr2 ||
+                ""} ${job.ownr_city || ""} ${job.ownr_st ||
+                ""} ${job.ownr_zip || ""} ${job.ownr_ctry ||
+                ""} ${job.ownr_city || ""}`}
+            </Descriptions.Item>
+            <Descriptions.Item key='4' label={t("owners.fields.ownr_ea")}>
+              {job.ownr_ea || ""}
+              {
+                //TODO Should add an email formatter.
+              }
+            </Descriptions.Item>
+          </Descriptions>
+        </Col>
+        <Col span={12}>
+          <Descriptions
+            title={t("owners.labels.fromowner")}
+            size='small'
+            column={1}>
+            <Descriptions.Item key='1' label={t("jobs.fields.owner")}>{`${job
+              .owner.ownr_fn || ""} ${job.owner.ownr_ln || ""} ${job.owner
+              .ownr_co_nm || ""}`}</Descriptions.Item>
+            <Descriptions.Item key='2' label={t("jobs.fields.ownr_ph1")}>
+              <PhoneFormatter>{job.owner.ownr_ph1 || ""}</PhoneFormatter>
+            </Descriptions.Item>
+            <Descriptions.Item key='3' label={t("owners.fields.address")}>
+              {`${job.owner.ownr_addr1 || ""} ${job.owner.ownr_addr2 ||
+                ""} ${job.owner.ownr_city || ""} ${job.owner.ownr_st ||
+                ""} ${job.owner.ownr_zip || ""} ${job.owner.ownr_ctry ||
+                ""} ${job.owner.ownr_city || ""}`}
+            </Descriptions.Item>
+            <Descriptions.Item key='4' label={t("owners.fields.ownr_ea")}>
+              {job.owner.ownr_ea || ""}
+              {
+                //TODO Should add an email formatter.
+              }
+            </Descriptions.Item>
+          </Descriptions>
+        </Col>
      </Row>
      <Link to={`/manage/owners/${job.owner.id}`}>
-        <Button>{t("owners.actions.update")}</Button>
+        <Button>{t("owners.labels.updateowner")}</Button>
      </Link>
    </div>
  );

  return (
-    <Popover placement="bottom" content={content}>
-      <Tag color="red">
+    <Popover placement='bottom' content={content}>
+      <Tag color='red'>
        {job.owner
          ? `${job.ownr_co_nm || ""}${job.ownr_fn || ""} ${job.ownr_ln || ""}`
          : t("jobs.errors.noowner")}
--- a/client/src/components/shop-info/shop-info.rostatus.component.jsx
+++ b/client/src/components/shop-info/shop-info.rostatus.component.jsx
@@ -6,7 +6,7 @@ import styled from "styled-components";

 const SelectorDiv = styled.div`
  .ant-form-item .ant-select {
-    width: 125px;
+    width: 200px;
  }
 `;
 //TODO Fix up styles.
@@ -24,7 +24,8 @@ export default function ShopInfoROStatusComponent({ form }) {
  return (
    <div>
      <Row>
-        <Col span={12}>
+        <Col span={8}>
+          {t("bodyshop.labels.alljobstatuses")}
          <Form.List name={["md_ro_statuses", "statuses"]}>
            {(fields, { add, remove }) => {
              return (
@@ -32,8 +33,7 @@ export default function ShopInfoROStatusComponent({ form }) {
                  {fields.map((field, index) => (
                    <Form.Item
                      key={field.key}
-                      style={{ padding: 0, margin: 2 }}
-                    >
+                      style={{ padding: 0, margin: 2 }}>
                      <div style={{ display: "flex" }}>
                        <Form.Item
                          style={{ padding: 0, margin: 2 }}
@@ -45,8 +45,7 @@ export default function ShopInfoROStatusComponent({ form }) {
                              required: true,
                              message: t("general.validation.required")
                            }
-                          ]}
-                        >
+                          ]}>
                          <Input onBlur={handleBlur} />
                        </Form.Item>
                        <DeleteFilled
@@ -59,12 +58,11 @@ export default function ShopInfoROStatusComponent({ form }) {
                  ))}
                  <Form.Item>
                    <Button
-                      type="dashed"
+                      type='dashed'
                      onClick={() => {
                        add();
                      }}
-                      style={{ width: "100%" }}
-                    >
+                      style={{ width: "100%" }}>
                      {t("bodyshop.actions.newstatus")}
                    </Button>
                  </Form.Item>
@@ -75,6 +73,24 @@ export default function ShopInfoROStatusComponent({ form }) {
        </Col>
        <Col span={12}>
          <SelectorDiv>
+            <Form.Item
+              name={["md_ro_statuses", "open_statuses"]}
+              label={t("bodyshop.fields.statuses.open_statuses")}
+              rules={[
+                {
+                  required: true,
+                  message: t("general.validation.required"),
+                  type: "array"
+                }
+              ]}>
+              <Select mode='multiple'>
+                {options.map((item, idx) => (
+                  <Select.Option key={idx} value={item}>
+                    {item}
+                  </Select.Option>
+                ))}
+              </Select>
+            </Form.Item>
            <Form.Item
              label={t("bodyshop.fields.statuses.default_scheduled")}
              rules={[
@@ -83,8 +99,7 @@ export default function ShopInfoROStatusComponent({ form }) {
                  message: t("general.validation.required")
                }
              ]}
-              name={["md_ro_statuses", "default_scheduled"]}
-            >
+              name={["md_ro_statuses", "default_scheduled"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>
@@ -99,8 +114,7 @@ export default function ShopInfoROStatusComponent({ form }) {
                  message: t("general.validation.required")
                }
              ]}
-              name={["md_ro_statuses", "default_arrived"]}
-            >
+              name={["md_ro_statuses", "default_arrived"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>
@@ -115,8 +129,7 @@ export default function ShopInfoROStatusComponent({ form }) {
                  message: t("general.validation.required")
                }
              ]}
-              name={["md_ro_statuses", "default_exported"]}
-            >
+              name={["md_ro_statuses", "default_exported"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>
@@ -131,8 +144,7 @@ export default function ShopInfoROStatusComponent({ form }) {
                  message: t("general.validation.required")
                }
              ]}
-              name={["md_ro_statuses", "default_imported"]}
-            >
+              name={["md_ro_statuses", "default_imported"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>
@@ -147,8 +159,7 @@ export default function ShopInfoROStatusComponent({ form }) {
                  message: t("general.validation.required")
                }
              ]}
-              name={["md_ro_statuses", "default_invoiced"]}
-            >
+              name={["md_ro_statuses", "default_invoiced"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>
@@ -163,8 +174,7 @@ export default function ShopInfoROStatusComponent({ form }) {
                  message: t("general.validation.required")
                }
              ]}
-              name={["md_ro_statuses", "default_completed"]}
-            >
+              name={["md_ro_statuses", "default_completed"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>
@@ -179,8 +189,7 @@ export default function ShopInfoROStatusComponent({ form }) {
                  message: t("general.validation.required")
                }
              ]}
-              name={["md_ro_statuses", "default_delivered"]}
-            >
+              name={["md_ro_statuses", "default_delivered"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>