WIP Tech Claiming Ability

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);

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>