vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-09 20:29:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

remove unused refs from list/grid components

Browse Source
This commit is contained in:
jeffvli
2025-12-08 22:00:34 -08:00
parent 628b0184de
commit a19a6815e9
24 changed files with 1563 additions and 1703 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/components/album-list-infinite-grid.tsx
+51 -53
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader'; import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -15,58 +14,57 @@ import {
SortOrder, SortOrder,
} from '/@/shared/types/domain-types'; } from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types'; import { ItemListKey } from '/@/shared/types/types';
interface AlbumListInfiniteGridProps extends ItemListGridComponentProps<AlbumListQuery> {} interface AlbumListInfiniteGridProps extends ItemListGridComponentProps<AlbumListQuery> {}
export const AlbumListInfiniteGrid = forwardRef<any, AlbumListInfiniteGridProps>( export const AlbumListInfiniteGrid = ({
({ gap = 'md',
gap = 'md', itemsPerPage = 100,
itemsPerPage = 100, itemsPerRow,
itemsPerRow, query = {
query = { sortBy: AlbumListSort.NAME,
sortBy: AlbumListSort.NAME, sortOrder: SortOrder.ASC,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
}) => {
const listCountQuery = albumQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM,
itemsPerPage,
itemType: LibraryItem.ALBUM,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
return (
<ItemGridList
data={data}
enableExpansion
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ALBUM}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
);
}, },
); saveScrollOffset = true,
serverId,
}: AlbumListInfiniteGridProps) => {
const listCountQuery = albumQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM,
itemsPerPage,
itemType: LibraryItem.ALBUM,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
return (
<ItemGridList
data={data}
enableExpansion
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ALBUM}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
);
};
src/renderer/features/albums/components/album-list-infinite-table.tsx
+69 -76
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader'; import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -20,79 +19,73 @@ import { ItemListKey } from '/@/shared/types/types';
interface AlbumListInfiniteTableProps extends ItemListTableComponentProps<AlbumListQuery> {} interface AlbumListInfiniteTableProps extends ItemListTableComponentProps<AlbumListQuery> {}
export const AlbumListInfiniteTable = forwardRef<any, AlbumListInfiniteTableProps>( export const AlbumListInfiniteTable = ({
( autoFitColumns = false,
{ columns,
autoFitColumns = false, enableAlternateRowColors = false,
columns, enableHorizontalBorders = false,
enableAlternateRowColors = false, enableRowHoverHighlight = true,
enableHorizontalBorders = false, enableSelection = true,
enableRowHoverHighlight = true, enableVerticalBorders = false,
enableSelection = true, itemsPerPage = 100,
enableVerticalBorders = false, query = {
itemsPerPage = 100, sortBy: AlbumListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: AlbumListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
size = 'default',
},
ref,
) => {
const listCountQuery = albumQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM,
itemsPerPage,
itemType: LibraryItem.ALBUM,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ALBUM,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ALBUM,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
enableAlternateRowColors={enableAlternateRowColors}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.ALBUM}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
/>
);
}, },
); saveScrollOffset = true,
serverId,
size = 'default',
}: AlbumListInfiniteTableProps) => {
const listCountQuery = albumQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM,
itemsPerPage,
itemType: LibraryItem.ALBUM,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ALBUM,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ALBUM,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
enableAlternateRowColors={enableAlternateRowColors}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.ALBUM}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
size={size}
/>
);
};
src/renderer/features/albums/components/album-list-paginated-grid.tsx
+61 -68
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader'; import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -20,71 +19,65 @@ import { ItemListKey } from '/@/shared/types/types';
interface AlbumListPaginatedGridProps extends ItemListGridComponentProps<AlbumListQuery> {} interface AlbumListPaginatedGridProps extends ItemListGridComponentProps<AlbumListQuery> {}
export const AlbumListPaginatedGrid = forwardRef<any, AlbumListPaginatedGridProps>( export const AlbumListPaginatedGrid = ({
( gap = 'md',
{ itemsPerPage = 100,
gap = 'md', itemsPerRow,
itemsPerPage = 100, query = {
itemsPerRow, sortBy: AlbumListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: AlbumListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
},
ref,
) => {
const listCountQuery = albumQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.ALBUM,
itemsPerPage,
itemType: LibraryItem.ALBUM,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemGridList
currentPage={currentPage}
data={data || []}
enableExpansion
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ALBUM}
onScrollEnd={handleOnScrollEnd}
ref={ref}
rows={rows}
/>
</ItemListWithPagination>
);
}, },
); saveScrollOffset = true,
serverId,
}: AlbumListPaginatedGridProps) => {
const listCountQuery = albumQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.ALBUM,
itemsPerPage,
itemType: LibraryItem.ALBUM,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemGridList
currentPage={currentPage}
data={data || []}
enableExpansion
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ALBUM}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
</ItemListWithPagination>
);
};
src/renderer/features/albums/components/album-list-paginated-table.tsx
+82 -89
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader'; import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -22,92 +21,86 @@ import { ItemListKey } from '/@/shared/types/types';
interface AlbumListPaginatedTableProps extends ItemListTableComponentProps<AlbumListQuery> {} interface AlbumListPaginatedTableProps extends ItemListTableComponentProps<AlbumListQuery> {}
export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTableProps>( export const AlbumListPaginatedTable = ({
( autoFitColumns = false,
{ columns,
autoFitColumns = false, enableAlternateRowColors = false,
columns, enableHorizontalBorders = false,
enableAlternateRowColors = false, enableRowHoverHighlight = true,
enableHorizontalBorders = false, enableSelection = true,
enableRowHoverHighlight = true, enableVerticalBorders = false,
enableSelection = true, itemsPerPage = 100,
enableVerticalBorders = false, query = {
itemsPerPage = 100, sortBy: AlbumListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: AlbumListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
size = 'default',
},
ref,
) => {
const listCountQuery = albumQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.ALBUM,
itemsPerPage,
itemType: LibraryItem.ALBUM,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ALBUM,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ALBUM,
});
const startRowIndex = currentPage * itemsPerPage;
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.ALBUM}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
startRowIndex={startRowIndex}
/>
</ItemListWithPagination>
);
}, },
); saveScrollOffset = true,
serverId,
size = 'default',
}: AlbumListPaginatedTableProps) => {
const listCountQuery = albumQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.ALBUM,
itemsPerPage,
itemType: LibraryItem.ALBUM,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ALBUM,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ALBUM,
});
const startRowIndex = currentPage * itemsPerPage;
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.ALBUM}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
size={size}
startRowIndex={startRowIndex}
/>
</ItemListWithPagination>
);
};
src/renderer/features/artists/components/album-artist-list-infinite-grid.tsx
+49 -51
View File
@@ -19,55 +19,53 @@ import { ItemListKey } from '/@/shared/types/types';
interface AlbumArtistListInfiniteGridProps interface AlbumArtistListInfiniteGridProps
extends ItemListGridComponentProps<AlbumArtistListQuery> {} extends ItemListGridComponentProps<AlbumArtistListQuery> {}
export const AlbumArtistListInfiniteGrid = forwardRef<any, AlbumArtistListInfiniteGridProps>( export const AlbumArtistListInfiniteGrid = ({
({ gap = 'md',
gap = 'md', itemsPerPage = 100,
itemsPerPage = 100, itemsPerRow,
itemsPerRow, query = {
query = { sortBy: AlbumArtistListSort.NAME,
sortBy: AlbumArtistListSort.NAME, sortOrder: SortOrder.ASC,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
}) => {
const listCountQuery = artistsQueries.albumArtistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumArtistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM_ARTIST,
itemsPerPage,
itemType: LibraryItem.ALBUM_ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST);
return (
<ItemGridList
data={data}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ALBUM_ARTIST}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
);
}, },
); saveScrollOffset = true,
serverId,
}: AlbumArtistListInfiniteGridProps) => {
const listCountQuery = artistsQueries.albumArtistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumArtistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM_ARTIST,
itemsPerPage,
itemType: LibraryItem.ALBUM_ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST);
return (
<ItemGridList
data={data}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ALBUM_ARTIST}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
);
};
src/renderer/features/artists/components/album-artist-list-infinite-table.tsx
+70 -77
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader'; import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -21,80 +20,74 @@ import { ItemListKey } from '/@/shared/types/types';
interface AlbumArtistListInfiniteTableProps interface AlbumArtistListInfiniteTableProps
extends ItemListTableComponentProps<AlbumArtistListQuery> {} extends ItemListTableComponentProps<AlbumArtistListQuery> {}
export const AlbumArtistListInfiniteTable = forwardRef<any, AlbumArtistListInfiniteTableProps>( export const AlbumArtistListInfiniteTable = ({
( autoFitColumns = false,
{ columns,
autoFitColumns = false, enableAlternateRowColors = false,
columns, enableHorizontalBorders = false,
enableAlternateRowColors = false, enableRowHoverHighlight = true,
enableHorizontalBorders = false, enableSelection = true,
enableRowHoverHighlight = true, enableVerticalBorders = false,
enableSelection = true, itemsPerPage = 100,
enableVerticalBorders = false, query = {
itemsPerPage = 100, sortBy: AlbumArtistListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: AlbumArtistListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
size = 'default',
},
ref,
) => {
const listCountQuery = artistsQueries.albumArtistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumArtistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM_ARTIST,
itemsPerPage,
itemType: LibraryItem.ALBUM_ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ALBUM_ARTIST,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ALBUM_ARTIST,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.ALBUM_ARTIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
/>
);
}, },
); saveScrollOffset = true,
serverId,
size = 'default',
}: AlbumArtistListInfiniteTableProps) => {
const listCountQuery = artistsQueries.albumArtistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumArtistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM_ARTIST,
itemsPerPage,
itemType: LibraryItem.ALBUM_ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ALBUM_ARTIST,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ALBUM_ARTIST,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.ALBUM_ARTIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
size={size}
/>
);
};
src/renderer/features/artists/components/album-artist-list-paginated-grid.tsx
+62 -67
View File
@@ -1,5 +1,5 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react'; import { ref } from 'process';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader'; import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -21,70 +21,65 @@ import { ItemListKey } from '/@/shared/types/types';
interface AlbumArtistListPaginatedGridProps interface AlbumArtistListPaginatedGridProps
extends ItemListGridComponentProps<AlbumArtistListQuery> {} extends ItemListGridComponentProps<AlbumArtistListQuery> {}
export const AlbumArtistListPaginatedGrid = forwardRef<any, AlbumArtistListPaginatedGridProps>( export const AlbumArtistListPaginatedGrid = ({
( gap = 'md',
{ itemsPerPage = 100,
gap = 'md', itemsPerRow,
itemsPerPage = 100, query = {
itemsPerRow, sortBy: AlbumArtistListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: AlbumArtistListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
},
ref,
) => {
const listCountQuery = artistsQueries.albumArtistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumArtistList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.ALBUM_ARTIST,
itemsPerPage,
itemType: LibraryItem.ALBUM_ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST);
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemGridList
currentPage={currentPage}
data={data || []}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ALBUM_ARTIST}
onScrollEnd={handleOnScrollEnd}
ref={ref}
rows={rows}
/>
</ItemListWithPagination>
);
}, },
); saveScrollOffset = true,
serverId,
}: AlbumArtistListPaginatedGridProps) => {
const listCountQuery = artistsQueries.albumArtistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumArtistList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.ALBUM_ARTIST,
itemsPerPage,
itemType: LibraryItem.ALBUM_ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST);
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemGridList
currentPage={currentPage}
data={data || []}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ALBUM_ARTIST}
onScrollEnd={handleOnScrollEnd}
ref={ref}
rows={rows}
/>
</ItemListWithPagination>
);
};
src/renderer/features/artists/components/album-artist-list-paginated-table.tsx
+83 -90
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader'; import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -23,93 +22,87 @@ import { ItemListKey } from '/@/shared/types/types';
interface AlbumArtistListPaginatedTableProps interface AlbumArtistListPaginatedTableProps
extends ItemListTableComponentProps<AlbumArtistListQuery> {} extends ItemListTableComponentProps<AlbumArtistListQuery> {}
export const AlbumArtistListPaginatedTable = forwardRef<any, AlbumArtistListPaginatedTableProps>( export const AlbumArtistListPaginatedTable = ({
( autoFitColumns = false,
{ columns,
autoFitColumns = false, enableAlternateRowColors = false,
columns, enableHorizontalBorders = false,
enableAlternateRowColors = false, enableRowHoverHighlight = true,
enableHorizontalBorders = false, enableSelection = true,
enableRowHoverHighlight = true, enableVerticalBorders = false,
enableSelection = true, itemsPerPage = 100,
enableVerticalBorders = false, query = {
itemsPerPage = 100, sortBy: AlbumArtistListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: AlbumArtistListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
size = 'default',
},
ref,
) => {
const listCountQuery = artistsQueries.albumArtistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumArtistList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.ALBUM_ARTIST,
itemsPerPage,
itemType: LibraryItem.ALBUM_ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ALBUM_ARTIST,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ALBUM_ARTIST,
});
const startRowIndex = currentPage * itemsPerPage;
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.ALBUM_ARTIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
startRowIndex={startRowIndex}
/>
</ItemListWithPagination>
);
}, },
); saveScrollOffset = true,
serverId,
size = 'default',
}: AlbumArtistListPaginatedTableProps) => {
const listCountQuery = artistsQueries.albumArtistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumArtistList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.ALBUM_ARTIST,
itemsPerPage,
itemType: LibraryItem.ALBUM_ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ALBUM_ARTIST,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ALBUM_ARTIST,
});
const startRowIndex = currentPage * itemsPerPage;
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.ALBUM_ARTIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
size={size}
startRowIndex={startRowIndex}
/>
</ItemListWithPagination>
);
};
src/renderer/features/artists/components/artist-list-infinite-grid.tsx
+49 -52
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader'; import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -18,55 +17,53 @@ import { ItemListKey } from '/@/shared/types/types';
interface ArtistListInfiniteGridProps extends ItemListGridComponentProps<ArtistListQuery> {} interface ArtistListInfiniteGridProps extends ItemListGridComponentProps<ArtistListQuery> {}
export const ArtistListInfiniteGrid = forwardRef<any, ArtistListInfiniteGridProps>( export const ArtistListInfiniteGrid = ({
({ gap = 'md',
gap = 'md', itemsPerPage = 100,
itemsPerPage = 100, itemsPerRow,
itemsPerRow, query = {
query = { sortBy: ArtistListSort.NAME,
sortBy: ArtistListSort.NAME, sortOrder: SortOrder.ASC,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
}) => {
const listCountQuery = artistsQueries.artistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getArtistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ARTIST,
itemsPerPage,
itemType: LibraryItem.ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST);
return (
<ItemGridList
data={data}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ARTIST}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
);
}, },
); saveScrollOffset = true,
serverId,
}: ArtistListInfiniteGridProps) => {
const listCountQuery = artistsQueries.artistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getArtistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ARTIST,
itemsPerPage,
itemType: LibraryItem.ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST);
return (
<ItemGridList
data={data}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ARTIST}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
);
};
src/renderer/features/artists/components/artist-list-infinite-table.tsx
+70 -77
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader'; import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -20,80 +19,74 @@ import { ItemListKey } from '/@/shared/types/types';
interface ArtistListInfiniteTableProps extends ItemListTableComponentProps<ArtistListQuery> {} interface ArtistListInfiniteTableProps extends ItemListTableComponentProps<ArtistListQuery> {}
export const ArtistListInfiniteTable = forwardRef<any, ArtistListInfiniteTableProps>( export const ArtistListInfiniteTable = ({
( autoFitColumns = false,
{ columns,
autoFitColumns = false, enableAlternateRowColors = false,
columns, enableHorizontalBorders = false,
enableAlternateRowColors = false, enableRowHoverHighlight = true,
enableHorizontalBorders = false, enableSelection = true,
enableRowHoverHighlight = true, enableVerticalBorders = false,
enableSelection = true, itemsPerPage = 100,
enableVerticalBorders = false, query = {
itemsPerPage = 100, sortBy: ArtistListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: ArtistListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
size = 'default',
},
ref,
) => {
const listCountQuery = artistsQueries.artistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getArtistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ARTIST,
itemsPerPage,
itemType: LibraryItem.ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ARTIST,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ARTIST,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.ARTIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
/>
);
}, },
); saveScrollOffset = true,
serverId,
size = 'default',
}: ArtistListInfiniteTableProps) => {
const listCountQuery = artistsQueries.artistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getArtistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ARTIST,
itemsPerPage,
itemType: LibraryItem.ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ARTIST,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ARTIST,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.ARTIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
size={size}
/>
);
};
src/renderer/features/artists/components/artist-list-paginated-grid.tsx
+60 -67
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader'; import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -20,70 +19,64 @@ import { ItemListKey } from '/@/shared/types/types';
interface ArtistListPaginatedGridProps extends ItemListGridComponentProps<ArtistListQuery> {} interface ArtistListPaginatedGridProps extends ItemListGridComponentProps<ArtistListQuery> {}
export const ArtistListPaginatedGrid = forwardRef<any, ArtistListPaginatedGridProps>( export const ArtistListPaginatedGrid = ({
( gap = 'md',
{ itemsPerPage = 100,
gap = 'md', itemsPerRow,
itemsPerPage = 100, query = {
itemsPerRow, sortBy: ArtistListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: ArtistListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
},
ref,
) => {
const listCountQuery = artistsQueries.artistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getArtistList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.ARTIST,
itemsPerPage,
itemType: LibraryItem.ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST);
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemGridList
currentPage={currentPage}
data={data || []}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ARTIST}
onScrollEnd={handleOnScrollEnd}
ref={ref}
rows={rows}
/>
</ItemListWithPagination>
);
}, },
); saveScrollOffset = true,
serverId,
}: ArtistListPaginatedGridProps) => {
const listCountQuery = artistsQueries.artistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getArtistList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.ARTIST,
itemsPerPage,
itemType: LibraryItem.ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST);
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemGridList
currentPage={currentPage}
data={data || []}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ARTIST}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
</ItemListWithPagination>
);
};
src/renderer/features/artists/components/artist-list-paginated-table.tsx
+83 -90
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader'; import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -22,93 +21,87 @@ import { ItemListKey } from '/@/shared/types/types';
interface ArtistListPaginatedTableProps extends ItemListTableComponentProps<ArtistListQuery> {} interface ArtistListPaginatedTableProps extends ItemListTableComponentProps<ArtistListQuery> {}
export const ArtistListPaginatedTable = forwardRef<any, ArtistListPaginatedTableProps>( export const ArtistListPaginatedTable = ({
( autoFitColumns = false,
{ columns,
autoFitColumns = false, enableAlternateRowColors = false,
columns, enableHorizontalBorders = false,
enableAlternateRowColors = false, enableRowHoverHighlight = true,
enableHorizontalBorders = false, enableSelection = true,
enableRowHoverHighlight = true, enableVerticalBorders = false,
enableSelection = true, itemsPerPage = 100,
enableVerticalBorders = false, query = {
itemsPerPage = 100, sortBy: ArtistListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: ArtistListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
size = 'default',
},
ref,
) => {
const listCountQuery = artistsQueries.artistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getArtistList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.ARTIST,
itemsPerPage,
itemType: LibraryItem.ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ARTIST,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ARTIST,
});
const startRowIndex = currentPage * itemsPerPage;
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.ARTIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
startRowIndex={startRowIndex}
/>
</ItemListWithPagination>
);
}, },
); saveScrollOffset = true,
serverId,
size = 'default',
}: ArtistListPaginatedTableProps) => {
const listCountQuery = artistsQueries.artistListCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getArtistList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.ARTIST,
itemsPerPage,
itemType: LibraryItem.ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ARTIST,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ARTIST,
});
const startRowIndex = currentPage * itemsPerPage;
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.ARTIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
size={size}
startRowIndex={startRowIndex}
/>
</ItemListWithPagination>
);
};
src/renderer/features/genres/components/genre-list-infinite-grid.tsx
+49 -52
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader'; import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -18,55 +17,53 @@ import { ItemListKey } from '/@/shared/types/types';
interface GenreListInfiniteGridProps extends ItemListGridComponentProps<GenreListQuery> {} interface GenreListInfiniteGridProps extends ItemListGridComponentProps<GenreListQuery> {}
export const GenreListInfiniteGrid = forwardRef<any, GenreListInfiniteGridProps>( export const GenreListInfiniteGrid = ({
({ gap = 'md',
gap = 'md', itemsPerPage = 100,
itemsPerPage = 100, itemsPerRow,
itemsPerRow, query = {
query = { sortBy: GenreListSort.NAME,
sortBy: GenreListSort.NAME, sortOrder: SortOrder.ASC,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
}) => {
const listCountQuery = genresQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getGenreList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.GENRE,
itemsPerPage,
itemType: LibraryItem.GENRE,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE);
return (
<ItemGridList
data={data}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.GENRE}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
);
}, },
); saveScrollOffset = true,
serverId,
}: GenreListInfiniteGridProps) => {
const listCountQuery = genresQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getGenreList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.GENRE,
itemsPerPage,
itemType: LibraryItem.GENRE,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE);
return (
<ItemGridList
data={data}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.GENRE}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
);
};
src/renderer/features/genres/components/genre-list-infinite-table.tsx
+70 -77
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader'; import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -20,80 +19,74 @@ import { ItemListKey } from '/@/shared/types/types';
interface GenreListInfiniteTableProps extends ItemListTableComponentProps<GenreListQuery> {} interface GenreListInfiniteTableProps extends ItemListTableComponentProps<GenreListQuery> {}
export const GenreListInfiniteTable = forwardRef<any, GenreListInfiniteTableProps>( export const GenreListInfiniteTable = ({
( autoFitColumns = false,
{ columns,
autoFitColumns = false, enableAlternateRowColors = false,
columns, enableHorizontalBorders = false,
enableAlternateRowColors = false, enableRowHoverHighlight = true,
enableHorizontalBorders = false, enableSelection = true,
enableRowHoverHighlight = true, enableVerticalBorders = false,
enableSelection = true, itemsPerPage = 100,
enableVerticalBorders = false, query = {
itemsPerPage = 100, sortBy: GenreListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
size = 'default',
},
ref,
) => {
const listCountQuery = genresQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getGenreList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.GENRE,
itemsPerPage,
itemType: LibraryItem.GENRE,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.GENRE,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.GENRE,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.GENRE}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
/>
);
}, },
); saveScrollOffset = true,
serverId,
size = 'default',
}: GenreListInfiniteTableProps) => {
const listCountQuery = genresQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getGenreList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.GENRE,
itemsPerPage,
itemType: LibraryItem.GENRE,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.GENRE,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.GENRE,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.GENRE}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
size={size}
/>
);
};
src/renderer/features/genres/components/genre-list-paginated-grid.tsx
+60 -67
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader'; import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -20,70 +19,64 @@ import { ItemListKey } from '/@/shared/types/types';
interface GenreListPaginatedGridProps extends ItemListGridComponentProps<GenreListQuery> {} interface GenreListPaginatedGridProps extends ItemListGridComponentProps<GenreListQuery> {}
export const GenreListPaginatedGrid = forwardRef<any, GenreListPaginatedGridProps>( export const GenreListPaginatedGrid = ({
( gap = 'md',
{ itemsPerPage = 100,
gap = 'md', itemsPerRow,
itemsPerPage = 100, query = {
itemsPerRow, sortBy: GenreListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
},
ref,
) => {
const listCountQuery = genresQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getGenreList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.GENRE,
itemsPerPage,
itemType: LibraryItem.GENRE,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE);
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemGridList
currentPage={currentPage}
data={data || []}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.GENRE}
onScrollEnd={handleOnScrollEnd}
ref={ref}
rows={rows}
/>
</ItemListWithPagination>
);
}, },
); saveScrollOffset = true,
serverId,
}: GenreListPaginatedGridProps) => {
const listCountQuery = genresQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getGenreList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.GENRE,
itemsPerPage,
itemType: LibraryItem.GENRE,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE);
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemGridList
currentPage={currentPage}
data={data || []}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.GENRE}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
</ItemListWithPagination>
);
};
src/renderer/features/genres/components/genre-list-paginated-table.tsx
+83 -90
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader'; import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -22,93 +21,87 @@ import { ItemListKey } from '/@/shared/types/types';
interface GenreListPaginatedTableProps extends ItemListTableComponentProps<GenreListQuery> {} interface GenreListPaginatedTableProps extends ItemListTableComponentProps<GenreListQuery> {}
export const GenreListPaginatedTable = forwardRef<any, GenreListPaginatedTableProps>( export const GenreListPaginatedTable = ({
( autoFitColumns = false,
{ columns,
autoFitColumns = false, enableAlternateRowColors = false,
columns, enableHorizontalBorders = false,
enableAlternateRowColors = false, enableRowHoverHighlight = true,
enableHorizontalBorders = false, enableSelection = true,
enableRowHoverHighlight = true, enableVerticalBorders = false,
enableSelection = true, itemsPerPage = 100,
enableVerticalBorders = false, query = {
itemsPerPage = 100, sortBy: GenreListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
size = 'default',
},
ref,
) => {
const listCountQuery = genresQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getGenreList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.GENRE,
itemsPerPage,
itemType: LibraryItem.GENRE,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.GENRE,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.GENRE,
});
const startRowIndex = currentPage * itemsPerPage;
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.GENRE}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
startRowIndex={startRowIndex}
/>
</ItemListWithPagination>
);
}, },
); saveScrollOffset = true,
serverId,
size = 'default',
}: GenreListPaginatedTableProps) => {
const listCountQuery = genresQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getGenreList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.GENRE,
itemsPerPage,
itemType: LibraryItem.GENRE,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.GENRE,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.GENRE,
});
const startRowIndex = currentPage * itemsPerPage;
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.GENRE}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
size={size}
startRowIndex={startRowIndex}
/>
</ItemListWithPagination>
);
};
src/renderer/features/playlists/components/playlist-list-infinite-grid.tsx
+49 -52
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader'; import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -18,55 +17,53 @@ import { ItemListKey } from '/@/shared/types/types';
interface PlaylistListInfiniteGridProps extends ItemListGridComponentProps<PlaylistListQuery> {} interface PlaylistListInfiniteGridProps extends ItemListGridComponentProps<PlaylistListQuery> {}
export const PlaylistListInfiniteGrid = forwardRef<any, PlaylistListInfiniteGridProps>( export const PlaylistListInfiniteGrid = ({
({ gap = 'md',
gap = 'md', itemsPerPage = 100,
itemsPerPage = 100, itemsPerRow,
itemsPerRow, query = {
query = { sortBy: PlaylistListSort.NAME,
sortBy: PlaylistListSort.NAME, sortOrder: SortOrder.ASC,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
}) => {
const listCountQuery = playlistsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getPlaylistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.PLAYLIST,
itemsPerPage,
itemType: LibraryItem.PLAYLIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
return (
<ItemGridList
data={data}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.PLAYLIST}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
);
}, },
); saveScrollOffset = true,
serverId,
}: PlaylistListInfiniteGridProps) => {
const listCountQuery = playlistsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getPlaylistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.PLAYLIST,
itemsPerPage,
itemType: LibraryItem.PLAYLIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
return (
<ItemGridList
data={data}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.PLAYLIST}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
);
};
src/renderer/features/playlists/components/playlist-list-infinite-table.tsx
+69 -76
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader'; import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -20,79 +19,73 @@ import { ItemListKey } from '/@/shared/types/types';
interface PlaylistListInfiniteTableProps extends ItemListTableComponentProps<PlaylistListQuery> {} interface PlaylistListInfiniteTableProps extends ItemListTableComponentProps<PlaylistListQuery> {}
export const PlaylistListInfiniteTable = forwardRef<any, PlaylistListInfiniteTableProps>( export const PlaylistListInfiniteTable = ({
( autoFitColumns = false,
{ columns,
autoFitColumns = false, enableAlternateRowColors = false,
columns, enableHorizontalBorders = false,
enableAlternateRowColors = false, enableRowHoverHighlight = true,
enableHorizontalBorders = false, enableSelection = true,
enableRowHoverHighlight = true, enableVerticalBorders = false,
enableSelection = true, itemsPerPage = 100,
enableVerticalBorders = false, query = {
itemsPerPage = 100, sortBy: PlaylistListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: PlaylistListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
size = 'default',
},
ref,
) => {
const listCountQuery = playlistsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getPlaylistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.PLAYLIST,
itemsPerPage,
itemType: LibraryItem.PLAYLIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.PLAYLIST,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.PLAYLIST,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
enableAlternateRowColors={enableAlternateRowColors}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.PLAYLIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
/>
);
}, },
); saveScrollOffset = true,
serverId,
size = 'default',
}: PlaylistListInfiniteTableProps) => {
const listCountQuery = playlistsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getPlaylistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.PLAYLIST,
itemsPerPage,
itemType: LibraryItem.PLAYLIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.PLAYLIST,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.PLAYLIST,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
enableAlternateRowColors={enableAlternateRowColors}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.PLAYLIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
size={size}
/>
);
};
src/renderer/features/playlists/components/playlist-list-paginated-grid.tsx
+60 -67
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader'; import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -20,70 +19,64 @@ import { ItemListKey } from '/@/shared/types/types';
interface PlaylistListPaginatedGridProps extends ItemListGridComponentProps<PlaylistListQuery> {} interface PlaylistListPaginatedGridProps extends ItemListGridComponentProps<PlaylistListQuery> {}
export const PlaylistListPaginatedGrid = forwardRef<any, PlaylistListPaginatedGridProps>( export const PlaylistListPaginatedGrid = ({
( gap = 'md',
{ itemsPerPage = 100,
gap = 'md', itemsPerRow,
itemsPerPage = 100, query = {
itemsPerRow, sortBy: PlaylistListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: PlaylistListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
},
ref,
) => {
const listCountQuery = playlistsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getPlaylistList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.PLAYLIST,
itemsPerPage,
itemType: LibraryItem.PLAYLIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemGridList
currentPage={currentPage}
data={data || []}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.PLAYLIST}
onScrollEnd={handleOnScrollEnd}
ref={ref}
rows={rows}
/>
</ItemListWithPagination>
);
}, },
); saveScrollOffset = true,
serverId,
}: PlaylistListPaginatedGridProps) => {
const listCountQuery = playlistsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getPlaylistList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.PLAYLIST,
itemsPerPage,
itemType: LibraryItem.PLAYLIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemGridList
currentPage={currentPage}
data={data || []}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.PLAYLIST}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
</ItemListWithPagination>
);
};
src/renderer/features/playlists/components/playlist-list-paginated-table.tsx
+82 -89
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader'; import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -22,92 +21,86 @@ import { ItemListKey } from '/@/shared/types/types';
interface PlaylistListPaginatedTableProps extends ItemListTableComponentProps<PlaylistListQuery> {} interface PlaylistListPaginatedTableProps extends ItemListTableComponentProps<PlaylistListQuery> {}
export const PlaylistListPaginatedTable = forwardRef<any, PlaylistListPaginatedTableProps>( export const PlaylistListPaginatedTable = ({
( autoFitColumns = false,
{ columns,
autoFitColumns = false, enableAlternateRowColors = false,
columns, enableHorizontalBorders = false,
enableAlternateRowColors = false, enableRowHoverHighlight = true,
enableHorizontalBorders = false, enableSelection = true,
enableRowHoverHighlight = true, enableVerticalBorders = false,
enableSelection = true, itemsPerPage = 100,
enableVerticalBorders = false, query = {
itemsPerPage = 100, sortBy: PlaylistListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: PlaylistListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
size = 'default',
},
ref,
) => {
const listCountQuery = playlistsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getPlaylistList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.PLAYLIST,
itemsPerPage,
itemType: LibraryItem.PLAYLIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.PLAYLIST,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.PLAYLIST,
});
const startRowIndex = currentPage * itemsPerPage;
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.PLAYLIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
startRowIndex={startRowIndex}
/>
</ItemListWithPagination>
);
}, },
); saveScrollOffset = true,
serverId,
size = 'default',
}: PlaylistListPaginatedTableProps) => {
const listCountQuery = playlistsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getPlaylistList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.PLAYLIST,
itemsPerPage,
itemType: LibraryItem.PLAYLIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.PLAYLIST,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.PLAYLIST,
});
const startRowIndex = currentPage * itemsPerPage;
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.PLAYLIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
size={size}
startRowIndex={startRowIndex}
/>
</ItemListWithPagination>
);
};
src/renderer/features/songs/components/song-list-infinite-grid.tsx
+49 -52
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader'; import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -13,55 +12,53 @@ import { ItemListKey } from '/@/shared/types/types';
interface SongListInfiniteGridProps extends ItemListGridComponentProps<SongListQuery> {} interface SongListInfiniteGridProps extends ItemListGridComponentProps<SongListQuery> {}
export const SongListInfiniteGrid = forwardRef<any, SongListInfiniteGridProps>( export const SongListInfiniteGrid = ({
({ gap = 'md',
gap = 'md', itemsPerPage = 100,
itemsPerPage = 100, itemsPerRow,
itemsPerRow, query = {
query = { sortBy: SongListSort.NAME,
sortBy: SongListSort.NAME, sortOrder: SortOrder.ASC,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
}) => {
const listCountQuery = songsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getSongList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.SONG,
itemsPerPage,
itemType: LibraryItem.SONG,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG);
return (
<ItemGridList
data={data}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.SONG}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
);
}, },
); saveScrollOffset = true,
serverId,
}: SongListInfiniteGridProps) => {
const listCountQuery = songsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getSongList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.SONG,
itemsPerPage,
itemType: LibraryItem.SONG,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG);
return (
<ItemGridList
data={data}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.SONG}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
rows={rows}
/>
);
};
src/renderer/features/songs/components/song-list-infinite-table.tsx
+70 -77
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader'; import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -15,80 +14,74 @@ import { ItemListKey } from '/@/shared/types/types';
interface SongListInfiniteTableProps extends ItemListTableComponentProps<SongListQuery> {} interface SongListInfiniteTableProps extends ItemListTableComponentProps<SongListQuery> {}
export const SongListInfiniteTable = forwardRef<any, SongListInfiniteTableProps>( export const SongListInfiniteTable = ({
( autoFitColumns = false,
{ columns,
autoFitColumns = false, enableAlternateRowColors = false,
columns, enableHorizontalBorders = false,
enableAlternateRowColors = false, enableRowHoverHighlight = true,
enableHorizontalBorders = false, enableSelection = true,
enableRowHoverHighlight = true, enableVerticalBorders = false,
enableSelection = true, itemsPerPage = 100,
enableVerticalBorders = false, query = {
itemsPerPage = 100, sortBy: SongListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: SongListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
size = 'default',
},
ref,
) => {
const listCountQuery = songsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getSongList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.SONG,
itemsPerPage,
itemType: LibraryItem.SONG,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.SONG,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.SONG,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.SONG}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
/>
);
}, },
); saveScrollOffset = true,
serverId,
size = 'default',
}: SongListInfiniteTableProps) => {
const listCountQuery = songsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getSongList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.SONG,
itemsPerPage,
itemType: LibraryItem.SONG,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.SONG,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.SONG,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.SONG}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
size={size}
/>
);
};
src/renderer/features/songs/components/song-list-paginated-grid.tsx
+50 -57
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader'; import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -14,60 +13,54 @@ import { ItemListKey } from '/@/shared/types/types';
interface SongListPaginatedGridProps extends ItemListGridComponentProps<SongListQuery> {} interface SongListPaginatedGridProps extends ItemListGridComponentProps<SongListQuery> {}
export const SongListPaginatedGrid = forwardRef<any, SongListPaginatedGridProps>( export const SongListPaginatedGrid = ({
( gap = 'md',
{ itemsPerPage = 100,
gap = 'md', itemsPerRow,
itemsPerPage = 100, query = {
itemsPerRow, sortBy: SongListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: SongListSort.NAME,
sortOrder: SortOrder.ASC,
},
serverId,
},
ref,
) => {
const listCountQuery = songsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getSongList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.SONG,
itemsPerPage,
itemType: LibraryItem.SONG,
listCountQuery,
listQueryFn,
query,
serverId,
});
const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG);
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemGridList
currentPage={currentPage}
data={data || []}
gap={gap}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.SONG}
ref={ref}
rows={rows}
/>
</ItemListWithPagination>
);
}, },
); serverId,
}: SongListPaginatedGridProps) => {
const listCountQuery = songsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getSongList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.SONG,
itemsPerPage,
itemType: LibraryItem.SONG,
listCountQuery,
listQueryFn,
query,
serverId,
});
const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG);
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemGridList
currentPage={currentPage}
data={data || []}
gap={gap}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.SONG}
rows={rows}
/>
</ItemListWithPagination>
);
};
src/renderer/features/songs/components/song-list-paginated-table.tsx
+83 -90
View File
@@ -1,5 +1,4 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query'; import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { forwardRef } from 'react';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader'; import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -17,93 +16,87 @@ import { ItemListKey } from '/@/shared/types/types';
interface SongListPaginatedTableProps extends ItemListTableComponentProps<SongListQuery> {} interface SongListPaginatedTableProps extends ItemListTableComponentProps<SongListQuery> {}
export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProps>( export const SongListPaginatedTable = ({
( autoFitColumns = false,
{ columns,
autoFitColumns = false, enableAlternateRowColors = false,
columns, enableHorizontalBorders = false,
enableAlternateRowColors = false, enableRowHoverHighlight = true,
enableHorizontalBorders = false, enableSelection = true,
enableRowHoverHighlight = true, enableVerticalBorders = false,
enableSelection = true, itemsPerPage = 100,
enableVerticalBorders = false, query = {
itemsPerPage = 100, sortBy: SongListSort.NAME,
query = { sortOrder: SortOrder.ASC,
sortBy: SongListSort.NAME,
sortOrder: SortOrder.ASC,
},
saveScrollOffset = true,
serverId,
size = 'default',
},
ref,
) => {
const listCountQuery = songsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getSongList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.SONG,
itemsPerPage,
itemType: LibraryItem.SONG,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.SONG,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.SONG,
});
const startRowIndex = currentPage * itemsPerPage;
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.SONG}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
startRowIndex={startRowIndex}
/>
</ItemListWithPagination>
);
}, },
); saveScrollOffset = true,
serverId,
size = 'default',
}: SongListPaginatedTableProps) => {
const listCountQuery = songsQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getSongList;
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.SONG,
itemsPerPage,
itemType: LibraryItem.SONG,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
});
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.SONG,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.SONG,
});
const startRowIndex = currentPage * itemsPerPage;
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemTableList
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemType={LibraryItem.SONG}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
size={size}
startRowIndex={startRowIndex}
/>
</ItemListWithPagination>
);
};