Add picture wall filtering and bump nuxt

app/lang/de.json

@@ -124,7 +124,11 @@
       "title": "Impressum"
     },
     "pictures": {
-      "head": "Bilderwand"
+      "head": "Bilderwand",
+      "select_team": "Wähle ein Team",
+      "filter_team": "Filtere Bilder nach Teams",
+      "select_quest": "Wähle eine Quest",
+      "filter_quest": "Filtere Bilder nach Quests"
     },
     "profile": {
       "new_password": "Neues Passwort",

app/lang/en.json

@@ -124,7 +124,11 @@
       "title": "Imprint"
     },
     "pictures": {
-      "head": "Picture wall"
+      "head": "Picture wall",
+      "select_team": "Select a team",
+      "filter_team": "Filter pictures by teams",
+      "select_quest": "Select a quest",
+      "filter_quest": "Filter pictures by quests"
     },
     "profile": {
       "new_password": "New password",

app/pages/hunt/[huntSlug]/pictures.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { unique } from '#shared/utils/array';
 import { useTitleStore } from '~/stores/title';
 
 definePageMeta({
@@ -6,7 +7,7 @@ definePageMeta({
 });
 const app = useNuxtApp();
 const { loggedIn } = useUserSession();
-const { t } = useI18n();
+const { t, locale } = useI18n();
 const { tKey, hasKey } = useI18nKey();
 
 const { name, id } = app.$slugData.huntSlug!;
@@ -26,9 +27,24 @@ type Picture = {
     url: string;
   };
 };
-const { data, refresh, error } = await useFetch(`/api/hunt/${id}/diashow`, {
-  transform: (input) => {
-    if (!input || input.quests.length <= 0)
+const { data, refresh, error } = await useFetch(`/api/hunt/${id}/diashow`);
+
+const filter = reactive({
+  quests: [] as number[],
+  teams: [] as number[]
+});
+const base = computed(() => {
+  const quests = data.value?.quests.map(({ answers, ...rest }) => rest) ?? [];
+  const teams = (
+    data.value?.quests.flatMap((q) => q.answers.map((a) => a.team)) ?? []
+  )
+    .filter(unique((a, b) => a.id === b.id))
+    .toSorted((a, b) => a.id - b.id);
+
+  return { quests, teams };
+});
+const cols = computed(() => {
+  if (!data.value || data.value.quests.length <= 0)
     return {
       id: 0,
       name_de: '',
@@ -36,12 +52,14 @@ const { data, refresh, error } = await useFetch(`/api/hunt/${id}/diashow`, {
       cols: [] as Picture[][],
       count: 0
     };
-    const { quests, ...rest } = input;
+  const { quests, ...rest } = data.value;
   const pictures: Picture[] = [];
 
   quests.forEach(({ answers, ...quest }) => {
     answers.forEach(({ team, picture }) => {
       if (!picture) return;
+      if (filter.teams.length > 0 && !filter.teams.includes(team.id)) return;
+      if (filter.quests.length > 0 && !filter.quests.includes(quest.id)) return;
       pictures.push({
         team,
         picture,
@@ -61,7 +79,6 @@ const { data, refresh, error } = await useFetch(`/api/hunt/${id}/diashow`, {
   );
 
   return { ...rest, cols, count: pictures.length };
-  }
 });
 
 useHead({
@@ -78,11 +95,45 @@ titleStore.title = data.value ? tKey(data.value, 'name').value : undefined;
 
 <template>
   <article class="h-dvh w-full">
+    <div class="m-4 flex flex-col gap-4 md:flex-row">
+      <VaSelect
+        v-model="filter.teams"
+        class="w-full"
+        :options="base.teams"
+        multiple
+        value-by="id"
+        text-by="name"
+        :max-visible-options="2"
+        clearable
+        :placeholder="t('page.pictures.select_team')"
+        :label="t('page.pictures.filter_team')"
+      >
+        <template #prependInner>
+          <VaIcon name="groups" />
+        </template>
+      </VaSelect>
+      <VaSelect
+        v-model="filter.quests"
+        class="w-full"
+        :options="base.quests"
+        multiple
+        value-by="id"
+        :text-by="`title_${locale}`"
+        :max-visible-options="2"
+        clearable
+        :placeholder="t('page.pictures.select_quest')"
+        :label="t('page.pictures.filter_quest')"
+      >
+        <template #prependInner>
+          <VaIcon name="question_mark" />
+        </template>
+      </VaSelect>
+    </div>
     <div
-      v-if="data"
+      v-if="cols"
       class="m-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
     >
-      <div v-for="(col, i) in data.cols" :key="i" class="grid gap-4">
+      <div v-for="(col, i) in cols.cols" :key="i" class="grid gap-4">
         <ClickableImage
           v-for="pic in col"
           :key="pic.picture.url"
@@ -92,7 +143,7 @@ titleStore.title = data.value ? tKey(data.value, 'name').value : undefined;
         />
       </div>
       <VaAlert
-        v-if="data.count <= 0"
+        v-if="cols.count <= 0"
         color="warning"
         class="sm:col-span-2 md:col-span-3 lg:col-span-4"
         >{{ t('page.common.no_pictures') }}</VaAlert

package.json

@@ -33,7 +33,7 @@
     "eslint": "^9.0.0",
     "h3-zod": "^0.5.3",
     "minio": "^8.0.5",
-    "nuxt": "^4.0.1",
+    "nuxt": "4.1.0",
     "nuxt-auth-utils": "^0.5.22",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.5.0",

shared/utils/array.ts

@@ -0,0 +1,11 @@
+/**
+ * Returns a filter lambda to be used in array.filter() to only allow the
+ * first occurrence of duplicate values.
+ * @param isEqual Custom equality check, defaults to `a === b`
+ */
+export function unique<E>(
+  isEqual: (a: E, b: E) => boolean = (a, b) => a === b
+) {
+  return (self: E, index: number, arr: ReadonlyArray<E>) =>
+    arr.findIndex((v) => isEqual(v, self)) === index;
+}