feat: role system

src/pages/Snapshot/SnapshotListPage/index.tsx

@@ -1,6 +1,6 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { ruRU } from "@mui/x-data-grid/locales";
-import { languageStore, snapshotStore } from "@shared";
+import { authStore, languageStore, snapshotStore } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { DatabaseBackup, Trash2 } from "lucide-react";
@@ -10,6 +10,9 @@ import { Box, CircularProgress } from "@mui/material";
 export const SnapshotListPage = observer(() => {
   const { snapshots, getSnapshots, deleteSnapshot, restoreSnapshot } =
     snapshotStore;
+  const canWriteDevices = authStore.canWrite("devices");
+  const canCreateSnapshot = authStore.hasRole("snapshot_create") && canWriteDevices;
+  const canManageSnapshots = authStore.canWrite("snapshot") && canWriteDevices;
 
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [rowId, setRowId] = useState<string | null>(null);
@@ -57,37 +60,33 @@ export const SnapshotListPage = observer(() => {
         return <div>{params.value ? params.value : "-"}</div>;
       },
     },
-    {
+    ...(canManageSnapshots ? [{
       field: "actions",
       headerName: "Действия",
       width: 300,
-      headerAlign: "center",
+      headerAlign: "center" as const,
       sortable: false,
-
-      renderCell: (params: GridRenderCellParams) => {
-        return (
-          <div className="flex h-full gap-7 justify-center items-center">
-            <button
-              onClick={() => {
-                setIsRestoreModalOpen(true);
-                setRowId(params.row.id);
-              }}
-            >
-              <DatabaseBackup size={20} className="text-blue-500" />
-            </button>
-
-            <button
-              onClick={() => {
-                setIsDeleteModalOpen(true);
-                setRowId(params.row.id);
-              }}
-            >
-              <Trash2 size={20} className="text-red-500" />
-            </button>
-          </div>
-        );
-      },
-    },
+      renderCell: (params: GridRenderCellParams) => (
+        <div className="flex h-full gap-7 justify-center items-center">
+          <button
+            onClick={() => {
+              setIsRestoreModalOpen(true);
+              setRowId(params.row.id);
+            }}
+          >
+            <DatabaseBackup size={20} className="text-blue-500" />
+          </button>
+          <button
+            onClick={() => {
+              setIsDeleteModalOpen(true);
+              setRowId(params.row.id);
+            }}
+          >
+            <Trash2 size={20} className="text-red-500" />
+          </button>
+        </div>
+      ),
+    }] : []),
   ];
 
   const rows = snapshots.map((snapshot) => ({
@@ -102,7 +101,9 @@ export const SnapshotListPage = observer(() => {
       <div style={{ width: "100%" }}>
         <div className="flex justify-between items-center mb-10">
           <h1 className="text-2xl ">Экспорт Медиа</h1>
-          <CreateButton label="Создать экспорт медиа" path="/snapshot/create" />
+          {canCreateSnapshot && (
+            <CreateButton label="Создать экспорт медиа" path="/snapshot/create" />
+          )}
         </div>
         <DataGrid
           rows={rows}