funktionalität edit

src/components/AutoComplete.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <label for="searchText" class="form-label">{{ label }}</label>
+    <div class="row">
+      <div class="col">
+        <input
+          autocomplete="off"
+          type="text"
+          class="form-control"
+          id="searchText"
+          v-model="searchText"
+          @keyup="search()"
+        />
+      </div>
+      <div class="col">
+        <div v-if="searchResults.length != 0">
+          <div v-if="type != 'contacttype'">
+            <select
+              class="form-select"
+              aria-label="Selektiere dein Level"
+              v-model="level"
+            >
+              <option value="1" selected>1</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="3">4</option>
+            </select>
+          </div>
+          <div v-else>
+
+        <input
+          type="text"
+          class="form-control"
+          id="contactContent"
+          v-model="contactContent"
+        />
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <button
+          v-if="searchResults.length != 0"
+          type="button"
+          class="btn btn-success"
+          aria-label="Löschen"
+          @click="addSelectedResult()"
+        >
+          Hinzufügen
+        </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"
+          :class="{
+            'bg-info': selectedResult.id && result.id === selectedResult.id,
+          }"
+          @click="selectedResult = result"
+        >
+          {{ result.name }}
+        </li>
+      </ul>
+    </div>
+    <ul>
+      <li v-for="value in values" :key="value.id">
+        <img v-if="value[type].icon_url" :src="iconUrl + value[type].icon_url" />
+        {{ value[type].name }} <span v-if="value.level">({{ value.level }})</span>
+        <span v-if="value.content">{{value.content}}</span>
+        <button
+          type="button"
+          class="btn-close"
+          aria-label="Löschen"
+          @click="removeValue(value[type].id)"
+        ></button>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: "AutoComplete",
+  props: {
+    type: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    values: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      iconUrl: process.env.VUE_APP_API_URL,
+      searchText: "",
+      contactContent: "",
+      searchResults: [],
+      showErrorMessage: false,
+      level: 1,
+      selectedResult: {},
+    };
+  },
+  methods: {
+    async search() {
+      try {
+        const request = await this.axios.get(
+          `${process.env.VUE_APP_API_URL}/${this.type}s?search=${this.searchText}`,
+          {
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+          }
+        );
+        if (request.status === 200) {
+          this.searchResults = request.data[`${this.type}s`];
+        }
+      } catch (error) {
+        console.error();
+        this.showErrorMessage = true;
+      }
+    },
+    addSelectedResult() {
+      if (this.values.map((item) => item[this.type].id).includes(this.selectedResult.id))
+        return false;
+      let changeValues = Object.assign(this.values);
+      let newValue = {
+        profile_id: localStorage.getItem("user_id")
+      }
+      if(this.type != "contacttype"){
+          newValue.level = this.level
+      }else{
+          newValue.content = this.contactContent
+      }
+      newValue[this.type] = this.selectedResult
+      changeValues.push(newValue);
+      this.searchText = "";
+      this.searchResults = [];
+      this.selectedResult = {};
+      this.level = 1;
+      this.$emit("update-values", changeValues);
+    },
+    removeValue(valueId) {
+      const newValues = this.values.filter((value) => {
+        if (valueId === value[this.type].id) {
+          return false;
+        } else {
+          return true;
+        }
+      });
+      this.$emit("update-values", newValues);
+    },
+  },
+};
+</script>