cclohmar/NextExpense
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

refactor: remove duplicate edit from event page, add delete to edit form

Browse source 
- Event page now shows read-only metadata only (no edit/delete buttons)
- Edit works from dashboard (Edit button on event cards)
- Delete added to the edit form as a button alongside Save/Cancel
- htmx.trigger #delete div in the edit form fragment
This commit is contained in:
Claus Lohmar 2026-06-03 08:09:31 +00:00
parent b9721a9bab
commit 0d42a35cb8
2 changed files with 14 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
internal/handlers/events.go
View file

@ -316,10 +316,15 @@ func (h *EventHandler) EditEvent(w http.ResponseWriter, r *http.Request) {
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Save Changes</button>
<button type="button" class="btn btn-secondary btn-block" style="margin-top: 0.5rem;"
onclick="document.getElementById('create-event-form').innerHTML='';document.getElementById('create-event-form').classList.add('hidden')">Cancel</button>
<div style="display:flex; gap:0.5rem; margin-top:0.5rem;">
<button type="button" class="btn btn-secondary" style="flex:1; text-align:center;"
onclick="document.getElementById('create-event-form').innerHTML='';document.getElementById('create-event-form').classList.add('hidden')">Cancel</button>
<button type="button" class="btn btn-secondary" style="flex:1; text-align:center; color:#fca5a5; border-color:#7f1d1d;"
onclick="if(confirm('Delete this event and all its receipts?')){htmx.trigger('#delete-event-%s','click')}">Delete</button>
<div hx-delete="/events/%s" hx-target="body" hx-push-url="true" id="delete-event-%s" style="display:none"></div>
</div>
</form>
</div>`, event.ID, template.HTMLEscapeString(event.Name), template.HTMLEscapeString(event.BaseCurrency), template.HTMLEscapeString(rcptCur), sampleClm)
</div>`, event.ID, template.HTMLEscapeString(event.Name), template.HTMLEscapeString(event.BaseCurrency), template.HTMLEscapeString(rcptCur), sampleClm, event.ID, event.ID, event.ID)
}
// ---------------------------------------------------------------------------

58
templates/event_expenses.html
View file

@ -20,62 +20,16 @@
</header>
<main class="main-content">
<!-- Event Metadata -->
<!-- Event Metadata (read-only — edit via dashboard) -->
<div style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem;">
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<div style="font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;">Event Details</div>
<div style="display: flex; gap: 0.5rem;">
<button id="edit-toggle-btn" class="btn btn-secondary btn-sm" onclick="toggleEdit()" style="font-size: 0.75rem;">🔒 Edit</button>
<button class="btn btn-secondary btn-sm" style="font-size: 0.75rem; color: #fca5a5; border-color: #7f1d1d;"
onclick="if(confirm('Delete this event and all its receipts?')){htmx.trigger('#delete-event','click')}">🗑️</button>
<div hx-delete="/events/{{.Event.ID}}" hx-target="body" hx-push-url="true" id="delete-event" style="display:none"></div>
</div>
<div style="font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;">Event Details</div>
<div class="form-row" style="margin:0;">
<div style="flex:2; font-size:0.9rem; color:var(--color-text);">{{.Event.Name}}</div>
<div style="flex:1; font-size:0.9rem; color:var(--color-text);">{{.Event.BaseCurrency}}</div>
<div style="flex:1; font-size:0.9rem; color:var(--color-text-muted);">{{printf "%.6f" .Event.ExchangeRate}}</div>
</div>
<form id="event-meta-form" hx-put="/events/{{.Event.ID}}" hx-target="body" hx-push-url="true">
<div class="form-row">
<div class="form-group" style="flex:2">
<label class="form-label">Event</label>
<input type="text" name="name" value="{{.Event.Name}}" readonly
style="width:100%; padding:0.5rem; font-size:0.9rem; background:transparent; border:1px solid transparent; border-radius:0.375rem; color:var(--color-text);">
</div>
<div class="form-group" style="flex:1">
<label class="form-label">Claim Currency</label>
<input type="text" name="base_currency" value="{{.Event.BaseCurrency}}" readonly maxlength="3"
style="width:100%; padding:0.5rem; font-size:0.9rem; background:transparent; border:1px solid transparent; border-radius:0.375rem; color:var(--color-text); text-transform:uppercase;">
</div>
<div class="form-group" style="flex:1">
<label class="form-label">Rate</label>
<input type="text" name="exchange_rate" value="{{printf "%.6f" .Event.ExchangeRate}}" readonly
style="width:100%; padding:0.5rem; font-size:0.9rem; background:transparent; border:1px solid transparent; border-radius:0.375rem; color:var(--color-text-muted);">
</div>
</div>
</form>
</div>
<script>
function toggleEdit() {
var inputs = document.querySelectorAll('#event-meta-form input');
var btn = document.getElementById('edit-toggle-btn');
var isEditing = btn.textContent.includes('Unlock');
inputs.forEach(function(inp) {
inp.readOnly = isEditing;
if (isEditing) {
inp.style.background = 'transparent';
inp.style.borderColor = 'transparent';
inp.style.color = 'var(--color-text)';
} else {
inp.style.background = 'var(--color-card)';
inp.style.borderColor = 'var(--color-border)';
inp.style.color = 'var(--color-text)';
}
});
btn.textContent = isEditing ? '🔒 Edit' : '🔓 Save';
if (!isEditing) {
htmx.trigger('#event-meta-form', 'submit');
}
}
</script>
<!-- Receipt List -->
<div id="expense-list">
<h3 style="margin-bottom: 1rem; font-size: 1rem; font-weight: 600;">