vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-15 13:00:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

add reset button to list filters

Browse Source
This commit is contained in:
jeffvli
2026-01-17 17:43:55 -08:00
parent 5b519320c2
commit 9b97a3fa61
11 changed files with 180 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/songs/components/jellyfin-song-filters.tsx
+10 -5
View File
@@ -15,6 +15,7 @@ import {
import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
import { useCurrentServer } from '/@/renderer/store';
import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
import { Button } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { VirtualMultiSelect } from '/@/shared/components/multi-select/virtual-multi-select';
@@ -34,7 +35,7 @@ export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFilters
const server = useCurrentServer();
const serverId = server.id;
const { t } = useTranslation();
const { query, setArtistIds, setCustom, setFavorite, setMaxYear, setMinYear } =
const { clear, query, setArtistIds, setCustom, setFavorite, setMaxYear, setMinYear } =
useSongListFilters();
const { customFilters } = useListContext();
@@ -280,10 +281,10 @@ export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFilters
<Stack px="md" py="md">
{yesNoFilters.map((filter) => (
<YesNoSelect
defaultValue={filter.value ? filter.value.toString() : undefined}
key={`jf-filter-${filter.label}`}
label={filter.label}
onChange={(e) => filter.onChange(e ? e === 'true' : undefined)}
value={filter.value ? filter.value.toString() : undefined}
/>
))}
{!disableArtistFilter && (
@@ -320,34 +321,38 @@ export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFilters
<Divider my="md" />
<Group grow>
<NumberInput
defaultValue={query.minYear ?? undefined}
hideControls={false}
label={t('filter.fromYear', { postProcess: 'sentenceCase' })}
max={2300}
min={1700}
onChange={(e) => debouncedHandleMinYearFilter(e)}
required={!!query.minYear}
value={query.minYear ?? undefined}
/>
<NumberInput
defaultValue={query.maxYear ?? undefined}
hideControls={false}
label={t('filter.toYear', { postProcess: 'sentenceCase' })}
max={2300}
min={1700}
onChange={(e) => debouncedHandleMaxYearFilter(e)}
required={!!query.minYear}
value={query.maxYear ?? undefined}
/>
</Group>
{tagsQuery.data?.boolTags && tagsQuery.data.boolTags.length > 0 && (
<MultiSelectWithInvalidData
clearable
data={tagsQuery.data.boolTags}
defaultValue={selectedTags}
label={t('common.tags', { postProcess: 'sentenceCase' })}
onChange={handleTagFilter}
searchable
value={selectedTags}
/>
)}
<Divider my="md" />
<Button fullWidth onClick={clear} variant="subtle">
{t('common.reset', { postProcess: 'sentenceCase' })}
</Button>
</Stack>
);
};
src/renderer/features/songs/components/navidrome-song-filters.tsx
+10 -5
View File
@@ -17,6 +17,7 @@ import { useCurrentServer, useCurrentServerId } from '/@/renderer/store';
import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
import { titleCase } from '/@/renderer/utils';
import { NDSongQueryFieldsLabelMap } from '/@/shared/api/navidrome/navidrome-types';
import { Button } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { VirtualMultiSelect } from '/@/shared/components/multi-select/virtual-multi-select';
@@ -31,7 +32,7 @@ export const NavidromeSongFilters = () => {
const { t } = useTranslation();
const server = useCurrentServer();
const serverId = server.id;
const { query, setArtistIds, setFavorite, setGenreId, setMaxYear, setMinYear } =
const { clear, query, setArtistIds, setFavorite, setGenreId, setMaxYear, setMinYear } =
useSongListFilters();
const { customFilters } = useListContext();
@@ -252,11 +253,11 @@ export const NavidromeSongFilters = () => {
</Text>
<SegmentedControl
data={segmentedControlData}
defaultValue={booleanToSegmentValue(query.favorite)}
onChange={(value) => {
setFavorite(segmentValueToBoolean(value));
}}
size="sm"
value={booleanToSegmentValue(query.favorite)}
w="100%"
/>
</Stack>
@@ -284,15 +285,19 @@ export const NavidromeSongFilters = () => {
/>
)}
<NumberInput
defaultValue={query.minYear ?? undefined}
hideControls={false}
label={t('common.year', { postProcess: 'titleCase' })}
max={5000}
min={0}
onChange={(e) => debouncedHandleYearFilter(e)}
value={query.minYear ?? undefined}
/>
<Divider my="md" />
<TagFilters />
<Divider my="md" />
<Button fullWidth onClick={clear} variant="subtle">
{t('common.reset', { postProcess: 'sentenceCase' })}
</Button>
</Stack>
);
};
@@ -315,7 +320,7 @@ const TagFilterItem = ({ label, onChange, options, tagValue, value }: TagFilterI
[options],
);
const defaultValue = useMemo(() => {
const currentValue = useMemo(() => {
if (!value) return [];
return Array.isArray(value) ? value : [value];
}, [value]);
@@ -335,12 +340,12 @@ const TagFilterItem = ({ label, onChange, options, tagValue, value }: TagFilterI
<MultiSelectWithInvalidData
clearable
data={selectData}
defaultValue={defaultValue}
key={tagValue}
label={label}
limit={100}
onChange={handleChange}
searchable
value={currentValue}
/>
);
};
src/renderer/features/songs/components/subsonic-song-filters.tsx
+7 -2
View File
@@ -5,6 +5,7 @@ import { useListContext } from '/@/renderer/context/list-context';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
import { GenreMultiSelectRow } from '/@/renderer/features/shared/components/multi-select-rows';
import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
import { Button } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { VirtualMultiSelect } from '/@/shared/components/multi-select/virtual-multi-select';
@@ -14,7 +15,7 @@ import { Text } from '/@/shared/components/text/text';
export const SubsonicSongFilters = () => {
const { t } = useTranslation();
const { query, setFavorite, setGenreId } = useSongListFilters();
const { clear, query, setFavorite, setGenreId } = useSongListFilters();
const { customFilters } = useListContext();
@@ -72,7 +73,7 @@ export const SubsonicSongFilters = () => {
{toggleFilters.map((filter) => (
<Group justify="space-between" key={`ss-filter-${filter.label}`}>
<Text>{filter.label}</Text>
<Switch defaultChecked={filter.value ?? false} onChange={filter.onChange} />
<Switch checked={filter.value ?? false} onChange={filter.onChange} />
</Group>
))}
{!isGenrePage && (
@@ -90,6 +91,10 @@ export const SubsonicSongFilters = () => {
/>
</>
)}
<Divider my="md" />
<Button fullWidth onClick={clear} variant="subtle">
{t('common.reset', { postProcess: 'sentenceCase' })}
</Button>
</Stack>
);
};
src/renderer/features/songs/hooks/use-song-list-filters.ts
+22 -24
View File
@@ -11,6 +11,7 @@ import {
parseCustomFiltersParam,
parseIntParam,
setJsonSearchParam,
setMultipleSearchParams,
setSearchParam,
} from '/@/renderer/utils/query-params';
import { SongListSort, SortOrder } from '/@/shared/types/domain-types';
@@ -19,9 +20,9 @@ import { ItemListKey } from '/@/shared/types/types';
export const useSongListFilters = (listKey?: ItemListKey) => {
const resolvedListKey = listKey ?? ItemListKey.SONG;
const { setSortBy, sortBy } = useSortByFilter<SongListSort>(SongListSort.NAME, resolvedListKey);
const { sortBy } = useSortByFilter<SongListSort>(SongListSort.NAME, resolvedListKey);
const { setSortOrder, sortOrder } = useSortOrderFilter(SortOrder.ASC, resolvedListKey);
const { sortOrder } = useSortOrderFilter(SortOrder.ASC, resolvedListKey);
const { searchTerm, setSearchTerm } = useSearchTermFilter('');
@@ -145,28 +146,25 @@ export const useSongListFilters = (listKey?: ItemListKey) => {
);
const clear = useCallback(() => {
setAlbumIds(null);
setArtistIds(null);
setCustom(null);
setFavorite(null);
setGenreId(null);
setMaxYear(null);
setMinYear(null);
setSearchTerm(null);
setSortBy(SongListSort.NAME);
setSortOrder(SortOrder.ASC);
}, [
setAlbumIds,
setArtistIds,
setCustom,
setFavorite,
setGenreId,
setMaxYear,
setMinYear,
setSearchTerm,
setSortBy,
setSortOrder,
]);
setSearchParams(
(prev) =>
setMultipleSearchParams(
prev,
{
[FILTER_KEYS.SHARED.SEARCH_TERM]: null,
[FILTER_KEYS.SONG._CUSTOM]: null,
[FILTER_KEYS.SONG.ALBUM_IDS]: null,
[FILTER_KEYS.SONG.ARTIST_IDS]: null,
[FILTER_KEYS.SONG.FAVORITE]: null,
[FILTER_KEYS.SONG.GENRE_ID]: null,
[FILTER_KEYS.SONG.MAX_YEAR]: null,
[FILTER_KEYS.SONG.MIN_YEAR]: null,
},
new Set([FILTER_KEYS.SONG._CUSTOM]),
),
{ replace: true },
);
}, [setSearchParams]);
const query = useMemo(
() => ({