diff --git a/src/app/notifications/components/NotificationsSettingsPanel.tsx b/src/app/notifications/components/NotificationsSettingsPanel.tsx index 4ea6eee..f30bdb2 100644 --- a/src/app/notifications/components/NotificationsSettingsPanel.tsx +++ b/src/app/notifications/components/NotificationsSettingsPanel.tsx @@ -22,6 +22,7 @@ import { type LucideIcon, } from "lucide-react"; import TablePagination from "@/components/TablePagination"; +import SearchField from "@/components/SearchField"; import { FieldLabel, Toggle, @@ -297,13 +298,19 @@ export default function NotificationsSettingsPanel({ const [draft, setDraft] = useState(null); const [editingId, setEditingId] = useState(null); const [currentPage, setCurrentPage] = useState(1); + const [search, setSearch] = useState(""); const providers = settings.notifications.providers; - const totalItems = providers.length; + const filteredProviders = providers.filter((provider) => { + const query = search.trim().toLowerCase(); + return !query || [provider.name, provider.type, provider.channel, ...provider.actions] + .filter(Boolean).some((value) => value.toLowerCase().includes(query)); + }); + const totalItems = filteredProviders.length; const totalPages = Math.max(1, Math.ceil(totalItems / PAGE_SIZE)); const safePage = Math.min(currentPage, totalPages); const startIndex = (safePage - 1) * PAGE_SIZE; - const pagedProviders = providers.slice(startIndex, startIndex + PAGE_SIZE); + const pagedProviders = filteredProviders.slice(startIndex, startIndex + PAGE_SIZE); const startItem = totalItems === 0 ? 0 : startIndex + 1; const endItem = totalItems === 0 ? 0 : startIndex + pagedProviders.length; @@ -376,6 +383,10 @@ export default function NotificationsSettingsPanel({ +
+ { setSearch(event.target.value); setCurrentPage(1); }} containerStyle={{ minWidth: 0 }} /> +
+ {totalItems === 0 ? (
(null); const [editingId, setEditingId] = useState(null); const [currentPage, setCurrentPage] = useState(1); + const [search, setSearch] = useState(""); - const totalItems = destinations.length; + const filteredDestinations = destinations.filter((destination) => { + const query = search.trim().toLowerCase(); + return !query || [destination.name, destination.provider, destination.bucket, destination.region, destination.endpoint ?? "", destination.server?.name ?? ""].some((value) => value.toLowerCase().includes(query)); + }); + const totalItems = filteredDestinations.length; const totalPages = Math.max(1, Math.ceil(totalItems / PAGE_SIZE)); const safePage = Math.min(currentPage, totalPages); const startIndex = (safePage - 1) * PAGE_SIZE; - const pagedDestinations = destinations.slice( + const pagedDestinations = filteredDestinations.slice( startIndex, startIndex + PAGE_SIZE, ); @@ -329,6 +335,10 @@ export default function S3StorageSettingsPanel({
+
+ { setSearch(event.target.value); setCurrentPage(1); }} containerStyle={{ minWidth: 0 }} /> +
+ {destinations.length === 0 ? (