Further UI Updates.
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { Button, Result, Steps } from "antd";
|
||||
import { Button, PageHeader, Result, Space, Steps } from "antd";
|
||||
import React, { useContext, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
@@ -44,36 +44,68 @@ export default function JobsCreateComponent({ form }) {
|
||||
};
|
||||
const { Step } = Steps;
|
||||
|
||||
const ProgressButtons = () => {
|
||||
const ProgressButtons = ({ top }) => {
|
||||
return (
|
||||
<div style={{ margin: "1rem" }}>
|
||||
{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>
|
||||
<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>
|
||||
)}
|
||||
{pageIndex === steps.length - 1 && (
|
||||
<Button type="primary" htmlType="submit">
|
||||
Done
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</PageHeader>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -96,29 +128,7 @@ export default function JobsCreateComponent({ form }) {
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<Steps current={pageIndex}>
|
||||
{steps.map((item, idx) => (
|
||||
<Step
|
||||
key={item.title}
|
||||
title={item.title}
|
||||
style={{ cursor: "pointer" }}
|
||||
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>
|
||||
<ProgressButtons />
|
||||
<ProgressButtons top />
|
||||
|
||||
{errorMessage ? (
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user