update profile edit view

src/components/AutoComplete.vue

@@ -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);
     },
   },
 };

src/components/ProfileList.vue

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

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">
-        <slot></slot>
-      </div>
+      <slot name="card-body">
+        <div class="card-body">
+          <slot></slot>
+        </div>
+      </slot>
     </div>
   </div>
 </template>