ui improvements
This commit is contained in:
parent
ed16d5dcda
commit
06e5600447
@ -73,13 +73,7 @@ class LedgerController extends Controller
|
|||||||
},
|
},
|
||||||
'mutations.user',
|
'mutations.user',
|
||||||
'mutations.media',
|
'mutations.media',
|
||||||
'mutations.chat.messages.user',
|
'mutations.chat',
|
||||||
'mutations.chat.messages.media',
|
|
||||||
'mutations.chat.messages.subject' => function ($morphTo) {
|
|
||||||
$morphTo->morphWith([
|
|
||||||
\App\Models\Mutation::class => ['ledger'],
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
$isOwner = $dynamic->participants()
|
$isOwner = $dynamic->participants()
|
||||||
|
|||||||
@ -90,6 +90,18 @@ useEcho(`chats.${props.chat.id}`, 'MessageSent', (e: any) => {
|
|||||||
messages.value.push(e.message);
|
messages.value.push(e.message);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function formatTimestamp(isoString: string): { full: string; time: string } {
|
||||||
|
const date = new Date(isoString);
|
||||||
|
return {
|
||||||
|
full: date.toLocaleString(),
|
||||||
|
time: date.toLocaleTimeString([], {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
hour12: false,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
const participantsById = computed(() => {
|
const participantsById = computed(() => {
|
||||||
const list = props.participants || [];
|
const list = props.participants || [];
|
||||||
return list.reduce(
|
return list.reduce(
|
||||||
@ -245,13 +257,14 @@ function closeLightbox() {
|
|||||||
<span class="c-chat__message-author">{{
|
<span class="c-chat__message-author">{{
|
||||||
message.user.name
|
message.user.name
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="c-chat__message-time">{{
|
<span
|
||||||
new Date(message.created_at).toLocaleString()
|
class="c-chat__message-time"
|
||||||
}}</span>
|
:title="formatTimestamp(message.created_at).full"
|
||||||
|
>
|
||||||
|
{{ formatTimestamp(message.created_at).time }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="c-chat__message-text">
|
<p class="c-chat__message-text" v-html="parseMessageContent(message)"></p>
|
||||||
{{ message.content }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- Attached Media Display -->
|
<!-- Attached Media Display -->
|
||||||
<div
|
<div
|
||||||
@ -293,13 +306,11 @@ function closeLightbox() {
|
|||||||
class="c-chat__system-text"
|
class="c-chat__system-text"
|
||||||
v-html="parseMessageContent(message)"
|
v-html="parseMessageContent(message)"
|
||||||
></span>
|
></span>
|
||||||
<span class="c-chat__system-time">
|
<span
|
||||||
{{
|
class="c-chat__system-time"
|
||||||
new Date(message.created_at).toLocaleTimeString(
|
:title="formatTimestamp(message.created_at).full"
|
||||||
[],
|
>
|
||||||
{ hour: '2-digit', minute: '2-digit' },
|
{{ formatTimestamp(message.created_at).time }}
|
||||||
)
|
|
||||||
}}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,7 +1,28 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Head, Link } from '@inertiajs/vue3';
|
import { Head, Link } from '@inertiajs/vue3';
|
||||||
import { route } from 'ziggy-js';
|
import { route } from 'ziggy-js';
|
||||||
import AppLayout from '@/layouts/AppLayout.vue';
|
|
||||||
|
defineOptions({
|
||||||
|
layout: {
|
||||||
|
breadcrumbs: [
|
||||||
|
{
|
||||||
|
name: 'Dynamics',
|
||||||
|
href: route('dynamics.index'),
|
||||||
|
isCurrent: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'dynamic.name',
|
||||||
|
href: 'route(\'dynamics.show\', dynamic.id)',
|
||||||
|
isCurrent: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'participant.display_name',
|
||||||
|
href: 'route(\'dynamics.users.show\', { dynamic: dynamic.id, user: participant.id })',
|
||||||
|
isCurrent: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
dynamic: {
|
dynamic: {
|
||||||
@ -43,7 +64,6 @@ const breadcrumbs = [
|
|||||||
<template>
|
<template>
|
||||||
<Head :title="participant.display_name ?? participant.name" />
|
<Head :title="participant.display_name ?? participant.name" />
|
||||||
|
|
||||||
<AppLayout :breadcrumbs="breadcrumbs">
|
|
||||||
<div class="c-participant-show">
|
<div class="c-participant-show">
|
||||||
<div class="c-participant-show__container">
|
<div class="c-participant-show__container">
|
||||||
<h2 class="c-participant-show__title">
|
<h2 class="c-participant-show__title">
|
||||||
@ -80,7 +100,6 @@ const breadcrumbs = [
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</AppLayout>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@ -5,6 +5,23 @@ import LedgerList from '@/components/LedgerList.vue';
|
|||||||
import { Head, Link as InertiaLink } from '@inertiajs/vue3';
|
import { Head, Link as InertiaLink } from '@inertiajs/vue3';
|
||||||
import { route } from 'ziggy-js';
|
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<{
|
const props = defineProps<{
|
||||||
dynamic: {
|
dynamic: {
|
||||||
id: number;
|
id: number;
|
||||||
@ -65,7 +82,7 @@ const breadcrumbs = [
|
|||||||
<Chat :chat="dynamic.chat" :initial-messages="messages" :participants="dynamic.participants" :dynamic-id="dynamic.id" />
|
<Chat :chat="dynamic.chat" :initial-messages="messages" :participants="dynamic.participants" :dynamic-id="dynamic.id" />
|
||||||
|
|
||||||
<!-- Participants Component -->
|
<!-- Participants Component -->
|
||||||
<ParticipantsList :participants="dynamic.participants" />
|
<ParticipantsList :dynamic-id="dynamic.id" :participants="dynamic.participants" />
|
||||||
|
|
||||||
<!-- Ledgers List Component -->
|
<!-- Ledgers List Component -->
|
||||||
<LedgerList :dynamic-id="dynamic.id" :ledgers="dynamic.ledgers" />
|
<LedgerList :dynamic-id="dynamic.id" :ledgers="dynamic.ledgers" />
|
||||||
|
|||||||
@ -7,6 +7,28 @@ import AddMutationForm from '@/components/AddMutationForm.vue';
|
|||||||
import Chat from '@/components/Chat.vue';
|
import Chat from '@/components/Chat.vue';
|
||||||
import MutationList from '@/components/MutationList.vue';
|
import MutationList from '@/components/MutationList.vue';
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
layout: {
|
||||||
|
breadcrumbs: [
|
||||||
|
{
|
||||||
|
name: 'Dynamics',
|
||||||
|
href: route('dynamics.index'),
|
||||||
|
isCurrent: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'dynamic.name',
|
||||||
|
href: 'route(\'dynamics.show\', dynamic.id)',
|
||||||
|
isCurrent: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'ledger.name',
|
||||||
|
href: 'route(\'dynamics.ledgers.show\', { dynamic: dynamic.id, ledger: ledger.id })',
|
||||||
|
isCurrent: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
dynamic: {
|
dynamic: {
|
||||||
id: number;
|
id: number;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user