From 786c7903073e4ed3fb0bcab4af46a82d20f13923 Mon Sep 17 00:00:00 2001
From: Patrick Fic <patrick@thinkimex.com>
Date: Fri, 4 Aug 2023 12:28:08 -0700
Subject: [PATCH] WIP Tech Claiming Ability

---
 bodyshop_translations.babel                   |  47 ++++++
 .../job-line-dispatch-button.component.jsx    |  13 +-
 .../parts-dispatch-expander.component.jsx     |  13 +-
 .../tech-sider/tech-sider.component.jsx       |  15 +-
 client/src/graphql/parts-dispatch.queries.js  |  49 ++++++
 .../tech-dispatched-parts.page.jsx            | 139 ++++++++++++++++++
 client/src/pages/tech/tech.page.component.jsx |   8 +
 client/src/translations/en_us/common.json     |   4 +
 client/src/translations/es/common.json        |   4 +
 client/src/translations/fr/common.json        |   4 +
 10 files changed, 286 insertions(+), 10 deletions(-)
 create mode 100644 client/src/pages/tech-dispatched-parts/tech-dispatched-parts.page.jsx

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index bbf89d093..f5a1d8e48 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -33786,6 +33786,27 @@
                             <folder_node>
                                 <name>tech</name>
                                 <children>
+                                    <concept_node>
+                                        <name>dispatchedparts</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>home</name>
                                         <definition_loaded>false</definition_loaded>
@@ -35877,6 +35898,32 @@
                     <folder_node>
                         <name>parts_dispatch</name>
                         <children>
+                            <folder_node>
+                                <name>actions</name>
+                                <children>
+                                    <concept_node>
+                                        <name>accept</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>errors</name>
                                 <children>
diff --git a/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx b/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx
index 04b808932..50fdfee05 100644
--- a/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx
+++ b/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx
@@ -70,7 +70,7 @@ export function JobLineDispatchButton({
         notification.open({
           type: "error",
           message: t("parts_dispatch.errors.creating", {
-            error: JSON.stringify(result.errors),
+            error: result.errors,
           }),
         });
       } else {
@@ -79,7 +79,7 @@ export function JobLineDispatchButton({
           {
             name: Templates.parts_dispatch.key,
             variables: {
-              id: result.data.insert_part_dispatch_one.id,
+              id: result.data.insert_parts_dispatch_one.id,
             },
           },
           {},
@@ -91,7 +91,7 @@ export function JobLineDispatchButton({
       notification.open({
         type: "error",
         message: t("parts_dispatch.errors.creating", {
-          error: JSON.stringify(error),
+          error: error,
         }),
       });
     } finally {
@@ -137,7 +137,12 @@ export function JobLineDispatchButton({
         </Form.Item>
 
         <Space wrap>
-          <Button type="danger" onClick={() => form.submit()} loading={loading}>
+          <Button
+            type="danger"
+            onClick={() => form.submit()}
+            loading={loading}
+            disabled={selectedLines.length === 0}
+          >
             {t("general.actions.save")}
           </Button>
           <Button onClick={() => setVisible(false)}>
diff --git a/client/src/components/parts-dispatch-expander/parts-dispatch-expander.component.jsx b/client/src/components/parts-dispatch-expander/parts-dispatch-expander.component.jsx
index ccbb3a02b..131fd7802 100644
--- a/client/src/components/parts-dispatch-expander/parts-dispatch-expander.component.jsx
+++ b/client/src/components/parts-dispatch-expander/parts-dispatch-expander.component.jsx
@@ -1,4 +1,4 @@
-import { Card, Col, Row, Table } from "antd";
+import { Button, Card, Col, Row, Table } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
@@ -28,9 +28,12 @@ export default function PartsDispatchExpander({ dispatch, job }) {
       width: "20%",
 
       //sorter: (a, b) => alphaSort(a.number, b.number),
-      render: (text, record) => (
-        <DateTimeFormatter>{record.accepted_at}</DateTimeFormatter>
-      ),
+      render: (text, record) =>
+        record.accepted_at ? (
+          <DateTimeFormatter>{record.accepted_at}</DateTimeFormatter>
+        ) : (
+          <Button>{t("parts_dispatch.actions.accept")}</Button>
+        ),
     },
   ];
   return (
@@ -38,7 +41,7 @@ export default function PartsDispatchExpander({ dispatch, job }) {
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <Table
-            pagination={false}
+            rowKey={"id"}
             dataSource={dispatch.parts_dispatch_lines}
             columns={columns}
           />
diff --git a/client/src/components/tech-sider/tech-sider.component.jsx b/client/src/components/tech-sider/tech-sider.component.jsx
index c6ea4f67f..3cb3c261c 100644
--- a/client/src/components/tech-sider/tech-sider.component.jsx
+++ b/client/src/components/tech-sider/tech-sider.component.jsx
@@ -1,4 +1,8 @@
-import Icon, { SearchOutlined, ScheduleOutlined } from "@ant-design/icons";
+import Icon, {
+  SearchOutlined,
+  ScheduleOutlined,
+  CarOutlined,
+} from "@ant-design/icons";
 import { Layout, Menu } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -68,6 +72,15 @@ export function TechSider({ technician, techLogout }) {
         <Menu.Item key="5" disabled={!!!technician} icon={<ScheduleOutlined />}>
           <Link to={`/tech/list`}>{t("menus.tech.productionlist")}</Link>
         </Menu.Item>
+        <Menu.Item
+          key="dispatchedparts"
+          disabled={!!!technician}
+          icon={<CarOutlined />}
+        >
+          <Link to={`/tech/dispatchedparts`}>
+            {t("menus.tech.dispatchedparts")}
+          </Link>
+        </Menu.Item>
         <Menu.Item
           key="6"
           disabled={!!!technician}
diff --git a/client/src/graphql/parts-dispatch.queries.js b/client/src/graphql/parts-dispatch.queries.js
index da5584ee0..d4f5e940b 100644
--- a/client/src/graphql/parts-dispatch.queries.js
+++ b/client/src/graphql/parts-dispatch.queries.js
@@ -15,3 +15,52 @@ export const INSERT_PARTS_DISPATCH = gql`
     }
   }
 `;
+
+export const GET_UNACCEPTED_PARTS_DISPATCH = gql`
+  query GET_UNACCEPTED_PARTS_DISPATCH(
+    $techId: uuid!
+    $offset: Int
+    $limit: Int
+  ) {
+    parts_dispatch_aggregate(
+      where: {
+        employeeid: { _eq: $techId }
+        parts_dispatch_lines: { accepted_at: { _is_null: true } }
+      }
+    ) {
+      aggregate {
+        count(distinct: true)
+      }
+    }
+    parts_dispatch(
+      offset: $offset
+      limit: $limit
+      where: {
+        employeeid: { _eq: $techId }
+        parts_dispatch_lines: { accepted_at: { _is_null: true } }
+      }
+    ) {
+      id
+      job {
+        id
+        ro_number
+        status
+        v_make_desc
+        v_model_desc
+        v_model_yr
+        v_color
+      }
+      dispatched_at
+      dispatched_by
+      parts_dispatch_lines {
+        id
+        jobline {
+          line_desc
+          id
+        }
+        quantity
+        joblineid
+      }
+    }
+  }
+`;
diff --git a/client/src/pages/tech-dispatched-parts/tech-dispatched-parts.page.jsx b/client/src/pages/tech-dispatched-parts/tech-dispatched-parts.page.jsx
new file mode 100644
index 000000000..d87b5a9ad
--- /dev/null
+++ b/client/src/pages/tech-dispatched-parts/tech-dispatched-parts.page.jsx
@@ -0,0 +1,139 @@
+import {
+  MinusCircleTwoTone,
+  PlusCircleTwoTone,
+  SyncOutlined,
+} from "@ant-design/icons";
+import { useQuery } from "@apollo/client";
+import { Button, Card, Input, Space, Table } from "antd";
+import queryString from "query-string";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useHistory, useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import AlertComponent from "../../components/alert/alert.component";
+import PartsDispatchExpander from "../../components/parts-dispatch-expander/parts-dispatch-expander.component";
+import { GET_UNACCEPTED_PARTS_DISPATCH } from "../../graphql/parts-dispatch.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { alphaSort } from "../../utils/sorters";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  technician: selectTechnician,
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({});
+
+export function TechDispatchedParts({ technician, bodyshop }) {
+  const searchParams = queryString.parse(useLocation().search);
+  const { page } = searchParams;
+
+  const { loading, error, data, refetch } = useQuery(
+    GET_UNACCEPTED_PARTS_DISPATCH,
+    {
+      variables: {
+        techId: technician.id,
+        offset: page ? (page - 1) * 25 : 0,
+        limit: 25,
+      },
+    }
+  );
+
+  const { t } = useTranslation();
+  const history = useHistory();
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  const parts_dispatch = data?.parts_dispatch;
+
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "job.ro_number",
+      key: "ro_number",
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+
+      render: (text, record) => record.job.ro_number || t("general.labels.na"),
+    },
+    {
+      title: t("jobs.fields.status"),
+      dataIndex: "status",
+      key: "status",
+      sorter: (a, b) => alphaSort(a.status, b.status),
+      render: (text, record) => {
+        return record.job.status || t("general.labels.na");
+      },
+    },
+
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      render: (text, record) => (
+        <span>{`${record.job.v_model_yr || ""} ${
+          record.job.v_make_desc || ""
+        } ${record.job.v_model_desc || ""}`}</span>
+      ),
+    },
+    {
+      title: t("general.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      render: (text, record) => (
+        <Button onClick={() => {}}>
+          {t("timetickets.actions.claimtasks")}
+        </Button>
+      ),
+    },
+  ];
+  const handleTableChange = (pagination, filters, sorter) => {
+    searchParams.page = pagination.current;
+    history.push({ search: queryString.stringify(searchParams) });
+  };
+
+  return (
+    <Card
+      extra={
+        <Space wrap>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+        </Space>
+      }
+    >
+      <Table
+        loading={loading}
+        pagination={{
+          pageSize: 25,
+          current: parseInt(page || 1),
+          total: data ? data.parts_dispatch_aggregate.aggregate.count : 0,
+          showSizeChanger: false,
+        }}
+        columns={columns}
+        rowKey="id"
+        dataSource={parts_dispatch}
+        scroll={{ x: true }}
+        onChange={handleTableChange}
+        expandable={{
+          expandedRowRender: (record) => (
+            <PartsDispatchExpander dispatch={record} />
+          ),
+          rowExpandable: (record) => true,
+          //expandRowByClick: true,
+          expandIcon: ({ expanded, onExpand, record }) =>
+            expanded ? (
+              <MinusCircleTwoTone onClick={(e) => onExpand(record, e)} />
+            ) : (
+              <PlusCircleTwoTone onClick={(e) => onExpand(record, e)} />
+            ),
+        }}
+      />
+    </Card>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TechDispatchedParts);
diff --git a/client/src/pages/tech/tech.page.component.jsx b/client/src/pages/tech/tech.page.component.jsx
index f7639a473..d56ce6e09 100644
--- a/client/src/pages/tech/tech.page.component.jsx
+++ b/client/src/pages/tech/tech.page.component.jsx
@@ -34,6 +34,9 @@ const TechJobClock = lazy(() =>
 const TechShiftClock = lazy(() =>
   import("../tech-shift-clock/tech-shift-clock.component")
 );
+const TechDispatchedParts = lazy(() =>
+  import("../tech-dispatched-parts/tech-dispatched-parts.page")
+);
 
 const { Content } = Layout;
 
@@ -98,6 +101,11 @@ export function TechPage({ technician, match }) {
                     path={`${match.path}/board`}
                     component={ProductionBoardPage}
                   />
+                  <Route
+                    exact
+                    path={`${match.path}/dispatchedparts`}
+                    component={TechDispatchedParts}
+                  />
                 </Switch>
               </FeatureWrapper>
             </Suspense>
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index cd518d134..07533cf11 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -1985,6 +1985,7 @@
 				"shops": "My Shops"
 			},
 			"tech": {
+				"dispatchedparts": "Dispatched Parts",
 				"home": "Home",
 				"jobclockin": "Job Clock In",
 				"jobclockout": "Job Clock Out",
@@ -2126,6 +2127,9 @@
 			}
 		},
 		"parts_dispatch": {
+			"actions": {
+				"accept": "Accept"
+			},
 			"errors": {
 				"creating": "Error dispatching parts. {{error}}"
 			},
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index a95c8511f..0e38e3c01 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -1985,6 +1985,7 @@
 				"shops": "Mis tiendas"
 			},
 			"tech": {
+				"dispatchedparts": "",
 				"home": "",
 				"jobclockin": "",
 				"jobclockout": "",
@@ -2126,6 +2127,9 @@
 			}
 		},
 		"parts_dispatch": {
+			"actions": {
+				"accept": ""
+			},
 			"errors": {
 				"creating": ""
 			},
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index ded54b294..8c69db593 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -1985,6 +1985,7 @@
 				"shops": "Mes boutiques"
 			},
 			"tech": {
+				"dispatchedparts": "",
 				"home": "",
 				"jobclockin": "",
 				"jobclockout": "",
@@ -2126,6 +2127,9 @@
 			}
 		},
 		"parts_dispatch": {
+			"actions": {
+				"accept": ""
+			},
 			"errors": {
 				"creating": ""
 			},