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

Misc fixes to song list page

Browse source
This commit is contained in:
jeffvli 2022-12-28 01:23:54 -08:00
parent b9a03fc412
commit 7500046ac6
2 changed files with 36 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/renderer/features/songs/components/song-list-content.tsx
View file

@ -50,7 +50,10 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
...page.filter,
});
const columnDefs = useMemo(() => getColumnDefs(page.table.columns), [page.table.columns]);
const columnDefs: ColDef[] = useMemo(
() => getColumnDefs(page.table.columns),
[page.table.columns],
);
const defaultColumnDefs: ColDef = useMemo(() => {
return {
@ -91,9 +94,8 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
rowCount: undefined,
};
params.api.setDatasource(dataSource);
params.api.ensureIndexVisible(page.table.scrollOffset || 0, 'top');
},
[page.filter, page.table.scrollOffset, queryClient, server],
[page.filter, queryClient, server],
);
const onPaginationChanged = useCallback(
@ -119,7 +121,7 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
}
};
const handleColumnMove = useCallback(() => {
const handleColumnChange = useCallback(() => {
const { columnApi } = tableRef?.current || {};
const columnsOrder = columnApi?.getAllGridColumns();
@ -134,7 +136,7 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
updatedColumns.push({
...columnInSettings,
...(!page.table.autoFit && {
width: column.getColDef().width,
width: column.getActualWidth(),
}),
});
}
@ -143,10 +145,12 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
setTable({ columns: updatedColumns });
}, [page.table.autoFit, page.table.columns, setTable, tableRef]);
const handleScroll = debounce((e: BodyScrollEvent) => {
const debouncedColumnChange = debounce(handleColumnChange, 200);
const handleScroll = (e: BodyScrollEvent) => {
const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
setTable({ scrollOffset });
}, 200);
};
return (
<Stack
@ -173,18 +177,19 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
columnDefs={columnDefs}
defaultColDef={defaultColumnDefs}
enableCellChangeFlash={false}
getRowId={(data) => data.data.uniqueId}
infiniteInitialRowCount={checkSongList.data?.totalRecordCount || 10}
getRowId={(data) => data.data.id}
infiniteInitialRowCount={checkSongList.data?.totalRecordCount || 100}
pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={page.table.pagination.itemsPerPage || 100}
rowBuffer={20}
rowHeight={page.table.rowHeight || 40}
rowModelType="infinite"
rowSelection="multiple"
// onBodyScroll={handleScroll}
onBodyScrollEnd={handleScroll}
onCellContextMenu={(e) => console.log('context', e)}
onColumnMoved={handleColumnMove}
onColumnMoved={handleColumnChange}
onColumnResized={debouncedColumnChange}
onGridReady={onGridReady}
onGridSizeChanged={handleGridSizeChange}
onPaginationChanged={onPaginationChanged}
@ -192,6 +197,7 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
</VirtualGridAutoSizerContainer>
<AnimatePresence
presenceAffectsLayout
initial={false}
mode="wait"
>
{page.display === ListDisplayType.TABLE_PAGINATED && (

42
src/renderer/features/songs/components/song-list-header.tsx
View file

@ -1,6 +1,6 @@
import type { IDatasource } from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Flex, Group } from '@mantine/core';
import { Flex, Group, Stack } from '@mantine/core';
import debounce from 'lodash/debounce';
import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
import {
@ -89,6 +89,7 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
const setPage = useSetSongStore();
const setFilter = useSetSongFilters();
const setTable = useSetSongTable();
const setPagination = useSetSongTablePagination();
const cq = useContainerQuery();
const musicFoldersQuery = useMusicFolders();
@ -137,8 +138,9 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
tableRef.current?.api.setDatasource(dataSource);
tableRef.current?.api.purgeInfiniteCache();
tableRef.current?.api.ensureIndexVisible(0, 'top');
setPagination({ currentPage: 0 });
},
[page.filter, server, tableRef],
[page.filter, server, setPagination, tableRef],
);
const handleSetSortBy = useCallback(
@ -181,8 +183,6 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
handleFilterChange(updatedFilters);
}, [page.filter.sortOrder, handleFilterChange, setFilter]);
const setPagination = useSetSongTablePagination();
const handleSetViewType = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return;
@ -303,26 +303,22 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
component="div"
sx={{ cursor: 'default' }}
>
<MultiSelect
clearable
data={SONG_TABLE_COLUMNS}
defaultValue={page.table?.columns.map((column) => column.column)}
width={300}
onChange={handleTableColumns}
/>
</DropdownMenu.Item>
<DropdownMenu.Item
closeMenuOnClick={false}
component="div"
sx={{ cursor: 'default' }}
>
<Group position="apart">
<Text>Auto Fit Columns</Text>
<Switch
defaultChecked={page.table.autoFit}
onChange={handleAutoFitColumns}
<Stack>
<MultiSelect
clearable
data={SONG_TABLE_COLUMNS}
defaultValue={page.table?.columns.map((column) => column.column)}
width={300}
onChange={handleTableColumns}
/>
</Group>
<Group position="apart">
<Text>Auto Fit Columns</Text>
<Switch
defaultChecked={page.table.autoFit}
onChange={handleAutoFitColumns}
/>
</Group>
</Stack>
</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>