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

file input design

Browse Source
This commit is contained in:
Mohammad Jalali
2023-07-20 10:39:58 +03:30
parent 7df12b0f45
commit 14b13e1309
4 changed files with 235 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
src/components/dashboard/loan-request/NavyForm.jsx
View File

@@ -1,16 +1,84 @@
import Notifications from "@/core/components/notifications";
import SelectBox from "@/core/components/SelectBox";
import StyledForm from "@/core/components/StyledForm";
import UploadSystem from "@/core/components/UploadSystem";
import {
GET_PROVINCE_LIST,
SEND_LOAN_REQUEST_NAVGAN,
} 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, Stack, TextField } from "@mui/material";
import axios from "axios";
import { Field, Formik } from "formik";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useEffect, useState } from "react";
import * as Yup from "yup";
const NavyForm = () => {
const t = useTranslations();
const { directionApp } = useDirection();
const { token } = useUser();
// get province list
const [provinceList, setProvinceList] = useState([]);
useEffect(() => {
axios
.get(GET_PROVINCE_LIST, {
headers: { Authorization: `Bearer ${token}` },
})
.then(({ data }) => {
const formattedData = data.map((province, index) => ({
id: index,
name: province.name,
value: province.id,
}));
setProvinceList(formattedData);
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// 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
const initialValues = {
name: "",
phone_number: "",
@@ -20,22 +88,57 @@ const NavyForm = () => {
navgan_id: "",
national_code: "",
shenasname_id: "",
national_card_img: "",
shenasname_img: "",
national_card_img: null,
shenasname_img: null,
};
// end initial values
// validation
const validationSchema = Yup.object().shape({
name: Yup.string().required(t("LoanRequest.error_message_required")),
phone_number: Yup.string().required(
t("LoanRequest.error_message_required")
),
vehicle_type: Yup.string().required(
t("LoanRequest.error_message_required")
),
plate_number: Yup.string().required(
t("LoanRequest.error_message_required")
),
navgan_id: Yup.string().required(t("LoanRequest.error_message_required")),
province: Yup.string().required(t("LoanRequest.error_message_required")),
national_code: Yup.string().required(
t("LoanRequest.error_message_required")
),
shenasname_id: Yup.string().required(
t("LoanRequest.error_message_required")
),
});
// end validation
// submit
const handleSubmit = async (values, props) => {
Notifications(directionApp, t, undefined);
const formData = new FormData();
formData.append("name", values.name);
formData.append("phone_number", values.phone_number);
formData.append("vehicle_type", values.vehicle_type);
formData.append("plate_number", values.plate_number);
formData.append("province_id", values.province);
formData.append("navgan_id", values.navgan_id);
formData.append("national_code", 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);
await axios
.post(SEND_LOAN_REQUEST_NAVGAN, {
name: values.name,
phone_number: values.phone_number,
vehicle_type: values.vehicle_type,
plate_number: values.plate_number,
province_id: values.province,
navgan_id: values.navgan_id,
national_code: values.national_code,
shenasname_id: values.shenasname_id,
.post(SEND_LOAN_REQUEST_NAVGAN, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
},
})
.then(function (response) {
Notifications(directionApp, t, response);
@@ -45,9 +148,14 @@ const NavyForm = () => {
props.setSubmitting(false);
});
};
// end submit
return (
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{(props) => (
<Stack
spacing={2}
@@ -79,9 +187,6 @@ const NavyForm = () => {
name="name"
variant="outlined"
size="small"
InputProps={{
readOnly: true,
}}
label={t("LoanRequest.text_field_name")}
placeholder={t("LoanRequest.text_field_enter_your_name")}
type={"text"}
@@ -103,9 +208,6 @@ const NavyForm = () => {
name="phone_number"
variant="outlined"
size="small"
InputProps={{
readOnly: true,
}}
label={t("LoanRequest.text_field_phone_number")}
placeholder={t(
"LoanRequest.text_field_enter_your_phone_number"
@@ -147,9 +249,6 @@ const NavyForm = () => {
name="vehicle_type"
variant="outlined"
size="small"
InputProps={{
readOnly: true,
}}
label={t("LoanRequest.text_field_vehicle_type")}
placeholder={t(
"LoanRequest.text_field_enter_your_vehicle_type"
@@ -181,9 +280,6 @@ const NavyForm = () => {
name="plate_number"
variant="outlined"
size="small"
InputProps={{
readOnly: true,
}}
label={t("LoanRequest.text_field_plate_number")}
placeholder={t(
"LoanRequest.text_field_enter_your_plate_number"
@@ -210,25 +306,20 @@ const NavyForm = () => {
}}
>
<Field
as={TextField}
sx={{ width: "100%" }}
name="province"
variant="outlined"
label={t("LoanRequest.text_field_province")} // t("LoanRequest.text_field_enter_your_province")
size="small"
InputProps={{
readOnly: true,
}}
label={t("LoanRequest.text_field_province")}
placeholder={t("LoanRequest.text_field_enter_your_province")}
type={"text"}
selectType="province"
component={SelectBox}
selectors={provinceList}
select={props.values.province}
setFieldValue={props.setFieldValue}
setFieldTouched={props.setFieldTouched}
error={
props.touched.province && props.errors.province
? true
: false
props.touched.gender && props.errors.province ? true : false
}
fullWidth
helperText={
props.touched.province ? props.errors.province : null
props.touched.gender ? props.errors.province : null
}
/>
</Box>
@@ -255,9 +346,6 @@ const NavyForm = () => {
name="navgan_id"
variant="outlined"
size="small"
InputProps={{
readOnly: true,
}}
label={t("LoanRequest.text_field_navgan_id")}
placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
type={"text"}
@@ -285,9 +373,6 @@ const NavyForm = () => {
name="national_code"
variant="outlined"
size="small"
InputProps={{
readOnly: true,
}}
label={t("LoanRequest.text_field_national_code")}
placeholder={t(
"LoanRequest.text_field_enter_your_national_code"
@@ -319,17 +404,13 @@ const NavyForm = () => {
name="shenasname_id"
variant="outlined"
size="small"
InputProps={{
readOnly: true,
}}
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
props.touched.shenasname_id && props.errors.shenasname_id
? true
: false
}
@@ -351,24 +432,34 @@ const NavyForm = () => {
width: "100%",
}}
>
<Box>
<Image
width={300}
height={300}
src="/images/login.svg"
priority
alt={t("app_name")}
/>
</Box>
<Box>
<Image
width={300}
height={300}
src="/images/login.svg"
priority
alt={t("app_name")}
/>
</Box>
<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>
<Box
sx={{

33
src/components/dashboard/loan-request/WelfareServicesForm.jsx
View File

@@ -3,6 +3,7 @@ import StyledForm from "@/core/components/StyledForm";
import UploadSystem from "@/core/components/UploadSystem";
import { SEND_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, Stack, TextField } from "@mui/material";
import axios from "axios";
@@ -14,6 +15,7 @@ import * as Yup from "yup";
const WelfareServicesForm = () => {
const t = useTranslations();
const { directionApp } = useDirection();
const { token } = useUser();
// upload files
const [selectedImageShenasname, setSelectedImageShenasname] = useState(
@@ -86,20 +88,25 @@ const WelfareServicesForm = () => {
const handleSubmit = async (values, props) => {
Notifications(directionApp, t, undefined);
console.log(values.national_card_img);
console.log(values.shenasname_img);
const formData = new FormData();
formData.append("name", values.name);
formData.append("phone_number", values.phone_number);
formData.append("vehicle_type", values.vehicle_type);
formData.append("plate_number", values.plate_number);
formData.append("province_id", values.province);
formData.append("national_code", 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);
await axios
.post(SEND_LOAN_REQUEST_WELFARE, {
name: values.name,
phone_number: values.phone_number,
vehicle_type: values.vehicle_type,
plate_number: values.plate_number,
province_id: values.province,
navgan_id: values.navgan_id,
national_code: values.national_code,
shenasname_id: values.shenasname_id,
national_card_image: values.national_card_img,
shenasname_image: values.shenasname_img,
.post(SEND_LOAN_REQUEST_WELFARE, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
},
})
.then(function (response) {
Notifications(directionApp, t, response);

55
src/core/components/SelectBox.jsx Normal file
View File

@@ -0,0 +1,55 @@
import {
FormControl,
FormHelperText,
InputLabel,
MenuItem,
Select,
} from "@mui/material";
function SelectBox({
select,
selectType,
selectors,
label,
setFieldValue,
setFieldTouched,
error,
helperText,
}) {
const handleChange = (event) => {
setFieldValue(selectType, event.target.value);
};
const handleBlur = () => {
setFieldTouched(select, true);
};
return (
<FormControl
variant="outlined"
margin="normal"
fullWidth
size="small"
error={error}
>
<InputLabel id="language-label">{label}</InputLabel>
<Select
labelId="language-label"
id={select}
name={select}
size="small"
value={select}
onChange={handleChange}
label="Language"
onBlur={handleBlur}
>
{selectors.map((selector) => (
<MenuItem key={selector.id} value={selector.value}>
{selector.name}
</MenuItem>
))}
</Select>
<FormHelperText>{helperText}</FormHelperText>
</FormControl>
);
}
export default SelectBox;

1
src/core/data/apiRoutes.js
View File

@@ -7,5 +7,6 @@ export const REGISTER = BASE_URL + "/register";
export const USER_INFO = BASE_URL + "/profile/info";
export const SEND_LOAN_REQUEST_NAVGAN = BASE_URL + "/navgan/store_loan";
export const SEND_LOAN_REQUEST_WELFARE = BASE_URL + "/navgan/store_loan";
export const GET_PROVINCE_LIST = BASE_URL + "/provinces";