mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 04:20:12 +02:00
remove unused refs from list/grid components
This commit is contained in:
jeffvli
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
|
||||
@@ -15,58 +14,57 @@ import {
|
||||
SortOrder,
|
||||
} from '/@/shared/types/domain-types';
|
||||
import { ItemListKey } from '/@/shared/types/types';
|
||||
|
||||
interface AlbumListInfiniteGridProps extends ItemListGridComponentProps<AlbumListQuery> {}
|
||||
|
||||
export const AlbumListInfiniteGrid = forwardRef<any, AlbumListInfiniteGridProps>(
|
||||
({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: AlbumListSort.NAME,
|
||||
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}
|
||||
/>
|
||||
);
|
||||
export const AlbumListInfiniteGrid = ({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: AlbumListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const AlbumListInfiniteTable = forwardRef<any, AlbumListInfiniteTableProps>(
|
||||
(
|
||||
{
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
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}
|
||||
/>
|
||||
);
|
||||
export const AlbumListInfiniteTable = ({
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
sortBy: AlbumListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const AlbumListPaginatedGrid = forwardRef<any, AlbumListPaginatedGridProps>(
|
||||
(
|
||||
{
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
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>
|
||||
);
|
||||
export const AlbumListPaginatedGrid = ({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: AlbumListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTableProps>(
|
||||
(
|
||||
{
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
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>
|
||||
);
|
||||
export const AlbumListPaginatedTable = ({
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
sortBy: AlbumListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -19,55 +19,53 @@ import { ItemListKey } from '/@/shared/types/types';
|
||||
interface AlbumArtistListInfiniteGridProps
|
||||
extends ItemListGridComponentProps<AlbumArtistListQuery> {}
|
||||
|
||||
export const AlbumArtistListInfiniteGrid = forwardRef<any, AlbumArtistListInfiniteGridProps>(
|
||||
({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: AlbumArtistListSort.NAME,
|
||||
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}
|
||||
/>
|
||||
);
|
||||
export const AlbumArtistListInfiniteGrid = ({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: AlbumArtistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
|
||||
@@ -21,80 +20,74 @@ import { ItemListKey } from '/@/shared/types/types';
|
||||
interface AlbumArtistListInfiniteTableProps
|
||||
extends ItemListTableComponentProps<AlbumArtistListQuery> {}
|
||||
|
||||
export const AlbumArtistListInfiniteTable = forwardRef<any, AlbumArtistListInfiniteTableProps>(
|
||||
(
|
||||
{
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
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}
|
||||
/>
|
||||
);
|
||||
export const AlbumArtistListInfiniteTable = ({
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
sortBy: AlbumArtistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
import { ref } from 'process';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
|
||||
@@ -21,70 +21,65 @@ import { ItemListKey } from '/@/shared/types/types';
|
||||
interface AlbumArtistListPaginatedGridProps
|
||||
extends ItemListGridComponentProps<AlbumArtistListQuery> {}
|
||||
|
||||
export const AlbumArtistListPaginatedGrid = forwardRef<any, AlbumArtistListPaginatedGridProps>(
|
||||
(
|
||||
{
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
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>
|
||||
);
|
||||
export const AlbumArtistListPaginatedGrid = ({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: AlbumArtistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
|
||||
@@ -23,93 +22,87 @@ import { ItemListKey } from '/@/shared/types/types';
|
||||
interface AlbumArtistListPaginatedTableProps
|
||||
extends ItemListTableComponentProps<AlbumArtistListQuery> {}
|
||||
|
||||
export const AlbumArtistListPaginatedTable = forwardRef<any, AlbumArtistListPaginatedTableProps>(
|
||||
(
|
||||
{
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
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>
|
||||
);
|
||||
export const AlbumArtistListPaginatedTable = ({
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
sortBy: AlbumArtistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const ArtistListInfiniteGrid = forwardRef<any, ArtistListInfiniteGridProps>(
|
||||
({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: ArtistListSort.NAME,
|
||||
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}
|
||||
/>
|
||||
);
|
||||
export const ArtistListInfiniteGrid = ({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: ArtistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const ArtistListInfiniteTable = forwardRef<any, ArtistListInfiniteTableProps>(
|
||||
(
|
||||
{
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
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}
|
||||
/>
|
||||
);
|
||||
export const ArtistListInfiniteTable = ({
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
sortBy: ArtistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const ArtistListPaginatedGrid = forwardRef<any, ArtistListPaginatedGridProps>(
|
||||
(
|
||||
{
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
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>
|
||||
);
|
||||
export const ArtistListPaginatedGrid = ({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: ArtistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const ArtistListPaginatedTable = forwardRef<any, ArtistListPaginatedTableProps>(
|
||||
(
|
||||
{
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
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>
|
||||
);
|
||||
export const ArtistListPaginatedTable = ({
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
sortBy: ArtistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const GenreListInfiniteGrid = forwardRef<any, GenreListInfiniteGridProps>(
|
||||
({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: GenreListSort.NAME,
|
||||
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}
|
||||
/>
|
||||
);
|
||||
export const GenreListInfiniteGrid = ({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: GenreListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const GenreListInfiniteTable = forwardRef<any, GenreListInfiniteTableProps>(
|
||||
(
|
||||
{
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
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}
|
||||
/>
|
||||
);
|
||||
export const GenreListInfiniteTable = ({
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
sortBy: GenreListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const GenreListPaginatedGrid = forwardRef<any, GenreListPaginatedGridProps>(
|
||||
(
|
||||
{
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
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>
|
||||
);
|
||||
export const GenreListPaginatedGrid = ({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: GenreListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const GenreListPaginatedTable = forwardRef<any, GenreListPaginatedTableProps>(
|
||||
(
|
||||
{
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
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>
|
||||
);
|
||||
export const GenreListPaginatedTable = ({
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
sortBy: GenreListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const PlaylistListInfiniteGrid = forwardRef<any, PlaylistListInfiniteGridProps>(
|
||||
({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: PlaylistListSort.NAME,
|
||||
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}
|
||||
/>
|
||||
);
|
||||
export const PlaylistListInfiniteGrid = ({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: PlaylistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const PlaylistListInfiniteTable = forwardRef<any, PlaylistListInfiniteTableProps>(
|
||||
(
|
||||
{
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
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}
|
||||
/>
|
||||
);
|
||||
export const PlaylistListInfiniteTable = ({
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
sortBy: PlaylistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const PlaylistListPaginatedGrid = forwardRef<any, PlaylistListPaginatedGridProps>(
|
||||
(
|
||||
{
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
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>
|
||||
);
|
||||
export const PlaylistListPaginatedGrid = ({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: PlaylistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const PlaylistListPaginatedTable = forwardRef<any, PlaylistListPaginatedTableProps>(
|
||||
(
|
||||
{
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
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>
|
||||
);
|
||||
export const PlaylistListPaginatedTable = ({
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
sortBy: PlaylistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const SongListInfiniteGrid = forwardRef<any, SongListInfiniteGridProps>(
|
||||
({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: SongListSort.NAME,
|
||||
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}
|
||||
/>
|
||||
);
|
||||
export const SongListInfiniteGrid = ({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: SongListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const SongListInfiniteTable = forwardRef<any, SongListInfiniteTableProps>(
|
||||
(
|
||||
{
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
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}
|
||||
/>
|
||||
);
|
||||
export const SongListInfiniteTable = ({
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
sortBy: SongListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const SongListPaginatedGrid = forwardRef<any, SongListPaginatedGridProps>(
|
||||
(
|
||||
{
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
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>
|
||||
);
|
||||
export const SongListPaginatedGrid = ({
|
||||
gap = 'md',
|
||||
itemsPerPage = 100,
|
||||
itemsPerRow,
|
||||
query = {
|
||||
sortBy: SongListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
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> {}
|
||||
|
||||
export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProps>(
|
||||
(
|
||||
{
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
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>
|
||||
);
|
||||
export const SongListPaginatedTable = ({
|
||||
autoFitColumns = false,
|
||||
columns,
|
||||
enableAlternateRowColors = false,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
itemsPerPage = 100,
|
||||
query = {
|
||||
sortBy: SongListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
);
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user