BOD-16 BOD-17 Changes to existing pages to accomodate new cc schema

client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx

@@ -1,5 +1,98 @@
-import React from "react";
+import { Table } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { alphaSort } from "../../utils/sorters";
+import { DateFormatter } from "../../utils/DateFormatter";
 
 export default function CourtesyCarContractListComponent({ contracts }) {
-  return <div>List</div>;
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" }
+  });
+
+  const { t } = useTranslation();
+
+  const columns = [
+    {
+      title: t("contracts.fields.agreementnumber"),
+      dataIndex: "id",
+      key: "id",
+      sorter: (a, b) => alphaSort(a.id, b.id),
+      sortOrder: state.sortedInfo.columnKey === "id" && state.sortedInfo.order,
+      render: (text, record) => (
+        <Link to={`/manage/courtesycars/contracts/${record.id}`}>
+          {record.id || ""}
+        </Link>
+      )
+    },
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "job.ro_number",
+      key: "job.ro_number",
+      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "job.ro_number" &&
+        state.sortedInfo.order,
+      render: (text, record) => (
+        <Link to={`/manage/jobs/${record.job.id}`}>
+          {record.job.ro_number || ""}
+        </Link>
+      )
+    },
+    {
+      title: t("contracts.fields.driver"),
+      dataIndex: "driver_ln",
+      key: "driver_ln",
+      sorter: (a, b) => alphaSort(a.driver_ln, b.driver_ln),
+      sortOrder:
+        state.sortedInfo.columnKey === "driver_ln" && state.sortedInfo.order,
+      render: (text, record) =>
+        `${record.driver_fn || ""} ${record.driver_ln || ""}`
+    },
+    {
+      title: t("contracts.fields.status"),
+      dataIndex: "status",
+      key: "status",
+      sorter: (a, b) => alphaSort(a.status, b.status),
+      sortOrder:
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      render: (text, record) => t(record.status)
+    },
+    {
+      title: t("contracts.fields.start"),
+      dataIndex: "start",
+      key: "start",
+      sorter: (a, b) => alphaSort(a.start, b.start),
+      sortOrder:
+        state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
+      render: (text, record) => <DateFormatter>{record.start}</DateFormatter>
+    },
+    {
+      title: t("contracts.fields.scheduledreturn"),
+      dataIndex: "scheduledreturn",
+      key: "scheduledreturn",
+      sorter: (a, b) => a.scheduledreturn - b.scheduledreturn,
+      sortOrder:
+        state.sortedInfo.columnKey === "scheduledreturn" &&
+        state.sortedInfo.order,
+      render: (text, record) => (
+        <DateFormatter>{record.scheduledreturn}</DateFormatter>
+      )
+    }
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+  return (
+    <Table
+      size="small"
+      pagination={{ position: "top" }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={contracts}
+      onChange={handleTableChange}
+    />
+  );
 }

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -1,5 +1,17 @@
 import { DownCircleFilled } from "@ant-design/icons";
-import { Avatar, Badge, Button, Checkbox, Descriptions, Dropdown, Menu, notification, PageHeader, Tag } from "antd";
+import {
+  Avatar,
+  Badge,
+  Button,
+  Checkbox,
+  Descriptions,
+  Dropdown,
+  List,
+  Menu,
+  notification,
+  PageHeader,
+  Tag
+} from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import Moment from "react-moment";
@@ -11,6 +23,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import BarcodePopup from "../barcode-popup/barcode-popup.component";
 import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component";
 import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component";
+import { Link } from "react-router-dom";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -137,7 +150,15 @@ export default connect(
         </Descriptions.Item>
 
         <Descriptions.Item key="servicecar" label={t("jobs.fields.servicecar")}>
-          {job.service_car}
+          {job.cccontracts &&
+            job.cccontracts.map(item => (
+              <Link
+                key={item.id}
+                to={`/manage/courtesycars/contracts/${item.id}`}
+              >
+                <div>{`${item.start} - ${item.scheduledreturn}`}</div>
+              </Link>
+            ))}
         </Descriptions.Item>
       </Descriptions>
     </PageHeader>