pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Forward playlist query filters

Browse source
This commit is contained in:
jeffvli 2023-01-15 21:57:44 -08:00
parent 9a809a61dd
commit e5f478218e
1 changed files with 361 additions and 337 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { useState } from 'react'; import { forwardRef, Ref, useImperativeHandle, useState } from 'react';
import { Group } from '@mantine/core'; import { Group } from '@mantine/core';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import clone from 'lodash/clone'; import clone from 'lodash/clone';
@ -20,7 +20,7 @@ import {
} from '/@/renderer/features/playlists/utils'; } from '/@/renderer/features/playlists/utils';
import { QueryBuilderGroup, QueryBuilderRule } from '/@/renderer/types'; import { QueryBuilderGroup, QueryBuilderRule } from '/@/renderer/types';
import { RiMore2Fill, RiSaveLine } from 'react-icons/ri'; import { RiMore2Fill, RiSaveLine } from 'react-icons/ri';
import { SongListSort, SortOrder } from '/@/renderer/api/types'; import { SongListSort } from '/@/renderer/api/types';
import { import {
NDSongQueryBooleanOperators, NDSongQueryBooleanOperators,
NDSongQueryDateOperators, NDSongQueryDateOperators,
@ -43,17 +43,17 @@ type DeleteArgs = {
interface PlaylistQueryBuilderProps { interface PlaylistQueryBuilderProps {
isSaving?: boolean; isSaving?: boolean;
limit?: number; limit?: number;
onSave: ( onSave?: (
parsedFilter: any, parsedFilter: any,
extraFilters: { limit?: number; sortBy?: string; sortOrder?: string }, extraFilters: { limit?: number; sortBy?: string; sortOrder?: string },
) => void; ) => void;
onSaveAs: ( onSaveAs?: (
parsedFilter: any, parsedFilter: any,
extraFilters: { limit?: number; sortBy?: string; sortOrder?: string }, extraFilters: { limit?: number; sortBy?: string; sortOrder?: string },
) => void; ) => void;
query: any; query: any;
sortBy: SongListSort; sortBy: SongListSort;
sortOrder: SortOrder; sortOrder: 'asc' | 'desc';
} }
const DEFAULT_QUERY = { const DEFAULT_QUERY = {
@ -70,15 +70,22 @@ const DEFAULT_QUERY = {
uniqueId: nanoid(), uniqueId: nanoid(),
}; };
export const PlaylistQueryBuilder = ({ export type PlaylistQueryBuilderRef = {
sortOrder, getFilters: () => {
sortBy, extraFilters: {
limit, limit?: number;
isSaving, sortBy?: string;
query, sortOrder?: string;
onSave, };
onSaveAs, filters: QueryBuilderGroup;
}: PlaylistQueryBuilderProps) => { };
};
export const PlaylistQueryBuilder = forwardRef(
(
{ sortOrder, sortBy, limit, isSaving, query, onSave, onSaveAs }: PlaylistQueryBuilderProps,
ref: Ref<PlaylistQueryBuilderRef>,
) => {
const [filters, setFilters] = useState<QueryBuilderGroup>( const [filters, setFilters] = useState<QueryBuilderGroup>(
query ? convertNDQueryToQueryGroup(query) : DEFAULT_QUERY, query ? convertNDQueryToQueryGroup(query) : DEFAULT_QUERY,
); );
@ -91,6 +98,13 @@ export const PlaylistQueryBuilder = ({
}, },
}); });
useImperativeHandle(ref, () => ({
getFilters: () => ({
extraFilters: extraFiltersForm.values,
filters,
}),
}));
const handleResetFilters = () => { const handleResetFilters = () => {
if (query) { if (query) {
setFilters(convertNDQueryToQueryGroup(query)); setFilters(convertNDQueryToQueryGroup(query));
@ -108,11 +122,11 @@ export const PlaylistQueryBuilder = ({
}; };
const handleSave = () => { const handleSave = () => {
onSave(convertQueryGroupToNDQuery(filters), extraFiltersForm.values); onSave?.(convertQueryGroupToNDQuery(filters), extraFiltersForm.values);
}; };
const handleSaveAs = () => { const handleSaveAs = () => {
onSaveAs(convertQueryGroupToNDQuery(filters), extraFiltersForm.values); onSaveAs?.(convertQueryGroupToNDQuery(filters), extraFiltersForm.values);
}; };
const handleAddRuleGroup = (args: AddArgs) => { const handleAddRuleGroup = (args: AddArgs) => {
@ -180,7 +194,11 @@ export const PlaylistQueryBuilder = ({
const updatedFilters = setWith( const updatedFilters = setWith(
filtersCopy, filtersCopy,
path, path,
[...get(filtersCopy, path).filter((group: QueryBuilderGroup) => group.uniqueId !== uniqueId)], [
...get(filtersCopy, path).filter(
(group: QueryBuilderGroup) => group.uniqueId !== uniqueId,
),
],
clone, clone,
); );
@ -333,7 +351,10 @@ export const PlaylistQueryBuilder = ({
setFilterHandler(updatedFilters); setFilterHandler(updatedFilters);
}; };
const sortOptions = [{ label: 'Random', type: 'string', value: 'random' }, ...NDSongQueryFields]; const sortOptions = [
{ label: 'Random', type: 'string', value: 'random' },
...NDSongQueryFields,
];
return ( return (
<MotionFlex <MotionFlex
@ -410,6 +431,7 @@ export const PlaylistQueryBuilder = ({
{...extraFiltersForm.getInputProps('limit')} {...extraFiltersForm.getInputProps('limit')}
/> />
</Group> </Group>
{onSave && onSaveAs && (
<Group noWrap> <Group noWrap>
<Button <Button
loading={isSaving} loading={isSaving}
@ -444,7 +466,9 @@ export const PlaylistQueryBuilder = ({
</DropdownMenu.Dropdown> </DropdownMenu.Dropdown>
</DropdownMenu> </DropdownMenu>
</Group> </Group>
)}
</Group> </Group>
</MotionFlex> </MotionFlex>
); );
}; },
);