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,42 +27,58 @@ type Picture = {
     url: string;
   };
 };
-const { data, refresh, error } = await useFetch(`/api/hunt/${id}/diashow`, {
-  transform: (input) => {
-    if (!input || input.quests.length <= 0)
-      return {
-        id: 0,
-        name_de: '',
-        name_en: '',
-        cols: [] as Picture[][],
-        count: 0
-      };
-    const { quests, ...rest } = input;
-    const pictures: Picture[] = [];
+const { data, refresh, error } = await useFetch(`/api/hunt/${id}/diashow`);
 
-    quests.forEach(({ answers, ...quest }) => {
-      answers.forEach(({ team, picture }) => {
-        if (!picture) return;
-        pictures.push({
-          team,
-          picture,
-          quest
-        });
+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: '',
+      name_en: '',
+      cols: [] as Picture[][],
+      count: 0
+    };
+  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,
+        quest
       });
     });
+  });
 
-    pictures.sort(() => Math.random() - 0.5);
+  pictures.sort(() => Math.random() - 0.5);
 
-    const cols = pictures.reduce(
-      (c, p, i) => {
-        c[i % 4]!.push(p);
-        return c;
-      },
-      new Array(4).fill(0).map(() => [] as Picture[])
-    );
+  const cols = pictures.reduce(
+    (c, p, i) => {
+      c[i % 4]!.push(p);
+      return c;
+    },
+    new Array(4).fill(0).map(() => [] as Picture[])
+  );
 
-    return { ...rest, cols, count: pictures.length };
-  }
+  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;
+}