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
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
9114bb2e8d
commit
97dc7cdb2a
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user