diff --git a/web/src/screens/filters/List.tsx b/web/src/screens/filters/List.tsx
index f4066ea..966654a 100644
--- a/web/src/screens/filters/List.tsx
+++ b/web/src/screens/filters/List.tsx
@@ -3,7 +3,7 @@
* SPDX-License-Identifier: GPL-2.0-or-later
*/
-import { Dispatch, FC, Fragment, MouseEventHandler, useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { Dispatch, FC, Fragment, MouseEventHandler, useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
import { Link } from '@tanstack/react-router'
import {
Listbox,
@@ -27,7 +27,8 @@ import {
EllipsisHorizontalIcon,
PencilSquareIcon,
PlusIcon, SparklesIcon,
- TrashIcon
+ TrashIcon,
+ ExclamationTriangleIcon
} from "@heroicons/react/24/outline";
import { ArrowDownTrayIcon } from "@heroicons/react/24/solid";
@@ -195,17 +196,18 @@ function FilterList({ toggleCreateFilter }: any) {
filterListState
);
- const { isLoading, data, error } = useQuery(FiltersQueryOptions(indexerFilter, sortOrder));
+ const { isLoading: isLoadingFilters, data: filtersData, error: filtersError } = useQuery(FiltersQueryOptions(indexerFilter, sortOrder));
useEffect(() => {
FilterListContext.set({ indexerFilter, sortOrder, status });
}, [indexerFilter, sortOrder, status]);
- if (error) {
- return
An error has occurred:
;
+ if (filtersError) {
+ // TODO: Better error handling
+ return An error has occurred loading filters.
;
}
- const filtered = filteredData(data ?? [], status);
+ const filtered = filteredData(filtersData ?? [], status);
return (
@@ -223,12 +225,12 @@ function FilterList({ toggleCreateFilter }: any) {
- {isLoading
+ {isLoadingFilters
?
- : data && data.length > 0 ? (
+ : filtersData && filtersData.length > 0 ? (
{filtered.filtered.length > 0
- ? filtered.filtered.map((filter: Filter, idx) => )
+ ? filtered.filtered.map((filter: Filter, idx) => )
:
}
@@ -550,6 +552,18 @@ interface FilterListItemProps {
function FilterListItem({ filter, idx }: FilterListItemProps) {
const queryClient = useQueryClient();
+ // Check if this filter uses any disabled indexers and get their names
+ const disabledIndexersInfo = useMemo(() => {
+ if (!filter.enabled || !filter.indexers || filter.indexers.length === 0) {
+ return { hasDisabled: false, names: [] };
+ }
+ const disabled = filter.indexers.filter(indexer => !indexer.enabled);
+ return {
+ hasDisabled: disabled.length > 0,
+ names: disabled.map(indexer => indexer.name)
+ };
+ }, [filter.enabled, filter.indexers]);
+
const updateMutation = useMutation({
mutationFn: (status: boolean) => APIClient.filters.toggleEnable(filter.id, status),
onSuccess: () => {
@@ -592,7 +606,8 @@ function FilterListItem({ filter, idx }: FilterListItemProps) {
}}
className="transition flex items-center w-full break-words whitespace-wrap text-sm font-bold text-gray-800 dark:text-gray-100 hover:text-black dark:hover:text-gray-350"
>
- {filter.name} {filter.is_auto_updated && }
+ {filter.name}
+ {filter.is_auto_updated && }
@@ -648,7 +663,17 @@ function FilterListItem({ filter, idx }: FilterListItemProps) {
)}
-
+
+ {disabledIndexersInfo.hasDisabled && (
+
+
+
+ )}
+
+