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

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

@ -99,6 +99,65 @@ swp-icon-container {
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)
=========================================== */

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

2226
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;
}
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) {
const employeeKey = row.dataset.employeeDetail;