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

Adjust default grid sizing and handler

Browse source
This commit is contained in:
jeffvli 2023-03-09 02:36:23 -08:00
parent 3153cdd6c4
commit b4664f45b4
3 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/renderer/features/albums/components/album-list-header-filters.tsx
View file

@ -4,6 +4,7 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
import { Flex, Group, Stack } from '@mantine/core'; import { Flex, Group, Stack } from '@mantine/core';
import { openModal } from '@mantine/modals'; import { openModal } from '@mantine/modals';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import debounce from 'lodash/debounce';
import { import {
RiSortAsc, RiSortAsc,
RiSortDesc, RiSortDesc,
@ -334,6 +335,8 @@ export const AlbumListHeaderFilters = ({
} }
}; };
const debouncedHandleItemSize = debounce(handleItemSize, 20);
const handleSetViewType = useCallback( const handleSetViewType = useCallback(
(e: MouseEvent<HTMLButtonElement>) => { (e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return; if (!e.currentTarget?.value) return;
@ -570,9 +573,9 @@ export const AlbumListHeaderFilters = ({
: table.rowHeight : table.rowHeight
} }
label={null} label={null}
max={100} max={400}
min={25} min={-25}
onChangeEnd={handleItemSize} onChange={debouncedHandleItemSize}
/> />
</DropdownMenu.Item> </DropdownMenu.Item>
{(display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) && ( {(display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) && (

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

@ -3,6 +3,7 @@ import { IDatasource } from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Group, Stack, Flex } from '@mantine/core'; import { Group, Stack, Flex } from '@mantine/core';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import debounce from 'lodash/debounce';
import { import {
RiSortAsc, RiSortAsc,
RiSortDesc, RiSortDesc,
@ -99,6 +100,8 @@ export const AlbumArtistListHeaderFilters = ({
} }
}; };
const debouncedHandleItemSize = debounce(handleItemSize, 20);
const fetch = useCallback( const fetch = useCallback(
async (startIndex: number, limit: number, filters: AlbumArtistListFilter) => { async (startIndex: number, limit: number, filters: AlbumArtistListFilter) => {
const queryKey = queryKeys.albumArtists.list(server?.id || '', { const queryKey = queryKeys.albumArtists.list(server?.id || '', {
@ -436,9 +439,9 @@ export const AlbumArtistListHeaderFilters = ({
: table.rowHeight : table.rowHeight
} }
label={null} label={null}
max={100} max={400}
min={25} min={-50}
onChangeEnd={handleItemSize} onChange={debouncedHandleItemSize}
/> />
</DropdownMenu.Item> </DropdownMenu.Item>
{(display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) && ( {(display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) && (

4
src/renderer/store/list.store.ts
View file

@ -264,7 +264,7 @@ export const useListStore = create<ListSlice>()(
sortBy: AlbumListSort.RECENTLY_ADDED, sortBy: AlbumListSort.RECENTLY_ADDED,
sortOrder: SortOrder.DESC, sortOrder: SortOrder.DESC,
}, },
grid: { scrollOffset: 0, size: 0 }, grid: { scrollOffset: 0, size: 200 },
table: { table: {
autoFit: true, autoFit: true,
columns: [ columns: [
@ -305,7 +305,7 @@ export const useListStore = create<ListSlice>()(
sortBy: AlbumArtistListSort.NAME, sortBy: AlbumArtistListSort.NAME,
sortOrder: SortOrder.DESC, sortOrder: SortOrder.DESC,
}, },
grid: { scrollOffset: 0, size: 0 }, grid: { scrollOffset: 0, size: 200 },
table: { table: {
autoFit: true, autoFit: true,
columns: [ columns: [