Enhances employee details with comprehensive salary and HR data
Adds detailed salary rates, commission structures, and HR-related records Introduces new data models and view components for: - Salary rates and supplements - Commissions and rate configurations - Employee HR tracking (certifications, courses, absence) Implements dynamic rate synchronization between drawer and card views
This commit is contained in:
Janus C. H. Knudsen
parent
2e6207bb0b
commit
f71f00099a
15 changed files with 1589 additions and 137 deletions
|
|
@ -190,6 +190,7 @@ swp-[feature]-row {
|
|||
|---------|-----------|-----|---------|
|
||||
| Cash | `swp-cash-table` | `swp-cash-table-row` | cash.css |
|
||||
| Employees | `swp-employee-table` | `swp-employee-row` | employees.css |
|
||||
| Salary | `swp-salary-table` | `swp-salary-table-row` | employees.css |
|
||||
| Bookings | `swp-booking-list` | `swp-booking-item` | bookings.css |
|
||||
| Notifications | `swp-notification-list` | `swp-notification-item` | notifications.css |
|
||||
| Attentions | `swp-attention-list` | `swp-attention-item` | attentions.css |
|
||||
|
|
@ -233,6 +234,49 @@ swp-[feature]-cell {
|
|||
|
||||
---
|
||||
|
||||
## Edit Forms (employees.css)
|
||||
|
||||
Key-value display med valgfri redigering. Bruger Grid + Subgrid for alignment.
|
||||
|
||||
### Basis struktur
|
||||
|
||||
```html
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Label tekst</swp-edit-label>
|
||||
<swp-edit-value>Værdi</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Med redigering</swp-edit-label>
|
||||
<swp-edit-value contenteditable="true">Redigerbar værdi</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
```
|
||||
|
||||
### Med select dropdown
|
||||
|
||||
```html
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>Vælg type</swp-edit-label>
|
||||
<swp-edit-select>
|
||||
<select>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
</select>
|
||||
</swp-edit-select>
|
||||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
```
|
||||
|
||||
### Mono-font for tal
|
||||
|
||||
```html
|
||||
<swp-edit-value class="mono">131,49 kr</swp-edit-value>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## User Info Pattern (employees.css)
|
||||
|
||||
```html
|
||||
|
|
@ -249,6 +293,109 @@ swp-[feature]-cell {
|
|||
|
||||
---
|
||||
|
||||
## Document List (employees.css)
|
||||
|
||||
Genbruges til dokumenter, certificeringer, kurser og lignende lister.
|
||||
|
||||
```html
|
||||
<swp-document-list>
|
||||
<swp-document-item>
|
||||
<i class="ph ph-file-pdf"></i>
|
||||
<swp-document-info>
|
||||
<swp-document-name>Ansættelseskontrakt.pdf</swp-document-name>
|
||||
<swp-document-meta>Uploadet 1. aug 2019</swp-document-meta>
|
||||
</swp-document-info>
|
||||
<swp-document-actions>
|
||||
<swp-btn class="secondary sm">Vis</swp-btn>
|
||||
</swp-document-actions>
|
||||
</swp-document-item>
|
||||
</swp-document-list>
|
||||
```
|
||||
|
||||
**Med badge i stedet for knap:**
|
||||
```html
|
||||
<swp-document-item>
|
||||
<i class="ph ph-certificate"></i>
|
||||
<swp-document-info>
|
||||
<swp-document-name>Balayage Specialist</swp-document-name>
|
||||
<swp-document-meta>Udløber: 15. juni 2026</swp-document-meta>
|
||||
</swp-document-info>
|
||||
<swp-document-actions>
|
||||
<swp-status-badge class="valid">Gyldig</swp-status-badge>
|
||||
</swp-document-actions>
|
||||
</swp-document-item>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Subsection (employees.css)
|
||||
|
||||
Til gruppering af lister (f.eks. "Gennemførte kurser" / "Planlagte kurser").
|
||||
|
||||
```html
|
||||
<swp-subsection>
|
||||
<swp-subsection-title>Gennemførte kurser</swp-subsection-title>
|
||||
<swp-document-list>
|
||||
<!-- items -->
|
||||
</swp-document-list>
|
||||
</swp-subsection>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Simple List (employees.css)
|
||||
|
||||
Simpel liste med tekst + badge (f.eks. planlagt fravær).
|
||||
|
||||
```html
|
||||
<swp-simple-list>
|
||||
<swp-simple-item>
|
||||
<swp-simple-item-text>23. dec – 2. jan 2026</swp-simple-item-text>
|
||||
<swp-status-badge class="ferie">Ferie</swp-status-badge>
|
||||
</swp-simple-item>
|
||||
</swp-simple-list>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Salary Table (employees.css)
|
||||
|
||||
Bruger Grid + Subgrid mønsteret.
|
||||
|
||||
```html
|
||||
<swp-salary-table>
|
||||
<swp-salary-table-header>
|
||||
<swp-salary-table-cell>Periode</swp-salary-table-cell>
|
||||
<swp-salary-table-cell>Bruttoløn</swp-salary-table-cell>
|
||||
<swp-salary-table-cell></swp-salary-table-cell>
|
||||
</swp-salary-table-header>
|
||||
<swp-salary-table-body>
|
||||
<swp-salary-table-row>
|
||||
<swp-salary-table-cell>Januar 2026</swp-salary-table-cell>
|
||||
<swp-salary-table-cell class="mono">34.063,50 kr</swp-salary-table-cell>
|
||||
<swp-salary-table-cell><i class="ph ph-caret-right"></i></swp-salary-table-cell>
|
||||
</swp-salary-table-row>
|
||||
</swp-salary-table-body>
|
||||
</swp-salary-table>
|
||||
```
|
||||
|
||||
Rækker har hover-effekt og chevron bliver teal ved hover.
|
||||
|
||||
---
|
||||
|
||||
## Add Button (components.css)
|
||||
|
||||
Dashed border knap til tilføjelse af elementer.
|
||||
|
||||
```html
|
||||
<swp-add-button>+ Upload dokument</swp-add-button>
|
||||
<swp-add-button>+ Tilføj certificering</swp-add-button>
|
||||
```
|
||||
|
||||
**Styling:** Dashed border, centreret, hover → teal border og tekst.
|
||||
|
||||
---
|
||||
|
||||
## Design Tokens (design-tokens.css)
|
||||
|
||||
### Farver
|
||||
|
|
@ -317,11 +464,11 @@ swp-[feature]-cell {
|
|||
|-----|---------|
|
||||
| `design-tokens.css` | Farver, spacing, fonts, shadows |
|
||||
| `design-system.css` | Base resets, typography |
|
||||
| `page.css` | Page structure, cards |
|
||||
| `page.css` | Page structure |
|
||||
| `components.css` | Buttons, badges, cards, section-label, add-button, avatars, icon-btn |
|
||||
| `stats.css` | Stat cards, stat rows |
|
||||
| `tabs.css` | Tab bar, tab content |
|
||||
| `cash.css` | Buttons, status badges, tables |
|
||||
| `employees.css` | User info, role badges, employee table |
|
||||
| `employees.css` | Employee table, user info, edit forms, document lists, salary table |
|
||||
| `bookings.css` | Booking list items |
|
||||
| `notifications.css` | Notification items |
|
||||
| `attentions.css` | Attention items |
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
* - swp-section-label (card section headers)
|
||||
* - swp-section-header (section header with action link)
|
||||
* - swp-section-action (action link in section header)
|
||||
* - swp-add-button (dashed border add button)
|
||||
*/
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -194,6 +195,36 @@ swp-status-badge.employee {
|
|||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Additional status variants */
|
||||
swp-status-badge.valid {
|
||||
background: color-mix(in srgb, var(--color-green) 15%, transparent);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-status-badge.expiring,
|
||||
swp-status-badge.warning {
|
||||
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
swp-status-badge.enrolled,
|
||||
swp-status-badge.ferie {
|
||||
background: color-mix(in srgb, var(--color-teal) 15%, transparent);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-status-badge.fri,
|
||||
swp-status-badge.info {
|
||||
background: color-mix(in srgb, var(--color-blue) 15%, transparent);
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
swp-status-badge.sygdom,
|
||||
swp-status-badge.danger {
|
||||
background: color-mix(in srgb, var(--color-red) 15%, transparent);
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
PLAN CARDS (swp-plan-card)
|
||||
=========================================== */
|
||||
|
|
@ -432,3 +463,27 @@ swp-card-footer {
|
|||
margin: var(--spacing-6) calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding));
|
||||
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
ADD BUTTON (dashed border style)
|
||||
=========================================== */
|
||||
swp-add-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-5);
|
||||
margin-top: var(--spacing-5);
|
||||
border: 2px dashed var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-add-button:hover {
|
||||
border-color: var(--color-teal);
|
||||
color: var(--color-teal);
|
||||
background: color-mix(in srgb, var(--color-teal) 5%, transparent);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,14 +3,17 @@
|
|||
*
|
||||
* Employees-specific styling only.
|
||||
* Reuses: swp-stat-card (stats.css), swp-stats-row (stats.css), swp-tab-bar (tabs.css),
|
||||
* swp-btn, swp-status-badge, swp-icon-btn, swp-card, swp-section-label (components.css),
|
||||
* swp-btn, swp-status-badge, swp-icon-btn, swp-card, swp-section-label,
|
||||
* swp-add-button (components.css),
|
||||
* swp-row-toggle (cash.css),
|
||||
* swp-sticky-header, swp-header-content (page.css),
|
||||
* swp-toggle-slider, swp-checkbox-list (controls.css)
|
||||
*
|
||||
* Creates: swp-employee-table, swp-employee-row, swp-user-info,
|
||||
* swp-employee-avatar-large, swp-employee-detail-header,
|
||||
* swp-fact-inline, swp-edit-row, swp-detail-grid
|
||||
* swp-fact-inline, swp-edit-section/row/label/value/select, swp-detail-grid,
|
||||
* swp-salary-table, swp-document-list/item/info/name/meta/actions,
|
||||
* swp-subsection/title, swp-simple-list/item/text
|
||||
*/
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -434,7 +437,7 @@ swp-edit-label {
|
|||
swp-edit-value {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-background-alt);
|
||||
border: 1px solid transparent;
|
||||
|
|
@ -585,48 +588,62 @@ swp-service-price {
|
|||
|
||||
/* ===========================================
|
||||
DOCUMENT LIST (HR tab)
|
||||
Also used for certs, courses, and similar lists
|
||||
=========================================== */
|
||||
swp-document-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-document-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
padding: var(--spacing-4) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-document-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-document-item:hover {
|
||||
padding: 12px 16px;
|
||||
background: var(--color-background-alt);
|
||||
margin: 0 calc(-1 * var(--spacing-3));
|
||||
padding-left: var(--spacing-3);
|
||||
padding-right: var(--spacing-3);
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-document-item i {
|
||||
font-size: 24px;
|
||||
/* Icon (optional) */
|
||||
swp-document-item i,
|
||||
swp-document-icon {
|
||||
font-size: 20px;
|
||||
color: var(--color-text-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
swp-document-item i.ph-file-pdf {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
swp-document-name {
|
||||
/* Info wrapper (name + meta) */
|
||||
swp-document-info {
|
||||
flex: 1;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
swp-document-date {
|
||||
swp-document-name {
|
||||
display: block;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-document-meta {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Actions (buttons/badges at end) */
|
||||
swp-document-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Notes area */
|
||||
|
|
@ -646,6 +663,262 @@ swp-notes-area:focus {
|
|||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
EDIT SELECT (dropdown in edit rows)
|
||||
=========================================== */
|
||||
swp-edit-select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
swp-edit-select select {
|
||||
width: 100%;
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
font-size: var(--font-size-base);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-edit-select select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Mono variant for edit-value */
|
||||
swp-edit-value.mono {
|
||||
font-family: var(--font-mono);
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
/* Input in edit-row */
|
||||
swp-edit-row input {
|
||||
font-size: var(--font-size-base);
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-background-alt);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
transition: all var(--transition-fast);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
swp-edit-row input:hover {
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
swp-edit-row input:focus {
|
||||
outline: none;
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Number input variant */
|
||||
swp-edit-row input[data-type="number"] {
|
||||
font-family: var(--font-mono);
|
||||
text-align: right;
|
||||
width: 150px;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SALARY TABLE (Grid + Subgrid)
|
||||
=========================================== */
|
||||
swp-salary-table {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 120px 60px;
|
||||
}
|
||||
|
||||
swp-salary-table-header,
|
||||
swp-salary-table-body {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
|
||||
swp-salary-table-header {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-salary-table-row {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-salary-table-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-salary-table-cell {
|
||||
padding: var(--spacing-4) var(--spacing-2);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-salary-table-cell:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
swp-salary-table-cell:last-child {
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
swp-salary-table-header 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);
|
||||
}
|
||||
|
||||
swp-salary-table-cell.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Chevron for row actions */
|
||||
swp-salary-table-cell i {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
swp-salary-table-row {
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-salary-table-row:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
swp-salary-table-row:hover swp-salary-table-cell i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SUBSECTION TITLE (for grouped lists like courses)
|
||||
=========================================== */
|
||||
swp-subsection {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-6);
|
||||
}
|
||||
|
||||
swp-subsection:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
swp-subsection-title {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SIMPLE LIST (dates + badge, like vacation)
|
||||
=========================================== */
|
||||
swp-simple-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-simple-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-3);
|
||||
padding: 12px 16px;
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-simple-item-text {
|
||||
flex: 1;
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* swp-add-button styles in components.css */
|
||||
|
||||
/* ===========================================
|
||||
RATES DRAWER CONTENT (overrides for swp-data-*)
|
||||
=========================================== */
|
||||
.rates-content swp-data-table {
|
||||
display: grid;
|
||||
grid-template-columns: 28px 1fr 100px;
|
||||
}
|
||||
|
||||
.rates-content swp-data-row {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.rates-content swp-data-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.rates-content swp-data-row input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--color-teal);
|
||||
}
|
||||
|
||||
.rates-content swp-data-label {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.rates-content swp-data-label.disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.rates-content swp-data-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
gap: 4px;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.rates-content swp-data-input input {
|
||||
width: 100px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
font-family: var(--font-mono);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rates-content swp-data-input.disabled input {
|
||||
opacity: 0.4;
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
.rates-content swp-section-label {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.rates-content swp-data-section {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
RESPONSIVE
|
||||
=========================================== */
|
||||
|
|
|
|||
|
|
@ -890,6 +890,7 @@
|
|||
// wwwroot/ts/modules/employees.ts
|
||||
var EmployeesController = class {
|
||||
constructor() {
|
||||
this.ratesSync = null;
|
||||
this.listView = null;
|
||||
this.detailView = null;
|
||||
this.listView = document.getElementById("employees-list-view");
|
||||
|
|
@ -901,6 +902,7 @@
|
|||
this.setupBackNavigation();
|
||||
this.setupHistoryNavigation();
|
||||
this.restoreStateFromUrl();
|
||||
this.ratesSync = new RatesSyncController();
|
||||
}
|
||||
/**
|
||||
* Setup popstate listener for browser back/forward
|
||||
|
|
@ -1041,6 +1043,93 @@
|
|||
}
|
||||
}
|
||||
};
|
||||
var RatesSyncController = class {
|
||||
constructor() {
|
||||
this.drawer = null;
|
||||
this.drawer = document.getElementById("rates-drawer");
|
||||
if (!this.drawer) return;
|
||||
this.setupCheckboxListeners();
|
||||
this.setupInputListeners();
|
||||
}
|
||||
/**
|
||||
* Extract rate key from checkbox ID (e.g., "rate-normal-enabled" → "normal")
|
||||
*/
|
||||
extractRateKey(checkboxId) {
|
||||
const match = checkboxId.match(/^rate-(.+)-enabled$/);
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
/**
|
||||
* Setup checkbox change listeners in drawer
|
||||
*/
|
||||
setupCheckboxListeners() {
|
||||
if (!this.drawer) return;
|
||||
this.drawer.addEventListener("change", (e) => {
|
||||
const target = e.target;
|
||||
if (target.type !== "checkbox" || !target.id) return;
|
||||
const rateKey = this.extractRateKey(target.id);
|
||||
if (!rateKey) return;
|
||||
const isChecked = target.checked;
|
||||
const row = target.closest("swp-data-row");
|
||||
if (!row) return;
|
||||
const label = row.querySelector("swp-data-label");
|
||||
const input = row.querySelector("swp-data-input");
|
||||
if (label) label.classList.toggle("disabled", !isChecked);
|
||||
if (input) input.classList.toggle("disabled", !isChecked);
|
||||
this.toggleCardRow(rateKey, isChecked);
|
||||
if (isChecked) {
|
||||
const textInput = document.getElementById(`rate-${rateKey}`);
|
||||
if (textInput) {
|
||||
this.syncValueToCard(rateKey, textInput.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Setup input change listeners in drawer
|
||||
*/
|
||||
setupInputListeners() {
|
||||
if (!this.drawer) return;
|
||||
this.drawer.addEventListener("input", (e) => {
|
||||
const target = e.target;
|
||||
if (target.type !== "text" || !target.id) return;
|
||||
const match = target.id.match(/^rate-(.+)$/);
|
||||
if (!match) return;
|
||||
const rateKey = match[1];
|
||||
if (rateKey.endsWith("-enabled")) return;
|
||||
this.syncValueToCard(rateKey, target.value);
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Toggle card row visibility by ID
|
||||
*/
|
||||
toggleCardRow(rateKey, visible) {
|
||||
const cardRow = document.getElementById(`card-${rateKey}`);
|
||||
if (cardRow) {
|
||||
cardRow.style.display = visible ? "" : "none";
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Format number with 2 decimals using Danish locale (comma as decimal separator)
|
||||
*/
|
||||
formatNumber(value) {
|
||||
const normalized = value.replace(",", ".");
|
||||
const num = parseFloat(normalized);
|
||||
if (isNaN(num)) return value;
|
||||
return num.toFixed(2).replace(".", ",");
|
||||
}
|
||||
/**
|
||||
* Sync value from drawer to card by ID
|
||||
*/
|
||||
syncValueToCard(rateKey, value) {
|
||||
const cardInput = document.getElementById(`value-${rateKey}`);
|
||||
if (!cardInput) return;
|
||||
const textInput = document.getElementById(`rate-${rateKey}`);
|
||||
const inputContainer = textInput?.closest("swp-data-input");
|
||||
const unit = inputContainer?.textContent?.trim().replace(value, "").trim() || "kr";
|
||||
const formattedValue = this.formatNumber(value);
|
||||
cardInput.value = `${formattedValue} ${unit}`;
|
||||
}
|
||||
};
|
||||
|
||||
// wwwroot/ts/app.ts
|
||||
var App = class {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -7,6 +7,7 @@
|
|||
*/
|
||||
|
||||
export class EmployeesController {
|
||||
private ratesSync: RatesSyncController | null = null;
|
||||
private listView: HTMLElement | null = null;
|
||||
private detailView: HTMLElement | null = null;
|
||||
|
||||
|
|
@ -23,6 +24,7 @@ export class EmployeesController {
|
|||
this.setupBackNavigation();
|
||||
this.setupHistoryNavigation();
|
||||
this.restoreStateFromUrl();
|
||||
this.ratesSync = new RatesSyncController();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -189,3 +191,132 @@ export class EmployeesController {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Rates Sync Controller
|
||||
*
|
||||
* Syncs changes between the rates drawer and the salary tab cards.
|
||||
* Uses ID-based lookups:
|
||||
* - Checkbox: id="rate-{key}-enabled"
|
||||
* - Text input: id="rate-{key}"
|
||||
* - Card row: id="card-{key}"
|
||||
*/
|
||||
class RatesSyncController {
|
||||
private drawer: HTMLElement | null = null;
|
||||
|
||||
constructor() {
|
||||
this.drawer = document.getElementById('rates-drawer');
|
||||
|
||||
if (!this.drawer) return;
|
||||
|
||||
this.setupCheckboxListeners();
|
||||
this.setupInputListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract rate key from checkbox ID (e.g., "rate-normal-enabled" → "normal")
|
||||
*/
|
||||
private extractRateKey(checkboxId: string): string | null {
|
||||
const match = checkboxId.match(/^rate-(.+)-enabled$/);
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup checkbox change listeners in drawer
|
||||
*/
|
||||
private setupCheckboxListeners(): void {
|
||||
if (!this.drawer) return;
|
||||
|
||||
this.drawer.addEventListener('change', (e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
if (target.type !== 'checkbox' || !target.id) return;
|
||||
|
||||
const rateKey = this.extractRateKey(target.id);
|
||||
if (!rateKey) return;
|
||||
|
||||
const isChecked = target.checked;
|
||||
const row = target.closest<HTMLElement>('swp-data-row');
|
||||
if (!row) return;
|
||||
|
||||
// Toggle disabled class in drawer row
|
||||
const label = row.querySelector('swp-data-label');
|
||||
const input = row.querySelector('swp-data-input');
|
||||
if (label) label.classList.toggle('disabled', !isChecked);
|
||||
if (input) input.classList.toggle('disabled', !isChecked);
|
||||
|
||||
// Toggle visibility in card
|
||||
this.toggleCardRow(rateKey, isChecked);
|
||||
|
||||
// If enabling, also sync the current value
|
||||
if (isChecked) {
|
||||
const textInput = document.getElementById(`rate-${rateKey}`) as HTMLInputElement | null;
|
||||
if (textInput) {
|
||||
this.syncValueToCard(rateKey, textInput.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup input change listeners in drawer
|
||||
*/
|
||||
private setupInputListeners(): void {
|
||||
if (!this.drawer) return;
|
||||
|
||||
this.drawer.addEventListener('input', (e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
if (target.type !== 'text' || !target.id) return;
|
||||
|
||||
// Extract rate key from input ID (e.g., "rate-normal" → "normal")
|
||||
const match = target.id.match(/^rate-(.+)$/);
|
||||
if (!match) return;
|
||||
|
||||
const rateKey = match[1];
|
||||
// Skip if this matches the checkbox pattern
|
||||
if (rateKey.endsWith('-enabled')) return;
|
||||
|
||||
this.syncValueToCard(rateKey, target.value);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle card row visibility by ID
|
||||
*/
|
||||
private toggleCardRow(rateKey: string, visible: boolean): void {
|
||||
const cardRow = document.getElementById(`card-${rateKey}`);
|
||||
if (cardRow) {
|
||||
cardRow.style.display = visible ? '' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Format number with 2 decimals using Danish locale (comma as decimal separator)
|
||||
*/
|
||||
private formatNumber(value: string): string {
|
||||
// Parse the input (handle both dot and comma as decimal separator)
|
||||
const normalized = value.replace(',', '.');
|
||||
const num = parseFloat(normalized);
|
||||
|
||||
if (isNaN(num)) return value;
|
||||
|
||||
// Format with 2 decimals and comma as decimal separator
|
||||
return num.toFixed(2).replace('.', ',');
|
||||
}
|
||||
|
||||
/**
|
||||
* Sync value from drawer to card by ID
|
||||
*/
|
||||
private syncValueToCard(rateKey: string, value: string): void {
|
||||
const cardInput = document.getElementById(`value-${rateKey}`) as HTMLInputElement | null;
|
||||
if (!cardInput) return;
|
||||
|
||||
// Get the unit from drawer input container
|
||||
const textInput = document.getElementById(`rate-${rateKey}`);
|
||||
const inputContainer = textInput?.closest('swp-data-input');
|
||||
const unit = inputContainer?.textContent?.trim().replace(value, '').trim() || 'kr';
|
||||
|
||||
// Format with 2 decimals
|
||||
const formattedValue = this.formatNumber(value);
|
||||
cardInput.value = `${formattedValue} ${unit}`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue