forked from kompetenzinventar/ki-frontend
95 lines
3.0 KiB
Vue
95 lines
3.0 KiB
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> |