ki-frontend/src/components/AutoComplete.vue

<template>
  <div>
    <label for="searchText" class="form-label fw-bold">{{ label }}</label>
    <div class="row mb-2">
      <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="selectedResult">
          <div v-if="type != 'contacttype'">
            <select
              class="form-select"
              aria-label="Selektiere dein Level"
              v-model="level"
            >
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">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="selectedResult && !selectedResult.edit"
          type="button"
          class="btn btn-outline-success"
          aria-label="Hinzufügen"
          @click="addSelectedResult()"
        >
          <img
            src="/img/bootstrap-icons-1.5.0/plus-lg.svg"
            alt="Hinzufügen Icon"
          />
          Hinzufügen
        </button>
        <button
          v-if="selectedResult && selectedResult.edit"
          type="button"
          class="btn btn-outline-success"
          aria-label="Hinzufügen"
          @click="editSelectedResult()"
        >
          Änderung Speichern
        </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 &&
              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
          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>
  </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: null,
    };
  },
  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 = null;
      this.level = 1;
      this.$emit("update-values", changeValues);
    },
    editSelectedResult() {
      this.values.map((item) => {
        if(item[this.type].name == this.selectedResult.name){
          if (this.type != "contacttype") {
            item.level = this.level
          } else {
            item.content = this.contactContent
          }
        }
        return item;
      });
      
      this.$emit("update-values", this.values);
    },
    removeValue(valueId) {
      const newValues = this.values.filter((value) => {
        if (valueId === value[this.type].id) {
          return false;
        } else {
          return true;
        }
      });
      this.$emit("update-values", newValues);
    },
    editValue(value) {
      this.searchResults = [value[this.type]];
      this.selectedResult = {
        ...value[this.type],
        level: value.level,
        edit: true,
      };

      if (this.type != "contacttype") {
        this.level = value.level;
      } else {
        this.contactContent = value.content;
      }
      this.level = value.level;
    },
  },
};
</script>