update npm packages

Co-authored-by: scammo <samuel.brinkmann@googlemail.com>
Reviewed-on: #72
Reviewed-by: weeman <weeman@noreply.git.wtf-eg.de>
Co-authored-by: scammo <scammo@noreply.git.wtf-eg.de>
Co-committed-by: scammo <scammo@noreply.git.wtf-eg.de>

.drone.yml

@@ -20,3 +20,6 @@ steps:
       from_secret: "docker_username"
     password:
       from_secret: "docker_password"
+  when:
+    branch:
+      - main

package.json

@@ -7,10 +7,10 @@
     "lint": "vue-cli-service lint"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "^4.5.0",
+    "@vue/cli-plugin-eslint": "^4.5.0",
+    "@vue/cli-plugin-router": "^4.5.0",
+    "@vue/cli-service": "^4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "bootstrap": "^5.0.1",
@@ -20,6 +20,7 @@
     "eslint-plugin-vue": "^7.0.0",
     "sass": "^1.37.5",
     "sass-loader": "^10.2.0",
+    "v-tooltip": "^4.0.0-alpha.1",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.2"

src/assets/language_level.json

@@ -1,6 +1,6 @@
 {
     "1": "Keine Angabe",
-    "2": "Grundkentnisse",
+    "2": "Grundkenntnisse",
     "3": "Gut",
     "4": "Fließend",
     "5": "Muttersprache"

src/components/AutoComplete.vue

@@ -5,21 +5,46 @@ 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">
-      <div class="col">
+  <profile-list
+    :values="values"
+    :type="type"
+    :editable="true"
+    :show-secondary="showSecondary"
+    @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-12 col-md-4 col-lg-3 col-xl-2">
+        <div class="form-control-plaintext form-control-sm">Eintrag hinzufügen:</div>
+      </div>
+      <div class="col-12 col-md-6">
         <input
           autocomplete="off"
           type="text"
-          class="form-control"
+          class="form-control form-control-sm"
           id="searchText"
+          :maxlength="maxlength"
+          :placeholder="placeholder"
           v-model="searchText"
-          @keyup="search()"
+          @input="search()"
           @keyup.enter="addResult()"
         />
+        <div v-if="searchResults">
+          <ul class="list-group">
+            <li
+              class="list-group-item"
+              v-for="result in searchResults"
+              :key="result.id"
+              @click="addResult(result)"
+            >
+              {{ result.name }}
+            </li>
+          </ul>
+        </div>
       </div>
-      <div class="col">
+      <div class="col-md-2">
         <button
           v-if="searchText != ''"
           type="button"
@@ -32,36 +57,16 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         </button>
       </div>
     </div>
-    <div class="" v-if="searchResults">
-      <ul class="list-group">
-        <li
-          class="list-group-item"
-          v-for="result in searchResults"
-          :key="result.id"
-          @click="addResult(result)"
-        >
-          {{ result.name }}
-        </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,
@@ -76,21 +81,33 @@ export default {
     values: {
       type: Array,
     },
+    showSecondary: {
+      type: Boolean,
+      default: true,
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
       iconUrl: this.apiUrl,
-      searchText: "",
+      searchText: '',
       searchResults: [],
       showErrorMessage: false,
     };
   },
   computed: {
-    ...mapState(['currentUserId'])
+    ...mapState(['currentUserId']),
+    maxlength() {
+      return this.type === 'skill' ? 50 : 25
+    }
   },
   methods: {
     addResult(result = false) {
       if (!result) result = this.searchResults[0];
+
       if (
         this.values.map((item) => item[this.type].name).includes(result.name)
       ) {
@@ -101,16 +118,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 +140,7 @@ export default {
           return true;
         }
       });
-      this.$emit("update-values", newValues);
+      this.$emit('update-values', newValues);
     },
   },
 };

src/components/ProfileList.vue

@@ -5,84 +5,72 @@ 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-12 col-md-5 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"
-                aria-label="Selektiere dein Level"
-                v-model="editableValues[valueKey].level"
-                @input="$emit('update-values', editableValues)"
+        <div class="col-10 col-md-5">
+          <div v-if="type == 'skill' && showSecondary">
+            <select
+              class="form-select form-select-sm"
+              aria-label="Selektiere dein Level"
+              v-model="editableValues[valueKey].level"
+              @input="$emit('update-values', editableValues)"
+            >
+              <option
+                v-for="(value, key) in levelSelection"
+                :value="key"
+                :key="key"
               >
-                <option
-                  v-for="(value, key) in levelSelection"
-                  :value="key"
-                  :key="key"
-                >
-                  {{ value.long || value }}
-                </option>
-              </select>
-            </div>
-            <div v-else><span v-if="value.level">({{ levelSelection[value.level] }})</span></div>
+                {{ value.long || value }}
+              </option>
+            </select>
           </div>
           <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)"
+            <select
+              class="form-select form-select-sm"
+              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"
               >
-                <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>
+                {{ value }}
+              </option>
+            </select>
           </div>
           <div v-else-if="type == 'contacttype'">
-            <div v-if="editable">
-              <input class="form-control" v-model="editableValues[valueKey].content"/>
-            </div>
-            <div v-else>
-              <span v-if="value[type].name === 'E-Mail'">
-                <a :href="`mailto:${value.content}`">{{ value.content }}</a>
-              </span>
-              <span v-else>
-                {{ value.content }}
-              </span>
-            </div>
+            <input
+              class="form-control form-control-sm"
+              maxlength="200"
+              v-model="editableValues[valueKey].content"
+            />
           </div>
         </div>
-        <div class="col">
+        <div class="col-2 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>
@@ -103,14 +91,14 @@ export default {
       type: Array,
       required: true,
     },
-    editable: {
+    showSecondary: {
       type: Boolean,
-      default: false,
-    },
+      default: true
+    }
   },
   data() {
     return {
-      iconUrl: this.apiUrl,
+      iconBaseUrl: this.apiUrl,
       levelSelection: levelJson,
       languagesSelection: languagesJson,
       editableValues: this.values,
@@ -123,3 +111,13 @@ export default {
   },
 };
 </script>
+
+<style scope>
+.list-icon {
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 32px;
+  width: 32px;
+}
+</style>

src/components/Skill.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
 <template>
   <div class="skill rounded me-2">
-    <div class="skill__left px-2">
+    <div class="skill__left p-2">
       <div class="skill__icon" :style="{ backgroundImage: iconUrl }"></div>
     </div>
     <div class="skill__right d-flex align-items-center rounded-end px-2">

src/components/profile/Section.vue

@@ -10,9 +10,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       {{ title }}
     </h3>
     <div class="card w-100">
-      <div class="card-body lh-1">
-        <slot></slot>
-      </div>
+      <slot name="card-body">
+        <div class="card-body">
+          <slot></slot>
+        </div>
+      </slot>
     </div>
   </div>
 </template>

src/main.js

@@ -6,12 +6,15 @@ import { createApp } from 'vue/dist/vue.esm-bundler'
 import App from './App.vue'
 import router from './router'
 import store from '@/store'
+import VTooltipPlugin from 'v-tooltip'
 
+import 'v-tooltip/dist/v-tooltip.css'
 import 'bootstrap-icons/font/bootstrap-icons.css'
 import './assets/global.scss'
 
 const app = createApp(App)
 
+app.use(VTooltipPlugin)
 app.use(router)
 app.use(store)
 

src/mixins/request.mixin.js

@@ -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;

src/views/profile/Edit.vue

@@ -5,190 +5,250 @@ 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" v-tooltip="pronounsTooltip"></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-12 col-md-4 mb-3 mb-md-0">
+              <input
+                type="text"
+                class="form-control"
+                id="postcode"
+                maxlength="10"
+                placeholder="Postleitzahl"
+                v-model="profile.address.postcode"
+              />
+            </div>
+            <div class="col-12 col-md-4 mb-3 mb-md-0">
+              <input
+                type="text"
+                class="form-control"
+                id="city"
+                maxlength="25"
+                placeholder="Ort"
+                v-model="profile.address.city"
+              />
+            </div>
+            <div class="col-12 col-md-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"
+              placeholder="z.B. Python, JavaScript, Linux"
+              @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"
+              placeholder="z.B. Deutsch, Englisch, Französisch"
+              @update-values="profile.languages = $event"
+            ></auto-complete>
+          </template>
+      </Section>
+
+        <Section title="Ich suche für mich Projekte/Aufträge in folgenden Bereichen">
+          <template v-slot:card-body>
+            <auto-complete
+              type="skill"
+              label="Ich suche für mich Projekte/Aufträge in folgenden Bereichen"
+              :values="profile.searchtopics"
+              :showSecondary="false"
+              placeholder="z.B. Python, JavaScript, Linux"
+              @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"
+                maxlength="4000"
+                v-model="profile.availability_text"
+              ></textarea>
+            </Section>
+
+            <Section title="Meine Kontaktmöglichkeiten">
+              <template v-slot:card-body>
+                <auto-complete
+                  type="contacttype"
+                  :values="profile.contacts"
+                  placeholder="z.B. E-Mail, Mobiltelefon, Matrix, Web"
+                  @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>
-
-      <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 RequestMixin from "@/mixins/request.mixin"
 
 import AutoComplete from "@/components/AutoComplete";
+import Section from '@/components/profile/Section'
 
 export default {
   name: "profileEdit",
   mixins: [RequestMixin],
   components: {
     AutoComplete,
+    Section,
   },
   data() {
     return {
       showErrorMessage: false,
       showSuccessMessage: false,
+      clearMessagesHandle: null,
       profile: {
         visible: false,
         nickname: "",
         pronouns: "",
         volunteerwork: "",
         freetext: "",
-        availability: "",
+        availability_status: false,
+        availability_hours_per_week: null,
+        availability_text: "",
         address: {
           postcode: "",
           city: "",
@@ -199,10 +259,49 @@ export default {
         searchtopics: [],
         contacts: [],
       },
+      pronounsTooltip: {
+        content:  'Wie möchtest du angesprochen werden?<br>Zum Beispiel "er/ihn" oder "sie/ihre".',
+        html: true
+      }
     };
   },
   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>

src/views/profile/View.vue

@@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
       <Section
         v-if="profile.searchtopics && profile.searchtopics.length > 0"
-        title="Das suche ich">
+        title="Ich suche für mich Projekte/Aufträge in folgenden Bereichen">
         <div style="margin-bottom: -.5rem;">
           <Skill
             class="me-2 mb-2"
@@ -55,10 +55,28 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         </div>
       </Section>
 
-      <Section
-        v-if="profile.availability"
-        title="Verfügbarkeit">
-        <div class="lh-base">{{ profile.availability }}</div>
+      <Section title="Verfügbarkeit">
+        <div class="d-flex align-items-center">
+          <div v-if="profile.availability_status">
+            <i class="bi bi-check-square me-1"></i>
+            ja
+          </div>
+          <div v-else>
+            <i class="bi bi-x-square me-1"></i>
+            nein
+          </div>
+          <span
+            class="ms-3"
+            v-if="profile.availability_status && profile.availability_hours_per_week">
+            ({{ profile.availability_hours_per_week }} Stunden pro Woche)
+          </span>
+        </div>
+        <div v-if="profile.availability_text" class="mt-3">
+          <label class="form-label fw-bold">
+            Anmerkungen
+          </label>
+          <div class="line-break-text">{{ profile.availability_text }}</div>
+        </div>
       </Section>
 
       <Section
@@ -80,11 +98,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         title="Sonstiges">
         <div v-if="profile.freetext" :class="{ 'lh-base': true, 'mb-4': profile.volunteerwork }">
           <h5>Über mich</h5>
-          {{ profile.freetext }}
+           <div class="line-break-text">{{ profile.freetext }}</div>
         </div>
         <div v-if="profile.volunteerwork" class="lh-base">
-          <h5>Ehrentamtliche Arbeit</h5>
-          {{ profile.volunteerwork }}
+          <h5>Ehrenamtliche Arbeit</h5>
+          <div class="line-break-text">{{ profile.volunteerwork }}</div>
         </div>
       </Section>
     </template>
@@ -136,4 +154,7 @@ export default {
 </script>
 
 <style>
+.line-break-text{
+  white-space: pre-line;
+}
 </style>