feat: add deleting vehicles in device page

.env

@@ -1,4 +1,4 @@
-VITE_API_URL='https://content.wn.polygon.unprism.ru'
-VITE_REACT_APP ='https://content.wn.polygon.unprism.ru'
-VITE_KRBL_MEDIA='https://content.wn.polygon.unprism.ru//media/'
-VITE_NEED_AUTH='false'
+VITE_API_URL='https://wn.krbl.ru'
+VITE_REACT_APP ='https://wn.krbl.ru'
+VITE_KRBL_MEDIA='https://wn.krbl.ru/media/'
+VITE_NEED_AUTH='true'

src/widgets/DevicesTable/index.tsx

@@ -5,7 +5,7 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
-import { Check, Copy, RotateCcw, X } from "lucide-react";
+import { Check, Copy, RotateCcw, Trash2, X } from "lucide-react";
 import {
   authInstance,
   devicesStore,
@@ -19,6 +19,7 @@ import { Button, Checkbox, Typography } from "@mui/material";
 import { Vehicle } from "@shared";
 import { toast } from "react-toastify";
 import { useNavigate } from "react-router-dom";
+import { DeleteModal } from "@widgets";
 
 export type ConnectedDevice = string;
 
@@ -108,10 +109,11 @@ export const DevicesTable = observer(() => {
   } = devicesStore;
 
   const { snapshots, getSnapshots } = snapshotStore;
-  const { getVehicles, vehicles } = vehicleStore;
+  const { getVehicles, vehicles, deleteVehicle } = vehicleStore;
   const { devices } = devicesStore;
   const navigate = useNavigate();
   const [selectedDeviceUuids, setSelectedDeviceUuids] = useState<string[]>([]);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
   const currentTableRows = transformDevicesToRows(vehicles.data as Vehicle[]);
 
@@ -200,6 +202,30 @@ export const DevicesTable = observer(() => {
     }
   };
 
+  const getVehicleIdsByUuids = (uuids: string[]): number[] => {
+    return vehicles.data
+      .filter((vehicle) => uuids.includes(vehicle.vehicle.uuid ?? ""))
+      .map((vehicle) => vehicle.vehicle.id);
+  };
+
+  const handleDeleteVehicles = async () => {
+    if (selectedDeviceUuids.length === 0) return;
+
+    const vehicleIds = getVehicleIdsByUuids(selectedDeviceUuids);
+
+    try {
+      await Promise.all(vehicleIds.map((id) => deleteVehicle(id)));
+      await getVehicles();
+      await getDevices();
+      setSelectedDeviceUuids([]);
+      setIsDeleteModalOpen(false);
+      toast.success(`Удалено устройств: ${vehicleIds.length}`);
+    } catch (error) {
+      console.error("Error deleting vehicles:", error);
+      toast.error("Ошибка при удалении устройств");
+    }
+  };
+
   return (
     <>
       <TableContainer component={Paper} sx={{ mt: 2 }}>
@@ -213,7 +239,7 @@ export const DevicesTable = observer(() => {
             Добавить устройство
           </Button>
         </div>
-        <div className="flex justify-end p-3 gap-2">
+        <div className="flex justify-end p-3 gap-2 items-center">
           <Button
             variant="outlined"
             onClick={handleSelectAllDevices}
@@ -221,6 +247,17 @@ export const DevicesTable = observer(() => {
           >
             {isAllSelected ? "Снять выбор" : "Выбрать все"}
           </Button>
+          {selectedDeviceUuids.length > 0 && (
+            <Button
+              variant="contained"
+              color="error"
+              onClick={() => setIsDeleteModalOpen(true)}
+              size="small"
+              startIcon={<Trash2 size={16} />}
+            >
+              Удалить ({selectedDeviceUuids.length})
+            </Button>
+          )}
           <Button
             variant="contained"
             color="primary"
@@ -451,6 +488,12 @@ export const DevicesTable = observer(() => {
           Отмена
         </Button>
       </Modal>
+
+      <DeleteModal
+        open={isDeleteModalOpen}
+        onDelete={handleDeleteVehicles}
+        onCancel={() => setIsDeleteModalOpen(false)}
+      />
     </>
   );
 });