Gro/ki-frontend
0
0
Fork 0
forked from kompetenzinventar/ki-frontend
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#17 #16

Browse Source
This commit is contained in:
scammo 2021-08-18 14:34:28 +02:00
parent 096c317da8
commit 513d204d58
4 changed files with 149 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/AutoComplete.vue
View File

@ -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>

140
src/components/ProfileList.vue
View File

@ -1,54 +1,95 @@
<!-- 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">
<img <div class="row m-1">
style="max-width: 64px" <div class="col">
v-if="value[type].icon_url" <img
:src="iconUrl + value[type].icon_url" style="max-width: 64px"
:alt="`${value[type].name} Logo`" v-if="value[type].icon_url"
/> :src="iconUrl + value[type].icon_url"
{{ value[type].name }} :alt="`${value[type].name} Logo`"
<span v-if="value.level"> />
<span v-if="type == 'skill'">({{ levelSelection[value.level] }})</span> {{ value[type].name }}
<span v-if="type == 'language'">({{ languagesSelection[value.level] }})</span> </div>
</span> <div class="col">
<span v-if="value.content">: <div v-if="type == 'skill'">
<span v-if="value[type].name === 'E-Mail'"> <div v-if="editable">
<a :href="`mailto:${value.content}`">{{ value.content }}</a> <select
</span> v-if="editableValues[valueKey]"
<span v-else> class="form-select"
{{ value.content }} aria-label="Selektiere dein Level"
</span> v-model="editableValues[valueKey].level"
</span> @input="$emit('update-values', editableValues)"
>
<button <option
v-if="this.editable" v-for="(value, key) in levelSelection"
type="button" :value="key"
class="btn btn-outline-warning m-2" :key="key"
aria-label="Bearbeiten" >
@click="this.$emit('editValue', value)" {{ value }}
> </option>
<img </select>
src="/img/bootstrap-icons-1.5.0/pencil.svg" </div>
alt="Bearbeiten Icon" <div v-else>({{ levelSelection[value.level] }})</div>
/> </div>
</button> <div v-else-if="type == 'language'">
<button <div v-if="editable">
v-if="this.editable" <div v-if="editable">
type="button" <select
class="btn btn-outline-danger m-2" v-if="editableValues[valueKey]"
aria-label="Löschen" class="form-select"
@click="this.$emit('removeValue', value[type].id)" aria-label="Selektiere dein Level"
> v-model="editableValues[valueKey].level"
<img src="/img/bootstrap-icons-1.5.0/trash.svg" alt="Löschen Icon" /> @input="$emit('update-values', editableValues)"
</button> >
<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>
</div>
</div>
</div>
<div class="col">
<button
v-if="editable"
type="button"
class="btn btn-outline-danger"
aria-label="Löschen"
@click="$emit('removeValue', value[type].name)"
>
<img
src="/img/bootstrap-icons-1.5.0/trash.svg"
alt="Löschen Icon"
/>
</button>
</div>
</div>
</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>

4
src/views/Index.vue
View File

@ -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);

54
src/views/profile/Edit.vue
View File

@ -5,17 +5,29 @@
<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
</div> darauf zugreifen oder es in der Suche finden.
</div>
<div class="row"> <div class="row">
<div class="col-6 col-xs-12"> <div class="col-6 col-xs-12">
<label for="nickname" class="form-label fw-bold">Nickname:</label> <label for="nickname" class="form-label fw-bold">Nickname:</label>
@ -82,16 +94,16 @@
></auto-complete> ></auto-complete>
<div class="col-12 col-xs-12"> <div class="col-12 col-xs-12">
<label for="availability" class="form-label fw-bold" <label for="availability" class="form-label fw-bold"
>Ich bin für Anfragen verfügbar:</label >Ich bin für Anfragen verfügbar:</label
> >
<textarea <textarea
class="form-control" class="form-control"
id="availability" id="availability"
rows="3" rows="3"
v-model="profile.availability" v-model="profile.availability"
></textarea> ></textarea>
</div> </div>
<auto-complete <auto-complete
type="contacttype" type="contacttype"
@ -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>