Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor employee table and row components

Browse source 
Migrates custom table components to generic data table
Improves consistency in table and row implementations
Removes legacy custom table elements in favor of more flexible data table approach
This commit is contained in:
Janus C. H. Knudsen 2026-01-14 16:53:42 +01:00
parent 5e2cab9bd5
commit 679c3fb3a6
7 changed files with 1257 additions and 1256 deletions
Download patch file Download diff file Expand all files Collapse all files

28
PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml
View file

@ -89,23 +89,23 @@
<swp-card> <swp-card>
<swp-section-label>@Model.LabelSalaryHistory</swp-section-label> <swp-section-label>@Model.LabelSalaryHistory</swp-section-label>
<swp-salary-table> <div class="salary-history">
<swp-salary-table-header> <swp-data-table>
<swp-salary-table-cell>@Model.LabelPeriod</swp-salary-table-cell> <swp-data-table-header>
<swp-salary-table-cell>@Model.LabelGrossSalary</swp-salary-table-cell> <swp-data-table-cell>@Model.LabelPeriod</swp-data-table-cell>
<swp-salary-table-cell></swp-salary-table-cell> <swp-data-table-cell>@Model.LabelGrossSalary</swp-data-table-cell>
</swp-salary-table-header> <swp-data-table-cell></swp-data-table-cell>
<swp-salary-table-body> </swp-data-table-header>
@foreach (var item in Model.SalaryHistory) @foreach (var item in Model.SalaryHistory)
{ {
<swp-salary-table-row> <swp-data-table-row>
<swp-salary-table-cell>@item.Period</swp-salary-table-cell> <swp-data-table-cell>@item.Period</swp-data-table-cell>
<swp-salary-table-cell class="mono">@item.GrossSalary</swp-salary-table-cell> <swp-data-table-cell class="mono">@item.GrossSalary</swp-data-table-cell>
<swp-salary-table-cell><i class="ph ph-caret-right"></i></swp-salary-table-cell> <swp-data-table-cell><i class="ph ph-caret-right"></i></swp-data-table-cell>
</swp-salary-table-row> </swp-data-table-row>
} }
</swp-salary-table-body> </swp-data-table>
</swp-salary-table> </div>
</swp-card> </swp-card>
</swp-detail-grid> </swp-detail-grid>

22
PlanTempus.Application/Features/Employees/Components/EmployeeRow/Default.cshtml
View file

@ -1,7 +1,7 @@
@model PlanTempus.Application.Features.Employees.Components.EmployeeRowViewModel @model PlanTempus.Application.Features.Employees.Components.EmployeeRowViewModel
<swp-employee-row data-employee-detail="@Model.Key"> <swp-data-table-row data-employee-detail="@Model.Key">
<swp-employee-cell> <swp-data-table-cell>
<swp-user-info> <swp-user-info>
<swp-user-avatar class="@Model.AvatarColor">@Model.Initials</swp-user-avatar> <swp-user-avatar class="@Model.AvatarColor">@Model.Initials</swp-user-avatar>
<swp-user-details> <swp-user-details>
@ -9,17 +9,17 @@
<swp-user-email>@Model.Email</swp-user-email> <swp-user-email>@Model.Email</swp-user-email>
</swp-user-details> </swp-user-details>
</swp-user-info> </swp-user-info>
</swp-employee-cell> </swp-data-table-cell>
<swp-employee-cell> <swp-data-table-cell>
<swp-status-badge class="@Model.Role">@Model.RoleText</swp-status-badge> <swp-status-badge class="@Model.Role">@Model.RoleText</swp-status-badge>
</swp-employee-cell> </swp-data-table-cell>
<swp-employee-cell> <swp-data-table-cell>
<swp-status-badge class="@Model.Status">@Model.StatusText</swp-status-badge> <swp-status-badge class="@Model.Status">@Model.StatusText</swp-status-badge>
</swp-employee-cell> </swp-data-table-cell>
<swp-employee-cell>@Model.LastActive</swp-employee-cell> <swp-data-table-cell>@Model.LastActive</swp-data-table-cell>
<swp-employee-cell> <swp-data-table-cell>
<swp-row-toggle> <swp-row-toggle>
<i class="ph ph-caret-right"></i> <i class="ph ph-caret-right"></i>
</swp-row-toggle> </swp-row-toggle>
</swp-employee-cell> </swp-data-table-cell>
</swp-employee-row> </swp-data-table-row>

24
PlanTempus.Application/Features/Employees/Components/EmployeeTable/Default.cshtml
View file

@ -14,21 +14,19 @@
</swp-users-header> </swp-users-header>
<swp-employee-table-card> <swp-employee-table-card>
<swp-employee-table> <div class="employees-list">
<swp-employee-table-header> <swp-data-table>
<swp-employee-row> <swp-data-table-header>
<swp-employee-cell>@Model.ColumnUser</swp-employee-cell> <swp-data-table-cell>@Model.ColumnUser</swp-data-table-cell>
<swp-employee-cell>@Model.ColumnRole</swp-employee-cell> <swp-data-table-cell>@Model.ColumnRole</swp-data-table-cell>
<swp-employee-cell>@Model.ColumnStatus</swp-employee-cell> <swp-data-table-cell>@Model.ColumnStatus</swp-data-table-cell>
<swp-employee-cell>@Model.ColumnLastActive</swp-employee-cell> <swp-data-table-cell>@Model.ColumnLastActive</swp-data-table-cell>
<swp-employee-cell></swp-employee-cell> <swp-data-table-cell></swp-data-table-cell>
</swp-employee-row> </swp-data-table-header>
</swp-employee-table-header>
<swp-employee-table-body>
@foreach (var employeeKey in Model.EmployeeKeys) @foreach (var employeeKey in Model.EmployeeKeys)
{ {
@await Component.InvokeAsync("EmployeeRow", employeeKey) @await Component.InvokeAsync("EmployeeRow", employeeKey)
} }
</swp-employee-table-body> </swp-data-table>
</swp-employee-table> </div>
</swp-employee-table-card> </swp-employee-table-card>

59
PlanTempus.Application/wwwroot/css/components.css
View file

@ -99,6 +99,65 @@ swp-icon-container {
flex-shrink: 0; flex-shrink: 0;
} }
/* ===========================================
DATA TABLE (Generic Grid + Subgrid)
grid-template-columns defineres i feature CSS
=========================================== */
swp-data-table {
display: grid;
swp-data-table-header {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
background: var(--color-background-alt);
swp-data-table-cell {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
padding: var(--spacing-4);
}
}
swp-data-table-row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
border-bottom: 1px solid var(--color-border);
transition: background var(--transition-fast);
&:last-child {
border-bottom: none;
}
&:hover {
background: var(--color-background-hover);
}
}
swp-data-table-cell {
padding: var(--spacing-4);
font-size: var(--font-size-base);
color: var(--color-text);
&.mono {
font-family: var(--font-mono);
}
&.muted {
color: var(--color-text-muted);
}
&.right {
text-align: right;
}
}
}
/* =========================================== /* ===========================================
BUTTONS (swp-btn) BUTTONS (swp-btn)
=========================================== */ =========================================== */

112
PlanTempus.Application/wwwroot/css/employees.css
View file

@ -56,7 +56,7 @@ swp-users-progress {
} }
/* =========================================== /* ===========================================
EMPLOYEE TABLE (Grid + Subgrid) EMPLOYEE TABLE (uses swp-data-table from components.css)
=========================================== */ =========================================== */
swp-employee-table-card { swp-employee-table-card {
display: block; display: block;
@ -66,61 +66,26 @@ swp-employee-table-card {
overflow: hidden; overflow: hidden;
} }
swp-employee-table { .employees-list swp-data-table {
display: grid;
grid-template-columns: minmax(220px, 1fr) 120px 140px 120px 40px; grid-template-columns: minmax(220px, 1fr) 120px 140px 120px 40px;
}
swp-employee-table-header { .employees-list swp-data-table-header,
display: grid; .employees-list swp-data-table-row {
grid-column: 1 / -1;
grid-template-columns: subgrid;
background: var(--color-background-alt);
padding: 0 var(--spacing-10); padding: 0 var(--spacing-10);
}
swp-employee-cell { .employees-list swp-data-table-header swp-data-table-cell {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
padding-top: var(--spacing-5); padding-top: var(--spacing-5);
padding-bottom: var(--spacing-5); padding-bottom: var(--spacing-5);
} }
}
swp-employee-table-body { .employees-list swp-data-table-row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
swp-employee-row {
cursor: pointer; cursor: pointer;
&:hover {
background: var(--color-background-hover);
}
}
}
} }
swp-employee-row { .employees-list swp-data-table-cell {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
padding: 0 var(--spacing-10);
border-bottom: 1px solid var(--color-border);
transition: background var(--transition-fast);
&:last-child {
border-bottom: none;
}
}
swp-employee-cell {
padding: var(--spacing-5) 0; padding: var(--spacing-5) 0;
font-size: var(--font-size-base);
color: var(--color-text);
&:last-child { &:last-child {
display: flex; display: flex;
@ -696,59 +661,27 @@ swp-notes-area {
} }
/* =========================================== /* ===========================================
SALARY TABLE (Grid + Subgrid) SALARY TABLE (uses swp-data-table from components.css)
=========================================== */ =========================================== */
swp-salary-table { .salary-history swp-data-table {
display: grid;
grid-template-columns: 1fr 120px 60px; grid-template-columns: 1fr 120px 60px;
}
swp-salary-table-header { .salary-history swp-data-table-header {
display: grid; background: transparent;
grid-column: 1 / -1;
grid-template-columns: subgrid;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
swp-salary-table-cell { .salary-history swp-data-table-row {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
}
}
swp-salary-table-body {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
}
swp-salary-table-row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
border-bottom: 1px solid var(--color-border);
cursor: pointer; cursor: pointer;
transition: background var(--transition-fast);
&:last-child { &:hover swp-data-table-cell i {
border-bottom: none;
}
&:hover {
background: var(--color-background-hover);
swp-salary-table-cell i {
color: var(--color-teal); color: var(--color-teal);
} }
} }
}
swp-salary-table-cell { .salary-history swp-data-table-cell {
padding: var(--spacing-4) var(--spacing-2); padding: var(--spacing-4) var(--spacing-2);
font-size: var(--font-size-base);
color: var(--color-text);
&:first-child { &:first-child {
padding-left: 0; padding-left: 0;
@ -759,15 +692,10 @@ swp-salary-table {
text-align: right; text-align: right;
} }
&.mono {
font-family: var(--font-mono);
}
i { i {
color: var(--color-text-muted); color: var(--color-text-muted);
font-size: 16px; font-size: 16px;
} }
}
} }
/* =========================================== /* ===========================================

122
PlanTempus.Application/wwwroot/js/app.js
View file

File diff suppressed because one or more lines are too long

2
PlanTempus.Application/wwwroot/ts/modules/employees.ts
View file

@ -116,7 +116,7 @@ export class EmployeesController {
return; return;
} }
const row = target.closest<HTMLElement>('swp-employee-row[data-employee-detail]'); const row = target.closest<HTMLElement>('swp-data-table-row[data-employee-detail]');
if (row) { if (row) {
const employeeKey = row.dataset.employeeDetail; const employeeKey = row.dataset.employeeDetail;