BOD-17 Added return car modal.

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

@@ -16,13 +16,15 @@ export default function CourtesyCarContractListComponent({ contracts }) {
   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,
+      dataIndex: "agreementnumber",
+      key: "agreementnumber",
+      sorter: (a, b) => a.agreementnumber - b.agreementnumber,
+      sortOrder:
+        state.sortedInfo.columnKey === "agreementnumber" &&
+        state.sortedInfo.order,
       render: (text, record) => (
         <Link to={`/manage/courtesycars/contracts/${record.id}`}>
-          {record.id || ""}
+          {record.agreementnumber || ""}
         </Link>
       )
     },

client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.component.jsx

@@ -0,0 +1,49 @@
+import { Form, DatePicker, InputNumber } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
+
+export default function CourtesyCarReturnModalComponent() {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <Form.Item
+        label={t("contracts.fields.actualreturn")}
+        name="actualreturn"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <DatePicker />
+      </Form.Item>
+      <Form.Item
+        label={t("contracts.fields.kmend")}
+        name="kmend"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <InputNumber />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.fuel")}
+        name={["courtesycar", "data", "fuel"]}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <CourtesyCarFuelSlider />
+      </Form.Item>
+    </div>
+  );
+}

client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx

@@ -0,0 +1,86 @@
+import { Form, Modal, notification } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectCourtesyCarReturn } from "../../redux/modals/modals.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import CourtesyCarReturnModalComponent from "./courtesy-car-return-modal.component";
+import moment from "moment";
+import { RETURN_CONTRACT } from "../../graphql/cccontracts.queries";
+import { useMutation } from "@apollo/react-hooks";
+
+const mapStateToProps = createStructuredSelector({
+  courtesyCarReturnModal: selectCourtesyCarReturn,
+  bodyshop: selectBodyshop
+});
+
+const mapDispatchToProps = dispatch => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("courtesyCarReturn"))
+});
+
+export function InvoiceEnterModalContainer({
+  courtesyCarReturnModal,
+  toggleModalVisible,
+  bodyshop
+}) {
+  const { visible, context, actions } = courtesyCarReturnModal;
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const [updateContract] = useMutation(RETURN_CONTRACT);
+  const handleFinish = values => {
+    console.log("Finish", values);
+
+    updateContract({
+      variables: {
+        contractId: context.contractId,
+        cccontract: {
+          kmend: values.kmend,
+          actualreturn: values.actualreturn,
+          status: "contracts.status.returned"
+        },
+        courtesycarid: context.courtesyCarId,
+        courtesycar: {
+          status: "courtesycars.status.in",
+          fuel: values.fuel,
+          mileage: values.kmend
+        }
+      }
+    })
+      .then(r => {
+        if (actions.refetch) actions.refetch();
+        toggleModalVisible();
+      })
+      .catch(error => {
+        notification["error"]({
+          message: t("contracts.errors.returning", { error: error })
+        });
+      });
+  };
+
+  return (
+    <Modal
+      title={t("courtesycars.labels.return")}
+      visible={visible}
+      onCancel={() => toggleModalVisible()}
+      width={"90%"}
+      okText={t("general.actions.save")}
+      onOk={() => form.submit()}
+      okButtonProps={{ htmlType: "submit" }}
+    >
+      <Form
+        form={form}
+        onFinish={handleFinish}
+        initialValues={{ fuel: 100, actualreturn: moment(new Date()) }}
+      >
+        <CourtesyCarReturnModalComponent />
+      </Form>
+    </Modal>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(InvoiceEnterModalContainer);

client/src/components/header/header.component.jsx

@@ -25,7 +25,7 @@ export default ({
           <img alt="Shop Logo" src={logo} style={{ height: "40px" }} />
         </Col>
       ) : null}
-      <Col span={14}>
+      <Col span={21}>
         {landingHeader ? (
           <Menu
             theme="dark"

client/src/components/vehicle-tag-popover/vehicle-tag-popover.component.jsx

@@ -56,7 +56,7 @@ export default function VehicleTagPopoverComponent({ job }) {
         </Col>
       </Row>
       <Link to={`/manage/vehicles/${job.vehicle.id}`}>
-        <Button>{t("vehicle.labels.updatevehicle")}</Button>
+        <Button>{t("vehicles.labels.updatevehicle")}</Button>
       </Link>
     </div>
   );