LFFE-29 table content structured

This commit is contained in:
2023-11-21 10:59:51 +03:30
parent b154160a37
commit d8eb780a32
2 changed files with 214 additions and 168 deletions

View File

@@ -1,181 +1,17 @@
import {
Button,
CircularProgress,
DialogActions,
DialogContent,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow
} from "@mui/material"
import {Button, DialogActions, DialogContent,} from "@mui/material"
import {useTranslations} from "next-intl";
import {useFormik} from "formik";
import {EXPORT_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
import moment from "jalali-moment";
import DescriptionIcon from "@mui/icons-material/Description";
import {useState} from "react";
import TableContent from "@/components/dashboard/loan-history/Form/HistoryForm/TableContent";
const fakeData = [
{
date: "1401/08/28",
name: "امین قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "امیر قاسم پور",
place: "اداره راه و شهرسازی مشهد",
toDo: "ارجاع به معاونت حمل و نقل"
},
{
date: "1401/08/28",
name: "محمد جلالی",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "احمد قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "اکبر قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "اصغر قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "نیما قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
]
const HistoryContent = ({mutate, setOpenConfirmDialog, rowId}) => {
const t = useTranslations();
const [loading, setLoading] = useState(false)
const clickHandler = () => {
setLoading(true)
requestServer(`${EXPORT_MACHINARY_OFFICE}?${filterParams}`, 'get', {
auth: true,
notification: false,
requestOptions: {responseType: 'blob'}
}).then((response) => {
const filename = `گزارش ماشین آلات تاریخ_${moment().format('jYYYY_jMM_jDD')}.xlsx`;
FileSaver.saveAs(response.data, filename);
}).catch(() => {
}).finally(() => {
setLoading(false)
})
}
const formik = useFormik({});
return (
<>
<DialogContent>
<TableContainer component={Paper}>
<Table sx={{minWidth: 650}}>
<TableHead>
<TableRow>
<TableCell align={'center'}>نام</TableCell>
<TableCell align={'center'}>تاریخ</TableCell>
<TableCell align={'center'}>سازمان</TableCell>
<TableCell align={'center'}>وضعیت</TableCell>
<TableCell align={'center'}>فایل ضمیمه</TableCell>
</TableRow>
</TableHead>
<TableBody>
{fakeData.map((singleData) => (
<TableRow
key={singleData.name}
sx={{
'&:last-child td, &:last-child th': {border: 0}
}}
>
<TableCell align={'center'} component="th" scope="row">
{singleData.name}
</TableCell>
<TableCell align={'center'}>{singleData.date}</TableCell>
<TableCell align={'center'}>{singleData.place}</TableCell>
<TableCell align={'center'}>{singleData.toDo}</TableCell>
<TableCell align={'center'}>
<Button
color="primary"
variant="contained"
size="small"
disabled={loading}
sx={{textTransform: "unset", alignSelf: "center"}}
startIcon={loading ? <CircularProgress size={18} color="inherit"/> :
<DescriptionIcon/>}
onClick={clickHandler}
>
{t("MachinaryOffice.excel_report")}
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<TableContent/>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"

View File

@@ -0,0 +1,210 @@
import {
Button,
CircularProgress,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow
} from "@mui/material";
import DescriptionIcon from "@mui/icons-material/Description";
import {useState} from "react";
import {useTranslations} from "next-intl";
const fakeData = [
{
date: "1401/08/28",
name: "امین قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "امیر قاسم پور",
place: "اداره راه و شهرسازی مشهد",
toDo: "ارجاع به معاونت حمل و نقل"
},
{
date: "1401/08/28",
name: "محمد جلالی",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "احمد قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "اکبر قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "اصغر قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "نیما قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
{
date: "1401/08/28",
name: "مهدی قاسم پور",
place: "اداره راه و شهرسازی تهران",
toDo: "ارجاع به کارشناس"
},
]
const TableContent = () => {
const t = useTranslations();
const [loading, setLoading] = useState(false)
const clickHandler = () => {
}
return (
<Paper sx={{
width: '100%', overflow: 'hidden',
'*::-webkit-scrollbar': {
width: '0.5em'
},
'*::-webkit-scrollbar-thumb': {
backgroundColor: 'primary.main',
}
}}>
<TableContainer sx={{maxHeight: 600}}>
<Table stickyHeader sx={{minWidth: 650}}>
<TableHead>
<TableRow>
<TableCell>نام</TableCell>
<TableCell>تاریخ</TableCell>
<TableCell>سمت</TableCell>
<TableCell>عملیات</TableCell>
<TableCell>فایل پیوست</TableCell>
</TableRow>
</TableHead>
<TableBody>
{fakeData.map((singleData, index) => {
return (
<TableRow
key={index}
sx={{
'&:last-child td, &:last-child th': {border: 0}
}}
>
<TableCell component="th" scope="row">
{singleData.name}
</TableCell>
<TableCell>{singleData.date}</TableCell>
<TableCell>{singleData.place}</TableCell>
<TableCell>{singleData.toDo}</TableCell>
<TableCell>
<Button
color="primary"
variant="contained"
size="small"
disabled={loading}
sx={{textTransform: "unset", alignSelf: "center"}}
startIcon={loading ? <CircularProgress size={18} color="inherit"/> :
<DescriptionIcon/>}
onClick={clickHandler}
>
{t("MachinaryOffice.excel_report")}
</Button>
</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</TableContainer>
</Paper>
)
}
export default TableContent