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(
(filter: AlbumListFilter) => {
if (isGrid) {
handleRefreshGrid(gridRef, {
...filter,
...customFilters,
});
handleRefreshGrid(gridRef, filter);
}
handleRefreshTable(tableRef, {
...filter,
...customFilters,
});
handleRefreshTable(tableRef, filter);
},
[customFilters, gridRef, handleRefreshGrid, handleRefreshTable, isGrid, tableRef],
[gridRef, handleRefreshGrid, handleRefreshTable, isGrid, tableRef],
);
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 { Divider, Flex, Group, Stack } from '@mantine/core';
import { openModal } from '@mantine/modals';
import { ChangeEvent, MouseEvent, MutableRefObject, useCallback, useMemo } from 'react';
import {
RiAddBoxFill,
RiAddCircleFill,
@ -224,7 +224,6 @@ export const SongListHeaderFilters = ({ tableRef }: SongListHeaderFiltersProps)
const onFilterChange = (filter: SongListFilter) => {
handleRefreshTable(tableRef, {
...filter,
...customFilters,
});
};

View file

@ -188,14 +188,30 @@ export const useListStore = create<ListSlice>()(
}
});
return {
...get()._actions.getFilter({
const filter = get()._actions.getFilter({
id,
itemType: args.itemType,
key: args.key,
}),
});
const mergedFilters = {
...filter,
...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) => {
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'];
return useListStore(
(state) => ({
(state) => {
return {
...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,
);
};