145 lines
4.7 KiB
Vue
145 lines
4.7 KiB
Vue
<script setup lang="ts">
|
|
import Chat from '@/components/Chat.vue';
|
|
import ParticipantsList from '@/components/ParticipantsList.vue';
|
|
import LedgerList from '@/components/LedgerList.vue';
|
|
import { Head, Link as InertiaLink } from '@inertiajs/vue3';
|
|
import { route } from 'ziggy-js';
|
|
|
|
defineOptions({
|
|
layout: {
|
|
breadcrumbs: [
|
|
{
|
|
name: 'Dynamics',
|
|
href: route('dynamics.index'),
|
|
isCurrent: false,
|
|
},
|
|
{
|
|
name: 'dynamic.name',
|
|
href: 'route(\'dynamics.show\', dynamic.id)',
|
|
isCurrent: true,
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
const props = defineProps<{
|
|
dynamic: {
|
|
id: string;
|
|
name: string;
|
|
rules: string;
|
|
chat: any;
|
|
participants: Array<{ id: number; name: string, pivot: { display_name: string | null } }>;
|
|
ledgers: Array<{
|
|
id: number;
|
|
name: string;
|
|
score: number;
|
|
alignment: string;
|
|
media?: Array<{ id: number; url: string; mime_type: string }>;
|
|
}>;
|
|
};
|
|
messages: {
|
|
data: Array<any>;
|
|
next_page_url: string | null;
|
|
};
|
|
can: {
|
|
update: boolean;
|
|
}
|
|
}>();
|
|
|
|
|
|
const breadcrumbs = [
|
|
{
|
|
name: 'Dynamics',
|
|
href: route('dynamics.index'),
|
|
},
|
|
{
|
|
name: props.dynamic.name,
|
|
href: route('dynamics.show', props.dynamic.id),
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="dynamic.name" />
|
|
|
|
<div class="c-dynamic-show">
|
|
<div class="c-dynamic-show__container">
|
|
<div class="c-dynamic-show__card">
|
|
<div class="c-dynamic-show__body">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h3 class="c-dynamic-show__title">{{ dynamic.name }}</h3>
|
|
<p class="c-dynamic-show__rules">
|
|
{{ dynamic.rules }}
|
|
</p>
|
|
</div>
|
|
<InertiaLink v-if="can.update" :href="route('dynamics.edit', dynamic.id)" class="c-dynamic-show__settings-btn">
|
|
Settings
|
|
</InertiaLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dynamic Chat -->
|
|
<Chat :chat="dynamic.chat" :initial-messages="messages" :participants="dynamic.participants" :dynamic-id="dynamic.id" />
|
|
|
|
<!-- Participants Component -->
|
|
<ParticipantsList :dynamic-id="dynamic.id" :participants="dynamic.participants" />
|
|
|
|
<!-- Ledgers List Component -->
|
|
<LedgerList :dynamic-id="dynamic.id" :ledgers="dynamic.ledgers" />
|
|
|
|
<div v-if="can.update" class="mt-8 flex gap-4">
|
|
<InertiaLink :href="route('dynamics.invitations.create', dynamic.id)" class="c-dynamic-show__action-btn">
|
|
Invite User
|
|
</InertiaLink>
|
|
<InertiaLink :href="route('dynamics.ledgers.create', dynamic.id)" class="c-dynamic-show__action-btn">
|
|
Create Ledger
|
|
</InertiaLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@reference "../../../css/app.css";
|
|
|
|
.c-dynamic-show {
|
|
@apply py-12;
|
|
}
|
|
|
|
.c-dynamic-show__container {
|
|
@apply mx-auto max-w-7xl sm:px-6 lg:px-8;
|
|
}
|
|
|
|
.c-dynamic-show__card {
|
|
@apply overflow-hidden;
|
|
background-color: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.c-dynamic-show__body {
|
|
@apply p-6;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.c-dynamic-show__title {
|
|
@apply text-lg font-medium;
|
|
}
|
|
|
|
.c-dynamic-show__rules {
|
|
@apply mt-2 text-sm;
|
|
color: var(--muted-foreground);
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.c-dynamic-show__settings-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-dynamic-show__action-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;
|
|
}
|
|
</style>
|