321 lines
11 KiB
JavaScript
321 lines
11 KiB
JavaScript
import { WarningFilled } from "@ant-design/icons";
|
|
import { useApolloClient } from "@apollo/client";
|
|
import { Button, Form, Input, InputNumber, Space } from "antd";
|
|
import { PageHeader } from "@ant-design/pro-layout";
|
|
import dayjs from "../../utils/day";
|
|
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 CourtesyCarReadiness from "../courtesy-car-readiness-select/courtesy-car-readiness-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.year")}
|
|
name="year"
|
|
rules={[
|
|
{
|
|
required: true
|
|
//message: t("general.validation.required"),
|
|
}
|
|
]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<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.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 min={0} 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.readiness")} name="readiness">
|
|
<CourtesyCarReadiness />
|
|
</Form.Item>
|
|
<div>
|
|
<Form.Item label={t("courtesycars.fields.nextservicekm")} name="nextservicekm">
|
|
<InputNumber min={0} precision={0} />
|
|
</Form.Item>
|
|
<Form.Item shouldUpdate={(p, c) => p.mileage !== c.mileage || p.nextservicekm !== c.nextservicekm}>
|
|
{() => {
|
|
const nextservicekm = form.getFieldValue("nextservicekm");
|
|
const mileageOver = nextservicekm ? nextservicekm <= form.getFieldValue("mileage") : false;
|
|
if (mileageOver)
|
|
return (
|
|
<Space direction="vertical" style={{ color: "tomato" }}>
|
|
<span>
|
|
<WarningFilled style={{ marginRight: ".3rem" }} />
|
|
{t("contracts.labels.cardueforservice")}
|
|
</span>
|
|
<span>{`${nextservicekm} km`}</span>
|
|
</Space>
|
|
);
|
|
|
|
return <></>;
|
|
}}
|
|
</Form.Item>
|
|
</div>
|
|
<div>
|
|
<Form.Item label={t("courtesycars.fields.nextservicedate")} name="nextservicedate">
|
|
<FormDatePicker />
|
|
</Form.Item>
|
|
<Form.Item shouldUpdate={(p, c) => p.nextservicedate !== c.nextservicedate}>
|
|
{() => {
|
|
const nextservicedate = form.getFieldValue("nextservicedate");
|
|
const dueForService = nextservicedate && dayjs(nextservicedate).endOf("day").isSameOrBefore(dayjs());
|
|
|
|
if (dueForService)
|
|
return (
|
|
<Space direction="vertical" style={{ color: "tomato" }}>
|
|
<span>
|
|
<WarningFilled style={{ marginRight: ".3rem" }} />
|
|
{t("contracts.labels.cardueforservice")}
|
|
</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">
|
|
<FormDatePicker />
|
|
</Form.Item>
|
|
<Form.Item shouldUpdate={(p, c) => p.registrationexpires !== c.registrationexpires}>
|
|
{() => {
|
|
const expires = form.getFieldValue("registrationexpires");
|
|
|
|
const dateover = expires && dayjs(expires).endOf("day").isBefore(dayjs());
|
|
|
|
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 && dayjs(expires).endOf("day").isBefore(dayjs());
|
|
|
|
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>
|
|
);
|
|
}
|