sascha
/
immich
mirror of https://github.com/immich-app/immich.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: search filter modal (#18159)

pull/18167/head^2
Daniel Dietzler 2025-05-08 22:36:05 +07:00 committed by GitHub
parent eace0f716d
commit 8db666bc38
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 49 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
web/src/lib/components/shared-components/search-bar/search-bar.svelte
Unescape Escape View File

@ -1,19 +1,20 @@
<script lang="ts">
import { AppRoute } from '$lib/constants';
import { goto } from '$app/navigation';
import { searchStore } from '$lib/stores/search.svelte';
import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
import SearchHistoryBox from './search-history-box.svelte';
import SearchFilterModal from './search-filter-modal.svelte';
import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
import { handlePromiseError } from '$lib/utils';
import { shortcuts } from '$lib/actions/shortcut';
import { focusOutside } from '$lib/actions/focus-outside';
import { shortcuts } from '$lib/actions/shortcut';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { t } from 'svelte-i18n';
import { AppRoute } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import SearchFilterModal from '$lib/modals/SearchFilterModal.svelte';
import { searchStore } from '$lib/stores/search.svelte';
import { handlePromiseError } from '$lib/utils';
import { generateId } from '$lib/utils/generate-id';
import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
import { onDestroy, tick } from 'svelte';
import { t } from 'svelte-i18n';
import SearchHistoryBox from './search-history-box.svelte';
interface Props {
value?: string;
@ -28,10 +29,10 @@
let input = $state<HTMLInputElement>();
let searchHistoryBox = $state<ReturnType<typeof SearchHistoryBox>>();
let showSuggestions = $state(false);
let showFilter = $state(false);
let isSearchSuggestions = $state(false);
let selectedId: string | undefined = $state();
let isFocus = $state(false);
let close: (() => Promise<void>) | undefined;
const listboxId = generateId();
@ -43,7 +44,6 @@
const params = getMetadataSearchQuery(payload);
closeDropdown();
showFilter = false;
searchStore.isSearchEnabled = false;
await goto(`${AppRoute.SEARCH}?${params}`);
};
@ -83,13 +83,27 @@
await handleSearch(searchPayload);
};
const onFilterClick = () => {
showFilter = !showFilter;
const onFilterClick = async () => {
value = '';
if (showFilter) {
closeDropdown();
if (close) {
await close();
close = undefined;
return;
}
const result = modalManager.open(SearchFilterModal, { searchQuery });
close = result.close;
closeDropdown();
const searchResult = await result.onClose;
close = undefined;
if (!searchResult) {
return;
}
await handleSearch(searchResult);
};
const onSubmit = () => {
@ -122,7 +136,6 @@
const onEscape = () => {
closeDropdown();
showFilter = false;
};
const onArrow = async (direction: 1 | -1) => {
@ -221,9 +234,7 @@
class="w-full transition-all border-2 px-14 py-4 max-md:py-2 text-immich-fg/75 dark:text-immich-dark-fg
{grayTheme ? 'dark:bg-immich-dark-gray' : 'dark:bg-immich-dark-bg'}
{showSuggestions && isSearchSuggestions ? 'rounded-t-3xl' : 'rounded-3xl bg-gray-200'}
{searchStore.isSearchEnabled && !showFilter
? 'border-gray-200 dark:border-gray-700 bg-white'
: 'border-transparent'}"
{searchStore.isSearchEnabled ? 'border-gray-200 dark:border-gray-700 bg-white' : 'border-transparent'}"
placeholder={$t('search_your_photos')}
required
pattern="^(?!m:$).*$"
@ -231,7 +242,6 @@
bind:this={input}
onfocus={openDropdown}
oninput={onInput}
disabled={showFilter}
role="combobox"
aria-controls={listboxId}
aria-activedescendant={selectedId ?? ''}
@ -285,22 +295,7 @@
</div>
{/if}
<div class="absolute inset-y-0 start-0 flex items-center ps-2">
<CircleIconButton
type="submit"
disabled={showFilter}
title={$t('search')}
icon={mdiMagnify}
size="20"
onclick={() => {}}
/>
<CircleIconButton type="submit" title={$t('search')} icon={mdiMagnify} size="20" onclick={() => {}} />
</div>
</form>
{#if showFilter}
<SearchFilterModal
{searchQuery}
onSearch={(payload) => handleSearch(payload)}
onClose={() => (showFilter = false)}
/>
{/if}
</div>

33
web/src/lib/components/shared-components/search-bar/search-filter-modal.svelte → web/src/lib/modals/SearchFilterModal.svelte
Unescape Escape View File

@ -1,8 +1,8 @@
<script lang="ts" module>
import { MediaType, QueryType, validQueryTypes } from '$lib/constants';
import type { SearchDateFilter } from './search-date-section.svelte';
import type { SearchDisplayFilters } from './search-display-section.svelte';
import type { SearchLocationFilter } from './search-location-section.svelte';
import type { SearchDateFilter } from '../components/shared-components/search-bar/search-date-section.svelte';
import type { SearchDisplayFilters } from '../components/shared-components/search-bar/search-display-section.svelte';
import type { SearchLocationFilter } from '../components/shared-components/search-bar/search-location-section.svelte';
export type SearchFilter = {
query: string;
@ -20,6 +20,17 @@
<script lang="ts">
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import SearchCameraSection, {
type SearchCameraFilter,
} from '$lib/components/shared-components/search-bar/search-camera-section.svelte';
import SearchDateSection from '$lib/components/shared-components/search-bar/search-date-section.svelte';
import SearchDisplaySection from '$lib/components/shared-components/search-bar/search-display-section.svelte';
import SearchLocationSection from '$lib/components/shared-components/search-bar/search-location-section.svelte';
import SearchMediaSection from '$lib/components/shared-components/search-bar/search-media-section.svelte';
import SearchPeopleSection from '$lib/components/shared-components/search-bar/search-people-section.svelte';
import SearchRatingsSection from '$lib/components/shared-components/search-bar/search-ratings-section.svelte';
import SearchTagsSection from '$lib/components/shared-components/search-bar/search-tags-section.svelte';
import SearchTextSection from '$lib/components/shared-components/search-bar/search-text-section.svelte';
import { preferences } from '$lib/stores/user.store';
import { parseUtcDate } from '$lib/utils/date-time';
import { generateId } from '$lib/utils/generate-id';
@ -28,23 +39,13 @@
import { mdiTune } from '@mdi/js';
import { t } from 'svelte-i18n';
import { SvelteSet } from 'svelte/reactivity';
import SearchCameraSection, { type SearchCameraFilter } from './search-camera-section.svelte';
import SearchDateSection from './search-date-section.svelte';
import SearchDisplaySection from './search-display-section.svelte';
import SearchLocationSection from './search-location-section.svelte';
import SearchMediaSection from './search-media-section.svelte';
import SearchPeopleSection from './search-people-section.svelte';
import SearchRatingsSection from './search-ratings-section.svelte';
import SearchTagsSection from './search-tags-section.svelte';
import SearchTextSection from './search-text-section.svelte';
interface Props {
searchQuery: MetadataSearchDto | SmartSearchDto;
onClose: () => void;
onSearch: (search: SmartSearchDto | MetadataSearchDto) => void;
onClose: (search?: SmartSearchDto | MetadataSearchDto) => void;
}
let { searchQuery, onClose, onSearch }: Props = $props();
let { searchQuery, onClose }: Props = $props();
const parseOptionalDate = (dateString?: string) => (dateString ? parseUtcDate(dateString) : undefined);
const toStartOfDayDate = (dateString: string) => parseUtcDate(dateString)?.startOf('day').toISODate() || undefined;
@ -141,7 +142,7 @@
rating: filter.rating,
};
onSearch(payload);
onClose(payload);
};
const onreset = (event: Event) => {