ki-frontend/src/views/Search.vue

<template>
  <div class="container">
    <h1>Suche</h1>
    <form @submit.prevent="submitSearch()">
      <div class="row">
        <div class="col">
          <input
            type="text"
            class="form-control"
            id="searchText"
            v-model="searchText"
          />
        </div>
        <div class="col">
          <button type="submit" class="btn btn-primary mb-4">
            Suche Starten
          </button>
        </div>
      </div>
    </form>
    <div
      class="alert alert-danger mb-4 mt-4"
      role="alert"
      v-if="showErrorMessage"
    >
      Bei der Suche ist ein Fehler aufgetreten
    </div>
    <div v-if="!searchResults">Keine Suchergebnisse Gefunden</div>
    <div v-else>
      <div class="row">
        <div class="col-4 p-2" v-for="result in searchResults" :key="result.user_id">
          <router-link :to="{ path: `/s/profile/${result.user_id}` }">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">
                  {{ result.nickname
                  }}<span v-if="result.pronouns"> ({{ result.pronouns }})</span>
                </h5>
                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                <p class="card-text" v-if="result.skills">
                  Fähigkeiten:
                  <span
                    v-for="skill in result.skills"
                    :key="skill.skill.name"
                    >{{ skill.skill.name }} </span
                  >
                </p>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: "Search",
  data() {
    return {
      showErrorMessage: false,
      searchText: "",
      searchResults: null,
    };
  },
  methods: {
    async submitSearch() {
      this.showErrorMessage = false;
      try {
        const result = await this.axios.get(
          `${process.env.VUE_APP_API_URL}/users/profiles`,
          {
            headers: {
              Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
          }
        );
        console.log(result)

        this.searchResults = [
          {"nickname": "peternichtlustig","user_id": 1,"skills": [ { "level": 5, "profile_id": 1, "skill": { "icon_url": "/skills/1/icon", "id": 1, "name": "PHP" } }, { "level": 3, "profile_id": 1, "skill": { "icon_url": "/skills/3/icon", "id": 3, "name": "Python" } } ],},
          {"nickname": "Petra","user_id": 3,"skills": [  { "level": 3, "profile_id": 1, "skill": { "icon_url": "/skills/3/icon", "id": 3, "name": "Python" } } ],},
          {"nickname": "Paul","user_id": 4,"skills": [ { "level": 5, "profile_id": 1, "skill": { "icon_url": "/skills/1/icon", "id": 1, "name": "PHP" }  } ],},
          {"nickname": "Keine Skills Sebastian","user_id": 5,}
        ]
       
      } catch (error) {
        console.error(error);
        this.showErrorMessage = true;
      }
    },
  },
};
</script>