69 lines
1.9 KiB
JavaScript
69 lines
1.9 KiB
JavaScript
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import FormBox from "../components/FormBox";
|
|
import Button from "../components/Button";
|
|
import FormField from "../components/FormField";
|
|
import FormInput from "../components/FormInput";
|
|
import FormSelect from "../components/FormSelect";
|
|
import FieldsWrapper from "../components/FieldsWrapper";
|
|
|
|
function LockerMaintenance() {
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation();
|
|
const [operation, setOperation] = useState({ value: "", valid: true });
|
|
|
|
const handleNext = (e) => {
|
|
e.preventDefault();
|
|
if (operation.value === "") {
|
|
setOperation({ value: operation.value, valid: false });
|
|
}
|
|
navigate(operation.value);
|
|
};
|
|
|
|
const formFields = [
|
|
{
|
|
name: "value",
|
|
label: t("operation"),
|
|
options: [
|
|
{ label: t("status"), value: "status" },
|
|
{ label: t("keySwap"), value: "key-swap" },
|
|
],
|
|
type: "select",
|
|
},
|
|
];
|
|
|
|
const renderField = (field) => {
|
|
const commonProps = {
|
|
value: operation[field.name],
|
|
onChange: (e) => {
|
|
const newValues = { ...operation };
|
|
newValues[field.name] = e.target.value;
|
|
newValues[`${field.name}Valid`] = true;
|
|
setOperation(newValues);
|
|
},
|
|
};
|
|
const options = field.options;
|
|
return (
|
|
<FormField label={field.label}>
|
|
{field.type === "input" ? (
|
|
<FormInput props={commonProps} />
|
|
) : (
|
|
<FormSelect props={commonProps} options={options} />
|
|
)}
|
|
</FormField>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<FormBox title={t("lockerMaintenance")}>
|
|
<FieldsWrapper>{formFields.map(renderField)}</FieldsWrapper>
|
|
<Button text={t("next")} onClick={(e) => handleNext(e)} />
|
|
</FormBox>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LockerMaintenance;
|