Fix custom filter implementation

This commit is contained in:
jeffvli 2023-08-03 19:03:23 -07:00
parent 5896d886d7
commit 505974320f
3 changed files with 51 additions and 22 deletions

View file

@ -105,18 +105,12 @@ export const AlbumListHeaderFilters = ({ gridRef, tableRef }: AlbumListHeaderFil
const onFilterChange = useCallback( const onFilterChange = useCallback(
(filter: AlbumListFilter) => { (filter: AlbumListFilter) => {
if (isGrid) { if (isGrid) {
handleRefreshGrid(gridRef, { handleRefreshGrid(gridRef, filter);
...filter,
...customFilters,
});
} }
handleRefreshTable(tableRef, { handleRefreshTable(tableRef, filter);
...filter,
...customFilters,
});
}, },
[customFilters, gridRef, handleRefreshGrid, handleRefreshTable, isGrid, tableRef], [gridRef, handleRefreshGrid, handleRefreshTable, isGrid, tableRef],
); );
const handleOpenFiltersModal = () => { const handleOpenFiltersModal = () => {

View file

@ -1,7 +1,7 @@
import { ChangeEvent, MouseEvent, MutableRefObject, useCallback, useMemo } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Divider, Flex, Group, Stack } from '@mantine/core'; import { Divider, Flex, Group, Stack } from '@mantine/core';
import { openModal } from '@mantine/modals'; import { openModal } from '@mantine/modals';
import { ChangeEvent, MouseEvent, MutableRefObject, useCallback, useMemo } from 'react';
import { import {
RiAddBoxFill, RiAddBoxFill,
RiAddCircleFill, RiAddCircleFill,
@ -224,7 +224,6 @@ export const SongListHeaderFilters = ({ tableRef }: SongListHeaderFiltersProps)
const onFilterChange = (filter: SongListFilter) => { const onFilterChange = (filter: SongListFilter) => {
handleRefreshTable(tableRef, { handleRefreshTable(tableRef, {
...filter, ...filter,
...customFilters,
}); });
}; };

View file

@ -188,14 +188,30 @@ export const useListStore = create<ListSlice>()(
} }
}); });
return { const filter = get()._actions.getFilter({
...get()._actions.getFilter({ id,
id, itemType: args.itemType,
itemType: args.itemType, key: args.key,
key: args.key, });
}),
const mergedFilters = {
...filter,
...args.customFilters, ...args.customFilters,
_custom: {
...filter._custom,
...args.customFilters?._custom,
jellyfin: {
...filter._custom?.jellyfin,
...args.customFilters?._custom?.jellyfin,
},
navidrome: {
...filter._custom?.navidrome,
...args.customFilters?._custom?.navidrome,
},
},
}; };
return mergedFilters;
}, },
setGrid: (args) => { setGrid: (args) => {
const [page, id] = args.key.split('_'); const [page, id] = args.key.split('_');
@ -622,13 +638,33 @@ export const useListStoreByKey = <TFilter>(args: { filter?: Partial<TFilter>; ke
); );
}; };
export const useListFilterByKey = <TFilter>(args: { filter?: Partial<TFilter>; key: string }) => { export const useListFilterByKey = <TFilter>(args: {
filter?: Partial<TFilter> | any;
key: string;
}) => {
const key = args.key as keyof ListState['item']; const key = args.key as keyof ListState['item'];
return useListStore( return useListStore(
(state) => ({ (state) => {
...state.item[key].filter, return {
...args.filter, ...state.item[key].filter,
}), ...(args.filter && {
...args.filter,
_custom: {
...state.item[key].filter._custom,
...args.filter?._custom,
jellyfin: {
...state.item[key].filter._custom?.jellyfin,
...args.filter?._custom?.jellyfin,
},
navidrome: {
...state.item[key].filter._custom?.navidrome,
...args.filter?._custom?.navidrome,
},
},
}),
};
},
shallow, shallow,
); );
}; };