Add audit trail and resolve status update.

client/src/pages/tech-assigned-prod-jobs/tech-assigned-prod-jobs.component.jsx

@@ -0,0 +1,261 @@
+import { useQuery } from "@apollo/client";
+import React, { useState } from "react";
+import { Table } from "antd";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { QUERY_JOBS_TECH_ASIGNED_TO_BY_TEAM } from "../../graphql/jobs.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { alphaSort } from "../../utils/sorters";
+import { SyncOutlined } from "@ant-design/icons";
+import { Button, Card, Input, Space } from "antd";
+import queryString from "query-string";
+import { useTranslation } from "react-i18next";
+import { useHistory, useLocation } from "react-router-dom";
+import { onlyUnique } from "../../utils/arrayHelper";
+import AlertComponent from "../../components/alert/alert.component";
+import OwnerNameDisplay from "../../components/owner-name-display/owner-name-display.component";
+import { setModalContext } from "../../redux/modals/modals.actions";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  technician: selectTechnician,
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  setTimeTicketTaskContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "timeTicketTask" })),
+});
+
+export function TechAssignedProdJobs({
+  setTimeTicketTaskContext,
+  technician,
+  bodyshop,
+}) {
+  const { loading, error, data, refetch } = useQuery(
+    QUERY_JOBS_TECH_ASIGNED_TO_BY_TEAM,
+    {
+      variables: {
+        teamIds: bodyshop.employee_teams
+          .filter((et) =>
+            et.employee_team_members.find(
+              (etm) => etm.employeeid === technician.id
+            )
+          )
+          .map((et) => et.id),
+      },
+    }
+  );
+
+  const searchParams = queryString.parse(useLocation().search);
+  const { selected } = searchParams;
+
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" },
+  });
+  const { t } = useTranslation();
+  const history = useHistory();
+  const [searchText, setSearchText] = useState("");
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  const jobs = data
+    ? searchText === ""
+      ? data.jobs
+      : data.jobs.filter(
+          (j) =>
+            (j.ro_number || "")
+              .toString()
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (j.ownr_fn || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (j.ownr_ln || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (j.ownr_co_nm || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (j.clm_no || "").toLowerCase().includes(searchText.toLowerCase()) ||
+            (j.plate_no || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (j.v_model_desc || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (j.v_make_desc || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase())
+        )
+    : [];
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+
+      render: (text, record) => record.ro_number || t("general.labels.na"),
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+      sortOrder:
+        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+      ellipsis: true,
+      render: (text, record) => (
+        <span>
+          <OwnerNameDisplay ownerObject={record} />
+        </span>
+      ),
+    },
+    {
+      title: t("jobs.fields.status"),
+      dataIndex: "status",
+      key: "status",
+      sorter: (a, b) => alphaSort(a.status, b.status),
+      sortOrder:
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filters:
+        (jobs &&
+          jobs
+            .map((j) => j.status)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Status*",
+                value: [s],
+              };
+            })) ||
+        [],
+      onFilter: (value, record) => value.includes(record.status),
+      render: (text, record) => {
+        return record.status || t("general.labels.na");
+      },
+    },
+
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      render: (text, record) => (
+        <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+          record.v_model_desc || ""
+        }`}</span>
+      ),
+    },
+    {
+      title: t("vehicles.fields.plate_no"),
+      dataIndex: "plate_no",
+      key: "plate_no",
+      sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
+      sortOrder:
+        state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.plate_no ? record.plate_no : "";
+      },
+    },
+    {
+      title: t("jobs.fields.clm_no"),
+      dataIndex: "clm_no",
+      key: "clm_no",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
+      sortOrder:
+        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.clm_no ? (
+          <span>{record.clm_no}</span>
+        ) : (
+          t("general.labels.unknown")
+        );
+      },
+    },
+    {
+      title: t("jobs.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      render: (text, record) => (
+        <Button
+          onClick={() => {
+            setTimeTicketTaskContext({
+              actions: { refetch: refetch },
+              context: { jobid: record.id },
+            });
+          }}
+        >
+          {t("timetickets.actions.claimtasks")}
+        </Button>
+      ),
+    },
+  ];
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const handleOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        history.push({
+          search: queryString.stringify({
+            ...searchParams,
+            selected: record.id,
+          }),
+        });
+      }
+    }
+  };
+  return (
+    <Card
+      extra={
+        <Space wrap>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            onChange={(e) => {
+              setSearchText(e.target.value);
+            }}
+            value={searchText}
+            enterButton
+          />
+        </Space>
+      }
+    >
+      <Table
+        loading={loading}
+        pagination={false}
+        columns={columns}
+        rowKey="id"
+        dataSource={jobs}
+        scroll={{ x: true }}
+        rowSelection={{
+          onSelect: (record) => {
+            handleOnRowClick(record);
+          },
+          selectedRowKeys: [selected],
+          type: "radio",
+        }}
+        onChange={handleTableChange}
+        // onRow={(record, rowIndex) => {
+        //   return {
+        //     onClick: (event) => {
+        //       handleOnRowClick(record);
+        //     },
+        //   };
+        // }}
+      />
+    </Card>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TechAssignedProdJobs);

client/src/pages/tech-lookup/tech-lookup.container.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import RbacWrapperComponent from "../../components/rbac-wrapper/rbac-wrapper.component";
-import TechLookupJobsDrawer from "../../components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component";
 import TechLookupJobsList from "../../components/tech-lookup-jobs-list/tech-lookup-jobs-list.component";
 
 export default function TechLookupContainer() {
@@ -8,7 +7,6 @@ export default function TechLookupContainer() {
     <div>
       <RbacWrapperComponent action="jobs:list-active">
         <TechLookupJobsList />
-        <TechLookupJobsDrawer />
       </RbacWrapperComponent>
     </div>
   );

client/src/pages/tech/tech.page.component.jsx

@@ -12,6 +12,8 @@ import TechSider from "../../components/tech-sider/tech-sider.component";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 import "./tech.page.styles.scss";
+import TechLookupJobsDrawer from "../../components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component";
+
 import UpdateAlert from "../../components/update-alert/update-alert.component";
 const TimeTicketModalContainer = lazy(() =>
   import("../../components/time-ticket-modal/time-ticket-modal.container")
@@ -40,6 +42,9 @@ const TimeTicketModalTask = lazy(() =>
     "../../components/time-ticket-task-modal/time-ticket-task-modal.container"
   )
 );
+const TechAssignedProdJobs = lazy(() =>
+  import("../tech-assigned-prod-jobs/tech-assigned-prod-jobs.component")
+);
 const { Content } = Layout;
 
 const mapStateToProps = createStructuredSelector({
@@ -63,7 +68,7 @@ export function TechPage({ technician, match }) {
         {technician ? null : <Redirect to={`${match.path}/login`} />}
         <UpdateAlert />
         <TechHeader />
-
+        <TechLookupJobsDrawer />
         <Content className="tech-content-container">
           <ErrorBoundary>
             <Suspense
@@ -106,6 +111,11 @@ export function TechPage({ technician, match }) {
                     path={`${match.path}/board`}
                     component={ProductionBoardPage}
                   />
+                  <Route
+                    exact
+                    path={`${match.path}/assigned`}
+                    component={TechAssignedProdJobs}
+                  />
                 </Switch>
               </FeatureWrapper>
             </Suspense>