Profil ansehen Technisch Abgeschlossen

src/components/AutoComplete.vue

@@ -79,44 +79,23 @@
         </li>
       </ul>
     </div>
-    <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">{{ value.content }}</span>
-
-        <button
-          type="button"
-          class="btn btn-outline-warning m-2"
-          aria-label="Bearbeiten"
-          @click="editValue(value)"
-        >
-          <img
-            src="/img/bootstrap-icons-1.5.0/pencil.svg"
-            alt="Bearbeiten Icon"
-          />
-        </button>
-        <button
-          type="button"
-          class="btn btn-outline-danger m-2"
-          aria-label="Löschen"
-          @click="removeValue(value[type].id)"
-        >
-          <img src="/img/bootstrap-icons-1.5.0/trash.svg" alt="Löschen Icon" />
-        </button>
-      </li>
-    </ul>
+    <profile-list
+      :values="values"
+      :type="type"
+      :editable="true"
+      @edit-value="editValue($event)"
+      @remove-value="removeValue($event)"
+    ></profile-list>
   </div>
 </template>
 <script>
+import ProfileList from "@/components/ProfileList";
+
 export default {
   name: "AutoComplete",
+  components: {
+    ProfileList,
+  },
   props: {
     type: {
       type: String,
@@ -186,16 +165,16 @@ export default {
     },
     editSelectedResult() {
       this.values.map((item) => {
-        if(item[this.type].name == this.selectedResult.name){
+        if (item[this.type].name == this.selectedResult.name) {
           if (this.type != "contacttype") {
-            item.level = this.level
+            item.level = this.level;
           } else {
-            item.content = this.contactContent
+            item.content = this.contactContent;
           }
         }
         return item;
       });
-      
+
       this.$emit("update-values", this.values);
     },
     removeValue(valueId) {