You've already forked immich
mirror of
https://github.com/immich-app/immich.git
synced 2025-07-07 06:16:05 +02:00
feat(web): search filter form (#6651)
* 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:
@ -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}
|
||||
|
Reference in New Issue
Block a user