diff options
| -rw-r--r-- | pages/index.vue | 11 | ||||
| -rw-r--r-- | pages/search.vue | 59 | ||||
| -rw-r--r-- | pages/settings.vue | 3 | ||||
| -rw-r--r-- | store/models.js | 30 |
4 files changed, 103 insertions, 0 deletions
diff --git a/pages/index.vue b/pages/index.vue index 956e4f1..27c157a 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -2,6 +2,17 @@ .mx-auto.w-90p.py-6(class="sm:px-6 lg:px-8 md:max-w-7xl") model-loading(v-if="isLoading") section(v-else) + form.mb-5.flex(action="/search") + input.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1.mr-2( + name="q" + class="focus:border-green-500 focus:ring-green-500 sm:text-sm dark:bg-gray-600 dark:text-gray-50 dark:border-gray-700" + placeholder="Type some text to find the best models..." + ) + button.inline-flex.justify-center.rounded-md.border.border-transparent.bg-green-600.py-2.px-4.text-sm.font-medium.text-white.shadow-sm( + type="submit" + class="hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2" + ) + | Explore .grid.grid-cols-1.gap-4(class="md:grid-cols-4") model-box-card( v-for="model in models" diff --git a/pages/search.vue b/pages/search.vue new file mode 100644 index 0000000..1c09e3b --- /dev/null +++ b/pages/search.vue @@ -0,0 +1,59 @@ +<template lang="pug"> + .mx-auto.w-90p.py-6(class="sm:px-6 lg:px-8 md:max-w-7xl") + h1.text-3xl.font-bold(class="dark:text-white") Results for: {{ q }} + model-loading(v-if="isLoading") + section(v-else) + form.my-5.flex(action="/search") + input.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1.mr-2( + name="q" + class="focus:border-green-500 focus:ring-green-500 sm:text-sm dark:bg-gray-600 dark:text-gray-50 dark:border-gray-700" + placeholder="Type some text to find the best models..." + :value="q" + ) + button.inline-flex.justify-center.rounded-md.border.border-transparent.bg-green-600.py-2.px-4.text-sm.font-medium.text-white.shadow-sm( + type="submit" + class="hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2" + ) + | Explore + .grid.grid-cols-1.gap-4(class="md:grid-cols-4") + model-box-card( + v-for="model in models" + :key="model.id" + :model="model" + ) +</template> + +<script> +import ModelLoading from "@/components/ModelLoading.vue"; +import ModelBoxCard from "@/components/ModelBoxCard.vue"; + +import { mapGetters } from "vuex"; + +export default { + name: "SearchPage", + layout: "default", + head() { + return { + title: this.q + " · Verden", + }; + }, + data() { + return { + q: "", + }; + }, + components: { + "model-loading": ModelLoading, + "model-box-card": ModelBoxCard, + }, + computed: { + ...mapGetters(["isLoading"]), + ...mapGetters("auth", ["isLogged"]), + ...mapGetters("models", ["models"]), + }, + created() { + this.q = this.$route.query["q"]; + this.$store.dispatch("models/filter", { q: this.q }); + }, +}; +</script> diff --git a/pages/settings.vue b/pages/settings.vue index aeaafa4..5a74ced 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -92,6 +92,9 @@ export default { ...mapGetters(["isLoading"]), ...mapGetters("auth", ["isLogged", "me"]), }, + head: { + title: "Settings · Verden", + }, data() { return { form: {}, diff --git a/store/models.js b/store/models.js index 890ba8c..c884aa6 100644 --- a/store/models.js +++ b/store/models.js @@ -49,6 +49,36 @@ export const actions = { return res; }, + // Filter models + async filter({ commit }, data) { + commit("loadingStatus", true, { root: true }); + let res = { status: 0, data: null }; + let api = this.$config.api; + + const page = data.page ? data.page : 0; + + await fetch(`${api}/v1/models/filter?page=${page}`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ q: data.q }), + }) + .then(async (response) => { + res.data = await response.json(); + res.status = response.status; + if (res.status == 200) { + commit("saveModels", res.data); + } + }) + .catch((e) => { + res.status = e.status; + }); + + commit("loadingStatus", false, { root: true }); + + return res; + }, // Find a model by its id async findModel({ commit }, id) { commit("loadingStatus", true, { root: true }); |