admin/38686-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(adjustments): row actions use modals + project link goes to History tab

Browse Source 
Checkpoint-1 feedback from Konrad — three row actions on the Adjustments
tab were breaking his muscle memory vs the Pending tab:

1. Worker name used to navigate to /workers/<id>/. Now opens the Worker
   Lookup modal using the existing .worker-lookup-link handler already
   bound on the dashboard — zero new JS.

2. Eye icon on PAID rows used to navigate to /payroll/payslip/<pk>/. Now
   opens the same #previewPayslipModal that unpaid rows use (via the
   existing .preview-payslip-btn handler). The 'Paid #N' green badge in
   the Status column still links to the historical payslip detail page,
   so both entry points coexist.

3. Project name used to open the Profile tab of the project detail page;
   now includes the #history URL fragment so the History tab is active.
   Added a tiny DOMContentLoaded helper in projects/detail.html that
   activates whatever tab the hash points to — generalised so any
   future deep-link works (#history, #supervisors, #teams, #workers).
This commit is contained in:
Konrad du Plessis 2026-04-23 16:55:42 +02:00
parent e088192103
commit b59eb313c0
2 changed files with 41 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
core/templates/core/_adjustment_row.html
View File

@ -27,11 +27,14 @@ Row actions differ by paid status:
{# --- Date --- #}
<td>{{ adj.date|date:"d M Y" }}</td>
{# --- Worker name (clickable link to the worker profile page) --- #}
{# --- Worker name (opens the Worker Lookup modal) --- #}
<td>
<a href="{% url 'worker_detail' adj.worker.id %}" class="text-decoration-none">
{{ adj.worker.name }}
</a>
{# Worker name opens the Worker Lookup modal — same as on the Pending,
Payment History, and Loans tabs. The existing
.worker-lookup-link handler (core/templates/core/payroll_dashboard.html
line ~3214) listens for any element with this class + data-worker-id. #}
<a href="#" class="worker-lookup-link text-decoration-none"
data-worker-id="{{ adj.worker.id }}">{{ adj.worker.name }}</a>
</td>
{# --- Type badge (colour comes from the .badge-type-<slug> CSS class) --- #}
@ -49,9 +52,12 @@ Row actions differ by paid status:
{# --- Project (clickable if present, dash if missing) --- #}
<td>
{% if adj.project %}
<a href="{% url 'project_detail' adj.project.id %}" class="text-decoration-none">
{{ adj.project.name }}
</a>
{# Link lands on the History tab of the project detail page — the #}
{# most useful landing for a user who clicked a historical #}
{# adjustment. Tab activation is driven by the #history fragment #}
{# via a small helper in projects/detail.html. #}
<a href="{% url 'project_detail' adj.project.id %}#history"
class="text-decoration-none">{{ adj.project.name }}</a>
{% else %}<span class="text-muted">&mdash;</span>{% endif %}
</td>
@ -89,12 +95,17 @@ Row actions differ by paid status:
{# --- Row actions (eye + pen + x for unpaid; eye only for paid) --- #}
<td class="text-end">
{% if adj.payroll_record %}
{# PAID: view payslip only #}
<a href="{% url 'payslip_detail' adj.payroll_record.id %}"
class="btn btn-sm btn-outline-secondary"
title="View payslip" data-bs-toggle="tooltip">
{# Eye icon on paid rows opens the same Payslip Preview modal used on #}
{# the Pending tab (instead of navigating to the payslip detail page). #}
{# The "Paid #N" badge in the Status column still links to the #}
{# historical payslip for users who want to jump to the PDF view. #}
<button type="button"
class="btn btn-sm btn-outline-info preview-payslip-btn"
data-worker-id="{{ adj.worker.id }}"
data-worker-name="{{ adj.worker.name }}"
title="Preview payslip" data-bs-toggle="tooltip">
<i class="fas fa-eye"></i>
</a>
</button>
{% else %}
{# UNPAID row: Preview (reuses .preview-payslip-btn handler), #}
{# Edit (reuses .adjustment-badge handler), Delete (opens #deleteConfirmModal). #}

18
core/templates/core/projects/detail.html
View File

@ -181,4 +181,22 @@
</div>
</div>
<script>
// === Activate tab from URL hash ===
// When the page loads with #history / #profile / #supervisors / #teams /
// #workers in the URL, open that tab automatically. This lets other
// pages link directly to a specific tab — e.g. the Adjustments row
// partial links to /projects/<id>/#history so a user clicking a project
// name from an adjustment lands on the relevant history view.
document.addEventListener('DOMContentLoaded', function() {
if (!window.location.hash) return;
var target = document.querySelector(
'[data-bs-toggle="tab"][data-bs-target="' + window.location.hash + '"]'
);
if (target) {
new bootstrap.Tab(target).show();
}
});
</script>
{% endblock %}