Feature/gasht cartables

2024-12-30 10:03:53 +00:00
parent d33d069c1e
commit 97e6c509f0
11 changed files with 157 additions and 101 deletions
--- a/src/components/dashboard/roadPatrols/operator/OperatorList.jsx
+++ b/src/components/dashboard/roadPatrols/operator/OperatorList.jsx
@@ -1,11 +1,12 @@
 "use client";
 import { useMemo } from "react";
-import { Box, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import Toolbar from "./Toolbar";
 import { GET_ROAD_PATROL_OPERATOR_LIST } from "@/core/utils/routes";
 import moment from "jalali-moment";
 import RowActions from "./RowActions";
+import ReportForm from "./RowActions/ReportForm";

 const OperatorList = () => {
    const columns = useMemo(
@@ -81,6 +82,29 @@ const OperatorList = () => {
                grow: false,
                size: 100,
            },
+            {
+                header: "گزارش مامور",
+                enableColumnFilter: false,
+                datatype: "text",
+                grow: false,
+                size: 100,
+                muiTableBodyCellProps: {
+                    sx: {
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue, row }) => {
+                    return (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
+                            <ReportForm rowId={row.getValue("id")} />
+                        </Stack>
+                    );
+                },
+            },
        ],
        []
    );
@@ -89,7 +113,6 @@ const OperatorList = () => {
        <>
            <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
                <DataTableWithAuth
-                    table_title={"عملیات"}
                    need_filter={true}
                    columns={columns}
                    sorting={[{ id: "id", desc: true }]}
--- a/src/components/dashboard/roadPatrols/operator/RowActions/ReportForm/index.jsx
+++ b/src/components/dashboard/roadPatrols/operator/RowActions/ReportForm/index.jsx
@@ -2,8 +2,7 @@ import { Tooltip, IconButton } from "@mui/material";
 import PrintIcon from "@mui/icons-material/Print";

 const ReportForm = ({ rowId }) => {
-    const reportUrl = "https://rms.rmto.ir/v2/road_patrols/operator/report/96872"; // TODO replace id here
-
+    const reportUrl = `https://rms.rmto.ir/v2/road_patrols/operator/report/${rowId}`;
    return (
        <Tooltip title="گزارش" arrow placement="right">
            <IconButton
--- a/src/components/dashboard/roadPatrols/operator/RowActions/index.jsx
+++ b/src/components/dashboard/roadPatrols/operator/RowActions/index.jsx
@@ -1,11 +1,6 @@
 import { Box } from "@mui/material";
-import ReportForm from "./ReportForm";

 const RowActions = ({ row }) => {
-    return (
-        <Box sx={{ display: "flex", gap: 1 }}>
-            <ReportForm rowId={row.getValue("id")} />
-        </Box>
-    );
+    return <Box sx={{ display: "flex", gap: 1 }}></Box>;
 };
 export default RowActions;
--- a/src/components/dashboard/roadPatrols/supervisor/RowActions/DeleteForm/DeleteContent.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/RowActions/DeleteForm/DeleteContent.jsx
@@ -1,9 +1,45 @@
 import { Button, DialogActions, DialogContent, Stack, Typography, List, ListItem } from "@mui/material";
 import useRequest from "@/lib/hooks/useRequest";
-import React from "react";
+import React, { useState } from "react";
+import { DELETE_ROAD_PATROL_SUPERVISOR } from "@/core/utils/routes";

 const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
-    const requestServer = useRequest();
+    const requestServer = useRequest({ notificationSuccess: true });
+    const [submittingPartial, setSubmittingPartial] = useState(false);
+    const [submittingGeneral, setSubmittingGeneral] = useState(false);
+    const handleGeneralDelete = () => {
+        setSubmittingGeneral(true);
+        requestServer(`${DELETE_ROAD_PATROL_SUPERVISOR}/${rowId}`, "post", {
+            data: {
+                type: 2,
+            },
+        })
+            .then(() => {
+                mutate();
+                setOpenDeleteDialog(false);
+                setSubmittingGeneral(false);
+            })
+            .catch(() => {
+                setSubmittingGeneral(false);
+            });
+    };
+
+    const handlePartialDelete = () => {
+        setSubmittingPartial(true);
+        requestServer(`${DELETE_ROAD_PATROL_SUPERVISOR}/${rowId}`, "post", {
+            data: {
+                type: 1,
+            },
+        })
+            .then(() => {
+                mutate();
+                setOpenDeleteDialog(false);
+                setSubmittingPartial(false);
+            })
+            .catch(() => {
+                setSubmittingPartial(false);
+            });
+    };

    return (
        <>
@@ -42,23 +78,11 @@ const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
                <Button onClick={() => setOpenDeleteDialog(false)} variant="outlined" color="primary">
                    بستن
                </Button>
-                <Button
-                    onClick={() => {
-                        /* handle partial delete */
-                    }}
-                    variant="outlined"
-                    color="warning"
-                >
-                    حذف جزئی
+                <Button onClick={handlePartialDelete} variant="outlined" color="warning" disabled={submittingPartial}>
+                    {submittingPartial ? "درحال ارسال اطلاعات..." : "حذف جزئی"}
                </Button>
-                <Button
-                    onClick={() => {
-                        /* handle complete delete */
-                    }}
-                    variant="contained"
-                    color="error"
-                >
-                    حذف کلی
+                <Button onClick={handleGeneralDelete} variant="contained" color="error" disabled={submittingGeneral}>
+                    {submittingGeneral ? "درحال ارسال اطلاعات..." : "حذف کلی"}
                </Button>
            </DialogActions>
        </>
--- a/src/components/dashboard/roadPatrols/supervisor/RowActions/OfficerDescription/index.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/RowActions/OfficerDescription/index.jsx
@@ -1,26 +1,10 @@
 import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip, Typography, Card, CardContent } from "@mui/material";
 import { useState } from "react";
-import useRequest from "@/lib/hooks/useRequest";
 import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
 import CloseIcon from "@mui/icons-material/Close";

-const OfficerDescriptionForm = ({ row }) => {
+const OfficerDescriptionForm = ({ description }) => {
    const [openOfficerDescriptionDialog, setOpenOfficerDescriptionDialog] = useState(false);
-    const requestServer = useRequest();
-
-    const handleSubmit = () => {
-        // requestServer(`${RESERVE_PASSENGER_BOSS}/${rowId}`, "post", { description })
-        //     .then((response) => {
-        //         setOpenOfficerDescriptionDialog(false);
-        //         mutate();
-        //     })
-        //     .catch((error) => {
-        //         console.error(error);
-        //     })
-        //     .finally(() => {
-        //         setIsSubmitting(false);
-        //     });
-    };

    return (
        <>
@@ -55,18 +39,7 @@ const OfficerDescriptionForm = ({ row }) => {
                <DialogContent>
                    <Card sx={{ padding: 2, boxShadow: 3, borderRadius: 2 }}>
                        <CardContent>
-                            <Typography
-                                gutterBottom
-                                variant="body1"
-                                component="div"
-                                sx={{ fontWeight: "bold", mb: 2, color: "primary.main" }}
-                            >
-                                توضیحات :
-                            </Typography>
-                            <Typography variant="body2">
-                                {row.original.description || "هیچ توضیحی موجود نیست"}{" "}
-                                {/* should replace row.original.description with the back end*/}
-                            </Typography>
+                            <Typography variant="body2">{description || "هیچ توضیحی موجود نیست"} </Typography>
                        </CardContent>
                    </Card>
                </DialogContent>
@@ -74,5 +47,4 @@ const OfficerDescriptionForm = ({ row }) => {
        </>
    );
 };
-
 export default OfficerDescriptionForm;
--- a/src/components/dashboard/roadPatrols/supervisor/RowActions/ReportForm/index.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/RowActions/ReportForm/index.jsx
@@ -2,8 +2,7 @@ import { Tooltip, IconButton } from "@mui/material";
 import PrintIcon from "@mui/icons-material/Print";

 const ReportForm = ({ rowId }) => {
-    const reportUrl = "https://rms.rmto.ir/v2/road_patrols/operator/report/96872"; // TODO replace id here
-
+    const reportUrl = `https://rms.rmto.ir/v2/road_patrols/operator/report/${rowId}`;
    return (
        <Tooltip title="گزارش" arrow placement="right">
            <IconButton
--- a/src/components/dashboard/roadPatrols/supervisor/RowActions/index.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/RowActions/index.jsx
@@ -1,13 +1,9 @@
 import { Box } from "@mui/material";
-import ReportForm from "./ReportForm";
 import DeleteForm from "./DeleteForm";
-import OfficerDescriptionForm from "./OfficerDescription";

 const RowActions = ({ row, mutate }) => {
    return (
        <Box sx={{ display: "flex", gap: 1 }}>
-            <ReportForm rowId={row.getValue("id")} />
-            <OfficerDescriptionForm row={row} />
            <DeleteForm rowId={row.getValue("id")} mutate={mutate} />
        </Box>
    );
--- a/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx
@@ -1,15 +1,16 @@
 "use client";
 import { useMemo } from "react";
-import { Box, Typography } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import Toolbar from "./Toolbar";
 import { GET_ROAD_PATROL_SUPERVISOR_LIST } from "@/core/utils/routes";
 import moment from "jalali-moment";
 import RowActions from "./RowActions";
 import useProvinces from "@/lib/hooks/useProvince";
-import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
 import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
 import useEdaratLists from "@/lib/hooks/useEdaratLists";
+import OfficerDescriptionForm from "./RowActions/OfficerDescription";
+import ReportForm from "./RowActions/ReportForm";

 const OperatorList = () => {
    const columns = useMemo(
@@ -151,6 +152,54 @@ const OperatorList = () => {
                grow: false,
                size: 100,
            },
+            {
+                accessorKey: "description",
+                header: "توضیحات مامور",
+                id: "description",
+                enableColumnFilter: false,
+                datatype: "text",
+                grow: false,
+                size: 100,
+                muiTableBodyCellProps: {
+                    sx: {
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue }) => {
+                    return (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
+                            <OfficerDescriptionForm description={renderedCellValue} />
+                        </Stack>
+                    );
+                },
+            },
+            {
+                header: "گزارش مامور",
+                enableColumnFilter: false,
+                datatype: "text",
+                grow: false,
+                size: 100,
+                muiTableBodyCellProps: {
+                    sx: {
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue, row }) => {
+                    return (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
+                            <ReportForm rowId={row.getValue("id")} />
+                        </Stack>
+                    );
+                },
+            },
        ],
        []
    );
@@ -159,7 +208,6 @@ const OperatorList = () => {
        <>
            <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
                <DataTableWithAuth
-                    table_title={"ارزیابی"}
                    need_filter={true}
                    columns={columns}
                    sorting={[{ id: "id", desc: true }]}
--- a/src/core/components/MapInfoOneMarker.jsx
+++ b/src/core/components/MapInfoOneMarker.jsx
@@ -12,24 +12,19 @@ const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
    ssr: false,
 });

-const createCustomIcon = (size, iconUrl, labelText) => {
+const createCustomIcon = (size, iconUrl, labelText, color) => {
    if (labelText) {
        return L.divIcon({
+            className: "custom-marker", // Apply your custom CSS class
            html: `
-                <div style="position: relative; display: inline-block; text-align: center;">
-                    <img 
-                        src="${iconUrl}" 
-                        style="width: ${size[0]}px; height: ${size[1]}px;" 
-                        alt="icon"
-                    />
-                    <div style="position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); color: black; font-size: 12px;">
-                        ${labelText}
+                  <div style="position: relative; text-align: center; width: 50px;">
+                    <div style="background-color: ${color}; color: white; border-radius: 20px; padding: 5px;">
+                      <span style="font-family: 'IRANSansFaNum', sans-serif;">${labelText}</span>
                    </div>
-                </div>
-            `,
-            iconSize: size,
-            iconAnchor: [size[0] / 2, size[1]],
-            popupAnchor: [0, -size[1]],
+                    <div style="width: 5px; height: 20px; background: ${color}; margin: auto;border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;"></div>
+                  </div>`,
+            iconSize: [100, 50], // Adjust icon size to fit your content
+            iconAnchor: [50, 25], // Adjust to position the marker correctly
        });
    }

@@ -45,6 +40,7 @@ const MAX_ZOOM_FOR_MARKER = 13;
 const MapInteraction = ({ setValue, startLat, startLng }) => {
    const [isMarkerLocked, setIsMarkerLocked] = useState(!!(startLat && startLng)); // وضعیت قفل مارکر
    const [enableSend, setEnableSend] = useState(false);
+    const [startIconColor, setStartIconColor] = useState(startLat ? "#1CAC66" : "#003d4f"); // رنگ آیکن شروع
    const [markerPosition, setMarkerPosition] = useState(
        startLat && startLng ? { lat: startLat, lng: startLng } : null
    );
@@ -79,6 +75,7 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
            setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
            setMarkerPosition({ lat: center.lat, lng: center.lng }); // به‌روزرسانی موقعیت مارکر
            setIsMarkerLocked(true);
+            setStartIconColor("#1CAC66");
        }
    };

@@ -86,6 +83,7 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
        setValue("start_point", null); // حذف مقدار قبلی
        setIsMarkerLocked(false); // باز کردن قفل مارکر
        setMarkerPosition(null); // تنظیم مارکر به مرکز نقشه
+        setStartIconColor("#003d4f");
    };

    return (
@@ -93,7 +91,7 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
            <Marker
                position={markerPosition || map.getCenter()} // استفاده از موقعیت
                ref={markerRef}
-                icon={createCustomIcon([35, 35], HereIcon.src, "اینجا")}
+                icon={createCustomIcon([35, 35], HereIcon.src, "اینجا", startIconColor)}
                eventHandlers={{
                    click: handleMarkerClick,
                }}
--- a/src/core/components/MapInfoTwoMarker.jsx
+++ b/src/core/components/MapInfoTwoMarker.jsx
@@ -12,27 +12,21 @@ const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
    loading: () => <MapLoading />,
    ssr: false,
 });
-const createCustomIcon = (size, iconUrl, labelText) => {
+const createCustomIcon = (size, iconUrl, labelText, color) => {
    if (labelText) {
        return L.divIcon({
+            className: "custom-marker", // Apply your custom CSS class
            html: `
-                <div style="position: relative; display: inline-block; text-align: center;">
-                    <img 
-                        src="${iconUrl}" 
-                        style="width: ${size[0]}px; height: ${size[1]}px;" 
-                        alt="icon"
-                    />
-                    <div style="position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); color: black; font-size: 12px;">
-                        ${labelText}
+                  <div style="position: relative; text-align: center; width: 50px;">
+                    <div style="background-color: ${color}; color: white; border-radius: 20px; padding: 5px;">
+                      <span style="font-family: 'IRANSansFaNum', sans-serif;">${labelText}</span>
                    </div>
-                </div>
-            `,
-            iconSize: size,
-            iconAnchor: [size[0] / 2, size[1]],
-            popupAnchor: [0, -size[1]],
+                    <div style="width: 5px; height: 20px; background: ${color}; margin: auto;border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;"></div>
+                  </div>`,
+            iconSize: [100, 50], // Adjust icon size to fit your content
+            iconAnchor: [50, 25], // Adjust to position the marker correctly
        });
    }
-
    return L.icon({
        iconUrl: iconUrl,
        iconSize: size,
@@ -48,6 +42,8 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
    const [startPosition, setStartPosition] = useState(startLat && startLng ? { lat: startLat, lng: startLng } : null);
    const [endPosition, setEndPosition] = useState(endLat && endLng ? { lat: endLat, lng: endLng } : null);
    const [enableSend, setEnableSend] = useState(false);
+    const [startIconColor, setStartIconColor] = useState(startLat ? "#1CAC66" : "#003d4f"); // رنگ آیکن شروع
+    const [endIconColor, setEndIconColor] = useState(endLat ? "#D13131" : "#003d4f"); // رنگ آیکن پایان
    const startRef = useRef();
    const endRef = useRef();

@@ -86,6 +82,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
        setIsStartLocked(false);
        setStartPosition(null);
        setValue("start_point", null);
+        setStartIconColor("#003d4f");
    };

    const handleUnlockEnd = () => {
@@ -95,6 +92,8 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
        setStartPosition(null);
        setValue("end_point", "");
        setValue("start_point", null);
+        setStartIconColor("#003d4f");
+        setEndIconColor("#003d4f");
    };

    return (
@@ -102,7 +101,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
            <Marker
                position={startPosition || map.getCenter()}
                ref={startRef}
-                icon={createCustomIcon([35, 35], StartIcon.src, "نقطه شروع")}
+                icon={createCustomIcon([35, 35], StartIcon.src, "شروع", startIconColor)}
                eventHandlers={{
                    click: () => {
                        if (!enableSend) return;
@@ -111,6 +110,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
                            setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
                            setStartPosition({ lat: center.lat, lng: center.lng });
                            setIsStartLocked(true);
+                            setStartIconColor("#1CAC66");
                        }
                    },
                }}
@@ -172,7 +172,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
                    <Marker
                        position={endPosition || map.getCenter()}
                        ref={endRef}
-                        icon={createCustomIcon([35, 35], EndIcon.src, "نقطه پایان")}
+                        icon={createCustomIcon([35, 35], EndIcon.src, "پایان", endIconColor)}
                        eventHandlers={{
                            click: () => {
                                if (!enableSend) return;
@@ -181,6 +181,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
                                    setValue("end_point", { lat: center.lat.toString(), lng: center.lng.toString() });
                                    setEndPosition({ lat: center.lat, lng: center.lng });
                                    setIsEndLocked(true);
+                                    setEndIconColor("#D13131");
                                }
                            },
                        }}
--- a/src/core/utils/routes.js
+++ b/src/core/utils/routes.js
@@ -30,9 +30,10 @@ export const UPDATE_AZMAYESH_TYPE = api + "/api/v3/azmayesh_types/update";

 //road patrol
 export const GET_ROAD_PATROL_OPERATOR_LIST = api + "/api/v3/road_patrols/operator_index";
-export const EXPORT_ROAD_PATROL_OPERATOR_LIST = "https://rms.rmto.ir/v2/road_patrols/operator/cartable/report";
+export const EXPORT_ROAD_PATROL_OPERATOR_LIST = "https://rms.witel.ir/v2/road_patrols/operator/cartable/report";
 export const GET_ROAD_PATROL_SUPERVISOR_LIST = api + "/api/v3/road_patrols/supervisor_index";
-export const EXPORT_ROAD_PATROL_SUPERVISOR_LIST = "https://rms.rmto.ir/v2/road_patrols/supervisor/cartable/report";
+export const EXPORT_ROAD_PATROL_SUPERVISOR_LIST = "https://rms.witel.ir/v2/road_patrols/supervisor/cartable/report";
+export const DELETE_ROAD_PATROL_SUPERVISOR = api + "/api/v3/road_patrols/delete";

 // road items
 export const GET_ROAD_ITEMS_SUPERVISOR_LIST = api + "/api/v3/road_items/supervisor_index";