Allow editing an existing transaction

Desktop reuses the add-form with a Modifier link per row; mobile gets
a "Dernières opérations" list under the quick-entry form since no
table exists there.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jeremy bayse
2026-08-01 08:37:50 +02:00
co-authored by Claude Sonnet 5
parent 9114bb2e8d
commit 97dc7cdb2a
3 changed files with 205 additions and 25 deletions
+52 -11
View File
@@ -30,6 +30,8 @@ class Index extends Component
public string $filterPaidBy = '';
public ?int $editingTransactionId = null;
public function mount(): void
{
$this->date = now()->toDateString();
@@ -51,21 +53,57 @@ class Index extends Component
$category = $household->categories()->findOrFail($this->categoryId);
$paidByUserId = $this->resolvePaidByUserId($household, $this->paidByUserId);
$household->transactions()->create([
'category_id' => $category->id,
'user_id' => auth()->id(),
'paid_by_user_id' => $paidByUserId,
'date' => $this->date,
'date_effective' => $this->dateEffective,
'amount' => $this->amount,
'details' => $this->details,
]);
if ($this->editingTransactionId) {
$transaction = $household->transactions()->findOrFail($this->editingTransactionId);
$this->reset(['categoryId', 'amount', 'details', 'paidByUserId']);
$transaction->update([
'category_id' => $category->id,
'paid_by_user_id' => $paidByUserId,
'date' => $this->date,
'date_effective' => $this->dateEffective,
'amount' => $this->amount,
'details' => $this->details,
]);
} else {
$household->transactions()->create([
'category_id' => $category->id,
'user_id' => auth()->id(),
'paid_by_user_id' => $paidByUserId,
'date' => $this->date,
'date_effective' => $this->dateEffective,
'amount' => $this->amount,
'details' => $this->details,
]);
}
$wasEditing = $this->editingTransactionId !== null;
$this->reset(['categoryId', 'amount', 'details', 'paidByUserId', 'editingTransactionId']);
$this->date = now()->toDateString();
$this->dateEffective = now()->toDateString();
$this->dispatch('transaction-added');
$this->dispatch($wasEditing ? 'transaction-updated' : 'transaction-added');
}
public function startEditTransaction(int $transactionId): void
{
$household = auth()->user()->currentHousehold;
$transaction = $household->transactions()->findOrFail($transactionId);
$this->editingTransactionId = $transaction->id;
$this->categoryId = $transaction->category_id;
$this->amount = (string) $transaction->amount;
$this->details = (string) $transaction->details;
$this->date = $transaction->date->toDateString();
$this->dateEffective = $transaction->date_effective->toDateString();
$this->paidByUserId = $transaction->paid_by_user_id ? (string) $transaction->paid_by_user_id : '';
}
public function cancelEditTransaction(): void
{
$this->reset(['categoryId', 'amount', 'details', 'paidByUserId', 'editingTransactionId']);
$this->date = now()->toDateString();
$this->dateEffective = now()->toDateString();
}
/**
@@ -256,6 +294,8 @@ class Index extends Component
->sortByDesc('total')
->values();
$recentTransactions = $allTransactions->sortByDesc('id')->take(5)->values();
return view('livewire.suivi.index', [
'transactions' => $transactions,
'running' => $running,
@@ -263,6 +303,7 @@ class Index extends Component
'categoryProgress' => $categoryProgress,
'members' => $members,
'paidBySummary' => $paidBySummary,
'recentTransactions' => $recentTransactions,
'nbrThisYear' => $allTransactions->filter(fn (Transaction $t) => $t->date->year === $year)->count(),
'nbrTotal' => $allTransactions->count(),
'lastEntry' => $allTransactions->sortByDesc('date')->first(),
+69 -14
View File
@@ -2,10 +2,11 @@
{{-- Mobile: quick single-purpose entry form --}}
<div
class="sm:hidden max-w-md mx-auto px-4 py-6 space-y-5"
x-data="{ toast: false }"
x-on:transaction-added.window="toast = true; setTimeout(() => toast = false, 2000)"
x-data="{ toast: false, message: '' }"
x-on:transaction-added.window="message = 'Opération ajoutée'; toast = true; setTimeout(() => toast = false, 2000)"
x-on:transaction-updated.window="message = 'Opération modifiée'; toast = true; setTimeout(() => toast = false, 2000)"
>
<h1 class="text-xl font-semibold text-text">Nouvelle opération</h1>
<h1 id="mobile-form-top" class="text-xl font-semibold text-text">{{ $editingTransactionId ? 'Modifier l\'opération' : 'Nouvelle opération' }}</h1>
@if ($pendingRecurrences->isNotEmpty())
<div class="space-y-3">
@@ -151,12 +152,23 @@
</fieldset>
@endif
<button
type="submit"
class="w-full py-4 rounded-lg bg-brand text-white text-lg font-semibold focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface"
>
Ajouter
</button>
<div class="flex items-center gap-3">
<button
type="submit"
class="flex-1 py-4 rounded-lg bg-brand text-white text-lg font-semibold focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface"
>
{{ $editingTransactionId ? 'Enregistrer' : 'Ajouter' }}
</button>
@if ($editingTransactionId)
<button
type="button"
wire:click="cancelEditTransaction"
class="py-4 px-4 rounded-lg border border-border-strong text-text text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
>
Annuler
</button>
@endif
</div>
</form>
<div
@@ -166,9 +178,43 @@
role="status"
class="fixed bottom-6 left-1/2 -translate-x-1/2 bg-positive-fill text-white text-sm font-medium px-4 py-2 rounded-full shadow-lg"
>
Opération ajoutée
<span x-text="'✓ ' + message"></span>
</div>
@if ($recentTransactions->isNotEmpty())
<div>
<p class="text-sm font-medium text-text-muted mb-2">Dernières opérations</p>
<ul class="space-y-2">
@foreach ($recentTransactions as $transaction)
<li class="bg-surface border border-border rounded-lg px-3 py-2 flex items-center justify-between gap-2" wire:key="recent-{{ $transaction->id }}">
<div class="min-w-0">
<p class="text-sm text-text truncate">
{{ $transaction->category->name }}
@if ($transaction->details)
<span class="text-text-muted"> {{ $transaction->details }}</span>
@endif
</p>
<p class="text-xs text-text-muted">{{ $transaction->date->translatedFormat('d M Y') }} · {{ number_format($transaction->amount, 2, ',', ' ') }} </p>
</div>
<div class="flex items-center gap-3 shrink-0">
<button
wire:click="startEditTransaction({{ $transaction->id }})"
x-on:click="$nextTick(() => document.getElementById('mobile-form-top')?.scrollIntoView({ behavior: 'smooth' }))"
aria-label="Modifier {{ $transaction->category->name }} du {{ $transaction->date->translatedFormat('d M Y') }}"
class="text-xs text-brand hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
>
Modifier
</button>
<button wire:click="deleteTransaction({{ $transaction->id }})" wire:confirm="Supprimer cet enregistrement ?" aria-label="Supprimer {{ $transaction->category->name }} du {{ $transaction->date->translatedFormat('d M Y') }}" class="text-xs text-danger hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
Suppr.
</button>
</div>
</li>
@endforeach
</ul>
</div>
@endif
</div>
{{-- Desktop / tablet: full table view --}}
@@ -255,6 +301,7 @@
@endif
<div class="bg-surface shadow rounded-lg p-4">
<p class="text-sm font-medium text-text-muted mb-3">{{ $editingTransactionId ? 'Modifier l\'opération' : 'Nouvelle opération' }}</p>
<form wire:submit="addTransaction" class="grid grid-cols-1 sm:grid-cols-6 gap-3 items-end">
<div>
<x-input-label for="date" value="Date" />
@@ -292,8 +339,13 @@
@endforeach
</select>
</div>
<div class="sm:col-span-6">
<x-primary-button>Ajouter</x-primary-button>
<div class="sm:col-span-6 flex items-center gap-3">
<x-primary-button>{{ $editingTransactionId ? 'Enregistrer' : 'Ajouter' }}</x-primary-button>
@if ($editingTransactionId)
<button type="button" wire:click="cancelEditTransaction" class="text-sm text-text-muted hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
Annuler
</button>
@endif
</div>
</form>
</div>
@@ -350,8 +402,11 @@
{{ number_format($running[$transaction->id] ?? 0, 2, ',', ' ') }}
</td>
<td class="px-4 py-2 whitespace-nowrap text-text-muted">{{ $transaction->date_effective->translatedFormat('d M Y') }}</td>
<td class="px-4 py-2 text-right">
<button wire:click="deleteTransaction({{ $transaction->id }})" wire:confirm="Supprimer cet enregistrement ?" aria-label="Supprimer l'opération {{ $transaction->category->name }} du {{ $transaction->date->translatedFormat('d M Y') }}" class="text-xs text-danger hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
<td class="px-4 py-2 text-right whitespace-nowrap">
<button wire:click="startEditTransaction({{ $transaction->id }})" aria-label="Modifier l'opération {{ $transaction->category->name }} du {{ $transaction->date->translatedFormat('d M Y') }}" class="text-xs text-brand hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
Modifier
</button>
<button wire:click="deleteTransaction({{ $transaction->id }})" wire:confirm="Supprimer cet enregistrement ?" aria-label="Supprimer l'opération {{ $transaction->category->name }} du {{ $transaction->date->translatedFormat('d M Y') }}" class="text-xs text-danger hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring ml-3">
Suppr.
</button>
</td>
+84
View File
@@ -2,6 +2,7 @@
use App\Livewire\Suivi\Index;
use App\Models\User;
use Illuminate\Database\Eloquent\ModelNotFoundException;
use Livewire\Livewire;
it('records a transaction for the current household', function (): void {
@@ -98,6 +99,89 @@ it('resets the form to defaults after adding a transaction', function (): void {
expect($component->get('details'))->toBe('');
});
it('prefills the form when starting to edit a transaction', function (): void {
$user = User::factory()->create();
$household = $user->currentHousehold;
$category = $household->categories()->create(['name' => 'Loyer', 'type' => 'depense', 'position' => 1]);
$transaction = $household->transactions()->create([
'category_id' => $category->id, 'user_id' => $user->id,
'date' => '2026-03-05', 'date_effective' => '2026-03-06', 'amount' => 1200, 'details' => 'Loyer mars',
]);
$component = Livewire::actingAs($user)->test(Index::class)->call('startEditTransaction', $transaction->id);
expect($component->get('editingTransactionId'))->toBe($transaction->id);
expect($component->get('categoryId'))->toBe($category->id);
expect($component->get('amount'))->toBe('1200.00');
expect($component->get('details'))->toBe('Loyer mars');
expect($component->get('date'))->toBe('2026-03-05');
expect($component->get('dateEffective'))->toBe('2026-03-06');
});
it('updates an existing transaction instead of creating a new one', function (): void {
$user = User::factory()->create();
$household = $user->currentHousehold;
$category = $household->categories()->create(['name' => 'Loyer', 'type' => 'depense', 'position' => 1]);
$newCategory = $household->categories()->create(['name' => 'Courses', 'type' => 'depense', 'position' => 2]);
$transaction = $household->transactions()->create([
'category_id' => $category->id, 'user_id' => $user->id,
'date' => '2026-03-05', 'date_effective' => '2026-03-05', 'amount' => 1200, 'details' => 'Loyer',
]);
Livewire::actingAs($user)
->test(Index::class)
->call('startEditTransaction', $transaction->id)
->set('categoryId', $newCategory->id)
->set('amount', '150')
->set('details', 'Courses rectifiées')
->call('addTransaction')
->assertDispatched('transaction-updated');
expect($household->transactions()->count())->toBe(1);
$transaction->refresh();
expect($transaction->category_id)->toBe($newCategory->id);
expect((float) $transaction->amount)->toBe(150.0);
expect($transaction->details)->toBe('Courses rectifiées');
});
it('cancels editing and resets the form without touching the transaction', function (): void {
$user = User::factory()->create();
$household = $user->currentHousehold;
$category = $household->categories()->create(['name' => 'Loyer', 'type' => 'depense', 'position' => 1]);
$transaction = $household->transactions()->create([
'category_id' => $category->id, 'user_id' => $user->id,
'date' => '2026-03-05', 'date_effective' => '2026-03-05', 'amount' => 1200, 'details' => 'Loyer',
]);
$component = Livewire::actingAs($user)
->test(Index::class)
->call('startEditTransaction', $transaction->id)
->call('cancelEditTransaction');
expect($component->get('editingTransactionId'))->toBeNull();
expect($component->get('categoryId'))->toBeNull();
expect($component->get('amount'))->toBe('');
$transaction->refresh();
expect((float) $transaction->amount)->toBe(1200.0);
});
it('does not allow editing a transaction belonging to another household', function (): void {
$owner = User::factory()->create();
$intruder = User::factory()->create();
$category = $owner->currentHousehold->categories()->create(['name' => 'Loyer', 'type' => 'depense', 'position' => 1]);
$transaction = $owner->currentHousehold->transactions()->create([
'category_id' => $category->id, 'user_id' => $owner->id,
'date' => '2026-03-05', 'date_effective' => '2026-03-05', 'amount' => 1200,
]);
expect(fn () => Livewire::actingAs($intruder)
->test(Index::class)
->call('startEditTransaction', $transaction->id)
)->toThrow(ModelNotFoundException::class);
});
it('lists active recurring transactions due this month as pending', function (): void {
$this->travelTo(now()->setDate(2026, 3, 10));