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

<script setup lang="ts">
import { sluggy } from '#imports';
import { unique } from '#shared/utils/array';
import { useTitleStore } from '~/stores/title';

definePageMeta({
  layout: 'full'
});
const app = useNuxtApp();
const { loggedIn } = useUserSession();
const { t, locale } = useI18n();
const localePath = useLocalePath();
const { tKey, hasKey } = useI18nKey();

const { name, id } = app.$slugData.huntSlug!;

const titleStore = useTitleStore();

type Picture = {
  quest: { id: number; title_de: string; title_en: string };
  team: {
    name: string;
    id: number;
  };
  picture: {
    creator: {
      name: string;
    };
    url: string;
  };
};
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: '',
      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);

  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 };
});

useHead({
  title: t('layouts.two_title', {
    title: hasKey(data.value, 'name') ? tKey(data.value!, 'name').value : name,
    subtitle: t('page.pictures.head')
  })
});

watch(loggedIn, () => refresh());

titleStore.title = data.value ? tKey(data.value, 'name').value : undefined;
</script>

<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="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 cols.cols" :key="i" class="grid gap-4">
        <ClickableImage
          v-for="pic in col"
          :key="pic.picture.url"
          :src="pic.picture.url"
          class="h-auto max-w-full rounded-lg"
          :title="`${tKey(pic.quest, 'title').value} — ${pic.team.name} — ${pic.picture.creator.name}`"
        />
      </div>
      <VaAlert
        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
      >
    </div>
    <div
      v-else-if="error"
      class="flex h-full w-full flex-col items-center justify-center text-center text-2xl"
    >
      <VaAlert color="danger" class="w-[90%]">{{
        t('page.common.not_revealed')
      }}</VaAlert>
      <VaAlert v-if="error.statusCode !== 403" color="danger" class="w-[90%]">{{
        error
      }}</VaAlert
      ><VaButton
        icon="arrow_back"
        :to="localePath(`/hunt/${sluggy($nuxt.$slugData.huntSlug!)}`)"
        >{{ t('page.common.back_to_hunt') }}</VaButton
      >
    </div>
    <div
      v-else
      class="flex h-full w-full flex-col items-center justify-center text-center text-2xl"
    >
      <VaAlert color="danger" class="w-[90%]">{{
        t('page.common.not_revealed')
      }}</VaAlert
      ><VaButton
        icon="arrow_back"
        :to="localePath(`/hunt/${sluggy($nuxt.$slugData.huntSlug!)}`)"
        >{{ t('page.common.back_to_hunt') }}</VaButton
      >
    </div>
  </article>
</template>

<style scoped></style>