feat(web): add search filter for camera lens model. (#21792)

This commit is contained in:
Dag Stuan 2025-10-24 20:41:34 +02:00 committed by GitHub
parent d9cddeb0f1
commit 78fb815cdb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 133 additions and 15 deletions

View file

@ -2,12 +2,11 @@
export interface SearchCameraFilter {
make?: string;
model?: string;
lensModel?: string;
}
</script>
<script lang="ts">
import { run } from 'svelte/legacy';
import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
import { handlePromiseError } from '$lib/utils';
import { SearchSuggestionType, getSearchSuggestions } from '@immich/sdk';
@ -21,6 +20,7 @@
let makes: string[] = $state([]);
let models: string[] = $state([]);
let lensModels: string[] = $state([]);
async function updateMakes() {
const results: Array<string | null> = await getSearchSuggestions({
@ -48,14 +48,35 @@
filters.model = undefined;
}
}
async function updateLensModels(make?: string, model?: string) {
const results: Array<string | null> = await getSearchSuggestions({
$type: SearchSuggestionType.CameraLensModel,
make,
model,
includeNull: true,
});
lensModels = results.map((result) => result ?? '');
if (filters.lensModel && !lensModels.includes(filters.lensModel)) {
filters.lensModel = undefined;
}
}
let makeFilter = $derived(filters.make);
let modelFilter = $derived(filters.model);
run(() => {
let lensModelFilter = $derived(filters.lensModel);
$effect(() => {
handlePromiseError(updateMakes());
});
run(() => {
$effect(() => {
handlePromiseError(updateModels(makeFilter));
});
$effect(() => {
handlePromiseError(updateLensModels(makeFilter, modelFilter));
});
</script>
<div id="camera-selection">
@ -81,5 +102,15 @@
selectedOption={asSelectedOption(modelFilter)}
/>
</div>
<div class="w-full">
<Combobox
label={$t('lens_model')}
onSelect={(option) => (filters.lensModel = option?.value)}
options={asComboboxOptions(lensModels)}
placeholder={$t('search_camera_lens_model')}
selectedOption={asSelectedOption(lensModelFilter)}
/>
</div>
</div>
</div>