feat: role system

src/pages/City/CityListPage/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, cityStore, countryStore } from "@shared";
+import { authStore, languageStore, cityStore, countryStore } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Pencil, Trash2, Minus } from "lucide-react";
@@ -23,6 +23,7 @@ export const CityListPage = observer(() => {
     pageSize: 50,
   });
   const { language } = languageStore;
+  const canWriteCities = authStore.canWrite("cities");
 
   useEffect(() => {
     const fetchData = async () => {
@@ -91,35 +92,30 @@ export const CityListPage = observer(() => {
         );
       },
     },
-    {
+    ...(authStore.canWrite("cities") ? [{
       field: "actions",
       headerName: "Действия",
-      align: "center",
-      headerAlign: "center",
+      align: "center" as const,
+      headerAlign: "center" as const,
       width: 200,
       sortable: false,
-      renderCell: (params: GridRenderCellParams) => {
-        return (
-          <div className="flex h-full gap-7 justify-center items-center">
-            <button onClick={() => navigate(`/city/${params.row.id}/edit`)}>
-              <Pencil size={20} className="text-blue-500" />
-            </button>
-            {/* <button onClick={() => navigate(`/city/${params.row.id}`)}>
-              <Eye size={20} className="text-green-500" />
-            </button> */}
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                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={() => navigate(`/city/${params.row.id}/edit`)}>
+            <Pencil size={20} className="text-blue-500" />
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsDeleteModalOpen(true);
+              setRowId(params.row.id);
+            }}
+          >
+            <Trash2 size={20} className="text-red-500" />
+          </button>
+        </div>
+      ),
+    }] : []),
   ];
 
   return (
@@ -129,7 +125,9 @@ export const CityListPage = observer(() => {
       <div className="w-full">
         <div className="flex justify-between items-center mb-10">
           <h1 className="text-2xl">Города</h1>
-          <CreateButton label="Создать город" path="/city/create" />
+          {canWriteCities && (
+            <CreateButton label="Создать город" path="/city/create" />
+          )}
         </div>
 
         {ids.length > 0 && (
@@ -147,7 +145,7 @@ export const CityListPage = observer(() => {
         <DataGrid
           rows={rows}
           columns={columns}
-          checkboxSelection
+          checkboxSelection={authStore.canWrite("cities")}
           disableRowSelectionExcludeModel
           loading={isLoading}
           paginationModel={paginationModel}