ki-frontend/src/components/AutoComplete.vue

131 lines
2.9 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>
<div>
<label for="searchText" class="form-label fw-bold">{{ label }}</label>
<div class="row mb-2">
2021-07-12 18:32:17 +02:00
<div class="col">
<input
autocomplete="off"
type="text"
class="form-control"
id="searchText"
v-model="searchText"
@keyup="search()"
2021-08-18 14:34:28 +02:00
@keyup.enter="addResult()"
2021-07-12 18:32:17 +02:00
/>
</div>
<div class="col">
<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
>
<img
src="/img/bootstrap-icons-1.5.0/plus-lg.svg"
alt="Hinzufügen Icon"
/>
2021-07-12 18:32:17 +02:00
Hinzufügen
</button>
</div>
</div>
<div class="" v-if="searchResults">
<ul class="list-group">
<li
class="list-group-item"
v-for="result in searchResults"
:key="result.id"
2021-08-18 14:34:28 +02:00
@click="addResult(result)"
2021-07-12 18:32:17 +02:00
>
{{ result.name }}
</li>
</ul>
</div>
2021-07-26 17:10:28 +02:00
<profile-list
:values="values"
:type="type"
:editable="true"
@remove-value="removeValue($event)"
2021-08-18 14:34:28 +02:00
@update-values="this.$emit('update-values', this.values)"
>
</profile-list>
2021-07-12 18:32:17 +02:00
</div>
</template>
<script>
2021-09-19 17:30:37 +02:00
import { mapState } from 'vuex'
2021-08-18 22:59:44 +02:00
2021-09-19 17:30:37 +02:00
import RequestMixin from "@/mixins/request.mixin"
2021-07-26 17:10:28 +02:00
import ProfileList from "@/components/ProfileList";
2021-07-12 18:32:17 +02:00
export default {
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,
},
},
data() {
return {
2021-07-28 21:52:12 +02:00
iconUrl: this.apiUrl,
2021-07-12 18:32:17 +02:00
searchText: "",
searchResults: [],
showErrorMessage: false,
};
},
2021-09-19 17:30:37 +02:00
computed: {
...mapState(['currentUserId'])
},
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];
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,
};
if (this.type != "contacttype") {
2021-08-18 14:34:28 +02:00
newValue.level = 1;
} else {
2021-08-18 14:34:28 +02:00
newValue.content = "";
2021-07-12 18:32:17 +02:00
}
2021-08-18 14:34:28 +02:00
newValue[this.type] = result;
changeValues.unshift(newValue);
2021-07-12 18:32:17 +02:00
this.searchText = "";
this.searchResults = [];
this.$emit("update-values", changeValues);
},
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;
}
});
this.$emit("update-values", newValues);
},
},
};
2021-07-28 21:52:12 +02:00
</script>