Profil ansehen Technisch Abgeschlossen

src/components/ProfileList.vue

@@ -0,0 +1,66 @@
+<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">({{ value.level }})</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>
+  </ul>
+</template>
+<script>
+export default {
+  name: "ProfileList",
+  props: {
+    type: {
+      type: String,
+    },
+    values: {
+      type: Array,
+    },
+    editable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      iconUrl: process.env.VUE_APP_API_URL
+    }
+  }
+};
+</script>