loan/user-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add form of loan request and edit form of it and debuging and cleaning uploadsystem

Browse Source
This commit is contained in:
Mohammad Jalali
2023-08-27 10:19:23 +03:30
parent fd1a6bcf2e
commit 9098881ceb
14 changed files with 747 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
src/components/dashboard/refahi/add-request-loan/forms/AddForm.jsx
View File

@@ -4,8 +4,7 @@ import {GET_PROVINCE_LIST, SEND_LOAN_REQUEST_WELFARE} from "@/core/data/apiRoute
import useDirection from "@/lib/app/hooks/useDirection";
import useUser from "@/lib/app/hooks/useUser";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {Box, Button, Stack, TextField} from "@mui/material";
import axios from "axios";
import {Box, Button, Chip, Divider, Stack, TextField} from "@mui/material";
import {Field, Formik} from "formik";
import {useTranslations} from "next-intl";
import {useEffect, useState} from "react";
@@ -19,8 +18,9 @@ const AddFormComponent = () => {
const {token} = useUser();
const requestServer = useRequest()
// get province list
const [provinceList, setProvinceList] = useState([]);
// get province list
useEffect(() => {
requestServer(GET_PROVINCE_LIST, "get", {auth: true, notification: false})
.then(function ({data}) {
@@ -35,42 +35,6 @@ const AddFormComponent = () => {
}, []);
// end get province list
// upload files
const [selectedImageShenasname, setSelectedImageShenasname] = useState(
"/images/upload-image.svg"
);
const [fileTypeShenasname, setFileTypeShenasname] = useState(null);
const [fileNameShenasname, setFileNameShenasname] = useState(null);
const [selectedImageNationalCard, setSelectedImageNationalCard] = useState(
"/images/upload-image.svg"
);
const [fileTypeNationalCard, setFileTypeNationalCard] = useState(null);
const [fileNameNationalCard, setFileNameNationalCard] = useState(null);
const handleUploadChangeShenasname = (event, setFieldValue) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImageShenasname(URL.createObjectURL(uploadedFile));
setFileTypeShenasname(fileType);
setFileNameShenasname(fileName);
setFieldValue("shenasname_img", uploadedFile);
}
};
const handleUploadChangeNationalCard = (event, setFieldValue) => {
const uploadedFile = event.target?.files?.[0];
const fileType = event.target.files[0].type;
const fileName = event.target.files[0].name;
if (uploadedFile) {
setSelectedImageNationalCard(URL.createObjectURL(uploadedFile));
setFileTypeNationalCard(fileType);
setFileNameNationalCard(fileName);
setFieldValue("national_card_img", uploadedFile);
}
};
// end upload files
// initial values, validation and request action of form
const initialValues = {
name: "",
@@ -78,8 +42,12 @@ const AddFormComponent = () => {
province: "",
national_code: "",
shenasname_id: "",
national_card_img: null,
shenasname_img: null,
sherkat_naft_doc: null,
estate_doc: null,
agreement_doc: null,
national_card_image: null,
shenasname_image: null,
payan_khedmat_image: null,
};
const validationSchema = Yup.object().shape({
@@ -94,8 +62,13 @@ const AddFormComponent = () => {
shenasname_id: Yup.string().required(
t("LoanRequest.error_message_shenasname_id")
),
sherkat_naft_doc: Yup.mixed().required(t("LoanRequest.error_message_sherkat_naft_doc")),
estate_doc: Yup.mixed().required(t("LoanRequest.error_message_estate_doc")),
agreement_doc: Yup.mixed().required(t("LoanRequest.error_message_agreement_doc")),
national_card_image: Yup.mixed().required(t("LoanRequest.error_message_national_card_image")),
shenasname_image: Yup.mixed().required(t("LoanRequest.error_message_shenasname_image")),
payan_khedmat_image: Yup.mixed().required(t("LoanRequest.error_message_payan_khedmat_image")),
});
const handleSubmit = async (values, props) => {
const formData = new FormData();
formData.append("name", values.name);
@@ -103,10 +76,18 @@ const AddFormComponent = () => {
formData.append("province_id", values.province);
formData.append("national_id", values.national_code);
formData.append("shenasname_id", values.shenasname_id);
if (values.shenasname_img != null)
formData.append("shenasname_image", values.shenasname_img);
if (values.national_card_img != null)
formData.append("national_card_image", values.national_card_img);
if (values.sherkat_naft_doc != null)
formData.append("sherkat_naft_doc", values.sherkat_naft_doc);
if (values.estate_doc != null)
formData.append("estate_doc", values.estate_doc);
if (values.agreement_doc != null)
formData.append("agreement_doc", values.agreement_doc);
if (values.shenasname_image != null)
formData.append("shenasname_image", values.shenasname_image);
if (values.national_card_image != null)
formData.append("national_card_image", values.national_card_image);
if (values.payan_khedmat_image != null)
formData.append("payan_khedmat_image", values.payan_khedmat_image);
requestServer(SEND_LOAN_REQUEST_WELFARE, "post", {auth: true, data: formData})
.then(function (response) {
@@ -132,6 +113,13 @@ const AddFormComponent = () => {
}}
>
<StyledForm sx={{width: "100%"}}>
<Box sx={{my: 1}}>
<Divider>
<Chip
label={t("LoanRequest.personal_info")}
/>
</Divider>
</Box>
<Box
sx={{
display: "flex",
@@ -285,44 +273,124 @@ const AddFormComponent = () => {
/>
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "center",
justifyContent: "space-around",
width: "100%",
}}
>
<UploadSystem
selectedImage={selectedImageShenasname}
handleUploadChange={(e) =>
handleUploadChangeShenasname(e, props.setFieldValue)
}
setselectedImage={setSelectedImageShenasname}
setFieldValue={props.setFieldValue}
fieldname="shenasname_img"
fileType={fileTypeShenasname}
fileName={fileNameShenasname}
imageAlt={t("app_name")}
imageSize={[300 /*width*/, 150 /*height*/]}
label={t("LoanRequest.file_field_shenasname_image")}
/>
<UploadSystem
selectedImage={selectedImageNationalCard}
handleUploadChange={(e) =>
handleUploadChangeNationalCard(e, props.setFieldValue)
}
setselectedImage={setSelectedImageNationalCard}
setFieldValue={props.setFieldValue}
fieldname="national_card_img"
fileType={fileTypeNationalCard}
fileName={fileNameNationalCard}
imageAlt={t("app_name")}
imageSize={[300 /*width*/, 150 /*height*/]}
label={t("LoanRequest.file_field_national_card_image")}
/>
<Box sx={{my: 1}}>
<Divider>
<Chip
label={t("LoanRequest.uploading_documents")}
/>
</Divider>
</Box>
<Stack spacing={{xs: 1, sm: 2}} direction="row" useFlexGap flexWrap="wrap"
sx={{justifyContent: "center"}}>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
fieldName="sherkat_naft_doc"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_sherkat_naft_doc")}
enableDelete={false}
error={
!!(props.touched.sherkat_naft_doc && props.errors.sherkat_naft_doc)
}
helperText={
props.touched.sherkat_naft_doc ? props.errors.sherkat_naft_doc : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
fieldName="estate_doc"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_estate_doc")}
enableDelete={false}
error={
!!(props.touched.estate_doc && props.errors.estate_doc)
}
helperText={
props.touched.estate_doc ? props.errors.estate_doc : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
fieldName="agreement_doc"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_agreement_doc")}
enableDelete={false}
error={
!!(props.touched.agreement_doc && props.errors.agreement_doc)
}
helperText={
props.touched.agreement_doc ? props.errors.agreement_doc : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
fieldName="shenasname_image"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_shenasname_image")}
enableDelete={false}
error={
!!(props.touched.shenasname_image && props.errors.shenasname_image)
}
helperText={
props.touched.shenasname_image ? props.errors.shenasname_image : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
fieldName="payan_khedmat_image"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_payan_khedmat_image")}
enableDelete={false}
error={
!!(props.touched.payan_khedmat_image && props.errors.payan_khedmat_image)
}
helperText={
props.touched.payan_khedmat_image ? props.errors.payan_khedmat_image : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
fieldName="national_card_image"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_national_card_image")}
enableDelete={false}
error={
!!(props.touched.national_card_image && props.errors.national_card_image)
}
helperText={
props.touched.national_card_image ? props.errors.national_card_image : null
}
/>
</Box>
</Stack>
<Box
sx={{
display: "flex",

14
src/components/dashboard/refahi/add-request-loan/index.jsx
View File

@@ -1,4 +1,3 @@
import CenterLayout from "@/layouts/CenterLayout";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import useUser from "@/lib/app/hooks/useUser";
import {Box, Chip, Divider} from "@mui/material";
@@ -11,18 +10,7 @@ const LoanRequestComponent = () => {
return (
<DashboardLayouts>
<CenterLayout>
<Box sx={{width: "80%", my: 2}}>
<Divider>
<Chip
label={`${t("LoanRequest.loan_request_page")} | ${
user.type_name
}`}
/>
</Divider>
</Box>
<AddFormComponent/>
</CenterLayout>
<AddFormComponent/>
</DashboardLayouts>
);
};

445
src/components/dashboard/refahi/edit-request-loan/forms/EditForm.jsx Normal file
View File

@@ -0,0 +1,445 @@
import StyledForm from "@/core/components/StyledForm";
import UploadSystem from "@/core/components/UploadSystem";
import {GET_PROVINCE_LIST, UPDATE_LOAN_REQUEST_WELFARE, DETAILS_LOAN_REQUEST_WELFARE} from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import useUser from "@/lib/app/hooks/useUser";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {Box, Button, Chip, Divider, Stack, TextField} from "@mui/material";
import axios from "axios";
import {Field, Formik} from "formik";
import {useTranslations} from "next-intl";
import {useEffect, useMemo, useState} from "react";
import * as Yup from "yup";
import SelectBox from "@/core/components/SelectBox";
import useRequest from "@/lib/app/hooks/useRequest";
import {useRouter} from "next/router";
import useLoading from "@/lib/app/hooks/useLoading";
const EditFormComponent = () => {
const t = useTranslations();
const {directionApp} = useDirection();
const {token} = useUser();
const requestServer = useRequest();
const router = useRouter();
const {setLoadingPage} = useLoading();
const [provinceList, setProvinceList] = useState(null);
const [initialValues, setInitialValues] = useState(null);
// get province list
useEffect(() => {
setLoadingPage(true)
requestServer(GET_PROVINCE_LIST, "get", {auth: true, notification: false})
.then(function ({data}) {
const formattedData = data.map((province, index) => ({
id: index,
name: province.name,
value: province.id,
}));
setProvinceList(formattedData);
}).catch(() => {
});
}, []);
// get form data
useEffect(() => {
if (!provinceList) return;
requestServer(DETAILS_LOAN_REQUEST_WELFARE + router.query.id, "get", {auth: true, notification: false})
.then(function ({data}) {
const item = data.data;
const formattedData = {
name: item.name,
phone_number: item.phone_number,
province_id: item.province_id,
national_id: item.national_id,
shenasname_id: item.shenasname_id,
sherkat_naft_doc: item.sherkat_naft_doc,
estate_doc: item.estate_doc,
agreement_doc: item.agreement_doc,
national_card_image: item.national_card_image,
shenasname_image: item.shenasname_image,
payan_khedmat_image: item.payan_khedmat_image,
}
setInitialValues(formattedData);
setLoadingPage(false)
}).catch(() => {
})
}, [provinceList]);
// validation and request action of form
const validationSchema = Yup.object().shape({
name: Yup.string().required(t("LoanRequest.error_message_name")),
phone_number: Yup.string().required(
t("LoanRequest.error_message_phone_number")
),
province_id: Yup.string().required(t("LoanRequest.error_message_province")),
national_id: Yup.string().required(t("LoanRequest.error_message_national_code")),
shenasname_id: Yup.string().required(t("LoanRequest.error_message_shenasname_id")),
sherkat_naft_doc: Yup.mixed().required(t("LoanRequest.error_message_sherkat_naft_doc")),
estate_doc: Yup.mixed().required(t("LoanRequest.error_message_estate_doc")),
agreement_doc: Yup.mixed().required(t("LoanRequest.error_message_agreement_doc")),
national_card_image: Yup.mixed().required(t("LoanRequest.error_message_national_card_image")),
shenasname_image: Yup.mixed().required(t("LoanRequest.error_message_shenasname_image")),
payan_khedmat_image: Yup.mixed().required(t("LoanRequest.error_message_payan_khedmat_image")),
});
const handleSubmit = async (values, props) => {
const formData = new FormData();
formData.append("name", values.name);
formData.append("phone_number", values.phone_number);
formData.append("province_id", values.province_id);
formData.append("national_id", values.national_id);
formData.append("shenasname_id", values.shenasname_id);
if (values.sherkat_naft_doc != initialValues.sherkat_naft_doc)
formData.append("sherkat_naft_doc", values.sherkat_naft_doc);
if (values.estate_doc != initialValues.estate_doc)
formData.append("estate_doc", values.estate_doc);
if (values.agreement_doc != initialValues.agreement_doc)
formData.append("agreement_doc", values.agreement_doc);
if (values.shenasname_image != initialValues.shenasname_image)
formData.append("shenasname_image", values.shenasname_image);
if (values.national_card_image != initialValues.national_card_image)
formData.append("national_card_image", values.national_card_image);
if (values.payan_khedmat_image != initialValues.payan_khedmat_image)
formData.append("payan_khedmat_image", values.payan_khedmat_image);
requestServer(UPDATE_LOAN_REQUEST_WELFARE + router.query.id, "post", {auth: true, data: formData})
.then(function (response) {
})
.catch(function (error) {
})
.finally(function () {
props.setSubmitting(false);
});
};
if (!initialValues) return "";
return (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{(props) => (
<Stack
spacing={2}
sx={{
p: 1,
width: "100%",
}}
>
<StyledForm sx={{width: "100%"}}>
<Box sx={{my: 1}}>
<Divider>
<Chip
label={t("LoanRequest.personal_info")}
/>
</Divider>
</Box>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "start",
justifyContent: "center",
width: "100%",
}}
>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
<Field
as={TextField}
sx={{width: "100%"}}
name="name"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_name")}
placeholder={t("LoanRequest.text_field_enter_your_name")}
type={"text"}
error={!!(props.touched.name && props.errors.name)}
fullWidth
helperText={props.touched.name ? props.errors.name : null}
/>
</Box>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
<Field
as={TextField}
sx={{width: "100%"}}
name="phone_number"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_phone_number")}
placeholder={t(
"LoanRequest.text_field_enter_your_phone_number"
)}
type={"text"}
error={
!!(props.touched.phone_number && props.errors.phone_number)
}
fullWidth
helperText={
props.touched.phone_number
? props.errors.phone_number
: null
}
/>
</Box>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
<Field
name="province_id"
label={t("LoanRequest.text_field_province")} // t("LoanRequest.text_field_enter_your_province")
size="small"
selectType="province_id"
component={SelectBox}
selectors={provinceList}
select={props.values.province_id}
setFieldValue={props.setFieldValue}
setFieldTouched={props.setFieldTouched}
error={
!!(props.touched.province_id && props.errors.province_id)
}
helperText={
props.touched.province_id ? props.errors.province_id : null
}
/>
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "start",
justifyContent: "center",
width: "100%",
}}
>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
<Field
as={TextField}
sx={{width: "100%"}}
name="national_id"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_national_code")}
placeholder={t(
"LoanRequest.text_field_enter_your_national_code"
)}
type={"text"}
error={
!!(props.touched.national_id && props.errors.national_id)
}
fullWidth
helperText={
props.touched.national_id
? props.errors.national_id
: null
}
/>
</Box>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
<Field
as={TextField}
sx={{width: "100%"}}
name="shenasname_id"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_shenasname_id")}
placeholder={t(
"LoanRequest.text_field_enter_your_shenasname_id"
)}
type={"text"}
error={
!!(props.touched.shenasname_id && props.errors.shenasname_id)
}
fullWidth
helperText={
props.touched.shenasname_id
? props.errors.shenasname_id
: null
}
/>
</Box>
</Box>
<Box sx={{my: 1}}>
<Divider>
<Chip
label={t("LoanRequest.uploading_documents")}
/>
</Divider>
</Box>
<Stack spacing={{xs: 1, sm: 2}} direction="row" useFlexGap flexWrap="wrap"
sx={{justifyContent: "center"}}>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
default_image={initialValues.sherkat_naft_doc}
fieldName="sherkat_naft_doc"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_sherkat_naft_doc")}
enableDelete={false}
error={
!!(props.touched.sherkat_naft_doc && props.errors.sherkat_naft_doc)
}
helperText={
props.touched.sherkat_naft_doc ? props.errors.sherkat_naft_doc : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
default_image={initialValues.estate_doc}
fieldName="estate_doc"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_estate_doc")}
enableDelete={false}
error={
!!(props.touched.estate_doc && props.errors.estate_doc)
}
helperText={
props.touched.estate_doc ? props.errors.estate_doc : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
default_image={initialValues.agreement_doc}
fieldName="agreement_doc"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_agreement_doc")}
enableDelete={false}
error={
!!(props.touched.agreement_doc && props.errors.agreement_doc)
}
helperText={
props.touched.agreement_doc ? props.errors.agreement_doc : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
default_image={initialValues.shenasname_image}
fieldName="shenasname_image"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_shenasname_image")}
enableDelete={false}
error={
!!(props.touched.shenasname_image && props.errors.shenasname_image)
}
helperText={
props.touched.shenasname_image ? props.errors.shenasname_image : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
default_image={initialValues.payan_khedmat_image}
fieldName="payan_khedmat_image"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_payan_khedmat_image")}
enableDelete={false}
error={
!!(props.touched.payan_khedmat_image && props.errors.payan_khedmat_image)
}
helperText={
props.touched.payan_khedmat_image ? props.errors.payan_khedmat_image : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
default_image={initialValues.national_card_image}
fieldName="national_card_image"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_national_card_image")}
enableDelete={false}
error={
!!(props.touched.national_card_image && props.errors.national_card_image)
}
helperText={
props.touched.national_card_image ? props.errors.national_card_image : null
}
/>
</Box>
</Stack>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "center",
mx: "auto",
my: 2,
width: {xs: "100%", sm: "30%", md: "25%"},
}}
>
<Button
fullWidth
type="submit"
variant="contained"
size="large"
sx={{mt: 2}}
endIcon={<DataSaverOnIcon/>}
disabled={props.isSubmitting}
>
{t("LoanRequest.button_submit")}
</Button>
</Box>
</StyledForm>
</Stack>
)}
</Formik>
);
};
export default EditFormComponent;

17
src/components/dashboard/refahi/edit-request-loan/index.jsx Normal file
View File

@@ -0,0 +1,17 @@
import DashboardLayouts from "@/layouts/dashboardLayouts";
import useUser from "@/lib/app/hooks/useUser";
import {useTranslations} from "next-intl";
import EditFormComponent from "@/components/dashboard/refahi/edit-request-loan/forms/EditForm";
const LoanRequestComponent = () => {
const t = useTranslations();
const {user} = useUser();
return (
<DashboardLayouts>
<EditFormComponent/>
</DashboardLayouts>
);
};
export default LoanRequestComponent;