133 lines
3.3 KiB
React
133 lines
3.3 KiB
React
import {Box, Card, CardContent, Chip, Grid, IconButton, LinearProgress, Tooltip, Typography} from "@mui/material";
|
|
import EmailIcon from '@mui/icons-material/Email';
|
|
import LocalPhoneIcon from '@mui/icons-material/LocalPhone';
|
|
import ReceiptIcon from '@mui/icons-material/Receipt';
|
|
import DoneAllIcon from '@mui/icons-material/DoneAll';
|
|
import Divider from '@mui/material/Divider';
|
|
import {useState} from "react";
|
|
import {useUpdateReportTodo} from "../../hooks/useReportTodo.jsx";
|
|
|
|
const icons = {
|
|
SENT_EMAIL: <EmailIcon />,
|
|
MAKE_PHONE_CALL: <LocalPhoneIcon />,
|
|
INVOICE_SEND: <ReceiptIcon />,
|
|
COMPLETE: <DoneAllIcon />
|
|
};
|
|
const MyButton = function (prop) {
|
|
const { name, isActive, clickTodos } = prop;
|
|
return (
|
|
<IconButton
|
|
onClick={()=>clickTodos(name)}
|
|
color={isActive(name) ? "success" : "default"}
|
|
>
|
|
{icons[name]}
|
|
</IconButton>
|
|
);
|
|
}
|
|
function LinearProgressWithLabel(props) {
|
|
return (
|
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
|
<Box sx={{ width: '100%', mr: 1 }}>
|
|
<LinearProgress
|
|
variant="determinate"
|
|
aria-label="Upload photos"
|
|
{...props}
|
|
/>
|
|
</Box>
|
|
<Box sx={{ minWidth: 35 }}>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{ color: 'text.secondary' }}
|
|
>{`${Math.round(props.value)}%`}</Typography>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
function Item(prop) {
|
|
const { row, rowid } = prop;
|
|
const [active,setActive] = useState();
|
|
const updateTodo = useUpdateReportTodo(6, rowid);
|
|
|
|
const isActive = (item) => {
|
|
if (typeof active === "undefined" && row.reportsTodos.length > 0) {
|
|
for (let repoElement of row.reportsTodos) {
|
|
if (repoElement['nameString'] === item){
|
|
if (!repoElement.deleted) {
|
|
setActive((prev) => ({
|
|
...prev,
|
|
[item]: true
|
|
}))
|
|
}
|
|
return !repoElement.deleted;
|
|
}
|
|
}
|
|
}
|
|
return typeof active !== "undefined" && typeof active[item] !== "undefined" && active[item];
|
|
}
|
|
const takeTodoRow = (item) => {
|
|
let ret = null;
|
|
if (row.reportsTodos.length > 0) {
|
|
for (let repoElement of row.reportsTodos) {
|
|
if (repoElement['nameString'] === item){
|
|
ret = repoElement;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return ret;
|
|
}
|
|
const clickTodos = async (item) => {
|
|
const val = !isActive(item) ? item : !item;
|
|
const todoObj = takeTodoRow(item);
|
|
const todoId = (todoObj === null) ? 0 : todoObj.id;
|
|
await updateTodo.mutateAsync({
|
|
reportId: row.id,
|
|
todoName: item,
|
|
todoId: todoId
|
|
});
|
|
setActive((prev) => ({
|
|
...prev,
|
|
[item]: val,
|
|
}));
|
|
};
|
|
const countProgress = () => {
|
|
let count = 0;
|
|
Object.entries(icons).map(([name]) => {
|
|
if (isActive(name)){
|
|
count++;
|
|
}
|
|
})
|
|
|
|
return count / 4 * 100;
|
|
}
|
|
|
|
return (
|
|
<Card variant="outlined" sx={{position:"relative"}}>
|
|
<Tooltip title="Numer sprawozdania">
|
|
<Chip label={row.number} color="primary" sx={{
|
|
position: "absolute",
|
|
right:0
|
|
}}/>
|
|
</Tooltip>
|
|
<CardContent>
|
|
<Typography variant="h6" component="div">
|
|
{row.client.strName}
|
|
</Typography>
|
|
<Divider/>
|
|
|
|
<Grid container spacing={1}>
|
|
{Object.entries(icons).map(([name]) => (
|
|
<Grid size="3" key={name}>
|
|
<MyButton name={name} isActive={isActive} clickTodos={clickTodos}/>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
|
|
<Divider />
|
|
<LinearProgressWithLabel value={countProgress()} />
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default Item; |