feat: role system fix

src/pages/Route/RouteListPage/index.tsx

@@ -22,6 +22,12 @@ export const RouteListPage = observer(() => {
     pageSize: 50,
   });
   const { language } = languageStore;
+  const canWriteRoutes = authStore.canWrite("routes");
+  const canShowRoutePreview =
+    authStore.canWrite("stations") &&
+    authStore.canWrite("sights") &&
+    authStore.canWrite("routes");
+  const canShowActionsColumn = canWriteRoutes || canShowRoutePreview;
 
   useEffect(() => {
     const fetchData = async () => {
@@ -104,7 +110,7 @@ export const RouteListPage = observer(() => {
         );
       },
     },
-    {
+    ...(canShowActionsColumn ? [{
       field: "actions",
       headerName: "Действия",
       width: 250,
@@ -112,14 +118,9 @@ export const RouteListPage = observer(() => {
       headerAlign: "center" as const,
       sortable: false,
       renderCell: (params: GridRenderCellParams) => {
-        const canWrite = authStore.canWrite("routes");
-        const canShowRoutePreview =
-          authStore.canRead("stations") &&
-          authStore.canRead("sights") &&
-          authStore.canRead("routes");
         return (
           <div className="flex h-full gap-7 justify-center items-center">
-            {canWrite && (
+            {canWriteRoutes && (
               <button onClick={() => navigate(`/route/${params.row.id}/edit`)}>
                 <Pencil size={20} className="text-blue-500" />
               </button>
@@ -129,7 +130,7 @@ export const RouteListPage = observer(() => {
                 <Map size={20} className="text-purple-500" />
               </button>
             )}
-            {canWrite && (
+            {canWriteRoutes && (
               <button
                 onClick={() => {
                   setIsDeleteModalOpen(true);
@@ -142,7 +143,7 @@ export const RouteListPage = observer(() => {
           </div>
         );
       },
-    },
+    }] : []),
   ];
 
   const rows = routes.data.map((route) => ({
@@ -160,10 +161,12 @@ export const RouteListPage = observer(() => {
       <div style={{ width: "100%" }}>
         <div className="flex justify-between items-center mb-10">
           <h1 className="text-2xl">Маршруты</h1>
-          <CreateButton label="Создать маршрут" path="/route/create" />
+          {canWriteRoutes && (
+            <CreateButton label="Создать маршрут" path="/route/create" />
+          )}
         </div>
 
-        {ids.length > 0 && (
+        {canWriteRoutes && 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"
@@ -178,25 +181,37 @@ export const RouteListPage = observer(() => {
         <DataGrid
           rows={rows}
           columns={columns}
-          checkboxSelection={authStore.canWrite("routes")}
+          checkboxSelection={canWriteRoutes}
           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={
+            canWriteRoutes
+              ? (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([]);
+                  }
+                }
+              : undefined
+          }
           slots={{
             noRowsOverlay: () => (
               <Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>