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

LFFE-31 passenger boss show details

Browse Source
This commit is contained in:
Yasiu1376
2023-12-02 13:48:18 +03:30
parent 89a4a7c657
commit b50f0dc11b
6 changed files with 187 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx
View File

@@ -1,26 +1,80 @@
import UploadSystem from "@/core/components/UploadSystem"; import UploadSystem from "@/core/components/UploadSystem";
import useNotification from "@/lib/app/hooks/useNotification"; import useNotification from "@/lib/app/hooks/useNotification";
import useRequest from "@/lib/app/hooks/useRequest"; import useRequest from "@/lib/app/hooks/useRequest";
import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material" import {
Box,
Button,
DialogActions,
DialogContent,
FormHelperText,
Grid,
LinearProgress,
Stack,
TextField,
Typography
} from "@mui/material"
import {useFormik} from "formik"; import {useFormik} from "formik";
import {useTranslations} from "next-intl"; import {useTranslations} from "next-intl";
import {CONFIRM_PASSENGER_BOSS} from "@/core/data/apiRoutes"; import {
import {useState} from "react"; CONFIRM_PASSENGER_BOSS,
EXPORT_PASSENGER_BOSS_DETAILS,
} from "@/core/data/apiRoutes";
import {useEffect, useState} from "react";
import PriceField from "@/core/components/PriceField"; import PriceField from "@/core/components/PriceField";
import * as Yup from "yup"; import * as Yup from "yup";
import CustomAccordion from "@/core/components/CustomAccordion";
import ImageContent from "@/core/components/ImageContent";
const vehicle_amount = { const vehicle_amount = {
"اتوبوس": 7000, "اتوبوس": 7000,
"مینی بوس": 2000, "مینی بوس": 2000,
} }
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type}) => { const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type , handleSizeChangeClick}) => {
const t = useTranslations(); const t = useTranslations();
const [selectedImage, setSelectedImage] = useState(""); const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null); const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null); const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true); const [showAddIcon, setShowAddIcon] = useState(true);
const requestServer = useRequest({auth: true}) const requestServer = useRequest({auth: true ,notification: false})
const {update_notification} = useNotification() const {update_notification} = useNotification();
const [accordionStates, setAccordionStates] = useState([]);
const [hasImageShown, setHasImageShown] = useState(false);
const [imageLink, setImageLink] = useState(null);
const [detailsList, setDetailsData] = useState(null);
const [loading, setLoading] = useState(true);
const [isSkeleton, setIsSkeleton] = useState(false);
useEffect(() => {
requestServer(`${EXPORT_PASSENGER_BOSS_DETAILS}/${rowId}`, 'get')
.then((response) => {
const booleanData = Array.from({ length: response.data.data.attachment_files.length }, () => false);
setAccordionStates(booleanData);
setDetailsData(response.data)
})
.catch(() => {
}).finally(() => {
setLoading(false);
});
}, []);
const handleAccordionChange = (index) => {
const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false);
setAccordionStates(newAccordionStates);
if (!newAccordionStates[index])
{
handleSizeChangeClick('sm');
setHasImageShown(false);
setIsSkeleton(false)
}
else {
handleSizeChangeClick('xl');
setHasImageShown(true);
setImageLink(detailsList.data.attachment_files[index])
setIsSkeleton(true)
}
};
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
approved_amount: Yup.mixed().test( approved_amount: Yup.mixed().test(
@@ -92,77 +146,114 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type}) =>
formik.setFieldValue("approved_amount", formik.values.approved_amount) formik.setFieldValue("approved_amount", formik.values.approved_amount)
} }
}; };
const renderCustomAccordions = () => {
if (detailsList && detailsList.data && detailsList.data.attachment_files) {
return detailsList.data.attachment_files.map((file, index) => (
<CustomAccordion
key={index}
title={`${file.title}`}
hasOpened={accordionStates[index]}
hasAccordionOpened={null}
handleAccordionChange={() => handleAccordionChange(index)}
accordionIndex={index}
downloadFile={file.attachment}
/>
));
}
return null;
};
return ( return (
<> <>
<DialogContent> <DialogContent>
<Stack spacing={2}> <Grid container spacing={2}>
<Stack> <Grid item xs={hasImageShown ? 6 : 12}>
<TextField <Box sx={{ border: '1px solid #ccc' ,p:2 , mb:2 , borderRadius: '8px'}}>
name="description" <Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("sidebar.machinery-expert")}</Typography>
multiline <Typography pt={1}>
rows={8} {isNaN((detailsList?.data?.proposed_amount) / 10)
label={<> ? ""
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>} : ((detailsList?.data?.proposed_amount) / 10).toLocaleString()}{" "}
value={formik.values.description} {t("ConfirmDialog.unit")}
onChange={handleDescriptionChange} </Typography>
fullWidth </Box>
variant="outlined" {loading ? <LinearProgress /> : renderCustomAccordions()}
sx={{mt: 1}} <Stack spacing={2}>
/> <Stack>
</Stack> <TextField
<Stack> name="description"
<PriceField multiline
name="approved_amount" rows={8}
label={<> label={<>
<span>{t("ConfirmDialog.approved_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>} <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
type="text" value={formik.values.description}
inputProps={{ onChange={handleDescriptionChange}
inputMode: "number", fullWidth
min: 0, variant="outlined"
pattern: "[0-9]*", sx={{mt: 1}}
}} />
variant="outlined" </Stack>
value={formik.values.approved_amount} <Stack>
onChange={handleAmountChange} <PriceField
onBlur={formik.handleBlur("approved_amount")} name="approved_amount"
error={ label={<>
formik.touched.approved_amount && <span>{t("ConfirmDialog.approved_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
Boolean(formik.errors.approved_amount) type="text"
} inputProps={{
helperText={ inputMode: "number",
formik.touched.approved_amount && formik.errors.approved_amount min: 0,
} pattern: "[0-9]*",
sx={{mt: 1}} }}
fullWidth variant="outlined"
/> value={formik.values.approved_amount}
</Stack> onChange={handleAmountChange}
<Stack> onBlur={formik.handleBlur("approved_amount")}
<Typography>{t("PassengerBoss.upload_file")}</Typography> error={
<UploadSystem formik.touched.approved_amount &&
selectedImage={selectedImage} Boolean(formik.errors.approved_amount)
handleUploadChange={handleUploadChange} // Pass the updated function directly }
setselectedImage={setSelectedImage} helperText={
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue formik.touched.approved_amount && formik.errors.approved_amount
fieldname="confirm_img" }
fileType={fileType} sx={{mt: 1}}
fileName={fileName} fullWidth
imageAlt={t("app_name")} />
imageSize={[250, 150]} </Stack>
setShowAddIcon={setShowAddIcon} <Stack>
showAddIcon={showAddIcon} <Typography>{t("PassengerBoss.upload_file")}</Typography>
onBlur={() => formik.handleBlur("confirm_img")} <UploadSystem
error={ selectedImage={selectedImage}
formik.touched.confirm_img && handleUploadChange={handleUploadChange} // Pass the updated function directly
Boolean(formik.errors.confirm_img) setselectedImage={setSelectedImage}
} setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
/> fieldname="confirm_img"
<FormHelperText fileType={fileType}
error={Boolean(formik.errors.confirm_img)} fileName={fileName}
> imageAlt={t("app_name")}
{formik.touched.confirm_img && formik.errors.confirm_img} imageSize={[250, 150]}
</FormHelperText> setShowAddIcon={setShowAddIcon}
</Stack> showAddIcon={showAddIcon}
</Stack> onBlur={() => formik.handleBlur("confirm_img")}
error={
formik.touched.confirm_img &&
Boolean(formik.errors.confirm_img)
}
/>
<FormHelperText
error={Boolean(formik.errors.confirm_img)}
>
{formik.touched.confirm_img && formik.errors.confirm_img}
</FormHelperText>
</Stack>
</Stack>
</Grid>
<Grid item xs={6}>
<Stack sx={{ display: hasImageShown ? 'flex' : 'none', alignItems: 'center', gap: 0.5 , justifyContent:'center'}}>
<ImageContent imageLink={imageLink} isSkeleton={isSkeleton} setIsSkeleton={setIsSkeleton}/>
</Stack>
</Grid>
</Grid>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary" <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"

18
src/components/dashboard/passenger-boss/Form/ConfirmForm/index.jsx
View File

@@ -1,12 +1,24 @@
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"; import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
import {useTranslations} from "next-intl"; import {useTranslations} from "next-intl";
import {useState} from "react"; import {useEffect, useState} from "react";
import ConfirmContent from "./ConfirmContent"; import ConfirmContent from "./ConfirmContent";
import CallMadeIcon from '@mui/icons-material/CallMade'; import CallMadeIcon from '@mui/icons-material/CallMade';
const Confirm = ({rowId, mutate, vehicle_type}) => { const Confirm = ({rowId, mutate, vehicle_type}) => {
const t = useTranslations(); const t = useTranslations();
const [openConfirmDialog, setOpenConfirmDialog] = useState(false); const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const [dialogSize, setDialogSize] = useState('sm');
useEffect(() => {
if (!openConfirmDialog) {
setDialogSize('sm');
}
}, [openConfirmDialog]);
const handleSizeChangeClick = (size) => {
setDialogSize(size);
};
return ( return (
<> <>
<Tooltip title={t("ConfirmDialog.confirm")}> <Tooltip title={t("ConfirmDialog.confirm")}>
@@ -20,9 +32,9 @@ const Confirm = ({rowId, mutate, vehicle_type}) => {
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Dialog fullWidth open={openConfirmDialog} <Dialog fullWidth open={openConfirmDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}> PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}} maxWidth={dialogSize}>
<DialogTitle>{t("PassengerBoss.confirm")}</DialogTitle> <DialogTitle>{t("PassengerBoss.confirm")}</DialogTitle>
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog} <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog} handleSizeChangeClick={handleSizeChangeClick}
vehicle_type={vehicle_type}/> vehicle_type={vehicle_type}/>
</Dialog> </Dialog>
</> </>

2
src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx
View File

@@ -17,7 +17,7 @@ import {CONFIRM_TRANSPORTATION_ASSISTANCE, GET_TRANSPORTATION_ASSISTANCE_DETAILS
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import * as Yup from "yup"; import * as Yup from "yup";
import CustomAccordion from "@/core/components/CustomAccordion"; import CustomAccordion from "@/core/components/CustomAccordion";
import ImageContent from "@/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent"; import ImageContent from "@/core/components/ImageContent";
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeClick}) => { const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeClick}) => {
const t = useTranslations(); const t = useTranslations();
const [selectedImage, setSelectedImage] = useState(""); const [selectedImage, setSelectedImage] = useState("");

2
src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx
View File

@@ -33,7 +33,7 @@ const Confirm = ({rowId, mutate}) => {
<Dialog fullWidth open={openConfirmDialog} <Dialog fullWidth open={openConfirmDialog}
PaperProps={{sx: {transition: 'all .3s', boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}} maxWidth={dialogSize}> PaperProps={{sx: {transition: 'all .3s', boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}} maxWidth={dialogSize}>
<DialogTitle>{t("TransportationAssistance.confirm")}</DialogTitle> <DialogTitle>{t("TransportationAssistance.confirm")}</DialogTitle>
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog} setDialogSize={setDialogSize} handleSizeChangeClick={handleSizeChangeClick}/> <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog} handleSizeChangeClick={handleSizeChangeClick}/>
</Dialog> </Dialog>
</> </>
) )

4
src/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent.jsx → src/core/components/ImageContent.jsx
View File

@@ -20,9 +20,9 @@ const ImageContent = (prop) => {
</Box> </Box>
)} )}
{isPDF ? ( {isPDF ? (
<embed src={prop.imageLink.attachment} type="application/pdf" width="100%" height="700px" style={{ display: prop.isSkeleton ? 'none' : 'block' }}/> <embed src={prop.imageLink.attachment} type="application/pdf" width="100%" height="700px" style={{ display: prop.isSkeleton ? 'none' : 'block' }}/>
) : ( ) : (
prop.imageLink && prop.imageLink.attachment && ( prop.imageLink && prop.imageLink.attachment && (
<Box sx={{display: prop.isSkeleton ? 'none' : 'flex' ,justifyContent:'center' , border: '1px solid #ccc' , p:5 , height: '700px' , borderRadius: '8px',}}> <Box sx={{display: prop.isSkeleton ? 'none' : 'flex' ,justifyContent:'center' , border: '1px solid #ccc' , p:5 , height: '700px' , borderRadius: '8px',}}>
<Box component="img" src={prop.imageLink.attachment} alt="Image Preview" width="auto" height="auto" sx={{maxHeight: '700px' , maxWidth:'100%'}}></Box> <Box component="img" src={prop.imageLink.attachment} alt="Image Preview" width="auto" height="auto" sx={{maxHeight: '700px' , maxWidth:'100%'}}></Box>
</Box> </Box>

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

@@ -37,6 +37,9 @@ export const REJECT_PASSENGER_BOSS =
BASE_URL + "/dashboard/province_working_group/reject"; BASE_URL + "/dashboard/province_working_group/reject";
export const EXPORT_PASSENGER_BOSS = export const EXPORT_PASSENGER_BOSS =
BASE_URL + "/dashboard/province_working_group/export"; BASE_URL + "/dashboard/province_working_group/export";
export const EXPORT_PASSENGER_BOSS_DETAILS =
BASE_URL + "/dashboard/province_working_group";
//passenger boss //passenger boss
//transportation assistance //transportation assistance