186 lines
6.1 KiB
Vue
186 lines
6.1 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 CreateLedgerForm from '@/components/CreateLedgerForm.vue';
|
|
import { Head, useForm } from '@inertiajs/vue3';
|
|
import { route } from 'ziggy-js';
|
|
|
|
const props = defineProps<{
|
|
dynamic: {
|
|
id: number;
|
|
name: string;
|
|
rules: string;
|
|
chat: any;
|
|
participants: Array<{ id: number; name: string }>;
|
|
ledgers: Array<{
|
|
id: number;
|
|
name: string;
|
|
score: number;
|
|
alignment: string;
|
|
media?: Array<{ id: number; url: string; mime_type: string }>;
|
|
}>;
|
|
};
|
|
isOwner: boolean;
|
|
}>();
|
|
|
|
const breadcrumbs = [
|
|
{
|
|
name: 'Dynamics',
|
|
href: route('dynamics.index'),
|
|
},
|
|
{
|
|
name: props.dynamic.name,
|
|
href: route('dynamics.show', props.dynamic.id),
|
|
},
|
|
];
|
|
|
|
const inviteForm = useForm({
|
|
email: '',
|
|
role: 'participant',
|
|
});
|
|
|
|
function submitInvite() {
|
|
inviteForm.post(route('dynamics.invitations.store', props.dynamic.id), {
|
|
onSuccess: () => inviteForm.reset(),
|
|
});
|
|
}
|
|
</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">
|
|
<h3 class="c-dynamic-show__title">{{ dynamic.name }}</h3>
|
|
<p class="c-dynamic-show__rules">
|
|
{{ dynamic.rules }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dynamic Chat -->
|
|
<Chat :chat="dynamic.chat" />
|
|
|
|
<!-- Participants Component -->
|
|
<ParticipantsList :participants="dynamic.participants" />
|
|
|
|
<!-- Ledgers List Component -->
|
|
<LedgerList :dynamic-id="dynamic.id" :ledgers="dynamic.ledgers" />
|
|
|
|
<!-- Create Ledger Form Component -->
|
|
<CreateLedgerForm :dynamic-id="dynamic.id" />
|
|
|
|
<!-- Invite Participant Form (Owners only) -->
|
|
<div v-if="isOwner" class="c-invite-form">
|
|
<div class="c-invite-form__card">
|
|
<div class="c-invite-form__body">
|
|
<h3 class="c-invite-form__title">
|
|
Invite User to Dynamic
|
|
</h3>
|
|
|
|
<form
|
|
@submit.prevent="submitInvite"
|
|
class="c-invite-form__form"
|
|
>
|
|
<div class="c-invite-form__field">
|
|
<label
|
|
for="invite_email"
|
|
class="c-invite-form__label"
|
|
>Email Address</label
|
|
>
|
|
<input
|
|
v-model="inviteForm.email"
|
|
id="invite_email"
|
|
type="email"
|
|
required
|
|
class="c-invite-form__input"
|
|
/>
|
|
<div
|
|
v-if="inviteForm.errors.email"
|
|
class="c-invite-form__error"
|
|
>
|
|
{{ inviteForm.errors.email }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="c-invite-form__field">
|
|
<label
|
|
for="invite_role"
|
|
class="c-invite-form__label"
|
|
>Role</label
|
|
>
|
|
<select
|
|
v-model="inviteForm.role"
|
|
id="invite_role"
|
|
class="c-invite-form__select"
|
|
>
|
|
<option value="owner">
|
|
Owner (Full Access & Approvals)
|
|
</option>
|
|
<option value="participant">
|
|
Participant (Add Suggestions)
|
|
</option>
|
|
<option value="editor">Editor</option>
|
|
<option value="viewer">Viewer</option>
|
|
</select>
|
|
<div
|
|
v-if="inviteForm.errors.role"
|
|
class="c-invite-form__error"
|
|
>
|
|
{{ inviteForm.errors.role }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="c-invite-form__actions">
|
|
<button
|
|
type="submit"
|
|
:disabled="inviteForm.processing"
|
|
class="c-invite-form__submit-btn"
|
|
>
|
|
Send Invitation
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</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);
|
|
}
|
|
</style>
|