382 lines
13 KiB
Vue
382 lines
13 KiB
Vue
<script setup lang="ts">
|
|
import { Head, Link as InertiaLink } from '@inertiajs/vue3';
|
|
import { useEcho } from '@laravel/echo-vue';
|
|
import { ref } from 'vue';
|
|
import { route } from 'ziggy-js';
|
|
import AddMutationForm from '@/components/AddMutationForm.vue';
|
|
import Chat from '@/components/Chat.vue';
|
|
import MutationList from '@/components/MutationList.vue';
|
|
|
|
const props = defineProps<{
|
|
dynamic: {
|
|
id: number;
|
|
name: string;
|
|
chat: { id: number };
|
|
participants?: Array<{
|
|
id: number;
|
|
name: string;
|
|
pivot?: { role: string };
|
|
}>;
|
|
};
|
|
ledger: {
|
|
id: number;
|
|
name: string;
|
|
score: number;
|
|
rules: string;
|
|
alignment: string;
|
|
media?: Array<{ id: number; url: string; mime_type: string }>;
|
|
mutations: Array<{
|
|
id: number;
|
|
user_id: number;
|
|
user: { name: string };
|
|
amount: number;
|
|
description: string;
|
|
status: string;
|
|
created_at: string;
|
|
chat: any;
|
|
media?: Array<{ id: number; url: string; mime_type: string }>;
|
|
}>;
|
|
};
|
|
isOwner: boolean;
|
|
messages: {
|
|
data: Array<any>;
|
|
next_page_url: string | null;
|
|
};
|
|
}>();
|
|
|
|
const breadcrumbs = [
|
|
{
|
|
name: 'Dynamics',
|
|
href: route('dynamics.index'),
|
|
},
|
|
{
|
|
name: props.dynamic.name,
|
|
href: route('dynamics.show', props.dynamic.id),
|
|
},
|
|
{
|
|
name: props.ledger.name,
|
|
href: route('dynamics.ledgers.show', {
|
|
dynamic: props.dynamic.id,
|
|
ledger: props.ledger.id,
|
|
}),
|
|
},
|
|
];
|
|
|
|
// Lightbox Modal state
|
|
const activeLightboxUrl = ref<string | null>(null);
|
|
const activeLightboxType = ref<'image' | 'video' | null>(null);
|
|
|
|
function openLightbox(url: string, mimeType: string) {
|
|
activeLightboxUrl.value = url;
|
|
activeLightboxType.value = mimeType.startsWith('image/')
|
|
? 'image'
|
|
: 'video';
|
|
}
|
|
|
|
function closeLightbox() {
|
|
activeLightboxUrl.value = null;
|
|
activeLightboxType.value = null;
|
|
}
|
|
|
|
// Toast System
|
|
const toasts = ref<Array<{ id: number; message: string }>>([]);
|
|
let toastCount = 0;
|
|
|
|
function showToast(message: string) {
|
|
const id = toastCount++;
|
|
toasts.value.push({ id, message });
|
|
setTimeout(() => {
|
|
toasts.value = toasts.value.filter((t) => t.id !== id);
|
|
}, 6000);
|
|
}
|
|
|
|
// Real-time Mutation Event Listeners
|
|
useEcho(`chats.${props.dynamic.chat.id}`, 'MutationCreated', (e: any) => {
|
|
if (e.mutation.ledger_id === props.ledger.id) {
|
|
// Prevent duplicate mutations
|
|
if (!props.ledger.mutations.some((m) => m.id === e.mutation.id)) {
|
|
props.ledger.mutations.unshift(e.mutation);
|
|
}
|
|
|
|
// Auto-update score if already approved (e.g. submitted by owner)
|
|
if (e.mutation.status === 'approved') {
|
|
props.ledger.score += e.mutation.amount;
|
|
}
|
|
|
|
const isAutoApproved =
|
|
e.mutation.status === 'approved' && isOwnerUser(e.mutation.user_id);
|
|
const statusPrefix = isAutoApproved ? '' : ` ${e.mutation.status}`;
|
|
showToast(
|
|
`New${statusPrefix} ledger entry added by ${e.mutation.user.name}: "${e.mutation.description}"`,
|
|
);
|
|
}
|
|
});
|
|
|
|
useEcho(`chats.${props.dynamic.chat.id}`, 'MutationUpdated', (e: any) => {
|
|
if (e.mutation.ledger_id === props.ledger.id) {
|
|
const index = props.ledger.mutations.findIndex(
|
|
(m) => m.id === e.mutation.id,
|
|
);
|
|
|
|
if (index !== -1) {
|
|
const oldStatus = props.ledger.mutations[index].status;
|
|
const newStatus = e.mutation.status;
|
|
|
|
// Update status in-place
|
|
props.ledger.mutations[index].status = newStatus;
|
|
|
|
// Transition ledger score based on status update
|
|
if (oldStatus !== 'approved' && newStatus === 'approved') {
|
|
props.ledger.score += e.mutation.amount;
|
|
} else if (oldStatus === 'approved' && newStatus !== 'approved') {
|
|
props.ledger.score -= e.mutation.amount;
|
|
}
|
|
|
|
showToast(
|
|
`Chore entry "${e.mutation.description}" status updated to ${newStatus.toUpperCase()}`,
|
|
);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Check if user is an owner in the dynamic
|
|
function isOwnerUser(userId: number): boolean {
|
|
const participant = props.dynamic.participants?.find(
|
|
(p) => p.id === userId,
|
|
);
|
|
|
|
return participant?.pivot?.role === 'owner';
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="ledger.name" />
|
|
|
|
<!-- Floating Toast Notifications -->
|
|
<div class="c-ledger-show__toast-container">
|
|
<div
|
|
v-for="toast in toasts"
|
|
:key="toast.id"
|
|
class="c-ledger-show__toast-item"
|
|
>
|
|
<span>{{ toast.message }}</span>
|
|
<button
|
|
@click="toasts = toasts.filter((t) => t.id !== toast.id)"
|
|
class="c-ledger-show__toast-close-btn"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="c-ledger-show">
|
|
<div class="c-ledger-show__container">
|
|
<div class="c-ledger-show__card">
|
|
<div class="c-ledger-show__body">
|
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
|
|
<div>
|
|
<h3 class="c-ledger-show__title">{{ ledger.name }}</h3>
|
|
<p class="c-ledger-show__score">
|
|
Score: {{ ledger.score }}
|
|
</p>
|
|
<p class="c-ledger-show__rules">
|
|
{{ ledger.rules }}
|
|
</p>
|
|
</div>
|
|
<div v-if="isOwner" class="flex flex-col gap-2">
|
|
<InertiaLink
|
|
:href="route('dynamics.ledgers.predefined-mutations.index', [dynamic.id, ledger.id])"
|
|
class="c-ledger-show__manage-btn"
|
|
>
|
|
Predefined Mutations
|
|
</InertiaLink>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ledger Alignment Badge / Subtitle -->
|
|
<div class="c-ledger-show__alignment-wrapper">
|
|
<span
|
|
v-if="ledger.alignment === 'positive'"
|
|
class="c-ledger-show__alignment-badge c-ledger-show__alignment-badge--positive"
|
|
>
|
|
▲ Positive Alignment — A higher score is better.
|
|
</span>
|
|
<span
|
|
v-else-if="ledger.alignment === 'negative'"
|
|
class="c-ledger-show__alignment-badge c-ledger-show__alignment-badge--negative"
|
|
>
|
|
▼ Negative Alignment — A lower score is better
|
|
(demerits / infractions).
|
|
</span>
|
|
<span
|
|
v-else
|
|
class="c-ledger-show__alignment-badge c-ledger-show__alignment-badge--neutral"
|
|
>
|
|
◆ Neutral Alignment — Scorekeeping neutral.
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Ledger Descriptive Media -->
|
|
<div
|
|
v-if="ledger.media && ledger.media.length > 0"
|
|
class="c-ledger-show__media-list"
|
|
>
|
|
<div
|
|
v-for="item in ledger.media"
|
|
:key="item.id"
|
|
class="c-ledger-show__media-item"
|
|
>
|
|
<img
|
|
v-if="item.mime_type.startsWith('image/')"
|
|
:src="item.url"
|
|
class="c-ledger-show__media-img"
|
|
@click="openLightbox(item.url, item.mime_type)"
|
|
/>
|
|
<div
|
|
v-else-if="item.mime_type.startsWith('video/')"
|
|
class="c-ledger-show__media-video-wrapper"
|
|
@click="openLightbox(item.url, item.mime_type)"
|
|
>
|
|
<video
|
|
:src="item.url"
|
|
class="c-ledger-show__media-video"
|
|
></video>
|
|
<div class="c-ledger-show__media-video-overlay">
|
|
▶
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Mutation Form Component -->
|
|
<AddMutationForm :dynamic-id="dynamic.id" :ledger-id="ledger.id" />
|
|
|
|
<!-- Mutation List Component -->
|
|
<MutationList
|
|
:dynamic-id="dynamic.id"
|
|
:ledger-id="ledger.id"
|
|
:mutations="ledger.mutations"
|
|
:participants="dynamic.participants"
|
|
:is-owner="isOwner"
|
|
:ledger-alignment="ledger.alignment"
|
|
@open-lightbox="openLightbox"
|
|
/>
|
|
|
|
<Chat :chat="dynamic.chat" :initial-messages="messages" :participants="dynamic.participants" :dynamic-id="dynamic.id" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lightbox Modal -->
|
|
<div v-if="activeLightboxUrl" class="c-lightbox" @click="closeLightbox">
|
|
<button @click="closeLightbox" class="c-lightbox__close">✕</button>
|
|
<div class="c-lightbox__content" @click.stop>
|
|
<img
|
|
v-if="activeLightboxType === 'image'"
|
|
:src="activeLightboxUrl"
|
|
class="c-lightbox__image"
|
|
/>
|
|
<video
|
|
v-else-if="activeLightboxType === 'video'"
|
|
:src="activeLightboxUrl"
|
|
controls
|
|
autoplay
|
|
class="c-lightbox__video"
|
|
></video>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@reference "../../../css/app.css";
|
|
|
|
.c-ledger-show__toast-container {
|
|
@apply pointer-events-none fixed top-6 right-6 z-50 flex max-w-sm flex-col gap-3;
|
|
}
|
|
|
|
.c-ledger-show__toast-item {
|
|
@apply pointer-events-auto flex items-center justify-between gap-4 rounded-lg border border-neutral-700/50 bg-neutral-900 px-4 py-3 text-sm text-white shadow-xl;
|
|
}
|
|
|
|
.c-ledger-show__toast-close-btn {
|
|
@apply cursor-pointer text-neutral-400 hover:text-white;
|
|
}
|
|
|
|
.c-ledger-show {
|
|
@apply py-12;
|
|
}
|
|
|
|
.c-ledger-show__manage-btn {
|
|
@apply inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300;
|
|
}
|
|
|
|
.c-ledger-show__container {
|
|
@apply mx-auto max-w-7xl sm:px-6 lg:px-8;
|
|
}
|
|
|
|
.c-ledger-show__card {
|
|
@apply overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800;
|
|
}
|
|
|
|
.c-ledger-show__body {
|
|
@apply p-6 text-gray-900 dark:text-gray-100;
|
|
}
|
|
|
|
.c-ledger-show__title {
|
|
@apply text-lg font-medium;
|
|
}
|
|
|
|
.c-ledger-show__score {
|
|
@apply mt-2 text-sm text-gray-600 dark:text-gray-400;
|
|
}
|
|
|
|
.c-ledger-show__rules {
|
|
@apply mt-2 text-sm text-gray-600 dark:text-gray-400;
|
|
}
|
|
|
|
.c-ledger-show__alignment-wrapper {
|
|
@apply mt-3 flex items-center;
|
|
}
|
|
|
|
.c-ledger-show__alignment-badge {
|
|
@apply rounded px-2.5 py-1 text-xs font-semibold tracking-wide uppercase;
|
|
}
|
|
|
|
.c-ledger-show__alignment-badge--positive {
|
|
@apply bg-green-50/50 text-green-600 dark:bg-green-950/20 dark:text-green-400;
|
|
}
|
|
|
|
.c-ledger-show__alignment-badge--negative {
|
|
@apply bg-red-50/50 text-red-600 dark:bg-red-950/20 dark:text-red-400;
|
|
}
|
|
|
|
.c-ledger-show__alignment-badge--neutral {
|
|
@apply bg-gray-50/50 text-gray-500 dark:bg-neutral-800/20 dark:text-gray-400;
|
|
}
|
|
|
|
.c-ledger-show__media-list {
|
|
@apply mt-4 flex flex-wrap gap-3;
|
|
}
|
|
|
|
.c-ledger-show__media-item {
|
|
@apply max-w-[320px] overflow-hidden rounded-md border border-neutral-200 bg-black dark:border-neutral-700;
|
|
}
|
|
|
|
.c-ledger-show__media-img {
|
|
@apply h-auto max-h-[200px] w-full cursor-pointer object-cover transition-opacity hover:opacity-90;
|
|
}
|
|
|
|
.c-ledger-show__media-video-wrapper {
|
|
@apply relative cursor-pointer transition-opacity hover:opacity-90;
|
|
}
|
|
|
|
.c-ledger-show__media-video {
|
|
@apply h-auto max-h-[200px] w-full;
|
|
}
|
|
|
|
.c-ledger-show__media-video-overlay {
|
|
@apply absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white;
|
|
}
|
|
</style>
|