feature/webgl-preview-update (#21)

Co-authored-by: itoshi <kkzemeow@gmail.com>
Reviewed-on: #21

src/pages/City/CityListPage/index.tsx

@@ -1,7 +1,7 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { ruRU } from "@mui/x-data-grid/locales";
-import { languageStore, cityStore, countryStore } from "@shared";
-import { useEffect, useState } from "react";
+import { authStore, languageStore, cityStore, countryStore, SearchInput } from "@shared";
+import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { Pencil, Trash2, Minus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
@@ -18,7 +18,13 @@ export const CityListPage = observer(() => {
   const [ids, setIds] = useState<number[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [rows, setRows] = useState<any[]>([]);
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 50,
+  });
   const { language } = languageStore;
+  const canWriteCities = authStore.canWrite("cities");
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     const fetchData = async () => {
@@ -52,6 +58,18 @@ export const CityListPage = observer(() => {
     setRows(newRows2 || []);
   }, [cities, countryStore.countries, language, isLoading]);
 
+  const filteredRows = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return rows;
+    return rows.filter((row) => {
+      const cityName = (row.name ?? "").toLowerCase();
+      const countryName = (
+        countryStore.countries[language]?.data?.find((c) => c.code === row.country)?.name ?? ""
+      ).toLowerCase();
+      return cityName.includes(query) || countryName.includes(query);
+    });
+  }, [rows, searchQuery, countryStore.countries, language]);
+
   const columns: GridColDef[] = [
     {
       field: "country",
@@ -87,35 +105,31 @@ 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 title="Редактировать" onClick={() => navigate(`/city/${params.row.id}/edit`)}>
+            <Pencil size={20} className="text-blue-500" />
+          </button>
+          <button
+            title="Удалить"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsDeleteModalOpen(true);
+              setRowId(params.row.id);
+            }}
+          >
+            <Trash2 size={20} className="text-red-500" />
+          </button>
+        </div>
+      ),
+    }] : []),
   ];
 
   return (
@@ -125,36 +139,78 @@ 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>
 
-        <div
-          className="flex justify-end mb-5 duration-300"
-          style={{ opacity: ids.length > 0 ? 1 : 0 }}
-        >
-          <button
-            className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
-            onClick={() => setIsBulkDeleteModalOpen(true)}
-          >
-            <Trash2 size={20} className="text-white" /> Удалить выбранные (
-            {ids.length})
-          </button>
-        </div>
+        {canWriteCities && 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"
+              onClick={() => setIsBulkDeleteModalOpen(true)}
+            >
+              <Trash2 size={20} className="text-white" /> Удалить выбранные (
+              {ids.length})
+            </button>
+          </div>
+        )}
+
+        {(rows.length > 0 || searchQuery) && (
+          <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        )}
 
         <DataGrid
-          rows={rows}
+          rows={filteredRows}
           columns={columns}
-          hideFooter
-          checkboxSelection
-          loading={isLoading}
-          localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
-          onRowSelectionModelChange={(newSelection) => {
-            setIds(Array.from(newSelection.ids as unknown as number[]));
+          checkboxSelection={canWriteCities}
+          disableRowSelectionExcludeModel
+          disableRowSelectionOnClick
+          onRowDoubleClick={(params) => {
+            if (canWriteCities) {
+              navigate(`/city/${params.id}/edit`);
+            }
           }}
+          loading={isLoading}
+          paginationModel={paginationModel}
+          onPaginationModelChange={setPaginationModel}
+          pageSizeOptions={[50]}
+          localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
+          onRowSelectionModelChange={
+            canWriteCities
+              ? (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" }}>
-                {isLoading ? <CircularProgress size={20} /> : "Нет городов"}
+                {isLoading ? (
+                  <CircularProgress size={20} />
+                ) : (
+                  "Нет городов"
+                )}
               </Box>
             ),
           }}