kompetenzinventar/ki-frontend
7
5
Fork 6
Code Issues Pull Requests 12 Packages Projects Releases 1 Wiki Activity

Suche mit richtigen API Endpunkt, Suche in der Navbar, kleinigkeiten
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
scammo
2021-07-27 12:36:10 +02:00
parent 6e9e10068e
commit d87d68a53c
3 changed files with 122 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/Search.vue
View File

@ -25,11 +25,21 @@
>
Bei der Suche ist ein Fehler aufgetreten
</div>
<div v-if="!searchResults">Keine Suchergebnisse Gefunden</div>
<div v-if="searchTotal == 0">
Es wurde kein Suchergebnis gefunden.
<p v-if="searchText !== ''">Am besten suchst du weniger Spezifisch.</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 :to="{ path: `/s/profile/${result.user_id}` }">
<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">
@ -39,11 +49,9 @@
<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
>
<span v-for="skill in result.skills" :key="skill.skill.name"
>{{ skill.skill.name }}
</span>
</p>
</div>
</div>
@ -54,7 +62,6 @@
</div>
</template>
<script>
export default {
name: "Search",
data() {
@ -62,29 +69,28 @@ export default {
showErrorMessage: false,
searchText: "",
searchResults: null,
searchTotal: 0,
};
},
created() {
if (this.$route.query.query) this.searchText = this.$route.query.query;
this.submitSearch();
},
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,}
]
let url = `${process.env.VUE_APP_API_URL}/users/profiles`;
if (this.searchText != "") {
url += `?nickname=${this.searchText}`;
}
const result = await this.axios.get(url, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
this.searchResults = result.data.profiles;
this.searchTotal = result.data.total;
} catch (error) {
console.error(error);
this.showErrorMessage = true;