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