feat: add meilisearch search engine

.eslintrc.json

@@ -31,6 +31,7 @@
     "vue/no-multiple-template-root": "off",
     "vue/component-api-style": ["error", ["script-setup"]],
     "vue/define-emits-declaration": ["error", "type-based"],
+    "vue/no-v-for-template-key": "off",
     "vue/block-lang": [
       "error",
       {

components/NavBar/NavBar.vue

@@ -57,28 +57,32 @@ const menuItems: MenuItem[] = [
       },
     ],
   },
-  { name: "Foto's", icon: "material-symbols:camera", target: "/foto" },
+  {
+    name: "Foto's",
+    icon: "material-symbols:camera",
+    target: "https://proteus-eretes.nl/fotos",
+  },
   {
     name: "Leden",
     icon: "material-symbols:person",
-    target: "/lid",
+    target: "/leden",
     children: [
       {
         name: "Groepen",
         icon: "material-symbols:group",
-        target: "/groups",
+        target: "/groepen",
       },
       {
         name: "Lebberlijst",
         icon: "ph:graph",
-        target: "/lebberlijst",
+        target: "https://proteus-eretes.nl/lebberlijst",
       },
     ],
   },
   {
     name: "Evenementen",
     icon: "material-symbols:calendar-today",
-    target: "/event",
+    target: "https://proteus-eretes.nl/eetlijst",
   },
 ];
 </script>

components/SearchBox.vue

@@ -0,0 +1,111 @@
+<template>
+  <AisInstantSearch
+    :search-client="client"
+    :index-name="indexName"
+    :class-names="{ 'ais-InstantSearch': 'card p-5' }"
+  >
+    <AisSearchBox
+      :placeholder="placeholder || 'Zoeken...'"
+      submit-title="Zoek"
+      autofocus
+      class="pb-5"
+    >
+      <template #default="{ currentRefinement, isSearchStalled, refine }">
+        <input
+          type="search"
+          :value="currentRefinement"
+          class="input input-bordered w-full"
+          @input="refine($event.currentTarget.value)"
+        />
+        <span :hidden="!isSearchStalled">Loading...</span>
+      </template>
+    </AisSearchBox>
+
+    <AisHits>
+      <template #default="{ items, sendEvent }">
+        <slot :items="items" :send-event="sendEvent" />
+      </template>
+    </AisHits>
+
+    <AisPagination>
+      <template
+        #default="{
+          currentRefinement,
+          nbPages,
+          isFirstPage,
+          isLastPage,
+          refine,
+        }"
+      >
+        <div class="btn-group w-full justify-center py-5">
+          <button :disabled="isFirstPage" class="btn" @click="refine(0)">
+            ‹‹
+          </button>
+          <button
+            :disabled="isFirstPage"
+            class="btn"
+            @click="refine(currentRefinement - 1)"
+          >
+            ‹
+          </button>
+          <button class="btn btn-active">
+            {{ currentRefinement + 1 }}
+          </button>
+          <button
+            :disabled="isLastPage"
+            class="btn"
+            @click="refine(currentRefinement + 1)"
+          >
+            ›
+          </button>
+          <button :disabled="isLastPage" class="btn" @click="refine(nbPages)">
+            ››
+          </button>
+        </div>
+      </template>
+    </AisPagination>
+
+    <AisHitsPerPage :items="resultsPerPageSettings">
+      <template #default="{ items, refine }">
+        <select
+          class="select select-bordered m-5"
+          @change="refine($event.target.value)"
+        >
+          <option
+            v-for="item in items"
+            :key="item.value"
+            :value="item.value"
+            :selected="item.isRefined"
+          >
+            {{ item.label }}
+          </option>
+        </select>
+      </template>
+    </AisHitsPerPage>
+  </AisInstantSearch>
+</template>
+
+<script setup lang="ts">
+import {
+  AisSearchBox,
+  AisInstantSearch,
+  AisHits,
+  AisPagination,
+  AisHitsPerPage,
+} from "vue-instantsearch/vue3/es";
+import { useMeilisearchClient } from "#imports";
+
+const client = useMeilisearchClient();
+
+defineProps<{
+  indexName: string;
+  placeholder?: string;
+}>();
+
+const resultsPerPageSettings = [
+  { value: 10, label: "10", default: true },
+  { value: 20, label: "20" },
+  { value: 50, label: "50" },
+  { value: 100, label: "100" },
+];
+</script>

components/SideMenu.vue

@@ -0,0 +1,38 @@
+<template>
+  <ul class="menu">
+    <li
+      v-for="item in items"
+      :key="item.title"
+      :class="
+        !item.to
+          ? 'menu-title'
+          : $route.path.includes(item.to || null)
+          ? 'bordered'
+          : ''
+      "
+    >
+      <span v-if="!item.to">{{ item.title }}</span>
+      <NuxtLink v-else :to="item.to">
+        <span>{{ item.title }}</span>
+        <span
+          v-if="item.badge"
+          class="indicator-item indicator-middle badge badge-secondary"
+        >
+          {{ item.badge }}
+        </span>
+      </NuxtLink>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+interface SideMenuItem {
+  title: string;
+  to?: string;
+  badge?: string;
+}
+
+defineProps<{
+  items: SideMenuItem[];
+}>();
+</script>

composables/useDateFormatter.ts

@@ -0,0 +1,13 @@
+export const useDateFormatter = () => {
+  return function toDateString(dateTimeString?: string | Date): string {
+    if (!dateTimeString) return "-";
+    const date =
+      typeof dateTimeString === "string"
+        ? new Date(dateTimeString)
+        : dateTimeString;
+    const day = date.getDate();
+    const month = date.getMonth() + 1;
+    const year = date.getFullYear();
+    return `${day}-${month}-${year}`;
+  };
+};

nuxt.config.ts

@@ -15,7 +15,16 @@ export default defineNuxtConfig({
       link: [{ rel: "icon", href: "/favicon.png" }],
     },
   },
-  modules: ["@nuxtjs/tailwindcss", "nuxt-icon"],
+  modules: ["@nuxtjs/tailwindcss", "nuxt-icon", "nuxt-meilisearch"],
+  meilisearch: {
+    instantSearch: {
+      theme: "satellite",
+    },
+    adminApiKey: "MASTER_KEY",
+    searchApiKey: "MASTER_KEY",
+    hostUrl: "http://localhost:7700",
+    serverSideUsage: true,
+  },
   typescript: {
     strict: true,
   },

package.json

@@ -38,6 +38,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "nuxt": "^3.0.0",
     "nuxt-icon": "^0.1.7",
+    "nuxt-meilisearch": "^0.1.6",
     "postcss-custom-properties": "^13.0.0",
     "prettier": "^2.7.1",
     "prisma": "^4.6.1",
@@ -48,6 +49,7 @@
   "dependencies": {
     "daisyui": "^2.38.0",
     "superstruct": "^1.0.3",
-    "validator": "^13.7.0"
+    "validator": "^13.7.0",
+    "vue-instantsearch": "^4.6.0"
   }
 }

pages/groepen.vue

@@ -0,0 +1,18 @@
+<template>
+  <TwoColumn title="Groepen">
+    <template #content>
+      <SideMenu :items="items" />
+    </template>
+    <NuxtPage />
+  </TwoColumn>
+</template>
+
+<script lang="ts" setup>
+import SideMenu from "~/components/SideMenu.vue";
+
+const items = [
+  { title: "Zoeken", to: "/groepen/zoeken" },
+  { title: "Mijn Groepen", to: "/groepen/mijn-groepen" },
+  { title: "Groep Maken", to: "/groepen/admin/aanmaken" },
+];
+</script>

pages/groepen/[id].vue

@@ -0,0 +1,47 @@
+<template>
+  <h1 class="text-4xl text-primary font-bold mb-4">{{ group.name }}</h1>
+  <div class="overflow-x-auto shadow"></div>
+  <table class="table w-full">
+    <tbody>
+      <tr>
+        <td>ID</td>
+        <td>{{ group.id }}</td>
+      </tr>
+      <tr>
+        <td>Beschrijving</td>
+        <td>{{ group.description }}</td>
+      </tr>
+      <tr>
+        <td>Sinds</td>
+        <td>{{ dateFormatter(group.startDate) }}</td>
+      </tr>
+      <tr>
+        <td>Tot</td>
+        <td>{{ dateFormatter(group.stopDate) }}</td>
+      </tr>
+      <tr>
+        <td>Parent Group</td>
+        <td>{{ group.parentId ?? "Geen" }}</td>
+      </tr>
+      <tr>
+        <td>Contactinformatie</td>
+        <td>{{ group.contacts }}</td>
+      </tr>
+      <tr>
+        <td>Permissions</td>
+        <td>{{ group.permissions }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+const dateFormatter = useDateFormatter();
+const route = useRoute();
+
+const { data: group } = await useFetch<
+  Awaited<
+    ReturnType<typeof import("~~/server/api/groups/[id]/index.get").default>
+  >
+>("/api/groups/" + route.params.id);
+</script>

pages/groepen/mijn-groepen.vue

@@ -0,0 +1,37 @@
+<template>
+  <h1 class="text-4xl text-primary font-bold mb-4">Groepen</h1>
+  <div class="overflow-x-auto shadow">
+    <div class="p-2 text-center border-2 border-red-300">
+      ---=== Nieuwe endpoint voor mijn-groepen moet nog gemaakt worden ===---
+    </div>
+    <table class="table w-full">
+      <thead>
+        <tr>
+          <th>Naam</th>
+          <th>Beschrijving</th>
+          <th>Sinds</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="group in groups"
+          :key="group.id"
+          class="hover"
+          @click="navigateTo(`/groepen/${group.id}`)"
+        >
+          <td>{{ group.name }}</td>
+          <td>{{ group.description }}</td>
+          <td>{{ dateFormatter(group.startDate) }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+const dateFormatter = useDateFormatter();
+
+const { data: groups } = await useFetch<
+  Awaited<ReturnType<typeof import("~~/server/api/groups/index.get").default>>
+>("/api/groups");
+</script>