mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 18:33:33 +00:00
Begin normalizing list stores
This commit is contained in:
jeffvli
parent
918b77eebb
commit
ae292e3a5f
22 changed files with 1057 additions and 764 deletions
|
|
@ -19,13 +19,11 @@ import { Album, AlbumListQuery, AlbumListSort, LibraryItem } from '/@/renderer/a
|
|||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
useCurrentServer,
|
||||
useSetAlbumStore,
|
||||
useAlbumListStore,
|
||||
useAlbumTablePagination,
|
||||
useSetAlbumTable,
|
||||
useSetAlbumTablePagination,
|
||||
useAlbumListItemData,
|
||||
AlbumListFilter,
|
||||
useListStoreActions,
|
||||
useAlbumListFilter,
|
||||
} from '/@/renderer/store';
|
||||
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||
import {
|
||||
|
|
@ -43,6 +41,7 @@ import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/cont
|
|||
import { generatePath, useNavigate } from 'react-router';
|
||||
import { usePlayQueueAdd } from '/@/renderer/features/player';
|
||||
import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
|
||||
import { useAlbumListContext } from '/@/renderer/features/albums/context/album-list-context';
|
||||
|
||||
interface AlbumListContentProps {
|
||||
customFilters?: Partial<AlbumListFilter>;
|
||||
|
|
@ -60,23 +59,18 @@ export const AlbumListContent = ({
|
|||
const queryClient = useQueryClient();
|
||||
const navigate = useNavigate();
|
||||
const server = useCurrentServer();
|
||||
const page = useAlbumListStore();
|
||||
const setPage = useSetAlbumStore();
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
|
||||
const { itemData, setItemData } = useAlbumListItemData();
|
||||
const [localItemData, setLocalItemData] = useState<any[]>([]);
|
||||
|
||||
const pagination = useAlbumTablePagination();
|
||||
const setPagination = useSetAlbumTablePagination();
|
||||
const setTable = useSetAlbumTable();
|
||||
const { id, pageKey } = useAlbumListContext();
|
||||
const filter = useAlbumListFilter({ id, key: pageKey });
|
||||
const { setTable, setTablePagination, setGrid } = useListStoreActions();
|
||||
const { table, grid, display } = useAlbumListStore();
|
||||
const isPaginationEnabled = display === ListDisplayType.TABLE_PAGINATED;
|
||||
|
||||
const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
|
||||
|
||||
const columnDefs: ColDef[] = useMemo(
|
||||
() => getColumnDefs(page.table.columns),
|
||||
[page.table.columns],
|
||||
);
|
||||
const columnDefs: ColDef[] = useMemo(() => getColumnDefs(table.columns), [table.columns]);
|
||||
|
||||
const onTableReady = useCallback(
|
||||
(params: GridReadyEvent) => {
|
||||
|
|
@ -88,18 +82,20 @@ export const AlbumListContent = ({
|
|||
const query: AlbumListQuery = {
|
||||
limit,
|
||||
startIndex,
|
||||
...page.filter,
|
||||
...filter,
|
||||
...customFilters,
|
||||
jfParams: {
|
||||
...page.filter.jfParams,
|
||||
...filter.jfParams,
|
||||
...customFilters?.jfParams,
|
||||
},
|
||||
ndParams: {
|
||||
...page.filter.ndParams,
|
||||
...filter.ndParams,
|
||||
...customFilters?.ndParams,
|
||||
},
|
||||
};
|
||||
|
||||
console.log('query', query);
|
||||
|
||||
const queryKey = queryKeys.albums.list(server?.id || '', query);
|
||||
|
||||
const albumsRes = await queryClient.fetchQuery(
|
||||
|
|
@ -121,10 +117,10 @@ export const AlbumListContent = ({
|
|||
params.api.setDatasource(dataSource);
|
||||
|
||||
if (!customFilters) {
|
||||
params.api.ensureIndexVisible(page.table.scrollOffset || 0, 'top');
|
||||
params.api.ensureIndexVisible(table.scrollOffset || 0, 'top');
|
||||
}
|
||||
},
|
||||
[customFilters, page.filter, page.table.scrollOffset, queryClient, server],
|
||||
[customFilters, filter, table.scrollOffset, queryClient, server],
|
||||
);
|
||||
|
||||
const onTablePaginationChanged = useCallback(
|
||||
|
|
@ -133,19 +129,28 @@ export const AlbumListContent = ({
|
|||
|
||||
try {
|
||||
// Scroll to top of page on pagination change
|
||||
const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
|
||||
const currentPageStartIndex = table.pagination.currentPage * table.pagination.itemsPerPage;
|
||||
event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
setPagination({
|
||||
itemsPerPage: event.api.paginationGetPageSize(),
|
||||
totalItems: event.api.paginationGetRowCount(),
|
||||
totalPages: event.api.paginationGetTotalPages() + 1,
|
||||
setTablePagination({
|
||||
data: {
|
||||
itemsPerPage: event.api.paginationGetPageSize(),
|
||||
totalItems: event.api.paginationGetRowCount(),
|
||||
totalPages: event.api.paginationGetTotalPages() + 1,
|
||||
},
|
||||
key: pageKey,
|
||||
});
|
||||
},
|
||||
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
|
||||
[
|
||||
isPaginationEnabled,
|
||||
setTablePagination,
|
||||
pageKey,
|
||||
table.pagination.currentPage,
|
||||
table.pagination.itemsPerPage,
|
||||
],
|
||||
);
|
||||
|
||||
const handleTableColumnChange = useCallback(() => {
|
||||
|
|
@ -154,7 +159,7 @@ export const AlbumListContent = ({
|
|||
|
||||
if (!columnsOrder) return;
|
||||
|
||||
const columnsInSettings = page.table.columns;
|
||||
const columnsInSettings = table.columns;
|
||||
const updatedColumns = [];
|
||||
for (const column of columnsOrder) {
|
||||
const columnInSettings = columnsInSettings.find((c) => c.column === column.getColDef().colId);
|
||||
|
|
@ -162,22 +167,22 @@ export const AlbumListContent = ({
|
|||
if (columnInSettings) {
|
||||
updatedColumns.push({
|
||||
...columnInSettings,
|
||||
...(!page.table.autoFit && {
|
||||
...(!table.autoFit && {
|
||||
width: column.getColDef().width,
|
||||
}),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setTable({ columns: updatedColumns });
|
||||
}, [page.table.autoFit, page.table.columns, setTable, tableRef]);
|
||||
setTable({ data: { columns: updatedColumns }, key: pageKey });
|
||||
}, [tableRef, table.columns, table.autoFit, setTable, pageKey]);
|
||||
|
||||
const debouncedTableColumnChange = debounce(handleTableColumnChange, 200);
|
||||
|
||||
const handleTableScroll = (e: BodyScrollEvent) => {
|
||||
if (customFilters) return;
|
||||
const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
|
||||
setTable({ scrollOffset });
|
||||
const scrollOffset = Number((e.top / table.rowHeight).toFixed(0));
|
||||
setTable({ data: { scrollOffset }, key: pageKey });
|
||||
};
|
||||
|
||||
const fetch = useCallback(
|
||||
|
|
@ -185,14 +190,14 @@ export const AlbumListContent = ({
|
|||
const query: AlbumListQuery = {
|
||||
limit: take,
|
||||
startIndex: skip,
|
||||
...page.filter,
|
||||
...filter,
|
||||
...customFilters,
|
||||
jfParams: {
|
||||
...page.filter.jfParams,
|
||||
...filter.jfParams,
|
||||
...customFilters?.jfParams,
|
||||
},
|
||||
ndParams: {
|
||||
...page.filter.ndParams,
|
||||
...filter.ndParams,
|
||||
...customFilters?.ndParams,
|
||||
},
|
||||
};
|
||||
|
|
@ -209,29 +214,21 @@ export const AlbumListContent = ({
|
|||
|
||||
return api.normalize.albumList(albums, server);
|
||||
},
|
||||
[customFilters, page.filter, queryClient, server],
|
||||
[customFilters, filter, queryClient, server],
|
||||
);
|
||||
|
||||
const handleGridScroll = useCallback(
|
||||
(e: ListOnScrollProps) => {
|
||||
if (customFilters) return;
|
||||
setPage({
|
||||
list: {
|
||||
...page,
|
||||
grid: {
|
||||
...page.grid,
|
||||
scrollOffset: e.scrollOffset,
|
||||
},
|
||||
},
|
||||
});
|
||||
setGrid({ data: { scrollOffset: e.scrollOffset }, key: pageKey });
|
||||
},
|
||||
[customFilters, page, setPage],
|
||||
[customFilters, pageKey, setGrid],
|
||||
);
|
||||
|
||||
const cardRows = useMemo(() => {
|
||||
const rows: CardRow<Album>[] = [ALBUM_CARD_ROWS.name];
|
||||
|
||||
switch (page.filter.sortBy) {
|
||||
switch (filter.sortBy) {
|
||||
case AlbumListSort.ALBUM_ARTIST:
|
||||
rows.push(ALBUM_CARD_ROWS.albumArtists);
|
||||
rows.push(ALBUM_CARD_ROWS.releaseYear);
|
||||
|
|
@ -289,7 +286,7 @@ export const AlbumListContent = ({
|
|||
}
|
||||
|
||||
return rows;
|
||||
}, [page.filter.sortBy]);
|
||||
}, [filter.sortBy]);
|
||||
|
||||
const handleContextMenu = useHandleTableContextMenu(LibraryItem.ALBUM, ALBUM_CONTEXT_MENU_ITEMS);
|
||||
|
||||
|
|
@ -326,24 +323,24 @@ export const AlbumListContent = ({
|
|||
return (
|
||||
<>
|
||||
<VirtualGridAutoSizerContainer>
|
||||
{page.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER ? (
|
||||
{display === ListDisplayType.CARD || display === ListDisplayType.POSTER ? (
|
||||
<AutoSizer>
|
||||
{({ height, width }) => (
|
||||
<>
|
||||
<VirtualInfiniteGrid
|
||||
key={`album-list-${server?.id}-${page.display}`}
|
||||
key={`album-list-${server?.id}-${display}`}
|
||||
ref={gridRef}
|
||||
cardRows={cardRows}
|
||||
display={page.display || ListDisplayType.CARD}
|
||||
display={display || ListDisplayType.CARD}
|
||||
fetchFn={fetch}
|
||||
handleFavorite={handleFavorite}
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
height={height}
|
||||
initialScrollOffset={customFilters ? 0 : page?.grid.scrollOffset || 0}
|
||||
initialScrollOffset={customFilters ? 0 : grid?.scrollOffset || 0}
|
||||
itemCount={itemCount || 0}
|
||||
itemData={customFilters ? localItemData : itemData}
|
||||
itemGap={20}
|
||||
itemSize={150 + page.grid?.size}
|
||||
itemSize={150 + (grid?.size || 0)}
|
||||
itemType={LibraryItem.ALBUM}
|
||||
loading={itemCount === undefined || itemCount === null}
|
||||
minimumBatchSize={40}
|
||||
|
|
@ -362,20 +359,20 @@ export const AlbumListContent = ({
|
|||
<VirtualTable
|
||||
// https://github.com/ag-grid/ag-grid/issues/5284
|
||||
// Key is used to force remount of table when display, rowHeight, or server changes
|
||||
key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
|
||||
key={`table-${display}-${table.rowHeight}-${server?.id}`}
|
||||
ref={tableRef}
|
||||
alwaysShowHorizontalScroll
|
||||
suppressRowDrag
|
||||
autoFitColumns={page.table.autoFit}
|
||||
autoFitColumns={table.autoFit}
|
||||
blockLoadDebounceMillis={200}
|
||||
columnDefs={columnDefs}
|
||||
getRowId={(data) => data.data.id}
|
||||
infiniteInitialRowCount={itemCount || 100}
|
||||
pagination={isPaginationEnabled}
|
||||
paginationAutoPageSize={isPaginationEnabled}
|
||||
paginationPageSize={page.table.pagination.itemsPerPage || 100}
|
||||
paginationPageSize={table.pagination.itemsPerPage || 100}
|
||||
rowBuffer={20}
|
||||
rowHeight={page.table.rowHeight || 40}
|
||||
rowHeight={table.rowHeight || 40}
|
||||
rowModelType="infinite"
|
||||
onBodyScrollEnd={handleTableScroll}
|
||||
onCellContextMenu={handleContextMenu}
|
||||
|
|
@ -393,10 +390,11 @@ export const AlbumListContent = ({
|
|||
initial={false}
|
||||
mode="wait"
|
||||
>
|
||||
{page.display === ListDisplayType.TABLE_PAGINATED && (
|
||||
{display === ListDisplayType.TABLE_PAGINATED && (
|
||||
<TablePagination
|
||||
pagination={pagination}
|
||||
setPagination={setPagination}
|
||||
pageKey={pageKey}
|
||||
pagination={table.pagination}
|
||||
setPagination={setTablePagination}
|
||||
tableRef={tableRef}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -29,21 +29,19 @@ import {
|
|||
Text,
|
||||
VirtualInfiniteGridRef,
|
||||
} from '/@/renderer/components';
|
||||
import { JellyfinAlbumFilters } from '/@/renderer/features/albums/components/jellyfin-album-filters';
|
||||
import { NavidromeAlbumFilters } from '/@/renderer/features/albums/components/navidrome-album-filters';
|
||||
import { useContainerQuery } from '/@/renderer/hooks';
|
||||
import {
|
||||
AlbumListFilter,
|
||||
useAlbumListStore,
|
||||
useCurrentServer,
|
||||
useSetAlbumFilters,
|
||||
useSetAlbumStore,
|
||||
useSetAlbumTable,
|
||||
useSetAlbumTablePagination,
|
||||
useListStoreActions,
|
||||
} from '/@/renderer/store';
|
||||
import { ServerType, Play, ListDisplayType, TableColumn } from '/@/renderer/types';
|
||||
import { useMusicFolders } from '/@/renderer/features/shared';
|
||||
import { usePlayQueueAdd } from '/@/renderer/features/player';
|
||||
import { JellyfinAlbumFilters } from '/@/renderer/features/albums/components/jellyfin-album-filters';
|
||||
import { NavidromeAlbumFilters } from '/@/renderer/features/albums/components/navidrome-album-filters';
|
||||
import { useAlbumListContext } from '/@/renderer/features/albums/context/album-list-context';
|
||||
|
||||
const FILTERS = {
|
||||
jellyfin: [
|
||||
|
|
@ -94,25 +92,21 @@ export const AlbumListHeaderFilters = ({
|
|||
itemCount,
|
||||
}: AlbumListHeaderFiltersProps) => {
|
||||
const queryClient = useQueryClient();
|
||||
const { id, pageKey } = useAlbumListContext();
|
||||
const server = useCurrentServer();
|
||||
|
||||
const setPage = useSetAlbumStore();
|
||||
const setFilter = useSetAlbumFilters();
|
||||
const page = useAlbumListStore();
|
||||
const filters = page.filter;
|
||||
const { setFilter, setTablePagination, setTable, setGrid, setDisplayType, setTableColumns } =
|
||||
useListStoreActions();
|
||||
const { display, filter, table, grid } = useAlbumListStore();
|
||||
const cq = useContainerQuery();
|
||||
|
||||
const musicFoldersQuery = useMusicFolders();
|
||||
|
||||
const setPagination = useSetAlbumTablePagination();
|
||||
const setTable = useSetAlbumTable();
|
||||
|
||||
const sortByLabel =
|
||||
(server?.type &&
|
||||
FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filters.sortBy)?.name) ||
|
||||
FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filter.sortBy)?.name) ||
|
||||
'Unknown';
|
||||
|
||||
const sortOrderLabel = ORDER.find((o) => o.value === filters.sortOrder)?.name || 'Unknown';
|
||||
const sortOrderLabel = ORDER.find((o) => o.value === filter.sortOrder)?.name || 'Unknown';
|
||||
|
||||
const fetch = useCallback(
|
||||
async (skip: number, take: number, filters: AlbumListFilter) => {
|
||||
|
|
@ -151,10 +145,7 @@ export const AlbumListHeaderFilters = ({
|
|||
|
||||
const handleFilterChange = useCallback(
|
||||
async (filters: AlbumListFilter) => {
|
||||
if (
|
||||
page.display === ListDisplayType.TABLE ||
|
||||
page.display === ListDisplayType.TABLE_PAGINATED
|
||||
) {
|
||||
if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
|
||||
const dataSource: IDatasource = {
|
||||
getRows: async (params) => {
|
||||
const limit = params.endRow - params.startRow;
|
||||
|
|
@ -197,8 +188,8 @@ export const AlbumListHeaderFilters = ({
|
|||
tableRef.current?.api.purgeInfiniteCache();
|
||||
tableRef.current?.api.ensureIndexVisible(0, 'top');
|
||||
|
||||
if (page.display === ListDisplayType.TABLE_PAGINATED) {
|
||||
setPagination({ currentPage: 0 });
|
||||
if (display === ListDisplayType.TABLE_PAGINATED) {
|
||||
setTablePagination({ data: { currentPage: 0 }, key: 'album' });
|
||||
}
|
||||
} else {
|
||||
gridRef.current?.scrollTo(0);
|
||||
|
|
@ -213,7 +204,7 @@ export const AlbumListHeaderFilters = ({
|
|||
gridRef.current?.setItemData(data.items);
|
||||
}
|
||||
},
|
||||
[page.display, tableRef, customFilters, server, queryClient, setPagination, gridRef, fetch],
|
||||
[display, tableRef, customFilters, server, queryClient, setTablePagination, gridRef, fetch],
|
||||
);
|
||||
|
||||
const handleOpenFiltersModal = () => {
|
||||
|
|
@ -224,11 +215,15 @@ export const AlbumListHeaderFilters = ({
|
|||
<NavidromeAlbumFilters
|
||||
disableArtistFilter={!!customFilters}
|
||||
handleFilterChange={handleFilterChange}
|
||||
id={id}
|
||||
pageKey={pageKey}
|
||||
/>
|
||||
) : (
|
||||
<JellyfinAlbumFilters
|
||||
disableArtistFilter={!!customFilters}
|
||||
handleFilterChange={handleFilterChange}
|
||||
id={id}
|
||||
pageKey={pageKey}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
|
@ -239,8 +234,8 @@ export const AlbumListHeaderFilters = ({
|
|||
|
||||
const handleRefresh = useCallback(() => {
|
||||
queryClient.invalidateQueries(queryKeys.albums.list(server?.id || ''));
|
||||
handleFilterChange(filters);
|
||||
}, [filters, handleFilterChange, queryClient, server?.id]);
|
||||
handleFilterChange(filter);
|
||||
}, [filter, handleFilterChange, queryClient, server?.id]);
|
||||
|
||||
const handleSetSortBy = useCallback(
|
||||
(e: MouseEvent<HTMLButtonElement>) => {
|
||||
|
|
@ -251,9 +246,12 @@ export const AlbumListHeaderFilters = ({
|
|||
)?.defaultOrder;
|
||||
|
||||
const updatedFilters = setFilter({
|
||||
sortBy: e.currentTarget.value as AlbumListSort,
|
||||
sortOrder: sortOrder || SortOrder.ASC,
|
||||
});
|
||||
data: {
|
||||
sortBy: e.currentTarget.value as AlbumListSort,
|
||||
sortOrder: sortOrder || SortOrder.ASC,
|
||||
},
|
||||
key: 'album',
|
||||
}) as AlbumListFilter;
|
||||
|
||||
handleFilterChange(updatedFilters);
|
||||
},
|
||||
|
|
@ -265,22 +263,31 @@ export const AlbumListHeaderFilters = ({
|
|||
if (!e.currentTarget?.value) return;
|
||||
|
||||
let updatedFilters = null;
|
||||
if (e.currentTarget.value === String(page.filter.musicFolderId)) {
|
||||
updatedFilters = setFilter({ musicFolderId: undefined });
|
||||
if (e.currentTarget.value === String(filter.musicFolderId)) {
|
||||
updatedFilters = setFilter({
|
||||
data: { musicFolderId: undefined },
|
||||
key: 'album',
|
||||
}) as AlbumListFilter;
|
||||
} else {
|
||||
updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
|
||||
updatedFilters = setFilter({
|
||||
data: { musicFolderId: e.currentTarget.value },
|
||||
key: 'album',
|
||||
}) as AlbumListFilter;
|
||||
}
|
||||
|
||||
handleFilterChange(updatedFilters);
|
||||
},
|
||||
[handleFilterChange, page.filter.musicFolderId, setFilter],
|
||||
[handleFilterChange, filter.musicFolderId, setFilter],
|
||||
);
|
||||
|
||||
const handleToggleSortOrder = useCallback(() => {
|
||||
const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
|
||||
const updatedFilters = setFilter({ sortOrder: newSortOrder });
|
||||
const newSortOrder = filter.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
|
||||
const updatedFilters = setFilter({
|
||||
data: { sortOrder: newSortOrder },
|
||||
key: 'album',
|
||||
}) as AlbumListFilter;
|
||||
handleFilterChange(updatedFilters);
|
||||
}, [filters.sortOrder, handleFilterChange, setFilter]);
|
||||
}, [filter.sortOrder, handleFilterChange, setFilter]);
|
||||
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
|
||||
|
|
@ -289,14 +296,14 @@ export const AlbumListHeaderFilters = ({
|
|||
|
||||
const query = {
|
||||
startIndex: 0,
|
||||
...filters,
|
||||
...filter,
|
||||
...customFilters,
|
||||
jfParams: {
|
||||
...filters.jfParams,
|
||||
...filter.jfParams,
|
||||
...customFilters?.jfParams,
|
||||
},
|
||||
ndParams: {
|
||||
...filters.ndParams,
|
||||
...filter.ndParams,
|
||||
...customFilters?.ndParams,
|
||||
},
|
||||
};
|
||||
|
|
@ -320,30 +327,28 @@ export const AlbumListHeaderFilters = ({
|
|||
};
|
||||
|
||||
const handleItemSize = (e: number) => {
|
||||
if (
|
||||
page.display === ListDisplayType.TABLE ||
|
||||
page.display === ListDisplayType.TABLE_PAGINATED
|
||||
) {
|
||||
setTable({ rowHeight: e });
|
||||
if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
|
||||
setTable({ data: { rowHeight: e }, key: 'album' });
|
||||
} else {
|
||||
setPage({ list: { ...page, grid: { ...page.grid, size: e } } });
|
||||
setGrid({ data: { size: e }, key: 'album' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleSetViewType = useCallback(
|
||||
(e: MouseEvent<HTMLButtonElement>) => {
|
||||
if (!e.currentTarget?.value) return;
|
||||
setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
|
||||
setDisplayType({ data: e.currentTarget.value as ListDisplayType, key: 'album' });
|
||||
},
|
||||
[page, setPage],
|
||||
[setDisplayType],
|
||||
);
|
||||
|
||||
const handleTableColumns = (values: TableColumn[]) => {
|
||||
const existingColumns = page.table.columns;
|
||||
const existingColumns = table.columns;
|
||||
|
||||
if (values.length === 0) {
|
||||
return setTable({
|
||||
columns: [],
|
||||
return setTableColumns({
|
||||
data: [],
|
||||
key: 'album',
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -351,20 +356,20 @@ export const AlbumListHeaderFilters = ({
|
|||
if (values.length > existingColumns.length) {
|
||||
const newColumn = { column: values[values.length - 1], width: 100 };
|
||||
|
||||
setTable({ columns: [...existingColumns, newColumn] });
|
||||
setTableColumns({ data: [...existingColumns, newColumn], key: 'album' });
|
||||
} else {
|
||||
// If removing a column
|
||||
const removed = existingColumns.filter((column) => !values.includes(column.column));
|
||||
const newColumns = existingColumns.filter((column) => !removed.includes(column));
|
||||
|
||||
setTable({ columns: newColumns });
|
||||
setTableColumns({ data: newColumns, key: 'album' });
|
||||
}
|
||||
|
||||
return tableRef.current?.api.sizeColumnsToFit();
|
||||
};
|
||||
|
||||
const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setTable({ autoFit: e.currentTarget.checked });
|
||||
setTable({ data: { autoFit: e.currentTarget.checked }, key: 'album' });
|
||||
|
||||
if (e.currentTarget.checked) {
|
||||
tableRef.current?.api.sizeColumnsToFit();
|
||||
|
|
@ -374,16 +379,16 @@ export const AlbumListHeaderFilters = ({
|
|||
const isFilterApplied = useMemo(() => {
|
||||
const isNavidromeFilterApplied =
|
||||
server?.type === ServerType.NAVIDROME &&
|
||||
page.filter.ndParams &&
|
||||
Object.values(page.filter.ndParams).some((value) => value !== undefined);
|
||||
filter.ndParams &&
|
||||
Object.values(filter.ndParams).some((value) => value !== undefined);
|
||||
|
||||
const isJellyfinFilterApplied =
|
||||
server?.type === ServerType.JELLYFIN &&
|
||||
page.filter.jfParams &&
|
||||
Object.values(page.filter.jfParams).some((value) => value !== undefined);
|
||||
filter.jfParams &&
|
||||
Object.values(filter.jfParams).some((value) => value !== undefined);
|
||||
|
||||
return isNavidromeFilterApplied || isJellyfinFilterApplied;
|
||||
}, [page.filter.jfParams, page.filter.ndParams, server?.type]);
|
||||
}, [filter.jfParams, filter.ndParams, server?.type]);
|
||||
|
||||
return (
|
||||
<Flex justify="space-between">
|
||||
|
|
@ -404,14 +409,14 @@ export const AlbumListHeaderFilters = ({
|
|||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
{FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
|
||||
{FILTERS[server?.type as keyof typeof FILTERS].map((f) => (
|
||||
<DropdownMenu.Item
|
||||
key={`filter-${filter.name}`}
|
||||
$isActive={filter.value === filters.sortBy}
|
||||
value={filter.value}
|
||||
key={`filter-${f.name}`}
|
||||
$isActive={f.value === filter.sortBy}
|
||||
value={f.value}
|
||||
onClick={handleSetSortBy}
|
||||
>
|
||||
{filter.name}
|
||||
{f.name}
|
||||
</DropdownMenu.Item>
|
||||
))}
|
||||
</DropdownMenu.Dropdown>
|
||||
|
|
@ -427,7 +432,7 @@ export const AlbumListHeaderFilters = ({
|
|||
sortOrderLabel
|
||||
) : (
|
||||
<>
|
||||
{filters.sortOrder === SortOrder.ASC ? (
|
||||
{filter.sortOrder === SortOrder.ASC ? (
|
||||
<RiSortAsc size={15} />
|
||||
) : (
|
||||
<RiSortDesc size={15} />
|
||||
|
|
@ -451,7 +456,7 @@ export const AlbumListHeaderFilters = ({
|
|||
{musicFoldersQuery.data?.map((folder) => (
|
||||
<DropdownMenu.Item
|
||||
key={`musicFolder-${folder.id}`}
|
||||
$isActive={filters.musicFolderId === folder.id}
|
||||
$isActive={filter.musicFolderId === folder.id}
|
||||
value={folder.id}
|
||||
onClick={handleSetMusicFolder}
|
||||
>
|
||||
|
|
@ -528,28 +533,28 @@ export const AlbumListHeaderFilters = ({
|
|||
<DropdownMenu.Dropdown>
|
||||
<DropdownMenu.Label>Display type</DropdownMenu.Label>
|
||||
<DropdownMenu.Item
|
||||
$isActive={page.display === ListDisplayType.CARD}
|
||||
$isActive={display === ListDisplayType.CARD}
|
||||
value={ListDisplayType.CARD}
|
||||
onClick={handleSetViewType}
|
||||
>
|
||||
Card
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
$isActive={page.display === ListDisplayType.POSTER}
|
||||
$isActive={display === ListDisplayType.POSTER}
|
||||
value={ListDisplayType.POSTER}
|
||||
onClick={handleSetViewType}
|
||||
>
|
||||
Poster
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
$isActive={page.display === ListDisplayType.TABLE}
|
||||
$isActive={display === ListDisplayType.TABLE}
|
||||
value={ListDisplayType.TABLE}
|
||||
onClick={handleSetViewType}
|
||||
>
|
||||
Table
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
$isActive={page.display === ListDisplayType.TABLE_PAGINATED}
|
||||
$isActive={display === ListDisplayType.TABLE_PAGINATED}
|
||||
value={ListDisplayType.TABLE_PAGINATED}
|
||||
onClick={handleSetViewType}
|
||||
>
|
||||
|
|
@ -560,9 +565,9 @@ export const AlbumListHeaderFilters = ({
|
|||
<DropdownMenu.Item closeMenuOnClick={false}>
|
||||
<Slider
|
||||
defaultValue={
|
||||
page.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER
|
||||
? page.grid.size
|
||||
: page.table.rowHeight
|
||||
display === ListDisplayType.CARD || display === ListDisplayType.POSTER
|
||||
? grid?.size || 0
|
||||
: table.rowHeight
|
||||
}
|
||||
label={null}
|
||||
max={100}
|
||||
|
|
@ -570,8 +575,7 @@ export const AlbumListHeaderFilters = ({
|
|||
onChangeEnd={handleItemSize}
|
||||
/>
|
||||
</DropdownMenu.Item>
|
||||
{(page.display === ListDisplayType.TABLE ||
|
||||
page.display === ListDisplayType.TABLE_PAGINATED) && (
|
||||
{(display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) && (
|
||||
<>
|
||||
<DropdownMenu.Label>Table Columns</DropdownMenu.Label>
|
||||
<DropdownMenu.Item
|
||||
|
|
@ -583,14 +587,14 @@ export const AlbumListHeaderFilters = ({
|
|||
<MultiSelect
|
||||
clearable
|
||||
data={ALBUM_TABLE_COLUMNS}
|
||||
defaultValue={page.table?.columns.map((column) => column.column)}
|
||||
defaultValue={table?.columns.map((column) => column.column)}
|
||||
width={300}
|
||||
onChange={handleTableColumns}
|
||||
/>
|
||||
<Group position="apart">
|
||||
<Text>Auto Fit Columns</Text>
|
||||
<Switch
|
||||
defaultChecked={page.table.autoFit}
|
||||
defaultChecked={table.autoFit}
|
||||
onChange={handleAutoFitColumns}
|
||||
/>
|
||||
</Group>
|
||||
|
|
|
|||
|
|
@ -22,8 +22,7 @@ import {
|
|||
AlbumListFilter,
|
||||
useAlbumListStore,
|
||||
useCurrentServer,
|
||||
useSetAlbumFilters,
|
||||
useSetAlbumTablePagination,
|
||||
useListStoreActions,
|
||||
} from '/@/renderer/store';
|
||||
import { ListDisplayType, Play } from '/@/renderer/types';
|
||||
import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
|
||||
|
|
@ -47,12 +46,9 @@ export const AlbumListHeader = ({
|
|||
}: AlbumListHeaderProps) => {
|
||||
const queryClient = useQueryClient();
|
||||
const server = useCurrentServer();
|
||||
const setFilter = useSetAlbumFilters();
|
||||
const page = useAlbumListStore();
|
||||
const filters = page.filter;
|
||||
const { setFilter, setTablePagination } = useListStoreActions();
|
||||
const cq = useContainerQuery();
|
||||
|
||||
const setPagination = useSetAlbumTablePagination();
|
||||
const { filter, display } = useAlbumListStore();
|
||||
|
||||
const fetch = useCallback(
|
||||
async (skip: number, take: number, filters: AlbumListFilter) => {
|
||||
|
|
@ -91,10 +87,7 @@ export const AlbumListHeader = ({
|
|||
|
||||
const handleFilterChange = useCallback(
|
||||
async (filters: AlbumListFilter) => {
|
||||
if (
|
||||
page.display === ListDisplayType.TABLE ||
|
||||
page.display === ListDisplayType.TABLE_PAGINATED
|
||||
) {
|
||||
if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
|
||||
const dataSource: IDatasource = {
|
||||
getRows: async (params) => {
|
||||
const limit = params.endRow - params.startRow;
|
||||
|
|
@ -137,8 +130,8 @@ export const AlbumListHeader = ({
|
|||
tableRef.current?.api.purgeInfiniteCache();
|
||||
tableRef.current?.api.ensureIndexVisible(0, 'top');
|
||||
|
||||
if (page.display === ListDisplayType.TABLE_PAGINATED) {
|
||||
setPagination({ currentPage: 0 });
|
||||
if (display === ListDisplayType.TABLE_PAGINATED) {
|
||||
setTablePagination({ data: { currentPage: 0 }, key: 'album' });
|
||||
}
|
||||
} else {
|
||||
gridRef.current?.scrollTo(0);
|
||||
|
|
@ -153,13 +146,13 @@ export const AlbumListHeader = ({
|
|||
gridRef.current?.setItemData(data.items);
|
||||
}
|
||||
},
|
||||
[page.display, tableRef, customFilters, server, queryClient, setPagination, gridRef, fetch],
|
||||
[display, tableRef, customFilters, server, queryClient, setTablePagination, gridRef, fetch],
|
||||
);
|
||||
|
||||
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
|
||||
const previousSearchTerm = page.filter.searchTerm;
|
||||
const previousSearchTerm = filter.searchTerm;
|
||||
const searchTerm = e.target.value === '' ? undefined : e.target.value;
|
||||
const updatedFilters = setFilter({ searchTerm });
|
||||
const updatedFilters = setFilter({ data: { searchTerm }, key: 'album' }) as AlbumListFilter;
|
||||
if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters);
|
||||
}, 500);
|
||||
|
||||
|
|
@ -171,14 +164,14 @@ export const AlbumListHeader = ({
|
|||
|
||||
const query = {
|
||||
startIndex: 0,
|
||||
...filters,
|
||||
...filter,
|
||||
...customFilters,
|
||||
jfParams: {
|
||||
...filters.jfParams,
|
||||
...filter.jfParams,
|
||||
...customFilters?.jfParams,
|
||||
},
|
||||
ndParams: {
|
||||
...filters.ndParams,
|
||||
...filter.ndParams,
|
||||
...customFilters?.ndParams,
|
||||
},
|
||||
};
|
||||
|
|
@ -225,7 +218,7 @@ export const AlbumListHeader = ({
|
|||
</LibraryHeaderBar>
|
||||
<Group>
|
||||
<SearchInput
|
||||
defaultValue={page.filter.searchTerm}
|
||||
defaultValue={filter.searchTerm}
|
||||
openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
|
||||
onChange={handleSearch}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { ChangeEvent, useMemo, useState } from 'react';
|
||||
import { Divider, Group, Stack } from '@mantine/core';
|
||||
import { MultiSelect, NumberInput, SpinnerIcon, Switch, Text } from '/@/renderer/components';
|
||||
import { AlbumListFilter, useAlbumListStore, useSetAlbumFilters } from '/@/renderer/store';
|
||||
import { AlbumListFilter, useAlbumListFilter, useListStoreActions } from '/@/renderer/store';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { useGenreList } from '/@/renderer/features/genres';
|
||||
import { AlbumArtistListSort, SortOrder } from '/@/renderer/api/types';
|
||||
|
|
@ -10,14 +10,18 @@ import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-a
|
|||
interface JellyfinAlbumFiltersProps {
|
||||
disableArtistFilter?: boolean;
|
||||
handleFilterChange: (filters: AlbumListFilter) => void;
|
||||
id?: string;
|
||||
pageKey: string;
|
||||
}
|
||||
|
||||
export const JellyfinAlbumFilters = ({
|
||||
disableArtistFilter,
|
||||
handleFilterChange,
|
||||
pageKey,
|
||||
id,
|
||||
}: JellyfinAlbumFiltersProps) => {
|
||||
const { filter } = useAlbumListStore();
|
||||
const setFilters = useSetAlbumFilters();
|
||||
const filter = useAlbumListFilter({ id, key: pageKey });
|
||||
const { setFilter } = useListStoreActions();
|
||||
|
||||
// TODO - eventually replace with /items/filters endpoint to fetch genres and tags specific to the selected library
|
||||
const genreListQuery = useGenreList(null);
|
||||
|
|
@ -38,9 +42,16 @@ export const JellyfinAlbumFilters = ({
|
|||
{
|
||||
label: 'Is favorited',
|
||||
onChange: (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const updatedFilters = setFilters({
|
||||
jfParams: { ...filter.jfParams, isFavorite: e.currentTarget.checked ? true : undefined },
|
||||
});
|
||||
const updatedFilters = setFilter({
|
||||
data: {
|
||||
jfParams: {
|
||||
...filter.jfParams,
|
||||
includeItemTypes: 'Audio',
|
||||
isFavorite: e.currentTarget.checked ? true : undefined,
|
||||
},
|
||||
},
|
||||
key: pageKey,
|
||||
}) as AlbumListFilter;
|
||||
handleFilterChange(updatedFilters);
|
||||
},
|
||||
value: filter.jfParams?.isFavorite,
|
||||
|
|
@ -49,34 +60,43 @@ export const JellyfinAlbumFilters = ({
|
|||
|
||||
const handleMinYearFilter = debounce((e: number | string) => {
|
||||
if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
|
||||
const updatedFilters = setFilters({
|
||||
jfParams: {
|
||||
...filter.jfParams,
|
||||
minYear: e === '' ? undefined : (e as number),
|
||||
const updatedFilters = setFilter({
|
||||
data: {
|
||||
jfParams: {
|
||||
...filter.jfParams,
|
||||
minYear: e === '' ? undefined : (e as number),
|
||||
},
|
||||
},
|
||||
});
|
||||
key: pageKey,
|
||||
}) as AlbumListFilter;
|
||||
handleFilterChange(updatedFilters);
|
||||
}, 500);
|
||||
|
||||
const handleMaxYearFilter = debounce((e: number | string) => {
|
||||
if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
|
||||
const updatedFilters = setFilters({
|
||||
jfParams: {
|
||||
...filter.jfParams,
|
||||
maxYear: e === '' ? undefined : (e as number),
|
||||
const updatedFilters = setFilter({
|
||||
data: {
|
||||
jfParams: {
|
||||
...filter.jfParams,
|
||||
maxYear: e === '' ? undefined : (e as number),
|
||||
},
|
||||
},
|
||||
});
|
||||
key: pageKey,
|
||||
}) as AlbumListFilter;
|
||||
handleFilterChange(updatedFilters);
|
||||
}, 500);
|
||||
|
||||
const handleGenresFilter = debounce((e: string[] | undefined) => {
|
||||
const genreFilterString = e?.length ? e.join(',') : undefined;
|
||||
const updatedFilters = setFilters({
|
||||
jfParams: {
|
||||
...filter.jfParams,
|
||||
genreIds: genreFilterString,
|
||||
const updatedFilters = setFilter({
|
||||
data: {
|
||||
jfParams: {
|
||||
...filter.jfParams,
|
||||
genreIds: genreFilterString,
|
||||
},
|
||||
},
|
||||
});
|
||||
key: pageKey,
|
||||
}) as AlbumListFilter;
|
||||
handleFilterChange(updatedFilters);
|
||||
}, 250);
|
||||
|
||||
|
|
@ -105,12 +125,15 @@ export const JellyfinAlbumFilters = ({
|
|||
|
||||
const handleAlbumArtistFilter = (e: string[] | null) => {
|
||||
const albumArtistFilterString = e?.length ? e.join(',') : undefined;
|
||||
const updatedFilters = setFilters({
|
||||
jfParams: {
|
||||
...filter.jfParams,
|
||||
albumArtistIds: albumArtistFilterString,
|
||||
const updatedFilters = setFilter({
|
||||
data: {
|
||||
jfParams: {
|
||||
...filter.jfParams,
|
||||
albumArtistIds: albumArtistFilterString,
|
||||
},
|
||||
},
|
||||
});
|
||||
key: pageKey,
|
||||
}) as AlbumListFilter;
|
||||
handleFilterChange(updatedFilters);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { ChangeEvent, useMemo, useState } from 'react';
|
||||
import { Divider, Group, Stack } from '@mantine/core';
|
||||
import { NumberInput, Switch, Text, Select, SpinnerIcon } from '/@/renderer/components';
|
||||
import { AlbumListFilter, useAlbumListStore, useSetAlbumFilters } from '/@/renderer/store';
|
||||
import { AlbumListFilter, useAlbumListFilter, useListStoreActions } from '/@/renderer/store';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { useGenreList } from '/@/renderer/features/genres';
|
||||
import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
|
||||
|
|
@ -10,14 +10,20 @@ import { AlbumArtistListSort, SortOrder } from '/@/renderer/api/types';
|
|||
interface NavidromeAlbumFiltersProps {
|
||||
disableArtistFilter?: boolean;
|
||||
handleFilterChange: (filters: AlbumListFilter) => void;
|
||||
id?: string;
|
||||
pageKey: string;
|
||||
}
|
||||
|
||||
export const NavidromeAlbumFilters = ({
|
||||
handleFilterChange,
|
||||
disableArtistFilter,
|
||||
pageKey,
|
||||
id,
|
||||
}: NavidromeAlbumFiltersProps) => {
|
||||
const { filter } = useAlbumListStore();
|
||||
const setFilters = useSetAlbumFilters();
|
||||
const filter = useAlbumListFilter({ id, key: pageKey });
|
||||
const { setFilter } = useListStoreActions();
|
||||
|
||||
console.log('pageKey, id', pageKey, id);
|
||||
|
||||
const genreListQuery = useGenreList(null);
|
||||
|
||||
|
|
@ -30,12 +36,15 @@ export const NavidromeAlbumFilters = ({
|
|||
}, [genreListQuery.data]);
|
||||
|
||||
const handleGenresFilter = debounce((e: string | null) => {
|
||||
const updatedFilters = setFilters({
|
||||
ndParams: {
|
||||
...filter.ndParams,
|
||||
genre_id: e || undefined,
|
||||
const updatedFilters = setFilter({
|
||||
data: {
|
||||
ndParams: {
|
||||
...filter.ndParams,
|
||||
genre_id: e || undefined,
|
||||
},
|
||||
},
|
||||
});
|
||||
key: 'album',
|
||||
}) as AlbumListFilter;
|
||||
handleFilterChange(updatedFilters);
|
||||
}, 250);
|
||||
|
||||
|
|
@ -43,9 +52,15 @@ export const NavidromeAlbumFilters = ({
|
|||
{
|
||||
label: 'Is rated',
|
||||
onChange: (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const updatedFilters = setFilters({
|
||||
ndParams: { ...filter.ndParams, has_rating: e.currentTarget.checked ? true : undefined },
|
||||
});
|
||||
const updatedFilters = setFilter({
|
||||
data: {
|
||||
ndParams: {
|
||||
...filter.ndParams,
|
||||
has_rating: e.currentTarget.checked ? true : undefined,
|
||||
},
|
||||
},
|
||||
key: pageKey,
|
||||
}) as AlbumListFilter;
|
||||
handleFilterChange(updatedFilters);
|
||||
},
|
||||
value: filter.ndParams?.has_rating,
|
||||
|
|
@ -53,9 +68,13 @@ export const NavidromeAlbumFilters = ({
|
|||
{
|
||||
label: 'Is favorited',
|
||||
onChange: (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const updatedFilters = setFilters({
|
||||
ndParams: { ...filter.ndParams, starred: e.currentTarget.checked ? true : undefined },
|
||||
});
|
||||
const updatedFilters = setFilter({
|
||||
data: {
|
||||
ndParams: { ...filter.ndParams, starred: e.currentTarget.checked ? true : undefined },
|
||||
},
|
||||
key: pageKey,
|
||||
}) as AlbumListFilter;
|
||||
console.log('updatedFilters :>> ', updatedFilters);
|
||||
handleFilterChange(updatedFilters);
|
||||
},
|
||||
value: filter.ndParams?.starred,
|
||||
|
|
@ -63,9 +82,15 @@ export const NavidromeAlbumFilters = ({
|
|||
{
|
||||
label: 'Is compilation',
|
||||
onChange: (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const updatedFilters = setFilters({
|
||||
ndParams: { ...filter.ndParams, compilation: e.currentTarget.checked ? true : undefined },
|
||||
});
|
||||
const updatedFilters = setFilter({
|
||||
data: {
|
||||
ndParams: {
|
||||
...filter.ndParams,
|
||||
compilation: e.currentTarget.checked ? true : undefined,
|
||||
},
|
||||
},
|
||||
key: pageKey,
|
||||
}) as AlbumListFilter;
|
||||
handleFilterChange(updatedFilters);
|
||||
},
|
||||
value: filter.ndParams?.compilation,
|
||||
|
|
@ -73,12 +98,15 @@ export const NavidromeAlbumFilters = ({
|
|||
{
|
||||
label: 'Is recently played',
|
||||
onChange: (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const updatedFilters = setFilters({
|
||||
ndParams: {
|
||||
...filter.ndParams,
|
||||
recently_played: e.currentTarget.checked ? true : undefined,
|
||||
const updatedFilters = setFilter({
|
||||
data: {
|
||||
ndParams: {
|
||||
...filter.ndParams,
|
||||
recently_played: e.currentTarget.checked ? true : undefined,
|
||||
},
|
||||
},
|
||||
});
|
||||
key: pageKey,
|
||||
}) as AlbumListFilter;
|
||||
handleFilterChange(updatedFilters);
|
||||
},
|
||||
value: filter.ndParams?.recently_played,
|
||||
|
|
@ -86,12 +114,15 @@ export const NavidromeAlbumFilters = ({
|
|||
];
|
||||
|
||||
const handleYearFilter = debounce((e: number | string) => {
|
||||
const updatedFilters = setFilters({
|
||||
ndParams: {
|
||||
...filter.ndParams,
|
||||
year: e === '' ? undefined : (e as number),
|
||||
const updatedFilters = setFilter({
|
||||
data: {
|
||||
ndParams: {
|
||||
...filter.ndParams,
|
||||
year: e === '' ? undefined : (e as number),
|
||||
},
|
||||
},
|
||||
});
|
||||
key: pageKey,
|
||||
}) as AlbumListFilter;
|
||||
handleFilterChange(updatedFilters);
|
||||
}, 500);
|
||||
|
||||
|
|
@ -120,12 +151,15 @@ export const NavidromeAlbumFilters = ({
|
|||
}, [albumArtistListQuery?.data?.items]);
|
||||
|
||||
const handleAlbumArtistFilter = (e: string | null) => {
|
||||
const updatedFilters = setFilters({
|
||||
ndParams: {
|
||||
...filter.ndParams,
|
||||
artist_id: e || undefined,
|
||||
const updatedFilters = setFilter({
|
||||
data: {
|
||||
ndParams: {
|
||||
...filter.ndParams,
|
||||
artist_id: e || undefined,
|
||||
},
|
||||
},
|
||||
});
|
||||
key: pageKey,
|
||||
}) as AlbumListFilter;
|
||||
handleFilterChange(updatedFilters);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue