Andros Fenollosa
349bb84af6
- Categories: inline add form, dropdown menu for Edit/Delete, inline edit - Subcategories: inline add within each category card, dropdown actions - Fixed expenses: inline add form, dropdown menu, inline edit - All sections use LiveView handlers for real-time updates - Consistent with Income table pattern (dropdown + inline forms)
86 lines
4.9 KiB
HTML
86 lines
4.9 KiB
HTML
{% if fixed_expenses %}
|
|
<div class="card bg-base-100 shadow-sm mb-4">
|
|
<div class="card-body p-4">
|
|
<div class="overflow-x-auto">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th class="text-center w-20">Order</th>
|
|
<th class="text-right w-16">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for fe in fixed_expenses %}
|
|
{% if editing_id == fe.id %}
|
|
<tr>
|
|
<td colspan="3" class="p-0">
|
|
<form data-liveview-function="save_fixed_expense"
|
|
data-action="submit->page#run"
|
|
class="flex flex-wrap gap-2 items-center p-2">
|
|
<input type="hidden" name="fe_id" value="{{ fe.id }}">
|
|
<input type="text" name="fe_name" value="{{ fe.name }}" class="input input-bordered input-sm flex-[2] min-w-[8rem]" required>
|
|
<input type="number" name="fe_order" value="{{ fe.order }}" class="input input-bordered input-sm w-20" min="0" required>
|
|
<button type="submit" class="btn btn-primary btn-sm">Save</button>
|
|
<a data-liveview-function="cancel_edit_settings"
|
|
data-action="click->page#run"
|
|
data-data-section="fixed_expenses"
|
|
class="btn btn-ghost btn-sm">Cancel</a>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td>{{ fe.name }}</td>
|
|
<td class="text-center">{{ fe.order }}</td>
|
|
<td class="text-right">
|
|
<div class="dropdown dropdown-end">
|
|
<label tabindex="0" class="btn btn-ghost btn-xs">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01"/>
|
|
</svg>
|
|
</label>
|
|
<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box w-40 p-2 shadow z-50">
|
|
<li>
|
|
<a data-liveview-function="edit_fixed_expense"
|
|
data-action="click->page#run"
|
|
data-data-id="{{ fe.id }}">Edit</a>
|
|
</li>
|
|
<li>
|
|
<a data-liveview-function="delete_fixed_expense"
|
|
data-action="click->page#run"
|
|
data-data-id="{{ fe.id }}"
|
|
class="text-error">Delete</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-12 text-base-content/50">
|
|
<p class="text-lg mb-2">No fixed expenses</p>
|
|
<p>Create your first fixed expense to get started</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form data-liveview-function="add_fixed_expense"
|
|
data-action="submit->page#run"
|
|
class="flex flex-wrap gap-2 items-end mt-4">
|
|
<div class="form-control flex-[2] min-w-[8rem]">
|
|
<label class="label py-1"><span class="label-text text-xs">Name</span></label>
|
|
<input type="text" name="fe_name" class="input input-bordered input-sm w-full" placeholder="Fixed expense name" required>
|
|
</div>
|
|
<div class="form-control w-20">
|
|
<label class="label py-1"><span class="label-text text-xs">Order</span></label>
|
|
<input type="number" name="fe_order" value="0" class="input input-bordered input-sm w-full" min="0" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-sm">Add</button>
|
|
</form>
|