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

client/src/components/contract-cars/contract-cars.component.jsx

@@ -92,7 +92,7 @@ export default function ContractsCarsComponent({
               .includes(state.search.toLowerCase()) ||
             (cc.plate || "").toLowerCase().includes(state.search.toLowerCase())
         );
-  console.log("filteredData", filteredData);
+
   return (
     <Table
       loading={loading}

client/src/components/contract-jobs/contract-jobs.component.jsx

@@ -160,7 +160,7 @@ export default function ContractsJobsComponent({
               .includes(state.search.toLowerCase())
         );
 
-  console.log("filteredData", filteredData);
+
   return (
     <Table
       loading={loading}

client/src/components/contract-status-select/contract-status-select.component.jsx

@@ -1,18 +1,20 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Select } from "antd";
 import { useTranslation } from "react-i18next";
 const { Option } = Select;
 
-const ContractStatusComponent = ({ value = "", onChange }) => {
-  const [option, setOption] = useState("contracts.status.new");
+const ContractStatusComponent = ({
+  value = "contracts.status.new",
+  onChange
+}) => {
+  const [option, setOption] = useState(value);
   const { t } = useTranslation();
 
-  const onChangeSelect = newOption => {
-    setOption(newOption);
+  useEffect(() => {
     if (onChange) {
-      onChange(newOption);
+      onChange(option);
     }
-  };
+  }, [option, onChange]);
 
   return (
     <Select
@@ -20,7 +22,7 @@ const ContractStatusComponent = ({ value = "", onChange }) => {
       style={{
         width: 100
       }}
-      onChange={onChangeSelect}
+      onChange={setOption}
     >
       <Option value="contracts.status.new">{t("contracts.status.new")}</Option>
       <Option value="contracts.status.out">{t("contracts.status.out")}</Option>

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

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function CourtesyCarContractListComponent({ contracts }) {
+  return <div>List</div>;
+}

client/src/components/courtesy-car-form/courtesy-car-form.component.jsx

@@ -2,6 +2,9 @@ import React from "react";
 import { Form, Input, InputNumber, DatePicker, Button } from "antd";
 import { useTranslation } from "react-i18next";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
+import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
+
 export default function CourtesyCarCreateFormComponent() {
   const { t } = useTranslation();
   return (
@@ -121,7 +124,7 @@ export default function CourtesyCarCreateFormComponent() {
           }
         ]}
       >
-        <Input />
+        <CourtesyCarStatus />
       </Form.Item>
       <Form.Item
         label={t("courtesycars.fields.nextservicekm")}
@@ -163,7 +166,7 @@ export default function CourtesyCarCreateFormComponent() {
           }
         ]}
       >
-        <Input />
+        <CourtesyCarFuelSlider />
       </Form.Item>
       <Form.Item
         label={t("courtesycars.fields.registrationexpires")}

client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx

@@ -0,0 +1,46 @@
+import { Slider } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+const CourtesyCarFuelComponent = ({ value = 100, onChange }) => {
+  const [option, setOption] = useState(value);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(option);
+    }
+  }, [option, onChange]);
+
+  const marks = {
+    0: {
+      style: {
+        color: "#f50"
+      },
+      label: t("courtesycars.labels.fuel.empty")
+    },
+    13: t("courtesycars.labels.fuel.18"),
+    25: t("courtesycars.labels.fuel.14"),
+    38: t("courtesycars.labels.fuel.38"),
+    50: t("courtesycars.labels.fuel.12"),
+    63: t("courtesycars.labels.fuel.58"),
+    75: t("courtesycars.labels.fuel.34"),
+    88: t("courtesycars.labels.fuel.78"),
+    100: {
+      style: {
+        color: "#008000"
+      },
+      label: <strong>{t("courtesycars.labels.fuel.full")}</strong>
+    }
+  };
+
+  return (
+    <Slider
+      marks={marks}
+      defaultValue={value}
+      onChange={setOption}
+      step={null}
+    />
+  );
+};
+export default CourtesyCarFuelComponent;

client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx

@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from "react";
+import { Select } from "antd";
+import { useTranslation } from "react-i18next";
+const { Option } = Select;
+
+const CourtesyCarStatusComponent = ({
+  value = "courtesycars.status.in",
+  onChange
+}) => {
+  const [option, setOption] = useState(value);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(option);
+    }
+  }, [option, onChange]);
+
+  return (
+    <Select
+      value={option}
+      style={{
+        width: 100
+      }}
+      onChange={setOption}
+    >
+      <Option value="courtesycars.status.in">
+        {t("courtesycars.status.in")}
+      </Option>
+      <Option value="courtesycars.status.inservice">
+        {t("courtesycars.status.inservice")}
+      </Option>
+      <Option value="courtesycars.status.out">
+        {t("courtesycars.status.out")}
+      </Option>
+    </Select>
+  );
+};
+export default CourtesyCarStatusComponent;

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -9,7 +9,6 @@ export default function JobsList({ loading, courtesycars }) {
     sortedInfo: {},
     filteredInfo: { text: "" }
   });
-  console.log("courtesycars", courtesycars);
 
   const { t } = useTranslation();
 
@@ -38,7 +37,8 @@ export default function JobsList({ loading, courtesycars }) {
       key: "status",
       sorter: (a, b) => alphaSort(a.status, b.status),
       sortOrder:
-        state.sortedInfo.columnKey === "status" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      render: (text, record) => t(record.status)
     },
     {
       title: t("courtesycars.fields.year"),