feat(web): search by filename (#7624)

* Toggle to search by filename

* wild card search and pr feedback

* Pr feedback

* naming

* placeholder

* Create index

* pr feedback

* pr feedback

* Update web/src/lib/components/shared-components/search-bar/search-text-section.svelte

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

* pr feedback

* pr feedback

* pr feedback

* pr feedback

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Alex 2024-03-05 17:08:35 -06:00 committed by GitHub
parent ae46188753
commit 2f53f6a62c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 86 additions and 15 deletions

View file

@ -11,6 +11,7 @@
export type SearchFilter = {
context?: string;
filename?: string;
personIds: Set<string>;
location: SearchLocationFilter;
camera: SearchCameraFilter;
@ -32,6 +33,7 @@
import SearchMediaSection from './search-media-section.svelte';
import { parseUtcDate } from '$lib/utils/date-time';
import SearchDisplaySection from './search-display-section.svelte';
import SearchTextSection from './search-text-section.svelte';
export let searchQuery: MetadataSearchDto | SmartSearchDto;
@ -41,6 +43,7 @@
let filter: SearchFilter = {
context: 'query' in searchQuery ? searchQuery.query : '',
filename: 'originalPath' in searchQuery ? searchQuery.originalPath : undefined,
personIds: new Set('personIds' in searchQuery ? searchQuery.personIds : []),
location: {
country: searchQuery.country,
@ -91,6 +94,7 @@
let payload: SmartSearchDto | MetadataSearchDto = {
query: filter.context || undefined,
originalPath: filter.filename,
country: filter.location.country,
state: filter.location.state,
city: filter.location.city,
@ -124,20 +128,8 @@
<!-- PEOPLE -->
<SearchPeopleSection width={filterBoxWidth} bind:selectedPeople={filter.personIds} />
<!-- CONTEXT -->
<div>
<label class="immich-form-label" for="context">
<span>CONTEXT</span>
<input
class="immich-form-input hover:cursor-text w-full mt-1"
type="text"
id="context"
name="context"
placeholder="Sunrise on the beach"
bind:value={filter.context}
/>
</label>
</div>
<!-- TEXT -->
<SearchTextSection bind:filename={filter.filename} bind:context={filter.context} />
<!-- LOCATION -->
<SearchLocationSection bind:filters={filter.location} />

View file

@ -0,0 +1,57 @@
<script lang="ts">
export let filename: string | undefined;
export let context: string | undefined;
enum TextSearchOptions {
Context = 'context',
Filename = 'filename',
}
let selectedOption = filename ? TextSearchOptions.Filename : TextSearchOptions.Context;
$: {
if (selectedOption === TextSearchOptions.Context) {
filename = undefined;
} else {
context = undefined;
}
}
</script>
<div class="flex gap-5">
<label class="immich-form-label" for="context">
<input type="radio" name="context" id="context" bind:group={selectedOption} value={TextSearchOptions.Context} />
<span>CONTEXT</span>
</label>
<label class="immich-form-label" for="file-name">
<input
type="radio"
name="file-name"
id="file-name"
bind:group={selectedOption}
value={TextSearchOptions.Filename}
/>
<span>FILE NAME</span>
</label>
</div>
{#if selectedOption === TextSearchOptions.Context}
<input
class="immich-form-input hover:cursor-text w-full !mt-1"
type="text"
id="context"
name="context"
placeholder="Sunrise on the beach"
bind:value={context}
/>
{:else}
<input
class="immich-form-input hover:cursor-text w-full !mt-1"
type="text"
id="file-name"
name="file-name"
placeholder="File name or extension i.e. IMG_1234.JPG or PNG"
bind:value={filename}
/>
{/if}