feat: add search for list pages

src/pages/Route/RouteListPage/index.tsx

@@ -1,7 +1,7 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { ruRU } from "@mui/x-data-grid/locales";
-import { authStore, carrierStore, languageStore, routeStore, selectedCityStore } from "@shared";
-import { useEffect, useState } from "react";
+import { authStore, carrierStore, languageStore, routeStore, selectedCityStore, SearchInput } from "@shared";
+import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { Map, Pencil, Trash2, Minus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
@@ -28,6 +28,7 @@ export const RouteListPage = observer(() => {
     authStore.canWrite("sights") &&
     authStore.canWrite("routes");
   const canShowActionsColumn = canWriteRoutes || canShowRoutePreview;
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     const fetchData = async () => {
@@ -146,26 +147,33 @@ export const RouteListPage = observer(() => {
     }] : []),
   ];
 
-  const filteredRoutes = () => {
+  const rows = useMemo(() => {
     const { selectedCityId } = selectedCityStore;
-    if (!selectedCityId) {
-      return routes.data;
+    const query = searchQuery.toLowerCase();
+    let filtered = routes.data;
+    if (selectedCityId) {
+      const cityCarrierIds = new Set(
+        carriers["ru"].data
+          .filter((c) => c.city_id === selectedCityId)
+          .map((c) => c.id)
+      );
+      filtered = filtered.filter((route) => cityCarrierIds.has(route.carrier_id));
     }
-    const cityCarrierIds = new Set(
-      carriers["ru"].data
-        .filter((c) => c.city_id === selectedCityId)
-        .map((c) => c.id)
-    );
-    return routes.data.filter((route) => cityCarrierIds.has(route.carrier_id));
-  };
-
-  const rows = filteredRoutes().map((route) => ({
-    id: route.id,
-    carrier_id: route.carrier_id,
-    route_number: route.route_number,
-    route_direction: route.route_direction ? "Прямой" : "Обратный",
-    route_name: route.route_name,
-  }));
+    return filtered
+      .filter(
+        (route) =>
+          !query ||
+          (route.route_name ?? "").toLowerCase().includes(query) ||
+          String(route.route_number ?? "").toLowerCase().includes(query)
+      )
+      .map((route) => ({
+        id: route.id,
+        carrier_id: route.carrier_id,
+        route_number: route.route_number,
+        route_direction: route.route_direction ? "Прямой" : "Обратный",
+        route_name: route.route_name,
+      }));
+  }, [routes.data, carriers["ru"].data, selectedCityStore.selectedCityId, searchQuery]);
 
   return (
     <>
@@ -191,6 +199,8 @@ export const RouteListPage = observer(() => {
           </div>
         )}
 
+        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+
         <DataGrid
           rows={rows}
           columns={columns}