Pascal/pichunt
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use composition for translation

Browse Source
This commit is contained in:
Pascal
2025-08-14 19:56:49 +02:00
parent 900414727f
commit 24f933fbaa
12 changed files with 111 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/hunt/[huntSlug]/[questSlug]/index.vue
+8 -8
View File
@@ -11,7 +11,7 @@ const app = useNuxtApp();
const { user } = useUserSession();
const { huntSlug, questSlug } = app.$slugData;
const { t, locale } = useI18n();
const { t, locale, d } = useI18n();
const titleStore = useTitleStore();
@@ -110,7 +110,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
icon="refresh"
:loading="pending"
color="success"
>{{ $t('layouts.refresh') }}</VaButton
>{{ t('layouts.refresh') }}</VaButton
>
<VaButton
v-if="user && user.role === 'ADMIN'"
@@ -146,7 +146,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
{{ data.textRequired ? '❓' : '❔' }}: {{ data.question }}
</p>
<p v-if="data.question">
🖋: {{ $t(`enums.text_type.${data.textType}`) }}
🖋: {{ t(`enums.text_type.${data.textType}`) }}
</p>
<p v-if="data.extraText">
<span class="uppercase">Extra points:</span> {{ data.extraText }}
@@ -163,7 +163,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
<span v-if="data.answer.review.reviewer" class="text-sm">
by {{ data.answer.review.reviewer.name }} at
{{
$d(data.answer.updatedAt, {
d(data.answer.updatedAt, {
dateStyle: 'medium',
timeStyle: 'medium'
})
@@ -193,7 +193,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
clearable-icon="replay"
:type="textType[data.textType]"
:messages="[
$t(`enums.text_type.${data.textType}`),
t(`enums.text_type.${data.textType}`),
data.textRequired ? 'Required Answer' : undefined
]"
>
@@ -227,7 +227,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
<p v-if="data.answer?.updatedAt">
Last update:
{{
$d(
d(
data.answer.updatedAt,
{
dateStyle: 'medium',
@@ -249,7 +249,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
v-if="submitError.length > 0"
color="danger"
class="w-full text-center"
>{{ $t(submitError) }}</VaAlert
>{{ t(submitError) }}</VaAlert
>
<VaButton
v-if="!data.answer?.final"
@@ -273,7 +273,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
</div>
</div>
<div v-if="error" class="mt-8 text-3xl">
{{ $t(parseError(error)) }}
{{ t(parseError(error)) }}
</div>
</template>
app/pages/hunt/[huntSlug]/admin.vue
+2 -2
View File
@@ -9,7 +9,7 @@ definePageMeta({
const app = useNuxtApp();
const { loggedIn } = useUserSession();
const localePath = useLocalePath();
const { t } = useI18n();
const { t, d } = useI18n();
const router = useRouter();
const { confirm } = useModal();
@@ -227,7 +227,7 @@ async function addUser() {
<p>
Last update:
{{
$d(data.updatedAt, {
d(data.updatedAt, {
dateStyle: 'medium',
timeStyle: 'medium'
})
app/pages/hunt/[huntSlug]/index.vue
+11 -4
View File
@@ -5,7 +5,7 @@ import { useTitleStore } from '~/stores/title';
const app = useNuxtApp();
const { loggedIn } = useUserSession();
const localePath = useLocalePath();
const { t } = useI18n();
const { t, d } = useI18n();
const { name, id } = app.$slugData.huntSlug!;
@@ -43,6 +43,12 @@ async function invite() {
<template>
<h1 class="text-2xl">
{{ data?.name || name }}
<VaButton
icon="replay"
@click="refresh"
:disabled="pending"
title="Refresh"
/>
<VaButtonGroup v-if="data?.isMember">
<VaButton
color="danger"
@@ -78,7 +84,7 @@ async function invite() {
<p v-if="data.start">
Start:
{{
$d(data.start, {
d(data.start, {
dateStyle: 'medium',
timeStyle: 'medium'
})
@@ -87,7 +93,7 @@ async function invite() {
<p v-if="data.end">
End:
{{
$d(data.end, {
d(data.end, {
dateStyle: 'medium',
timeStyle: 'medium'
})
@@ -176,6 +182,7 @@ async function invite() {
<VaCardActions v-if="data.isMember">
<VaButton
color="danger"
:icon="(quest.unreviewed || 0) > 0 ? 'priority_high' : undefined"
:to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}/admin`)"
>Admin ({{ quest.unreviewed || 0 }} unreviewed)</VaButton
>
@@ -192,7 +199,7 @@ async function invite() {
</div>
<div v-if="error">
<h1 class="mt-8 text-3xl">{{ $t(parseError(error)) }}</h1>
<h1 class="mt-8 text-3xl">{{ t(parseError(error)) }}</h1>
<VaButton icon="arrow_back" :to="$localePath(`/`)">Back home</VaButton>
</div>
</template>
app/pages/hunt/[huntSlug]/showcase.vue
+24 -23
View File
@@ -7,6 +7,7 @@ definePageMeta({
// middleware: ['admin'],
layout: 'full'
});
const { t, d } = useI18n();
const app = useNuxtApp();
const { name, id } = app.$slugData.huntSlug!;
@@ -51,18 +52,18 @@ const columns = leaderboardColumns.map((c) =>
<div
class="flex flex-col items-center justify-center gap-8 bg-green-300 text-center"
>
<h1 class="text-7xl">{{ $t('page.showcase.showcase_for') }}</h1>
<h1 class="text-7xl">{{ t('page.showcase.showcase_for') }}</h1>
<h1 class="text-9xl font-bold">{{ data.name || name }}</h1>
<p v-if="data.start || data.end" class="flex flex-row gap-4 text-4xl">
<span v-if="data.start">{{
$d(data.start, {
d(data.start, {
dateStyle: 'medium',
timeStyle: 'medium'
})
}}</span
><span v-if="data.start && data.end"> – </span
><span v-if="data.end">{{
$d(data.end, {
d(data.end, {
dateStyle: 'medium',
timeStyle: 'medium'
})
@@ -73,32 +74,32 @@ const columns = leaderboardColumns.map((c) =>
<section id="numbers">
<div class="grid grid-cols-3 gap-4 bg-red-100 p-4">
<NumberCard
:title="$t('page.showcase.crew')"
:title="t('page.showcase.crew')"
:count="data._count.members + 1"
icon="support_agent"
/>
<NumberCard
:title="$t('page.showcase.quests')"
:title="t('page.showcase.quests')"
:count="data._count.quests"
icon="home"
/>
<NumberCard
:title="$t('page.showcase.users')"
:title="t('page.showcase.users')"
:count="data.userCount"
icon="person"
/>
<NumberCard
:title="$t('page.showcase.teams')"
:title="t('page.showcase.teams')"
:count="data._count.teams"
icon="groups"
/>
<NumberCard
:title="$t('page.showcase.total_points')"
:title="t('page.showcase.total_points')"
:count="data.totalScore"
icon="star"
/>
<NumberCard
:title="$t('page.showcase.pictures')"
:title="t('page.showcase.pictures')"
:count="data.pictureCount"
icon="photo"
/>
@@ -141,7 +142,7 @@ const columns = leaderboardColumns.map((c) =>
<section id="leaderboard" v-if="data.leaderboard.length > 3">
<div class="flex flex-col gap-4 bg-indigo-100">
<h1 class="mt-8 text-center text-6xl">
{{ $t('page.showcase.leaderboard') }}
{{ t('page.showcase.leaderboard') }}
</h1>
<VaDataTable
class="h-full text-2xl"
@@ -152,7 +153,7 @@ const columns = leaderboardColumns.map((c) =>
:columns="leaderboardColumns"
>
<template v-for="col in columns" #[col]
><span>{{ $t(`page.showcase.table.${col}`) }}</span></template
><span>{{ t(`page.showcase.table.${col}`) }}</span></template
>
<template #cell(place)="{ rowIndex }">
<strong>{{ rowIndex + 4 }}</strong>
@@ -164,18 +165,18 @@ const columns = leaderboardColumns.map((c) =>
<div class="place bg-[#AD8A56]">
<div class="place-left">
<VaIcon name="looks_3" size="10rem" />
<h2>{{ $t('page.showcase.third_place') }}</h2>
<h2>{{ t('page.showcase.third_place') }}</h2>
</div>
<div class="place-right">
<h3>{{ data.leaderboard[2].name }}</h3>
<p>{{ data.leaderboard[2].description }}</p>
<NumberCard
:title="$t('page.showcase.points')"
:title="t('page.showcase.points')"
:count="data.leaderboard[2].score"
icon="star"
/>
<NumberCard
:title="$t('page.showcase.answers')"
:title="t('page.showcase.answers')"
:count="data.leaderboard[2].answers"
icon="question_mark"
/>
@@ -186,18 +187,18 @@ const columns = leaderboardColumns.map((c) =>
<div class="place bg-[#B4B4B4]">
<div class="place-left">
<VaIcon name="looks_two" size="10rem" />
<h2>{{ $t('page.showcase.second_place') }}</h2>
<h2>{{ t('page.showcase.second_place') }}</h2>
</div>
<div class="place-right">
<h3>{{ data.leaderboard[1].name }}</h3>
<p>{{ data.leaderboard[1].description }}</p>
<NumberCard
:title="$t('page.showcase.points')"
:title="t('page.showcase.points')"
:count="data.leaderboard[1].score"
icon="star"
/>
<NumberCard
:title="$t('page.showcase.answers')"
:title="t('page.showcase.answers')"
:count="data.leaderboard[1].answers"
icon="question_mark"
/>
@@ -208,7 +209,7 @@ const columns = leaderboardColumns.map((c) =>
<div class="place bg-[#C9B037]">
<div class="place-left">
<VaIcon name="looks_one" size="10rem" />
<h2>{{ $t('page.showcase.first_place') }}</h2>
<h2>{{ t('page.showcase.first_place') }}</h2>
</div>
<div class="place-right">
<h3 class="bg-white text-white">{{ data.leaderboard[0].name }}</h3>
@@ -216,12 +217,12 @@ const columns = leaderboardColumns.map((c) =>
{{ data.leaderboard[0].description }}
</p>
<NumberCard
:title="$t('page.showcase.points')"
:title="t('page.showcase.points')"
:count="data.leaderboard[0].score"
icon="star"
/>
<NumberCard
:title="$t('page.showcase.answers')"
:title="t('page.showcase.answers')"
:count="data.leaderboard[0].answers"
icon="question_mark"
/>
@@ -232,18 +233,18 @@ const columns = leaderboardColumns.map((c) =>
<div class="place bg-[#C9B037]">
<div class="place-left">
<VaIcon name="workspace_premium" size="10rem" />
<h2>{{ $t('page.showcase.first_place') }}</h2>
<h2>{{ t('page.showcase.first_place') }}</h2>
</div>
<div class="place-right">
<h3>{{ data.leaderboard[0].name }}</h3>
<p>{{ data.leaderboard[0].description }}</p>
<NumberCard
:title="$t('page.showcase.points')"
:title="t('page.showcase.points')"
:count="data.leaderboard[0].score"
icon="star"
/>
<NumberCard
:title="$t('page.showcase.answers')"
:title="t('page.showcase.answers')"
:count="data.leaderboard[0].answers"
icon="question_mark"
/>
app/pages/index.vue
+22 -22
View File
@@ -1,20 +1,20 @@
<script setup lang="ts">
const { loggedIn } = useUserSession();
const { data, pending, refresh } = await useFetch('/api/home');
const { t, d } = useI18n();
watch(loggedIn, () => refresh());
</script>
<template>
<h1 class="text-primary text-3xl">{{ $t('hello') }}</h1>
<h1 class="text-primary text-3xl">{{ t('hello') }}</h1>
<VaButton icon="refresh" @click="refresh" :disabled="pending">{{
$t('layouts.refresh')
t('layouts.refresh')
}}</VaButton>
<div v-if="data">
<div v-if="data.own !== null">
<h2 class="my-4 text-2xl font-bold">
{{ $t('page.home.joined_hunts') }}
{{ t('page.home.joined_hunts') }}
</h2>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<VaCard
@@ -35,11 +35,11 @@ watch(loggedIn, () => refresh());
{{ hunt.description }}
<VaDivider />
<div class="flex flex-col gap-2">
<p>{{ $t('page.home.n_quests', hunt._count.quests) }}</p>
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
<p v-if="hunt.start">
{{
$t('page.home.start', {
start: $d(hunt.start, {
t('page.home.start', {
start: d(hunt.start, {
dateStyle: 'medium',
timeStyle: 'medium'
})
@@ -48,35 +48,35 @@ watch(loggedIn, () => refresh());
</p>
<p v-if="hunt.end">
{{
$t('page.home.end', {
start: $d(hunt.end, {
t('page.home.end', {
start: d(hunt.end, {
dateStyle: 'medium',
timeStyle: 'medium'
})
})
}}
</p>
<p>{{ $t('page.home.n_teams_joined', hunt._count.teams) }}</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>
<VaCardTitle>{{ t('page.home.no_hunt_joined') }}</VaCardTitle>
<VaCardContent>{{
$t('page.home.click_hunt_below_to_join')
t('page.home.click_hunt_below_to_join')
}}</VaCardContent>
</VaCard>
</div>
</div>
<div v-else>
<VaButton color="info" icon="login" :to="$localePath(`/login`)">{{
$t('page.home.login_first')
t('page.home.login_first')
}}</VaButton>
</div>
<div class="mt-8">
<VaDivider />
<h2 class="my-4 text-2xl font-bold">
{{ $t('page.home.open_to_join') }}
{{ t('page.home.open_to_join') }}
</h2>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<VaCard
@@ -95,11 +95,11 @@ watch(loggedIn, () => refresh());
{{ hunt.description }}
<VaDivider />
<div class="flex flex-col gap-2">
<p>{{ $t('page.home.n_quests', hunt._count.quests) }}</p>
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
<p v-if="hunt.start">
{{
$t('page.home.start', {
start: $d(hunt.start, {
t('page.home.start', {
start: d(hunt.start, {
dateStyle: 'medium',
timeStyle: 'medium'
})
@@ -108,21 +108,21 @@ watch(loggedIn, () => refresh());
</p>
<p v-if="hunt.end">
{{
$t('page.home.end', {
start: $d(hunt.end, {
t('page.home.end', {
start: d(hunt.end, {
dateStyle: 'medium',
timeStyle: 'medium'
})
})
}}
</p>
<p>{{ $t('page.home.n_teams_joined', hunt._count.teams) }}</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>
<VaCardTitle>{{ t('page.home.no_hunt_created') }}</VaCardTitle>
<VaCardContent>{{ t('page.home.new_hunts_soon') }}</VaCardContent>
</VaCard>
</div>
</div>
app/pages/login.vue
+13 -12
View File
@@ -4,6 +4,7 @@ import { useForm } from 'vuestic-ui';
definePageMeta({
middleware: ['guest']
});
const { t } = useI18n();
const { fetch } = useUserSession();
const router = useRouter();
const route = useRoute();
@@ -52,7 +53,7 @@ async function submit() {
</script>
<template>
<h1 class="mb-4 text-center text-3xl">{{ $t('auth.login') }}</h1>
<h1 class="mb-4 text-center text-3xl">{{ t('auth.login') }}</h1>
<div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5">
<VaForm
ref="formRef"
@@ -64,10 +65,10 @@ async function submit() {
v-model="form.email"
class="w-full"
type="email"
:label="$t('auth.email')"
:label="t('auth.email')"
autocomplete="email"
:rules="[validation.required($t('auth.email'))]"
:placeholder="$t('auth.email')"
:rules="[validation.required(t('auth.email'))]"
:placeholder="t('auth.email')"
required
>
<template #prependInner>
@@ -79,11 +80,11 @@ async function submit() {
v-model="form.password"
class="w-full"
:type="isPasswordVisible.value ? 'text' : 'password'"
:label="$t('auth.password')"
:placeholder="$t('auth.password')"
:label="t('auth.password')"
:placeholder="t('auth.password')"
:rules="[
validation.required($t('auth.password')),
validation.min($t('auth.password'), 8)
validation.required(t('auth.password')),
validation.min(t('auth.password'), 8)
]"
autocomplete="current-password"
:minlength="8"
@@ -98,7 +99,7 @@ async function submit() {
v-if="form.password"
preset="plain"
:title="
$t(
t(
isPasswordVisible.value
? 'auth.hidePassword'
: 'auth.showPassword'
@@ -120,17 +121,17 @@ async function submit() {
v-if="error.length > 0"
color="danger"
class="w-full text-center"
>{{ $t(error) }}</VaAlert
>{{ t(error) }}</VaAlert
>
<VaButtonGroup>
<VaButton color="success" type="submit" :disabled="!isValid">{{
$t('auth.login')
t('auth.login')
}}</VaButton>
<VaButton
:to="$localePath({ path: '/register', query: route.query })"
border-color="primary"
preset="secondary"
>{{ $t('auth.register_instead') }}</VaButton
>{{ t('auth.register_instead') }}</VaButton
>
</VaButtonGroup>
</VaForm>
app/pages/register.vue
+18 -17
View File
@@ -6,6 +6,7 @@ definePageMeta({
middleware: ['guest']
});
const { fetch } = useUserSession();
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const localePath = useLocalePath();
@@ -54,7 +55,7 @@ async function submit() {
</script>
<template>
<h1 class="mb-4 text-center text-3xl">{{ $t('auth.login') }}</h1>
<h1 class="mb-4 text-center text-3xl">{{ t('auth.login') }}</h1>
<div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5">
<VaForm
ref="formRef"
@@ -69,14 +70,14 @@ async function submit() {
autocomplete="name"
clearable
clear-value=""
:label="$t('auth.name')"
:placeholder="$t('auth.name')"
:label="t('auth.name')"
:placeholder="t('auth.name')"
max-length="64"
min-length="5"
:rules="[
validation.required($t('auth.name')),
validation.max($t('auth.name'), 64),
validation.min($t('auth.name'), 5)
validation.required(t('auth.name')),
validation.max(t('auth.name'), 64),
validation.min(t('auth.name'), 5)
]"
required
>
@@ -95,10 +96,10 @@ async function submit() {
v-model="form.email"
class="w-full"
type="email"
:label="$t('auth.email')"
:label="t('auth.email')"
autocomplete="email"
:rules="[validation.required($t('auth.email'))]"
:placeholder="$t('auth.email')"
:rules="[validation.required(t('auth.email'))]"
:placeholder="t('auth.email')"
required
>
<template #prependInner>
@@ -110,11 +111,11 @@ async function submit() {
v-model="form.password"
class="w-full"
:type="isPasswordVisible.value ? 'text' : 'password'"
:label="$t('auth.password')"
:placeholder="$t('auth.password')"
:label="t('auth.password')"
:placeholder="t('auth.password')"
:rules="[
validation.required($t('auth.password')),
validation.min($t('auth.password'), 8)
validation.required(t('auth.password')),
validation.min(t('auth.password'), 8)
]"
autocomplete="current-password"
:minlength="8"
@@ -129,7 +130,7 @@ async function submit() {
v-if="form.password"
preset="plain"
:title="
$t(
t(
isPasswordVisible.value
? 'auth.hidePassword'
: 'auth.showPassword'
@@ -151,18 +152,18 @@ async function submit() {
v-if="error.length > 0"
color="danger"
class="w-full text-center"
>{{ $t(error) }}</VaAlert
>{{ t(error) }}</VaAlert
>
<VaButtonGroup>
<VaButton color="success" type="submit" :disabled="!isValid">{{
$t('auth.register')
t('auth.register')
}}</VaButton>
<VaButton
:to="$localePath({ path: '/login', query: route.query })"
border-color="primary"
preset="secondary"
>{{ $t('auth.login_instead') }}</VaButton
>{{ t('auth.login_instead') }}</VaButton
>
</VaButtonGroup>
</VaForm>