ki-frontend/src/components/AutoComplete.vue

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