Add inPlaylist and notInPlaylist operators

src/renderer/api/navidrome.types.ts

@@ -400,6 +400,7 @@ export const NDSongQueryFields = [
     { label: 'File Type', type: 'string', value: 'filetype' },
     { label: 'Genre', type: 'string', value: 'genre' },
     { label: 'Has CoverArt', type: 'boolean', value: 'hascoverart' },
+    { label: 'Playlist', type: 'playlist', value: 'id' },
     { label: 'Is Compilation', type: 'boolean', value: 'compilation' },
     { label: 'Is Favorite', type: 'boolean', value: 'loved' },
     { label: 'Lyrics', type: 'string', value: 'lyrics' },
@@ -415,6 +416,11 @@ export const NDSongQueryFields = [
     { label: 'Year', type: 'number', value: 'year' },
 ];
 
+export const NDSongQueryPlaylistOperators = [
+    { label: 'is in', value: 'inPlaylist' },
+    { label: 'is not in', value: 'notInPlaylist' },
+];
+
 export const NDSongQueryDateOperators = [
     { label: 'is', value: 'is' },
     { label: 'is not', value: 'isNot' },

src/renderer/components/query-builder/index.tsx

@@ -54,8 +54,10 @@ interface QueryBuilderProps {
         boolean: { label: string; value: string }[];
         date: { label: string; value: string }[];
         number: { label: string; value: string }[];
+        playlist: { label: string; value: string }[];
         string: { label: string; value: string }[];
     };
+    playlists?: { label: string; value: string }[];
     uniqueId: string;
 }
 
@@ -73,6 +75,7 @@ export const QueryBuilder = ({
     onChangeValue,
     onClearFilters,
     onResetFilters,
+    playlists,
     groupIndex,
     uniqueId,
     filters,
@@ -180,6 +183,7 @@ export const QueryBuilder = ({
                             level={level}
                             noRemove={data?.rules?.length === 1}
                             operators={operators}
+                            selectData={playlists}
                             onChangeField={onChangeField}
                             onChangeOperator={onChangeOperator}
                             onChangeValue={onChangeValue}
@@ -204,6 +208,7 @@ export const QueryBuilder = ({
                                 groupIndex={[...(groupIndex || []), index]}
                                 level={level + 1}
                                 operators={operators}
+                                playlists={playlists}
                                 uniqueId={group.uniqueId}
                                 onAddRule={onAddRule}
                                 onAddRuleGroup={onAddRuleGroup}

src/renderer/components/query-builder/query-builder-option.tsx

@@ -28,9 +28,10 @@ interface QueryOptionProps {
         number: { label: string; value: string }[];
         string: { label: string; value: string }[];
     };
+    selectData?: { label: string; value: string }[];
 }
 
-const QueryValueInput = ({ onChange, type, ...props }: any) => {
+const QueryValueInput = ({ onChange, type, data, ...props }: any) => {
     const [numberRange, setNumberRange] = useState([0, 0]);
 
     switch (type) {
@@ -59,7 +60,6 @@ const QueryValueInput = ({ onChange, type, ...props }: any) => {
                     {...props}
                 />
             );
-
         case 'dateRange':
             return (
                 <>
@@ -87,7 +87,6 @@ const QueryValueInput = ({ onChange, type, ...props }: any) => {
                     />
                 </>
             );
-
         case 'boolean':
             return (
                 <Select
@@ -99,6 +98,14 @@ const QueryValueInput = ({ onChange, type, ...props }: any) => {
                     {...props}
                 />
             );
+        case 'playlist':
+            return (
+                <Select
+                    data={data}
+                    onChange={onChange}
+                    {...props}
+                />
+            );
 
         default:
             return <></>;
@@ -116,6 +123,7 @@ export const QueryBuilderOption = ({
     onChangeField,
     onChangeOperator,
     onChangeValue,
+    selectData,
 }: QueryOptionProps) => {
     const { field, operator, uniqueId, value } = data;
 
@@ -133,10 +141,7 @@ export const QueryBuilderOption = ({
 
     const handleChangeValue = (e: any) => {
         const isDirectValue =
-            typeof e === 'string' ||
+            typeof e === 'string' || typeof e === 'number' || typeof e === 'undefined';
-            typeof e === 'number' ||
-            typeof e === 'undefined' ||
-            typeof e === null;
 
         if (isDirectValue) {
             return onChangeValue({
@@ -207,6 +212,7 @@ export const QueryBuilderOption = ({
             />
             {field ? (
                 <QueryValueInput
+                    data={selectData || []}
                     defaultValue={value}
                     maxWidth={170}
                     size="sm"

src/renderer/features/playlists/components/playlist-query-builder.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, Ref, useImperativeHandle, useState } from 'react';
+import { forwardRef, Ref, useImperativeHandle, useMemo, useState } from 'react';
 import { Group } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import clone from 'lodash/clone';
@@ -21,14 +21,17 @@ import {
 import { QueryBuilderGroup, QueryBuilderRule } from '/@/renderer/types';
 import { useTranslation } from 'react-i18next';
 import { RiMore2Fill, RiSaveLine } from 'react-icons/ri';
-import { SongListSort } from '/@/renderer/api/types';
+import { PlaylistListSort, SongListSort, SortOrder } from '/@/renderer/api/types';
 import {
     NDSongQueryBooleanOperators,
     NDSongQueryDateOperators,
     NDSongQueryFields,
     NDSongQueryNumberOperators,
+    NDSongQueryPlaylistOperators,
     NDSongQueryStringOperators,
 } from '/@/renderer/api/navidrome.types';
+import { usePlaylistList } from '/@/renderer/features/playlists/queries/playlist-list-query';
+import { useCurrentServer } from '/@/renderer/store';
 
 type AddArgs = {
     groupIndex: number[];
@@ -88,10 +91,24 @@ export const PlaylistQueryBuilder = forwardRef(
         ref: Ref<PlaylistQueryBuilderRef>,
     ) => {
         const { t } = useTranslation();
+        const server = useCurrentServer();
         const [filters, setFilters] = useState<QueryBuilderGroup>(
             query ? convertNDQueryToQueryGroup(query) : DEFAULT_QUERY,
         );
 
+        const { data: playlists } = usePlaylistList({
+            query: { sortBy: PlaylistListSort.NAME, sortOrder: SortOrder.ASC, startIndex: 0 },
+            serverId: server?.id,
+        });
+
+        const playlistData = useMemo(() => {
+            if (!playlists) return [];
+            return playlists.items.map((p) => ({
+                label: p.name,
+                value: p.id,
+            }));
+        }, [playlists]);
+
         const extraFiltersForm = useForm({
             initialValues: {
                 limit,
@@ -367,7 +384,7 @@ export const PlaylistQueryBuilder = forwardRef(
         return (
             <MotionFlex
                 direction="column"
-                h="calc(100% - 2.5rem)"
+                h="calc(100% - 3.5rem)"
                 justify="space-between"
             >
                 <ScrollArea
@@ -383,8 +400,10 @@ export const PlaylistQueryBuilder = forwardRef(
                             boolean: NDSongQueryBooleanOperators,
                             date: NDSongQueryDateOperators,
                             number: NDSongQueryNumberOperators,
+                            playlist: NDSongQueryPlaylistOperators,
                             string: NDSongQueryStringOperators,
                         }}
+                        playlists={playlistData}
                         uniqueId={filters.uniqueId}
                         onAddRule={handleAddRule}
                         onAddRuleGroup={handleAddRuleGroup}