besser editieren, bootstrap iccons, mehr style
This commit is contained in:
scammo
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<label for="searchText" class="form-label">{{ label }}</label>
|
||||
<div class="row">
|
||||
<label for="searchText" class="form-label fw-bold">{{ label }}</label>
|
||||
<div class="row mb-2">
|
||||
<div class="col">
|
||||
<input
|
||||
autocomplete="off"
|
||||
@ -13,40 +13,52 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div v-if="searchResults.length != 0">
|
||||
<div v-if="selectedResult">
|
||||
<div v-if="type != 'contacttype'">
|
||||
<select
|
||||
class="form-select"
|
||||
aria-label="Selektiere dein Level"
|
||||
v-model="level"
|
||||
>
|
||||
<option value="1" selected>1</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="3">4</option>
|
||||
<option value="4">4</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-else>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="contactContent"
|
||||
v-model="contactContent"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="contactContent"
|
||||
v-model="contactContent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button
|
||||
v-if="searchResults.length != 0"
|
||||
v-if="selectedResult && !selectedResult.edit"
|
||||
type="button"
|
||||
class="btn btn-success"
|
||||
aria-label="Löschen"
|
||||
class="btn btn-outline-success"
|
||||
aria-label="Hinzufügen"
|
||||
@click="addSelectedResult()"
|
||||
>
|
||||
<img
|
||||
src="/img/bootstrap-icons-1.5.0/plus-lg.svg"
|
||||
alt="Hinzufügen Icon"
|
||||
/>
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="" v-if="searchResults">
|
||||
@ -56,7 +68,10 @@
|
||||
v-for="result in searchResults"
|
||||
:key="result.id"
|
||||
:class="{
|
||||
'bg-info': selectedResult.id && result.id === selectedResult.id,
|
||||
'bg-info':
|
||||
selectedResult &&
|
||||
selectedResult.id &&
|
||||
result.id === selectedResult.id,
|
||||
}"
|
||||
@click="selectedResult = result"
|
||||
>
|
||||
@ -66,15 +81,35 @@
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="value in values" :key="value.id">
|
||||
<img v-if="value[type].icon_url" :src="iconUrl + value[type].icon_url" />
|
||||
{{ value[type].name }} <span v-if="value.level">({{ value.level }})</span>
|
||||
<span v-if="value.content">{{value.content}}</span>
|
||||
<img
|
||||
style="max-width: 64px"
|
||||
v-if="value[type].icon_url"
|
||||
:src="iconUrl + value[type].icon_url"
|
||||
:alt="`${value[type].name} Logo`"
|
||||
/>
|
||||
{{ value[type].name }}
|
||||
<span v-if="value.level">({{ value.level }})</span>
|
||||
<span v-if="value.content">{{ value.content }}</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
class="btn btn-outline-warning m-2"
|
||||
aria-label="Bearbeiten"
|
||||
@click="editValue(value)"
|
||||
>
|
||||
<img
|
||||
src="/img/bootstrap-icons-1.5.0/pencil.svg"
|
||||
alt="Bearbeiten Icon"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-danger m-2"
|
||||
aria-label="Löschen"
|
||||
@click="removeValue(value[type].id)"
|
||||
></button>
|
||||
>
|
||||
<img src="/img/bootstrap-icons-1.5.0/trash.svg" alt="Löschen Icon" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -101,7 +136,7 @@ export default {
|
||||
searchResults: [],
|
||||
showErrorMessage: false,
|
||||
level: 1,
|
||||
selectedResult: {},
|
||||
selectedResult: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -124,25 +159,45 @@ export default {
|
||||
}
|
||||
},
|
||||
addSelectedResult() {
|
||||
if (this.values.map((item) => item[this.type].id).includes(this.selectedResult.id))
|
||||
if (
|
||||
this.values
|
||||
.map((item) => item[this.type].id)
|
||||
.includes(this.selectedResult.id)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let changeValues = Object.assign(this.values);
|
||||
let newValue = {
|
||||
profile_id: localStorage.getItem("user_id")
|
||||
profile_id: localStorage.getItem("user_id"),
|
||||
};
|
||||
if (this.type != "contacttype") {
|
||||
newValue.level = this.level;
|
||||
} else {
|
||||
newValue.content = this.contactContent;
|
||||
}
|
||||
if(this.type != "contacttype"){
|
||||
newValue.level = this.level
|
||||
}else{
|
||||
newValue.content = this.contactContent
|
||||
}
|
||||
newValue[this.type] = this.selectedResult
|
||||
newValue[this.type] = this.selectedResult;
|
||||
changeValues.push(newValue);
|
||||
this.searchText = "";
|
||||
this.searchResults = [];
|
||||
this.selectedResult = {};
|
||||
this.selectedResult = null;
|
||||
this.level = 1;
|
||||
this.$emit("update-values", changeValues);
|
||||
},
|
||||
editSelectedResult() {
|
||||
this.values.map((item) => {
|
||||
if(item[this.type].name == this.selectedResult.name){
|
||||
if (this.type != "contacttype") {
|
||||
item.level = this.level
|
||||
} else {
|
||||
item.content = this.contactContent
|
||||
}
|
||||
}
|
||||
return item;
|
||||
});
|
||||
|
||||
this.$emit("update-values", this.values);
|
||||
},
|
||||
removeValue(valueId) {
|
||||
const newValues = this.values.filter((value) => {
|
||||
if (valueId === value[this.type].id) {
|
||||
@ -153,6 +208,21 @@ export default {
|
||||
});
|
||||
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;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user