From 6746e876d77d72abae314ce0426d6f8109c72a17 Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Thu, 15 Jan 2026 01:17:59 +0100
Subject: [PATCH] Adds drawer animation for schedule page container

Enhances user experience by implementing smooth container resize animation when opening and closing the schedule drawer

Uses Web Animations API to dynamically adjust page container styling with transition effects
---
 .../wwwroot/css/employees.css                 |  2 +-
 .../wwwroot/ts/modules/employees.ts           | 27 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/PlanTempus.Application/wwwroot/css/employees.css b/PlanTempus.Application/wwwroot/css/employees.css
index 1d79a2e..6bef67b 100644
--- a/PlanTempus.Application/wwwroot/css/employees.css
+++ b/PlanTempus.Application/wwwroot/css/employees.css
@@ -889,7 +889,7 @@ swp-schedule-scroll {
   overflow-x: auto;
 }
 
-/* Når drawer er åben: page-container skal fylde ud til drawer */
+/* Når drawer er åben: page-container styles (animation via JS) */
 body.schedule-drawer-open swp-tab-content[data-tab="schedule"] swp-page-container {
   max-width: none;
   margin: 0;
diff --git a/PlanTempus.Application/wwwroot/ts/modules/employees.ts b/PlanTempus.Application/wwwroot/ts/modules/employees.ts
index dbca62b..be31799 100644
--- a/PlanTempus.Application/wwwroot/ts/modules/employees.ts
+++ b/PlanTempus.Application/wwwroot/ts/modules/employees.ts
@@ -1035,6 +1035,24 @@ class ScheduleController {
       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;
+
+      container.animate([
+        { maxWidth: currentMaxWidth, margin: currentMargin, paddingRight: currentPaddingRight },
+        { maxWidth: 'none', margin: '0px', paddingRight: '420px' }
+      ], {
+        duration: 300,
+        easing: 'ease',
+        fill: 'forwards'
+      });
+    }
+
     this.drawer?.classList.add('open');
     document.body.classList.add('schedule-drawer-open');
   }
@@ -1043,6 +1061,15 @@ class ScheduleController {
    * Close the schedule drawer
    */
   private closeDrawer(): void {
+    const container = document.querySelector('swp-tab-content[data-tab="schedule"] swp-page-container') as HTMLElement;
+    if (container) {
+      // Hent nuværende computed styles for animation
+      const animation = container.getAnimations()[0];
+      if (animation) {
+        animation.cancel();
+      }
+    }
+
     // Fjern låst bredde så tabellen kan tilpasse sig igen
     const table = document.getElementById('scheduleTable');
     if (table) {