feat: role system

src/pages/Carrier/CarrierListPage/index.tsx

@@ -1,6 +1,6 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { ruRU } from "@mui/x-data-grid/locales";
-import { carrierStore, cityStore, languageStore } from "@shared";
+import { authStore, carrierStore, cityStore, languageStore } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Pencil, Trash2, Minus } from "lucide-react";
@@ -10,7 +10,6 @@ import { Box, CircularProgress } from "@mui/material";
 
 export const CarrierListPage = observer(() => {
   const { carriers, getCarriers, deleteCarrier } = carrierStore;
-  const { getCities, cities } = cityStore;
   const navigate = useNavigate();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isBulkDeleteModalOpen, setIsBulkDeleteModalOpen] = useState(false);
@@ -22,13 +21,19 @@ export const CarrierListPage = observer(() => {
     pageSize: 50,
   });
   const { language } = languageStore;
+  const canReadCities = authStore.canRead("cities");
 
   useEffect(() => {
     const fetchData = async () => {
       setIsLoading(true);
-      await getCities("ru");
-      await getCities("en");
-      await getCities("zh");
+      if (!authStore.me) {
+        await authStore.getMeAction().catch(() => undefined);
+      }
+      if (authStore.canRead("cities")) {
+        await cityStore.getCities(language);
+      } else {
+        await authStore.fetchMeCities().catch(() => undefined);
+      }
       await getCarriers(language);
       setIsLoading(false);
     };
@@ -73,56 +78,57 @@ export const CarrierListPage = observer(() => {
       headerName: "Город",
       flex: 1,
       renderCell: (params: GridRenderCellParams) => {
-        const city = cities[language]?.data.find(
-          (city) => city.id == params.value
-        );
+        const lang = language as "ru" | "en" | "zh";
+        const cityName = canReadCities
+          ? cityStore.cities[lang]?.data.find((c) => c.id === params.value)?.name
+          : authStore.meCities[lang]?.find((c) => c.city_id === params.value)?.name;
         return (
           <div className="w-full h-full flex items-center">
-            {city && city.name ? (
-              city.name
-            ) : (
-              <Minus size={20} className="text-red-500" />
-            )}
+            {cityName ?? <Minus size={20} className="text-red-500" />}
           </div>
         );
       },
     },
-    {
+    ...(authStore.canWrite("carriers") ? [{
       field: "actions",
       headerName: "Действия",
-      headerAlign: "center",
+      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(`/carrier/${params.row.id}/edit`)}>
-              <Pencil size={20} className="text-blue-500" />
-            </button>
-            {/* <button onClick={() => navigate(`/carrier/${params.row.id}`)}>
-              <Eye size={20} className="text-green-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={() => navigate(`/carrier/${params.row.id}/edit`)}>
+            <Pencil 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 = carriers[language].data?.map((carrier) => ({
-    id: carrier.id,
-    full_name: carrier.full_name,
-    short_name: carrier.short_name,
-    city_id: carrier.city_id,
-  }));
+  const allowedCityIds = canReadCities
+    ? null
+    : authStore.meCities["ru"].map((c) => c.city_id);
+
+  const canWriteCarriers = authStore.canWrite("carriers");
+
+  const rows = carriers[language].data
+    ?.filter((carrier) =>
+      !allowedCityIds || allowedCityIds.includes(carrier.city_id),
+    )
+    .map((carrier) => ({
+      id: carrier.id,
+      full_name: carrier.full_name,
+      short_name: carrier.short_name,
+      city_id: carrier.city_id,
+    }));
 
   return (
     <>
@@ -130,10 +136,12 @@ export const CarrierListPage = observer(() => {
       <div className="w-full">
         <div className="flex justify-between items-center mb-10">
           <h1 className="text-2xl">Перевозчики</h1>
-          <CreateButton label="Создать перевозчика" path="/carrier/create" />
+          {canWriteCarriers && (
+            <CreateButton label="Создать перевозчика" path="/carrier/create" />
+          )}
         </div>
 
-        {ids.length > 0 && (
+        {canWriteCarriers && ids.length > 0 && (
           <div className="flex justify-end mb-5 duration-300">
             <button
               className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
@@ -148,25 +156,33 @@ export const CarrierListPage = observer(() => {
         <DataGrid
           rows={rows}
           columns={columns}
-          checkboxSelection
+          checkboxSelection={canWriteCarriers}
           disableRowSelectionExcludeModel
           loading={isLoading}
           paginationModel={paginationModel}
           onPaginationModelChange={setPaginationModel}
           pageSizeOptions={[50]}
           localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
-          onRowSelectionModelChange={(newSelection: any) => {
-            if (Array.isArray(newSelection)) {
-              const selectedIds = newSelection.map((id: string | number) => Number(id));
-              setIds(selectedIds);
-            } else if (newSelection && typeof newSelection === 'object' && 'ids' in newSelection) {
-              const idsSet = newSelection.ids as Set<string | number>;
-              const selectedIds = Array.from(idsSet).map((id: string | number) => Number(id));
-              setIds(selectedIds);
-            } else {
-              setIds([]);
-            }
-          }}
+          onRowSelectionModelChange={
+            canWriteCarriers
+              ? (newSelection: any) => {
+                  if (Array.isArray(newSelection)) {
+                    const selectedIds = newSelection.map(Number);
+                    setIds(selectedIds);
+                  } else if (
+                    newSelection &&
+                    typeof newSelection === "object" &&
+                    "ids" in newSelection
+                  ) {
+                    const idsSet = newSelection.ids as Set<string | number>;
+                    const selectedIds = Array.from(idsSet).map(Number);
+                    setIds(selectedIds);
+                  } else {
+                    setIds([]);
+                  }
+                }
+              : undefined
+          }
           slots={{
             noRowsOverlay: () => (
               <Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>