diff --git a/src/components/Dialogs/FiltersModal.tsx b/src/components/Dialogs/FiltersModal.tsx
index 63e54688e..0750b4bba 100644
--- a/src/components/Dialogs/FiltersModal.tsx
+++ b/src/components/Dialogs/FiltersModal.tsx
@@ -33,7 +33,11 @@ const TabButton = (
};
const Item = ({ item, onClose }: { item: CollectionFilterType, onClose: () => void }) => (
-
+
{item.Name}
{item.Size}
diff --git a/src/core/react-query/filter/queries.ts b/src/core/react-query/filter/queries.ts
index c847d7717..faf0d5fa2 100644
--- a/src/core/react-query/filter/queries.ts
+++ b/src/core/react-query/filter/queries.ts
@@ -12,7 +12,7 @@ import type { SeriesType } from '@/core/types/api/series';
export const useFiltersQuery = (enabled = false) =>
useQuery
>({
queryKey: ['filter', 'all'],
- queryFn: () => axios.get('Filter', { params: { pageSize: 0 } }),
+ queryFn: () => axios.get('Filter', { params: { includeEmpty: true, pageSize: 0 } }),
enabled,
});
@@ -38,7 +38,10 @@ export const useFilterExpressionsQuery = (enabled = true) =>
enabled,
});
-export const useFilteredGroupsInfiniteQuery = ({ filterCriteria, ...params }: FilteredGroupsRequestType) =>
+export const useFilteredGroupsInfiniteQuery = (
+ { filterCriteria, ...params }: FilteredGroupsRequestType,
+ enabled = true,
+) =>
useInfiniteQuery>({
queryKey: ['filter', 'preview', 'groups', filterCriteria, params],
queryFn: ({ pageParam }) =>
@@ -58,6 +61,7 @@ export const useFilteredGroupsInfiniteQuery = ({ filterCriteria, ...params }: Fi
if (!params.pageSize || lastPage.Total / params.pageSize <= lastPageParam) return undefined;
return lastPageParam + 1;
},
+ enabled,
});
export const useFilteredGroupSeries = (
diff --git a/src/core/types/api/filter.ts b/src/core/types/api/filter.ts
index 17112bf3c..59b53e4ab 100644
--- a/src/core/types/api/filter.ts
+++ b/src/core/types/api/filter.ts
@@ -69,7 +69,7 @@ export type FilterSeason = {
Season: string;
};
-type SortingCriteria = {
+export type SortingCriteria = {
Type: SortingType;
Next?: SortingCriteria;
IsInverted: boolean;
@@ -82,5 +82,5 @@ export type FilterType = {
IsHidden?: boolean;
ApplyAtSeriesLevel?: boolean;
Expression?: FilterCondition;
- SortingCriteria?: SortingCriteria;
+ Sorting?: SortingCriteria;
};
diff --git a/src/pages/collection/Collection.tsx b/src/pages/collection/Collection.tsx
index 6082fda7a..ed7b06df8 100644
--- a/src/pages/collection/Collection.tsx
+++ b/src/pages/collection/Collection.tsx
@@ -25,10 +25,15 @@ import useEventCallback from '@/hooks/useEventCallback';
import useFlattenListResult from '@/hooks/useFlattenListResult';
import type { RootState } from '@/core/store';
-import type { FilterCondition, FilterType } from '@/core/types/api/filter';
+import type { FilterCondition, FilterType, SortingCriteria } from '@/core/types/api/filter';
import type { SeriesType } from '@/core/types/api/series';
-const getFilter = (query: string, filterCondition?: FilterCondition, isSeries = true): FilterType => {
+const getFilter = (
+ query: string,
+ filterCondition?: FilterCondition,
+ sortingCriteria?: SortingCriteria,
+ isSeries = true,
+): FilterType => {
let finalCondition: FilterCondition | undefined;
if (query) {
const searchCondition: FilterCondition = {
@@ -53,6 +58,7 @@ const getFilter = (query: string, filterCondition?: FilterCondition, isSeries =
? {
ApplyAtSeriesLevel: isSeries,
Expression: finalCondition,
+ Sorting: sortingCriteria ?? { Type: 'Name', IsInverted: false },
}
: {}
);
@@ -103,11 +109,14 @@ function Collection() {
return undefined;
}, [activeFilter, filterId, filterQuery.data?.Expression]);
- const groupsQuery = useFilteredGroupsInfiniteQuery({
- pageSize: 50,
- randomImages: showRandomPoster,
- filterCriteria: getFilter(debouncedGroupSearch, groupFilterCondition, false),
- });
+ const groupsQuery = useFilteredGroupsInfiniteQuery(
+ {
+ pageSize: 50,
+ randomImages: showRandomPoster,
+ filterCriteria: getFilter(debouncedGroupSearch, groupFilterCondition, filterQuery.data?.Sorting, false),
+ },
+ !filterId || (!!filterId && filterQuery.isSuccess),
+ );
const [groups, groupsTotal] = useFlattenListResult(groupsQuery.data);
const lastPageIds = useMemo(
() => groupsQuery.data?.pages.toReversed()[0].List.map(group => group.IDs.ID) ?? [],
@@ -117,7 +126,7 @@ function Collection() {
const seriesQuery = useFilteredGroupSeries(
toNumber(groupId!),
{
- filterCriteria: getFilter(debouncedSeriesSearch),
+ filterCriteria: getFilter(debouncedSeriesSearch, groupFilterCondition, filterQuery.data?.Sorting, true),
randomImages: showRandomPoster,
includeDataFrom: ['AniDB'],
},