ki-frontend/src/views/profile/Edit.vue

291 lines
7.9 KiB
Vue
Raw Normal View History

2021-06-07 17:41:25 +02:00
<template>
<div class="container">
<h1>Profil Ändern</h1>
<form @submit.prevent="submitForm()">
<div class="row">
<div class="col-6 col-xs-12">
<label for="nickname" class="form-label">Nickname:</label>
<input
type="text"
class="form-control"
id="nickname"
v-model="profile.nickname"
required
/>
</div>
<div class="col-6 col-xs-12">
<label for="nickname" class="form-label">Pronomen:</label>
<input
type="text"
class="form-control"
id="pronouns"
v-model="profile.pronouns"
required
/>
2021-06-24 00:40:27 +02:00
<div id="emailHelp" class="form-text">
Z.B.: Er/Ihn, Sie/Ihr, Es etc..
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-xs-12">
2021-06-24 00:40:27 +02:00
<label for="freetext" class="form-label">Freitext Vorstellung:</label>
<textarea
class="form-control"
id="freetext"
rows="3"
v-model="profile.freetext"
2021-06-24 00:40:27 +02:00
></textarea>
</div>
<div class="col-12 col-xs-12">
2021-06-24 00:40:27 +02:00
<label for="volunteerwork" class="form-label"
>Ehrentamtliche Arbeit:</label
>
<textarea
class="form-control"
id="volunteerwork"
rows="3"
v-model="profile.volunteerwork"
2021-06-24 00:40:27 +02:00
></textarea>
</div>
</div>
<div>
<label for="skills" class="form-label"
>Deine Fähigkeiten: (Autocomplete)</label
>
2021-06-24 00:40:27 +02:00
<input
autocomplete="off"
2021-06-24 00:40:27 +02:00
type="text"
class="form-control"
id="pronouns"
v-model="searchSkillsText"
@keyup="searchSkills()"
/>
<div class="" v-if="searchSkillResults">
<ul class="list-group">
<li
class="list-group-item"
v-for="result in searchSkillResults"
2021-06-24 00:40:27 +02:00
:key="result.id"
@click="addSkill(result)"
>
{{ result.name }}
</li>
2021-06-24 00:40:27 +02:00
</ul>
</div>
<div>
<span
v-for="skill in profile.skills"
2021-06-24 00:40:27 +02:00
:key="skill.id"
class="badge bg-primary m-2"
>
{{ skill.name }}
<button
type="button"
class="btn-close"
aria-label="Close"
@click="removeSkill(skill.id)"
></button>
</span>
</div>
</div>
<div>
<label for="skills" class="form-label"
>Deine Sprachen: (Autocomplete)</label
>
<input
autocomplete="off"
type="text"
class="form-control"
id="pronouns"
v-model="searchLanguagesText"
@keyup="searchLanguages()"
/>
<div class="" v-if="searchLanguagesResult">
<ul class="list-group">
<li
class="list-group-item"
v-for="result in searchLanguagesResult"
:key="result.id"
@click="addLanguage(result)"
>
{{ result.name }}
</li>
</ul>
</div>
<div>
<span
v-for="language in profile.languages"
:key="language.id"
class="badge bg-primary m-2"
>
{{ language.name }}
<button
type="button"
class="btn-close"
aria-label="Close"
@click="removeLanguage(language.id)"
></button>
</span>
</div>
</div>
2021-06-24 00:40:27 +02:00
<button type="submit" class="btn btn-primary mb-4 mt-4">Speichern</button>
<div
class="alert alert-danger mb-4 mt-4"
role="alert"
v-if="showErrorMessage"
>
Es ist Fehler aufgetreten
</div>
</form>
</div>
2021-06-07 17:41:25 +02:00
</template>
<script>
2021-06-24 00:40:27 +02:00
import axios from "axios";
2021-06-07 17:41:25 +02:00
export default {
name: "profileEdit",
data() {
return {
showErrorMessage: false,
profile: {
nickname: "",
pronouns: "",
volunteerwork: "",
freetext: "",
created: "",
updated: "",
address: {
name: "",
street: "",
house_number: "",
additional: "",
postcode: "",
city: "",
country: "",
},
skills: [],
languages: [],
},
2021-06-24 00:40:27 +02:00
searchLanguagesText: "",
searchLanguagesResult: [],
2021-06-24 00:40:27 +02:00
searchSkillsText: "",
searchSkillResults: [],
};
},
async created() {
try {
const userProfile = await axios.get(
`${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
"user_id"
)}/profile`,
{
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
}
);
console.log(userProfile.data);
this.profile.nickname = userProfile.data.profile.nickname;
this.profile.pronouns = userProfile.data.profile.pronouns;
this.profile.volunteerwork = userProfile.data.profile.volunteerwork;
this.profile.freetext = userProfile.data.profile.freetext;
} catch (error) {
console.error(error);
}
},
methods: {
async submitForm() {
try {
const formSubmitResult = await axios.post(
`${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
"user_id"
)}/profile`,
{
nickname: this.profile.nickname,
pronouns: this.profile.pronouns,
volunteerwork: this.profile.volunteerwork,
freetext: this.profile.freetext,
skills: this.profile.skills,
languages: this.profile.languages,
},
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
console.log(formSubmitResult);
if (formSubmitResult.status === 200) {
// success
} else {
// failure
}
} catch (error) {
console.error();
this.showErrorMessage = true;
}
},
2021-06-24 00:40:27 +02:00
async searchSkills() {
try {
const skillResult = await axios.get(
`${process.env.VUE_APP_API_URL}/skills?search=${this.searchSkillsText}`
);
if (skillResult.status === 200) {
this.searchSkillResults = skillResult.data.skills;
2021-06-24 00:40:27 +02:00
}
} catch (error) {
console.error();
this.showErrorMessage = true;
}
},
addSkill(skill) {
console.log(this.profile.skills.map((item) => item.id));
if (this.profile.skills.map((item) => item.id).includes(skill.id))
return false;
this.profile.skills.push(skill);
this.searchSkillsText = "";
this.searchSkillResults = [];
2021-06-24 00:40:27 +02:00
},
removeSkill(skillId) {
this.profile.skills = this.profile.skills.filter((skill) => {
2021-06-24 00:40:27 +02:00
if (skillId === skill.id) {
return false;
} else {
return true;
}
});
},
async searchLanguages() {
try {
const languageResult = await axios.get(
`${process.env.VUE_APP_API_URL}/languages?search=${this.searchLanguagesText}`
);
if (languageResult.status === 200) {
this.searchLanguagesResult = languageResult.data.languages;
}
} catch (error) {
console.error();
this.showErrorMessage = true;
}
},
addLanguage(language) {
if (this.profile.languages.map((item) => item.id).includes(language.id))
return false;
this.profile.languages.push(language);
this.searchLanguagesText = "";
this.searchLanguagesResult = [];
},
removeLanguage(languageId) {
this.profile.languages = this.profile.languages.filter((language) => {
if (languageId === language.id) {
return false;
} else {
return true;
}
});
},
},
};
2021-06-07 17:41:25 +02:00
</script>