#17 #16

src/components/ProfileList.vue

@@ -1,54 +1,95 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <ul>
-    <li v-for="value in values" :key="value.id">
-      <img
-        style="max-width: 64px"
-        v-if="value[type].icon_url"
-        :src="iconUrl + value[type].icon_url"
-        :alt="`${value[type].name} Logo`"
-      />
-      {{ value[type].name }}
-      <span v-if="value.level">
-        <span v-if="type == 'skill'">({{ levelSelection[value.level] }})</span>
-        <span v-if="type == 'language'">({{ languagesSelection[value.level] }})</span>
-      </span>
-      <span v-if="value.content">:
-          <span v-if="value[type].name === 'E-Mail'">
-              <a :href="`mailto:${value.content}`">{{ value.content }}</a>
-          </span>
-          <span v-else>
-           {{ value.content }}
-          </span>
-        </span>
-
-      <button
-        v-if="this.editable"
-        type="button"
-        class="btn btn-outline-warning m-2"
-        aria-label="Bearbeiten"
-        @click="this.$emit('editValue', value)"
-      >
-        <img
-          src="/img/bootstrap-icons-1.5.0/pencil.svg"
-          alt="Bearbeiten Icon"
-        />
-      </button>
-      <button
-        v-if="this.editable"
-        type="button"
-        class="btn btn-outline-danger m-2"
-        aria-label="Löschen"
-        @click="this.$emit('removeValue', value[type].id)"
-      >
-        <img src="/img/bootstrap-icons-1.5.0/trash.svg" alt="Löschen Icon" />
-      </button>
+    <li v-for="(value, valueKey) in values" :key="value.id">
+      <div class="row m-1">
+        <div class="col">
+          <img
+            style="max-width: 64px"
+            v-if="value[type].icon_url"
+            :src="iconUrl + value[type].icon_url"
+            :alt="`${value[type].name} Logo`"
+          />
+          {{ value[type].name }}
+        </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)"
+              >
+                <option
+                  v-for="(value, key) in levelSelection"
+                  :value="key"
+                  :key="key"
+                >
+                  {{ value }}
+                </option>
+              </select>
+            </div>
+            <div v-else>({{ levelSelection[value.level] }})</div>
+          </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)"
+              >
+                <option
+                  v-for="(value, key) in languagesSelection"
+                  :value="key"
+                  :key="key"
+                >
+                  {{ value }}
+                </option>
+              </select>
+            </div>
+            </div>
+            <div v-else></div>
+          </div>
+          <div v-else-if="value.content">
+            <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>
+          </div>
+        </div>
+        <div class="col">
+          <button
+            v-if="editable"
+            type="button"
+            class="btn btn-outline-danger"
+            aria-label="Löschen"
+            @click="$emit('removeValue', value[type].name)"
+          >
+            <img
+              src="/img/bootstrap-icons-1.5.0/trash.svg"
+              alt="Löschen Icon"
+            />
+          </button>
+        </div>
+      </div>
     </li>
   </ul>
 </template>
 <script>
-import levelJson from "@/assets/skill_level.json"
-import languagesJson from "@/assets/language_level.json"
+import levelJson from "@/assets/skill_level.json";
+import languagesJson from "@/assets/language_level.json";
 
 export default {
   name: "ProfileList",
@@ -58,6 +99,7 @@ export default {
     },
     values: {
       type: Array,
+      required: true,
     },
     editable: {
       type: Boolean,
@@ -69,7 +111,13 @@ export default {
       iconUrl: this.apiUrl,
       levelSelection: levelJson,
       languagesSelection: languagesJson,
-    }
-  }
+      editableValues: this.values,
+    };
+  },
+  watch: {
+    values: function (newVal) {
+      this.editableValues = newVal;
+    },
+  },
 };
 </script>