update fields and add multiselect to smart playlist sort

This commit is contained in:
jeffvli
2025-11-28 22:30:10 -08:00
parent 9b17d3513a
commit 72e2e6daca
5 changed files with 63 additions and 26 deletions
@@ -57,13 +57,18 @@ export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => {
const smartPlaylist = queryBuilderRef.current?.getFilters();
const sortValue =
isSmartPlaylist && smartPlaylist?.extraFilters?.sortBy
? smartPlaylist.extraFilters.sortBy.join(',')
: undefined;
const rules =
isSmartPlaylist && smartPlaylist?.filters
? {
...convertQueryGroupToNDQuery(smartPlaylist.filters),
limit: smartPlaylist.extraFilters.limit,
order: smartPlaylist.extraFilters.sortOrder,
sort: smartPlaylist.extraFilters.sortBy,
sort: sortValue || 'dateAdded',
}
: undefined;
@@ -165,7 +170,7 @@ export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => {
limit={undefined}
query={undefined}
ref={queryBuilderRef}
sortBy={SongListSort.ALBUM}
sortBy={[SongListSort.ALBUM]}
sortOrder="asc"
/>
</Stack>
@@ -53,7 +53,7 @@ export const PlaylistDetailSongListHeader = ({
{formatDurationString(playlistDuration)}
</LibraryHeaderBar.Badge>
)}
<LibraryHeaderBar.Badge isLoading={!itemCount}>
<LibraryHeaderBar.Badge isLoading={!!itemCount}>
{itemCount}
</LibraryHeaderBar.Badge>
</LibraryHeaderBar>
@@ -30,6 +30,7 @@ import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
import { Flex } from '/@/shared/components/flex/flex';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { MultiSelect } from '/@/shared/components/multi-select/multi-select';
import { NumberInput } from '/@/shared/components/number-input/number-input';
import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
import { Select } from '/@/shared/components/select/select';
@@ -52,15 +53,15 @@ interface PlaylistQueryBuilderProps {
limit?: number;
onSave?: (
parsedFilter: any,
extraFilters: { limit?: number; sortBy?: string; sortOrder?: string },
extraFilters: { limit?: number; sortBy?: string[]; sortOrder?: string },
) => void;
onSaveAs?: (
parsedFilter: any,
extraFilters: { limit?: number; sortBy?: string; sortOrder?: string },
extraFilters: { limit?: number; sortBy?: string[]; sortOrder?: string },
) => void;
playlistId?: string;
query: any;
sortBy: SongListSort;
sortBy: SongListSort | SongListSort[];
sortOrder: 'asc' | 'desc';
}
@@ -82,7 +83,7 @@ export type PlaylistQueryBuilderRef = {
getFilters: () => {
extraFilters: {
limit?: number;
sortBy?: string;
sortBy?: string[];
sortOrder?: string;
};
filters: QueryBuilderGroup;
@@ -133,7 +134,7 @@ export const PlaylistQueryBuilder = forwardRef(
const extraFiltersForm = useForm({
initialValues: {
limit,
sortBy,
sortBy: Array.isArray(sortBy) ? sortBy : sortBy ? [sortBy] : [],
sortOrder,
},
});
@@ -442,13 +443,12 @@ export const PlaylistQueryBuilder = forwardRef(
/>
</ScrollArea>
<Group align="flex-end" justify="space-between" m="1rem" wrap="nowrap">
<Group gap="sm" w="100%" wrap="nowrap">
<Select
<Group align="flex-end" gap="sm" w="100%" wrap="nowrap">
<MultiSelect
data={sortOptions}
label="Sort"
maxWidth="20%"
maxWidth="50%"
searchable
width={150}
{...extraFiltersForm.getInputProps('sortBy')}
/>
<Select