Progress on advanced filters

server/controllers/albums.controller.ts

@@ -24,10 +24,15 @@ const getList = async (
   res: Response
 ) => {
   const { serverId } = req.params;
-  const { take, skip, serverUrlId } = req.query;
+  const { take, skip, serverUrlId, advancedFilters } = req.query;
+
+  const decodedAdvancedFilters = advancedFilters && decodeURI(advancedFilters);
+  const jsonAdvancedFilters =
+    decodedAdvancedFilters && JSON.parse(decodedAdvancedFilters);
 
   const albums = await service.albums.findMany({
     ...req.query,
+    advancedFilters: jsonAdvancedFilters,
     serverId,
     skip: Number(skip),
     take: Number(take),
@@ -66,6 +71,7 @@ const getDetailSongList = async (
 
   const albums = await service.albums.findMany({
     ...req.query,
+    advancedFilters: undefined,
     serverId,
     skip: Number(skip),
     take: Number(take),

server/helpers/albums.helpers.ts

@@ -57,7 +57,7 @@ const sort = (sortBy: AlbumSort, orderBy: SortOrder) => {
       break;
 
     case AlbumSort.DATE_RELEASED:
-      order = { releaseDate: orderBy, year: orderBy };
+      order = { releaseDate: orderBy };
       break;
 
     case AlbumSort.DATE_RELEASED_YEAR:
@@ -80,7 +80,204 @@ const sort = (sortBy: AlbumSort, orderBy: SortOrder) => {
   return order;
 };
 
+export enum FilterGroupType {
+  AND = 'AND',
+  OR = 'OR',
+}
+
+export type AdvancedFilterRule = {
+  field: string | null;
+  operator: string | null;
+  uniqueId: string;
+  value: string | number | Date | undefined | null | any;
+};
+
+export type AdvancedFilterGroup = {
+  group: AdvancedFilterGroup[];
+  rules: AdvancedFilterRule[];
+  type: FilterGroupType;
+  uniqueId: string;
+};
+
+const advancedFilterGroup = (
+  groups: AdvancedFilterGroup[],
+  user: AuthUser,
+  data: any[]
+) => {
+  if (groups.length === 0) {
+    return data;
+  }
+
+  const filterGroups: any[] = [];
+
+  for (const group of groups) {
+    const rootType = group.type.toUpperCase();
+    const query: any = {
+      [rootType]: [],
+    };
+
+    for (const rule of group.rules) {
+      if (rule.field && rule.operator) {
+        const [table, field, relationField] = rule.field.split('.');
+
+        if (field === 'ratings') {
+          if (table === 'albums') {
+            query[rootType].push({
+              [field]: {
+                some: {
+                  [relationField]: {
+                    [rule.operator]: rule.value,
+                  },
+                  userId: user.id,
+                },
+              },
+            });
+          } else {
+            query[rootType].push({
+              [table]: {
+                some: {
+                  [field]: {
+                    some: {
+                      [relationField]: {
+                        [rule.operator]: rule.value,
+                      },
+                      userId: user.id,
+                    },
+                  },
+                },
+              },
+            });
+          }
+        } else if (table === 'albums') {
+          const obj = {
+            [field]: {
+              [rule.operator]: rule.value,
+              mode: 'insensitive',
+            },
+          };
+
+          query[rootType].push(obj);
+        } else {
+          const obj = {
+            [table]: {
+              some: {
+                [field]: {
+                  [rule.operator]: rule.value,
+                  mode: 'insensitive',
+                },
+              },
+            },
+          };
+
+          query[rootType].push(obj);
+        }
+      }
+    }
+
+    if (group.group.length > 0) {
+      const b = advancedFilterGroup(group.group, user, data);
+      b.forEach((c) => query[rootType].push(c));
+    }
+
+    data.push(query);
+    filterGroups.push(query);
+  }
+
+  return filterGroups;
+};
+
+const advancedFilter = (filter: AdvancedFilterGroup, user: AuthUser) => {
+  const rootQueryType = filter.type.toUpperCase();
+  const rootQuery = {
+    [rootQueryType]: [] as any[],
+  };
+
+  const operatorMap = {
+    '!=': 'not',
+    '!~': 'contains',
+    $: 'endsWith',
+    '<': 'lt',
+    '<=': 'lte',
+    '=': 'equals',
+    '>': 'gt',
+    '>=': 'gte',
+    '^': 'startsWith',
+    '~': 'contains',
+  };
+
+  for (const rule of filter.rules) {
+    if (rule.field && rule.operator) {
+      let [table, field, relationField] = rule.field.split('.');
+      const condition = rule.operator === '!~' ? 'none' : 'some';
+      const op = operatorMap[rule.operator as keyof typeof operatorMap];
+
+      switch (table) {
+        case 'albums':
+          if (field === 'ratings') {
+            rootQuery[rootQueryType].push({
+              [field]: {
+                [condition]: {
+                  [relationField]: {
+                    [op]: rule.value,
+                  },
+                  userId: user.id,
+                },
+              },
+            });
+            break;
+          }
+          rootQuery[rootQueryType].push({
+            [field]: {
+              mode: 'insensitive',
+              [op]: rule.value,
+            },
+          });
+          break;
+
+        default:
+          if (field === 'ratings') {
+            rootQuery[rootQueryType].push({
+              [table]: {
+                some: {
+                  [field]: {
+                    some: {
+                      [relationField]: {
+                        [op]: rule.value,
+                      },
+                      userId: user.id,
+                    },
+                  },
+                },
+              },
+            });
+            break;
+          }
+
+          rootQuery[rootQueryType].push({
+            [table]: {
+              [condition]: {
+                [field]: {
+                  mode: 'insensitive',
+                  [op]: rule.value,
+                },
+              },
+            },
+          });
+          break;
+      }
+    }
+  }
+
+  const groups = advancedFilterGroup(filter.group, user, []);
+  for (const group of groups) {
+    rootQuery[rootQueryType].push(group);
+  }
+
+  return rootQuery;
+};
+
 export const albumHelpers = {
+  advancedFilter,
   include,
   sort,
 };

server/services/albums.service.ts

@@ -1,7 +1,8 @@
+import { Prisma } from '@prisma/client';
 import { AuthUser } from '@/middleware';
 import { OffsetPagination, SortOrder } from '@/types/types';
 import { ApiError } from '@/utils';
-import { AlbumSort } from '@helpers/albums.helpers';
+import { AdvancedFilterGroup, AlbumSort } from '@helpers/albums.helpers';
 import { helpers } from '@helpers/index';
 import { prisma } from '@lib/prisma';
 
@@ -24,6 +25,7 @@ const findById = async (user: AuthUser, options: { id: string }) => {
 };
 
 export type AlbumFindManyOptions = {
+  advancedFilters?: AdvancedFilterGroup;
   orderBy: SortOrder;
   serverFolderId?: string[];
   serverId: string;
@@ -32,8 +34,16 @@ export type AlbumFindManyOptions = {
 } & OffsetPagination;
 
 const findMany = async (options: AlbumFindManyOptions) => {
-  const { take, serverFolderId, skip, sortBy, orderBy, user, serverId } =
+  const {
-    options;
+    take,
+    serverFolderId,
+    skip,
+    sortBy,
+    orderBy,
+    user,
+    serverId,
+    advancedFilters,
+  } = options;
 
   const serverFolderIds =
     serverFolderId ||
@@ -42,6 +52,9 @@ const findMany = async (options: AlbumFindManyOptions) => {
   let totalEntries = 0;
   let albums;
 
+  const advancedFiltersQuery =
+    advancedFilters && helpers.albums.advancedFilter(advancedFilters, user);
+
   if (sortBy === AlbumSort.RATING) {
     const [count, result] = await prisma.$transaction([
       prisma.albumRating.count({
@@ -92,14 +105,24 @@ const findMany = async (options: AlbumFindManyOptions) => {
   } else {
     [totalEntries, albums] = await prisma.$transaction([
       prisma.album.count({
-        where: { OR: helpers.shared.serverFolderFilter(serverFolderIds) },
+        where: {
+          AND: [
+            helpers.shared.serverFolderFilter(serverFolderIds),
+            advancedFiltersQuery as Prisma.AlbumWhereInput,
+          ],
+        },
       }),
       prisma.album.findMany({
         include: helpers.albums.include(user, { songs: false }),
         orderBy: [helpers.albums.sort(sortBy, orderBy)],
         skip,
         take,
-        where: { OR: helpers.shared.serverFolderFilter(serverFolderIds) },
+        where: {
+          AND: [
+            helpers.shared.serverFolderFilter(serverFolderIds),
+            advancedFiltersQuery as Prisma.AlbumWhereInput,
+          ],
+        },
       }),
     ]);
   }

server/validations/albums.validation.ts

@@ -16,6 +16,7 @@ const list = {
     ...serverFolderIdValidation,
     ...orderByValidation,
     ...serverUrlIdValidation,
+    advancedFilters: z.optional(z.string()),
     sortBy: z.nativeEnum(AlbumSort),
   }),
 };

src/renderer/api/albums.api.ts

@@ -18,6 +18,7 @@ export enum AlbumSort {
 }
 
 export type AlbumListParams = PaginationParams & {
+  advancedFilters?: string;
   orderBy: SortOrder;
   serverFolderId?: string[];
   serverUrlId?: string;

src/renderer/features/albums/components/advanced-filters.tsx

@@ -1,29 +1,31 @@
-import { useState } from 'react';
 import { Box, Stack, Group } from '@mantine/core';
-import _ from 'lodash';
+import dayjs from 'dayjs';
+import get from 'lodash/get';
+import set from 'lodash/set';
 import { nanoid } from 'nanoid/non-secure';
 import { RiAddLine, RiMore2Line, RiSubtractLine } from 'react-icons/ri';
 import {
   Button,
+  DatePicker,
   DropdownMenu,
   NumberInput,
   Select,
   TextInput,
 } from '@/renderer/components';
 
-enum FilterGroupType {
+export enum FilterGroupType {
-  AND = 'and',
+  AND = 'AND',
-  OR = 'or',
+  OR = 'OR',
 }
 
-type AdvancedFilterRule = {
+export type AdvancedFilterRule = {
-  field: string;
+  field: string | null;
-  operator: string;
+  operator: string | null;
   uniqueId: string;
-  value: string;
+  value: string | number | Date | undefined | null | any;
 };
 
-type AdvancedFilterGroup = {
+export type AdvancedFilterGroup = {
   group: AdvancedFilterGroup[];
   rules: AdvancedFilterRule[];
   type: FilterGroupType;
@@ -33,6 +35,8 @@ type AdvancedFilterGroup = {
 const DATE_FILTER_OPTIONS_DATA = [
   { label: 'is before', value: '<' },
   { label: 'is after', value: '>' },
+  { label: 'is before or equal to', value: '<=' },
+  { label: 'is after or equal to', value: '>=' },
 ];
 
 const STRING_FILTER_OPTIONS_DATA = [
@@ -49,164 +53,413 @@ const NUMBER_FILTER_OPTIONS_DATA = [
   { label: 'is not', value: '!=' },
   { label: 'is greater than', value: '>' },
   { label: 'is less than', value: '<' },
+  { label: 'is greater than or equal to', value: '>=' },
+  { label: 'is less than or equal to', value: '<=' },
+];
+
+const ID_FILTER_OPTIONS_DATA = [
+  { label: 'is', value: 'equals' },
+  { label: 'is not', value: 'not' },
 ];
 
 const FILTER_GROUP_OPTIONS_DATA = [
   {
-    label: 'Match ALL',
+    label: 'Match all',
     value: FilterGroupType.AND,
   },
   {
-    label: 'Match ANY',
+    label: 'Match any',
     value: FilterGroupType.OR,
   },
 ];
 
 const FILTER_OPTIONS_DATA = [
   {
-    label: 'Artist Title',
+    label: 'Artist Name',
-    value: 'artist.title',
+    value: 'artists.name',
   },
   {
     label: 'Artist Rating',
-    value: 'artist.rating',
+    value: 'artists.ratings.value',
   },
   {
     label: 'Artist Genre',
-    value: 'artist.genre',
+    value: 'artists.genre',
   },
   {
-    label: 'Album Title',
+    label: 'Album Artist Name',
-    value: 'album.title',
+    value: 'albumArtists.name',
+  },
+  {
+    label: 'Album Artist Rating',
+    value: 'albumArtists.ratings.value',
+  },
+  {
+    label: 'Album Artist Genre',
+    value: 'albumArtists.genre',
+  },
+  {
+    label: 'Album Name',
+    value: 'albums.name',
   },
   {
     label: 'Album Genre',
-    value: 'album.genre',
+    value: 'albums.genre',
   },
   {
     label: 'Album Rating',
-    value: 'album.rating',
+    value: 'albums.ratings.value',
   },
   {
     label: 'Album Year',
-    value: 'album.year',
+    value: 'albums.year',
   },
   {
     label: 'Album Release Date',
-    value: 'album.releaseDate',
+    value: 'albums.releaseDate',
   },
   {
     label: 'Album Plays',
-    value: 'album.playCount',
+    value: 'albums.playCount',
   },
   {
     label: 'Album Date Added',
-    value: 'album.dateAdded',
+    value: 'albums.dateAdded',
   },
   {
-    label: 'Track Title',
+    label: 'Track Name',
-    value: 'track.title',
+    value: 'songs.name',
   },
   {
     label: 'Track Plays',
-    value: 'track.plays',
+    value: 'songs.playCount',
   },
   {
     label: 'Track Rating',
-    value: 'track.rating',
+    value: 'songs.ratings.value',
   },
 ];
 
 const OPTIONS_MAP = {
-  'album.dateAdded': {
+  'albumArtists.genre': {
+    type: 'id',
+  },
+  'albumArtists.name': {
+    type: 'string',
+  },
+  'albumArtists.ratings.value': {
+    type: 'number',
+  },
+  'albums.dateAdded': {
     type: 'date',
   },
-  'album.favorite': {
+  'albums.favorite': {
     type: 'boolean',
   },
-  'album.genre': {
+  'albums.genre': {
+    type: 'id',
+  },
+  'albums.name': {
     type: 'string',
   },
-  'album.playCount': {
+  'albums.playCount': {
     type: 'number',
   },
-  'album.rating': {
+  'albums.ratings.value': {
     type: 'number',
   },
-  'album.releaseDate': {
+  'albums.releaseDate': {
     type: 'date',
   },
-  'album.title': {
+  'albums.year': {
-    type: 'string',
-  },
-  'album.year': {
     type: 'number',
   },
-  'artist.genre': {
+  'artists.genre': {
+    type: 'id',
+  },
+  'artists.name': {
     type: 'string',
   },
-  'artist.rating': {
+  'artists.ratings.value': {
     type: 'number',
   },
-  'artist.title': {
+  'songs.name': {
     type: 'string',
   },
-  'track.plays': {
+  'songs.playCount': {
     type: 'number',
   },
-  'track.rating': {
+  'songs.ratings.value': {
     type: 'number',
   },
-  'track.title': {
-    type: 'string',
-  },
 };
 
-const FilterOption = ({ level, onDeleteRule, uniqueId, groupIndex }: any) => {
+interface FilterOptionProps {
-  const [selectedOption, setSelectedOption] = useState<
+  data: AdvancedFilterRule;
-    string | null | typeof OPTIONS_MAP
+  groupIndex: number[];
-  >(FILTER_OPTIONS_DATA[0].value);
+  level: number;
+  onChangeField: (args: any) => void;
+  onChangeOperator: (args: any) => void;
+  onChangeValue: (args: any) => void;
+  onDeleteRule: (args: DeleteArgs) => void;
+}
+
+const FilterOption = ({
+  data,
+  level,
+  onDeleteRule,
+  groupIndex,
+  onChangeField,
+  onChangeOperator,
+  onChangeValue,
+}: FilterOptionProps) => {
+  const { field, operator, uniqueId, value } = data;
 
   const handleDeleteRule = () => {
     onDeleteRule({ groupIndex, level, uniqueId });
   };
 
-  const filterMap = {
+  const handleChangeField = (e: any) => {
-    date: <Select data={DATE_FILTER_OPTIONS_DATA} size="xs" width={150} />,
+    onChangeField({ groupIndex, level, uniqueId, value: e });
-    number: <Select data={NUMBER_FILTER_OPTIONS_DATA} size="xs" width={150} />,
-    string: <Select data={STRING_FILTER_OPTIONS_DATA} size="xs" width={150} />,
   };
 
-  const filterInputMap = {
+  const handleChangeOperator = (e: any) => {
-    'album.dateAdded': <TextInput size="xs" width={150} />,
+    onChangeOperator({ groupIndex, level, uniqueId, value: e });
-    'album.genre': <Select searchable data={['hello']} size="xs" width={150} />,
+  };
-    'album.playCount': <NumberInput size="xs" width={150} />,
+
-    'album.rating': <NumberInput size="xs" width={150} />,
+  const handleChangeValue = (e: any) => {
-    'album.releaseDate': <TextInput size="xs" width={150} />,
+    const isDirectValue =
-    'album.title': <TextInput size="xs" width={150} />,
+      typeof e === 'string' ||
-    'album.year': <NumberInput size="xs" width={150} />,
+      typeof e === 'number' ||
-    'artist.genre': <Select searchable data={[]} size="xs" width={150} />,
+      typeof e === 'undefined' ||
-    'artist.rating': <NumberInput size="xs" width={150} />,
+      typeof e === null;
-    'artist.title': <TextInput size="xs" width={150} />,
+
-    'track.plays': <NumberInput size="xs" width={150} />,
+    if (isDirectValue) {
-    'track.rating': <NumberInput size="xs" width={150} />,
+      return onChangeValue({
-    'track.title': <TextInput size="xs" width={150} />,
+        groupIndex,
+        level,
+        uniqueId,
+        value: e,
+      });
+    }
+
+    return onChangeValue({
+      groupIndex,
+      level,
+      uniqueId,
+      value: e.currentTarget.value,
+    });
+  };
+
+  const filterOperatorMap = {
+    date: (
+      <Select
+        data={DATE_FILTER_OPTIONS_DATA}
+        size="xs"
+        value={operator}
+        width={150}
+        onChange={handleChangeOperator}
+      />
+    ),
+    id: (
+      <Select
+        data={ID_FILTER_OPTIONS_DATA}
+        size="xs"
+        value={operator}
+        width={150}
+        onChange={handleChangeOperator}
+      />
+    ),
+    number: (
+      <Select
+        data={NUMBER_FILTER_OPTIONS_DATA}
+        size="xs"
+        value={operator}
+        width={150}
+        onChange={handleChangeOperator}
+      />
+    ),
+    string: (
+      <Select
+        data={STRING_FILTER_OPTIONS_DATA}
+        size="xs"
+        value={operator}
+        width={150}
+        onChange={handleChangeOperator}
+      />
+    ),
+  };
+
+  const filterInputValueMap = {
+    'albumArtists.genre': (
+      <Select
+        searchable
+        data={[]}
+        size="xs"
+        value={value}
+        width={150}
+        onChange={handleChangeValue}
+      />
+    ),
+    'albumArtists.name': (
+      <TextInput
+        size="xs"
+        value={value}
+        width={150}
+        onChange={handleChangeValue}
+      />
+    ),
+    'albumArtists.ratings.value': (
+      <NumberInput
+        max={5}
+        min={0}
+        size="xs"
+        value={value}
+        width={150}
+        onChange={handleChangeValue}
+      />
+    ),
+    'albums.dateAdded': (
+      <DatePicker
+        initialLevel="year"
+        maxDate={dayjs(new Date()).year(3000).toDate()}
+        minDate={dayjs(new Date()).year(1950).toDate()}
+        size="xs"
+        value={value}
+        width={150}
+        onChange={handleChangeValue}
+      />
+    ),
+    'albums.genre': (
+      <Select
+        searchable
+        data={[]}
+        size="xs"
+        value={value}
+        width={150}
+        onChange={handleChangeValue}
+      />
+    ),
+    'albums.name': (
+      <TextInput
+        size="xs"
+        value={value}
+        width={150}
+        onChange={handleChangeValue}
+      />
+    ),
+    'albums.playCount': (
+      <NumberInput
+        min={0}
+        size="xs"
+        value={value}
+        width={150}
+        onChange={(e) => handleChangeValue(e)}
+      />
+    ),
+    'albums.ratings.value': (
+      <NumberInput
+        max={5}
+        min={0}
+        size="xs"
+        value={value}
+        width={150}
+        onChange={handleChangeValue}
+      />
+    ),
+    'albums.releaseDate': (
+      <DatePicker
+        initialLevel="year"
+        maxDate={dayjs(new Date()).year(3000).toDate()}
+        minDate={dayjs(new Date()).year(1950).toDate()}
+        size="xs"
+        value={value}
+        width={150}
+        onChange={handleChangeValue}
+      />
+    ),
+    'albums.year': (
+      <NumberInput
+        min={0}
+        size="xs"
+        value={value}
+        width={150}
+        onChange={handleChangeValue}
+      />
+    ),
+    'artists.genre': (
+      <Select
+        searchable
+        data={[]}
+        size="xs"
+        value={value}
+        width={150}
+        onChange={handleChangeValue}
+      />
+    ),
+    'artists.name': (
+      <TextInput
+        size="xs"
+        value={value}
+        width={150}
+        onChange={handleChangeValue}
+      />
+    ),
+    'artists.ratings.value': (
+      <NumberInput
+        max={5}
+        min={0}
+        size="xs"
+        value={value}
+        width={150}
+        onChange={handleChangeValue}
+      />
+    ),
+    'songs.name': (
+      <TextInput size="xs" width={150} onChange={handleChangeValue} />
+    ),
+    'songs.playCount': (
+      <NumberInput
+        min={0}
+        size="xs"
+        value={value}
+        width={150}
+        onChange={handleChangeValue}
+      />
+    ),
+    'songs.ratings.value': (
+      <NumberInput
+        max={5}
+        min={0}
+        size="xs"
+        value={value}
+        width={150}
+        onChange={handleChangeValue}
+      />
+    ),
   };
 
   return (
-    <Group ml={level === 0 ? '10px' : `${level * 10}px`}>
+    <Group ml={`${(level + 1) * 10}px`}>
       <Select
         data={FILTER_OPTIONS_DATA}
         size="xs"
-        onChange={setSelectedOption}
+        value={field}
+        onChange={handleChangeField}
       />
-      {selectedOption &&
+      {field ? (
-        filterMap[
+        filterOperatorMap[
-          OPTIONS_MAP[selectedOption as keyof typeof OPTIONS_MAP]
+          OPTIONS_MAP[field as keyof typeof OPTIONS_MAP]
-            .type as keyof typeof filterMap
+            .type as keyof typeof filterOperatorMap
-        ]}
+        ]
-      {selectedOption &&
+      ) : (
-        filterInputMap[selectedOption as keyof typeof filterInputMap]}
+        <TextInput disabled size="xs" width={150} />
+      )}
+      {field ? (
+        filterInputValueMap[field as keyof typeof filterInputValueMap]
+      ) : (
+        <TextInput disabled size="xs" width={150} />
+      )}
       <Button
         px={5}
         size="xs"
@@ -237,6 +490,10 @@ interface FilterGroupProps {
   level: number;
   onAddRule: (args: AddArgs) => void;
   onAddRuleGroup: (args: AddArgs) => void;
+  onChangeField: (args: any) => void;
+  onChangeOperator: (args: any) => void;
+  onChangeType: (args: any) => void;
+  onChangeValue: (args: any) => void;
   onDeleteRule: (args: DeleteArgs) => void;
   onDeleteRuleGroup: (args: DeleteArgs) => void;
   uniqueId: string;
@@ -249,6 +506,10 @@ const FilterGroup = ({
   onDeleteRuleGroup,
   onDeleteRule,
   onAddRuleGroup,
+  onChangeType,
+  onChangeField,
+  onChangeOperator,
+  onChangeValue,
   groupIndex,
   uniqueId,
 }: FilterGroupProps) => {
@@ -264,13 +525,18 @@ const FilterGroup = ({
     onDeleteRuleGroup({ groupIndex, level, uniqueId });
   };
 
+  const handleChangeType = (value: string | null) => {
+    onChangeType({ groupIndex, level, value });
+  };
+
   return (
     <Stack ml={`${level * 10}px`}>
       <Group>
         <Select
           data={FILTER_GROUP_OPTIONS_DATA}
-          defaultValue={FILTER_GROUP_OPTIONS_DATA[0].value}
           size="xs"
+          value={data.type}
+          onChange={handleChangeType}
         />
         <Button
           px={5}
@@ -300,16 +566,16 @@ const FilterGroup = ({
         </DropdownMenu>
       </Group>
       {data.rules.map((rule: AdvancedFilterRule) => (
-        <>
+        <FilterOption
-          <FilterOption
+          key={rule.uniqueId}
-            key={rule.uniqueId}
+          data={rule}
-            groupIndex={groupIndex || []}
+          groupIndex={groupIndex || []}
-            level={level}
+          level={level}
-            uniqueId={rule.uniqueId}
+          onChangeField={onChangeField}
-            onAddRule={handleAddRule}
+          onChangeOperator={onChangeOperator}
-            onDeleteRule={onDeleteRule}
+          onChangeValue={onChangeValue}
-          />
+          onDeleteRule={onDeleteRule}
-        </>
+        />
       ))}
       {data.group && (
         <>
@@ -322,6 +588,10 @@ const FilterGroup = ({
               uniqueId={group.uniqueId}
               onAddRule={onAddRule}
               onAddRuleGroup={onAddRuleGroup}
+              onChangeField={onChangeField}
+              onChangeOperator={onChangeOperator}
+              onChangeType={onChangeType}
+              onChangeValue={onChangeValue}
               onDeleteRule={onDeleteRule}
               onDeleteRuleGroup={onDeleteRuleGroup}
             />
@@ -332,14 +602,7 @@ const FilterGroup = ({
   );
 };
 
-export const AdvancedFilters = () => {
+export const AdvancedFilters = ({ filters, setFilters }: any) => {
-  const [filters, setFilters] = useState<AdvancedFilterGroup>({
-    group: [],
-    rules: [],
-    type: FilterGroupType.AND,
-    uniqueId: nanoid(),
-  });
-
   const handleAddRuleGroup = (args: AddArgs) => {
     const { level, groupIndex } = args;
     const filtersCopy = { ...filters };
@@ -356,12 +619,19 @@ export const AdvancedFilters = () => {
     };
 
     const path = getPath(level);
-    const updatedFilters = _.set(filtersCopy, path, [
+    const updatedFilters = set(filtersCopy, path, [
-      ..._.get(filtersCopy, path),
+      ...get(filtersCopy, path),
       {
         group: [],
-        rules: [],
+        rules: [
-        type: 'push',
+          {
+            field: undefined,
+            operator: undefined,
+            uniqueId: nanoid(),
+            value: undefined,
+          },
+        ],
+        type: FilterGroupType.AND,
         uniqueId: nanoid(),
       },
     ]);
@@ -390,8 +660,8 @@ export const AdvancedFilters = () => {
 
     const path = getPath(level);
 
-    const updatedFilters = _.set(filtersCopy, path, [
+    const updatedFilters = set(filtersCopy, path, [
-      ..._.get(filtersCopy, path).filter(
+      ...get(filtersCopy, path).filter(
         (group: AdvancedFilterGroup) => group.uniqueId !== uniqueId
       ),
     ]);
@@ -399,25 +669,30 @@ export const AdvancedFilters = () => {
     setFilters(updatedFilters);
   };
 
+  const getRulePath = (level: number, groupIndex: number[]) => {
+    if (level === 0) return 'rules';
+
+    const str = [];
+    for (const index of groupIndex) {
+      str.push(`group[${index}]`);
+    }
+
+    return `${str.join('.')}.rules`;
+  };
+
   const handleAddRule = (args: AddArgs) => {
     const { level, groupIndex } = args;
     const filtersCopy = { ...filters };
 
-    const getPath = (level: number) => {
+    const path = getRulePath(level, groupIndex);
-      if (level === 0) return 'rules';
+    const updatedFilters = set(filtersCopy, path, [
-
+      ...get(filtersCopy, path),
-      const str = [];
+      {
-      for (const index of groupIndex) {
+        field: null,
-        str.push(`group[${index}]`);
+        operator: null,
-      }
+        uniqueId: nanoid(),
-
+        value: null,
-      return `${str.join('.')}.rules`;
+      },
-    };
-
-    const path = getPath(level);
-    const updatedFilters = _.set(filtersCopy, path, [
-      ..._.get(filtersCopy, path),
-      { filter: 'newrule', uniqueId: nanoid() },
     ]);
 
     setFilters(updatedFilters);
@@ -427,22 +702,11 @@ export const AdvancedFilters = () => {
     const { uniqueId, level, groupIndex } = args;
     const filtersCopy = { ...filters };
 
-    const getPath = (level: number) => {
+    const path = getRulePath(level, groupIndex);
-      if (level === 0) return 'rules';
+    const updatedFilters = set(
-
-      const str = [];
-      for (const index of groupIndex) {
-        str.push(`group[${index}]`);
-      }
-
-      return `${str.join('.')}.rules`;
-    };
-
-    const path = getPath(level);
-    const updatedFilters = _.set(
       filtersCopy,
       path,
-      _.get(filtersCopy, path).filter(
+      get(filtersCopy, path).filter(
         (rule: AdvancedFilterRule) => rule.uniqueId !== uniqueId
       )
     );
@@ -450,6 +714,95 @@ export const AdvancedFilters = () => {
     setFilters(updatedFilters);
   };
 
+  const handleChangeField = (args: any) => {
+    const { uniqueId, level, groupIndex, value } = args;
+    const filtersCopy = { ...filters };
+
+    const path = getRulePath(level, groupIndex);
+    const updatedFilters = set(
+      filtersCopy,
+      path,
+      get(filtersCopy, path).map((rule: AdvancedFilterRule) => {
+        if (rule.uniqueId !== uniqueId) return rule;
+        return {
+          ...rule,
+          field: value,
+          operator: null,
+          value: null,
+        };
+      })
+    );
+
+    setFilters(updatedFilters);
+  };
+
+  const handleChangeType = (args: any) => {
+    const { level, groupIndex, value } = args;
+
+    const filtersCopy = { ...filters };
+
+    if (level === 0) {
+      return setFilters({ ...filtersCopy, type: value });
+    }
+
+    const getTypePath = () => {
+      const str = [];
+      for (let i = 0; i < groupIndex.length; i += 1) {
+        str.push(`group[${groupIndex[i]}]`);
+      }
+
+      return `${str.join('.')}`;
+    };
+
+    const path = getTypePath();
+    const updatedFilters = set(filtersCopy, path, {
+      ...get(filtersCopy, path),
+      type: value,
+    });
+
+    return setFilters(updatedFilters);
+  };
+
+  const handleChangeOperator = (args: any) => {
+    const { uniqueId, level, groupIndex, value } = args;
+    const filtersCopy = { ...filters };
+
+    const path = getRulePath(level, groupIndex);
+    const updatedFilters = set(
+      filtersCopy,
+      path,
+      get(filtersCopy, path).map((rule: AdvancedFilterRule) => {
+        if (rule.uniqueId !== uniqueId) return rule;
+        return {
+          ...rule,
+          operator: value,
+        };
+      })
+    );
+
+    setFilters(updatedFilters);
+  };
+
+  const handleChangeValue = (args: any) => {
+    const { uniqueId, level, groupIndex, value } = args;
+    const filtersCopy = { ...filters };
+
+    const path = getRulePath(level, groupIndex);
+    const updatedFilters = set(
+      filtersCopy,
+      path,
+      get(filtersCopy, path).map((rule: AdvancedFilterRule) => {
+        if (rule.uniqueId !== uniqueId) return rule;
+        return {
+          ...rule,
+          value,
+        };
+      })
+    );
+
+    setFilters(updatedFilters);
+  };
+
   return (
     <Box m={10}>
       <FilterGroup
@@ -459,6 +812,10 @@ export const AdvancedFilters = () => {
         uniqueId={filters.uniqueId}
         onAddRule={handleAddRule}
         onAddRuleGroup={handleAddRuleGroup}
+        onChangeField={handleChangeField}
+        onChangeOperator={handleChangeOperator}
+        onChangeType={handleChangeType}
+        onChangeValue={handleChangeValue}
         onDeleteRule={handleDeleteRule}
         onDeleteRuleGroup={handleDeleteRuleGroup}
       />

src/renderer/features/albums/routes/album-list-route.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable no-plusplus */
 import { useState, useCallback, useMemo } from 'react';
 import { Group, Checkbox } from '@mantine/core';
-import { useSetState } from '@mantine/hooks';
+import { useDebouncedValue, useSetState } from '@mantine/hooks';
 import { useQueryClient } from '@tanstack/react-query';
+import { nanoid } from 'nanoid';
 import { RiArrowDownSLine } from 'react-icons/ri';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { api } from '@/renderer/api';
@@ -17,6 +18,11 @@ import {
   VirtualGridContainer,
   VirtualInfiniteGrid,
 } from '@/renderer/components';
+import {
+  AdvancedFilterGroup,
+  AdvancedFilters,
+  FilterGroupType,
+} from '@/renderer/features/albums/components/advanced-filters';
 import { useAlbumList } from '@/renderer/features/albums/queries/use-album-list';
 import { useServerList } from '@/renderer/features/servers';
 import { AnimatedPage, useServerCredential } from '@/renderer/features/shared';
@@ -60,12 +66,23 @@ export const AlbumListRoute = () => {
     sortBy: AlbumSort.NAME,
   });
 
+  const [advancedFilters, setAdvancedFilters] = useState<AdvancedFilterGroup>({
+    group: [],
+    rules: [{ field: null, operator: null, uniqueId: nanoid(), value: null }],
+    type: FilterGroupType.AND,
+    uniqueId: nanoid(),
+  });
+
+  const [debouncedFilters] = useDebouncedValue(advancedFilters, 300);
+  const encoded = encodeURI(JSON.stringify(debouncedFilters));
+
   const serverFolders = useMemo(() => {
     const server = servers?.data.find((server) => server.id === serverId);
     return server?.serverFolders;
   }, [serverId, servers]);
 
   const { data: albums } = useAlbumList({
+    advancedFilters: encoded,
     orderBy: filters.orderBy,
     serverFolderId: filters.serverFolderId,
     skip: 0,
@@ -76,9 +93,17 @@ export const AlbumListRoute = () => {
   const fetch = useCallback(
     async ({ skip, take }) => {
       const albums = await queryClient.fetchQuery(
-        queryKeys.albums.list(serverId, { skip, take, ...filters }),
+        queryKeys.albums.list(serverId, {
+          skip,
+          take,
+          ...filters,
+          advancedFilters: encoded,
+        }),
         async () =>
-          api.albums.getAlbumList({ serverId }, { skip, take, ...filters })
+          api.albums.getAlbumList(
+            { serverId },
+            { skip, take, ...filters, advancedFilters: encoded }
+          )
       );
 
       // * Adds server token
@@ -95,7 +120,7 @@ export const AlbumListRoute = () => {
 
       return albums;
     },
-    [filters, isImageTokenRequired, queryClient, serverId, serverToken]
+    [encoded, filters, isImageTokenRequired, queryClient, serverId, serverToken]
   );
 
   return (
@@ -171,12 +196,18 @@ export const AlbumListRoute = () => {
               </DropdownMenu.Dropdown>
             </DropdownMenu>
           </Group>
-          <ViewTypeButton
+          <Group position="right">
-            handler={setViewType}
+            <ViewTypeButton
-            menuProps={{ position: 'bottom-end' }}
+              handler={setViewType}
-            type={viewType}
+              menuProps={{ position: 'bottom-end' }}
-          />
+              type={viewType}
+            />
+          </Group>
         </Group>
+        <AdvancedFilters
+          filters={advancedFilters}
+          setFilters={setAdvancedFilters}
+        />
         <VirtualGridAutoSizerContainer>
           <AutoSizer>
             {({ height, width }) => (
@@ -201,7 +232,7 @@ export const AlbumListRoute = () => {
                 itemGap={20}
                 itemSize={200}
                 itemType={LibraryItem.ALBUM}
-                minimumBatchSize={100}
+                minimumBatchSize={40}
                 width={width}
               />
             )}