working on actions page

2025-01-05 12:51:53 +03:30
parent bc3db055b1
commit 499bc21de9
6 changed files with 187 additions and 37 deletions
--- a/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/ActionInfo.jsx
+++ b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/ActionInfo.jsx
@@ -1,6 +1,6 @@
 "use client";

-import React from "react";
+import React, {useState} from "react";
 import dynamic from "next/dynamic";
 import MapLoading from "@/core/components/MapLayer/Loading";
 import {
@@ -10,60 +10,146 @@ import {
    CardContent,
    CardHeader,
    Chip,
+    Collapse,
    Divider,
    IconButton,
    Stack,
    Typography
 } from "@mui/material";
+import {styled} from '@mui/material/styles';
 import HandymanIcon from '@mui/icons-material/Handyman';
 import DeleteIcon from "@mui/icons-material/Delete";
-import EditIcon from "@mui/icons-material/Edit";
 import moment from "jalali-moment";
-import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import WatchLaterIcon from '@mui/icons-material/WatchLater';
+import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
+import DirectionsCarIcon from '@mui/icons-material/DirectionsCar';
+import PersonIcon from '@mui/icons-material/Person';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import DesignServicesIcon from '@mui/icons-material/DesignServices';
+import EditActionDuringPatrol from "./EditActionDuringPatrol";

 const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
    loading: () => <MapLoading/>,
    ssr: false,
 });

-const ActionInfo = ({action, deleteAction}) => {
-    console.log("action", action)
+const ActionInfo = ({action, index, deleteAction}) => {
+    const [expanded, setExpanded] = useState(false);
+
+    const handleExpandClick = () => {
+        setExpanded(!expanded);
+    };
+
+    const ExpandMore = styled((props) => {
+        const {expand, ...other} = props;
+        return <IconButton {...other} />;
+    })(({theme}) => ({
+        marginLeft: 'auto',
+        transition: theme.transitions.create('transform', {
+            duration: theme.transitions.duration.shortest,
+        }),
+        variants: [
+            {
+                props: ({expand}) => !expand,
+                style: {
+                    transform: 'rotate(0deg)',
+                },
+            },
+            {
+                props: ({expand}) => !!expand,
+                style: {
+                    transform: 'rotate(180deg)',
+                },
+            },
+        ],
+    }));
+
+
    return (
        <Card sx={{maxWidth: 300}}>
            <CardHeader
                avatar={
                    <HandymanIcon color="primary" sx={{width: "30px", height: "30px"}}/>
                }
-                title={"متن تست"}
-                subheader={"ساب آیتم تست"}
+                title={<Typography sx={{fontSize: "14px", fontWeight: 500}}>{action.data.item_name}</Typography>}
+                subheader={action.data.sub_item_name}
            />
            <CardContent>
-                <Stack sx={{gap: 2}}>
-                    <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
-                        <Chip size="small" label="تاریخ" icon={<CalendarMonthIcon/>}/>
-                        <Divider sx={{flex: 1, mx: 2}}/>
-                        <Typography sx={{fontSize: "12px", fontWeight: 500, textDecoration: "underline"}}>
-                            {moment(action.start_date).locale("fa").format("YYYY/MM/DD")}
+                <Stack sx={{gap: 1}}>
+                    <Box sx={{display: "flex", alignItems: "center", gap: 1}}>
+                        <CalendarMonthIcon/>
+                        <Typography variant="button">
+                            تاریخ:
+                        </Typography>
+                        <Typography variant="button">
+                            {moment(action.data.activity_date).locale("fa").format("YYYY/MM/DD")}
                        </Typography>
                    </Box>
-                    <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
-                        <Chip size="small" label="ساعت" icon={<WatchLaterIcon/>}/>
-                        <Divider sx={{flex: 1, mx: 2}}/>
-                        <Typography sx={{fontSize: "12px", fontWeight: 500, textDecoration: "underline"}}>
-                            {action.action_date}
+                    <Box sx={{display: "flex", alignItems: "center", gap: 1}}>
+                        <WatchLaterIcon/>
+                        <Typography variant="button">
+                            ساعت:
+                        </Typography>
+                        <Typography variant="button">
+                            {action.data.activity_time}
+                        </Typography>
+                    </Box>
+                    <Box sx={{display: "flex", alignItems: "center", gap: 1}}>
+                        <DesignServicesIcon/>
+                        <Typography variant="button">
+                            میزان فعالیت انجام شده:
+                        </Typography>
+                        <Typography variant="button">
+                            {action.data.amount}
+                            {/*({action.data.unit_fa})*/}
                        </Typography>
                    </Box>
                </Stack>
            </CardContent>
            <CardActions disableSpacing>
-                <IconButton aria-label="حذف فعالیت" color="error">
-                    <DeleteIcon/>
-                </IconButton>
-                <IconButton aria-label="ویرایش فعالیت" color="primary">
-                    <EditIcon/>
-                </IconButton>
+                <Box>
+                    <IconButton aria-label="حذف فعالیت" color="error" onClick={deleteAction}>
+                        <DeleteIcon/>
+                    </IconButton>
+                    <EditActionDuringPatrol action={action}/>
+                </Box>
+                <ExpandMore
+                    expand={expanded}
+                    onClick={handleExpandClick}
+                    aria-expanded={expanded}
+                    aria-label="show more"
+                >
+                    <ExpandMoreIcon/>
+                </ExpandMore>
            </CardActions>
+            <Collapse in={expanded} timeout="auto" unmountOnExit sx={{p: 2}}>
+                <Stack sx={{gap: 1}}>
+                    <Box>
+                        <Divider sx={{mb: 1}}>
+                            <Chip size="small" label="خودرو ها" icon={<DirectionsCarIcon/>}/>
+                        </Divider>
+                        <Stack>
+                            {action.data.cmms_machines.map((cmms_machine, index) => (
+                                <Typography variant="button" key={index}>
+                                    {index + 1}: {cmms_machine.car_name}
+                                </Typography>
+                            ))}
+                        </Stack>
+                    </Box>
+                    <Box>
+                        <Divider sx={{mb: 1}}>
+                            <Chip size="small" label="راهداران" icon={<PersonIcon/>}/>
+                        </Divider>
+                        <Stack>
+                            {action.data.rahdaran_id.map((rahdar, index) => (
+                                <Typography variant="button" key={index}>
+                                    {index + 1}: {rahdar.name}
+                                </Typography>
+                            ))}
+                        </Stack>
+                    </Box>
+                </Stack>
+            </Collapse>
        </Card>
    );
 };
--- a/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/ActionsDurigPatrol.jsx
+++ b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/ActionsDurigPatrol.jsx
@@ -5,6 +5,7 @@ import AddCircleIcon from '@mui/icons-material/AddCircle';
 import React, {useState} from "react";
 import ModalActionsDuringPatrol from "./ModalActionsDuringPatrol";
 import ActionInfo from "./ActionInfo";
+import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";

 const ActionsDuringPatrol = ({tabState, setTabState}) => {
    const [ActionsList, setActionsList] = useState([]);
@@ -39,6 +40,7 @@ const ActionsDuringPatrol = ({tabState, setTabState}) => {
                        <Grid key={index} item xs={12} sm={6} lg={4}>
                            <ActionInfo
                                action={action}
+                                index={index}
                                deleteAction={() => deleteAction(index)}
                            />
                        </Grid>
@@ -51,6 +53,14 @@ const ActionsDuringPatrol = ({tabState, setTabState}) => {
                    </Typography>
                </Box>
            }
+            <Box>
+                <Box sx={{display: "flex", gap: 1, justifyContent: "center"}}>
+                    <Button variant="contained" color="primary" onClick={() => setTabState(tabState + 1)}
+                            endIcon={<KeyboardDoubleArrowLeftIcon/>} sx={{mt: 2}}>
+                        نهایی کردن درخواست
+                    </Button>
+                </Box>
+            </Box>
        </Box>
    );
 };
--- a/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/EditActionDuringPatrol.jsx
+++ b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/EditActionDuringPatrol.jsx
@@ -0,0 +1,52 @@
+"use client";
+
+import React, {useState} from "react";
+import dynamic from "next/dynamic";
+import MapLoading from "@/core/components/MapLayer/Loading";
+import {Dialog, DialogTitle, IconButton} from "@mui/material";
+import EditIcon from "@mui/icons-material/Edit";
+import EditFormContent from "@/components/dashboard/roadItems/operator/RowActions/EditForm/EditFormContent";
+
+const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
+    loading: () => <MapLoading/>,
+    ssr: false,
+});
+
+const EditActionDuringPatrol = ({action}) => {
+
+    console.log("action", action)
+
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const HandleSubmit = async (data, result) => {
+        setActionsList((prev) => [...prev, data]);
+        setOpen(false);
+    }
+
+    return (
+        <>
+            <IconButton aria-label="ویرایش فعالیت" color="primary" onClick={handleOpen}>
+                <EditIcon/>
+            </IconButton>
+            <Dialog
+                maxWidth="sm"
+                fullWidth
+                open={open}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+            >
+                <DialogTitle>ویرایش اطلاعات</DialogTitle>
+                <EditFormContent setOpenEditDialog={setOpen} onSubmit={HandleSubmit} defaultData={action.data}/>
+            </Dialog>
+        </>
+    );
+};
+
+export default EditActionDuringPatrol;
--- a/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolDetailInfo.jsx
+++ b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolDetailInfo.jsx
@@ -10,6 +10,7 @@ import WatchLaterIcon from '@mui/icons-material/WatchLater';
 import QueryBuilderIcon from '@mui/icons-material/QueryBuilder';
 import AddRoadIcon from '@mui/icons-material/AddRoad';
 import ShareLocationIcon from '@mui/icons-material/ShareLocation';
+import ElectricCarIcon from '@mui/icons-material/ElectricCar';
 import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";
 import QrCode2Icon from '@mui/icons-material/QrCode2';
 import moment from "jalali-moment";
@@ -36,65 +37,65 @@ const PatrolDetailInfo = ({patrolData, tabState, setTabState}) => {
                    }}>
                    <Stack sx={{minWidth: {xs: "100%", lg: "300px"}, gap: 2}}>
                        <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
-                            <Chip size="small" label="مدت زمان روشن بودن خودرو" icon={<DirectionsCarFilledIcon/>}/>
+                            <Chip size="small" label="مدت زمان روشن بودن خودرو" icon={<ElectricCarIcon/>}/>
                            <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                {Math.floor(patrolData.accOnDuration / 60)} دقیقه
                            </Typography>
                        </Box>
                        <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                            <Chip size="small" label="نام خودرو" icon={<DirectionsCarFilledIcon/>}/>
                            <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                {patrolData.roadPatrolMachinesId.car_name}
                            </Typography>
                        </Box>
                        <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                            <Chip size="small" label="کد خودرو" icon={<QrCode2Icon/>}/>
                            <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                {patrolData.roadPatrolMachinesId.machine_code}
                            </Typography>
                        </Box>
                        <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                            <Chip size="small" label="پلاک خودرو" icon={<DirectionsCarFilledIcon/>}/>
                            <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                {patrolData.roadPatrolMachinesId.plak_number}
                            </Typography>
                        </Box>
                        <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                            <Chip size="small" label="زمان شروع گشت" icon={<QueryBuilderIcon/>}/>
                            <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                {moment(patrolData.start_time).locale("fa").format("HH:mm | YYYY/MM/DD")}
                            </Typography>
                        </Box>
                        <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                            <Chip size="small" label="زمان پایان گشت" icon={<WatchLaterIcon/>}/>
                            <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                {moment(patrolData.end_time).locale("fa").format("HH:mm | YYYY/MM/DD")}
                            </Typography>
                        </Box>
                        <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                            <Chip size="small" label="مسافت" icon={<AddRoadIcon/>}/>
                            <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                {(patrolData.mileage / 1000).toFixed(1)} کیلومتر
                            </Typography>
                        </Box>
                        <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                            <Chip size="small" label="میزان مصرف سوخت" icon={<LocalGasStationIcon/>}/>
                            <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                {Math.round(patrolData.fuelConsumption * 10) / 10} لیتر
                            </Typography>
                        </Box>
                        <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                            <Chip size="small" label="تعداد توقف در مسیر" icon={<ShareLocationIcon/>}/>
                            <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                {patrolData.stopPoints.length} مورد
                            </Typography>
                        </Box>
--- a/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolForms.jsx
+++ b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolForms.jsx
@@ -55,7 +55,7 @@ const PatrolForms = ({mutate}) => {
    const requestServer = useRequest({notificationSuccess: true});
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-    const [tabState, setTabState] = useState(0);
+    const [tabState, setTabState] = useState(2);
    const [activeUpTo, setActiveUpTo] = useState(0);

    const handleChangeTab = (event, newValue) => {
--- a/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/SuperVisorsDetail.jsx
+++ b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/SuperVisorsDetail.jsx
@@ -44,10 +44,11 @@ const SuperVisorsDetail = ({control, watch, setValue, tabState, setTabState}) =>
                        <Controller
                            control={control}
                            render={({field, fieldState: {error}}) => {
+                                console.log("field.value", field.value)
                                return (
                                    <RahdarCode
-                                        rahdarsCode={field.value || []}
-                                        setRahdarsCode={(value) => field.onChange(value || [])}
+                                        rahdarsCode={field.value}
+                                        setRahdarsCode={(value) => field.onChange(value)}
                                        error={error}
                                        multiple={false}
                                    />