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

Update album artist list views

Browse source
This commit is contained in:
jeffvli 2023-07-16 13:33:23 -07:00
parent b9caa73405
commit e965bd2663
5 changed files with 320 additions and 404 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

372
src/renderer/features/artists/components/album-artist-list-content.tsx
View file

@ -1,343 +1,53 @@
import { ALBUMARTIST_CARD_ROWS } from '/@/renderer/components';
import { AppRoute } from '/@/renderer/router/routes';
import { ListDisplayType, CardRow } from '/@/renderer/types';
import AutoSizer from 'react-virtualized-auto-sizer';
import { MutableRefObject, useCallback, useMemo } from 'react';
import { ListOnScrollProps } from 'react-window';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { AlbumArtist, AlbumArtistListSort, LibraryItem } from '/@/renderer/api/types';
import { useQueryClient } from '@tanstack/react-query';
import { useCurrentServer, useAlbumArtistListStore } from '/@/renderer/store';
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 { import { lazy, MutableRefObject, Suspense } from 'react';
BodyScrollEvent, import { Spinner } from '/@/renderer/components';
ColDef, import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
GridReadyEvent, import { useAlbumArtistListStore } from '/@/renderer/store';
IDatasource, import { ListDisplayType } from '/@/renderer/types';
PaginationChangedEvent,
RowDoubleClickedEvent, const AlbumArtistListGridView = lazy(() =>
} from '@ag-grid-community/core'; import('/@/renderer/features/artists/components/album-artist-list-grid-view').then(
import { AnimatePresence } from 'framer-motion'; (module) => ({
import debounce from 'lodash/debounce'; default: module.AlbumArtistListGridView,
import { useHandleTableContextMenu } from '/@/renderer/features/context-menu'; }),
import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items'; ),
import { generatePath, useNavigate } from 'react-router'; );
import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
import { usePlayQueueAdd } from '/@/renderer/features/player'; const AlbumArtistListTableView = lazy(() =>
import { useAlbumArtistListFilter, useListStoreActions } from '../../../store/list.store'; import('/@/renderer/features/artists/components/album-artist-list-table-view').then(
import { useAlbumArtistListContext } from '/@/renderer/features/artists/context/album-artist-list-context'; (module) => ({
import { default: module.AlbumArtistListTableView,
VirtualInfiniteGridRef, }),
VirtualGridAutoSizerContainer, ),
VirtualInfiniteGrid, );
} from '/@/renderer/components/virtual-grid';
import { getColumnDefs, VirtualTable, TablePagination } from '/@/renderer/components/virtual-table';
interface AlbumArtistListContentProps { interface AlbumArtistListContentProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>; gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>; tableRef: MutableRefObject<AgGridReactType | null>;
} }
export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListContentProps) => { export const AlbumArtistListContent = ({
const queryClient = useQueryClient(); itemCount,
const navigate = useNavigate(); gridRef,
const server = useCurrentServer(); tableRef,
const handlePlayQueueAdd = usePlayQueueAdd(); }: AlbumArtistListContentProps) => {
const { display } = useAlbumArtistListStore();
const { id, pageKey } = useAlbumArtistListContext(); const isGrid = display === ListDisplayType.CARD || display === ListDisplayType.POSTER;
const filter = useAlbumArtistListFilter({ id, key: pageKey });
const { table, grid, display } = useAlbumArtistListStore();
const { setTable, setTablePagination, setGrid } = useListStoreActions();
const isPaginationEnabled = display === ListDisplayType.TABLE_PAGINATED;
const checkAlbumArtistList = useAlbumArtistList({
options: {
cacheTime: Infinity,
staleTime: 60 * 1000 * 5,
},
query: {
limit: 1,
startIndex: 0,
...filter,
},
serverId: server?.id,
});
const columnDefs: ColDef[] = useMemo(() => getColumnDefs(table.columns), [table.columns]);
const onTableReady = useCallback(
(params: GridReadyEvent) => {
const dataSource: IDatasource = {
getRows: async (params) => {
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const queryKey = queryKeys.albumArtists.list(server?.id || '', {
limit,
startIndex,
...filter,
});
const albumArtistsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
api.controller.getAlbumArtistList({
apiClientProps: {
server,
signal,
},
query: {
limit,
startIndex,
...filter,
},
}),
{ cacheTime: 1000 * 60 * 1 },
);
params.successCallback(
albumArtistsRes?.items || [],
albumArtistsRes?.totalRecordCount || 0,
);
},
rowCount: undefined,
};
params.api.setDatasource(dataSource);
params.api.ensureIndexVisible(table.scrollOffset || 0, 'top');
},
[filter, table.scrollOffset, queryClient, server],
);
const onTablePaginationChanged = useCallback(
(event: PaginationChangedEvent) => {
if (!isPaginationEnabled || !event.api) return;
try {
// Scroll to top of page on pagination change
const currentPageStartIndex =
table.pagination.currentPage * table.pagination.itemsPerPage;
event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
} catch (err) {
console.log(err);
}
setTablePagination({
data: {
itemsPerPage: event.api.paginationGetPageSize(),
totalItems: event.api.paginationGetRowCount(),
totalPages: event.api.paginationGetTotalPages() + 1,
},
key: pageKey,
});
},
[
isPaginationEnabled,
pageKey,
setTablePagination,
table.pagination.currentPage,
table.pagination.itemsPerPage,
],
);
const handleTableColumnChange = useCallback(() => {
const { columnApi } = tableRef?.current || {};
const columnsOrder = columnApi?.getAllGridColumns();
if (!columnsOrder) return;
const columnsInSettings = table.columns;
const updatedColumns = [];
for (const column of columnsOrder) {
const columnInSettings = columnsInSettings.find(
(c) => c.column === column.getColDef().colId,
);
if (columnInSettings) {
updatedColumns.push({
...columnInSettings,
...(!table.autoFit && {
width: column.getColDef().width,
}),
});
}
}
setTable({ data: { columns: updatedColumns }, key: pageKey });
}, [tableRef, table.columns, table.autoFit, setTable, pageKey]);
const debouncedTableColumnChange = debounce(handleTableColumnChange, 200);
const handleTableScroll = (e: BodyScrollEvent) => {
const scrollOffset = Number((e.top / table.rowHeight).toFixed(0));
setTable({ data: { scrollOffset }, key: pageKey });
};
const fetch = useCallback(
async ({ skip: startIndex, take: limit }: { skip: number; take: number }) => {
const queryKey = queryKeys.albumArtists.list(server?.id || '', {
limit,
startIndex,
...filter,
});
const albumArtistsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
api.controller.getAlbumArtistList({
apiClientProps: {
server,
signal,
},
query: {
limit,
startIndex,
...filter,
},
}),
{ cacheTime: 1000 * 60 * 1 },
);
return albumArtistsRes;
},
[filter, queryClient, server],
);
const handleGridScroll = useCallback(
(e: ListOnScrollProps) => {
setGrid({ data: { scrollOffset: e.scrollOffset }, key: pageKey });
},
[pageKey, setGrid],
);
const handleGridSizeChange = () => {
if (table.autoFit) {
tableRef?.current?.api.sizeColumnsToFit();
}
};
const cardRows = useMemo(() => {
const rows: CardRow<AlbumArtist>[] = [ALBUMARTIST_CARD_ROWS.name];
switch (filter.sortBy) {
case AlbumArtistListSort.DURATION:
rows.push(ALBUMARTIST_CARD_ROWS.duration);
break;
case AlbumArtistListSort.FAVORITED:
break;
case AlbumArtistListSort.NAME:
break;
case AlbumArtistListSort.ALBUM_COUNT:
rows.push(ALBUMARTIST_CARD_ROWS.albumCount);
break;
case AlbumArtistListSort.PLAY_COUNT:
rows.push(ALBUMARTIST_CARD_ROWS.playCount);
break;
case AlbumArtistListSort.RANDOM:
break;
case AlbumArtistListSort.RATING:
rows.push(ALBUMARTIST_CARD_ROWS.rating);
break;
case AlbumArtistListSort.RECENTLY_ADDED:
break;
case AlbumArtistListSort.SONG_COUNT:
rows.push(ALBUMARTIST_CARD_ROWS.songCount);
break;
case AlbumArtistListSort.RELEASE_DATE:
break;
}
return rows;
}, [filter.sortBy]);
const handleContextMenu = useHandleTableContextMenu(
LibraryItem.ALBUM_ARTIST,
ALBUM_CONTEXT_MENU_ITEMS,
);
const handleRowDoubleClick = (e: RowDoubleClickedEvent) => {
navigate(generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, { albumArtistId: e.data.id }));
};
return ( return (
<> <Suspense fallback={<Spinner container />}>
<VirtualGridAutoSizerContainer> {isGrid ? (
{display === ListDisplayType.CARD || display === ListDisplayType.POSTER ? ( <AlbumArtistListGridView
<AutoSizer> gridRef={gridRef}
{({ height, width }) => ( itemCount={itemCount}
<> />
<VirtualInfiniteGrid ) : (
ref={gridRef} <AlbumArtistListTableView
cardRows={cardRows} itemCount={itemCount}
display={display || ListDisplayType.CARD} tableRef={tableRef}
fetchFn={fetch} />
handlePlayQueueAdd={handlePlayQueueAdd}
height={height}
initialScrollOffset={grid?.scrollOffset || 0}
itemCount={checkAlbumArtistList?.data?.totalRecordCount || 0}
itemGap={20}
itemSize={grid?.itemsPerRow || 5}
itemType={LibraryItem.ALBUM_ARTIST}
loading={checkAlbumArtistList.isLoading}
minimumBatchSize={40}
route={{
route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
slugs: [
{ idProperty: 'id', slugProperty: 'albumArtistId' },
],
}}
width={width}
onScroll={handleGridScroll}
/>
</>
)}
</AutoSizer>
) : (
<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-${display}-${table.rowHeight}-${server?.id}`}
ref={tableRef}
alwaysShowHorizontalScroll
suppressRowDrag
autoFitColumns={table.autoFit}
columnDefs={columnDefs}
getRowId={(data) => data.data.id}
infiniteInitialRowCount={checkAlbumArtistList.data?.totalRecordCount || 1}
pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={table.pagination.itemsPerPage || 100}
rowHeight={table.rowHeight || 40}
rowModelType="infinite"
onBodyScrollEnd={handleTableScroll}
onCellContextMenu={handleContextMenu}
onColumnMoved={handleTableColumnChange}
onColumnResized={debouncedTableColumnChange}
onGridReady={onTableReady}
onGridSizeChanged={handleGridSizeChange}
onPaginationChanged={onTablePaginationChanged}
onRowDoubleClicked={handleRowDoubleClick}
/>
)}
</VirtualGridAutoSizerContainer>
{isPaginationEnabled && (
<AnimatePresence
presenceAffectsLayout
initial={false}
mode="wait"
>
{display === ListDisplayType.TABLE_PAGINATED && (
<TablePagination
pageKey={pageKey}
pagination={table.pagination}
setPagination={setTablePagination}
tableRef={tableRef}
/>
)}
</AnimatePresence>
)} )}
</> </Suspense>
); );
}; };

137
src/renderer/features/artists/components/album-artist-list-grid-view.tsx Normal file
View file

@ -0,0 +1,137 @@
import { useQueryClient } from '@tanstack/react-query';
import { MutableRefObject, useCallback, useMemo } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { ListOnScrollProps } from 'react-window';
import { VirtualGridAutoSizerContainer } from '../../../components/virtual-grid/virtual-grid-wrapper';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { AlbumArtist, AlbumArtistListSort, LibraryItem } from '/@/renderer/api/types';
import { ALBUMARTIST_CARD_ROWS } from '/@/renderer/components';
import { VirtualInfiniteGrid, VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { useAlbumArtistListContext } from '/@/renderer/features/artists/context/album-artist-list-context';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { AppRoute } from '/@/renderer/router/routes';
import {
useAlbumArtistListFilter,
useAlbumArtistListStore,
useCurrentServer,
useListStoreActions,
} from '/@/renderer/store';
import { CardRow, ListDisplayType } from '/@/renderer/types';
interface AlbumArtistListGridViewProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
itemCount?: number;
}
export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListGridViewProps) => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const handlePlayQueueAdd = usePlayQueueAdd();
const { id, pageKey } = useAlbumArtistListContext();
const filter = useAlbumArtistListFilter({ id, key: pageKey });
const { grid, display } = useAlbumArtistListStore();
const { setGrid } = useListStoreActions();
const fetch = useCallback(
async ({ skip: startIndex, take: limit }: { skip: number; take: number }) => {
const queryKey = queryKeys.albumArtists.list(server?.id || '', {
limit,
startIndex,
...filter,
});
const albumArtistsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
api.controller.getAlbumArtistList({
apiClientProps: {
server,
signal,
},
query: {
limit,
startIndex,
...filter,
},
}),
{ cacheTime: 1000 * 60 * 1 },
);
return albumArtistsRes;
},
[filter, queryClient, server],
);
const handleGridScroll = useCallback(
(e: ListOnScrollProps) => {
setGrid({ data: { scrollOffset: e.scrollOffset }, key: pageKey });
},
[pageKey, setGrid],
);
const cardRows = useMemo(() => {
const rows: CardRow<AlbumArtist>[] = [ALBUMARTIST_CARD_ROWS.name];
switch (filter.sortBy) {
case AlbumArtistListSort.DURATION:
rows.push(ALBUMARTIST_CARD_ROWS.duration);
break;
case AlbumArtistListSort.FAVORITED:
break;
case AlbumArtistListSort.NAME:
break;
case AlbumArtistListSort.ALBUM_COUNT:
rows.push(ALBUMARTIST_CARD_ROWS.albumCount);
break;
case AlbumArtistListSort.PLAY_COUNT:
rows.push(ALBUMARTIST_CARD_ROWS.playCount);
break;
case AlbumArtistListSort.RANDOM:
break;
case AlbumArtistListSort.RATING:
rows.push(ALBUMARTIST_CARD_ROWS.rating);
break;
case AlbumArtistListSort.RECENTLY_ADDED:
break;
case AlbumArtistListSort.SONG_COUNT:
rows.push(ALBUMARTIST_CARD_ROWS.songCount);
break;
case AlbumArtistListSort.RELEASE_DATE:
break;
}
return rows;
}, [filter.sortBy]);
return (
<VirtualGridAutoSizerContainer>
<AutoSizer>
{({ height, width }) => (
<VirtualInfiniteGrid
ref={gridRef}
cardRows={cardRows}
display={display || ListDisplayType.CARD}
fetchFn={fetch}
handlePlayQueueAdd={handlePlayQueueAdd}
height={height}
initialScrollOffset={grid?.scrollOffset || 0}
itemCount={itemCount || 0}
itemGap={20}
itemSize={grid?.itemsPerRow || 5}
itemType={LibraryItem.ALBUM_ARTIST}
loading={itemCount === undefined || itemCount === null}
minimumBatchSize={40}
route={{
route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
}}
width={width}
onScroll={handleGridScroll}
/>
)}
</AutoSizer>
</VirtualGridAutoSizerContainer>
);
};

122
src/renderer/features/artists/components/album-artist-list-header-filters.tsx
View file

@ -1,34 +1,27 @@
import { useCallback, ChangeEvent, MutableRefObject, MouseEvent } from 'react';
import { IDatasource } from '@ag-grid-community/core'; import { IDatasource } from '@ag-grid-community/core';
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 { Group, Stack, Flex } from '@mantine/core'; import { Divider, Flex, Group, Stack } from '@mantine/core';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
RiSortAsc, import { RiFolder2Line, RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
RiSortDesc, import { useAlbumArtistListContext } from '../context/album-artist-list-context';
RiFolder2Line,
RiMoreFill,
RiRefreshLine,
RiSettings3Fill,
} from 'react-icons/ri';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys'; import { queryKeys } from '/@/renderer/api/query-keys';
import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/renderer/api/types'; import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/renderer/api/types';
import { DropdownMenu, Text, Button, Slider, MultiSelect, Switch } from '/@/renderer/components'; import { Button, DropdownMenu, MultiSelect, Slider, Switch, Text } from '/@/renderer/components';
import { useMusicFolders } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks';
import {
useCurrentServer,
useAlbumArtistListStore,
AlbumArtistListFilter,
useListStoreActions,
useAlbumArtistListFilter,
} from '/@/renderer/store';
import { ListDisplayType, TableColumn, ServerType } from '/@/renderer/types';
import { useAlbumArtistListContext } from '../context/album-artist-list-context';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid'; import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { ALBUMARTIST_TABLE_COLUMNS } from '/@/renderer/components/virtual-table'; import { ALBUMARTIST_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
import { OrderToggleButton, useMusicFolders } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks';
import {
AlbumArtistListFilter,
useAlbumArtistListFilter,
useAlbumArtistListStore,
useCurrentServer,
useListStoreActions,
} from '/@/renderer/store';
import { ListDisplayType, ServerType, TableColumn } from '/@/renderer/types';
const FILTERS = { const FILTERS = {
jellyfin: [ jellyfin: [
@ -61,11 +54,6 @@ const FILTERS = {
], ],
}; };
const ORDER = [
{ name: 'Ascending', value: SortOrder.ASC },
{ name: 'Descending', value: SortOrder.DESC },
];
interface AlbumArtistListHeaderFiltersProps { interface AlbumArtistListHeaderFiltersProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>; gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
tableRef: MutableRefObject<AgGridReactType | null>; tableRef: MutableRefObject<AgGridReactType | null>;
@ -84,6 +72,7 @@ export const AlbumArtistListHeaderFilters = ({
const filter = useAlbumArtistListFilter({ key: pageKey }); const filter = useAlbumArtistListFilter({ key: pageKey });
const cq = useContainerQuery(); const cq = useContainerQuery();
const isGrid = display === ListDisplayType.CARD || display === ListDisplayType.POSTER;
const musicFoldersQuery = useMusicFolders({ query: null, serverId: server?.id }); const musicFoldersQuery = useMusicFolders({ query: null, serverId: server?.id });
const sortByLabel = const sortByLabel =
@ -92,8 +81,6 @@ export const AlbumArtistListHeaderFilters = ({
?.name) || ?.name) ||
'Unknown'; 'Unknown';
const sortOrderLabel = ORDER.find((o) => o.value === filter.sortOrder)?.name || 'Unknown';
const handleItemSize = (e: number) => { const handleItemSize = (e: number) => {
if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) { if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
setTable({ data: { rowHeight: e }, key: pageKey }); setTable({ data: { rowHeight: e }, key: pageKey });
@ -332,51 +319,41 @@ export const AlbumArtistListHeaderFilters = ({
))} ))}
</DropdownMenu.Dropdown> </DropdownMenu.Dropdown>
</DropdownMenu> </DropdownMenu>
<Button <Divider orientation="vertical" />
compact <OrderToggleButton
fw="600" sortOrder={filter.sortOrder}
size="md" onToggle={handleToggleSortOrder}
variant="subtle" />
onClick={handleToggleSortOrder}
>
{cq.isMd ? (
sortOrderLabel
) : (
<>
{filter.sortOrder === SortOrder.ASC ? (
<RiSortAsc size={15} />
) : (
<RiSortDesc size={15} />
)}
</>
)}
</Button>
{server?.type === ServerType.JELLYFIN && ( {server?.type === ServerType.JELLYFIN && (
<DropdownMenu position="bottom-start"> <>
<DropdownMenu.Target> <Divider orientation="vertical" />
<Button <DropdownMenu position="bottom-start">
compact <DropdownMenu.Target>
fw="600" <Button
size="md" compact
variant="subtle" fw="600"
> size="md"
{cq.isMd ? 'Folder' : <RiFolder2Line size={15} />} variant="subtle"
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{musicFoldersQuery.data?.items.map((folder) => (
<DropdownMenu.Item
key={`musicFolder-${folder.id}`}
$isActive={filter.musicFolderId === folder.id}
value={folder.id}
onClick={handleSetMusicFolder}
> >
{folder.name} {cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
</DropdownMenu.Item> </Button>
))} </DropdownMenu.Target>
</DropdownMenu.Dropdown> <DropdownMenu.Dropdown>
</DropdownMenu> {musicFoldersQuery.data?.items.map((folder) => (
<DropdownMenu.Item
key={`musicFolder-${folder.id}`}
$isActive={filter.musicFolderId === folder.id}
value={folder.id}
onClick={handleSetMusicFolder}
>
{folder.name}
</DropdownMenu.Item>
))}
</DropdownMenu.Dropdown>
</DropdownMenu>
</>
)} )}
<Divider orientation="vertical" />
<DropdownMenu position="bottom-start"> <DropdownMenu position="bottom-start">
<DropdownMenu.Target> <DropdownMenu.Target>
<Button <Button
@ -460,8 +437,7 @@ export const AlbumArtistListHeaderFilters = ({
/> />
)} )}
</DropdownMenu.Item> </DropdownMenu.Item>
{(display === ListDisplayType.TABLE || {!isGrid && (
display === ListDisplayType.TABLE_PAGINATED) && (
<> <>
<DropdownMenu.Label>Table Columns</DropdownMenu.Label> <DropdownMenu.Label>Table Columns</DropdownMenu.Label>
<DropdownMenu.Item <DropdownMenu.Item

92
src/renderer/features/artists/components/album-artist-list-table-view.tsx Normal file
View file

@ -0,0 +1,92 @@
import { MutableRefObject, useCallback } from 'react';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { AlbumArtistListQuery, AlbumArtistListResponse, LibraryItem } from '/@/renderer/api/types';
import {
AgGridFetchFn,
useVirtualTable,
} from '/@/renderer/components/virtual-table/hooks/use-virtual-table';
import { useAlbumArtistListContext } from '/@/renderer/features/artists/context/album-artist-list-context';
import { ARTIST_CONTEXT_MENU_ITEMS } from '../../context-menu/context-menu-items';
import {
useAlbumArtistListFilter,
useAlbumArtistListStore,
useCurrentServer,
useListStoreActions,
} from '/@/renderer/store';
import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
import { VirtualTable } from '/@/renderer/components/virtual-table';
interface AlbumArtistListTableViewProps {
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const AlbumArtistListTableView = ({
itemCount,
tableRef,
}: AlbumArtistListTableViewProps) => {
const server = useCurrentServer();
const { id, pageKey } = useAlbumArtistListContext();
const filter = useAlbumArtistListFilter({ id, key: pageKey });
const listProperties = useAlbumArtistListStore();
const { setTable, setTablePagination } = useListStoreActions();
const fetchFn: AgGridFetchFn<
AlbumArtistListResponse,
Omit<AlbumArtistListQuery, 'startIndex'>
> = useCallback(
async ({ filter, limit, startIndex }, signal) => {
const res = api.controller.getAlbumArtistList({
apiClientProps: {
server,
signal,
},
query: {
...filter,
limit,
sortBy: filter.sortBy,
sortOrder: filter.sortOrder,
startIndex,
},
});
return res;
},
[server],
);
const tableProps = useVirtualTable<
AlbumArtistListResponse,
Omit<AlbumArtistListQuery, 'startIndex'>
>({
contextMenu: ARTIST_CONTEXT_MENU_ITEMS,
fetch: {
filter,
fn: fetchFn,
itemCount,
queryKey: queryKeys.albums.list,
server,
},
itemCount,
itemType: LibraryItem.SONG,
pageKey,
properties: listProperties,
setTable,
setTablePagination,
tableRef,
});
return (
<VirtualGridAutoSizerContainer>
<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-${listProperties.display}-${listProperties.table.rowHeight}-${server?.id}`}
ref={tableRef}
{...tableProps}
/>
</VirtualGridAutoSizerContainer>
);
};

1
src/renderer/features/artists/routes/album-artist-list-route.tsx
View file

@ -45,6 +45,7 @@ const AlbumArtistListRoute = () => {
/> />
<AlbumArtistListContent <AlbumArtistListContent
gridRef={gridRef} gridRef={gridRef}
itemCount={itemCount}
tableRef={tableRef} tableRef={tableRef}
/> />
</AlbumArtistListContext.Provider> </AlbumArtistListContext.Provider>