IO-925 IO-927 IO-930 Production List Updates

client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx

@@ -2,7 +2,7 @@ import { Carousel } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CardTemplate from "./job-detail-cards.template.component";
-
+import { DetermineFileType } from "../documents-upload/documents-upload.utility";
 export default function JobDetailCardsDocumentsComponent({ loading, data }) {
   const { t } = useTranslation();
 
@@ -17,13 +17,18 @@ export default function JobDetailCardsDocumentsComponent({ loading, data }) {
     <CardTemplate
       loading={loading}
       title={t("jobs.labels.cards.documents")}
-      extraLink={`/manage/jobs/${data.id}?tab=documents`}>
+      extraLink={`/manage/jobs/${data.id}?tab=documents`}
+    >
       {data.documents.length > 0 ? (
         <Carousel autoplay>
           {data.documents.map((item) => (
             <img
               key={item.id}
-              src={`${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${item.key}.jpg`}
+              src={`${
+                process.env.REACT_APP_CLOUDINARY_ENDPOINT
+              }/${DetermineFileType(item.type)}/upload/${
+                process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS
+              }/${item.key}`}
               alt={item.name}
             />
           ))}

client/src/components/production-list-columns/production-list-columns.add.component.jsx

@@ -18,19 +18,28 @@ export default connect(
   mapDispatchToProps
 )(ProductionColumnsComponent);
 
-export function ProductionColumnsComponent({ columnState, technician }) {
+export function ProductionColumnsComponent({
+  columnState,
+  technician,
+  tableState,
+}) {
   const [columns, setColumns] = columnState;
   const { t } = useTranslation();
 
   const handleAdd = (e) => {
-    setColumns([...columns, ...dataSource({technician}).filter((i) => i.key === e.key)]);
+    setColumns([
+      ...columns,
+      ...dataSource({ technician, state: tableState }).filter(
+        (i) => i.key === e.key
+      ),
+    ]);
   };
 
   const columnKeys = columns.map((i) => i.key);
 
   const menu = (
     <Menu onClick={handleAdd}>
-      {dataSource({ technician })
+      {dataSource({ technician, state: tableState })
         .filter((i) => !columnKeys.includes(i.key))
         .map((item) => (
           <Menu.Item key={item.key}>{item.title}</Menu.Item>

client/src/components/production-list-columns/production-list-columns.data.js

@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
-import { alphaSort } from "../../utils/sorters";
+import { alphaSort, dateSort } from "../../utils/sorters";
 import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
 import ProductionListColumnAlert from "./production-list-columns.alert.component";
 import ProductionListColumnBodyPriority from "./production-list-columns.bodypriority.component";
@@ -15,8 +15,7 @@ import ProductionListColumnPaintPriority from "./production-list-columns.paintpr
 import ProductionListColumnNote from "./production-list-columns.productionnote.component";
 import ProductionListColumnStatus from "./production-list-columns.status.component";
 import ProductionlistColumnTouchTime from "./prodution-list-columns.touchtime.component";
-
+const r = ({ technician, state }) => {
-const r = ({ technician }) => {
   return [
     {
       title: i18n.t("jobs.actions.viewdetail"),
@@ -35,6 +34,8 @@ const r = ({ technician }) => {
       key: "ro_number",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
       render: (text, record) =>
         technician ? (
           <Link to={`/tech/joblookup?selected=${record.id}`}>
@@ -55,6 +56,8 @@ const r = ({ technician }) => {
         }`}</span>
       ),
       sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+      sortOrder:
+        state.sortedInfo.columnKey === "ownr" && state.sortedInfo.order,
     },
     {
       title: i18n.t("jobs.fields.vehicle"),
@@ -72,7 +75,9 @@ const r = ({ technician }) => {
       dataIndex: "actual_in",
       key: "actual_in",
       ellipsis: true,
-      sorter: (a, b) => a.actual_in - b.actual_in,
+      sorter: (a, b) => dateSort(a.actual_in, b.actual_in),
+      sortOrder:
+        state.sortedInfo.columnKey === "actual_in" && state.sortedInfo.order,
       render: (text, record) => (
         <DateFormatter>{record.actual_in || ""}</DateFormatter>
       ),
@@ -82,7 +87,11 @@ const r = ({ technician }) => {
       dataIndex: "scheduled_completion",
       key: "scheduled_completion",
       ellipsis: true,
-      sorter: (a, b) => a.scheduled_completion - b.scheduled_completion,
+      sorter: (a, b) =>
+        dateSort(a.scheduled_completion, b.scheduled_completion),
+      sortOrder:
+        state.sortedInfo.columnKey === "scheduled_completion" &&
+        state.sortedInfo.order,
       render: (text, record) => (
         <ProductionListDate record={record} field="scheduled_completion" />
       ),
@@ -92,7 +101,10 @@ const r = ({ technician }) => {
       dataIndex: "scheduled_delivery",
       key: "scheduled_delivery",
       ellipsis: true,
-      sorter: (a, b) => a.scheduled_delivery - b.scheduled_delivery,
+      sorter: (a, b) => dateSort(a.scheduled_delivery, b.scheduled_delivery),
+      sortOrder:
+        state.sortedInfo.columnKey === "scheduled_delivery" &&
+        state.sortedInfo.order,
       render: (text, record) => (
         <ProductionListDate record={record} field="scheduled_delivery" />
       ),
@@ -103,6 +115,8 @@ const r = ({ technician }) => {
       key: "ins_co_nm",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
+      sortOrder:
+        state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order,
     },
     {
       title: i18n.t("jobs.fields.clm_no"),
@@ -110,6 +124,8 @@ const r = ({ technician }) => {
       key: "clm_no",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
+      sortOrder:
+        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
     },
     {
       title: i18n.t("jobs.fields.clm_total"),
@@ -117,6 +133,8 @@ const r = ({ technician }) => {
       key: "clm_total",
       ellipsis: true,
       sorter: (a, b) => a.clm_total - b.clm_total,
+      sortOrder:
+        state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
       render: (text, record) => (
         <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
       ),
@@ -127,6 +145,8 @@ const r = ({ technician }) => {
       key: "owner_owing",
       ellipsis: true,
       sorter: (a, b) => a.owner_owing - b.owner_owing,
+      sortOrder:
+        state.sortedInfo.columnKey === "owner_owing" && state.sortedInfo.order,
       render: (text, record) => (
         <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
       ),
@@ -152,6 +172,7 @@ const r = ({ technician }) => {
       key: "csr",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a.csr, b.csr),
+      sortOrder: state.sortedInfo.columnKey === "csr" && state.sortedInfo.order,
     },
     {
       title: i18n.t("jobs.fields.alt_transport"),
@@ -159,6 +180,9 @@ const r = ({ technician }) => {
       key: "alt_transport",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
+      sortOrder:
+        state.sortedInfo.columnKey === "alt_transport" &&
+        state.sortedInfo.order,
     },
     {
       title: i18n.t("jobs.fields.status"),
@@ -166,6 +190,8 @@ const r = ({ technician }) => {
       key: "status",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a.status, b.status),
+      sortOrder:
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
       render: (text, record) => <ProductionListColumnStatus record={record} />,
     },
     {
@@ -174,6 +200,8 @@ const r = ({ technician }) => {
       key: "labhrs",
       sorter: (a, b) =>
         a.labhrs.aggregate.sum.mod_lb_hrs - b.labhrs.aggregate.sum.mod_lb_hrs,
+      sortOrder:
+        state.sortedInfo.columnKey === "labhrs" && state.sortedInfo.order,
       render: (text, record) => record.labhrs.aggregate.sum.mod_lb_hrs,
     },
     {
@@ -182,6 +210,8 @@ const r = ({ technician }) => {
       key: "larhrs",
       sorter: (a, b) =>
         a.larhrs.aggregate.sum.mod_lb_hrs - b.larhrs.aggregate.sum.mod_lb_hrs,
+      sortOrder:
+        state.sortedInfo.columnKey === "larhrs" && state.sortedInfo.order,
       render: (text, record) => record.larhrs.aggregate.sum.mod_lb_hrs,
     },
     {
@@ -214,6 +244,8 @@ const r = ({ technician }) => {
       sorter: (a, b) =>
         ((a.production_vars && a.production_vars.bodypriority) || 11) -
         ((b.production_vars && b.production_vars.bodypriority) || 11),
+      sortOrder:
+        state.sortedInfo.columnKey === "bodypriority" && state.sortedInfo.order,
       render: (text, record) => (
         <ProductionListColumnBodyPriority record={record} />
       ),
@@ -226,6 +258,9 @@ const r = ({ technician }) => {
       sorter: (a, b) =>
         ((a.production_vars && a.production_vars.paintpriority) || 11) -
         ((b.production_vars && b.production_vars.paintpriority) || 11),
+      sortOrder:
+        state.sortedInfo.columnKey === "paintpriority" &&
+        state.sortedInfo.order,
       render: (text, record) => (
         <ProductionListColumnPaintPriority record={record} />
       ),
@@ -238,6 +273,9 @@ const r = ({ technician }) => {
       sorter: (a, b) =>
         ((a.production_vars && a.production_vars.detailpriority) || 11) -
         ((b.production_vars && b.production_vars.detailpriority) || 11),
+      sortOrder:
+        state.sortedInfo.columnKey === "detailpriority" &&
+        state.sortedInfo.order,
       render: (text, record) => (
         <ProductionListColumnDetailPriority record={record} />
       ),

client/src/components/production-list-table/production-list-table.component.jsx

@@ -5,33 +5,51 @@ import ReactDragListView from "react-drag-listview";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ProductionListColumnsAdd from "../production-list-columns/production-list-columns.add.component";
 import ProductionListDetail from "../production-list-detail/production-list-detail.component";
 import ProductionListSaveConfigButton from "../production-list-save-config-button/production-list-save-config-button.component";
 import ResizeableTitle from "./production-list-table.resizeable.component";
+import ProductionListColumns from "../production-list-columns/production-list-columns.data";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
+  technician: selectTechnician,
 });
 
 export function ProductionListTable({
-  columnState,
   loading,
   data,
   bodyshop,
+  technician,
   refetch,
 }) {
-  const [columns, setColumns] = columnState;
   const [searchText, setSearchText] = useState("");
+
   const [state, setState] = useState(
-    bodyshop.production_config.tableState || {
+    (bodyshop.production_config && bodyshop.production_config.tableState) || {
       sortedInfo: {},
       filteredInfo: { text: "" },
     }
   );
+
   const { t } = useTranslation();
 
+  const [columns, setColumns] = useState(
+    (state &&
+      bodyshop.production_config &&
+      bodyshop.production_config.columnKeys.map((k) => {
+        return {
+          ...ProductionListColumns({ technician, state }).find(
+            (e) => e.key === k.key
+          ),
+          width: k.width,
+        };
+      })) ||
+      []
+  );
+
   const handleTableChange = (pagination, filters, sorter) => {
     setState({
       ...state,
@@ -125,7 +143,10 @@ export function ProductionListTable({
       <PageHeader
         extra={
           <Space wrap>
-            <ProductionListColumnsAdd columnState={columnState} />
+            <ProductionListColumnsAdd
+              columnState={[columns, setColumns]}
+              tableState={state}
+            />
             <ProductionListSaveConfigButton
               columns={columns}
               tableState={state}
@@ -175,7 +196,7 @@ export function ProductionListTable({
           rowKey="id"
           loading={loading}
           dataSource={dataSource}
-         // scroll={{ x: true }}
+          // scroll={{ x: true }}
           onChange={handleTableChange}
         />
       </ReactDragListView.DragColumn>

client/src/components/production-list-table/production-list-table.container.jsx

@@ -1,11 +1,10 @@
 import { useSubscription } from "@apollo/client";
-import React, { useState } from "react";
+import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { SUBSCRIPTION_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import ProductionListColumns from "../production-list-columns/production-list-columns.data";
 import ProductionListTable from "./production-list-table.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -21,22 +20,5 @@ export function ProductionListTableContainer({ bodyshop, technician }) {
     {}
   );
 
-  const columnState = useState(
+  return <ProductionListTable loading={loading} data={data ? data.jobs : []} />;
-    (bodyshop.production_config &&
-      bodyshop.production_config.columnKeys.map((k) => {
-        return {
-          ...ProductionListColumns({ technician }).find((e) => e.key === k.key),
-          width: k.width,
-        };
-      })) ||
-      []
-  );
-
-  return (
-    <ProductionListTable
-      loading={loading}
-      data={data ? data.jobs : []}
-      columnState={columnState}
-    />
-  );
 }

client/src/graphql/jobs.queries.js

@@ -130,6 +130,7 @@ export const SUBSCRIPTION_JOBS_IN_PRODUCTION = gql`
       clm_total
       ownr_ph1
       special_coverage_policy
+      owner_owing
       production_vars
       kanbanparent
       alt_transport
@@ -743,6 +744,7 @@ export const QUERY_JOB_CARD_DETAILS = gql`
       documents(limit: 3, order_by: { created_at: desc }) {
         id
         key
+        type
       }
     }
   }
@@ -813,6 +815,7 @@ export const QUERY_TECH_JOB_DETAILS = gql`
         id
         key
         size
+        type
       }
     }
   }

client/src/utils/sorters.js

@@ -1,3 +1,4 @@
+import moment from "moment";
 export function alphaSort(a, b) {
   let A;
   let B;
@@ -12,3 +13,13 @@ export function alphaSort(a, b) {
   // if (A > B) return 1;
   // return 0; //default return value (no sorting)
 }
+
+export function dateSort(a, b) {
+  return moment(a).isBefore(moment(b));
+
+  // if (A < B)
+  //   //sort string ascending
+  //   return -1;
+  // if (A > B) return 1;
+  // return 0; //default return value (no sorting)
+}