309 lines
9.1 KiB
Vue
309 lines
9.1 KiB
Vue
<script setup lang="ts">
|
|
import Chat from '@/components/Chat.vue';
|
|
import { defineOptions } from 'vue';
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import { route } from 'ziggy-js';
|
|
|
|
const props = defineProps<{
|
|
mutation: {
|
|
id: string; // Updated to match serialization
|
|
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;
|
|
alignment?: string;
|
|
dynamic: {
|
|
id: string;
|
|
name: string;
|
|
}
|
|
}
|
|
};
|
|
dynamic: {
|
|
id: string;
|
|
participants: any[];
|
|
};
|
|
can: {
|
|
update: boolean;
|
|
};
|
|
}>();
|
|
|
|
const dynamicId = props.dynamic.id;
|
|
|
|
function updateStatus(mutationId: string, status: 'approved' | 'rejected') {
|
|
useForm({ status }).put(
|
|
route('dynamics.ledgers.mutations.update', {
|
|
dynamic: props.dynamic.id,
|
|
ledger: props.mutation.ledger.id,
|
|
mutation: mutationId,
|
|
}),
|
|
);
|
|
}
|
|
|
|
function voidMutation(mutationId: string) {
|
|
useForm({}).put(
|
|
route('dynamics.ledgers.mutations.void', {
|
|
dynamic: props.dynamic.id,
|
|
ledger: props.mutation.ledger.id,
|
|
mutation: mutationId,
|
|
}),
|
|
);
|
|
}
|
|
|
|
function isOwnerUser(userId: number): boolean {
|
|
const participant = props.dynamic.participants?.find((p) => p.id === userId);
|
|
|
|
return participant?.pivot?.role === 'owner';
|
|
}
|
|
|
|
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>
|
|
|
|
<!-- Owner Approve/Reject/Void 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 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;
|
|
}
|
|
|
|
.c-mutation-list__actions {
|
|
@apply mt-3 mb-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;
|
|
}
|
|
</style>
|