Add sort condition to filter presets, apply manual filter to group pa…

…ge (#903)
ShokoAnime · May 10, 2024 · 2c33ec4 · 2c33ec4
1 parent 7906672
commit 2c33ec4
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git 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 }) => (
-  <div className="flex justify-between pb-1 pr-4 font-semibold" key={item.IDs.ID}>
+  <div
+    // TODO: Disable selecting empty filter presets for now. Remove the disable condition once editing presets is possible
+    className={cx('flex justify-between pb-1 pr-4 font-semibold', item.Size === 0 && 'pointer-events-none opacity-65')}
+    key={item.IDs.ID}
+  >
     <Link to={`/webui/collection/filter/${item.IDs.ID}`} onClick={onClose}>{item.Name}</Link>
     <span className="text-panel-text-important">{item.Size}</span>
   </div>

diff --git 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<ListResultType<CollectionFilterType>>({
     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<ListResultType<CollectionGroupType>>({
     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
@@ -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
@@ -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'],
     },