Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-24 01:12:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: search filter modal close (#18180)

Browse Source
This commit is contained in:
Daniel Dietzler 2025-05-09 17:10:10 +02:00 committed by GitHub
parent 2ffcfe06f3
commit 47b1938f17
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
web/src/lib/modals/SearchFilterModal.svelte
View File

@ -19,7 +19,6 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import SearchCameraSection, { import SearchCameraSection, {
type SearchCameraFilter, type SearchCameraFilter,
} from '$lib/components/shared-components/search-bar/search-camera-section.svelte'; } from '$lib/components/shared-components/search-bar/search-camera-section.svelte';
@ -35,7 +34,7 @@
import { parseUtcDate } from '$lib/utils/date-time'; import { parseUtcDate } from '$lib/utils/date-time';
import { generateId } from '$lib/utils/generate-id'; import { generateId } from '$lib/utils/generate-id';
import { AssetTypeEnum, AssetVisibility, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk'; import { AssetTypeEnum, AssetVisibility, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
import { Button } from '@immich/ui'; import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiTune } from '@mdi/js'; import { mdiTune } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { SvelteSet } from 'svelte/reactivity'; import { SvelteSet } from 'svelte/reactivity';
@ -162,44 +161,50 @@
}); });
</script> </script>
<FullScreenModal icon={mdiTune} width="extra-wide" title={$t('search_options')} {onClose}> <Modal icon={mdiTune} size="giant" title={$t('search_options')} {onClose}>
<form id={formId} autocomplete="off" {onsubmit} {onreset}> <ModalBody>
<div class="space-y-10 pb-10" tabindex="-1"> <form id={formId} autocomplete="off" {onsubmit} {onreset}>
<!-- PEOPLE --> <div class="space-y-10 pb-10" tabindex="-1">
<SearchPeopleSection bind:selectedPeople={filter.personIds} /> <!-- PEOPLE -->
<SearchPeopleSection bind:selectedPeople={filter.personIds} />
<!-- TEXT --> <!-- TEXT -->
<SearchTextSection bind:query={filter.query} bind:queryType={filter.queryType} /> <SearchTextSection bind:query={filter.query} bind:queryType={filter.queryType} />
<!-- TAGS --> <!-- TAGS -->
<SearchTagsSection bind:selectedTags={filter.tagIds} /> <SearchTagsSection bind:selectedTags={filter.tagIds} />
<!-- LOCATION --> <!-- LOCATION -->
<SearchLocationSection bind:filters={filter.location} /> <SearchLocationSection bind:filters={filter.location} />
<!-- CAMERA MODEL --> <!-- CAMERA MODEL -->
<SearchCameraSection bind:filters={filter.camera} /> <SearchCameraSection bind:filters={filter.camera} />
<!-- DATE RANGE --> <!-- DATE RANGE -->
<SearchDateSection bind:filters={filter.date} /> <SearchDateSection bind:filters={filter.date} />
<!-- RATING --> <!-- RATING -->
{#if $preferences?.ratings.enabled} {#if $preferences?.ratings.enabled}
<SearchRatingsSection bind:rating={filter.rating} /> <SearchRatingsSection bind:rating={filter.rating} />
{/if} {/if}
<div class="grid md:grid-cols-2 gap-x-5 gap-y-10"> <div class="grid md:grid-cols-2 gap-x-5 gap-y-10">
<!-- MEDIA TYPE --> <!-- MEDIA TYPE -->
<SearchMediaSection bind:filteredMedia={filter.mediaType} /> <SearchMediaSection bind:filteredMedia={filter.mediaType} />
<!-- DISPLAY OPTIONS --> <!-- DISPLAY OPTIONS -->
<SearchDisplaySection bind:filters={filter.display} /> <SearchDisplaySection bind:filters={filter.display} />
</div>
</div> </div>
</div> </form>
</form> </ModalBody>
{#snippet stickyBottom()} <ModalFooter>
<Button shape="round" size="large" type="reset" color="secondary" fullWidth form={formId}>{$t('clear_all')}</Button> <div class="flex gap-3 w-full">
<Button shape="round" size="large" type="submit" fullWidth form={formId}>{$t('search')}</Button> <Button shape="round" size="large" type="reset" color="secondary" fullWidth form={formId}
{/snippet} >{$t('clear_all')}</Button
</FullScreenModal> >
<Button shape="round" size="large" type="submit" fullWidth form={formId}>{$t('search')}</Button>
</div>
</ModalFooter>
</Modal>