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

add image uploading and document uploading system by a reusable component named UploadSystem

Browse Source
This commit is contained in:
Mohammad Jalali
2023-07-18 16:48:31 +03:30
parent e0b63a6f74
commit 285e8bb2bf
13 changed files with 400 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/components/dashboard/loan-follow-up/index.jsx
View File

@@ -1,11 +1,8 @@
import CenterLayout from "@/layouts/CenterLayout";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import useUser from "@/lib/app/hooks/useUser";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import {
Avatar,
Box,
Card,
Avatar, Card,
CardActions,
CardContent,
CardHeader,
@@ -13,7 +10,7 @@ import {
Grid,
IconButton,
Stack,
Typography,
Typography
} from "@mui/material";
import { styled } from "@mui/material/styles";
import { useTranslations } from "next-intl";
@@ -30,19 +27,42 @@ const ExpandMore = styled((props) => {
}),
}));
const data = [
{
name: "جان دو",
date: "۱۳۹۹/۰۴/۲۵",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.",
},
{
name: "جین اسمیت",
date: "۱۳۹۹/۰۴/۲۶",
description: "نُلا ویته الیت لیبرو آ، آ فارِترا آوگوه.",
},
{
name: "مایک جانسون",
date: "۱۳۹۹/۰۴/۲۷",
description:
"دوئیس مولیس، است نُن کُمُدو لُکتوس، نیسی ارات پورتیتور لیگولا.",
},
];
const DashboardLoanFollowUpComponent = () => {
const t = useTranslations();
const { token } = useUser();
const [expanded, setExpanded] = useState(false);
const [expanded, setExpanded] = useState([]);
const handleExpandClick = () => {
setExpanded(!expanded);
const handleExpandClick = (index) => {
setExpanded((prevExpanded) => {
const newExpanded = [...prevExpanded];
newExpanded[index] = !newExpanded[index];
return newExpanded;
});
};
return (
<DashboardLayouts>
<CenterLayout>
<Stack
spacing={2}
sx={{
@@ -54,125 +74,47 @@ const DashboardLoanFollowUpComponent = () => {
container
columnSpacing={2}
rowSpacing={2}
sx={{ alignItems: "center", justifyContent: "center" }}
sx={{ alignItems: "start", justifyContent: "center" }}
>
<Grid item xs={12} md={6} lg={4}>
<Card sx={{ width: "100%" }}>
<CardHeader
avatar={
<Avatar
sx={{ bgcolor: "primary.main" }}
aria-label="recipe"
></Avatar>
}
title="اسم اقاهه"
subheader="تاریخ اگه خواستیم"
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
متن تست
</Typography>
</CardContent>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
{data.map((item, index) => (
<Grid item xs={12} md={6} lg={4} key={index}>
<Card sx={{ width: "100%" }}>
<CardHeader
avatar={
<Avatar
sx={{ bgcolor: "primary.main" }}
aria-label="recipe"
></Avatar>
}
title={item.name}
subheader={item.date}
/>
<CardContent>
<Typography paragraph>اطلاعات تکمیلی:</Typography>
<Typography paragraph>پارت دوم متن تست</Typography>
<Typography paragraph>پارت سه همون قبلی</Typography>
<Typography paragraph>در ادامه باید بگم که...</Typography>
<Typography>درپایان همینه که هست</Typography>
<Typography variant="body2" color="text.secondary">
متن تست
</Typography>
</CardContent>
</Collapse>
</Card>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Card sx={{ width: "100%" }}>
<CardHeader
avatar={
<Avatar
sx={{ bgcolor: "primary.main" }}
aria-label="recipe"
></Avatar>
}
title="اسم اقاهه"
subheader="تاریخ اگه خواستیم"
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
متن تست
</Typography>
</CardContent>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>اطلاعات تکمیلی:</Typography>
<Typography paragraph>پارت دوم متن تست</Typography>
<Typography paragraph>پارت سه همون قبلی</Typography>
<Typography paragraph>در ادامه باید بگم که...</Typography>
<Typography>درپایان همینه که هست</Typography>
</CardContent>
</Collapse>
</Card>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Card sx={{ width: "100%" }}>
<CardHeader
avatar={
<Avatar
sx={{ bgcolor: "primary.main" }}
aria-label="recipe"
></Avatar>
}
title="اسم اقاهه"
subheader="تاریخ اگه خواستیم"
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
متن تست
</Typography>
</CardContent>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>اطلاعات تکمیلی:</Typography>
<Typography paragraph>پارت دوم متن تست</Typography>
<Typography paragraph>پارت سه همون قبلی</Typography>
<Typography paragraph>در ادامه باید بگم که...</Typography>
<Typography>درپایان همینه که هست</Typography>
</CardContent>
</Collapse>
</Card>
</Grid>
<CardActions disableSpacing>
<ExpandMore
expand={expanded[index]}
onClick={() => handleExpandClick(index)}
aria-expanded={expanded[index]}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded[index]} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>اطلاعات تکمیلی:</Typography>
<Typography paragraph>{item.description}</Typography>
</CardContent>
</Collapse>
</Card>
</Grid>
))}
</Grid>
</Stack>
</CenterLayout>
</DashboardLayouts>
);
};

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

@@ -1,4 +1,6 @@
import Notifications from "@/core/components/notifications";
import StyledForm from "@/core/components/StyledForm";
import useDirection from "@/lib/app/hooks/useDirection";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import { Box, Button, Stack, TextField } from "@mui/material";
import { Field, Formik } from "formik";
@@ -7,26 +9,45 @@ import Image from "next/image";
const NavyForm = () => {
const t = useTranslations();
const { directionApp } = useDirection();
const initialValues = {
first_name: "",
last_name: "",
name: "",
phone_number: "",
vehicle_type: "",
plate_number: "",
province: "",
navgan_id: "",
national_code: "",
birth_certificate_id: "",
shenasname_id: "",
national_card_img: "",
birth_certificate_img: "",
shenasname_img: "",
};
const handleSubmit = async (values, props) => {
Notifications(directionApp, t, undefined);
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,
})
.then(function (response) {
Notifications(directionApp, t, response);
})
.catch(function (error) {
Notifications(directionApp, t, error.response);
props.setSubmitting(false);
});
};
return (
<Formik
initialValues={initialValues}
// onSubmit={handleSubmit}
>
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
{(props) => (
<Stack
spacing={2}
@@ -55,56 +76,18 @@ const NavyForm = () => {
<Field
as={TextField}
sx={{ width: "100%" }}
name="first_name"
name="name"
variant="outlined"
size="small"
InputProps={{
readOnly: true,
}}
label={t("LoanRequest.text_field_first_name")}
placeholder={t(
"LoanRequest.text_field_enter_your_first_name"
)}
label={t("LoanRequest.text_field_name")}
placeholder={t("LoanRequest.text_field_enter_your_name")}
type={"text"}
error={
props.touched.first_name && props.errors.first_name
? true
: false
}
error={props.touched.name && props.errors.name ? true : false}
fullWidth
helperText={
props.touched.first_name ? props.errors.first_name : null
}
/>
</Box>
<Box
sx={{
mx: { xs: 0, sm: 2 },
my: 2,
width: "100%",
}}
>
<Field
as={TextField}
sx={{ width: "100%" }}
name="last_name"
variant="outlined"
size="small"
InputProps={{
readOnly: true,
}}
label={t("LoanRequest.text_field_last_name")}
placeholder={t("LoanRequest.text_field_enter_your_last_name")}
type={"text"}
error={
props.touched.last_name && props.errors.last_name
? true
: false
}
fullWidth
helperText={
props.touched.last_name ? props.errors.last_name : null
}
helperText={props.touched.name ? props.errors.name : null}
/>
</Box>
<Box
@@ -333,27 +316,27 @@ const NavyForm = () => {
<Field
as={TextField}
sx={{ width: "100%" }}
name="birth_certificate_id"
name="shenasname_id"
variant="outlined"
size="small"
InputProps={{
readOnly: true,
}}
label={t("LoanRequest.text_field_birth_certificate_id")}
label={t("LoanRequest.text_field_shenasname_id")}
placeholder={t(
"LoanRequest.text_field_enter_your_birth_certificate_id"
"LoanRequest.text_field_enter_your_shenasname_id"
)}
type={"text"}
error={
props.touched.birth_certificate_id &&
props.errors.birth_certificate_id
props.touched.shenasname_id &&
props.errors.shenasname_id
? true
: false
}
fullWidth
helperText={
props.touched.birth_certificate_id
? props.errors.birth_certificate_id
props.touched.shenasname_id
? props.errors.shenasname_id
: null
}
/>

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

@@ -1,31 +1,71 @@
import Notifications from "@/core/components/notifications";
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 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 { useState } from "react";
import * as Yup from "yup";
const WelfareServicesForm = () => {
const t = useTranslations();
const { directionApp } = useDirection();
// 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];
const fileType = event.target.files[0].type;
const fileName = event.target.files[0].name;
if (uploadedFile) {
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 = {
first_name: "",
last_name: "",
name: "",
phone_number: "",
vehicle_type: "",
plate_number: "",
province: "",
navgan_id: "",
national_code: "",
birth_certificate_id: "",
national_card_img: "",
birth_certificate_img: "",
shenasname_id: "",
national_card_img: null,
shenasname_img: null,
};
const validationSchema = Yup.object().shape({
first_name: Yup.string().required(t("LoanRequest.error_message_required")),
last_name: Yup.string().required(t("LoanRequest.error_message_required")),
name: Yup.string().required(t("LoanRequest.error_message_required")),
phone_number: Yup.string().required(
t("LoanRequest.error_message_required")
),
@@ -36,19 +76,45 @@ const WelfareServicesForm = () => {
t("LoanRequest.error_message_required")
),
province: Yup.string().required(t("LoanRequest.error_message_required")),
navgan_id: Yup.string().required(t("LoanRequest.error_message_required")),
national_code: Yup.string().required(
t("LoanRequest.error_message_required")
),
birth_certificate_id: Yup.string().required(
shenasname_id: Yup.string().required(
t("LoanRequest.error_message_required")
),
});
const handleSubmit = async (values, props) => {
Notifications(directionApp, t, undefined);
console.log(values.national_card_img);
console.log(values.shenasname_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,
})
.then(function (response) {
Notifications(directionApp, t, response);
})
.catch(function (error) {
Notifications(directionApp, t, error.response);
props.setSubmitting(false);
});
};
// end initial values, validation and request action of form
return (
<Formik
initialValues={initialValues}
// onSubmit={handleSubmit}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{(props) => (
@@ -79,50 +145,15 @@ const WelfareServicesForm = () => {
<Field
as={TextField}
sx={{ width: "100%" }}
name="first_name"
name="name"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_first_name")}
placeholder={t(
"LoanRequest.text_field_enter_your_first_name"
)}
label={t("LoanRequest.text_field_name")}
placeholder={t("LoanRequest.text_field_enter_your_name")}
type={"text"}
error={
props.touched.first_name && props.errors.first_name
? true
: false
}
error={props.touched.name && props.errors.name ? true : false}
fullWidth
helperText={
props.touched.first_name ? props.errors.first_name : null
}
/>
</Box>
<Box
sx={{
mx: { xs: 0, sm: 2 },
my: 2,
width: "100%",
}}
>
<Field
as={TextField}
sx={{ width: "100%" }}
name="last_name"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_last_name")}
placeholder={t("LoanRequest.text_field_enter_your_last_name")}
type={"text"}
error={
props.touched.last_name && props.errors.last_name
? true
: false
}
fullWidth
helperText={
props.touched.last_name ? props.errors.last_name : null
}
helperText={props.touched.name ? props.errors.name : null}
/>
</Box>
<Box
@@ -265,33 +296,6 @@ const WelfareServicesForm = () => {
width: "100%",
}}
>
<Box
sx={{
mx: { xs: 0, sm: 2 },
my: 2,
width: "100%",
}}
>
<Field
as={TextField}
sx={{ width: "100%" }}
name="navgan_id"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_navgan_id")}
placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
type={"text"}
error={
props.touched.navgan_id && props.errors.navgan_id
? true
: false
}
fullWidth
helperText={
props.touched.navgan_id ? props.errors.navgan_id : null
}
/>
</Box>
<Box
sx={{
mx: { xs: 0, sm: 2 },
@@ -333,24 +337,23 @@ const WelfareServicesForm = () => {
<Field
as={TextField}
sx={{ width: "100%" }}
name="birth_certificate_id"
name="shenasname_id"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_birth_certificate_id")}
label={t("LoanRequest.text_field_shenasname_id")}
placeholder={t(
"LoanRequest.text_field_enter_your_birth_certificate_id"
"LoanRequest.text_field_enter_your_shenasname_id"
)}
type={"text"}
error={
props.touched.birth_certificate_id &&
props.errors.birth_certificate_id
props.touched.shenasname_id && props.errors.shenasname_id
? true
: false
}
fullWidth
helperText={
props.touched.birth_certificate_id
? props.errors.birth_certificate_id
props.touched.shenasname_id
? props.errors.shenasname_id
: null
}
/>
@@ -365,24 +368,32 @@ const WelfareServicesForm = () => {
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*/]}
/>
<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*/]}
/>
</Box>
<Box
sx={{
@@ -390,6 +401,7 @@ const WelfareServicesForm = () => {
flexDirection: { xs: "column", sm: "row" },
alignItems: "center",
mx: "auto",
my: 2,
width: { xs: "100%", sm: "30%", md: "25%" },
}}
>

1
src/components/first/index.jsx
View File

@@ -19,6 +19,7 @@ const FirstComponent = () => {
alt={t("app_name")}
width={300}
height={200}
priority
/>
<Typography variant="h5" sx={{ textAlign: "center" }}>
{t("app_name")}

1
src/components/register-navy/SendToken.jsx
View File

@@ -76,6 +76,7 @@ const SendToken = ({ PhoneNumber, nationalId, navganId, typeId }) => {
fill
src="/images/register.svg"
alt={t("app_name")}
priority
/>
</Box>
<Typography margin={2} variant="h4" textAlign="center">

2
src/components/register-navy/SendUserData.jsx
View File

@@ -4,6 +4,7 @@ import StyledForm from "@/core/components/StyledForm";
import { REGISTER_SEND_OTP_TOKEN } from "@/core/data/apiRoutes";
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import useDirection from "@/lib/app/hooks/useDirection";
import FingerprintIcon from "@mui/icons-material/Fingerprint";
import {
Box,
@@ -90,6 +91,7 @@ const SendUserData = ({
fill
src="/images/register.svg"
alt={t("app_name")}
priority
/>
</Box>
<Typography margin={2} variant="h4" textAlign="center">

1
src/components/register-welfare-services/SendUserData.jsx
View File

@@ -88,6 +88,7 @@ const SendUserData = ({
fill
src="/images/register.svg"
alt={t("app_name")}
priority
/>
</Box>
<Typography margin={2} variant="h4" textAlign="center">

1
src/components/register-welfare-services/sendToken.jsx
View File

@@ -76,6 +76,7 @@ const SendToken = ({ PhoneNumber, nationalId, typeId }) => {
fill
src="/images/register.svg"
alt={t("app_name")}
priority
/>
</Box>
<Typography margin={2} variant="h4" textAlign="center">