159 lines
6.3 KiB
JavaScript
159 lines
6.3 KiB
JavaScript
import {Button, Result, Space, Steps} from "antd";
|
|
import {PageHeader} from "@ant-design/pro-layout";
|
|
|
|
import React, {useContext, useState} from "react";
|
|
import {useTranslation} from "react-i18next";
|
|
import {Link} from "react-router-dom";
|
|
import AlertComponent from "../../components/alert/alert.component";
|
|
import JobsCreateJobsInfo from "../../components/jobs-create-jobs-info/jobs-create-jobs-info.component";
|
|
import JobsCreateOwnerInfoContainer from "../../components/jobs-create-owner-info/jobs-create-owner-info.container";
|
|
import JobsCreateVehicleInfoContainer
|
|
from "../../components/jobs-create-vehicle-info/jobs-create-vehicle-info.container";
|
|
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
|
|
|
|
export default function JobsCreateComponent({form}) {
|
|
const [pageIndex, setPageIndex] = useState(0);
|
|
const [errorMessage, setErrorMessage] = useState(null);
|
|
const [state] = useContext(JobCreateContext);
|
|
|
|
const {t} = useTranslation();
|
|
const steps = [
|
|
{
|
|
title: t("jobs.labels.create.vehicleinfo"),
|
|
content: <JobsCreateVehicleInfoContainer form={form}/>,
|
|
validation:
|
|
!!state.vehicle.new ||
|
|
!!state.vehicle.selectedid ||
|
|
!!state.vehicle.none,
|
|
error: t("vehicles.errors.selectexistingornew"),
|
|
},
|
|
{
|
|
title: t("jobs.labels.create.ownerinfo"),
|
|
content: <JobsCreateOwnerInfoContainer/>,
|
|
validation: !!state.owner.new || !!state.owner.selectedid,
|
|
error: t("owners.errors.selectexistingornew"),
|
|
},
|
|
{
|
|
title: t("jobs.labels.create.jobinfo"),
|
|
content: <JobsCreateJobsInfo form={form} selected={pageIndex === 2}/>,
|
|
},
|
|
];
|
|
|
|
const next = () => {
|
|
setPageIndex(pageIndex + 1);
|
|
};
|
|
const prev = () => {
|
|
setPageIndex(pageIndex - 1);
|
|
};
|
|
const {Step} = Steps;
|
|
|
|
const ProgressButtons = ({top}) => {
|
|
return (
|
|
<PageHeader
|
|
extra={
|
|
<Space wrap>
|
|
{pageIndex > 0 && <Button onClick={() => prev()}>Previous</Button>}
|
|
{pageIndex < steps.length - 1 && (
|
|
<Button
|
|
type="primary"
|
|
onClick={() => {
|
|
form
|
|
.validateFields()
|
|
.then((r) => {
|
|
if (steps[pageIndex].validation) {
|
|
setErrorMessage(null);
|
|
next();
|
|
} else {
|
|
setErrorMessage(steps[pageIndex].error);
|
|
}
|
|
})
|
|
.catch((error) => console.log("error", error));
|
|
}}
|
|
>
|
|
Next
|
|
</Button>
|
|
)}
|
|
{pageIndex === steps.length - 1 && (
|
|
<Button type="primary" htmlType="submit">
|
|
Done
|
|
</Button>
|
|
)}
|
|
</Space>
|
|
}
|
|
>
|
|
{top && (
|
|
<Steps current={pageIndex}>
|
|
{steps.map((item, idx) => (
|
|
<Step
|
|
key={item.title}
|
|
title={item.title}
|
|
style={{
|
|
cursor: "pointer",
|
|
fontWeight: idx === pageIndex && "bolder",
|
|
}}
|
|
onClick={() => {
|
|
form
|
|
.validateFields()
|
|
.then((r) => {
|
|
if (steps[pageIndex].validation) {
|
|
setErrorMessage(null);
|
|
setPageIndex(idx);
|
|
} else {
|
|
setErrorMessage(steps[pageIndex].error);
|
|
}
|
|
})
|
|
.catch((error) => console.log("error", error));
|
|
}}
|
|
/>
|
|
))}
|
|
</Steps>
|
|
)}
|
|
</PageHeader>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
{state.created ? (
|
|
<div>
|
|
<Result
|
|
status="success"
|
|
title={t("jobs.successes.creatednoclick")}
|
|
extra={[
|
|
<Link to={`/manage/jobs/${state.newJobId}`} key="gotojob">
|
|
<Button type="primary">{t("jobs.actions.gotojob")}</Button>
|
|
</Link>,
|
|
<Link to={`/manage/jobs/`} key="gotojoblist">
|
|
<Button>{t("menus.header.activejobs")}</Button>
|
|
</Link>,
|
|
]}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<ProgressButtons top/>
|
|
|
|
{errorMessage ? (
|
|
<div>
|
|
<AlertComponent message={errorMessage} type="error"/>
|
|
</div>
|
|
) : null}
|
|
|
|
{steps.map((item, idx) => (
|
|
<div
|
|
key={idx}
|
|
style={{
|
|
display: idx === pageIndex ? "" : "none",
|
|
margin: "1rem",
|
|
}}
|
|
>
|
|
{item.content}
|
|
</div>
|
|
))}
|
|
<ProgressButtons/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|