[bugfix]: queue all songs on search, consistent sort, clearing
- Previously, the search page would render initial page in one order, but search itself would be different order This is resolved by having both virtual-table and search-header using listStoreKey - When double clicking, now enqueue all the songs using the same sort - Reset the search when clearing
This commit is contained in:
parent
918842e3a5
commit
8900d8126c
2 changed files with 18 additions and 9 deletions
|
@ -15,7 +15,7 @@ import {
|
||||||
SONG_CONTEXT_MENU_ITEMS,
|
SONG_CONTEXT_MENU_ITEMS,
|
||||||
} from '/@/renderer/features/context-menu/context-menu-items';
|
} from '/@/renderer/features/context-menu/context-menu-items';
|
||||||
import { usePlayQueueAdd } from '/@/renderer/features/player';
|
import { usePlayQueueAdd } from '/@/renderer/features/player';
|
||||||
import { useCurrentServer, usePlayButtonBehavior } from '/@/renderer/store';
|
import { useCurrentServer, useListStoreByKey, usePlayButtonBehavior } from '/@/renderer/store';
|
||||||
|
|
||||||
interface SearchContentProps {
|
interface SearchContentProps {
|
||||||
tableRef: MutableRefObject<AgGridReactType | null>;
|
tableRef: MutableRefObject<AgGridReactType | null>;
|
||||||
|
@ -27,6 +27,10 @@ export const SearchContent = ({ tableRef }: SearchContentProps) => {
|
||||||
const { itemType } = useParams() as { itemType: LibraryItem };
|
const { itemType } = useParams() as { itemType: LibraryItem };
|
||||||
const [searchParams] = useSearchParams();
|
const [searchParams] = useSearchParams();
|
||||||
const pageKey = itemType;
|
const pageKey = itemType;
|
||||||
|
const { filter } = useListStoreByKey({
|
||||||
|
filter: { searchTerm: searchParams.get('query') || '' },
|
||||||
|
key: itemType,
|
||||||
|
});
|
||||||
|
|
||||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||||
const playButtonBehavior = usePlayButtonBehavior();
|
const playButtonBehavior = usePlayButtonBehavior();
|
||||||
|
@ -59,22 +63,26 @@ export const SearchContent = ({ tableRef }: SearchContentProps) => {
|
||||||
break;
|
break;
|
||||||
case LibraryItem.SONG:
|
case LibraryItem.SONG:
|
||||||
handlePlayQueueAdd?.({
|
handlePlayQueueAdd?.({
|
||||||
byData: [e.data],
|
byItemType: {
|
||||||
|
id: [],
|
||||||
|
type: LibraryItem.SONG,
|
||||||
|
},
|
||||||
|
initialSongId: e.data.id,
|
||||||
playType: playButtonBehavior,
|
playType: playButtonBehavior,
|
||||||
|
query: {
|
||||||
|
startIndex: 0,
|
||||||
|
...filter,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const customFilters = {
|
|
||||||
searchTerm: searchParams.get('query') || '',
|
|
||||||
};
|
|
||||||
|
|
||||||
const { rowClassRules } = useCurrentSongRowStyles({ tableRef });
|
const { rowClassRules } = useCurrentSongRowStyles({ tableRef });
|
||||||
|
|
||||||
const tableProps = useVirtualTable({
|
const tableProps = useVirtualTable({
|
||||||
contextMenu: contextMenuItems(),
|
contextMenu: contextMenuItems(),
|
||||||
customFilters,
|
customFilters: filter,
|
||||||
itemType,
|
itemType,
|
||||||
pageKey,
|
pageKey,
|
||||||
server,
|
server,
|
||||||
|
|
|
@ -11,6 +11,7 @@ import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
|
||||||
import { useContainerQuery } from '/@/renderer/hooks';
|
import { useContainerQuery } from '/@/renderer/hooks';
|
||||||
import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh';
|
import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh';
|
||||||
import { AppRoute } from '/@/renderer/router/routes';
|
import { AppRoute } from '/@/renderer/router/routes';
|
||||||
|
import { useListStoreByKey } from '/@/renderer/store';
|
||||||
|
|
||||||
interface SearchHeaderProps {
|
interface SearchHeaderProps {
|
||||||
navigationId: string;
|
navigationId: string;
|
||||||
|
@ -23,6 +24,7 @@ export const SearchHeader = ({ tableRef, navigationId }: SearchHeaderProps) => {
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
const cq = useContainerQuery();
|
const cq = useContainerQuery();
|
||||||
const server = useCurrentServer();
|
const server = useCurrentServer();
|
||||||
|
const { filter } = useListStoreByKey({ key: itemType });
|
||||||
|
|
||||||
const { handleRefreshTable } = useListFilterRefresh({
|
const { handleRefreshTable } = useListFilterRefresh({
|
||||||
itemType,
|
itemType,
|
||||||
|
@ -30,9 +32,8 @@ export const SearchHeader = ({ tableRef, navigationId }: SearchHeaderProps) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
|
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
|
||||||
if (!e.target.value) return;
|
|
||||||
setSearchParams({ query: e.target.value }, { replace: true, state: { navigationId } });
|
setSearchParams({ query: e.target.value }, { replace: true, state: { navigationId } });
|
||||||
handleRefreshTable(tableRef, { searchTerm: e.target.value });
|
handleRefreshTable(tableRef, { ...filter, searchTerm: e.target.value });
|
||||||
}, 200);
|
}, 200);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
Reference in a new issue