ki-frontend/src/components/AutoComplete.vue

148 lines
3.3 KiB
Vue
Raw Normal View History

2021-09-19 12:55:33 +02:00
<!--
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
SPDX-License-Identifier: AGPL-3.0-or-later
-->
2021-07-12 18:32:17 +02:00
<template>
2021-10-18 20:45:18 +02:00
<profile-list
:values="values"
:type="type"
:editable="true"
2021-10-24 18:16:19 +02:00
:show-secondary="showSecondary"
2021-10-18 20:45:18 +02:00
@remove-value="removeValue($event)"
@update-values="this.$emit('update-values', this.values)"
>
</profile-list>
<div v-bind="$attrs" class="card-body">
<div class="row">
2021-10-24 18:16:19 +02:00
<div class="col-12 col-md-4 col-lg-3 col-xl-2">
<div class="form-control-plaintext form-control-sm">Eintrag hinzufügen:</div>
</div>
<div class="col-12 col-md-6">
2021-07-12 18:32:17 +02:00
<input
autocomplete="off"
type="text"
2021-10-24 18:16:19 +02:00
class="form-control form-control-sm"
2021-07-12 18:32:17 +02:00
id="searchText"
2021-11-22 20:14:45 +01:00
:maxlength="maxlength"
2021-10-24 18:16:19 +02:00
:placeholder="placeholder"
2021-07-12 18:32:17 +02:00
v-model="searchText"
2021-10-18 20:45:18 +02:00
@input="search()"
2021-08-18 14:34:28 +02:00
@keyup.enter="addResult()"
2021-07-12 18:32:17 +02:00
/>
2021-10-24 18:16:19 +02:00
<div v-if="searchResults">
<ul class="list-group">
<li
class="list-group-item"
v-for="result in searchResults"
:key="result.id"
@click="addResult(result)"
>
{{ result.name }}
</li>
</ul>
</div>
2021-07-12 18:32:17 +02:00
</div>
2021-10-24 18:16:19 +02:00
<div class="col-md-2">
2021-07-12 18:32:17 +02:00
<button
2021-08-18 14:34:28 +02:00
v-if="searchText != ''"
2021-07-12 18:32:17 +02:00
type="button"
class="btn btn-outline-success"
aria-label="Hinzufügen"
2021-08-18 14:34:28 +02:00
@click="addResult()"
2021-07-12 18:32:17 +02:00
>
2021-09-21 23:56:17 +02:00
<i clas="bi-plus-lg"></i>
2021-07-12 18:32:17 +02:00
Hinzufügen
</button>
</div>
</div>
</div>
</template>
<script>
2021-09-19 17:30:37 +02:00
import { mapState } from 'vuex'
2021-08-18 22:59:44 +02:00
2021-10-18 20:45:18 +02:00
import RequestMixin from '@/mixins/request.mixin'
import ProfileList from '@/components/ProfileList';
2021-07-26 17:10:28 +02:00
2021-07-12 18:32:17 +02:00
export default {
2021-10-18 20:45:18 +02:00
name: 'AutoComplete',
2021-08-18 22:59:44 +02:00
mixins: [RequestMixin],
2021-07-26 17:10:28 +02:00
components: {
ProfileList,
},
2021-07-12 18:32:17 +02:00
props: {
type: {
type: String,
},
label: {
type: String,
},
values: {
type: Array,
},
2021-10-24 18:16:19 +02:00
showSecondary: {
type: Boolean,
default: true,
},
placeholder: {
type: String,
default: "",
},
2021-07-12 18:32:17 +02:00
},
data() {
return {
2021-07-28 21:52:12 +02:00
iconUrl: this.apiUrl,
2021-10-18 20:45:18 +02:00
searchText: '',
2021-07-12 18:32:17 +02:00
searchResults: [],
showErrorMessage: false,
};
},
2021-09-19 17:30:37 +02:00
computed: {
2021-11-22 20:14:45 +01:00
...mapState(['currentUserId']),
maxlength() {
return this.type === 'skill' ? 50 : 25
}
2021-09-19 17:30:37 +02:00
},
2021-07-12 18:32:17 +02:00
methods: {
2021-08-18 14:34:28 +02:00
addResult(result = false) {
if (!result) result = this.searchResults[0];
2021-10-18 20:45:18 +02:00
if (
2021-08-18 14:34:28 +02:00
this.values.map((item) => item[this.type].name).includes(result.name)
) {
2021-07-12 18:32:17 +02:00
return false;
}
2021-07-12 18:32:17 +02:00
let changeValues = Object.assign(this.values);
let newValue = {
2021-09-19 17:30:37 +02:00
profile_id: this.currentUserId,
};
2021-10-18 20:45:18 +02:00
if (this.type != 'contacttype') {
2021-08-18 14:34:28 +02:00
newValue.level = 1;
} else {
2021-10-18 20:45:18 +02:00
newValue.content = '';
2021-07-12 18:32:17 +02:00
}
2021-10-18 20:45:18 +02:00
2021-08-18 14:34:28 +02:00
newValue[this.type] = result;
changeValues.unshift(newValue);
2021-10-18 20:45:18 +02:00
this.searchText = '';
2021-07-12 18:32:17 +02:00
this.searchResults = [];
2021-10-18 20:45:18 +02:00
this.$emit('update-values', changeValues);
2021-07-12 18:32:17 +02:00
},
2021-08-18 14:34:28 +02:00
removeValue(valueName) {
2021-07-12 18:32:17 +02:00
const newValues = this.values.filter((value) => {
2021-08-18 14:34:28 +02:00
if (valueName === value[this.type].name) {
2021-07-12 18:32:17 +02:00
return false;
} else {
return true;
}
});
2021-10-18 20:45:18 +02:00
this.$emit('update-values', newValues);
2021-07-12 18:32:17 +02:00
},
},
};
2021-07-28 21:52:12 +02:00
</script>