diff --git a/src/renderer/features/playlists/components/create-playlist-form.tsx b/src/renderer/features/playlists/components/create-playlist-form.tsx index 404a3996..8e341499 100644 --- a/src/renderer/features/playlists/components/create-playlist-form.tsx +++ b/src/renderer/features/playlists/components/create-playlist-form.tsx @@ -1,8 +1,14 @@ import { Group, Stack } from '@mantine/core'; import { useForm } from '@mantine/form'; -import { CreatePlaylistBody, ServerType } from '/@/renderer/api/types'; -import { Button, Switch, TextInput, toast } from '/@/renderer/components'; +import { useRef, useState } from 'react'; +import { CreatePlaylistBody, ServerType, SongListSort } from '/@/renderer/api/types'; +import { Button, Switch, Text, TextInput, toast } from '/@/renderer/components'; +import { + PlaylistQueryBuilder, + PlaylistQueryBuilderRef, +} from '/@/renderer/features/playlists/components/playlist-query-builder'; import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation'; +import { convertQueryGroupToNDQuery } from '/@/renderer/features/playlists/utils'; import { useCurrentServer } from '/@/renderer/store'; interface CreatePlaylistFormProps { @@ -12,6 +18,7 @@ interface CreatePlaylistFormProps { export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => { const mutation = useCreatePlaylist(); const server = useCurrentServer(); + const queryBuilderRef = useRef(null); const form = useForm({ initialValues: { @@ -23,10 +30,34 @@ export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => { }, }, }); + const [isSmartPlaylist, setIsSmartPlaylist] = useState(false); const handleSubmit = form.onSubmit((values) => { + if (isSmartPlaylist) { + values.ndParams = { + ...values.ndParams, + rules: queryBuilderRef.current?.getFilters(), + }; + } + + const smartPlaylist = queryBuilderRef.current?.getFilters(); + mutation.mutate( - { body: values }, + { + body: { + ...values, + ndParams: { + ...values.ndParams, + rules: + isSmartPlaylist && smartPlaylist?.filters + ? { + ...convertQueryGroupToNDQuery(smartPlaylist.filters), + ...smartPlaylist.extraFilters, + } + : undefined, + }, + }, + }, { onError: (err) => { toast.error({ message: err.message, title: 'Error creating playlist' }); @@ -55,12 +86,34 @@ export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => { label="Description" {...form.getInputProps('comment')} /> - {isPublicDisplayed && ( - + + {isPublicDisplayed && ( + + )} + {server?.type === ServerType.NAVIDROME && ( + setIsSmartPlaylist(e.currentTarget.checked)} + /> + )} + + {server?.type === ServerType.NAVIDROME && isSmartPlaylist && ( + + Query Editor + + )} +