BOD-16 BOD-17 Added Contract detail pages + custom form components for courtesy cars.

client/src/pages/contract-detail/contract-detail.page.component.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import ContractFormComponent from "../../components/contract-form/contract-form.component";
+import { useTranslation } from "react-i18next";
+import { Button } from "antd";
+export default function ContractDetailPage() {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <Button type="primary" htmlType="submit">
+        {t("general.actions.save")}
+      </Button>
+      SOME SORT OF HEADER INFORMATION HERE.
+      <ContractFormComponent />
+    </div>
+  );
+}

client/src/pages/contract-detail/contract-detail.page.container.jsx

@@ -0,0 +1,84 @@
+import { useMutation, useQuery } from "@apollo/react-hooks";
+import { Form, notification } from "antd";
+import moment from "moment";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import AlertComponent from "../../components/alert/alert.component";
+import {
+  QUERY_CONTRACT_BY_PK,
+  UPDATE_CONTRACT
+} from "../../graphql/cccontracts.queries";
+import ContractDetailPageComponent from "./contract-detail.page.component";
+
+export default function ContractDetailPageContainer() {
+  const { t } = useTranslation();
+  const [updateContract] = useMutation(UPDATE_CONTRACT);
+  const [form] = Form.useForm();
+  const { contractId } = useParams();
+
+  const { loading, error, data } = useQuery(QUERY_CONTRACT_BY_PK, {
+    variables: { id: contractId }
+  });
+
+  useEffect(() => {
+    document.title = loading
+      ? t("titles.app")
+      : error
+      ? t("titles.app")
+      : t("titles.contracts-detail", {
+          id: (data && data.cccontracts_by_pk.id) || ""
+        });
+  }, [t, data, error, loading]);
+
+  const handleFinish = values => {
+    updateContract({
+      variables: { cccontract: { ...values }, contractId: contractId }
+    })
+      .then(response => {
+        notification["success"]({ message: t("contracts.successess.saved") });
+      })
+      .catch(error =>
+        notification["error"]({
+          message: t("contracts.errors.saving", { error: error })
+        })
+      );
+  };
+
+  useEffect(() => {
+    if (data) form.resetFields();
+  }, [data, form]);
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  return (
+    <Form
+      form={form}
+      autoComplete="no"
+      onFinish={handleFinish}
+      initialValues={
+        data
+          ? {
+              ...data.cccontracts_by_pk,
+              start: data.cccontracts_by_pk.start
+                ? moment(data.cccontracts_by_pk.start)
+                : null,
+              scheduledreturn: data.cccontracts_by_pk.scheduledreturn
+                ? moment(data.cccontracts_by_pk.scheduledreturn)
+                : null,
+              actualreturn: data.cccontracts_by_pk.actualreturn
+                ? moment(data.cccontracts_by_pk.actualreturn)
+                : null,
+              driver_dlexpiry: data.cccontracts_by_pk.driver_dlexpiry
+                ? moment(data.cccontracts_by_pk.driver_dlexpiry)
+                : null,
+              driver_dob: data.cccontracts_by_pk.driver_dob
+                ? moment(data.cccontracts_by_pk.driver_dob)
+                : null
+            }
+          : {}
+      }
+    >
+      <ContractDetailPageComponent />
+    </Form>
+  );
+}