update profile edit view
This commit is contained in:
@ -5,186 +5,216 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Profil bearbeiten</h1>
|
||||
<form @submit.prevent="submitFormEdit()">
|
||||
<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 class="bg-wtf py-3 mb-4">
|
||||
<div class="container">
|
||||
<h3 class="text-white text-center mb-0">Profil bearbeiten</h3>
|
||||
</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="container">
|
||||
<form @submit.prevent="submitFormEdit()">
|
||||
<Section title="Grunddaten">
|
||||
<div class="mb-4">
|
||||
<div class="form-check form-switch">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
v-model="profile.visible"
|
||||
id="visibility"
|
||||
>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="visibility">
|
||||
Profil für angemeldete Benutzer sichtbar
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Nickname</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="nickname"
|
||||
maxlength="25"
|
||||
v-model="profile.nickname"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">
|
||||
Pronomen
|
||||
<i class="bi bi-info-circle" title="ToDo: Tooltip"></i>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="pronouns"
|
||||
maxlength="25"
|
||||
v-model="profile.pronouns"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="form-label">Anschrift</label>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="postcode"
|
||||
maxlength="10"
|
||||
placeholder="Postleitzahl"
|
||||
v-model="profile.address.postcode"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="city"
|
||||
maxlength="25"
|
||||
placeholder="Ort"
|
||||
v-model="profile.address.city"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="country"
|
||||
maxlength="25"
|
||||
placeholder="Land"
|
||||
v-model="profile.address.country"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="Meine Fähigkeiten">
|
||||
<template v-slot:card-body>
|
||||
<auto-complete
|
||||
type="skill"
|
||||
:values="profile.skills"
|
||||
@update-values="profile.skills = $event"
|
||||
></auto-complete>
|
||||
</template>
|
||||
</Section>
|
||||
|
||||
<Section title="Meine Sprachkenntnisse">
|
||||
<template v-slot:card-body>
|
||||
<auto-complete
|
||||
type="language"
|
||||
:values="profile.languages"
|
||||
@update-values="profile.languages = $event"
|
||||
></auto-complete>
|
||||
</template>
|
||||
</Section>
|
||||
|
||||
<Section title="Ich suche">
|
||||
<template v-slot:card-body>
|
||||
<auto-complete
|
||||
type="skill"
|
||||
label="Ich suche"
|
||||
:values="profile.searchtopics"
|
||||
@update-values="profile.searchtopics = $event"
|
||||
></auto-complete>
|
||||
</template>
|
||||
</Section>
|
||||
|
||||
<Section title="Verfügbarkeit">
|
||||
<div class="form-check mb-3">
|
||||
<input
|
||||
v-model="profile.availability_status"
|
||||
class="form-check-input me-2"
|
||||
type="checkbox"
|
||||
id="availability_status">
|
||||
<label class="form-check-label" for="availability_status">
|
||||
Ich bin aktuell verfügbar
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-3" v-if="profile.availability_status">
|
||||
<label class="form-label">
|
||||
Stunden pro Woche
|
||||
</label>
|
||||
<input
|
||||
v-model="profile.availability_hours_per_week"
|
||||
type="number"
|
||||
min="0"
|
||||
max="168"
|
||||
class="form-control">
|
||||
</div>
|
||||
<label for="availability" class="form-label">
|
||||
Anmerkungen
|
||||
</label>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="availability"
|
||||
rows="3"
|
||||
v-model="profile.availability_text"
|
||||
></textarea>
|
||||
</Section>
|
||||
|
||||
<Section title="Meine Kontaktmöglichkeiten">
|
||||
<template v-slot:card-body>
|
||||
<auto-complete
|
||||
type="contacttype"
|
||||
:values="profile.contacts"
|
||||
@update-values="profile.contacts = $event"
|
||||
></auto-complete>
|
||||
</template>
|
||||
</Section>
|
||||
|
||||
<Section title="Sonstiges">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Über mich</label>
|
||||
<textarea
|
||||
class="form-control"
|
||||
rows="3"
|
||||
maxlength="4000"
|
||||
v-model="profile.freetext"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Ehrenamtliche Arbeit</label>
|
||||
<textarea
|
||||
class="form-control"
|
||||
rows="3"
|
||||
maxlength="4000"
|
||||
v-model="profile.volunteerwork"
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
<input type="submit" class="d-none">
|
||||
</form>
|
||||
</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 class="savebar bg-white border-top py-3">
|
||||
<div class="container d-flex align-items-center justify-content-end">
|
||||
<div
|
||||
class="text-danger"
|
||||
v-if="showErrorMessage"
|
||||
>
|
||||
<i class="bi bi-bug"></i>
|
||||
Beim Speichern ist ein Fehler aufgetreten.
|
||||
</div>
|
||||
<div
|
||||
class="text-success"
|
||||
v-if="showSuccessMessage"
|
||||
>
|
||||
<i class="bi bi-check-lg"></i>
|
||||
Gespeichert
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary ms-3"
|
||||
@click="submitFormEdit()"
|
||||
>
|
||||
Speichern
|
||||
</button>
|
||||
</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>
|
||||
|
||||
<Section title="Verfügbarkeit">
|
||||
<div class="form-check mb-3">
|
||||
<input
|
||||
v-model="profile.availability_status"
|
||||
class="form-check-input me-2"
|
||||
type="checkbox"
|
||||
id="availability_status">
|
||||
<label class="form-check-label" for="availability_status">
|
||||
Ich bin aktuell verfügbar
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-3" v-if="profile.availability_status">
|
||||
<label class="form-label">
|
||||
Stunden pro Woche
|
||||
</label>
|
||||
<input
|
||||
v-model="profile.availability_hours_per_week"
|
||||
type="number"
|
||||
class="form-control">
|
||||
</div>
|
||||
<label for="availability" class="form-label">
|
||||
Anmerkungen
|
||||
</label>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="availability"
|
||||
rows="3"
|
||||
v-model="profile.availability_text"
|
||||
></textarea>
|
||||
</Section>
|
||||
|
||||
<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 RequestMixin from "@/mixins/request.mixin"
|
||||
@ -203,6 +233,7 @@ export default {
|
||||
return {
|
||||
showErrorMessage: false,
|
||||
showSuccessMessage: false,
|
||||
clearMessagesHandle: null,
|
||||
profile: {
|
||||
visible: false,
|
||||
nickname: "",
|
||||
@ -227,5 +258,40 @@ export default {
|
||||
async created() {
|
||||
await this.initEditPage();
|
||||
},
|
||||
unmounted() {
|
||||
this.cancelClearMessages()
|
||||
},
|
||||
methods: {
|
||||
cancelClearMessages() {
|
||||
if (this.clearMessagesHandle) {
|
||||
window.clearTimeout(this.clearMessagesHandle)
|
||||
}
|
||||
},
|
||||
scheduleClearMessages() {
|
||||
this.cancelClearMessages()
|
||||
this.clearMessagesHandle = window.setTimeout(() => {
|
||||
this.showErrorMessage = false
|
||||
this.showSuccessMessage = false
|
||||
}, 2500)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showErrorMessage(curr) {
|
||||
if (curr) {
|
||||
this.scheduleClearMessages()
|
||||
}
|
||||
},
|
||||
showSuccessMessage(curr) {
|
||||
if (curr) {
|
||||
this.scheduleClearMessages()
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.savebar {
|
||||
bottom: 0;
|
||||
position: sticky;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user