This commit is contained in:
scammo
parent
096c317da8
commit
513d204d58
@ -11,45 +11,16 @@
|
||||
id="searchText"
|
||||
v-model="searchText"
|
||||
@keyup="search()"
|
||||
@keyup.enter="addResult()"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div v-if="selectedResult">
|
||||
<div v-if="type === 'contacttype'">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="contactContent"
|
||||
v-model="contactContent"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="type === 'language'">
|
||||
<select
|
||||
class="form-select"
|
||||
aria-label="Selektiere dein Level"
|
||||
v-model="level"
|
||||
>
|
||||
<option v-for="(value, key) in languagesSelection" :value="key" :key="key">{{value}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-else>
|
||||
<select
|
||||
class="form-select"
|
||||
aria-label="Selektiere dein Level"
|
||||
v-model="level"
|
||||
>
|
||||
<option v-for="(value, key) in levelSelection" :value="key" :key="key">{{value}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button
|
||||
v-if="selectedResult && !selectedResult.edit"
|
||||
v-if="searchText != ''"
|
||||
type="button"
|
||||
class="btn btn-outline-success"
|
||||
aria-label="Hinzufügen"
|
||||
@click="addSelectedResult()"
|
||||
@click="addResult()"
|
||||
>
|
||||
<img
|
||||
src="/img/bootstrap-icons-1.5.0/plus-lg.svg"
|
||||
@ -57,15 +28,6 @@
|
||||
/>
|
||||
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">
|
||||
@ -74,13 +36,7 @@
|
||||
class="list-group-item"
|
||||
v-for="result in searchResults"
|
||||
:key="result.id"
|
||||
:class="{
|
||||
'bg-info':
|
||||
selectedResult &&
|
||||
selectedResult.id &&
|
||||
result.id === selectedResult.id,
|
||||
}"
|
||||
@click="selectedResult = result"
|
||||
@click="addResult(result)"
|
||||
>
|
||||
{{ result.name }}
|
||||
</li>
|
||||
@ -90,17 +46,15 @@
|
||||
:values="values"
|
||||
:type="type"
|
||||
:editable="true"
|
||||
@edit-value="editValue($event)"
|
||||
@remove-value="removeValue($event)"
|
||||
></profile-list>
|
||||
@update-values="this.$emit('update-values', this.values)"
|
||||
>
|
||||
</profile-list>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ProfileList from "@/components/ProfileList";
|
||||
|
||||
import levelJson from "@/assets/skill_level.json"
|
||||
import languagesJson from "@/assets/language_level.json"
|
||||
|
||||
export default {
|
||||
name: "AutoComplete",
|
||||
components: {
|
||||
@ -121,13 +75,8 @@ export default {
|
||||
return {
|
||||
iconUrl: this.apiUrl,
|
||||
searchText: "",
|
||||
contactContent: "",
|
||||
searchResults: [],
|
||||
showErrorMessage: false,
|
||||
level: "1",
|
||||
selectedResult: null,
|
||||
levelSelection: levelJson,
|
||||
languagesSelection: languagesJson,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -143,17 +92,23 @@ export default {
|
||||
);
|
||||
if (request.status === 200) {
|
||||
this.searchResults = request.data[`${this.type}s`];
|
||||
if (
|
||||
!this.values
|
||||
.map((item) => item[this.type].name.toLowerCase())
|
||||
.includes(this.searchText.toLowerCase())
|
||||
) {
|
||||
this.searchResults.unshift({ name: this.searchText });
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error();
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
},
|
||||
addSelectedResult() {
|
||||
addResult(result = false) {
|
||||
if (!result) result = this.searchResults[0];
|
||||
if (
|
||||
this.values
|
||||
.map((item) => item[this.type].id)
|
||||
.includes(this.selectedResult.id)
|
||||
this.values.map((item) => item[this.type].name).includes(result.name)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
@ -163,35 +118,19 @@ export default {
|
||||
profile_id: localStorage.getItem("user_id"),
|
||||
};
|
||||
if (this.type != "contacttype") {
|
||||
newValue.level = this.level;
|
||||
newValue.level = 1;
|
||||
} else {
|
||||
newValue.content = this.contactContent;
|
||||
newValue.content = "";
|
||||
}
|
||||
newValue[this.type] = this.selectedResult;
|
||||
changeValues.push(newValue);
|
||||
newValue[this.type] = result;
|
||||
changeValues.unshift(newValue);
|
||||
this.searchText = "";
|
||||
this.searchResults = [];
|
||||
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) {
|
||||
removeValue(valueName) {
|
||||
const newValues = this.values.filter((value) => {
|
||||
if (valueId === value[this.type].id) {
|
||||
if (valueName === value[this.type].name) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
@ -199,21 +138,6 @@ 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>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
|
||||
<template>
|
||||
<ul>
|
||||
<li v-for="value in values" :key="value.id">
|
||||
<li v-for="(value, valueKey) in values" :key="value.id">
|
||||
<div class="row m-1">
|
||||
<div class="col">
|
||||
<img
|
||||
style="max-width: 64px"
|
||||
v-if="value[type].icon_url"
|
||||
@ -9,46 +11,85 @@
|
||||
:alt="`${value[type].name} Logo`"
|
||||
/>
|
||||
{{ value[type].name }}
|
||||
<span v-if="value.level">
|
||||
<span v-if="type == 'skill'">({{ levelSelection[value.level] }})</span>
|
||||
<span v-if="type == 'language'">({{ languagesSelection[value.level] }})</span>
|
||||
</span>
|
||||
<span v-if="value.content">:
|
||||
</div>
|
||||
<div class="col">
|
||||
<div v-if="type == 'skill'">
|
||||
<div v-if="editable">
|
||||
<select
|
||||
v-if="editableValues[valueKey]"
|
||||
class="form-select"
|
||||
aria-label="Selektiere dein Level"
|
||||
v-model="editableValues[valueKey].level"
|
||||
@input="$emit('update-values', editableValues)"
|
||||
>
|
||||
<option
|
||||
v-for="(value, key) in levelSelection"
|
||||
:value="key"
|
||||
:key="key"
|
||||
>
|
||||
{{ value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-else>({{ levelSelection[value.level] }})</div>
|
||||
</div>
|
||||
<div v-else-if="type == 'language'">
|
||||
<div v-if="editable">
|
||||
<div v-if="editable">
|
||||
<select
|
||||
v-if="editableValues[valueKey]"
|
||||
class="form-select"
|
||||
aria-label="Selektiere dein Level"
|
||||
v-model="editableValues[valueKey].level"
|
||||
@input="$emit('update-values', editableValues)"
|
||||
>
|
||||
<option
|
||||
v-for="(value, key) in languagesSelection"
|
||||
:value="key"
|
||||
:key="key"
|
||||
>
|
||||
{{ value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else></div>
|
||||
</div>
|
||||
<div v-else-if="value.content">
|
||||
<div v-if="editable">
|
||||
<input class="form-control" v-model="editableValues[valueKey].content"/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span v-if="value[type].name === 'E-Mail'">
|
||||
<a :href="`mailto:${value.content}`">{{ value.content }}</a>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ value.content }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button
|
||||
v-if="this.editable"
|
||||
v-if="editable"
|
||||
type="button"
|
||||
class="btn btn-outline-warning m-2"
|
||||
aria-label="Bearbeiten"
|
||||
@click="this.$emit('editValue', value)"
|
||||
class="btn btn-outline-danger"
|
||||
aria-label="Löschen"
|
||||
@click="$emit('removeValue', value[type].name)"
|
||||
>
|
||||
<img
|
||||
src="/img/bootstrap-icons-1.5.0/pencil.svg"
|
||||
alt="Bearbeiten Icon"
|
||||
src="/img/bootstrap-icons-1.5.0/trash.svg"
|
||||
alt="Löschen Icon"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="this.editable"
|
||||
type="button"
|
||||
class="btn btn-outline-danger m-2"
|
||||
aria-label="Löschen"
|
||||
@click="this.$emit('removeValue', value[type].id)"
|
||||
>
|
||||
<img src="/img/bootstrap-icons-1.5.0/trash.svg" alt="Löschen Icon" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<script>
|
||||
import levelJson from "@/assets/skill_level.json"
|
||||
import languagesJson from "@/assets/language_level.json"
|
||||
import levelJson from "@/assets/skill_level.json";
|
||||
import languagesJson from "@/assets/language_level.json";
|
||||
|
||||
export default {
|
||||
name: "ProfileList",
|
||||
@ -58,6 +99,7 @@ export default {
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
@ -69,7 +111,13 @@ export default {
|
||||
iconUrl: this.apiUrl,
|
||||
levelSelection: levelJson,
|
||||
languagesSelection: languagesJson,
|
||||
}
|
||||
}
|
||||
editableValues: this.values,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
values: function (newVal) {
|
||||
this.editableValues = newVal;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -58,7 +58,6 @@ export default {
|
||||
async submitLogin() {
|
||||
this.showErrorMessage = false;
|
||||
try {
|
||||
console.log(this.apiUrl)
|
||||
const loginResult = await axios.post(
|
||||
`${this.apiUrl}/users/login`,
|
||||
{
|
||||
@ -66,10 +65,7 @@ export default {
|
||||
password: this.password,
|
||||
}
|
||||
);
|
||||
console.log(loginResult);
|
||||
console.log(loginResult.status);
|
||||
if (loginResult.status === 200) {
|
||||
console.log('if true')
|
||||
this.showErrorMessage = false;
|
||||
//success login
|
||||
localStorage.setItem("token", loginResult.data.token);
|
||||
|
||||
@ -5,16 +5,28 @@
|
||||
<form @submit.prevent="submitForm()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input type="radio" id="false" :value="false" v-model="profile.visible" class="mr-2"/>
|
||||
<input
|
||||
type="radio"
|
||||
id="false"
|
||||
:value="false"
|
||||
v-model="profile.visible"
|
||||
class="mr-2"
|
||||
/>
|
||||
<label for="false" class="m-2 fw-bold"> Nicht öffentlich</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="radio" id="true" :value="true" v-model="profile.visible" />
|
||||
<input
|
||||
type="radio"
|
||||
id="true"
|
||||
:value="true"
|
||||
v-model="profile.visible"
|
||||
/>
|
||||
<label for="true" class="m-2 fw-bold"> Öffentlich</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="visibilityHelp" class="form-text">
|
||||
Erst wenn du dein Profil Öffentlich stellst, können andere Genoss:innen darauf zugreifen oder es in der Suche finden.
|
||||
Erst wenn du dein Profil Öffentlich stellst, können andere Genoss:innen
|
||||
darauf zugreifen oder es in der Suche finden.
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-xs-12">
|
||||
@ -130,7 +142,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-outline-success mb-4 mt-4 col-12">Speichern</button>
|
||||
<button type="submit" class="btn btn-outline-success mb-4 mt-4 col-12">
|
||||
Speichern
|
||||
</button>
|
||||
<div
|
||||
class="alert alert-danger mb-4 mt-4"
|
||||
role="alert"
|
||||
@ -183,9 +197,7 @@ export default {
|
||||
async created() {
|
||||
try {
|
||||
const userProfile = await axios.get(
|
||||
`${this.apiUrl}/users/${localStorage.getItem(
|
||||
"user_id"
|
||||
)}/profile`,
|
||||
`${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
|
||||
{
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
}
|
||||
@ -199,9 +211,7 @@ export default {
|
||||
async submitForm() {
|
||||
try {
|
||||
const formSubmitResult = await axios.post(
|
||||
`${this.apiUrl}/users/${localStorage.getItem(
|
||||
"user_id"
|
||||
)}/profile`,
|
||||
`${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
|
||||
this.profile,
|
||||
{
|
||||
headers: {
|
||||
@ -220,7 +230,7 @@ export default {
|
||||
console.error(error);
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user