ki-frontend/src/components/AutoComplete.vue

207 lines
5.1 KiB
Vue
Raw Normal View History

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()"
/>
</div>
<div class="col">
<div v-if="selectedResult">
2021-07-12 18:32:17 +02:00
<div v-if="type != 'contacttype'">
<select
class="form-select"
aria-label="Selektiere dein Level"
v-model="level"
>
<option value="1">1</option>
2021-07-12 18:32:17 +02:00
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
2021-07-12 18:32:17 +02:00
</select>
</div>
<div v-else>
<input
type="text"
class="form-control"
id="contactContent"
v-model="contactContent"
/>
2021-07-12 18:32:17 +02:00
</div>
</div>
</div>
<div class="col">
<button
v-if="selectedResult && !selectedResult.edit"
2021-07-12 18:32:17 +02:00
type="button"
class="btn btn-outline-success"
aria-label="Hinzufügen"
2021-07-12 18:32:17 +02:00
@click="addSelectedResult()"
>
<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>
<button
v-if="selectedResult && selectedResult.edit"
type="button"
class="btn btn-outline-success"
aria-label="Hinzufügen"
@click="editSelectedResult()"
>
Änderung Speichern
</button>
2021-07-12 18:32:17 +02:00
</div>
</div>
<div class="" v-if="searchResults">
<ul class="list-group">
<li
class="list-group-item"
v-for="result in searchResults"
:key="result.id"
:class="{
'bg-info':
selectedResult &&
selectedResult.id &&
result.id === selectedResult.id,
2021-07-12 18:32:17 +02:00
}"
@click="selectedResult = result"
>
{{ result.name }}
</li>
</ul>
</div>
2021-07-26 17:10:28 +02:00
<profile-list
:values="values"
:type="type"
:editable="true"
@edit-value="editValue($event)"
@remove-value="removeValue($event)"
></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 {
iconUrl: process.env.VUE_APP_API_URL,
searchText: "",
contactContent: "",
searchResults: [],
showErrorMessage: false,
level: 1,
selectedResult: null,
2021-07-12 18:32:17 +02:00
};
},
methods: {
async search() {
try {
const request = await this.axios.get(
`${process.env.VUE_APP_API_URL}/${this.type}s?search=${this.searchText}`,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
if (request.status === 200) {
this.searchResults = request.data[`${this.type}s`];
}
} catch (error) {
console.error();
this.showErrorMessage = true;
}
},
addSelectedResult() {
if (
this.values
.map((item) => item[this.type].id)
.includes(this.selectedResult.id)
) {
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") {
newValue.level = this.level;
} else {
newValue.content = this.contactContent;
2021-07-12 18:32:17 +02:00
}
newValue[this.type] = this.selectedResult;
2021-07-12 18:32:17 +02:00
changeValues.push(newValue);
this.searchText = "";
this.searchResults = [];
this.selectedResult = null;
2021-07-12 18:32:17 +02:00
this.level = 1;
this.$emit("update-values", changeValues);
},
editSelectedResult() {
this.values.map((item) => {
2021-07-26 17:10:28 +02:00
if (item[this.type].name == this.selectedResult.name) {
if (this.type != "contacttype") {
2021-07-26 17:10:28 +02:00
item.level = this.level;
} else {
2021-07-26 17:10:28 +02:00
item.content = this.contactContent;
}
}
return item;
});
2021-07-26 17:10:28 +02:00
this.$emit("update-values", this.values);
},
2021-07-12 18:32:17 +02:00
removeValue(valueId) {
const newValues = this.values.filter((value) => {
if (valueId === value[this.type].id) {
return false;
} else {
return true;
}
});
this.$emit("update-values", newValues);
},
editValue(value) {
this.searchResults = [value[this.type]];
this.selectedResult = {
...value[this.type],
level: value.level,
edit: true,
};
if (this.type != "contacttype") {
this.level = value.level;
} else {
this.contactContent = value.content;
}
this.level = value.level;
},
2021-07-12 18:32:17 +02:00
},
};
</script>