diff --git a/app/(main)/servers/page.tsx b/app/(main)/servers/page.tsx index 85b155d3..45e3c89b 100644 --- a/app/(main)/servers/page.tsx +++ b/app/(main)/servers/page.tsx @@ -9,9 +9,10 @@ import { PageHeader } from "@/components/page-header" import { FormField, FormToggle, SectionTitle, SegmentedControl } from "@/components/form-kit" import { DataPageToolbar } from "@/components/data-page-toolbar" import { ServersDataGrid } from "@/components/data-grids/servers-data-grid" -import type { Filter } from "@/components/reui/filters" -import { applyReuiFilters } from "@/lib/data-filters/apply-reui-filters" -import { SERVER_FILTER_ACCESSORS, SERVER_FILTER_FIELDS } from "@/lib/data-filters/server-filter-fields" +import { createFilterQuery } from "@/components/reui/filters/filters-query" +import { ServerFilters } from "@/components/data-grids/server-filters" +import { applyFilterQuery } from "@/lib/data-filters/apply-filter-query" +import { SERVER_FILTER_ACCESSORS } from "@/lib/data-filters/server-filter-fields" import { servers as initialServers } from "@/lib/data" import type { ServerType, Server, WanUplink } from "@/lib/data" import type { ServerCreate, ServerUpdate } from "@mmapp/contracts/servers" @@ -225,7 +226,7 @@ export default function ServersPage() { const [_backendOk, setBackendOk] = useState(false) const [search, setSearch] = useState("") const [typeFilter, setTypeFilter] = useState("all") - const [advancedFilters, setAdvancedFilters] = useState([]) + const [advancedFilters, setAdvancedFilters] = useState(() => createFilterQuery()) const [open, setOpen] = useState(false) const [sheetMode, setSheetMode] = useState("add") const [editingId, setEditingId] = useState(null) @@ -556,7 +557,7 @@ export default function ServersPage() { const q = search.toLowerCase() return sv.name.toLowerCase().includes(q) || sv.host.includes(q) || sv.site.toLowerCase().includes(q) }) - return applyReuiFilters(base, advancedFilters, SERVER_FILTER_ACCESSORS) + return applyFilterQuery(base, advancedFilters, SERVER_FILTER_ACCESSORS) }, [serverList, search, typeFilter, advancedFilters]) const counts = useMemo(() => ({ @@ -654,9 +655,7 @@ export default function ServersPage() { count: tab.value === "all" ? counts.all : counts[tab.value as ServerType], })), }} - filters={advancedFilters} - onFiltersChange={setAdvancedFilters} - filterFields={SERVER_FILTER_FIELDS} + filterControl={} search={search} onSearchChange={setSearch} searchPlaceholder="Поиск по имени, хосту…" @@ -664,6 +663,7 @@ export default function ServersPage() { /> 0} isLive={isLive} pollingIds={pollingIds} busy={controlsBusy} diff --git a/components/data-grids/server-filters.tsx b/components/data-grids/server-filters.tsx new file mode 100644 index 00000000..90f7d37f --- /dev/null +++ b/components/data-grids/server-filters.tsx @@ -0,0 +1,14 @@ +"use client" + +import { Filters } from "@/components/reui/filters/filters" +import type { FilterQuery } from "@/components/reui/filters/filters-types" +import { SERVER_FILTER_FIELDS } from "@/lib/data-filters/server-filter-fields" +import { FILTER_LABELS_RU, FILTER_OPERATOR_LABELS_RU } from "@/lib/data-filters/filter-labels-ru" + +export function ServerFilters({ query, onQueryChange }: { + query: FilterQuery + onQueryChange: (query: FilterQuery) => void +}) { + return +} diff --git a/components/data-grids/servers-data-grid.tsx b/components/data-grids/servers-data-grid.tsx index f358531a..28be4882 100644 --- a/components/data-grids/servers-data-grid.tsx +++ b/components/data-grids/servers-data-grid.tsx @@ -163,6 +163,7 @@ function ServerRowActions({ } interface ServersDataGridProps { + hasUnfilteredRows?: boolean busy?: boolean servers: Server[] isLive: boolean @@ -174,6 +175,7 @@ interface ServersDataGridProps { } function ServersDataGrid({ + hasUnfilteredRows = false, busy = false, servers, isLive, @@ -196,9 +198,14 @@ function ServersDataGrid({ const expanded = row.getIsExpanded() return (
+

{s.name}

{s.host}

@@ -374,8 +381,8 @@ function ServersDataGrid({ return ( } - title="Нет серверов" - description="Добавьте первый MikroTik-сервер для мониторинга" + title={hasUnfilteredRows ? "Нет совпадений" : "Нет серверов"} + description={hasUnfilteredRows ? "Измените поиск или сбросьте фильтры" : "Добавьте первый MikroTik-сервер для мониторинга"} className="border-0 py-12" /> ) diff --git a/components/data-grids/shared/data-grid-sort-header.tsx b/components/data-grids/shared/data-grid-sort-header.tsx index 06a3254e..f7fe2c28 100644 --- a/components/data-grids/shared/data-grid-sort-header.tsx +++ b/components/data-grids/shared/data-grid-sort-header.tsx @@ -32,18 +32,18 @@ function DataGridSortHeader({ type="button" className={cn( "inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground", - "hover:text-foreground transition-colors rounded-md -ml-1 px-1 py-0.5", + "hover:text-foreground transition-colors rounded-md -ml-1 px-1 py-0.5 focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2", className, )} onClick={column.getToggleSortingHandler()} > {title} {sorted === "asc" ? ( - +