forked from mirrors/homebox
feat: rebuild search UI w/ new filters (#269)
This commit is contained in:
Hayden
GitHub
parent
ce2fc7712a
commit
ab22ea6a25
10 changed files with 524 additions and 134 deletions
157
frontend/components/Form/Autocomplete2.vue
Normal file
157
frontend/components/Form/Autocomplete2.vue
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
<template>
|
||||
<div>
|
||||
<Combobox v-model="value">
|
||||
<ComboboxLabel class="label">
|
||||
<span class="label-text">{{ label }}</span>
|
||||
</ComboboxLabel>
|
||||
<div class="relative">
|
||||
<ComboboxInput
|
||||
:display-value="i => extractDisplay(i as SupportValues)"
|
||||
class="w-full input input-bordered"
|
||||
@change="search = $event.target.value"
|
||||
/>
|
||||
<ComboboxButton class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
|
||||
<Icon name="mdi-chevron-down" class="w-5 h-5" />
|
||||
</ComboboxButton>
|
||||
<ComboboxOptions
|
||||
v-if="computedItems.length > 0"
|
||||
class="absolute dropdown-content z-10 mt-2 max-h-60 w-full overflow-auto rounded-md card bg-base-100 border border-gray-400"
|
||||
>
|
||||
<ComboboxOption
|
||||
v-for="item in computedItems"
|
||||
:key="item.id"
|
||||
v-slot="{ active, selected }"
|
||||
:value="item.value"
|
||||
as="template"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9 duration-75 ease-in-out transition-colors',
|
||||
active ? 'bg-primary text-white' : 'text-gray-900',
|
||||
]"
|
||||
>
|
||||
<slot name="display" v-bind="{ item: item, selected, active }">
|
||||
<span :class="['block truncate', selected && 'font-semibold']">
|
||||
{{ item.display }}
|
||||
</span>
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="[
|
||||
'absolute inset-y-0 right-0 flex text-primary items-center pr-4',
|
||||
active ? 'text-primary-content' : 'bg-primary',
|
||||
]"
|
||||
>
|
||||
<Icon name="mdi-check" class="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
</slot>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
</ComboboxOptions>
|
||||
</div>
|
||||
</Combobox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxInput,
|
||||
ComboboxOptions,
|
||||
ComboboxOption,
|
||||
ComboboxButton,
|
||||
ComboboxLabel,
|
||||
} from "@headlessui/vue";
|
||||
|
||||
type SupportValues = string | { [key: string]: any };
|
||||
|
||||
type ComboItem = {
|
||||
display: string;
|
||||
value: SupportValues;
|
||||
id: number;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
label: string;
|
||||
modelValue: SupportValues | null | undefined;
|
||||
items: string[] | object[];
|
||||
display?: string;
|
||||
multiple?: boolean;
|
||||
};
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "update:search"]);
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
label: "",
|
||||
modelValue: "",
|
||||
display: "text",
|
||||
multiple: false,
|
||||
});
|
||||
|
||||
const search = ref("");
|
||||
const value = useVModel(props, "modelValue", emit);
|
||||
|
||||
function extractDisplay(item?: SupportValues): string {
|
||||
if (!item) {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (typeof item === "string") {
|
||||
return item;
|
||||
}
|
||||
|
||||
if (props.display in item) {
|
||||
return item[props.display] as string;
|
||||
}
|
||||
|
||||
// Try these options as well
|
||||
const fallback = ["name", "title", "display", "value"];
|
||||
for (let i = 0; i < fallback.length; i++) {
|
||||
const key = fallback[i];
|
||||
if (key in item) {
|
||||
return item[key] as string;
|
||||
}
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
|
||||
const computedItems = computed<ComboItem[]>(() => {
|
||||
const list: ComboItem[] = [];
|
||||
|
||||
for (let i = 0; i < props.items.length; i++) {
|
||||
const item = props.items[i];
|
||||
|
||||
const out: Partial<ComboItem> = {
|
||||
id: i,
|
||||
value: item,
|
||||
};
|
||||
|
||||
switch (typeof item) {
|
||||
case "string":
|
||||
out.display = item;
|
||||
break;
|
||||
case "object":
|
||||
// @ts-ignore - up to the user to provide a valid display key
|
||||
out.display = item[props.display] as string;
|
||||
break;
|
||||
default:
|
||||
out.display = "";
|
||||
break;
|
||||
}
|
||||
|
||||
if (search.value && out.display) {
|
||||
const foldSearch = search.value.toLowerCase();
|
||||
const foldDisplay = out.display.toLowerCase();
|
||||
|
||||
if (foldDisplay.startsWith(foldSearch)) {
|
||||
list.push(out as ComboItem);
|
||||
}
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
list.push(out as ComboItem);
|
||||
}
|
||||
|
||||
return list;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,37 +1,43 @@
|
|||
<template>
|
||||
<FormAutocomplete
|
||||
v-model="value"
|
||||
v-model:search="form.search"
|
||||
:items="locations"
|
||||
item-text="display"
|
||||
item-value="id"
|
||||
item-search="name"
|
||||
label="Parent Location"
|
||||
>
|
||||
<template #display="{ item }">
|
||||
<FormAutocomplete2 v-if="locations" v-model="value" :items="locations" display="name" label="Parent Location">
|
||||
<template #display="{ item, selected, active }">
|
||||
<div>
|
||||
<div>
|
||||
{{ item.name }}
|
||||
<div class="flex w-full">
|
||||
{{ cast(item.value).name }}
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="['absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-primary']"
|
||||
>
|
||||
<Icon name="mdi-check" class="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="cast(item.value).name != cast(item.value).treeString" class="text-xs mt-1">
|
||||
{{ cast(item.value).treeString }}
|
||||
</div>
|
||||
<div v-if="item.name != item.display" class="text-xs mt-1">{{ item.display }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</FormAutocomplete>
|
||||
</FormAutocomplete2>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { FlatTreeItem, useFlatLocations } from "~~/composables/use-location-helpers";
|
||||
import { LocationSummary } from "~~/lib/api/types/data-contracts";
|
||||
|
||||
type Props = {
|
||||
modelValue?: LocationSummary | null;
|
||||
};
|
||||
|
||||
const props = defineProps<Props>();
|
||||
// Cast the type of the item to a FlatTreeItem so we can get type "safety" in the template
|
||||
// Note that this does not actually change the type of the item, it just tells the compiler
|
||||
// that the type is FlatTreeItem. We must keep this in sync with the type of the items
|
||||
function cast(value: any): FlatTreeItem {
|
||||
return value as FlatTreeItem;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const value = useVModel(props, "modelValue");
|
||||
|
||||
const locations = await useFlatLocations();
|
||||
|
||||
const form = ref({
|
||||
parent: null as LocationSummary | null,
|
||||
search: "",
|
||||
|
|
|
|||
104
frontend/components/Search/Filter.vue
Normal file
104
frontend/components/Search/Filter.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<div ref="el" class="dropdown" :class="{ 'dropdown-open': dropdownOpen }">
|
||||
<button ref="btn" tabindex="0" class="btn btn-xs" @click="toggle">
|
||||
{{ label }} {{ len }} <Icon name="mdi-chevron-down" class="h-4 w-4" />
|
||||
</button>
|
||||
<div tabindex="0" class="dropdown-content mt-1 w-64 shadow bg-base-100 rounded-md">
|
||||
<div class="pt-4 px-4 shadow-sm mb-1">
|
||||
<input v-model="search" type="text" placeholder="Search…" class="input input-sm input-bordered w-full mb-2" />
|
||||
</div>
|
||||
<div class="overflow-y-auto max-h-72 divide-y">
|
||||
<label
|
||||
v-for="v in selectedView"
|
||||
:key="v"
|
||||
class="cursor-pointer px-4 label flex justify-between hover:bg-base-200"
|
||||
>
|
||||
<span class="label-text mr-2">
|
||||
<slot name="display" v-bind="{ item: v }">
|
||||
{{ v[display] }}
|
||||
</slot>
|
||||
</span>
|
||||
<input v-model="selected" type="checkbox" :value="v" class="checkbox checkbox-sm checkbox-primary" />
|
||||
</label>
|
||||
<hr v-if="selected.length > 0" />
|
||||
<label
|
||||
v-for="v in unselected"
|
||||
:key="v"
|
||||
class="cursor-pointer px-4 label flex justify-between hover:bg-base-200"
|
||||
>
|
||||
<span class="label-text mr-2">
|
||||
<slot name="display" v-bind="{ item: v }">
|
||||
{{ v[display] }}
|
||||
</slot>
|
||||
</span>
|
||||
<input v-model="selected" type="checkbox" :value="v" class="checkbox checkbox-sm checkbox-primary" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
type Props = {
|
||||
label: string;
|
||||
options: any[];
|
||||
display?: string;
|
||||
modelValue: any[];
|
||||
};
|
||||
|
||||
const btn = ref<HTMLButtonElement>();
|
||||
|
||||
const search = ref("");
|
||||
const searchFold = computed(() => search.value.toLowerCase());
|
||||
const dropdownOpen = ref(false);
|
||||
const el = ref();
|
||||
|
||||
function toggle() {
|
||||
dropdownOpen.value = !dropdownOpen.value;
|
||||
|
||||
if (!dropdownOpen.value) {
|
||||
btn.value?.blur();
|
||||
}
|
||||
}
|
||||
|
||||
onClickOutside(el, () => {
|
||||
dropdownOpen.value = false;
|
||||
});
|
||||
|
||||
watch(dropdownOpen, val => {
|
||||
console.log(val);
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
label: "",
|
||||
display: "name",
|
||||
modelValue: () => [],
|
||||
});
|
||||
|
||||
const len = computed(() => {
|
||||
return selected.value.length > 0 ? `(${selected.value.length})` : "";
|
||||
});
|
||||
|
||||
const selectedView = computed(() => {
|
||||
return selected.value.filter(o => {
|
||||
if (searchFold.value.length > 0) {
|
||||
return o[props.display].toLowerCase().includes(searchFold.value);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
});
|
||||
|
||||
const selected = useVModel(props, "modelValue", emit);
|
||||
|
||||
const unselected = computed(() => {
|
||||
return props.options.filter(o => {
|
||||
if (searchFold.value.length > 0) {
|
||||
return o[props.display].toLowerCase().includes(searchFold.value) && !selected.value.includes(o);
|
||||
}
|
||||
return !selected.value.includes(o);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue