ledgerrz/resources/js/pages/Mutations/Show.vue

<script setup lang="ts">
import Chat from '@/components/Chat.vue';
import { defineOptions } from 'vue';

const props = defineProps<{
    mutation: {
        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 }>;
        can: {
            update: boolean;
            void: boolean;
        };
        ledger: {
            id: string;
            name: string;
            dynamic_id: string;
            dynamic: {
                id: string;
                name: string;
            }
        }
    };
    dynamic: object;
}>();

const dynamicId = props.dynamic.id;

function isOwnerUser(userId: number): boolean {
    // In this context, we don't have the participants list,
    // so we can't reliably determine the role.
    // For now, we'll just base it on something simple,
    // but this might need adjustment.
    return false;
}

function getAmountClass(amount: number): string {
    const alignment = props.mutation.ledger.alignment || 'neutral';

    if (alignment === 'positive') {
        return amount > 0
            ? 'c-mutation-list__item-amount--positive'
            : 'c-mutation-list__item-amount--negative';
    }

    if (alignment === 'negative') {
        return amount < 0
            ? 'c-mutation-list__item-amount--positive'
            : 'c-mutation-list__item-amount--negative';
    }

    return 'c-mutation-list__item-amount--neutral';
}

defineOptions({
    layout: (props: any) => ({
        breadcrumbs: [
            { title: 'Dynamics', href: route('dynamics.index') },
            { title: props.mutation.ledger.dynamic.name, href: route('dynamics.show', props.mutation.ledger.dynamic.id) },
            { title: props.mutation.ledger.name, href: route('dynamics.ledgers.show', [props.mutation.ledger.dynamic.id, props.mutation.ledger.id]) },
            { title: 'Mutation Details', href: '' },
        ]
    })
});

</script>

<template>
    <div class="c-mutation-list__item">
        <div class="c-mutation-list__item-header">
            <div>
                <span class="c-mutation-list__item-author">
                    {{
                        isOwnerUser(mutation.user_id)
                            ? 'Added by'
                            : 'Suggested by'
                    }}
                    {{ mutation.user.name }}
                </span>
                <div class="c-mutation-list__item-meta">
                    <span
                        :class="getAmountClass(mutation.amount)"
                        class="c-mutation-list__item-amount"
                    >
                        {{ mutation.amount > 0 ? '+' : ''
                        }}{{ mutation.amount }}
                    </span>
                    <span
                        v-if="!isOwnerUser(mutation.user_id)"
                        :class="{
                            'c-mutation-list__item-status--pending':
                                mutation.status === 'pending',
                            'c-mutation-list__item-status--approved':
                                mutation.status === 'approved',
                            'c-mutation-list__item-status--rejected':
                                mutation.status === 'rejected',
                        }"
                        class="c-mutation-list__item-status"
                    >
                        {{ mutation.status }}
                    </span>
                </div>
            </div>
            <div class="c-mutation-list__item-time">
                {{ new Date(mutation.created_at).toLocaleString() }}
            </div>
        </div>
        <p class="c-mutation-list__item-desc">
            {{ mutation.description }}
        </p>

        <div
            v-if="mutation.media && mutation.media.length > 0"
            class="c-mutation-list__media-list"
        >
            <div
                v-for="item in mutation.media"
                :key="item.id"
                class="c-mutation-list__media-item"
            >
                <img
                    v-if="item.mime_type.startsWith('image/')"
                    :src="item.url"
                    class="c-mutation-list__media-img"
                />
                <div
                    v-else-if="item.mime_type.startsWith('video/')"
                    class="c-mutation-list__media-video-wrapper"
                >
                    <video
                        :src="item.url"
                        class="c-mutation-list__media-video"
                    ></video>
                    <div class="c-mutation-list__media-video-overlay">
                        ▶
                    </div>
                </div>
            </div>
        </div>
        <Chat v-if="mutation.chat"
              :chat="mutation.chat"
              :participants="dynamic.participants"
              :dynamic-id="dynamicId"
        />
    </div>
</template>

<style scoped>
@reference "../../../css/app.css";

.c-mutation-list__item {
    @apply overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800;
}

.c-mutation-list__item-header {
    @apply flex items-start justify-between;
}

.c-mutation-list__item-author {
    @apply font-semibold;
}

.c-mutation-list__item-meta {
    @apply mt-1 flex items-center gap-2;
}

.c-mutation-list__item-amount {
    @apply text-sm font-bold;
}

.c-mutation-list__item-amount--positive {
    @apply text-green-500;
}

.c-mutation-list__item-amount--negative {
    @apply text-red-500;
}

.c-mutation-list__item-amount--neutral {
    @apply text-gray-500 dark:text-gray-400;
}

.c-mutation-list__item-status {
    @apply rounded px-1.5 py-0.5 text-[10px] font-medium tracking-wider uppercase;
}

.c-mutation-list__item-status--pending {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
}

.c-mutation-list__item-status--approved {
    @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
}

.c-mutation-list__item-status--rejected {
    @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
}

.c-mutation-list__item-time {
    @apply text-xs text-gray-500;
}

.c-mutation-list__item-desc {
    @apply mt-3 text-sm text-gray-600 dark:text-gray-400;
}

.c-mutation-list__media-list {
    @apply mt-3 flex flex-wrap gap-2;
}

.c-mutation-list__media-item {
    @apply max-w-[200px] overflow-hidden rounded-md border border-neutral-200 bg-black dark:border-neutral-700;
}

.c-mutation-list__media-img {
    @apply h-auto max-h-[150px] w-full cursor-pointer object-cover transition-opacity hover:opacity-90;
}

.c-mutation-list__media-video-wrapper {
    @apply relative cursor-pointer transition-opacity hover:opacity-90;
}

.c-mutation-list__media-video {
    @apply h-auto max-h-[150px] w-full;
}

.c-mutation-list__media-video-overlay {
    @apply absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white;
}
</style>