Merge branch 'feature/mohammad_update_loan_request' into 'develop'

Feature/mohammad update loan request

See merge request witel-front-end/loan-facilities/user!50
This commit is contained in:
AmirHossein Mahmoodi
2024-01-07 13:30:10 +00:00
2 changed files with 166 additions and 132 deletions

View File

@@ -228,8 +228,21 @@
},
"ShowLoan": {
"show_loan_page": "نمایش وام | ناوگان",
"update_loan_page": "ویرایش وام | {person_type}",
"loading_show_component": "درحال دریافت اطلاعات درخواست...",
"tel_number_max": "شماره ثابت می بایست 11 رقم باشد",
"national_code_number": "کد ملی می بایست شامل اعداد باشد",
"national_code_positive": "کد ملی می بایست مثبت باشد",
"national_code_max": "کد ملی می بایست 10 رقم باشد",
"national_number_positive": "شناسه ملی می بایست مثبت باشد",
"error_message_national_id": "لطفا کد ملی خود را وارد کنید!",
"national_number_number": "شناسه ملی می بایست شامل اعداد باشد",
"national_number_max": "شناسه ملی می بایست 11 رقم باشد",
"error_message_national_number": "لطفا شناسه ملی خود را وارد کنید!",
"error_message_shenasname_serial": "لطفا سریال پشت کارت ملی خود را وارد کنید!",
"error_message_tracking_code": "لطفا کد رهگیری کارت ملی خود را وارد کنید!",
"text_field_shenasname_serial": "سریال پشت کارت ملی",
"text_field_national_trackin_code": "کد رهگیری کارت ملی",
"text_field_national_id": "کد ملی",
"text_field_postal_code": "کد پستی",
"text_field_national_serial_number": "سریال پشت کارت ملی",

View File

@@ -1,5 +1,5 @@
import StyledForm from "@/core/components/StyledForm";
import {Box, Chip, Divider, Stack, TextField} from "@mui/material";
import {Box, Button, Chip, Divider, Stack, TextField, ToggleButton, ToggleButtonGroup} from "@mui/material";
import {Field, Formik} from "formik";
import {useTranslations} from "next-intl";
import * as Yup from "yup";
@@ -15,6 +15,7 @@ import {UPDATE_LOAN} from "@/core/data/apiRoutes";
import {useRequest} from "@witel/webapp-builder";
import {useRouter} from "next/router";
import {useEffect} from "react";
import EditIcon from '@mui/icons-material/Edit';
const UpdateForm = ({LoanDetails, LoanId}) => {
const t = useTranslations();
@@ -29,14 +30,10 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
shenase_meli: LoanDetails.shenase_meli
} : {}
const _national_card = LoanDetails.national_serial_number ? {
national_serial_number: LoanDetails.national_serial_number
} : {
national_tracking_code: LoanDetails.national_card_tracking_code
}
// initial values
const initialValues = {
is_legal_person: LoanDetails.is_legal_person,
national_serial_number_or_tracking_code: LoanDetails.national_serial_number ? "serial_number" : "tracking_code",
national_id: LoanDetails.national_id,
postal_code: LoanDetails.postal_code,
address: LoanDetails.address,
@@ -53,7 +50,9 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
plate_part3: LoanDetails.plate_number.split("-")[2],
plate_part4: LoanDetails.plate_number.split("-")[3],
education_id: LoanDetails.education_id,
occupation_id: LoanDetails.occupation_id, ..._national_card, ..._shenase_meli,
occupation_id: LoanDetails.occupation_id, ..._shenase_meli,
national_serial_number: LoanDetails.national_serial_number ?? "",
national_tracking_code: LoanDetails.national_tracking_code ?? ""
};
// end initial values
@@ -80,23 +79,25 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
occupation_id: Yup.string().required(t("ShowLoan.error_message_occupation_id")),
education_id: Yup.string().required(t("ShowLoan.error_message_education_id")),
birthday: Yup.string().required(t("ShowLoan.error_message_date_of_birth")),
national_id: Yup.mixed()
.test("is-number", `${t("LoanRequest.national_code_number")}`, (value) => !isNaN(value))
.test("positive", `${t("LoanRequest.national_code_positive")}`, (value) => value >= 0)
.test("max", `${t("LoanRequest.national_code_max")}`, (value) => value.toString().length === 10)
.required(t("LoanRequest.error_message_national_id")),
national_id: Yup.mixed().when('is_legal_person', ([is_legal_person], schema) => {
return is_legal_person === 1 ? schema
.test("is-number", `${t("ShowLoan.national_code_number")}`, (value) => !isNaN(value))
.test("positive", `${t("ShowLoan.national_code_positive")}`, (value) => value >= 0)
.test("max", `${t("ShowLoan.national_code_max")}`, (value) => value && value.toString().length === 10)
.required(t("ShowLoan.error_message_national_id")) : schema;
}),
shenase_meli: Yup.mixed().when('is_legal_person', ([is_legal_person], schema) => {
return is_legal_person === 1 ? schema
.test("is-number", `${t("LoanRequest.national_number_number")}`, (value) => !isNaN(value))
.test("positive", `${t("LoanRequest.national_number_positive")}`, (value) => value >= 0)
.test("max", `${t("LoanRequest.national_number_max")}`, (value) => value && value.toString().length === 11)
.required(t("LoanRequest.error_message_national_number")) : schema;
.test("is-number", `${t("ShowLoan.national_number_number")}`, (value) => !isNaN(value))
.test("positive", `${t("ShowLoan.national_number_positive")}`, (value) => value >= 0)
.test("max", `${t("ShowLoan.national_number_max")}`, (value) => value && value.toString().length === 11)
.required(t("ShowLoan.error_message_national_number")) : schema;
}),
national_serial_number: Yup.string().when('national_serial_number_or_tracking_code', ([national_serial_number_or_tracking_code], schema) => {
return national_serial_number_or_tracking_code === 'national_serial_number' ? schema.required(t("LoanRequest.error_message_shenasname_serial")) : schema
return national_serial_number_or_tracking_code === 'serial_number' ? schema.required(t("ShowLoan.error_message_shenasname_serial")) : schema
}),
national_card_tracking_code: Yup.string().when('national_serial_number_or_tracking_code', ([national_serial_number_or_tracking_code], schema) => {
return national_serial_number_or_tracking_code === 'national_card_tracking_code' ? schema.required(t("LoanRequest.error_message_tracking_code")) : schema
national_tracking_code: Yup.string().when('national_serial_number_or_tracking_code', ([national_serial_number_or_tracking_code], schema) => {
return national_serial_number_or_tracking_code === 'tracking_code' ? schema.required(t("ShowLoan.error_message_tracking_code")) : schema
})
});
// end validation
@@ -105,33 +106,47 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
const handleSubmit = async (values, props) => {
props.setSubmitting(true)
const formData = new FormData();
if (values.national_serial_number_or_tracking_code === "serial_number") {
formData.append("national_serial_number", values.national_serial_number)
} else {
formData.append("national_tracking_code", values.national_tracking_code);
}
if (values.is_legal_person === 1) {
formData.append("national_id", values.national_id);
}
formData.append("birthday", values.birthday.locale('en').format("YYYY-MM-DD"));
formData.append("postal_code", values.postal_code);
formData.append("address", values.address);
formData.append("province_id", values.province_id);
formData.append("city_id", values.city_id);
formData.append("telephone_number", values.telephone_number);
formData.append("occupation_id", values.occupation_id);
formData.append("education_id", values.education_id);
formData.append("national_serial_number", values.national_serial_number);
formData.append("birthday", values.birthday.locale('en').format("YYYY-MM-DD"));
formData.append("occupation_id", values.occupation_id);
formData.append("address", values.address);
for (var pair of formData.entries()) {
console.log(pair[0] + ':' + pair[1]);
}
await requestServer(UPDATE_LOAN + LoanId, "post", {
auth: true, notification: true, data: formData
}).then(() => {
router.push("/dashboard/navgan/followUp-loan")
router.push("/dashboard/navgan/followUp-loan");
}).catch(() => {
}).finally(() => {
props.setSubmitting(false)
props.setSubmitting(false);
})
};
// end submit
return (
<>
<Box sx={{width: "80%", my: 2}}>
<Divider>
<Chip
label={t("ShowLoan.show_loan_page")}
label={
t("ShowLoan.update_loan_page",
{person_type: LoanDetails.is_legal_person === 1 ? "شخص حقوقی" : "شخص حقیقی"})
}
/>
</Divider>
</Box>
@@ -170,8 +185,8 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
as={TextField}
sx={{width: "100%"}}
name="national_id"
disabled
variant="standard"
disabled={props.values.is_legal_person !== 1}
variant={props.values.is_legal_person !== 1 ? "standard" : "outlined"}
size="small"
label={t("ShowLoan.text_field_national_id")}
placeholder={t("ShowLoan.text_field_enter_your_national_id")}
@@ -389,63 +404,76 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
width: "100%",
}}
>
{
initialValues.national_serial_number ? (
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
<Field
as={TextField}
sx={{width: "100%"}}
name="national_serial_number"
size="small"
disabled
variant="standard"
label={t("ShowLoan.text_field_national_serial_number")}
placeholder={t("ShowLoan.text_field_enter_your_national_serial_number")}
type={"text"}
error={!!(props.touched.national_serial_number && props.errors.national_serial_number)}
fullWidth
helperText={
props.touched.national_serial_number
? props.errors.national_serial_number
: null
}
/>
</Box>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
<ToggleButtonGroup
color="primary"
fullWidth
size={'small'}
value={props.values.national_serial_number_or_tracking_code}
exclusive
onChange={(e, value) => {
if (value === null) return
props.handleChange({
target: {
name: "national_serial_number_or_tracking_code", value: value,
},
})
value === "serial_number" ?
props.setFieldValue("national_tracking_code", props.initialValues.national_tracking_code, false)
: props.setFieldValue("national_serial_number", props.initialValues.national_serial_number, false)
}}
>
<ToggleButton value="serial_number">
{t("ShowLoan.text_field_shenasname_serial")}
</ToggleButton>
<ToggleButton value="tracking_code">
{t("ShowLoan.text_field_national_trackin_code")}
</ToggleButton>
</ToggleButtonGroup>
</Box>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
{props.values.national_serial_number_or_tracking_code === "serial_number" ? (
<Field
as={TextField}
sx={{width: "100%"}}
name="national_serial_number"
size="small"
variant="outlined"
label={t("ShowLoan.text_field_national_serial_number")}
placeholder={t("ShowLoan.text_field_enter_your_national_serial_number")}
type="text"
error={!!(props.touched.national_serial_number && props.errors.national_serial_number)}
fullWidth
helperText={props.touched.national_serial_number ? props.errors.national_serial_number : null}
/>
) : (
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
<Field
as={TextField}
sx={{width: "100%"}}
name="national_tracking_code"
size="small"
disabled
variant="standard"
label={t("ShowLoan.text_field_national_tracking_code")}
placeholder={t("ShowLoan.text_field_enter_your_national_tracking_code")}
type={"text"}
error={!!(props.touched.national_tracking_code && props.errors.national_tracking_code)}
fullWidth
helperText={
props.touched.national_tracking_code
? props.errors.national_tracking_code
: null
}
/>
</Box>
)
}
<Field
as={TextField}
sx={{width: "100%"}}
name="national_tracking_code"
size="small"
variant="outlined"
label={t("ShowLoan.text_field_national_tracking_code")}
placeholder={t("ShowLoan.text_field_enter_your_national_tracking_code")}
type="text"
error={!!(props.touched.national_tracking_code && props.errors.national_tracking_code)}
fullWidth
helperText={props.touched.national_tracking_code ? props.errors.national_tracking_code : null}
/>
)}
</Box>
<Box
sx={{
mx: {xs: 0, sm: 2},
@@ -455,13 +483,22 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
>
<MuiDatePicker
formik={props}
disabled
disableFuture={true}
error={props.touched.birthday && Boolean(props.errors.birthday)}
helperText={props.touched.birthday && props.errors.birthday}
onBlur={props.handleBlur("birthday")}
/>
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "start",
justifyContent: "center",
width: "100%",
}}
>
<Box
sx={{
mx: {xs: 0, sm: 2},
@@ -473,9 +510,8 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
as={TextField}
sx={{width: "100%"}}
name="postal_code"
variant="standard"
variant="outlined"
size="small"
disabled
label={t("ShowLoan.text_field_postal_code")}
placeholder={t(
"ShowLoan.text_field_enter_your_postal_code"
@@ -503,16 +539,6 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
}
/>
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "start",
justifyContent: "center",
width: "100%",
}}
>
<Box
sx={{
mx: {xs: 0, sm: 2},
@@ -525,8 +551,7 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
name="province_id"
label={t("ShowLoan.text_field_province_id")}
size="small"
disabled
variant="standard"
variant="outlined"
selectType="province_id"
schema={{value: "value", name: "name"}}
isLoading={provinceStates.isLoadingProvinceList}
@@ -567,9 +592,8 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
label={citiesStates.cityList.length === 0 ? `${t("ShowLoan.cityList_empty")}` : citiesStates.cityTextField}
size="small"
selectType="city_id"
// disabled={citiesStates.cityList.length === 0}
disabled
variant="standard"
disabled={citiesStates.cityList.length === 0}
variant="outlined"
selectors={citiesStates.cityList}
select={props.values.city_id}
schema={{value: "value", name: "name"}}
@@ -588,6 +612,16 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
type={"text"}
/>}
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "start",
justifyContent: "center",
width: "100%",
}}
>
<Box
sx={{
mx: {xs: 0, sm: 2},
@@ -599,8 +633,7 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
sx={{width: "100%"}}
name="telephone_number"
size="small"
variant="standard"
disabled
variant="outlined"
type={'tel'}
value={props.values.telephone_number}
onChange={(event) => {
@@ -625,16 +658,6 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
helperText={props.touched.telephone_number && props.errors.telephone_number}
/>
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "start",
justifyContent: "center",
width: "100%",
}}
>
<Box
sx={{
mx: {xs: 0, sm: 2},
@@ -647,8 +670,7 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
name="education_id"
label={t("ShowLoan.text_field_education_id")}
size="small"
variant="standard"
disabled
variant="outlined"
isLoading={educationStates.isLoadingEducationsList}
errorEcured={educationStates.errorEducationsList}
selectType="education_id"
@@ -684,8 +706,7 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
name="occupation_id"
label={t("ShowLoan.text_field_occupation_id")}
size="small"
disabled
variant="standard"
variant="outlined"
isLoading={occupationStates.isLoadingOccupationsList}
errorEcured={occupationStates.errorOccupationsList}
selectType="occupation_id"
@@ -732,9 +753,8 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
rows={4}
sx={{width: "100%"}}
name="address"
variant="standard"
variant="outlined"
size="small"
disabled
label={t("ShowLoan.text_field_address")}
placeholder={t("ShowLoan.text_field_enter_your_address")}
type={"text"}
@@ -753,17 +773,18 @@ const UpdateForm = ({LoanDetails, LoanId}) => {
width: {xs: "100%", sm: "30%", md: "25%"},
}}
>
{/*<Button*/}
{/* fullWidth*/}
{/* type="submit"*/}
{/* variant="contained"*/}
{/* size="large"*/}
{/* sx={{mt: 2}}*/}
{/* endIcon={<EditIcon/>}*/}
{/* disabled={props.isSubmitting || !props.dirty || !props.isValid}*/}
{/*>*/}
{/* {t("ShowLoan.button_submit")}*/}
{/*</Button>*/}
{console.log(props.errors)}
<Button
fullWidth
type="submit"
variant="contained"
size="large"
sx={{mt: 2}}
endIcon={<EditIcon/>}
disabled={props.isSubmitting || !props.dirty || !props.isValid}
>
{t("ShowLoan.button_submit")}
</Button>
</Box>
</StyledForm>
</Stack>