323 lines
10 KiB
Vue
323 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import { route } from 'ziggy-js';
|
|
import Chat from '@/components/Chat.vue';
|
|
|
|
const props = defineProps<{
|
|
dynamicId: string;
|
|
ledgerId: string;
|
|
ledgerAlignment?: 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 }>;
|
|
can: {
|
|
update: boolean;
|
|
void: boolean;
|
|
};
|
|
}>;
|
|
participants?: Array<{
|
|
id: number;
|
|
name: string;
|
|
pivot?: { role: string };
|
|
}>;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'open-lightbox', url: string, mimeType: string): void;
|
|
}>();
|
|
|
|
function updateStatus(mutationId: number, status: 'approved' | 'rejected') {
|
|
useForm({ status }).put(
|
|
route('dynamics.ledgers.mutations.update', {
|
|
dynamic: props.dynamicId,
|
|
ledger: props.ledgerId,
|
|
mutation: mutationId,
|
|
}),
|
|
);
|
|
}
|
|
|
|
function voidMutation(mutationId: number) {
|
|
useForm({}).put(
|
|
route('dynamics.ledgers.mutations.void', {
|
|
dynamic: props.dynamicId,
|
|
ledger: props.ledgerId,
|
|
mutation: mutationId,
|
|
}),
|
|
);
|
|
}
|
|
|
|
function isOwnerUser(userId: number): boolean {
|
|
const participant = props.participants?.find((p) => p.id === userId);
|
|
|
|
return participant?.pivot?.role === 'owner';
|
|
}
|
|
|
|
function getAmountClass(amount: number): string {
|
|
const alignment = props.ledgerAlignment || 'neutral';
|
|
|
|
if (alignment === 'positive') {
|
|
return amount > 0
|
|
? 'c-mutation-list__item-amount--positive'
|
|
: 'c-mutation-list__item-amount--negative';
|
|
}
|
|
|
|
if (alignment === 'negative') {
|
|
// Lower is better: negative amount is positive/favorable, positive amount is negative/unfavorable
|
|
return amount < 0
|
|
? 'c-mutation-list__item-amount--positive'
|
|
: 'c-mutation-list__item-amount--negative';
|
|
}
|
|
|
|
// Neutral alignment
|
|
return 'c-mutation-list__item-amount--neutral';
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="c-mutation-list">
|
|
<h4 class="c-mutation-list__title">Mutations</h4>
|
|
<ul class="c-mutation-list__list">
|
|
<li
|
|
v-for="mutation in mutations"
|
|
:key="mutation.id"
|
|
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>
|
|
<!-- Only show status badge if mutation was NOT auto-approved by an owner -->
|
|
<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>
|
|
|
|
<!-- Attached Mutation Proof Media -->
|
|
<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"
|
|
@click="
|
|
emit('open-lightbox', item.url, item.mime_type)
|
|
"
|
|
/>
|
|
<div
|
|
v-else-if="item.mime_type.startsWith('video/')"
|
|
class="c-mutation-list__media-video-wrapper"
|
|
@click="
|
|
emit('open-lightbox', item.url, item.mime_type)
|
|
"
|
|
>
|
|
<video
|
|
:src="item.url"
|
|
class="c-mutation-list__media-video"
|
|
></video>
|
|
<div class="c-mutation-list__media-video-overlay">
|
|
▶
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Owner Approve/Reject Actions -->
|
|
<div
|
|
v-if="mutation.can?.update || mutation.can?.void"
|
|
class="c-mutation-list__actions"
|
|
>
|
|
<button
|
|
v-if="mutation.can?.update"
|
|
@click="updateStatus(mutation.id, 'approved')"
|
|
class="c-mutation-list__approve-btn"
|
|
>
|
|
Approve
|
|
</button>
|
|
<button
|
|
v-if="mutation.can?.update"
|
|
@click="updateStatus(mutation.id, 'rejected')"
|
|
class="c-mutation-list__reject-btn"
|
|
>
|
|
Reject
|
|
</button>
|
|
<button
|
|
v-if="mutation.can?.void"
|
|
@click="voidMutation(mutation.id)"
|
|
class="c-mutation-list__void-btn"
|
|
>
|
|
Void
|
|
</button>
|
|
</div>
|
|
|
|
<Chat :chat="mutation.chat" :dynamic-id="dynamicId" :participants="participants" />
|
|
</li>
|
|
</ul>
|
|
<div v-if="mutations.length === 0" class="c-mutation-list__empty">
|
|
No mutations found for this ledger.
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@reference "../../css/app.css";
|
|
|
|
.c-mutation-list {
|
|
@apply mt-8;
|
|
}
|
|
|
|
.c-mutation-list__title {
|
|
@apply text-lg font-medium text-gray-900 dark:text-gray-100;
|
|
}
|
|
|
|
.c-mutation-list__list {
|
|
@apply mt-4 space-y-4;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.c-mutation-list__actions {
|
|
@apply mt-3 flex gap-2 border-t border-neutral-100 pt-3 dark:border-neutral-700;
|
|
}
|
|
|
|
.c-mutation-list__approve-btn {
|
|
@apply inline-flex cursor-pointer items-center rounded bg-green-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-green-500;
|
|
}
|
|
|
|
.c-mutation-list__reject-btn {
|
|
@apply inline-flex cursor-pointer items-center rounded bg-red-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-500;
|
|
}
|
|
|
|
.c-mutation-list__void-btn {
|
|
@apply inline-flex cursor-pointer items-center rounded bg-gray-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-gray-500;
|
|
}
|
|
|
|
.c-mutation-list__empty {
|
|
@apply mt-4 text-gray-500;
|
|
}
|
|
</style>
|