<!-- SPDX-License-Identifier: AGPL-3.0-or-later --> <template> <div class="container"> <h1>Profil bearbeiten</h1> <form @submit.prevent="submitForm()"> <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> </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> </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"> 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">Vorstellung:</label> <textarea class="form-control" id="freetext" rows="3" v-model="profile.freetext" ></textarea> </div> <div class="col-12 col-xs-12"> <label for="volunteerwork" class="form-label fw-bold" >Ehrenamtliche Arbeit:</label > <textarea class="form-control" id="volunteerwork" rows="3" v-model="profile.volunteerwork" ></textarea> </div> </div> <auto-complete type="skill" label="Deine Fähigkeiten" :values="profile.skills" @update-values="profile.skills = $event" ></auto-complete> <auto-complete type="language" label="Deine Sprachen" :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> <div class="col-12 col-xs-12"> <label for="availability" class="form-label fw-bold" >Ich bin für Anfragen verfügbar:</label > <textarea class="form-control" id="availability" rows="3" v-model="profile.availability" ></textarea> </div> <auto-complete type="contacttype" label="Kontaktmöglichkeiten" :values="profile.contacts" @update-values="profile.contacts = $event" ></auto-complete> <div class="row"> <div class="col"> <label for="pzl" class="form-label fw-bold">PLZ</label> <input type="text" class="form-control" id="pzl" v-model="profile.address.postcode" /> </div> <div class="col"> <label for="city" class="form-label fw-bold">Stadt</label> <input type="text" class="form-control" id="city" v-model="profile.address.city" /> </div> <div class="col"> <label for="country" class="form-label fw-bold">Land</label> <input type="text" class="form-control" id="country" v-model="profile.address.country" /> </div> </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> </template> <script> import axios from "axios"; import AutoComplete from "@/components/AutoComplete"; export default { name: "profileEdit", components: { AutoComplete, }, data() { return { showErrorMessage: false, showSuccessMessage: false, profile: { visible: false, nickname: "", pronouns: "", volunteerwork: "", freetext: "", availability: "", address: { postcode: "", city: "", country: "", }, skills: [], languages: [], searchtopics: [], contacts: [], }, }; }, async created() { try { const userProfile = await axios.get( `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`, { headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }, } ); this.profile = userProfile.data.profile; } catch (error) { console.error(error); } }, methods: { async submitForm() { try { const formSubmitResult = await axios.post( `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`, 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; } }, }, }; </script>