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

Refactors employee details and UI controls

Browse source 
Enhances employee hours view with dynamic weekly schedule rendering
Updates toggle slider and theme switch components with improved interactions
Adds more flexible notification and settings configurations for employees

Improves user experience by streamlining UI controls and schedule display
This commit is contained in:
Janus C. H. Knudsen 2026-01-15 16:59:56 +01:00
parent 6746e876d7
commit 545d6606a6
18 changed files with 506 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1028,55 +1028,66 @@ class ScheduleController {
* Open the schedule drawer (no overlay - user can still interact with table)
*/
private openDrawer(): void {
// Lås tabelbredde før drawer åbner for at undgå "hop"
const container = document.querySelector('swp-tab-content[data-tab="schedule"] swp-page-container') as HTMLElement;
const table = document.getElementById('scheduleTable');
// Gem nuværende padding FØR klasser tilføjes
const startPadding = container ? getComputedStyle(container).paddingRight : '0px';
// Lås tabelbredde før drawer åbner for at undgå "hop"
if (table) {
const rect = table.getBoundingClientRect();
table.style.width = `${rect.width}px`;
}
// Animate container med Web Animations API
const container = document.querySelector('swp-tab-content[data-tab="schedule"] swp-page-container') as HTMLElement;
if (container) {
const currentStyles = getComputedStyle(container);
const currentMaxWidth = currentStyles.maxWidth;
const currentMargin = currentStyles.margin;
const currentPaddingRight = currentStyles.paddingRight;
// Tilføj klasser med det samme (maxWidth og margin ændres instant)
this.drawer?.classList.add('open');
document.body.classList.add('schedule-drawer-open');
// Animate kun padding fra gemt værdi
if (container) {
container.animate([
{ maxWidth: currentMaxWidth, margin: currentMargin, paddingRight: currentPaddingRight },
{ maxWidth: 'none', margin: '0px', paddingRight: '420px' }
{ paddingRight: startPadding },
{ paddingRight: '420px' }
], {
duration: 300,
duration: 200,
easing: 'ease',
fill: 'forwards'
});
}
this.drawer?.classList.add('open');
document.body.classList.add('schedule-drawer-open');
}
/**
* Close the schedule drawer
*/
private closeDrawer(): void {
// Luk drawer med det samme (visuelt)
this.drawer?.classList.remove('open');
const container = document.querySelector('swp-tab-content[data-tab="schedule"] swp-page-container') as HTMLElement;
const table = document.getElementById('scheduleTable');
if (container) {
// Hent nuværende computed styles for animation
const animation = container.getAnimations()[0];
if (animation) {
animation.cancel();
// Afspil animationen baglæns
animation.reverse();
animation.onfinish = () => {
animation.cancel();
// Fjern klasser og låst bredde når animation er færdig
document.body.classList.remove('schedule-drawer-open');
if (table) {
table.style.width = '';
}
};
return; // Exit early - cleanup happens in onfinish
}
}
// Fjern låst bredde så tabellen kan tilpasse sig igen
const table = document.getElementById('scheduleTable');
// Ingen animation, fjern klasser og låst bredde med det samme
document.body.classList.remove('schedule-drawer-open');
if (table) {
table.style.width = '';
}
this.drawer?.classList.remove('open');
document.body.classList.remove('schedule-drawer-open');
}
}