summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2022-10-04 20:55:04 +0200
committerSanto Cariotti <santo@dcariotti.me>2022-10-04 20:55:04 +0200
commit8806bb5f857502eec2ad9132757458d714fff442 (patch)
tree1e182e6fc7a857da1c6a6efafc7ffc4572c5711a
parentc593fb22ac9c572a6f65306424ece315d0809836 (diff)
Add search
-rw-r--r--pages/index.vue11
-rw-r--r--pages/search.vue59
-rw-r--r--pages/settings.vue3
-rw-r--r--store/models.js30
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 });