forked from kompetenzinventar/ki-frontend
update profile edit view
This commit is contained in:
@ -5,17 +5,25 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<label for="searchText" class="form-label fw-bold">{{ label }}</label>
|
||||
<div class="row mb-2">
|
||||
<profile-list
|
||||
:values="values"
|
||||
:type="type"
|
||||
:editable="true"
|
||||
@remove-value="removeValue($event)"
|
||||
@update-values="this.$emit('update-values', this.values)"
|
||||
>
|
||||
</profile-list>
|
||||
<div v-bind="$attrs" class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="searchText"
|
||||
maxlength="25"
|
||||
v-model="searchText"
|
||||
@keyup="search()"
|
||||
@input="search()"
|
||||
@keyup.enter="addResult()"
|
||||
/>
|
||||
</div>
|
||||
@ -32,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="" v-if="searchResults">
|
||||
<div v-if="searchResults">
|
||||
<ul class="list-group">
|
||||
<li
|
||||
class="list-group-item"
|
||||
@ -44,24 +52,16 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<profile-list
|
||||
:values="values"
|
||||
:type="type"
|
||||
:editable="true"
|
||||
@remove-value="removeValue($event)"
|
||||
@update-values="this.$emit('update-values', this.values)"
|
||||
>
|
||||
</profile-list>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
import RequestMixin from "@/mixins/request.mixin"
|
||||
import ProfileList from "@/components/ProfileList";
|
||||
import RequestMixin from '@/mixins/request.mixin'
|
||||
import ProfileList from '@/components/ProfileList';
|
||||
|
||||
export default {
|
||||
name: "AutoComplete",
|
||||
name: 'AutoComplete',
|
||||
mixins: [RequestMixin],
|
||||
components: {
|
||||
ProfileList,
|
||||
@ -80,7 +80,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
iconUrl: this.apiUrl,
|
||||
searchText: "",
|
||||
searchText: '',
|
||||
searchResults: [],
|
||||
showErrorMessage: false,
|
||||
};
|
||||
@ -91,6 +91,7 @@ export default {
|
||||
methods: {
|
||||
addResult(result = false) {
|
||||
if (!result) result = this.searchResults[0];
|
||||
|
||||
if (
|
||||
this.values.map((item) => item[this.type].name).includes(result.name)
|
||||
) {
|
||||
@ -101,16 +102,19 @@ export default {
|
||||
let newValue = {
|
||||
profile_id: this.currentUserId,
|
||||
};
|
||||
if (this.type != "contacttype") {
|
||||
|
||||
if (this.type != 'contacttype') {
|
||||
newValue.level = 1;
|
||||
} else {
|
||||
newValue.content = "";
|
||||
newValue.content = '';
|
||||
}
|
||||
|
||||
newValue[this.type] = result;
|
||||
changeValues.unshift(newValue);
|
||||
this.searchText = "";
|
||||
|
||||
this.searchText = '';
|
||||
this.searchResults = [];
|
||||
this.$emit("update-values", changeValues);
|
||||
this.$emit('update-values', changeValues);
|
||||
},
|
||||
removeValue(valueName) {
|
||||
const newValues = this.values.filter((value) => {
|
||||
@ -120,7 +124,7 @@ export default {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
this.$emit("update-values", newValues);
|
||||
this.$emit('update-values', newValues);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -5,24 +5,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<ul>
|
||||
<li v-for="(value, valueKey) in values" :key="value.id">
|
||||
<div class="row m-1">
|
||||
<div class="col">
|
||||
<img
|
||||
style="max-width: 64px"
|
||||
<ul class="list-group list-group-flush">
|
||||
<li
|
||||
class="list-group-item"
|
||||
v-for="(value, valueKey) in values"
|
||||
:key="value.id"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col d-flex align-items-center">
|
||||
<div
|
||||
class="list-icon me-1"
|
||||
:style="{ backgroundImage: `url('${iconBaseUrl + value[type].icon_url}'` }"
|
||||
v-if="value[type].icon_url"
|
||||
:src="iconUrl + value[type].icon_url"
|
||||
:alt="`${value[type].name} Logo`"
|
||||
/>
|
||||
{{ value[type].name }}
|
||||
<div>
|
||||
{{ value[type].name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div v-if="type == 'skill'">
|
||||
<div v-if="editable">
|
||||
<select
|
||||
v-if="editableValues[valueKey]"
|
||||
class="form-select"
|
||||
class="form-select form-select-sm"
|
||||
aria-label="Selektiere dein Level"
|
||||
v-model="editableValues[valueKey].level"
|
||||
@input="$emit('update-values', editableValues)"
|
||||
@ -41,28 +46,32 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
<div v-else-if="type == 'language'">
|
||||
<div v-if="editable">
|
||||
<div v-if="editable">
|
||||
<select
|
||||
v-if="editableValues[valueKey]"
|
||||
class="form-select"
|
||||
aria-label="Selektiere dein Level"
|
||||
v-model="editableValues[valueKey].level"
|
||||
@input="$emit('update-values', editableValues)"
|
||||
>
|
||||
<option
|
||||
v-for="(value, key) in languagesSelection"
|
||||
:value="key"
|
||||
:key="key"
|
||||
<select
|
||||
v-if="editableValues[valueKey]"
|
||||
class="form-select form-select-sm"
|
||||
aria-label="Selektiere dein Level"
|
||||
v-model="editableValues[valueKey].level"
|
||||
@input="$emit('update-values', editableValues)"
|
||||
>
|
||||
{{ value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<option
|
||||
v-for="(value, key) in languagesSelection"
|
||||
:value="key"
|
||||
:key="key"
|
||||
>
|
||||
{{ value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else><span v-if="value.level">({{languagesSelection[value.level]}})</span></div>
|
||||
</div>
|
||||
<div v-else-if="type == 'contacttype'">
|
||||
<div v-if="editable">
|
||||
<input class="form-control" v-model="editableValues[valueKey].content"/>
|
||||
<input
|
||||
class="form-control form-control-sm"
|
||||
maxlength="200"
|
||||
v-model="editableValues[valueKey].content"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span v-if="value[type].name === 'E-Mail'">
|
||||
@ -74,15 +83,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col text-end">
|
||||
<button
|
||||
v-if="editable"
|
||||
type="button"
|
||||
class="btn btn-outline-danger"
|
||||
class="btn btn-sm btn-light"
|
||||
aria-label="Löschen"
|
||||
@click="$emit('removeValue', value[type].name)"
|
||||
>
|
||||
<i class="bi-trash"></i>
|
||||
<i class="text-danger bi bi-x-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -110,7 +119,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
iconUrl: this.apiUrl,
|
||||
iconBaseUrl: this.apiUrl,
|
||||
levelSelection: levelJson,
|
||||
languagesSelection: languagesJson,
|
||||
editableValues: this.values,
|
||||
@ -123,3 +132,13 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scope>
|
||||
.list-icon {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,9 +10,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
{{ title }}
|
||||
</h3>
|
||||
<div class="card w-100">
|
||||
<div class="card-body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<slot name="card-body">
|
||||
<div class="card-body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -37,6 +37,11 @@ export default {
|
||||
}
|
||||
},
|
||||
async search() {
|
||||
if (!this.searchText) {
|
||||
this.searchResults = []
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, {
|
||||
headers: {
|
||||
@ -52,15 +57,16 @@ export default {
|
||||
}
|
||||
|
||||
const responseData = await response.json()
|
||||
this.searchResults = responseData[`${this.type}s`];
|
||||
const searchResults = responseData[`${this.type}s`];
|
||||
|
||||
if (
|
||||
!this.values
|
||||
.map((item) => item[this.type].name.toLowerCase())
|
||||
.includes(this.searchText.toLowerCase())
|
||||
!searchResults.map((item) => item.name.toLowerCase())
|
||||
.includes(this.searchText.toLowerCase())
|
||||
) {
|
||||
this.searchResults.unshift({ name: this.searchText });
|
||||
searchResults.unshift({ name: this.searchText });
|
||||
}
|
||||
|
||||
this.searchResults = searchResults
|
||||
} catch (error) {
|
||||
console.error();
|
||||
this.showErrorMessage = true;
|
||||
|
||||
@ -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