md.asif5/osaka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add CabinetCreation component and form validation; update translations and routing

Browse Source
This commit is contained in:
Md Asif 2024-12-21 23:52:19 +05:30
parent 03747b5251
commit 442b8e52dd
4 changed files with 98 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/locales/en/translation.json
View File

@ -51,5 +51,9 @@
"create": "Create",
"operation": "Operation",
"next": "Next",
"select": "Select"
"select": "Select",
"cabinetCreation": "Cabinet Creation",
"cabinetId": "Cabinet ID",
"cabinetKeyId": "Cabinet Key ID",
"noOfLockers": "No of Lockers"
}

4
src/components/FormBox.jsx
View File

@ -3,12 +3,12 @@ import clsx from 'clsx';
function FormBox({ title, children, alt = false }) {
return (
<div className={clsx(alt ? 'bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark' : 'bg-surface-variant dark:bg-surface-variant-dark', 'transition-color-mode font-body border-secondary dark:border-secondary-dark border-2 p-4 rounded-3xl relative h-full')}>
<form className={clsx(alt ? 'bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark' : 'bg-surface-variant dark:bg-surface-variant-dark', 'transition-color-mode font-body border-secondary dark:border-secondary-dark border-2 p-4 rounded-3xl relative h-full')}>
<label className={clsx(alt && 'bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark', 'font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full')}>
{title}
</label>
{children}
</div>
</form>
);
}

5
src/main.jsx
View File

@ -6,6 +6,7 @@ import './i18n'
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home.jsx'
import CabinetMaintenace from './pages/CabinetMaintenance.jsx'
import CabinetCreation from './pages/CabinetCreation.jsx'
const router = createBrowserRouter([
{
@ -19,6 +20,10 @@ const router = createBrowserRouter([
{
path: 'operation/cabinet',
element: <CabinetMaintenace />
},
{
path: 'operation/cabinet/create',
element: <CabinetCreation />
}
]
}

86
src/pages/CabinetCreation.jsx Normal file
View File

@ -0,0 +1,86 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import FormBox from "../components/FormBox";
import Button from "../components/Button";
import { useNavigate } from "react-router-dom";
import clsx from "clsx";
function CabinetCreation() {
const { t } = useTranslation();
const navigate = useNavigate();
const [cabinetId, setCabinetId] = useState({id: "", valid: true});
const [cabinetKeyId, setCabinetKeyId] = useState({id: "", valid: true});
const [noOfLockers, setNoOfLockers] = useState({number: 0, valid: true});
const handleNext = (e) => {
e.preventDefault();
const idRegex = /^[A-Z]{2}[0-9]{4}$/;
if (!idRegex.test(cabinetId.id)) {
setCabinetId({id: cabinetId.id, valid: false});
return;
} else if (!idRegex.test(cabinetKeyId.id)) {
setCabinetKeyId({id: cabinetKeyId.id, valid: false});
return;
} else if (noOfLockers.number === 0) {
setNoOfLockers({number: noOfLockers.number, valid: false});
return;
}
navigate("register-lockers", {state: {cabinetId: cabinetId.id, cabinetKeyId: cabinetKeyId.id, noOfLockers: noOfLockers.number}});
};
return (
<div className="w-full h-fit">
<FormBox title={t("cabinetCreation")}>
<div className="p-2 pt-7 flex flex-col gap-4">
<div className="flex">
<label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
{t("cabinetId")}
</label>
<div className="w-full">
<input
value={cabinetId.id}
className={clsx("w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey", !cabinetId.valid && "border-error")}
onChange={(e) => setCabinetId({id: e.target.value.toUpperCase(), valid: true })}
type="text"
maxLength={6}
/>
{!cabinetId.valid && <div className="text-sm text-error ml-3 pt-1">Invalid Cabinet Id</div>}
</div>
</div>
<div className="flex">
<label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
{t("cabinetKeyId")}
</label>
<div className="w-full">
<input
value={cabinetKeyId.id}
className={clsx("w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey", !cabinetKeyId.valid && "border-error")}
onChange={(e) => setCabinetKeyId({id: e.target.value.toUpperCase(), valid: true })}
type="text"
maxLength={6}
/>
{!cabinetKeyId.valid && <div className="text-sm text-error ml-3 pt-1">Invalid Key Id</div>}
</div>
</div>
<div className="flex">
<label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
{t("noOfLockers")}
</label>
<div className="w-full">
<input
value={noOfLockers.number}
className={clsx("w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey", !noOfLockers.valid && "border-error")}
onChange={(e) => setNoOfLockers({number: e.target.value, valid: true })}
type="number"
/>
{!noOfLockers.valid && <div className="text-sm text-error ml-3 pt-1">Invalid Number of Lockers</div>}
</div>
</div>
</div>
<Button text={t("next")} onClick={(e) => {handleNext(e)}}/>
</FormBox>
</div>
);
}
export default CabinetCreation;