Forward playlist query filters

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

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