ui improvements
Some checks failed
linter / quality (push) Failing after 1m8s
tests / ci (8.3) (push) Failing after 52s
tests / ci (8.4) (push) Failing after 1m9s
tests / ci (8.5) (push) Failing after 1m9s

This commit is contained in:
Daan Meijer 2026-06-17 23:07:59 +02:00
parent ed16d5dcda
commit 06e5600447
5 changed files with 119 additions and 56 deletions

View File

@ -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()

View File

@ -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>

View File

@ -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>

View File

@ -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" />

View File

@ -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;