IO-3010 Task Table UI refactor

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

client/src/components/chat-popup/chat-popup.component.jsx

@@ -45,7 +45,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
     if (fcmToken) {
       setpollInterval(0);
     } else {
-      setpollInterval(90000);
+      setpollInterval(60000);
     }
   }, [fcmToken]);
 

client/src/components/scoreboard-display/scoreboard-display.component.jsx

@@ -4,12 +4,12 @@ import ScoreboardChart from "../scoreboard-chart/scoreboard-chart.component";
 import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.component";
 import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component";
 
-import { useApolloClient, useQuery } from "@apollo/client";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { GET_BLOCKED_DAYS, QUERY_SCOREBOARD } from "../../graphql/scoreboard.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import dayjs from "../../utils/day";
+import { useApolloClient, useQuery } from "@apollo/client";
+import { GET_BLOCKED_DAYS, QUERY_SCOREBOARD } from "../../graphql/scoreboard.queries";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -26,7 +26,7 @@ export function ScoreboardDisplayComponent({ bodyshop }) {
       start: dayjs().startOf("month"),
       end: dayjs().endOf("month")
     },
-    pollInterval: 60000*5
+    pollInterval: 60000
   });
 
   const { data } = scoreboardSubscription;

client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.component.jsx

@@ -1,13 +1,13 @@
 import { useQuery } from "@apollo/client";
 import { Col, Row } from "antd";
 import _ from "lodash";
+import dayjs from "../../utils/day";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { QUERY_TIME_TICKETS_IN_RANGE_SB } from "../../graphql/timetickets.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import dayjs from "../../utils/day";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import * as Utils from "../scoreboard-targets-table/scoreboard-targets-table.util";
@@ -86,7 +86,7 @@ export function ScoreboardTimeTicketsStats({ bodyshop }) {
     },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    pollInterval: 60000*5,
+    pollInterval: 60000,
     skip: !fixedPeriods
   });
 

client/src/components/scoreboard-timetickets/scoreboard-timetickets.component.jsx

@@ -1,11 +1,11 @@
 import { useQuery } from "@apollo/client";
 import { Col, Row } from "antd";
 import _ from "lodash";
+import dayjs from "../../utils/day";
 import queryString from "query-string";
 import React, { useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { QUERY_TIME_TICKETS_IN_RANGE_SB } from "../../graphql/timetickets.queries";
-import dayjs from "../../utils/day";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import * as Utils from "../scoreboard-targets-table/scoreboard-targets-table.util";
@@ -68,7 +68,7 @@ export default function ScoreboardTimeTickets() {
     },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    pollInterval: 60000*5,
+    pollInterval: 60000,
     skip: !fixedPeriods
   });
 

client/src/components/task-list/task-list.component.jsx

@@ -144,7 +144,7 @@ function TaskListComponent({
     title: t("tasks.fields.created_by"),
     dataIndex: "created_by",
     key: "created_by",
-    width: "10%",
+    width: "8%",
     defaultSortOrder: "descend",
     sorter: true,
     sortOrder: sortcolumn === "created_by" && sortorder,
@@ -166,65 +166,70 @@ function TaskListComponent({
     });
   }
 
-  if (showRo) {
-    columns.push({
-      title: t("tasks.fields.job.ro_number"),
-      dataIndex: ["job", "ro_number"],
-      key: "job.ro_number",
-      width: "8%",
-      render: (text, record) =>
-        record.job ? (
-          <Link to={`/manage/jobs/${record.job.id}?tab=tasks`}>{record.job.ro_number || t("general.labels.na")}</Link>
-        ) : (
-          t("general.labels.na")
-        )
-    });
-  }
+  columns.push({
+    title: t("tasks.fields.related_items"),
+    key: "related_items",
+    width: "12%",
+    render: (text, record) => {
+      const items = [];
+
+      // Job
+      if (showRo && record.job) {
+        items.push(
+          <Link key="job" to={`/manage/jobs/${record.job.id}?tab=tasks`}>
+            {t("tasks.fields.job.ro_number")}: {record.job.ro_number}
+          </Link>
+        );
+      }
+      if (showRo && !record.job) {
+        items.push(`${t("tasks.fields.job.ro_number")}: ${t("general.labels.na")}`);
+      }
+
+      // Jobline
+      if (record.jobline?.line_desc) {
+        items.push(
+          <span key="jobline">
+            {t("tasks.fields.jobline")}: {record.jobline.line_desc}
+          </span>
+        );
+      }
+
+      // Parts Order
+      if (record.parts_order) {
+        const { order_number, vendor } = record.parts_order;
+        const partsOrderText =
+          order_number && vendor?.name ? `${order_number} - ${vendor.name}` : t("general.labels.na");
+        items.push(
+          <Link
+            key="parts_order"
+            to={`/manage/jobs/${record.job.id}?partsorderid=${record.parts_order.id}&tab=partssublet`}
+          >
+            {t("tasks.fields.parts_order")}: {partsOrderText}
+          </Link>
+        );
+      }
+
+      // Bill
+      if (record.bill) {
+        const { invoice_number, vendor } = record.bill;
+        const billText = invoice_number && vendor?.name ? `${invoice_number} - ${vendor.name}` : t("general.labels.na");
+        items.push(
+          <Link key="bill" to={`/manage/jobs/${record.job.id}?billid=${record.bill.id}&tab=partssublet`}>
+            {t("tasks.fields.bill")}: {billText}
+          </Link>
+        );
+      }
+
+      return items.length > 0 ? <Space direction="vertical">{items}</Space> : null;
+    }
+  });
 
   columns.push(
-    {
-      title: t("tasks.fields.jobline"),
-      dataIndex: ["jobline", "id"],
-      key: "jobline.id",
-      width: "8%",
-      render: (text, record) => record?.jobline?.line_desc || ""
-    },
-    {
-      title: t("tasks.fields.parts_order"),
-      dataIndex: ["parts_order", "id"],
-      key: "part_order.id",
-      width: "8%",
-      render: (text, record) =>
-        record.parts_order ? (
-          <Link to={`/manage/jobs/${record.job.id}?partsorderid=${record.parts_order.id}&tab=partssublet`}>
-            {record.parts_order.order_number && record.parts_order.vendor && record.parts_order.vendor.name
-              ? `${record.parts_order.order_number} - ${record.parts_order.vendor.name}`
-              : t("general.labels.na")}
-          </Link>
-        ) : (
-          ""
-        )
-    },
-    {
-      title: t("tasks.fields.bill"),
-      dataIndex: ["bill", "id"],
-      key: "bill.id",
-      width: "10%",
-      render: (text, record) =>
-        record.bill ? (
-          <Link to={`/manage/jobs/${record.job.id}?billid=${record.bill.id}&tab=partssublet`}>
-            {record.bill.invoice_number && record.bill.vendor && record.bill.vendor.name
-              ? `${record.bill.invoice_number} - ${record.bill.vendor.name}`
-              : t("general.labels.na")}
-          </Link>
-        ) : (
-          ""
-        )
-    },
     {
       title: t("tasks.fields.title"),
       dataIndex: "title",
       key: "title",
+      minWidth: "20%",
       sorter: true,
       sortOrder: sortcolumn === "title" && sortorder
     },
@@ -258,7 +263,7 @@ function TaskListComponent({
     {
       title: t("tasks.fields.actions"),
       key: "toggleCompleted",
-      width: "5%",
+      width: "8%",
       render: (text, record) => (
         <Space direction="horizontal">
           <Button

client/src/components/time-ticket-list/time-ticket-list.component.jsx

@@ -39,7 +39,7 @@ export function TimeTicketList({
   extra
 }) {
   const [state, setState] = useState({
-    sortedInfo: { columnKey: 'date', order: 'descend' },
+    sortedInfo: {},
     filteredInfo: { text: "" }
   });
 

client/src/graphql/timetickets.queries.js

@@ -2,7 +2,7 @@ import { gql } from "@apollo/client";
 
 export const QUERY_TICKETS_BY_JOBID = gql`
   query QUERY_TICKETS_BY_JOBID($jobid: uuid!) {
-    timetickets(where: { jobid: { _eq: $jobid } }) {
+    timetickets(where: { jobid: { _eq: $jobid } }, order_by: { date: desc_nulls_first }) {
       actualhrs
       cost_center
       ciecacode
@@ -26,7 +26,7 @@ export const QUERY_TICKETS_BY_JOBID = gql`
 
 export const QUERY_TIME_TICKETS_IN_RANGE = gql`
   query QUERY_TIME_TICKETS_IN_RANGE($start: date!, $end: date!) {
-    timetickets(where: { date: { _gte: $start, _lte: $end } }) {
+    timetickets(where: { date: { _gte: $start, _lte: $end } }, order_by: { date: desc_nulls_first }) {
       actualhrs
       ciecacode
       clockoff
@@ -69,6 +69,7 @@ export const QUERY_TIME_TICKETS_TECHNICIAN_IN_RANGE = gql`
   ) {
     timetickets(
       where: { date: { _gte: $start, _lte: $end }, employeeid: { _eq: $employeeid } }
+      order_by: { date: desc_nulls_first }
     ) {
       actualhrs
       ciecacode
@@ -100,6 +101,7 @@ export const QUERY_TIME_TICKETS_TECHNICIAN_IN_RANGE = gql`
     }
     fixedperiod: timetickets(
       where: { date: { _gte: $fixedStart, _lte: $fixedEnd }, employeeid: { _eq: $employeeid } }
+      order_by: { date: desc_nulls_first }
     ) {
       actualhrs
       ciecacode
@@ -333,6 +335,7 @@ export const UPDATE_TIME_TICKETS = gql`
 export const QUERY_ACTIVE_TIME_TICKETS = gql`
   query QUERY_ACTIVE_TIME_TICKETS($employeeId: uuid) {
     timetickets(
+      order_by: { date: desc_nulls_first }
       where: {
         _and: {
           clockoff: { _is_null: true }

client/src/translations/en_us/common.json

@@ -3204,6 +3204,7 @@
           "medium": "Medium"
         },
         "priority": "Priority",
+        "related_items": "Related Items",
         "remind_at": "Remind At",
         "title": "Title"
       },

client/src/translations/es/common.json

@@ -3204,6 +3204,7 @@
           "medium": ""
         },
         "priority": "",
+        "related_items": "",
         "remind_at": "",
         "title": ""
       },

client/src/translations/fr/common.json

@@ -3204,6 +3204,7 @@
           "medium": ""
         },
         "priority": "",
+        "related_items": "",
         "remind_at": "",
         "title": ""
       },