81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<template>
|
|
<q-select
|
|
v-model="selected"
|
|
filled
|
|
:label="label"
|
|
:options="users"
|
|
:option-label="showName"
|
|
option-value="userid"
|
|
map-options
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="filterFn"
|
|
/>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, PropType, onBeforeMount, ref } from 'vue';
|
|
import { useUserStore } from '@flaschengeist/api';
|
|
import { showName } from '../utils';
|
|
|
|
export default defineComponent({
|
|
name: 'UserSelector',
|
|
props: {
|
|
label: { type: String, default: 'Benutzer' },
|
|
modelValue: { default: undefined, type: Object as PropType<FG.User | undefined> },
|
|
},
|
|
emits: { 'update:modelValue': (user: FG.User) => !!user },
|
|
setup(props, { emit }) {
|
|
const userStore = useUserStore();
|
|
|
|
onBeforeMount(() => {
|
|
void userStore.getUsers(false);
|
|
void userStore.getDisplayNameModeSetting(true);
|
|
});
|
|
|
|
const users = computed(() =>
|
|
userStore.users.filter((user) => {
|
|
let names = filter.value.toLowerCase().split(' ');
|
|
if (names.length < 1) {
|
|
return true;
|
|
}
|
|
if (names.length === 1) {
|
|
let name = names[0];
|
|
return (
|
|
user.lastname.toLowerCase().includes(name) ||
|
|
user.firstname.toLowerCase().includes(name)
|
|
);
|
|
}
|
|
if (names.length === 2) {
|
|
let name1 = names[0];
|
|
let name2 = names[1];
|
|
return (
|
|
(user.lastname.toLowerCase().includes(name1) &&
|
|
user.firstname.toLowerCase().includes(name2)) ||
|
|
(user.lastname.toLowerCase().includes(name2) &&
|
|
user.firstname.toLowerCase().includes(name1))
|
|
);
|
|
}
|
|
return true;
|
|
})
|
|
);
|
|
const filter = ref<string>('');
|
|
const filterFn = (val: string, update: () => void) => {
|
|
filter.value = val;
|
|
update();
|
|
};
|
|
const selected = computed({
|
|
get: () => props.modelValue,
|
|
set: (value: FG.User | undefined) => (value ? emit('update:modelValue', value) : undefined),
|
|
});
|
|
|
|
return {
|
|
selected,
|
|
users,
|
|
filterFn,
|
|
showName,
|
|
};
|
|
},
|
|
});
|
|
</script>
|