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

Add search to playlist list

Browse source
This commit is contained in:
jeffvli 2023-07-19 01:36:21 -07:00
parent 651af8539a
commit f9ddd3140a
2 changed files with 50 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/renderer/features/playlists/components/playlist-list-header.tsx
View file

@ -1,16 +1,25 @@
import { MutableRefObject } from 'react';
import { ChangeEvent, MutableRefObject } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Flex, Stack } from '@mantine/core';
import { Flex, Group, Stack } from '@mantine/core';
import { openModal, closeAllModals } from '@mantine/modals';
import { PageHeader, SpinnerIcon, Paper, Button } from '/@/renderer/components';
import { PageHeader, SpinnerIcon, Paper, Button, SearchInput } from '/@/renderer/components';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { CreatePlaylistForm } from '/@/renderer/features/playlists/components/create-playlist-form';
import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-list-header-filters';
import { LibraryHeaderBar } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks';
import { useCurrentServer } from '/@/renderer/store';
import { ServerType } from '/@/renderer/types';
import {
PlaylistListFilter,
useCurrentServer,
useListStoreActions,
usePlaylistListFilter,
usePlaylistListStore,
} from '/@/renderer/store';
import { ListDisplayType, ServerType } from '/@/renderer/types';
import debounce from 'lodash/debounce';
import { RiFileAddFill } from 'react-icons/ri';
import { LibraryItem } from '/@/renderer/api/types';
import { useListFilterRefresh } from '../../../hooks/use-list-filter-refresh';
interface PlaylistListHeaderProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@ -19,8 +28,12 @@ interface PlaylistListHeaderProps {
}
export const PlaylistListHeader = ({ itemCount, tableRef, gridRef }: PlaylistListHeaderProps) => {
const pageKey = 'playlist';
const cq = useContainerQuery();
const server = useCurrentServer();
const { setFilter, setTablePagination } = useListStoreActions();
const filter = usePlaylistListFilter({ key: pageKey });
const { display } = usePlaylistListStore({ key: pageKey });
const handleCreatePlaylistModal = () => {
openModal({
@ -33,6 +46,27 @@ export const PlaylistListHeader = ({ itemCount, tableRef, gridRef }: PlaylistLis
});
};
const { handleRefreshGrid, handleRefreshTable } = useListFilterRefresh({
itemType: LibraryItem.PLAYLIST,
server,
});
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
const searchTerm = e.target.value === '' ? undefined : e.target.value;
const updatedFilters = setFilter({
data: { searchTerm },
itemType: LibraryItem.PLAYLIST,
key: pageKey,
}) as PlaylistListFilter;
if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
handleRefreshTable(tableRef, updatedFilters);
setTablePagination({ data: { currentPage: 0 }, key: pageKey });
} else {
handleRefreshGrid(gridRef, updatedFilters);
}
}, 500);
return (
<Stack
ref={cq.ref}
@ -66,6 +100,13 @@ export const PlaylistListHeader = ({ itemCount, tableRef, gridRef }: PlaylistLis
<RiFileAddFill />
</Button>
</LibraryHeaderBar>
<Group>
<SearchInput
defaultValue={filter.searchTerm}
openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
onChange={handleSearch}
/>
</Group>
</Flex>
</PageHeader>
<Paper p="1rem">

5
src/renderer/features/playlists/routes/playlist-list-route.tsx
View file

@ -6,19 +6,22 @@ import { PlaylistListContent } from '/@/renderer/features/playlists/components/p
import { PlaylistListHeader } from '/@/renderer/features/playlists/components/playlist-list-header';
import { usePlaylistList } from '/@/renderer/features/playlists/queries/playlist-list-query';
import { AnimatedPage } from '/@/renderer/features/shared';
import { useCurrentServer } from '/@/renderer/store';
import { useCurrentServer, usePlaylistListFilter } from '/@/renderer/store';
const PlaylistListRoute = () => {
const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
const tableRef = useRef<AgGridReactType | null>(null);
const server = useCurrentServer();
const playlistListFilter = usePlaylistListFilter({ key: 'playlist' });
const itemCountCheck = usePlaylistList({
options: {
cacheTime: 1000 * 60 * 60 * 2,
staleTime: 1000 * 60 * 60 * 2,
},
query: {
...playlistListFilter,
limit: 1,
sortBy: PlaylistListSort.NAME,
sortOrder: SortOrder.ASC,