refactor(hunt): Style hunt admin

2026-08-03 01:57:35 +02:00
parent 2d8669708d
commit 8e5e60da87
11 changed files with 556 additions and 463 deletions
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { fullDate } from '~~/server/utils/date';
+
+const { loggedIn } = useUserSession();
+const { data, pending, refresh } = await useFetch('/api/home');
+const { t, d } = useI18n();
+const localePath = useLocalePath();
+const { tKey, tSluggy } = useI18nKey();
+watch(loggedIn, () => refresh());
+</script>
+
+<template>
+  <div class="mx-auto max-w-6xl">
+    <VaButton
+      icon="refresh"
+      :disabled="pending"
+      class="mb-6"
+      @click="refresh"
+      >{{ t('layouts.refresh') }}</VaButton
+    >
+
+    <div v-if="data">
+      <div v-if="data.own !== null">
+        <h2 class="mb-6 text-2xl font-bold">
+          {{ t('page.home.joined_hunts') }}
+        </h2>
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <VaCard
+            v-for="hunt in data.own"
+            :key="hunt.id"
+            stripe
+            :to="localePath(`/hunt/${tSluggy(hunt).value}`)"
+          >
+            <VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
+
+            <ClickableImage
+              v-if="hunt.picture"
+              :src="hunt.picture?.url"
+              :title="tKey(hunt, 'name').value"
+            />
+            <VaCardContent>
+              <h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
+              <p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
+              <VaDivider />
+              <div class="flex flex-col gap-2">
+                <p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
+                <p v-if="hunt.start">
+                  {{
+                    t('page.home.start', {
+                      start: d(hunt.start, fullDate)
+                    })
+                  }}
+                </p>
+                <p v-if="hunt.end">
+                  {{
+                    t('page.home.end', {
+                      start: d(hunt.end, fullDate)
+                    })
+                  }}
+                </p>
+                <p>
+                  {{ t('page.home.n_teams_joined', hunt._count.teams) }}
+                </p>
+              </div>
+            </VaCardContent>
+          </VaCard>
+          <VaCard v-if="data.own.length <= 0">
+            <VaCardTitle>{{ t('page.home.no_hunt_joined') }}</VaCardTitle>
+            <VaCardContent>{{
+              t('page.home.click_hunt_below_to_join')
+            }}</VaCardContent>
+          </VaCard>
+        </div>
+      </div>
+      <div v-else class="text-center">
+        <p class="text-secondary mb-4">
+          {{ t('page.landing.login_to_see_hunts') }}
+        </p>
+        <VaButton color="info" icon="login" :to="localePath(`/login`)">{{
+          t('page.home.login_first')
+        }}</VaButton>
+      </div>
+      <div class="mt-12">
+        <VaDivider />
+        <h2 class="mb-6 mt-8 text-2xl font-bold">
+          {{ t('page.home.open_to_join') }}
+        </h2>
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <VaCard
+            v-for="hunt in data.others"
+            :key="hunt.id"
+            :to="localePath(`/hunt/${tSluggy(hunt).value}`)"
+          >
+            <VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
+            <ClickableImage
+              v-if="hunt.picture"
+              :src="hunt.picture?.url"
+              :title="tKey(hunt, 'name').value"
+            />
+            <VaCardContent>
+              <h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
+              <p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
+              <VaDivider />
+              <div class="flex flex-col gap-2">
+                <p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
+                <p v-if="hunt.start">
+                  {{
+                    t('page.home.start', {
+                      start: d(hunt.start, fullDate)
+                    })
+                  }}
+                </p>
+                <p v-if="hunt.end">
+                  {{
+                    t('page.home.end', {
+                      start: d(hunt.end, fullDate)
+                    })
+                  }}
+                </p>
+                <p>
+                  {{ t('page.home.n_teams_joined', hunt._count.teams) }}
+                </p>
+              </div>
+            </VaCardContent>
+          </VaCard>
+          <VaCard v-if="data.others.length <= 0">
+            <VaCardTitle>{{ t('page.home.no_hunt_created') }}</VaCardTitle>
+            <VaCardContent>{{ t('page.home.new_hunts_soon') }}</VaCardContent>
+          </VaCard>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>