WIP Time Ticket Summary BOD-191

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

@@ -5,6 +5,9 @@ import { Link } from "react-router-dom";
 import { alphaSort } from "../../utils/sorters";
 import { DateFormatter } from "../../utils/DateFormatter";
 import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import moment from "moment";
+import { onlyUnique } from "../../utils/arrayHelper";
 
 export default function TimeTicketList({
   loading,
@@ -37,8 +40,7 @@ export default function TimeTicketList({
       sortOrder: state.sortedInfo.columnKey === "vin" && state.sortedInfo.order,
       render: (text, record) => (
         <Link
-          to={`/manage/employees/${record.employee.id}`}
-        >{`${record.employee.first_name} ${record.employee.last_name}`}</Link>
+          to={`/manage/employees/${record.employee.id}`}>{`${record.employee.first_name} ${record.employee.last_name}`}</Link>
       ),
     },
     {
@@ -48,6 +50,17 @@ export default function TimeTicketList({
       sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filters:
+        timetickets
+          .map((l) => l.cost_center)
+          .filter(onlyUnique)
+          .map((s) => {
+            return {
+              text: s, //|| "No Status*",
+              value: [s],
+            };
+          }) || [],
+      onFilter: (value, record) => value.includes(record.cost_center),
     },
     {
       title: t("timetickets.fields.productivehrs"),
@@ -66,6 +79,49 @@ export default function TimeTicketList({
       sortOrder:
         state.sortedInfo.columnKey === "actualhrs" && state.sortedInfo.order,
     },
+    {
+      title: t("timetickets.fields.clockon"),
+      dataIndex: "clockon",
+      key: "clockon",
+      sorter: (a, b) => a.clockon - b.clockon,
+      sortOrder:
+        state.sortedInfo.columnKey === "clockon" && state.sortedInfo.order,
+      render: (text, record) => (
+        <DateTimeFormatter>{record.clockon}</DateTimeFormatter>
+      ),
+    },
+    {
+      title: t("timetickets.fields.clockoff"),
+      dataIndex: "clockoff",
+      key: "clockoff",
+      sorter: (a, b) => a.clockoff - b.clockoff,
+      sortOrder:
+        state.sortedInfo.columnKey === "clockoff" && state.sortedInfo.order,
+      render: (text, record) => (
+        <DateTimeFormatter>{record.clockoff}</DateTimeFormatter>
+      ),
+    },
+    {
+      title: t("timetickets.fields.clockhours"),
+      dataIndex: "clockoff",
+      key: "clockoff",
+      sorter: (a, b) => a.clockoff - b.clockoff,
+      sortOrder:
+        state.sortedInfo.columnKey === "clockoff" && state.sortedInfo.order,
+      render: (text, record) => {
+        if (record.clockoff && record.clockon)
+          return (
+            <div>
+              {moment(record.clockoff)
+                .diff(moment(record.clockon), "hours", true)
+                .toFixed(2)}
+            </div>
+          );
+        else {
+          return null;
+        }
+      },
+    },
     {
       title: t("general.labels.actions"),
       dataIndex: "actions",
@@ -75,8 +131,7 @@ export default function TimeTicketList({
         return (
           <TimeTicketEnterButton
             actions={{ refetch }}
-            context={{ id: record.id, timeticket: record }}
-          >
+            context={{ id: record.id, timeticket: record }}>
             {t("general.actions.edit")}
           </TimeTicketEnterButton>
         );
@@ -91,10 +146,10 @@ export default function TimeTicketList({
   return (
     <Table
       loading={loading}
-      size="small"
+      size='small'
       pagination={{ position: "top" }}
       columns={columns.map((item) => ({ ...item }))}
-      rowKey="id"
+      rowKey='id'
       dataSource={timetickets}
       onChange={handleTableChange}
     />