ki-frontend/src/components/AutoComplete.vue

144 lines
3.4 KiB
Vue
Raw Normal View History

2021-08-02 19:06:41 +02:00
<!-- 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-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-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,
};
},
methods: {
async search() {
try {
const request = await this.axios.get(
2021-07-28 21:52:12 +02:00
`${this.apiUrl}/${this.type}s?search=${this.searchText}`,
2021-07-12 18:32:17 +02:00
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
if (request.status === 200) {
this.searchResults = request.data[`${this.type}s`];
2021-08-18 14:34:28 +02:00
if (
!this.values
.map((item) => item[this.type].name.toLowerCase())
.includes(this.searchText.toLowerCase())
) {
this.searchResults.unshift({ name: this.searchText });
}
2021-07-12 18:32:17 +02:00
}
} catch (error) {
console.error();
this.showErrorMessage = true;
}
},
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 = {
profile_id: localStorage.getItem("user_id"),
};
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>