checkbox validation
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
import SelectBox from "@/core/components/SelectBox";
|
||||
import {SEND_LOAN_REQUEST_NAVGAN} from "@/core/data/apiRoutes";
|
||||
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
|
||||
import {Box, Button, Grid, Stack, TextField, Typography} from "@mui/material";
|
||||
import {Box, Button, Checkbox, FormControlLabel, Grid, Stack, TextField, Typography} from "@mui/material";
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import * as Yup from "yup";
|
||||
import {CenterLayout, LinkRouting, useRequest} from "@witel/webapp-builder";
|
||||
import {CenterLayout, useRequest} from "@witel/webapp-builder";
|
||||
import useProvince from "@/lib/app/hooks/useProvince";
|
||||
import useCities from "@/lib/app/hooks/useCities";
|
||||
import PlateNumber from "@/core/components/PlateNumber";
|
||||
@@ -14,15 +14,21 @@ import UseEducations from "@/lib/app/hooks/useEducations";
|
||||
import useOccupations from "@/lib/app/hooks/useOccupations";
|
||||
import {useState} from "react";
|
||||
import DoneIcon from '@mui/icons-material/Done';
|
||||
import {NextLinkComposed} from "@witel/webapp-builder/dist/utils/linkRouting";
|
||||
import SvgDone from "@/core/components/svgs/SvgDone";
|
||||
|
||||
const AddFormComponent = () => {
|
||||
const t = useTranslations();
|
||||
const [finishLoanRequest, setFinishLoanRequest] = useState(false)
|
||||
const [checked, setChecked] = useState(false);
|
||||
const requestServer = useRequest()
|
||||
const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince()
|
||||
const {cityTextField, cityList, setProvinceID, isLoadingCityList} = useCities()
|
||||
const {educationsList, isLoadingEducationsList, errorEducationsList} = UseEducations()
|
||||
const {occupationsList, isLoadingOccupationsList, errorOccupationsList} = useOccupations()
|
||||
const handleCheckBoxChange = (event) => {
|
||||
setChecked(event.target.checked);
|
||||
};
|
||||
|
||||
const initialValues = {
|
||||
telephone_number: "",
|
||||
@@ -42,6 +48,7 @@ const AddFormComponent = () => {
|
||||
birthday: "",
|
||||
education_id: "",
|
||||
occupation_id: "",
|
||||
checkedBox: false
|
||||
};
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
@@ -161,13 +168,16 @@ const AddFormComponent = () => {
|
||||
{finishLoanRequest ?
|
||||
(
|
||||
<CenterLayout>
|
||||
<Stack direction={'row'} spacing={0.7}>
|
||||
<Typography align={'center'}>{t("LoanRequest.finish_loan_request")}</Typography>
|
||||
<SvgDone width={200} height={200}/>
|
||||
<Stack direction={'row'} spacing={0.7} sx={{mb: 4}}>
|
||||
<Typography variant={'h5'}
|
||||
align={'center'}>{t("LoanRequest.finish_loan_request")}</Typography>
|
||||
<DoneIcon color={'success'}/>
|
||||
</Stack>
|
||||
<LinkRouting sx={{margin: 2}} href={'/dashboard'}>
|
||||
<Button variant={'contained'} component={NextLinkComposed}
|
||||
to={'/dashboard/navgan/followUp-loan'}>
|
||||
{t("LoanRequest.back_to_dashboard")}
|
||||
</LinkRouting>
|
||||
</Button>
|
||||
</CenterLayout>
|
||||
) : (
|
||||
<>
|
||||
@@ -278,7 +288,22 @@ const AddFormComponent = () => {
|
||||
label={t("LoanRequest.text_field_navgan_type")}
|
||||
size="small"
|
||||
selectType="navgan_type"
|
||||
selectors={[{id: 1, value: 1, name: "روستایی"}, {id: 2, value: 2, name: "عمومی"}]}
|
||||
selectors={[
|
||||
{
|
||||
id: 1, value: "روستایی", name: "روستایی"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: "عمومی",
|
||||
name: "عمومی"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: "منطقه آزاد",
|
||||
name: "منطقه آزاد"
|
||||
}
|
||||
]}
|
||||
schema={{value: 'value', name: 'name'}}
|
||||
select={formik.values.navgan_type}
|
||||
handleChange={(event) => {
|
||||
formik.setFieldValue('navgan_type', event.target.value)
|
||||
@@ -316,6 +341,7 @@ const AddFormComponent = () => {
|
||||
isLoading={isLoadingProvinceList}
|
||||
errorEcured={errorProvinceList}
|
||||
selectors={provinceList}
|
||||
schema={{value: 'value', name: 'name'}}
|
||||
select={formik.values.province_id}
|
||||
handleChange={(event) => {
|
||||
formik.setFieldValue('province_id', event.target.value);
|
||||
@@ -335,6 +361,7 @@ const AddFormComponent = () => {
|
||||
label={isLoadingCityList ? `${t("LoanRequest.cityList_loading")}` : (cityList.length === 0 ? `${t("LoanRequest.cityList_empty")}` : cityTextField)}
|
||||
size="small"
|
||||
selectType="city_id"
|
||||
schema={{value: 'value', name: 'name'}}
|
||||
disabled={cityList.length === 0}
|
||||
selectors={cityList}
|
||||
select={formik.values.city_id}
|
||||
@@ -352,9 +379,25 @@ const AddFormComponent = () => {
|
||||
name="vehicle_type"
|
||||
label={t("LoanRequest.text_field_vehicle_type")}
|
||||
size="small"
|
||||
schema={{value: 'value', name: 'name'}}
|
||||
selectType="vehicle_type"
|
||||
selectors={[{id: 0, value: "اتوبوس", name: "اتوبوس"},
|
||||
{id: 1, value: "مینی بوس", name: "مینی بوس"}]}
|
||||
selectors={[
|
||||
{
|
||||
id: 0,
|
||||
value: "اتوبوس",
|
||||
name: "اتوبوس"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
value: "مینی بوس",
|
||||
name: "مینی بوس"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: "سواری",
|
||||
name: "سواری"
|
||||
}
|
||||
]}
|
||||
select={formik.values.vehicle_type}
|
||||
handleChange={(event) => formik.setFieldValue('vehicle_type', event.target.value)}
|
||||
error={formik.touched.vehicle_type && Boolean(formik.errors.vehicle_type)}
|
||||
@@ -377,6 +420,7 @@ const AddFormComponent = () => {
|
||||
selectType="education_id"
|
||||
selectors={educationsList}
|
||||
select={formik.values.education_id}
|
||||
schema={{value: 'id', name: 'title'}}
|
||||
handleChange={(event) => {
|
||||
formik.setFieldValue('education_id', event.target.value)
|
||||
}}
|
||||
@@ -394,6 +438,7 @@ const AddFormComponent = () => {
|
||||
isLoading={isLoadingOccupationsList}
|
||||
errorEcured={errorOccupationsList}
|
||||
selectType="occupation_id"
|
||||
schema={{value: 'id', name: 'title'}}
|
||||
selectors={occupationsList}
|
||||
select={formik.values.occupation_id}
|
||||
handleChange={(event) => {
|
||||
@@ -425,6 +470,22 @@ const AddFormComponent = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{padding: 2}}>
|
||||
<Grid item xs={12}>
|
||||
<FormControlLabel
|
||||
color={'error.main'}
|
||||
control={
|
||||
<Checkbox
|
||||
checked={formik.values.checkedBox}
|
||||
onChange={(event) => {
|
||||
formik.setFieldValue("checkedBox", event.target.checked)
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={`${t("LoanRequest.checkbox")}`}/>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@@ -440,9 +501,9 @@ const AddFormComponent = () => {
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
sx={{mt: 2}}
|
||||
sx={{my: 4}}
|
||||
endIcon={<DataSaverOnIcon/>}
|
||||
disabled={formik.isSubmitting}
|
||||
disabled={formik.values.checkedBox ? (formik.isSubmitting || !formik.dirty || !formik.isValid) : true}
|
||||
>
|
||||
{t("LoanRequest.button_submit")}
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user