Updated contract creation to include auto status changes. BOD-314

2020-08-28 09:44:55 -07:00
parent 554a8f6170
commit fbde4ddc2a
15 changed files with 328 additions and 226 deletions
--- a/client/src/components/contract-cars/contract-cars.container.jsx
+++ b/client/src/components/contract-cars/contract-cars.container.jsx
@@ -4,15 +4,17 @@ import { QUERY_AVAILABLE_CC } from "../../graphql/courtesy-car.queries";
 import AlertComponent from "../alert/alert.component";
 import ContractCarsComponent from "./contract-cars.component";

-
-
-export default function ContractCarsContainer({ selectedCarState, bodyshop }) {
+export default function ContractCarsContainer({ selectedCarState, form }) {
  const { loading, error, data } = useQuery(QUERY_AVAILABLE_CC);

  const [selectedCar, setSelectedCar] = selectedCarState;

-  const handleSelect = record => {
+  const handleSelect = (record) => {
    setSelectedCar(record.id);
+    form.setFieldsValue({
+      kmstart: record.mileage,
+      dailyrate: record.dailycost,
+    });
  };

  if (error) return <AlertComponent message={error.message} type="error" />;
--- a/client/src/components/contract-form/contract-form.component.jsx
+++ b/client/src/components/contract-form/contract-form.component.jsx
@@ -6,7 +6,7 @@ import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import InputPhone from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-export default function ContractFormComponent({ form }) {
+export default function ContractFormComponent({ form, create = false }) {
  const { t } = useTranslation();
  return (
    <div>
@@ -14,18 +14,21 @@ export default function ContractFormComponent({ form }) {
        <FormFieldsChanged form={form} />
      </div>
      <LayoutFormRow>
-        <Form.Item
-          label={t("contracts.fields.status")}
-          name="status"
-          rules={[
-            {
-              required: true,
-              message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <ContractStatusSelector />
-        </Form.Item>
+        {create ? null : (
+          <Form.Item
+            label={t("contracts.fields.status")}
+            name="status"
+            rules={[
+              {
+                required: true,
+                message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <ContractStatusSelector />
+          </Form.Item>
+        )}
+
        <Form.Item
          label={t("contracts.fields.start")}
          name="start"
@@ -50,12 +53,14 @@ export default function ContractFormComponent({ form }) {
        >
          <FormDatePicker />
        </Form.Item>
-        <Form.Item
-          label={t("contracts.fields.actualreturn")}
-          name="actualreturn"
-        >
-          <FormDatePicker />
-        </Form.Item>
+        {create ? null : (
+          <Form.Item
+            label={t("contracts.fields.actualreturn")}
+            name="actualreturn"
+          >
+            <FormDatePicker />
+          </Form.Item>
+        )}
      </LayoutFormRow>

      <LayoutFormRow>
@@ -71,9 +76,11 @@ export default function ContractFormComponent({ form }) {
        >
          <InputNumber />
        </Form.Item>
-        <Form.Item label={t("contracts.fields.kmend")} name="kmend">
-          <InputNumber />
-        </Form.Item>
+        {create ? null : (
+          <Form.Item label={t("contracts.fields.kmend")} name="kmend">
+            <InputNumber />
+          </Form.Item>
+        )}
      </LayoutFormRow>
      <LayoutFormRow>
        <Form.Item
--- a/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx
+++ b/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx
@@ -8,7 +8,7 @@ import { DateFormatter } from "../../utils/DateFormatter";
 export default function CourtesyCarContractListComponent({ contracts }) {
  const [state, setState] = useState({
    sortedInfo: {},
-    filteredInfo: { text: "" }
+    filteredInfo: { text: "" },
  });

  const { t } = useTranslation();
@@ -26,7 +26,7 @@ export default function CourtesyCarContractListComponent({ contracts }) {
        <Link to={`/manage/courtesycars/contracts/${record.id}`}>
          {record.agreementnumber || ""}
        </Link>
-      )
+      ),
    },
    {
      title: t("jobs.fields.ro_number"),
@@ -40,7 +40,7 @@ export default function CourtesyCarContractListComponent({ contracts }) {
        <Link to={`/manage/jobs/${record.job.id}`}>
          {record.job.ro_number || ""}
        </Link>
-      )
+      ),
    },
    {
      title: t("contracts.fields.driver"),
@@ -50,7 +50,7 @@ export default function CourtesyCarContractListComponent({ contracts }) {
      sortOrder:
        state.sortedInfo.columnKey === "driver_ln" && state.sortedInfo.order,
      render: (text, record) =>
-        `${record.driver_fn || ""} ${record.driver_ln || ""}`
+        `${record.driver_fn || ""} ${record.driver_ln || ""}`,
    },
    {
      title: t("contracts.fields.status"),
@@ -59,7 +59,7 @@ export default function CourtesyCarContractListComponent({ contracts }) {
      sorter: (a, b) => alphaSort(a.status, b.status),
      sortOrder:
        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
-      render: (text, record) => t(record.status)
+      render: (text, record) => t(record.status),
    },
    {
      title: t("contracts.fields.start"),
@@ -68,7 +68,7 @@ export default function CourtesyCarContractListComponent({ contracts }) {
      sorter: (a, b) => alphaSort(a.start, b.start),
      sortOrder:
        state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
-      render: (text, record) => <DateFormatter>{record.start}</DateFormatter>
+      render: (text, record) => <DateFormatter>{record.start}</DateFormatter>,
    },
    {
      title: t("contracts.fields.scheduledreturn"),
@@ -80,8 +80,8 @@ export default function CourtesyCarContractListComponent({ contracts }) {
        state.sortedInfo.order,
      render: (text, record) => (
        <DateFormatter>{record.scheduledreturn}</DateFormatter>
-      )
-    }
+      ),
+    },
  ];

  const handleTableChange = (pagination, filters, sorter) => {
@@ -91,7 +91,7 @@ export default function CourtesyCarContractListComponent({ contracts }) {
    <Table
      size="small"
      pagination={{ position: "top" }}
-      columns={columns.map(item => ({ ...item }))}
+      columns={columns.map((item) => ({ ...item }))}
      rowKey="id"
      dataSource={contracts}
      onChange={handleTableChange}
--- a/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx
+++ b/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx
@@ -6,161 +6,137 @@ import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
-
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
  const { t } = useTranslation();
  return (
    <div>
-      <Button type="primary" loading={saveLoading} htmlType="submit">
+      <Button
+        type="primary"
+        loading={saveLoading}
+        onClick={() => form.submit()}
+      >
        {t("general.actions.save")}
      </Button>
-      <div className="imex-flex-row__grow imex-flex-row__margin-large">
-        <FormFieldsChanged form={form} />
-      </div>
-      <Form.Item
-        label={t("courtesycars.fields.make")}
-        name="make"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <Input />
-      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.model")}
-        name="model"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <Input />
-      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.year")}
-        name="year"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <Input />
-      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.plate")}
-        name="plate"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <Input />
-      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.color")}
-        name="color"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <Input />
-      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.vin")}
-        name="vin"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <Input />
-      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.fleetnumber")}
-        name="fleetnumber"
-      >
-        <Input />
-      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.purchasedate")}
-        name="purchasedate"
-      >
-        <FormDatePicker />
-      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.servicestartdate")}
-        name="servicestartdate"
-      >
-        <Input />
-      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.serviceenddate")}
-        name="serviceenddate"
-      >
-        <FormDatePicker />
-      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.leaseenddate")}
-        name="leaseenddate"
-      >
-        <FormDatePicker />
-      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.status")}
-        name="status"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <CourtesyCarStatus />
-      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.nextservicekm")}
-        name="nextservicekm"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <InputNumber />
-      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.nextservicedate")}
-        name="nextservicedate"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <FormDatePicker />
-      </Form.Item>
-      <Form.Item label={t("courtesycars.fields.damage")} name="damage">
-        <Input />
-      </Form.Item>
-      <Form.Item label={t("courtesycars.fields.notes")} name="notes">
-        <Input />
-      </Form.Item>
+      <FormFieldsChanged form={form} />
+      <LayoutFormRow>
+        <Form.Item
+          label={t("courtesycars.fields.make")}
+          name="make"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label={t("courtesycars.fields.model")}
+          name="model"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label={t("courtesycars.fields.year")}
+          name="year"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label={t("courtesycars.fields.plate")}
+          name="plate"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label={t("courtesycars.fields.color")}
+          name="color"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label={t("courtesycars.fields.vin")}
+          name="vin"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow>
+        <Form.Item
+          label={t("courtesycars.fields.mileage")}
+          name="mileage"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("courtesycars.fields.fleetnumber")}
+          name="fleetnumber"
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label={t("courtesycars.fields.purchasedate")}
+          name="purchasedate"
+        >
+          <FormDatePicker />
+        </Form.Item>
+        <Form.Item
+          label={t("courtesycars.fields.servicestartdate")}
+          name="servicestartdate"
+        >
+          <FormDatePicker />
+        </Form.Item>
+        <Form.Item
+          label={t("courtesycars.fields.serviceenddate")}
+          name="serviceenddate"
+        >
+          <FormDatePicker />
+        </Form.Item>
+        <Form.Item
+          label={t("courtesycars.fields.leaseenddate")}
+          name="leaseenddate"
+        >
+          <FormDatePicker />
+        </Form.Item>
+      </LayoutFormRow>
      <Form.Item
        label={t("courtesycars.fields.fuel")}
        name="fuel"
@@ -173,33 +149,78 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
      >
        <CourtesyCarFuelSlider />
      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.registrationexpires")}
-        name="registrationexpires"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <FormDatePicker />
-      </Form.Item>
-      <Form.Item
-        label={t("courtesycars.fields.insuranceexpires")}
-        name="insuranceexpires"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <FormDatePicker />
-      </Form.Item>
-      <Form.Item label={t("courtesycars.fields.dailycost")} name="dailycost">
-        <CurrencyInput />
-      </Form.Item>
+      <LayoutFormRow>
+        <Form.Item
+          label={t("courtesycars.fields.status")}
+          name="status"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <CourtesyCarStatus />
+        </Form.Item>
+        <Form.Item
+          label={t("courtesycars.fields.nextservicekm")}
+          name="nextservicekm"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("courtesycars.fields.nextservicedate")}
+          name="nextservicedate"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <FormDatePicker />
+        </Form.Item>
+        <Form.Item label={t("courtesycars.fields.damage")} name="damage">
+          <Input.TextArea />
+        </Form.Item>
+        <Form.Item label={t("courtesycars.fields.notes")} name="notes">
+          <Input.TextArea />
+        </Form.Item>
+
+        <Form.Item
+          label={t("courtesycars.fields.registrationexpires")}
+          name="registrationexpires"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <FormDatePicker />
+        </Form.Item>
+        <Form.Item
+          label={t("courtesycars.fields.insuranceexpires")}
+          name="insuranceexpires"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <FormDatePicker />
+        </Form.Item>
+        <Form.Item label={t("courtesycars.fields.dailycost")} name="dailycost">
+          <CurrencyInput />
+        </Form.Item>
+      </LayoutFormRow>
    </div>
  );
 }
--- a/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
+++ b/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
@@ -76,7 +76,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
        state.sortedInfo.columnKey === "model" && state.sortedInfo.order,
    },
    {
-      title: t("courtesycars.fields.outwith"),
+      title: t("courtesycars.labels.outwith"),
      dataIndex: "outwith",
      key: "outwith",
      // sorter: (a, b) => alphaSort(a.model, b.model),
--- a/client/src/components/layout-form-row/layout-form-row.component.jsx
+++ b/client/src/components/layout-form-row/layout-form-row.component.jsx
@@ -6,7 +6,7 @@ export default function LayoutFormRow({ header, children, grow = false }) {
  if (!!!children.length) {
    //We have only one element. It's going to get the whole thing.
    return (
-      <div className='imex-form-row'>
+      <div className="imex-form-row">
        {header ? (
          <Typography.Title level={4}>{header}</Typography.Title>
        ) : null}
@@ -37,14 +37,17 @@ export default function LayoutFormRow({ header, children, grow = false }) {
  };

  return (
-    <div className='imex-form-row'>
+    <div className="imex-form-row">
      {header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
      <Row {...rowGutter}>
-        {children.map((c, idx) => (
-          <Col key={idx} {...colSpan(c.props && c.props.span)}>
-            {c}
-          </Col>
-        ))}
+        {children.map(
+          (c, idx) =>
+            c && (
+              <Col key={idx} {...colSpan(c && c.props && c.props.span)}>
+                {c}
+              </Col>
+            )
+        )}
      </Row>
    </div>
  );