daan/ledgerrz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polishing, some breadcrumbs, predefined mutations implemented more

Browse Source
This commit is contained in:
Daan Meijer 2026-06-22 15:57:04 +02:00
parent 4ce510402c
commit c60033b365
15 changed files with 489 additions and 466 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/Http/Controllers/PredefinedMutationController.php
View File

@ -3,6 +3,7 @@
namespace App\Http\Controllers; namespace App\Http\Controllers;
use App\Models\Dynamic; use App\Models\Dynamic;
use App\Models\Ledger;
use App\Models\PredefinedMutation; use App\Models\PredefinedMutation;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests; use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Http\Request; use Illuminate\Http\Request;
@ -15,20 +16,21 @@ class PredefinedMutationController extends Controller
/** /**
* Display a listing of the resource. * Display a listing of the resource.
*/ */
public function index(Dynamic $dynamic) public function index(Dynamic $dynamic, Ledger $ledger)
{ {
$this->authorize('update', $dynamic); $this->authorize('update', $dynamic);
return Inertia::render('Dynamics/PredefinedMutations/Index', [ return Inertia::render('Ledgers/PredefinedMutations/Index', [
'dynamic' => $dynamic, 'dynamic' => $dynamic,
'predefined_mutations' => $dynamic->predefinedMutations()->latest()->get(), 'ledger' => $ledger,
'predefined_mutations' => $ledger->predefinedMutations()->latest()->get(),
]); ]);
} }
/** /**
* Store a newly created resource in storage. * Store a newly created resource in storage.
*/ */
public function store(Request $request, Dynamic $dynamic) public function store(Request $request, Dynamic $dynamic, Ledger $ledger)
{ {
$this->authorize('update', $dynamic); $this->authorize('update', $dynamic);
@ -36,23 +38,23 @@ class PredefinedMutationController extends Controller
'name' => ['required', 'string', 'max:255'], 'name' => ['required', 'string', 'max:255'],
'description' => ['nullable', 'string'], 'description' => ['nullable', 'string'],
'amount' => ['required', 'integer'], 'amount' => ['required', 'integer'],
'type' => ['required', 'string', 'in:reward,penalty'],
]); ]);
$dynamic->predefinedMutations()->create($request->all()); $ledger->predefinedMutations()->create($request->all());
return redirect()->route('dynamics.predefined-mutations.index', $dynamic); return redirect()->route('dynamics.ledgers.predefined-mutations.index', [$dynamic, $ledger]);
} }
/** /**
* Show the form for editing the specified resource. * Show the form for editing the specified resource.
*/ */
public function edit(Dynamic $dynamic, PredefinedMutation $predefinedMutation) public function edit(Dynamic $dynamic, Ledger $ledger, PredefinedMutation $predefinedMutation)
{ {
$this->authorize('update', $dynamic); $this->authorize('update', $dynamic);
return Inertia::render('Dynamics/PredefinedMutations/Edit', [ return Inertia::render('Ledgers/PredefinedMutations/Edit', [
'dynamic' => $dynamic, 'dynamic' => $dynamic,
'ledger' => $ledger,
'predefined_mutation' => $predefinedMutation, 'predefined_mutation' => $predefinedMutation,
]); ]);
} }
@ -60,7 +62,7 @@ class PredefinedMutationController extends Controller
/** /**
* Update the specified resource in storage. * Update the specified resource in storage.
*/ */
public function update(Request $request, Dynamic $dynamic, PredefinedMutation $predefinedMutation) public function update(Request $request, Dynamic $dynamic, Ledger $ledger, PredefinedMutation $predefinedMutation)
{ {
$this->authorize('update', $dynamic); $this->authorize('update', $dynamic);
@ -68,23 +70,22 @@ class PredefinedMutationController extends Controller
'name' => ['required', 'string', 'max:255'], 'name' => ['required', 'string', 'max:255'],
'description' => ['nullable', 'string'], 'description' => ['nullable', 'string'],
'amount' => ['required', 'integer'], 'amount' => ['required', 'integer'],
'type' => ['required', 'string', 'in:reward,penalty'],
]); ]);
$predefinedMutation->update($request->all()); $predefinedMutation->update($request->all());
return redirect()->route('dynamics.predefined-mutations.index', $dynamic); return redirect()->route('dynamics.ledgers.predefined-mutations.index', [$dynamic, $ledger]);
} }
/** /**
* Remove the specified resource from storage. * Remove the specified resource from storage.
*/ */
public function destroy(Dynamic $dynamic, PredefinedMutation $predefinedMutation) public function destroy(Dynamic $dynamic, Ledger $ledger, PredefinedMutation $predefinedMutation)
{ {
$this->authorize('update', $dynamic); $this->authorize('update', $dynamic);
$predefinedMutation->delete(); $predefinedMutation->delete();
return redirect()->route('dynamics.predefined-mutations.index', $dynamic); return redirect()->route('dynamics.ledgers.predefined-mutations.index', [$dynamic, $ledger]);
} }
} }

7
app/Models/PredefinedMutation.php
View File

@ -12,16 +12,15 @@ class PredefinedMutation extends Model
use HasFactory; use HasFactory;
protected $fillable = [ protected $fillable = [
'dynamic_id', 'ledger_id',
'name', 'name',
'description', 'description',
'amount', 'amount',
'type',
]; ];
public function dynamic(): BelongsTo public function ledger(): BelongsTo
{ {
return $this->belongsTo(Dynamic::class); return $this->belongsTo(Ledger::class);
} }
protected static function booted(): void protected static function booted(): void

3
database/migrations/2026_06_16_225928_create_predefined_mutations_table.php
View File

@ -13,11 +13,10 @@ return new class extends Migration
{ {
Schema::create('predefined_mutations', function (Blueprint $table) { Schema::create('predefined_mutations', function (Blueprint $table) {
$table->id(); $table->id();
$table->foreignId('dynamic_id')->constrained()->cascadeOnDelete(); $table->foreignId('ledger_id')->constrained()->cascadeOnDelete();
$table->string('name'); $table->string('name');
$table->text('description')->nullable(); $table->text('description')->nullable();
$table->integer('amount'); $table->integer('amount');
$table->string('type')->default('reward');
$table->timestamps(); $table->timestamps();
}); });
} }

4
resources/js/components/AddMutationForm.vue
View File

@ -3,8 +3,8 @@ import { useForm } from '@inertiajs/vue3';
import { route } from 'ziggy-js'; import { route } from 'ziggy-js';
const props = defineProps<{ const props = defineProps<{
dynamicId: number; dynamicId: string;
ledgerId: number; ledgerId: string;
}>(); }>();
const form = useForm({ const form = useForm({

13
resources/js/components/Chat.vue
View File

@ -33,18 +33,23 @@ const props = withDefaults(
} | null; } | null;
}>; }>;
dynamicId: string; dynamicId: string;
initialMessages: { initialMessages?: {
data: Array<any>; data: Array<any>;
next_page_url: string | null; next_page_url: string | null;
}; } | null;
}>(), }>(),
{ {
participants: () => [], participants: () => [],
initialMessages: null,
} }
); );
const messages = ref(props.initialMessages.data.reverse()); const messages = ref(
const nextPageUrl = ref(props.initialMessages.next_page_url); props.initialMessages
? props.initialMessages.data.slice().reverse()
: (props.chat.messages || []).slice()
);
const nextPageUrl = ref(props.initialMessages?.next_page_url || null);
function loadMoreMessages() { function loadMoreMessages() {
if (!nextPageUrl.value) { if (!nextPageUrl.value) {

4
resources/js/components/MutationList.vue
View File

@ -4,8 +4,8 @@ import { route } from 'ziggy-js';
import Chat from '@/components/Chat.vue'; import Chat from '@/components/Chat.vue';
const props = defineProps<{ const props = defineProps<{
dynamicId: number; dynamicId: string;
ledgerId: number; ledgerId: string;
ledgerAlignment?: string; ledgerAlignment?: string;
mutations: Array<{ mutations: Array<{
id: number; id: number;

10
resources/js/layouts/AppLayout.vue
View File

@ -2,16 +2,22 @@
import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
import type { BreadcrumbItem } from '@/types'; import type { BreadcrumbItem } from '@/types';
import { usePushNotifications } from '@/composables/usePushNotifications'; import { usePushNotifications } from '@/composables/usePushNotifications';
import { computed } from 'vue';
import { usePage } from '@inertiajs/vue3';
const { breadcrumbs = [] } = defineProps<{ const props = defineProps<{
breadcrumbs?: BreadcrumbItem[]; breadcrumbs?: BreadcrumbItem[];
}>(); }>();
const resolvedBreadcrumbs = computed(() => {
return props.breadcrumbs || (usePage().props.breadcrumbs as BreadcrumbItem[]) || [];
});
const { isSubscribed, subscribe, unsubscribe } = usePushNotifications(); const { isSubscribed, subscribe, unsubscribe } = usePushNotifications();
</script> </script>
<template> <template>
<AppLayout :breadcrumbs="breadcrumbs"> <AppLayout :breadcrumbs="resolvedBreadcrumbs">
<slot /> <slot />
<div class="fixed bottom-4 right-4"> <div class="fixed bottom-4 right-4">
<button <button

91
resources/js/pages/Dynamics/Participants/Show.vue
View File

@ -3,25 +3,25 @@ import { Head, Link } from '@inertiajs/vue3';
import { route } from 'ziggy-js'; import { route } from 'ziggy-js';
defineOptions({ defineOptions({
layout: { layout: (props: any) => ({
breadcrumbs: [ breadcrumbs: [
{ {
name: 'Dynamics', title: 'Dynamics',
href: route('dynamics.index'), href: route('dynamics.index'),
isCurrent: false,
}, },
{ {
name: 'dynamic.name', title: props.dynamic.name,
href: 'route(\'dynamics.show\', dynamic.id)', href: route('dynamics.show', props.dynamic.id),
isCurrent: false,
}, },
{ {
name: 'participant.display_name', title: props.participant.display_name ?? props.participant.name,
href: 'route(\'dynamics.users.show\', { dynamic: dynamic.id, user: participant.id })', href: route('dynamics.users.show', [
isCurrent: true, props.dynamic.id,
props.participant.id,
]),
}, },
], ],
}, }),
}); });
const props = defineProps<{ const props = defineProps<{
@ -44,21 +44,6 @@ const props = defineProps<{
ledger: { id: number; name: string }; ledger: { id: number; name: string };
}>; }>;
}>(); }>();
const breadcrumbs = [
{
name: 'Dynamics',
href: route('dynamics.index'),
},
{
name: props.dynamic.name,
href: route('dynamics.show', props.dynamic.id),
},
{
name: props.participant.display_name ?? props.participant.name,
href: route('dynamics.users.show', [props.dynamic.id, props.participant.id]),
},
];
</script> </script>
<template> <template>
@ -67,7 +52,10 @@ const 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">
Activity for {{ participant.display_name ?? participant.name }} ({{ participant.role.toUpperCase() }}) in {{ dynamic.name }} Activity for
{{ participant.display_name ?? participant.name }} ({{
participant.role.toUpperCase()
}}) in {{ dynamic.name }}
</h2> </h2>
<div class="c-participant-show__activity-list"> <div class="c-participant-show__activity-list">
@ -76,16 +64,45 @@ const breadcrumbs = [
:key="mutation.id" :key="mutation.id"
class="c-participant-show__activity-item" class="c-participant-show__activity-item"
> >
<Link :href="route('dynamics.ledgers.show', [dynamic.id, mutation.ledger.id])" class="block"> <Link
:href="
route('dynamics.ledgers.show', [
dynamic.id,
mutation.ledger.id,
])
"
class="block"
>
<div class="c-participant-show__activity-meta"> <div class="c-participant-show__activity-meta">
<span class="c-participant-show__activity-time"> <span class="c-participant-show__activity-time">
{{ new Date(mutation.created_at).toLocaleString() }} {{
new Date(
mutation.created_at,
).toLocaleString()
}}
</span> </span>
<span class="font-semibold ml-2" :class="mutation.amount > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'"> <span
{{ mutation.amount > 0 ? '+' : '' }}{{ mutation.amount }} class="ml-2 font-semibold"
:class="
mutation.amount > 0
? 'text-green-600 dark:text-green-400'
: 'text-red-600 dark:text-red-400'
"
>
{{ mutation.amount > 0 ? '+' : ''
}}{{ mutation.amount }}
</span> </span>
<span class="text-neutral-400 ml-2">on {{ mutation.ledger.name }}</span> <span class="ml-2 text-neutral-400"
<span class="uppercase text-xs px-1.5 py-0.5 rounded ml-auto" :class="mutation.status === 'approved' ? 'bg-green-100 text-green-700 dark:bg-green-950/30 dark:text-green-400' : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-950/30 dark:text-yellow-400'"> >on {{ mutation.ledger.name }}</span
>
<span
class="ml-auto rounded px-1.5 py-0.5 text-xs uppercase"
:class="
mutation.status === 'approved'
? 'bg-green-100 text-green-700 dark:bg-green-950/30 dark:text-green-400'
: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-950/30 dark:text-yellow-400'
"
>
{{ mutation.status }} {{ mutation.status }}
</span> </span>
</div> </div>
@ -94,8 +111,12 @@ const breadcrumbs = [
</p> </p>
</Link> </Link>
</div> </div>
<div v-if="mutations.length === 0" class="text-neutral-500 text-sm"> <div
No mutations recorded for this participant in this Dynamic yet. v-if="mutations.length === 0"
class="text-sm text-neutral-500"
>
No mutations recorded for this participant in this Dynamic
yet.
</div> </div>
</div> </div>
</div> </div>
@ -135,6 +156,6 @@ const breadcrumbs = [
} }
.c-participant-show__activity-desc { .c-participant-show__activity-desc {
@apply text-sm text-neutral-600 dark:text-neutral-400 mt-1; @apply mt-1 text-sm text-neutral-600 dark:text-neutral-400;
} }
</style> </style>

12
resources/js/pages/Dynamics/Show.vue
View File

@ -6,20 +6,18 @@ import { Head, Link as InertiaLink } from '@inertiajs/vue3';
import { route } from 'ziggy-js'; import { route } from 'ziggy-js';
defineOptions({ defineOptions({
layout: { layout: (props: any) => ({
breadcrumbs: [ breadcrumbs: [
{ {
name: 'Dynamics', title: 'Dynamics',
href: route('dynamics.index'), href: route('dynamics.index'),
isCurrent: false,
}, },
{ {
name: 'dynamic.name', title: props.dynamic.name,
href: 'route(\'dynamics.show\', dynamic.id)', href: route('dynamics.show', props.dynamic.uuid),
isCurrent: true,
}, },
], ],
}, }),
}); });
const props = defineProps<{ const props = defineProps<{

150
resources/js/pages/Ledgers/PredefinedMutations/Edit.vue Normal file
View File

@ -0,0 +1,150 @@
<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import { route } from 'ziggy-js';
defineOptions({
layout: (props: any) => ({
breadcrumbs: [
{
title: 'Dynamics',
href: route('dynamics.index'),
},
{
title: props.dynamic.name,
href: route('dynamics.show', props.dynamic.id),
},
{
title: props.ledger.name,
href: route('dynamics.ledgers.show', [props.dynamic.id, props.ledger.id]),
},
{
title: 'Predefined Mutations',
href: route('dynamics.ledgers.predefined-mutations.index', [props.dynamic.id, props.ledger.id]),
},
{
title: 'Edit',
href: route('dynamics.ledgers.predefined-mutations.edit', [props.dynamic.id, props.ledger.id, props.predefined_mutation.uuid]),
},
],
}),
});
const props = defineProps<{
dynamic: {
id: number;
name: string;
};
ledger: {
id: number;
name: string;
};
predefined_mutation: {
id: number;
name: string;
description: string;
amount: number;
uuid: string;
};
}>();
const form = useForm({
name: props.predefined_mutation.name,
description: props.predefined_mutation.description,
amount: props.predefined_mutation.amount,
});
function submit() {
form.put(route('dynamics.ledgers.predefined-mutations.update', [props.dynamic.id, props.ledger.id, props.predefined_mutation.uuid]));
}
</script>
<template>
<Head title="Edit Predefined Mutation" />
<div class="c-predefined-mutation-edit">
<div class="c-predefined-mutation-edit__container">
<div class="c-predefined-mutation-edit__card">
<div class="c-predefined-mutation-edit__body">
<h3 class="c-predefined-mutation-edit__title">
Edit {{ predefined_mutation.name }} on {{ ledger.name }}
</h3>
<form @submit.prevent="submit" class="c-predefined-mutation-edit__form">
<div class="c-predefined-mutation-edit__field">
<label for="name" class="c-predefined-mutation-edit__label">Name</label>
<input v-model="form.name" id="name" type="text" class="c-predefined-mutation-edit__input" />
</div>
<div class="c-predefined-mutation-edit__field">
<label for="description" class="c-predefined-mutation-edit__label">Description</label>
<textarea v-model="form.description" id="description" rows="4" class="c-predefined-mutation-edit__textarea"></textarea>
</div>
<div class="c-predefined-mutation-edit__field">
<label for="amount" class="c-predefined-mutation-edit__label">Amount</label>
<input v-model="form.amount" id="amount" type="number" class="c-predefined-mutation-edit__input" />
</div>
<div class="c-predefined-mutation-edit__actions">
<button type="submit" :disabled="form.processing" class="c-predefined-mutation-edit__submit-btn">
Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<style scoped>
@reference "../../../../css/app.css";
.c-predefined-mutation-edit {
@apply py-12;
}
.c-predefined-mutation-edit__container {
@apply mx-auto max-w-7xl sm:px-6 lg:px-8;
}
.c-predefined-mutation-edit__card {
@apply overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800;
}
.c-predefined-mutation-edit__body {
@apply p-6 text-gray-900 dark:text-gray-100;
}
.c-predefined-mutation-edit__title {
@apply text-lg font-medium;
}
.c-predefined-mutation-edit__form {
@apply mt-6 space-y-6;
}
.c-predefined-mutation-edit__field {
@apply block;
}
.c-predefined-mutation-edit__label {
@apply block text-sm font-medium text-gray-700 dark:text-gray-300;
}
.c-predefined-mutation-edit__input {
@apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
}
.c-predefined-mutation-edit__textarea {
@apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
}
.c-predefined-mutation-edit__actions {
@apply flex items-center gap-4;
}
.c-predefined-mutation-edit__submit-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>

243
resources/js/pages/Ledgers/PredefinedMutations/Index.vue
View File

@ -1,9 +1,31 @@
<script setup lang="ts"> <script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3'; import { Head, useForm, Link as InertiaLink } from '@inertiajs/vue3';
import { route } from 'ziggy-js'; import { route } from 'ziggy-js';
import AppLayout from '@/layouts/AppLayout.vue';
import { defineProps } from 'vue'; import { defineProps } from 'vue';
defineOptions({
layout: (props: any) => ({
breadcrumbs: [
{
title: 'Dynamics',
href: route('dynamics.index'),
},
{
title: props.dynamic.name,
href: route('dynamics.show', props.dynamic.id),
},
{
title: props.ledger.name,
href: route('dynamics.ledgers.show', [props.dynamic.id, props.ledger.id]),
},
{
title: 'Predefined Mutations',
href: route('dynamics.ledgers.predefined-mutations.index', [props.dynamic.id, props.ledger.id]),
},
],
}),
});
const props = defineProps<{ const props = defineProps<{
dynamic: { dynamic: {
id: number; id: number;
@ -18,6 +40,7 @@ const props = defineProps<{
name: string; name: string;
description: string; description: string;
amount: number; amount: number;
uuid: string;
}>; }>;
}>(); }>();
@ -27,133 +50,135 @@ const form = useForm({
amount: 0, amount: 0,
}); });
const breadcrumbs = [
{
name: 'Dynamics',
href: route('dynamics.index'),
},
{
name: props.dynamic.name,
href: route('dynamics.show', props.dynamic.id),
},
{
name: props.ledger.name,
href: route('dynamics.ledgers.show', [props.dynamic.id, props.ledger.id]),
},
{
name: 'Predefined Mutations',
href: route('dynamics.ledgers.predefined-mutations.index', [props.dynamic.id, props.ledger.id]),
},
];
function submit() { function submit() {
form.post(route('dynamics.ledgers.predefined-mutations.store', [props.dynamic.id, props.ledger.id]), { form.post(route('dynamics.ledgers.predefined-mutations.store', [props.dynamic.id, props.ledger.id]), {
onSuccess: () => form.reset(), onSuccess: () => form.reset(),
}); });
} }
function destroy(uuid: string) {
if (confirm('Are you sure you want to delete this predefined mutation?')) {
const deleteForm = useForm({});
deleteForm.delete(route('dynamics.ledgers.predefined-mutations.destroy', [props.dynamic.id, props.ledger.id, uuid]));
}
}
</script> </script>
<template> <template>
<Head title="Predefined Mutations" /> <Head title="Predefined Mutations" />
<AppLayout :breadcrumbs="breadcrumbs"> <div class="c-predefined-mutations">
<div class="c-predefined-mutations"> <div class="c-predefined-mutations__container">
<div class="c-predefined-mutations__container"> <div class="c-predefined-mutations__card">
<div class="c-predefined-mutations__card"> <div class="c-predefined-mutations__body">
<div class="c-predefined-mutations__body"> <h3 class="c-predefined-mutations__title">
<h3 class="c-predefined-mutations__title"> Predefined Mutations for {{ ledger.name }}
Predefined Mutations for {{ ledger.name }} </h3>
</h3>
<div class="c-predefined-mutations__list"> <div class="c-predefined-mutations__list">
<div <div
v-for="mutation in predefined_mutations" v-for="mutation in predefined_mutations"
:key="mutation.id" :key="mutation.id"
class="c-predefined-mutations__item" class="c-predefined-mutations__item"
> >
<div class="c-predefined-mutations__item-details"> <div class="c-predefined-mutations__item-details">
<h4 class="c-predefined-mutations__item-name"> <h4 class="c-predefined-mutations__item-name">
{{ mutation.name }} {{ mutation.name }}
</h4> </h4>
<p class="c-predefined-mutations__item-description"> <p class="c-predefined-mutations__item-description">
{{ mutation.description }} {{ mutation.description }}
</p> </p>
</div> </div>
<div class="flex items-center gap-6">
<div class="c-predefined-mutations__item-amount"> <div class="c-predefined-mutations__item-amount">
{{ mutation.amount }} {{ mutation.amount }}
</div> </div>
<div class="flex items-center gap-2">
<InertiaLink
:href="route('dynamics.ledgers.predefined-mutations.edit', [dynamic.id, ledger.id, mutation.uuid])"
class="c-predefined-mutations__edit-btn"
>
Edit
</InertiaLink>
<button
@click="destroy(mutation.uuid)"
class="c-predefined-mutations__delete-btn"
>
Delete
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="c-predefined-mutations__card mt-8"> <div class="c-predefined-mutations__card mt-8">
<div class="c-predefined-mutations__body"> <div class="c-predefined-mutations__body">
<h3 class="c-predefined-mutations__title"> <h3 class="c-predefined-mutations__title">
Create New Predefined Mutation Create New Predefined Mutation
</h3> </h3>
<form <form
@submit.prevent="submit" @submit.prevent="submit"
class="c-predefined-mutations__form" class="c-predefined-mutations__form"
> >
<div class="c-predefined-mutations__field"> <div class="c-predefined-mutations__field">
<label <label
for="name" for="name"
class="c-predefined-mutations__label" class="c-predefined-mutations__label"
>Name</label >Name</label
> >
<input <input
v-model="form.name" v-model="form.name"
id="name" id="name"
type="text" type="text"
class="c-predefined-mutations__input" class="c-predefined-mutations__input"
/> />
</div> </div>
<div class="c-predefined-mutations__field"> <div class="c-predefined-mutations__field">
<label <label
for="description" for="description"
class="c-predefined-mutations__label" class="c-predefined-mutations__label"
>Description</label >Description</label
> >
<textarea <textarea
v-model="form.description" v-model="form.description"
id="description" id="description"
rows="4" rows="4"
class="c-predefined-mutations__textarea" class="c-predefined-mutations__textarea"
></textarea> ></textarea>
</div> </div>
<div class="c-predefined-mutations__field"> <div class="c-predefined-mutations__field">
<label <label
for="amount" for="amount"
class="c-predefined-mutations__label" class="c-predefined-mutations__label"
>Amount</label >Amount</label
> >
<input <input
v-model="form.amount" v-model="form.amount"
id="amount" id="amount"
type="number" type="number"
class="c-predefined-mutations__input" class="c-predefined-mutations__input"
/> />
</div> </div>
<div class="c-predefined-mutations__actions"> <div class="c-predefined-mutations__actions">
<button <button
type="submit" type="submit"
:disabled="form.processing" :disabled="form.processing"
class="c-predefined-mutations__submit-btn" class="c-predefined-mutations__submit-btn"
> >
Create Create
</button> </button>
</div> </div>
</form> </form>
</div>
</div> </div>
</div> </div>
</div> </div>
</AppLayout> </div>
</template> </template>
<style scoped> <style scoped>
@ -203,6 +228,14 @@ function submit() {
@apply text-lg font-semibold; @apply text-lg font-semibold;
} }
.c-predefined-mutations__edit-btn {
@apply inline-flex cursor-pointer items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-semibold text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600;
}
.c-predefined-mutations__delete-btn {
@apply inline-flex cursor-pointer items-center rounded border border-transparent bg-red-600 px-2.5 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
}
.c-predefined-mutations__form { .c-predefined-mutations__form {
@apply mt-6 space-y-6; @apply mt-6 space-y-6;
} }
@ -223,10 +256,6 @@ function submit() {
@apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600; @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
} }
.c-predefined-mutations__select {
@apply mt-1 block w-full rounded-md border-gray-300 bg-white p-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
}
.c-predefined-mutations__actions { .c-predefined-mutations__actions {
@apply flex items-center gap-4; @apply flex items-center gap-4;
} }

17
resources/js/pages/Ledgers/Show.vue
View File

@ -8,25 +8,22 @@ import Chat from '@/components/Chat.vue';
import MutationList from '@/components/MutationList.vue'; import MutationList from '@/components/MutationList.vue';
defineOptions({ defineOptions({
layout: { layout: (props: any) => ({
breadcrumbs: [ breadcrumbs: [
{ {
name: 'Dynamics', title: 'Dynamics',
href: route('dynamics.index'), href: route('dynamics.index'),
isCurrent: false,
}, },
{ {
name: 'dynamic.name', title: props.dynamic.name,
href: 'route(\'dynamics.show\', dynamic.id)', href: route('dynamics.show', props.dynamic.id),
isCurrent: false,
}, },
{ {
name: 'ledger.name', title: props.ledger.name,
href: 'route(\'dynamics.ledgers.show\', { dynamic: dynamic.id, ledger: ledger.id })', href: route('dynamics.ledgers.show', [props.dynamic.id, props.ledger.id]),
isCurrent: true,
}, },
], ],
}, }),
}); });
const props = defineProps<{ const props = defineProps<{

260
resources/js/pages/Participants/Show.vue
View File

@ -1,260 +0,0 @@
<script setup lang="ts">
import { Head, Link as InertiaLink } from '@inertiajs/vue3';
import { route } from 'ziggy-js';
const props = defineProps<{
dynamic: {
id: number;
name: string;
};
participant: {
id: number;
name: string;
display_name: string | null;
role: string;
};
mutations: Array<{
id: number;
ledger_id: number;
ledger: {
id: number;
name: string;
alignment: string;
};
amount: number;
description: string;
status: string;
created_at: string;
}>;
}>();
const breadcrumbs = [
{
name: 'Dynamics',
href: route('dynamics.index'),
},
{
name: props.dynamic.name,
href: route('dynamics.show', props.dynamic.id),
},
{
name: props.participant.display_name ?? props.participant.name,
href: route('dynamics.users.show', [props.dynamic.id, props.participant.id]),
},
];
function getAmountClass(amount: number, alignment: string): string {
if (alignment === 'positive') {
return amount > 0
? 'c-participant-show__activity-amount--positive'
: 'c-participant-show__activity-amount--negative';
}
if (alignment === 'negative') {
return amount < 0
? 'c-participant-show__activity-amount--positive'
: 'c-participant-show__activity-amount--negative';
}
return 'c-participant-show__activity-amount--neutral';
}
</script>
<template>
<Head :title="participant.display_name ?? participant.name" />
<div class="c-participant-show">
<div class="c-participant-show__container">
<!-- Header Card -->
<div class="c-participant-show__card">
<div class="c-participant-show__body">
<div class="flex justify-between items-center">
<div>
<span class="c-participant-show__role-badge">
{{ participant.role }}
</span>
<h3 class="c-participant-show__title mt-1">
{{ participant.display_name ?? participant.name }}
</h3>
<p v-if="participant.display_name" class="c-participant-show__subtitle">
Real Name: {{ participant.name }}
</p>
</div>
<InertiaLink :href="route('dynamics.show', dynamic.id)" class="c-participant-show__back-btn">
Back to Dynamic
</InertiaLink>
</div>
</div>
</div>
<!-- Recent Activity Block -->
<div class="c-participant-show__activity mt-8">
<h4 class="c-participant-show__activity-title">Recent Activity</h4>
<div v-if="mutations.length > 0" class="c-participant-show__activity-list mt-4">
<div
v-for="mutation in mutations"
:key="mutation.id"
class="c-participant-show__activity-item"
>
<div class="flex justify-between items-start">
<div>
<InertiaLink
:href="route('dynamics.ledgers.show', [dynamic.id, mutation.ledger_id])"
class="c-participant-show__activity-ledger"
>
{{ mutation.ledger.name }}
</InertiaLink>
<p class="c-participant-show__activity-desc mt-1">
{{ mutation.description }}
</p>
</div>
<div class="text-right">
<span
:class="getAmountClass(mutation.amount, mutation.ledger.alignment)"
class="c-participant-show__activity-amount"
>
{{ mutation.amount > 0 ? '+' : '' }}{{ mutation.amount }}
</span>
<div class="c-participant-show__activity-meta mt-1">
<span
:class="{
'c-participant-show__activity-status--pending': mutation.status === 'pending',
'c-participant-show__activity-status--approved': mutation.status === 'approved',
'c-participant-show__activity-status--rejected': mutation.status === 'rejected',
}"
class="c-participant-show__activity-status"
>
{{ mutation.status }}
</span>
<span class="c-participant-show__activity-time ml-2">
{{ new Date(mutation.created_at).toLocaleDateString() }}
</span>
</div>
</div>
</div>
</div>
</div>
<div v-else class="c-participant-show__empty mt-4">
No recent activity found for this participant.
</div>
</div>
</div>
</div>
</template>
<style scoped>
@reference "../../../css/app.css";
.c-participant-show {
@apply py-12;
}
.c-participant-show__container {
@apply mx-auto max-w-7xl sm:px-6 lg:px-8;
}
.c-participant-show__card {
@apply overflow-hidden;
background-color: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.c-participant-show__body {
@apply p-6;
color: var(--foreground);
}
.c-participant-show__role-badge {
@apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold uppercase tracking-wider;
background-color: var(--primary);
color: var(--primary-foreground);
opacity: 0.8;
}
.c-participant-show__title {
@apply text-2xl font-bold;
}
.c-participant-show__subtitle {
@apply mt-1 text-sm;
color: var(--muted-foreground);
}
.c-participant-show__back-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-participant-show__activity-title {
@apply text-lg font-medium;
color: var(--foreground);
}
.c-participant-show__activity-list {
@apply space-y-4;
}
.c-participant-show__activity-item {
@apply p-4;
background-color: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.c-participant-show__activity-ledger {
@apply font-semibold hover:underline text-sm;
color: var(--primary);
}
.c-participant-show__activity-desc {
@apply text-sm;
color: var(--foreground);
}
.c-participant-show__activity-amount {
@apply font-bold text-sm;
}
.c-participant-show__activity-amount--positive {
@apply text-green-500;
}
.c-participant-show__activity-amount--negative {
@apply text-red-500;
}
.c-participant-show__activity-amount--neutral {
@apply text-neutral-500;
}
.c-participant-show__activity-meta {
@apply flex items-center justify-end text-xs;
}
.c-participant-show__activity-status {
@apply rounded px-1.5 py-0.5 text-[9px] font-medium tracking-wider uppercase;
}
.c-participant-show__activity-status--pending {
@apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
}
.c-participant-show__activity-status--approved {
@apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
}
.c-participant-show__activity-status--rejected {
@apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
}
.c-participant-show__activity-time {
color: var(--muted-foreground);
}
.c-participant-show__empty {
@apply text-sm text-center py-8;
color: var(--muted-foreground);
}
</style>

2
routes/web.php
View File

@ -30,7 +30,7 @@ Route::middleware(['auth', 'verified'])->group(function () {
Route::put('/dynamics/{dynamic}/ledgers/{ledger}/close', [LedgerController::class, 'close'])->name('dynamics.ledgers.close'); Route::put('/dynamics/{dynamic}/ledgers/{ledger}/close', [LedgerController::class, 'close'])->name('dynamics.ledgers.close');
Route::resource('dynamics.ledgers', LedgerController::class)->scoped()->except(['create']); Route::resource('dynamics.ledgers', LedgerController::class)->scoped()->except(['create']);
Route::resource('dynamics.predefined-mutations', PredefinedMutationController::class)->scoped(); Route::resource('dynamics.ledgers.predefined-mutations', PredefinedMutationController::class)->scoped();
Route::put('/dynamics/{dynamic}/ledgers/{ledger}/mutations/{mutation}/void', [MutationController::class, 'void'])->name('dynamics.ledgers.mutations.void'); Route::put('/dynamics/{dynamic}/ledgers/{ledger}/mutations/{mutation}/void', [MutationController::class, 'void'])->name('dynamics.ledgers.mutations.void');
Route::resource('dynamics.ledgers.mutations', MutationController::class)->scoped(); Route::resource('dynamics.ledgers.mutations', MutationController::class)->scoped();

110
tests/Feature/PredefinedMutationTest.php
View File

@ -1,16 +1,18 @@
<?php <?php
use App\Models\Dynamic;
use App\Models\PredefinedMutation;
use App\Models\User; use App\Models\User;
use App\Models\Dynamic;
use App\Models\Ledger;
use App\Models\PredefinedMutation;
test('owner can view predefined mutations for dynamic', function () { test('owner can view predefined mutations for ledger', function () {
$owner = User::factory()->create(); $owner = User::factory()->create();
$dynamic = Dynamic::factory()->create(); $dynamic = Dynamic::factory()->create();
$dynamic->participants()->attach($owner->id, ['role' => 'owner']); $dynamic->participants()->attach($owner->id, ['role' => 'owner']);
$ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id]);
$predefined = PredefinedMutation::create([ $predefined = PredefinedMutation::create([
'dynamic_id' => $dynamic->id, 'ledger_id' => $ledger->id,
'name' => 'Weekly Room Cleaning', 'name' => 'Weekly Room Cleaning',
'description' => 'Cleaned up the master bedroom', 'description' => 'Cleaned up the master bedroom',
'amount' => 20, 'amount' => 20,
@ -18,71 +20,147 @@ test('owner can view predefined mutations for dynamic', function () {
$this->actingAs($owner); $this->actingAs($owner);
$response = $this->get(route('dynamics.predefined-mutations.index', $dynamic->uuid)); $response = $this->get(route('dynamics.ledgers.predefined-mutations.index', [$dynamic->uuid, $ledger->uuid]));
$response->assertOk(); $response->assertOk();
$response->assertInertia(fn ($page) => $page $response->assertInertia(fn ($page) => $page
->component('Dynamics/PredefinedMutations/Index') ->component('Ledgers/PredefinedMutations/Index')
->where('dynamic.id', $dynamic->id)
->where('ledger.id', $ledger->id)
->has('predefined_mutations', 1) ->has('predefined_mutations', 1)
->where('predefined_mutations.0.name', 'Weekly Room Cleaning') ->where('predefined_mutations.0.name', 'Weekly Room Cleaning')
); );
}); });
test('non-owner cannot view predefined mutations for dynamic', function () { test('non-owner cannot view predefined mutations for ledger', function () {
$owner = User::factory()->create(); $owner = User::factory()->create();
$participant = User::factory()->create(); $participant = User::factory()->create();
$dynamic = Dynamic::factory()->create(); $dynamic = Dynamic::factory()->create();
$dynamic->participants()->attach($owner->id, ['role' => 'owner']); $dynamic->participants()->attach($owner->id, ['role' => 'owner']);
$dynamic->participants()->attach($participant->id, ['role' => 'participant']); $dynamic->participants()->attach($participant->id, ['role' => 'participant']);
$ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id]);
$this->actingAs($participant); $this->actingAs($participant);
$response = $this->get(route('dynamics.predefined-mutations.index', $dynamic->uuid)); $response = $this->get(route('dynamics.ledgers.predefined-mutations.index', [$dynamic->uuid, $ledger->uuid]));
$response->assertStatus(403); $response->assertStatus(403);
}); });
test('owner can create predefined mutations for dynamic', function () { test('owner can create predefined mutations for ledger', function () {
$owner = User::factory()->create(); $owner = User::factory()->create();
$dynamic = Dynamic::factory()->create(); $dynamic = Dynamic::factory()->create();
$dynamic->participants()->attach($owner->id, ['role' => 'owner']); $dynamic->participants()->attach($owner->id, ['role' => 'owner']);
$ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id]);
$this->actingAs($owner); $this->actingAs($owner);
$response = $this->post(route('dynamics.predefined-mutations.store', $dynamic->uuid), [ $response = $this->post(route('dynamics.ledgers.predefined-mutations.store', [$dynamic->uuid, $ledger->uuid]), [
'name' => 'Polished mirrors', 'name' => 'Polished mirrors',
'description' => 'Mirror polishing in dungeon', 'description' => 'Mirror polishing in dungeon',
'amount' => 15, 'amount' => 15,
'type' => 'reward',
]); ]);
$response->assertRedirect(); $response->assertRedirect();
$this->assertDatabaseHas('predefined_mutations', [ $this->assertDatabaseHas('predefined_mutations', [
'dynamic_id' => $dynamic->id, 'ledger_id' => $ledger->id,
'name' => 'Polished mirrors', 'name' => 'Polished mirrors',
'amount' => 15, 'amount' => 15,
]); ]);
}); });
test('non-owner cannot create predefined mutations for dynamic', function () { test('non-owner cannot create predefined mutations for ledger', function () {
$owner = User::factory()->create(); $owner = User::factory()->create();
$participant = User::factory()->create(); $participant = User::factory()->create();
$dynamic = Dynamic::factory()->create(); $dynamic = Dynamic::factory()->create();
$dynamic->participants()->attach($owner->id, ['role' => 'owner']); $dynamic->participants()->attach($owner->id, ['role' => 'owner']);
$dynamic->participants()->attach($participant->id, ['role' => 'participant']); $dynamic->participants()->attach($participant->id, ['role' => 'participant']);
$ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id]);
$this->actingAs($participant); $this->actingAs($participant);
$response = $this->post(route('dynamics.predefined-mutations.store', $dynamic->uuid), [ $response = $this->post(route('dynamics.ledgers.predefined-mutations.store', [$dynamic->uuid, $ledger->uuid]), [
'name' => 'Polished mirrors', 'name' => 'Polished mirrors',
'description' => 'Mirror polishing in dungeon', 'description' => 'Mirror polishing in dungeon',
'amount' => 15, 'amount' => 15,
'type' => 'reward',
]); ]);
$response->assertStatus(403); $response->assertStatus(403);
$this->assertDatabaseMissing('predefined_mutations', [ $this->assertDatabaseMissing('predefined_mutations', [
'dynamic_id' => $dynamic->id, 'ledger_id' => $ledger->id,
'name' => 'Polished mirrors', 'name' => 'Polished mirrors',
]); ]);
}); });
test('owner can view edit form for predefined mutation', function () {
$owner = User::factory()->create();
$dynamic = Dynamic::factory()->create();
$dynamic->participants()->attach($owner->id, ['role' => 'owner']);
$ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id]);
$predefined = PredefinedMutation::create([
'ledger_id' => $ledger->id,
'name' => 'Polished mirrors',
'description' => 'Mirror polishing in dungeon',
'amount' => 15,
]);
$this->actingAs($owner);
$response = $this->get(route('dynamics.ledgers.predefined-mutations.edit', [$dynamic->uuid, $ledger->uuid, $predefined->uuid]));
$response->assertOk();
$response->assertInertia(fn ($page) => $page
->component('Ledgers/PredefinedMutations/Edit')
->where('predefined_mutation.id', $predefined->id)
);
});
test('owner can update predefined mutation', function () {
$owner = User::factory()->create();
$dynamic = Dynamic::factory()->create();
$dynamic->participants()->attach($owner->id, ['role' => 'owner']);
$ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id]);
$predefined = PredefinedMutation::create([
'ledger_id' => $ledger->id,
'name' => 'Old Name',
'amount' => 10,
]);
$this->actingAs($owner);
$response = $this->put(route('dynamics.ledgers.predefined-mutations.update', [$dynamic->uuid, $ledger->uuid, $predefined->uuid]), [
'name' => 'New Name',
'amount' => 20,
]);
$response->assertRedirect();
$this->assertDatabaseHas('predefined_mutations', [
'id' => $predefined->id,
'name' => 'New Name',
'amount' => 20,
]);
});
test('owner can delete predefined mutation', function () {
$owner = User::factory()->create();
$dynamic = Dynamic::factory()->create();
$dynamic->participants()->attach($owner->id, ['role' => 'owner']);
$ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id]);
$predefined = PredefinedMutation::create([
'ledger_id' => $ledger->id,
'name' => 'To Delete',
'amount' => 10,
]);
$this->actingAs($owner);
$response = $this->delete(route('dynamics.ledgers.predefined-mutations.destroy', [$dynamic->uuid, $ledger->uuid, $predefined->uuid]));
$response->assertRedirect();
$this->assertDatabaseMissing('predefined_mutations', [
'id' => $predefined->id,
]);
});