60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<template>
|
|
<div class="search">
|
|
<ul class="search-results" v-if="results">
|
|
<li v-for="[identity, result] in Object.entries(results)" :key="identity">
|
|
<SearchResult :result="result" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import { construct } from "@/utils";
|
|
import SearchResult from "@/components/SearchResult.vue";
|
|
import { ListingResult } from "@/types/base";
|
|
import useSWRV from "swrv";
|
|
import { fetcher } from "../utils";
|
|
import { useRoute } from "vue-router";
|
|
|
|
export default defineComponent({
|
|
name: "Search",
|
|
components: { SearchResult },
|
|
props: {
|
|
searchQuery: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
setup() {
|
|
const route = useRoute();
|
|
const { data } = useSWRV<ListingResult | unknown>(() => {
|
|
let query = route.query.q as string | undefined;
|
|
if (query && query !== "") {
|
|
const ueQuery = construct("(matches ? ? (contains #))", [query]);
|
|
return `/api/obj?query=${ueQuery}`;
|
|
}
|
|
return null;
|
|
}, fetcher);
|
|
|
|
return {
|
|
results: data,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.search-results {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
list-style: none;
|
|
|
|
li {
|
|
display: block;
|
|
width: calc(100% / 6);
|
|
}
|
|
}
|
|
</style>
|