Add album table view

src/renderer/features/albums/components/album-list-content.tsx

@@ -1,8 +1,11 @@
 import {
   ALBUM_CARD_ROWS,
+  getColumnDefs,
+  TablePagination,
   VirtualGridAutoSizerContainer,
   VirtualInfiniteGrid,
   VirtualInfiniteGridRef,
+  VirtualTable,
 } from '/@/renderer/components';
 import { AppRoute } from '/@/renderer/router/routes';
 import { ListDisplayType, CardRow, LibraryItem } from '/@/renderer/types';
@@ -16,25 +19,152 @@ import { Album, AlbumListSort } from '/@/renderer/api/types';
 import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query';
 import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add';
 import { useQueryClient } from '@tanstack/react-query';
-import { useCurrentServer, useSetAlbumStore, useAlbumListStore } from '/@/renderer/store';
+import {
+  useCurrentServer,
+  useSetAlbumStore,
+  useAlbumListStore,
+  useAlbumTablePagination,
+  useSetAlbumTable,
+  useSetAlbumTablePagination,
+} from '/@/renderer/store';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import {
+  BodyScrollEvent,
+  ColDef,
+  GridReadyEvent,
+  IDatasource,
+  PaginationChangedEvent,
+} from '@ag-grid-community/core';
+import { AnimatePresence } from 'framer-motion';
+import debounce from 'lodash/debounce';
 
 interface AlbumListContentProps {
   gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+  tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const AlbumListContent = ({ gridRef }: AlbumListContentProps) => {
+export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) => {
   const queryClient = useQueryClient();
   const server = useCurrentServer();
   const page = useAlbumListStore();
   const setPage = useSetAlbumStore();
   const handlePlayQueueAdd = useHandlePlayQueueAdd();
 
-  const albumListQuery = useAlbumList({
+  const pagination = useAlbumTablePagination();
+  const setPagination = useSetAlbumTablePagination();
+  const setTable = useSetAlbumTable();
+
+  const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
+
+  const checkAlbumList = useAlbumList({
     limit: 1,
     startIndex: 0,
     ...page.filter,
   });
 
+  const columnDefs: ColDef[] = useMemo(
+    () => getColumnDefs(page.table.columns),
+    [page.table.columns],
+  );
+
+  const defaultColumnDefs: ColDef = useMemo(() => {
+    return {
+      lockPinned: true,
+      lockVisible: true,
+      resizable: true,
+    };
+  }, []);
+
+  const onTableReady = useCallback(
+    (params: GridReadyEvent) => {
+      const dataSource: IDatasource = {
+        getRows: async (params) => {
+          const limit = params.endRow - params.startRow;
+          const startIndex = params.startRow;
+
+          const queryKey = queryKeys.albums.list(server?.id || '', {
+            limit,
+            startIndex,
+            ...page.filter,
+          });
+
+          const albumsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
+            api.controller.getAlbumList({
+              query: {
+                limit,
+                startIndex,
+                ...page.filter,
+              },
+              server,
+              signal,
+            }),
+          );
+
+          const albums = api.normalize.albumList(albumsRes, server);
+          params.successCallback(albums?.items || [], albumsRes?.totalRecordCount || undefined);
+        },
+        rowCount: undefined,
+      };
+      params.api.setDatasource(dataSource);
+      // params.api.ensureIndexVisible(page.table.scrollOffset || 0, 'top');
+    },
+    [page.filter, queryClient, server],
+  );
+
+  const onTablePaginationChanged = useCallback(
+    (event: PaginationChangedEvent) => {
+      if (!isPaginationEnabled || !event.api) return;
+
+      // Scroll to top of page on pagination change
+      const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
+      event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
+
+      setPagination({
+        itemsPerPage: event.api.paginationGetPageSize(),
+        totalItems: event.api.paginationGetRowCount(),
+        totalPages: event.api.paginationGetTotalPages() + 1,
+      });
+    },
+    [isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
+  );
+
+  const handleTableSizeChange = () => {
+    if (page.table.autoFit) {
+      tableRef?.current?.api.sizeColumnsToFit();
+    }
+  };
+
+  const handleTableColumnChange = useCallback(() => {
+    const { columnApi } = tableRef?.current || {};
+    const columnsOrder = columnApi?.getAllGridColumns();
+
+    if (!columnsOrder) return;
+
+    const columnsInSettings = page.table.columns;
+    const updatedColumns = [];
+    for (const column of columnsOrder) {
+      const columnInSettings = columnsInSettings.find((c) => c.column === column.getColDef().colId);
+
+      if (columnInSettings) {
+        updatedColumns.push({
+          ...columnInSettings,
+          ...(!page.table.autoFit && {
+            width: column.getColDef().width,
+          }),
+        });
+      }
+    }
+
+    setTable({ columns: updatedColumns });
+  }, [page.table.autoFit, page.table.columns, setTable, tableRef]);
+
+  const debouncedTableColumnChange = debounce(handleTableColumnChange, 200);
+
+  const handleTableScroll = (e: BodyScrollEvent) => {
+    const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
+    setTable({ scrollOffset });
+  };
+
   const fetch = useCallback(
     async ({ skip, take }: { skip: number; take: number }) => {
       const queryKey = queryKeys.albums.list(server?.id || '', {
@@ -139,31 +269,88 @@ export const AlbumListContent = ({ gridRef }: AlbumListContentProps) => {
   }, [page.filter.sortBy]);
 
   return (
-    <VirtualGridAutoSizerContainer>
-      <AutoSizer>
-        {({ height, width }) => (
-          <VirtualInfiniteGrid
-            ref={gridRef}
-            cardRows={cardRows}
-            display={page.display || ListDisplayType.CARD}
-            fetchFn={fetch}
-            handlePlayQueueAdd={handlePlayQueueAdd}
-            height={height}
-            initialScrollOffset={page?.grid.scrollOffset || 0}
-            itemCount={albumListQuery?.data?.totalRecordCount || 0}
-            itemGap={20}
-            itemSize={150 + page.grid?.size}
-            itemType={LibraryItem.ALBUM}
-            minimumBatchSize={40}
-            route={{
-              route: AppRoute.LIBRARY_ALBUMS_DETAIL,
-              slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
-            }}
-            width={width}
-            onScroll={handleGridScroll}
+    <>
+      <VirtualGridAutoSizerContainer>
+        {page.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER ? (
+          <AutoSizer>
+            {({ height, width }) => (
+              <VirtualInfiniteGrid
+                key={`album-list-${server?.id}-${page.display}`}
+                ref={gridRef}
+                cardRows={cardRows}
+                display={page.display || ListDisplayType.CARD}
+                fetchFn={fetch}
+                handlePlayQueueAdd={handlePlayQueueAdd}
+                height={height}
+                initialScrollOffset={page?.grid.scrollOffset || 0}
+                itemCount={checkAlbumList?.data?.totalRecordCount || 0}
+                itemGap={20}
+                itemSize={150 + page.grid?.size}
+                itemType={LibraryItem.ALBUM}
+                minimumBatchSize={40}
+                route={{
+                  route: AppRoute.LIBRARY_ALBUMS_DETAIL,
+                  slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
+                }}
+                width={width}
+                onScroll={handleGridScroll}
+              />
+            )}
+          </AutoSizer>
+        ) : (
+          <VirtualTable
+            // https://github.com/ag-grid/ag-grid/issues/5284
+            // Key is used to force remount of table when display, rowHeight, or server changes
+            key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
+            ref={tableRef}
+            alwaysShowHorizontalScroll
+            animateRows
+            maintainColumnOrder
+            suppressCopyRowsToClipboard
+            suppressMoveWhenRowDragging
+            suppressPaginationPanel
+            suppressRowDrag
+            suppressScrollOnNewData
+            blockLoadDebounceMillis={200}
+            cacheBlockSize={500}
+            cacheOverflowSize={1}
+            columnDefs={columnDefs}
+            defaultColDef={defaultColumnDefs}
+            enableCellChangeFlash={false}
+            getRowId={(data) => data.data.id}
+            infiniteInitialRowCount={checkAlbumList.data?.totalRecordCount || 100}
+            pagination={isPaginationEnabled}
+            paginationAutoPageSize={isPaginationEnabled}
+            paginationPageSize={page.table.pagination.itemsPerPage || 100}
+            rowBuffer={20}
+            rowHeight={page.table.rowHeight || 40}
+            rowModelType="infinite"
+            rowSelection="multiple"
+            onBodyScrollEnd={handleTableScroll}
+            onCellContextMenu={(e) => console.log('context', e)}
+            onColumnMoved={handleTableColumnChange}
+            onColumnResized={debouncedTableColumnChange}
+            onGridReady={onTableReady}
+            onGridSizeChanged={handleTableSizeChange}
+            onPaginationChanged={onTablePaginationChanged}
           />
         )}
-      </AutoSizer>
-    </VirtualGridAutoSizerContainer>
+      </VirtualGridAutoSizerContainer>
+      {isPaginationEnabled && (
+        <AnimatePresence
+          presenceAffectsLayout
+          initial={false}
+          mode="wait"
+        >
+          {page.display === ListDisplayType.TABLE_PAGINATED && (
+            <TablePagination
+              pagination={pagination}
+              setPagination={setPagination}
+              tableRef={tableRef}
+            />
+          )}
+        </AnimatePresence>
+      )}
+    </>
   );
 };