mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
c6d2408517
* bump skip link z index, to prevent overlap with the search box * combobox refactor initial commit * pull label into the combobox component * feat(web): combobox accessibility improvements * fix: replace crypto.randomUUID, fix border UI bug, simpler focus handling (#2) * fix: handle changes in the selected option * fix: better escape key handling in search bar * fix: remove broken tailwind classes Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * fix: remove custom "outclick" handler logic * fix: use focusout instead of custom key handlers to detect focus change * fix: move escape key handling to the window Also add escape key handling to the input box, to make sure that the "recent searches" dropdown gets closed too. * fix: better input event handling Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * fix: highlighting selected dropdown element --------- Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
64 lines
1.8 KiB
Svelte
64 lines
1.8 KiB
Svelte
<script lang="ts" context="module">
|
|
export interface SearchCameraFilter {
|
|
make?: string;
|
|
model?: string;
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { SearchSuggestionType, getSearchSuggestions } from '@immich/sdk';
|
|
import Combobox, { toComboBoxOptions } from '../combobox.svelte';
|
|
import { handlePromiseError } from '$lib/utils';
|
|
|
|
export let filters: SearchCameraFilter;
|
|
|
|
let makes: string[] = [];
|
|
let models: string[] = [];
|
|
|
|
$: makeFilter = filters.make;
|
|
$: modelFilter = filters.model;
|
|
$: handlePromiseError(updateMakes(modelFilter));
|
|
$: handlePromiseError(updateModels(makeFilter));
|
|
|
|
async function updateMakes(model?: string) {
|
|
makes = await getSearchSuggestions({
|
|
$type: SearchSuggestionType.CameraMake,
|
|
model,
|
|
});
|
|
}
|
|
|
|
async function updateModels(make?: string) {
|
|
models = await getSearchSuggestions({
|
|
$type: SearchSuggestionType.CameraModel,
|
|
make,
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<div id="camera-selection">
|
|
<p class="immich-form-label">CAMERA</p>
|
|
|
|
<div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5 mt-1">
|
|
<div class="w-full">
|
|
<Combobox
|
|
id="camera-make"
|
|
label="Make"
|
|
on:select={({ detail }) => (filters.make = detail?.value)}
|
|
options={toComboBoxOptions(makes)}
|
|
placeholder="Search camera make..."
|
|
selectedOption={makeFilter ? { label: makeFilter, value: makeFilter } : undefined}
|
|
/>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<Combobox
|
|
id="camera-model"
|
|
label="Model"
|
|
on:select={({ detail }) => (filters.model = detail?.value)}
|
|
options={toComboBoxOptions(models)}
|
|
placeholder="Search camera model..."
|
|
selectedOption={modelFilter ? { label: modelFilter, value: modelFilter } : undefined}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|