363 lines
11 KiB
JavaScript
363 lines
11 KiB
JavaScript
import { WarningFilled } from "@ant-design/icons";
|
|
import { useApolloClient } from "@apollo/client";
|
|
import { Button, Form, Input, InputNumber, PageHeader, Space } from "antd";
|
|
import moment from "moment";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { CHECK_CC_FLEET_NUMBER } from "../../graphql/courtesy-car.queries";
|
|
import { DateFormatter } from "../../utils/DateFormatter";
|
|
import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
|
|
import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
|
|
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();
|
|
const client = useApolloClient();
|
|
|
|
return (
|
|
<div>
|
|
<PageHeader
|
|
title={t("menus.header.courtesycars")}
|
|
extra={
|
|
<Button
|
|
type="primary"
|
|
loading={saveLoading}
|
|
onClick={() => form.submit()}
|
|
>
|
|
{t("general.actions.save")}
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
{/* <FormFieldsChanged form={form} /> */}
|
|
<LayoutFormRow header={t("courtesycars.labels.vehicle")}>
|
|
<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 header={t("courtesycars.labels.usage")}>
|
|
<Form.Item
|
|
label={t("courtesycars.fields.mileage")}
|
|
name="mileage"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
//message: t("general.validation.required"),
|
|
},
|
|
]}
|
|
>
|
|
<InputNumber precision={0} />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t("courtesycars.fields.fleetnumber")}
|
|
name="fleetnumber"
|
|
validateTrigger="onBlur"
|
|
hasFeedback
|
|
rules={[
|
|
{
|
|
required: true,
|
|
//message: t("general.validation.required"),
|
|
},
|
|
({ getFieldValue }) => ({
|
|
async validator(rule, value) {
|
|
if (value) {
|
|
const response = await client.query({
|
|
query: CHECK_CC_FLEET_NUMBER,
|
|
variables: {
|
|
name: value,
|
|
},
|
|
});
|
|
|
|
if (
|
|
response.data.courtesycars_aggregate.aggregate.count === 0
|
|
) {
|
|
return Promise.resolve();
|
|
} else if (
|
|
response.data.courtesycars_aggregate.nodes.length === 1 &&
|
|
response.data.courtesycars_aggregate.nodes[0].id ===
|
|
form.getFieldValue("id")
|
|
) {
|
|
return Promise.resolve();
|
|
}
|
|
return Promise.reject(t("courtesycars.labels.uniquefleet"));
|
|
} else {
|
|
return Promise.resolve();
|
|
}
|
|
},
|
|
}),
|
|
]}
|
|
>
|
|
<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>
|
|
|
|
<LayoutFormRow header={t("courtesycars.labels.status")}>
|
|
<Form.Item
|
|
span={24}
|
|
label={t("courtesycars.fields.fuel")}
|
|
name="fuel"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
//message: t("general.validation.required"),
|
|
},
|
|
]}
|
|
>
|
|
<CourtesyCarFuelSlider />
|
|
</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>
|
|
<div>
|
|
<Form.Item
|
|
label={t("courtesycars.fields.nextservicedate")}
|
|
name="nextservicedate"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
//message: t("general.validation.required"),
|
|
},
|
|
]}
|
|
>
|
|
<FormDatePicker />
|
|
</Form.Item>
|
|
<Form.Item
|
|
shouldUpdate={(p, c) =>
|
|
p.mileage !== c.mileage ||
|
|
p.nextservicedate !== c.nextservicedate ||
|
|
p.nextservicekm !== c.nextservicekm
|
|
}
|
|
>
|
|
{() => {
|
|
const nextservicedate = form.getFieldValue("nextservicedate");
|
|
const nextservicekm = form.getFieldValue("nextservicekm");
|
|
|
|
const mileageOver =
|
|
nextservicekm <= form.getFieldValue("mileage");
|
|
|
|
const dueForService =
|
|
nextservicedate && moment(nextservicedate).isBefore(moment());
|
|
|
|
if (mileageOver || dueForService)
|
|
return (
|
|
<Space direction="vertical" style={{ color: "tomato" }}>
|
|
<span>
|
|
<WarningFilled style={{ marginRight: ".3rem" }} />
|
|
{t("contracts.labels.cardueforservice")}
|
|
</span>
|
|
<span>{`${nextservicekm} km`}</span>
|
|
<span>
|
|
<DateFormatter>{nextservicedate}</DateFormatter>
|
|
</span>
|
|
</Space>
|
|
);
|
|
|
|
return <></>;
|
|
}}
|
|
</Form.Item>
|
|
</div>
|
|
<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>
|
|
<div>
|
|
<Form.Item
|
|
label={t("courtesycars.fields.registrationexpires")}
|
|
name="registrationexpires"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
//message: t("general.validation.required"),
|
|
},
|
|
]}
|
|
>
|
|
<FormDatePicker />
|
|
</Form.Item>
|
|
<Form.Item
|
|
shouldUpdate={(p, c) =>
|
|
p.registrationexpires !== c.registrationexpires
|
|
}
|
|
>
|
|
{() => {
|
|
const expires = form.getFieldValue("registrationexpires");
|
|
|
|
const dateover = expires && moment(expires).isBefore(moment());
|
|
|
|
if (dateover)
|
|
return (
|
|
<Space direction="vertical" style={{ color: "tomato" }}>
|
|
<span>
|
|
<WarningFilled style={{ marginRight: ".3rem" }} />
|
|
{t("contracts.labels.dateinpast")}
|
|
</span>
|
|
</Space>
|
|
);
|
|
|
|
return <></>;
|
|
}}
|
|
</Form.Item>
|
|
</div>
|
|
<div>
|
|
<Form.Item
|
|
label={t("courtesycars.fields.insuranceexpires")}
|
|
name="insuranceexpires"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
//message: t("general.validation.required"),
|
|
},
|
|
]}
|
|
>
|
|
<FormDatePicker />
|
|
</Form.Item>
|
|
<Form.Item
|
|
shouldUpdate={(p, c) =>
|
|
p.insuranceexpires !== c.insuranceexpires
|
|
}
|
|
>
|
|
{() => {
|
|
const expires = form.getFieldValue("insuranceexpires");
|
|
|
|
const dateover = expires && moment(expires).isBefore(moment());
|
|
|
|
if (dateover)
|
|
return (
|
|
<Space direction="vertical" style={{ color: "tomato" }}>
|
|
<span>
|
|
<WarningFilled style={{ marginRight: ".3rem" }} />
|
|
{t("contracts.labels.dateinpast")}
|
|
</span>
|
|
</Space>
|
|
);
|
|
|
|
return <></>;
|
|
}}
|
|
</Form.Item>
|
|
</div>
|
|
<Form.Item label={t("courtesycars.fields.dailycost")} name="dailycost">
|
|
<CurrencyInput />
|
|
</Form.Item>
|
|
</LayoutFormRow>
|
|
</div>
|
|
);
|
|
}
|