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

226 lines
6.2 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()">
2021-07-12 19:12:51 +02:00
<div class="row">
<div class="col">
<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>
2021-07-12 19:12:51 +02:00
</div>
<div class="col">
<input type="radio" id="true" :value="true" v-model="profile.visible" />
<label for="true" class="m-2 fw-bold"> Öffentlich</label>
2021-07-12 19:12:51 +02:00
</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.
</div>
<div class="row">
<div class="col-6 col-xs-12">
<label for="nickname" class="form-label fw-bold">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="pronouns" class="form-label fw-bold">Pronomen:</label>
<input
type="text"
class="form-control"
id="pronouns"
v-model="profile.pronouns"
/>
<div for="pronouns" class="form-text">
2021-06-24 00:40:27 +02:00
Z.B.: Er/Ihn, Sie/Ihr, Es etc..
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-xs-12">
<label for="freetext" class="form-label fw-bold">Freitext Vorstellung:</label>
2021-06-24 00:40:27 +02:00
<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">
<label for="volunteerwork" class="form-label fw-bold"
2021-06-24 00:40:27 +02:00
>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>
2021-07-12 18:32:17 +02:00
<auto-complete
type="skill"
label="Deine Fähigkeiten (Autocomplete)"
:values="profile.skills"
@update-values="profile.skills = $event"
></auto-complete>
<auto-complete
type="language"
label="Deine Sprachen (Autocomplete)"
:values="profile.languages"
@update-values="profile.languages = $event"
></auto-complete>
<auto-complete
type="skill"
label="Ich Suche"
:values="profile.searchtopics"
@update-values="profile.searchtopics = $event"
></auto-complete>
2021-07-12 19:12:51 +02:00
<div class="col-12 col-xs-12">
<label for="availability" class="form-label fw-bold"
2021-07-12 19:12:51 +02:00
>Ich bin für Anfragen verfügbar:</label
>
<textarea
class="form-control"
id="availability"
rows="3"
v-model="profile.availability"
></textarea>
</div>
2021-07-12 18:32:17 +02:00
<auto-complete
type="contacttype"
label="Kontaktmöglichkeiten"
:values="profile.contacts"
@update-values="profile.contacts = $event"
></auto-complete>
<div class="row">
<div class="col">
2021-07-26 17:10:28 +02:00
<label for="pzl" class="form-label fw-bold">PLZ</label>
2021-07-12 18:32:17 +02:00
<input
type="text"
class="form-control"
id="pzl"
v-model="profile.address.postcode"
/>
</div>
2021-07-12 18:32:17 +02:00
<div class="col">
<label for="city" class="form-label fw-bold">Stadt</label>
2021-07-12 18:32:17 +02:00
<input
type="text"
class="form-control"
id="city"
2021-07-12 18:32:17 +02:00
v-model="profile.address.city"
/>
</div>
2021-07-12 18:32:17 +02:00
<div class="col">
<label for="country" class="form-label fw-bold">Land</label>
2021-07-12 18:32:17 +02:00
<input
type="text"
class="form-control"
id="country"
2021-07-12 18:32:17 +02:00
v-model="profile.address.country"
/>
</div>
2021-07-28 21:52:12 +02:00
</div>
<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"
v-if="showErrorMessage"
>
Es ist Fehler aufgetreten
</div>
<div
class="alert alert-success mb-4 mt-4"
role="alert"
v-if="showSuccessMessage"
>
Deine Änderungen wurden erfolgreich gespeichert
</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-07-12 18:32:17 +02:00
import AutoComplete from "@/components/AutoComplete";
2021-07-26 17:10:28 +02:00
2021-06-07 17:41:25 +02:00
export default {
name: "profileEdit",
2021-07-12 18:32:17 +02:00
components: {
AutoComplete,
},
data() {
return {
showErrorMessage: false,
showSuccessMessage: false,
profile: {
2021-07-12 19:12:51 +02:00
visible: false,
nickname: "",
pronouns: "",
volunteerwork: "",
freetext: "",
2021-07-12 19:12:51 +02:00
availability: "",
address: {
postcode: "",
city: "",
country: "",
},
skills: [],
languages: [],
2021-07-12 18:32:17 +02:00
searchtopics: [],
contacts: [],
},
};
},
async created() {
try {
const userProfile = await axios.get(
2021-07-28 21:52:12 +02:00
`${this.apiUrl}/users/${localStorage.getItem(
"user_id"
)}/profile`,
{
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
}
);
2021-07-12 19:12:51 +02:00
this.profile = userProfile.data.profile;
} catch (error) {
console.error(error);
}
},
methods: {
async submitForm() {
try {
const formSubmitResult = await axios.post(
2021-07-28 21:52:12 +02:00
`${this.apiUrl}/users/${localStorage.getItem(
"user_id"
)}/profile`,
2021-07-12 18:32:17 +02:00
this.profile,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
if (formSubmitResult.status === 200) {
// success
this.showSuccessMessage = true;
} else {
// failure
this.showErrorMessage = true;
}
} catch (error) {
console.error(error);
this.showErrorMessage = true;
}
2021-07-12 18:32:17 +02:00
}
},
};
2021-07-28 21:52:12 +02:00
</script>