ki-frontend/src/views/Search.vue

90 lines
2.3 KiB
Vue
Raw Normal View History

2021-09-19 12:55:33 +02:00
<!--
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
SPDX-License-Identifier: AGPL-3.0-or-later
-->
2021-06-07 17:41:25 +02:00
<template>
<div class="container">
2021-06-07 17:41:25 +02:00
<h1>Suche</h1>
<form @submit.prevent="submitSearch()">
<div class="row">
<div class="col">
<input
type="text"
class="form-control"
id="searchText"
v-model="searchText"
/>
2021-06-07 17:41:25 +02:00
</div>
<div class="col">
<button type="submit" class="btn btn-primary mb-4">
2021-08-15 20:35:15 +02:00
Suche starten
</button>
</div>
</div>
2021-06-07 17:41:25 +02:00
</form>
<div
class="alert alert-danger mb-4 mt-4"
role="alert"
v-if="showErrorMessage"
>
Bei der Suche ist ein Fehler aufgetreten
2021-06-07 17:41:25 +02:00
</div>
<div v-if="searchTotal == 0">
Es wurde kein Suchergebnis gefunden.
2021-08-15 20:35:15 +02:00
<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">
<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>
2021-06-07 17:41:25 +02:00
</template>
<script>
2021-08-18 22:59:44 +02:00
import RequestMixin from "@/mixins/request.mixin"
2021-06-07 17:41:25 +02:00
export default {
name: "Search",
2021-08-18 22:59:44 +02:00
mixins: [RequestMixin],
data() {
return {
showErrorMessage: false,
searchText: "",
searchResults: null,
searchTotal: 0,
};
2021-06-07 17:41:25 +02:00
},
created() {
if (this.$route.query.query) this.searchText = this.$route.query.query;
this.submitSearch();
},
};
2021-07-28 21:52:12 +02:00
</script>