57 lines
1.8 KiB
Vue
57 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
|
|
import { useRoute } from "vue-router";
|
|
import { computed } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import LearningPathSearchField from "@/components/LearningPathSearchField.vue";
|
|
import { useSearchLearningPathQuery } from "@/queries/learning-paths.ts";
|
|
import UsingQueryResult from "@/components/UsingQueryResult.vue";
|
|
import LearningPathsGrid from "@/components/LearningPathsGrid.vue";
|
|
|
|
const route = useRoute();
|
|
const { t, locale } = useI18n();
|
|
|
|
const query = computed(() => route.query.query as string | undefined);
|
|
|
|
const searchQueryResults = useSearchLearningPathQuery(query, locale);
|
|
</script>
|
|
|
|
<template>
|
|
<v-container class="search-page-container">
|
|
<v-row justify="center" class="mb-6">
|
|
<v-col cols="12" sm="8" md="6" lg="4">
|
|
<learning-path-search-field class="search-field" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row justify="center">
|
|
<v-col cols="12">
|
|
<using-query-result
|
|
:query-result="searchQueryResults"
|
|
v-slot="{ data }: { data: LearningPath[] }"
|
|
>
|
|
<learning-paths-grid :learning-paths="data" />
|
|
</using-query-result>
|
|
|
|
<div v-if="!query" class="empty-state-container">
|
|
<v-empty-state
|
|
icon="mdi-magnify"
|
|
:title="t('enterSearchTerm')"
|
|
:text="t('enterSearchTermDescription')"
|
|
/>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.search-page-container {
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.search-field {
|
|
max-width: 100%;
|
|
}
|
|
</style>
|