ki-frontend/src/views/Search.vue

<!--
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>

SPDX-License-Identifier: AGPL-3.0-or-later
-->

<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="searchTotal == 0">
      Es wurde kein Suchergebnis gefunden.
      <p v-if="searchText !== ''">Probiere eine andere Suche.</p>
    </div>
    <div v-else>
      <div class="row">
        <div
          class="col-4 p-2"
          v-for="result in searchResults"
          :key="result.user_id"
        >
          <router-link
            class="text-decoration-none"
            :to="{ path: `/s/profile/${result.user_id}` }"
          >
            <div class="card search-card">
              <div class="card-body">
                <h5 class="card-title">
                  {{ result.nickname}}
                  <span v-if="result.pronouns"> ({{ result.pronouns }})</span>
                </h5>
                <p
                  class="card-text"
                  v-if="result.skills && result.skills.length > 0"
                >
                  Fähigkeiten:
                  <span v-for="(skill, index) in result.skills" :key="index"
                    >
                    {{ skill.skill.name}}<span v-if="index != result.skills.length - 1">, </span>
                  </span>
                </p>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import RequestMixin from "@/mixins/request.mixin";

export default {
  name: "Search",
  mixins: [RequestMixin],
  data() {
    return {
      showErrorMessage: false,
      searchText: "",
      searchResults: null,
      searchTotal: 0,
    };
  },
  created() {
    if (this.$route.query.query) this.searchText = this.$route.query.query;
    this.submitSearch();
  },
};
</script>