self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-07 06:16:05 +02:00
Code Issues Releases Activity

feat(web): search filter form (#6651)

Browse Source 
* refactor: search history box

* filter box component

* start adding forms

* styling

* combo box

* styling

* media types

* album option

* update

* Updated

* refactor: search history box

* filter box component

* start adding forms

* styling

* combo box

* styling

* media types

* album option

* update

* Updated

* Version v1.94.0

* Add people

* add select even for combobox

* Remove unused data

* remove unused code

* remove unused code
This commit is contained in:
Alex
2024-02-02 13:30:40 -06:00
committed by GitHub
parent d3404f927c
commit 2d278d9ab8
6 changed files with 323 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/lib/components/shared-components/combobox.svelte
View File

@ -2,27 +2,37 @@
// Necessary for eslint
/* eslint-disable @typescript-eslint/no-explicit-any */
type T = any;
</script>
<script lang="ts" generics="T">
import Icon from '$lib/components/elements/icon.svelte';
import { clickOutside } from '$lib/utils/click-outside';
import { mdiMagnify, mdiUnfoldMoreHorizontal } from '@mdi/js';
type ComboBoxOption = {
export type Type = 'button' | 'submit' | 'reset';
export type ComboBoxOption = {
label: string;
value: T;
};
</script>
<script lang="ts">
import { fly } from 'svelte/transition';
import Icon from '$lib/components/elements/icon.svelte';
import { clickOutside } from '$lib/utils/click-outside';
import { mdiMagnify, mdiUnfoldMoreHorizontal } from '@mdi/js';
import { createEventDispatcher } from 'svelte';
export let type: Type = 'button';
export let options: ComboBoxOption[] = [];
export let selectedOption: ComboBoxOption;
export let selectedOption: ComboBoxOption | undefined = undefined;
export let placeholder = '';
export const label = '';
let isOpen = false;
let searchQuery = '';
$: filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
const dispatch = createEventDispatcher<{
select: ComboBoxOption;
}>();
let handleClick = () => {
searchQuery = '';
isOpen = !isOpen;
@ -35,15 +45,14 @@
let handleSelect = (option: ComboBoxOption) => {
selectedOption = option;
dispatch('select', option);
isOpen = false;
};
</script>
<div class="relative" use:clickOutside on:outclick={handleOutClick}>
<button
class="text-sm text-left w-full bg-gray-200 p-3 rounded-lg dark:text-white dark:bg-gray-600 dark:hover:bg-gray-500 transition-all"
on:click={handleClick}
>{selectedOption.label}
<button {type} class="immich-form-input text-sm text-left w-full min-h-[48px] transition-all" on:click={handleClick}
>{selectedOption?.label}
<div class="absolute right-0 top-0 h-full flex px-4 justify-center items-center content-between">
<Icon path={mdiUnfoldMoreHorizontal} />
</div>
@ -51,12 +60,13 @@
{#if isOpen}
<div
class="absolute w-full top-full mt-2 bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-900"
transition:fly={{ y: 25, duration: 250 }}
class="absolute w-full top-full mt-2 bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-900 z-10"
>
<div class="relative border-b flex">
<div class="absolute inset-y-0 left-0 flex items-center pl-3">
<div class="dark:text-immich-dark-fg/75">
<button class="flex items-center">
<button {type} class="flex items-center">
<Icon path={mdiMagnify} />
</button>
</div>
@ -68,10 +78,11 @@
<div class="h-64 overflow-y-auto">
{#each filteredOptions as option (option.label)}
<button
{type}
class="block text-left w-full px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-all
${option.label === selectedOption.label ? 'bg-gray-300 dark:bg-gray-600' : ''}
${option.label === selectedOption?.label ? 'bg-gray-300 dark:bg-gray-600' : ''}
"
class:bg-gray-300={option.label === selectedOption.label}
class:bg-gray-300={option.label === selectedOption?.label}
on:click={() => handleSelect(option)}
>
{option.label}