@@ -0,0 +1,163 @@
|
||||
<script setup lang="ts">
|
||||
import type { PotView } from '~/types';
|
||||
|
||||
const route = useRoute();
|
||||
const slug = route.params.slug as string;
|
||||
const { name, setName } = useIdentity();
|
||||
|
||||
const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`);
|
||||
const { recordVisit } = useVisitedPots();
|
||||
|
||||
const me = computed(() =>
|
||||
data.value?.participants.find(
|
||||
(p) => p.name.toLowerCase() === name.value?.toLowerCase(),
|
||||
),
|
||||
);
|
||||
|
||||
watch(
|
||||
data,
|
||||
(pot) => {
|
||||
if (!pot) return;
|
||||
recordVisit({
|
||||
slug: pot.pot.slug,
|
||||
name: pot.pot.name,
|
||||
currency: pot.pot.currency,
|
||||
});
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const linkCopied = ref(false);
|
||||
|
||||
// Settings/setup keep their own dedicated layout; only the People &
|
||||
// balances / Expenses tabs share this header.
|
||||
const isPotTab = computed(
|
||||
() => route.path === `/p/${slug}` || route.path === `/p/${slug}/expenses`,
|
||||
);
|
||||
|
||||
async function addMyself() {
|
||||
if (!name.value) return;
|
||||
await $fetch(`/api/pots/${slug}/participants`, {
|
||||
method: 'POST',
|
||||
body: { name: name.value },
|
||||
});
|
||||
await refresh();
|
||||
}
|
||||
|
||||
async function copyLink() {
|
||||
await navigator.clipboard.writeText(window.location.href);
|
||||
linkCopied.value = true;
|
||||
setTimeout(() => (linkCopied.value = false), 2000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="error" class="space-y-3 text-center">
|
||||
<p class="text-rose-600 dark:text-rose-400">This Pot couldn't be found.</p>
|
||||
<NuxtLink to="/" class="font-medium text-orange-600 dark:text-orange-400">
|
||||
Go home
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<NameForm
|
||||
v-else-if="!name && isPotTab"
|
||||
title="What's your name?"
|
||||
@submit="setName"
|
||||
/>
|
||||
|
||||
<div v-else-if="data" class="space-y-6">
|
||||
<template v-if="isPotTab">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="inline-flex items-center gap-1 text-sm font-medium text-stone-500 transition-colors hover:text-orange-600 dark:text-stone-400 dark:hover:text-orange-400"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M17 10a.75.75 0 0 1-.75.75H5.612l4.158 3.96a.75.75 0 1 1-1.04 1.08l-5.5-5.25a.75.75 0 0 1 0-1.08l5.5-5.25a.75.75 0 1 1 1.04 1.08L5.612 9.25H16.25A.75.75 0 0 1 17 10Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
All Pots
|
||||
</NuxtLink>
|
||||
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-stone-900 dark:text-stone-100">
|
||||
{{ data.pot.name }}
|
||||
</h1>
|
||||
<p class="text-sm text-stone-500 dark:text-stone-400">
|
||||
{{ data.pot.currency }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex shrink-0 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl border border-stone-300 px-3 py-1.5 text-sm font-medium text-stone-700 transition-colors hover:border-orange-300 hover:text-orange-600 dark:border-stone-700 dark:text-stone-300 dark:hover:border-orange-700 dark:hover:text-orange-400"
|
||||
@click="copyLink"
|
||||
>
|
||||
{{ linkCopied ? 'Copied!' : 'Copy link' }}
|
||||
</button>
|
||||
<NuxtLink
|
||||
:to="`/p/${slug}/settings`"
|
||||
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-stone-300 text-stone-600 transition-colors hover:border-orange-300 hover:text-orange-600 dark:border-stone-700 dark:text-stone-300 dark:hover:border-orange-700 dark:hover:text-orange-400"
|
||||
aria-label="Pot settings"
|
||||
>
|
||||
<svg class="h-4.5 w-4.5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8.34 1.804A1 1 0 0 1 9.32 1h1.36a1 1 0 0 1 .98.804l.24 1.192c.428.183.83.41 1.2.674l1.146-.386a1 1 0 0 1 1.212.464l.68 1.178a1 1 0 0 1-.208 1.267l-.912.816a6.5 6.5 0 0 1 0 1.382l.912.816a1 1 0 0 1 .208 1.267l-.68 1.178a1 1 0 0 1-1.212.464l-1.146-.386c-.37.264-.772.49-1.2.674l-.24 1.192a1 1 0 0 1-.98.804H9.32a1 1 0 0 1-.98-.804l-.24-1.192a6.5 6.5 0 0 1-1.2-.674l-1.146.386a1 1 0 0 1-1.212-.464l-.68-1.178a1 1 0 0 1 .208-1.267l.912-.816a6.5 6.5 0 0 1 0-1.382l-.912-.816a1 1 0 0 1-.208-1.267l.68-1.178a1 1 0 0 1 1.212-.464l1.146.386c.37-.264.772-.49 1.2-.674l.24-1.192ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!me"
|
||||
class="rounded-2xl border border-orange-200 bg-orange-50 p-4 text-sm dark:border-orange-900 dark:bg-orange-950/40"
|
||||
>
|
||||
<p class="mb-2 text-stone-700 dark:text-stone-300">
|
||||
You're not in this Pot's participant list yet.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl bg-orange-500 px-3 py-1.5 font-medium text-white shadow-sm transition-colors hover:bg-orange-600"
|
||||
@click="addMyself"
|
||||
>
|
||||
Add myself as {{ name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-2 gap-1 rounded-xl bg-stone-100 p-1 dark:bg-stone-900"
|
||||
>
|
||||
<NuxtLink
|
||||
:to="`/p/${slug}`"
|
||||
class="rounded-lg py-2 text-center text-sm font-medium transition-colors"
|
||||
:class="
|
||||
route.path === `/p/${slug}`
|
||||
? 'bg-white text-stone-900 shadow-sm dark:bg-stone-800 dark:text-stone-100'
|
||||
: 'text-stone-500 hover:text-stone-700 dark:text-stone-400 dark:hover:text-stone-200'
|
||||
"
|
||||
>
|
||||
People & balances
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
:to="`/p/${slug}/expenses`"
|
||||
class="rounded-lg py-2 text-center text-sm font-medium transition-colors"
|
||||
:class="
|
||||
route.path === `/p/${slug}/expenses`
|
||||
? 'bg-white text-stone-900 shadow-sm dark:bg-stone-800 dark:text-stone-100'
|
||||
: 'text-stone-500 hover:text-stone-700 dark:text-stone-400 dark:hover:text-stone-200'
|
||||
"
|
||||
>
|
||||
Expenses
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user