mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-02-06 09:55:50 +00:00
d74d2072ba
- SearchResources is a feature component that handles communication with the backend and fetches the search results - Those results are passed to SearchableInput which displays the results in a ds-select dropdown and handles interacting with them - SearchInput renders the SearchHeading, SearchPost, and HcUser generic components - Would love to make the SearchableInput more generic and reusable, or create a new reusable component for this, but I think this will happen just when we migrate the Search.vue from the styleguide Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
52 lines
1.0 KiB
Vue
52 lines
1.0 KiB
Vue
<template>
|
|
<searchable-input
|
|
data-test="search-resources"
|
|
id="search-resources"
|
|
:loading="pending"
|
|
:options="searchResults"
|
|
@query="query"
|
|
@clearSearch="clear"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import { findResourcesQuery } from '~/graphql/Search.js'
|
|
import SearchableInput from '~/components/generic/SearchableInput/SearchableInput.vue'
|
|
|
|
export default {
|
|
components: {
|
|
SearchableInput,
|
|
},
|
|
data() {
|
|
return {
|
|
pending: false,
|
|
searchResults: [],
|
|
}
|
|
},
|
|
methods: {
|
|
async query(value) {
|
|
this.pending = true
|
|
try {
|
|
const {
|
|
data: { findResources },
|
|
} = await this.$apollo.query({
|
|
query: findResourcesQuery,
|
|
variables: {
|
|
query: value,
|
|
},
|
|
})
|
|
this.searchResults = findResources
|
|
} catch (error) {
|
|
this.searchResults = []
|
|
} finally {
|
|
this.pending = false
|
|
}
|
|
},
|
|
clear() {
|
|
this.pending = false
|
|
this.searchResults = []
|
|
},
|
|
},
|
|
}
|
|
</script>
|