Skip to content

Commit 84f66b9

Browse files
yepzdkyepzdk
authored
Merge pull request #4 from itk-dev/feature/add-negotiation-history-to-mock
feat: add expandable negotiation history to salary mock
2 parents 1cddd33 + dc12392 commit 84f66b9

1 file changed

Lines changed: 223 additions & 1 deletion

File tree

‎docs/projects/salary-negotiation/mocks/salary-negotiation.html‎

Lines changed: 223 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -785,6 +785,143 @@
785785
.summary-cards { grid-template-columns: repeat(2, 1fr); }
786786
.sidebar { width: 200px; min-width: 200px; }
787787
}
788+
789+
/* ========== EXPANDABLE HISTORY ROW ========== */
790+
.expand-toggle {
791+
display: inline-flex;
792+
align-items: center;
793+
gap: 6px;
794+
cursor: pointer;
795+
user-select: none;
796+
}
797+
798+
.expand-toggle .expand-icon {
799+
display: inline-flex;
800+
align-items: center;
801+
justify-content: center;
802+
width: 18px;
803+
height: 18px;
804+
border-radius: 3px;
805+
background: #f0f0f0;
806+
transition: background 0.15s;
807+
flex-shrink: 0;
808+
}
809+
810+
.expand-toggle .expand-icon svg {
811+
width: 12px;
812+
height: 12px;
813+
stroke: #888;
814+
stroke-width: 2;
815+
fill: none;
816+
stroke-linecap: round;
817+
stroke-linejoin: round;
818+
transition: transform 0.2s ease;
819+
}
820+
821+
.expand-toggle.open .expand-icon svg {
822+
transform: rotate(90deg);
823+
}
824+
825+
.expand-toggle .expand-icon:hover {
826+
background: #e0e0e0;
827+
}
828+
829+
.history-row td {
830+
padding: 0 !important;
831+
border-bottom: 1px solid #f2f2f2;
832+
background: #fcfcfd;
833+
}
834+
835+
.history-row:hover {
836+
background: #fcfcfd !important;
837+
}
838+
839+
.history-row td:last-child {
840+
position: static;
841+
box-shadow: none;
842+
background: #fcfcfd;
843+
}
844+
845+
.history-panel {
846+
max-height: 0;
847+
overflow: hidden;
848+
transition: max-height 0.25s ease, padding 0.25s ease;
849+
}
850+
851+
.history-row.open .history-panel {
852+
max-height: 400px;
853+
}
854+
855+
.history-panel-inner {
856+
padding: 14px 20px 16px 40px;
857+
}
858+
859+
.history-panel-inner .history-label {
860+
font-size: 11px;
861+
text-transform: uppercase;
862+
letter-spacing: 0.5px;
863+
color: #999;
864+
font-weight: 600;
865+
margin-bottom: 10px;
866+
}
867+
868+
.history-entry {
869+
display: flex;
870+
align-items: flex-start;
871+
gap: 16px;
872+
padding: 8px 0;
873+
border-bottom: 1px solid #f0f0f0;
874+
font-size: 13px;
875+
}
876+
877+
.history-entry:last-child {
878+
border-bottom: none;
879+
}
880+
881+
.history-year {
882+
font-weight: 700;
883+
color: #2563eb;
884+
min-width: 40px;
885+
font-size: 13px;
886+
}
887+
888+
.history-amounts {
889+
display: flex;
890+
gap: 20px;
891+
min-width: 260px;
892+
}
893+
894+
.history-amount-item {
895+
display: flex;
896+
flex-direction: column;
897+
gap: 1px;
898+
min-width: 90px;
899+
}
900+
901+
.history-amount-label {
902+
font-size: 10px;
903+
text-transform: uppercase;
904+
letter-spacing: 0.3px;
905+
color: #aaa;
906+
font-weight: 600;
907+
}
908+
909+
.history-amount-value {
910+
font-weight: 600;
911+
color: #333;
912+
}
913+
914+
.history-reason {
915+
color: #666;
916+
font-style: italic;
917+
flex: 1;
918+
}
919+
920+
.history-empty {
921+
color: #bbb;
922+
font-size: 13px;
923+
padding: 4px 0;
924+
}
788925
</style>
789926
</head>
790927
<body>
@@ -1049,6 +1186,26 @@ <h3>Begrundelse</h3>
10491186
hrData[e.id] = { hrEngang: e.engang, hrTillaeg2000: e.tillaeg2000, hrStatus: 'hr-done' };
10501187
});
10511188

1189+
const negotiationHistory = {
1190+
1: [
1191+
{ year: 2025, engang: 6000, tillaeg2000: 3500, reason: 'Projektledelse af ESDH-migrering' },
1192+
{ year: 2024, engang: 0, tillaeg2000: 2000, reason: 'Driftsansvar og mentorrolle' }
1193+
],
1194+
2: [
1195+
{ year: 2025, engang: 4000, tillaeg2000: 1500, reason: 'Certificering i ITIL og øget helpdesk-ansvar' },
1196+
{ year: 2024, engang: 0, tillaeg2000: 0, reason: '' }
1197+
],
1198+
3: [
1199+
{ year: 2025, engang: 0, tillaeg2000: 1000, reason: 'Koordinering af sommerferieplanlægning' }
1200+
],
1201+
6: [
1202+
{ year: 2025, engang: 5000, tillaeg2000: 4000, reason: 'Arkitektansvar for ny platform' },
1203+
{ year: 2024, engang: 3000, tillaeg2000: 2500, reason: 'Systemintegration og teknisk ledelse' }
1204+
]
1205+
};
1206+
1207+
const expandedRows = new Set();
1208+
10521209
// ========== FORMATTING ==========
10531210
function formatDKK(n) {
10541211
if (n === 0 || isNaN(n)) return '0 kr.';
@@ -1096,7 +1253,12 @@ <h3>Begrundelse</h3>
10961253

10971254
const tr = document.createElement('tr');
10981255
tr.innerHTML = `
1099-
<td><strong>${emp.name}</strong></td>
1256+
<td>
1257+
<div class="expand-toggle ${expandedRows.has(emp.id) ? 'open' : ''}" data-expand="${emp.id}">
1258+
<span class="expand-icon"><svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg></span>
1259+
<strong>${emp.name}</strong>
1260+
</div>
1261+
</td>
11001262
<td>${emp.agreement}</td>
11011263
<td style="text-align:right;">${formatDKK(emp.salary)}</td>
11021264
<td>
@@ -1141,6 +1303,51 @@ <h3>Begrundelse</h3>
11411303
</td>
11421304
`;
11431305
tbody.appendChild(tr);
1306+
1307+
// History detail row
1308+
const history = negotiationHistory[emp.id] || [];
1309+
let historyHTML = '';
1310+
if (history.length > 0) {
1311+
historyHTML = history.map(h => {
1312+
const t2025 = Math.round(h.tillaeg2000 * CONVERSION_FACTOR);
1313+
return `
1314+
<div class="history-entry">
1315+
<span class="history-year">${h.year}</span>
1316+
<div class="history-amounts">
1317+
<div class="history-amount-item">
1318+
<span class="history-amount-label">Engang</span>
1319+
<span class="history-amount-value">${formatDKK(h.engang)}</span>
1320+
</div>
1321+
<div class="history-amount-item">
1322+
<span class="history-amount-label">Tillæg (2000)</span>
1323+
<span class="history-amount-value">${formatDKK(h.tillaeg2000)}</span>
1324+
</div>
1325+
<div class="history-amount-item">
1326+
<span class="history-amount-label">Tillæg (2025)</span>
1327+
<span class="history-amount-value">${formatDKK(t2025)}</span>
1328+
</div>
1329+
</div>
1330+
<span class="history-reason">${h.reason || '\u2014'}</span>
1331+
</div>`;
1332+
}).join('');
1333+
} else {
1334+
historyHTML = '<div class="history-empty">Ingen tidligere forhandlingshistorik</div>';
1335+
}
1336+
1337+
const historyTr = document.createElement('tr');
1338+
historyTr.className = `history-row ${expandedRows.has(emp.id) ? 'open' : ''}`;
1339+
historyTr.dataset.historyFor = emp.id;
1340+
historyTr.innerHTML = `
1341+
<td colspan="10">
1342+
<div class="history-panel">
1343+
<div class="history-panel-inner">
1344+
<div class="history-label">Forhandlingshistorik</div>
1345+
${historyHTML}
1346+
</div>
1347+
</div>
1348+
</td>
1349+
`;
1350+
tbody.appendChild(historyTr);
11441351
});
11451352

11461353
tbody.querySelectorAll('input, select').forEach(el => {
@@ -1194,6 +1401,21 @@ <h3>Begrundelse</h3>
11941401
});
11951402
});
11961403

1404+
tbody.querySelectorAll('[data-expand]').forEach(toggle => {
1405+
toggle.addEventListener('click', (e) => {
1406+
if (e.target.closest('input, select, button')) return;
1407+
const id = parseInt(toggle.dataset.expand);
1408+
if (expandedRows.has(id)) {
1409+
expandedRows.delete(id);
1410+
} else {
1411+
expandedRows.add(id);
1412+
}
1413+
toggle.classList.toggle('open');
1414+
const historyRow = tbody.querySelector(`tr[data-history-for="${id}"]`);
1415+
if (historyRow) historyRow.classList.toggle('open');
1416+
});
1417+
});
1418+
11971419
updateSums();
11981420
}
11991421

0 commit comments

Comments
 (0)