Automatically scroll to current period

amd/src/report-viewer-components.js

@@ -22,6 +22,29 @@ export default {
     install(Vue/*,options*/){
         let debug = new Debugger("treestudyplan-viewer");
         debug.enable();
+
+ 
+        let lastCaller = null;
+        /**
+         * Scroll current period into view
+         * @param {*} handle A key to pass so subsequent calls with the same key won't trigger (always triggers when null or undefined)
+         */
+        function scrollCurrentIntoView(handle){
+            const elScrollContainer = document.querySelector(".r-studyplan-scrollable");
+            const elCurrentHeader = elScrollContainer.querySelector(".s-studyline-header-period.current");
+            debug.info(`scrollCurrentIntoView called with handle ${handle}`);
+
+            if(elCurrentHeader && ((!handle) || (handle != lastCaller))){
+                lastCaller = handle;
+                elCurrentHeader.scrollIntoView({
+                    behavior: "smooth",
+                    block: "start",
+                    inline: "center",
+                });
+
+            }
+        }
+
         let strings = load_strings({
             invalid: {
                 error: 'error',
@@ -310,6 +333,12 @@ export default {
                     return show;
                 }
             },
+            mounted() {
+                scrollCurrentIntoView(this.value.id);
+            },
+            updated() {
+                scrollCurrentIntoView(this.value.id);
+            },
             template: `
                 <div class='r-studyplan-content'>
                     <!-- First paint the headings-->