Dave Richer
@@ -1,157 +1,158 @@
|
||||
import { Button, Result, Space, Steps } from "antd";
|
||||
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 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 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);
|
||||
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 {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 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",
|
||||
}}
|
||||
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>
|
||||
}
|
||||
>
|
||||
{item.content}
|
||||
</div>
|
||||
))}
|
||||
<ProgressButtons />
|
||||
{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>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user