Finished full functional prototype of result overview

amd/build/page-studyplan-report.min.js

@@ -1,3 +1,3 @@
-define("local_treestudyplan/page-studyplan-report",["exports","core/ajax","core/notification","./vue/vue","./util/debugger","./util/string-helper","./studyplan-report-components","./report-viewer-components","./modedit-modal","./portal-vue/portal-vue.esm","./bootstrap-vue/bootstrap-vue"],(function(_exports,_ajax,_notification,_vue,_debugger,_stringHelper,_studyplanReportComponents,_reportViewerComponents,_modeditModal,_portalVue,_bootstrapVue){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=function(studyplanid,pageid,firstperiod,lastperiod){if(void 0===pageid||!Number.isInteger(Number(pageid))||void 0===studyplanid||!Number.isInteger(Number(studyplanid)))return void debug.error("Did Error: studyplan id and page id not provided as integer numbers to script.",studyplanid,pageid,firstperiod,lastperiod);studyplanid=Number(studyplanid),pageid=Number(pageid);new _vue.default({el:"#root",data:{structure:null},async mounted(){},created(){this.loadStructure()},computed:{},methods:{loadStructure(){const self=this;this.structure=null,(0,_ajax.call)([{methodname:"local_treestudyplan_get_report_structure",args:{pageid:pageid,firstperiod:firstperiod,lastperiod:lastperiod}}])[0].then((function(response){self.structure=response})).catch(_notification.default.exception)}}})},_notification=_interopRequireDefault(_notification),_vue=_interopRequireDefault(_vue),_debugger=_interopRequireDefault(_debugger),_studyplanReportComponents=_interopRequireDefault(_studyplanReportComponents),_reportViewerComponents=_interopRequireDefault(_reportViewerComponents),_modeditModal=_interopRequireDefault(_modeditModal),_portalVue=_interopRequireDefault(_portalVue),_bootstrapVue=_interopRequireDefault(_bootstrapVue),_vue.default.use(_studyplanReportComponents.default),_vue.default.use(_reportViewerComponents.default),_vue.default.use(_modeditModal.default),_vue.default.use(_portalVue.default),_vue.default.use(_bootstrapVue.default);let debug=new _debugger.default("treestudyplanviewer");(0,_stringHelper.load_strings)({studyplan:{studyplan_select_placeholder:"studyplan_select_placeholder"}})}));
+define("local_treestudyplan/page-studyplan-report",["exports","core/ajax","core/notification","./vue/vue","./util/debugger","./util/string-helper","./studyplan-report-components","./report-viewer-components","./modedit-modal","./portal-vue/portal-vue.esm","./bootstrap-vue/bootstrap-vue"],(function(_exports,_ajax,_notification,_vue,_debugger,_stringHelper,_studyplanReportComponents,_reportViewerComponents,_modeditModal,_portalVue,_bootstrapVue){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=function(studyplanid,pageid,firstperiod,lastperiod){if(void 0===pageid||!Number.isInteger(Number(pageid))||void 0===studyplanid||!Number.isInteger(Number(studyplanid)))return void debug.error("Error: studyplan id and page id not provided as integer numbers to script.",studyplanid,pageid,firstperiod,lastperiod);studyplanid=Number(studyplanid),pageid=Number(pageid);new _vue.default({el:"#root",data:{structure:null,studyplan:null,page:null,text:strings.studyplan_report},async mounted(){},created(){this.loadStructure(pageid,firstperiod,lastperiod)},computed:{},methods:{loadStructure(pageid,firstperiod,lastperiod){const self=this;this.structure=null,(0,_ajax.call)([{methodname:"local_treestudyplan_get_report_structure",args:{pageid:pageid,firstperiod:firstperiod,lastperiod:lastperiod}}])[0].then((function(response){self.structure=response,self.studyplan=response.studyplan,self.page=response.page})).catch(_notification.default.exception)},selectedPage(e){debug.info("SelectedPage",e);const pageid=e.target.value;this.loadStructure(pageid)},selectedFirstPeriod(e){debug.info("selectedFirstPeriod",e);let f=e.target.value,l=this.structure.lastperiod;l<f&&(l=f),this.loadStructure(this.page.id,f,l)},selectedLastPeriod(e){debug.info("selectedLastPeriod",e);let f=this.structure.firstperiod,l=e.target.value;l<f&&(l=f),this.loadStructure(this.page.id,f,l)}}})},_notification=_interopRequireDefault(_notification),_vue=_interopRequireDefault(_vue),_debugger=_interopRequireDefault(_debugger),_studyplanReportComponents=_interopRequireDefault(_studyplanReportComponents),_reportViewerComponents=_interopRequireDefault(_reportViewerComponents),_modeditModal=_interopRequireDefault(_modeditModal),_portalVue=_interopRequireDefault(_portalVue),_bootstrapVue=_interopRequireDefault(_bootstrapVue),_vue.default.use(_studyplanReportComponents.default),_vue.default.use(_reportViewerComponents.default),_vue.default.use(_modeditModal.default),_vue.default.use(_portalVue.default),_vue.default.use(_bootstrapVue.default);let debug=new _debugger.default("treestudyplanviewer"),strings=(0,_stringHelper.load_strings)({studyplan_report:{studyplan_select_placeholder:"studyplan_select_placeholder",studyplan:"studyplan",page:"studyplanpage",periods:"periods",period:"period",loading:"loading@core",all:"all@core",from:"from@core",to:"to@core"}})}));
 
 //# sourceMappingURL=page-studyplan-report.min.js.map

amd/build/util/debugger.min.js

@@ -1,3 +1,3 @@
-define("local_treestudyplan/util/debugger",["exports","core/config"],(function(_exports,_config){var obj;return Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=function(handle){let output_enabled=_config.default.developerdebug;output_enabled?console.warn(`In development environment. Debugger output enabled for ${handle}`):console.warn(`In production environment. Debugger output disabled for ${handle}`);return{write:function(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.info.apply(console,args)}},info:function(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.info.apply(console,args)}},warn:function(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.warn.apply(console,args)}},error:function(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.error.apply(console,args)}},enable:function(){output_enabled=!0},disable:function(){output_enabled=!1}}},_config=(obj=_config)&&obj.__esModule?obj:{default:obj},_exports.default}));
+define("local_treestudyplan/util/debugger",["exports","core/config"],(function(_exports,_config){var obj;return Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=function(handle){let output_enabled=_config.default.developerdebug;output_enabled?console.warn(`In development environment. Debugger output enabled for ${handle}`):console.warn(`In production environment. Debugger output disabled for ${handle}`);return{write(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.info.apply(console,args)}},info(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.info.apply(console,args)}},warn(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.warn.apply(console,args)}},error(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.error.apply(console,args)}},time(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.time.apply(console,args)}},timeEnd(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.timeEnd.apply(console,args)}},timeLog(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.timeLog.apply(console,args)}},timeStamp(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.timeStamp.apply(console,args)}},enable:function(){output_enabled=!0},disable:function(){output_enabled=!1}}},_config=(obj=_config)&&obj.__esModule?obj:{default:obj},_exports.default}));
 
 //# sourceMappingURL=debugger.min.js.map

amd/build/util/debugger.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"debugger.min.js","sources":["../../src/util/debugger.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint-env es6*/\n\nimport Config from \"core/config\";\n\n/**\n * Start a new debugger\n * @param {*} handle The string to attach to all messages from this debugger\n * @returns Debugger object\n */\nexport default function (handle) {\n    let output_enabled = Config.developerdebug;\n    if(output_enabled){\n        console.warn(`In development environment. Debugger output enabled for ${handle}`);\n    } else {\n        console.warn(`In production environment. Debugger output disabled for ${handle}`);\n    }\n\n    return {\n        write: function debugger_write() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.info.apply(console, args);\n            }\n        },\n        info: function debugger_info() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.info.apply(console, args);\n            }\n        },\n        warn: function debugger_warn() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.warn.apply(console, args);\n            }\n        },\n        error: function debugger_error() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.error.apply(console, args);\n            }\n        },\n        enable: function debugger_enable() {\n            output_enabled = true;\n        },\n\n        disable: function debugger_disable() {\n            output_enabled = false;\n        }\n    };\n\n}\n"],"names":["handle","output_enabled","Config","developerdebug","console","warn","write","args","Array","prototype","slice","call","arguments","unshift","info","apply","error","enable","disable"],"mappings":"kMAWyBA,YACjBC,eAAiBC,gBAAOC,eACzBF,eACCG,QAAQC,KAAM,2DAA0DL,UAExEI,QAAQC,KAAM,2DAA0DL,gBAGrE,CACHM,MAAO,cACCL,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQU,KAAKC,MAAMX,QAASG,QAGpCO,KAAM,cACEb,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQU,KAAKC,MAAMX,QAASG,QAGpCF,KAAM,cACEJ,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQC,KAAKU,MAAMX,QAASG,QAGpCS,MAAO,cACCf,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQY,MAAMD,MAAMX,QAASG,QAGrCU,OAAQ,WACJhB,gBAAiB,GAGrBiB,QAAS,WACLjB,gBAAiB"}
+{"version":3,"file":"debugger.min.js","sources":["../../src/util/debugger.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint-env es6*/\n\nimport Config from \"core/config\";\n\n/**\n * Start a new debugger\n * @param {*} handle The string to attach to all messages from this debugger\n * @returns Debugger object\n */\nexport default function (handle) {\n    let output_enabled = Config.developerdebug;\n    if(output_enabled){\n        console.warn(`In development environment. Debugger output enabled for ${handle}`);\n    } else {\n        console.warn(`In production environment. Debugger output disabled for ${handle}`);\n    }\n\n    return {\n        write() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.info.apply(console, args);\n            }\n        },\n        info() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.info.apply(console, args);\n            }\n        },\n        warn() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.warn.apply(console, args);\n            }\n        },\n        error() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.error.apply(console, args);\n            }\n        },\n        time() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.time.apply(console, args);\n            }\n        },\n        timeEnd() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.timeEnd.apply(console, args);\n            }\n        },\n        timeLog() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.timeLog.apply(console, args);\n            }\n        },\n        timeStamp() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.timeStamp.apply(console, args);\n            }\n        },\n        enable: function debugger_enable() {\n            output_enabled = true;\n        },\n\n        disable: function debugger_disable() {\n            output_enabled = false;\n        }\n    };\n\n}\n"],"names":["handle","output_enabled","Config","developerdebug","console","warn","write","args","Array","prototype","slice","call","arguments","unshift","info","apply","error","time","timeEnd","timeLog","timeStamp","enable","disable"],"mappings":"kMAWyBA,YACjBC,eAAiBC,gBAAOC,eACzBF,eACCG,QAAQC,KAAM,2DAA0DL,UAExEI,QAAQC,KAAM,2DAA0DL,gBAGrE,CACHM,WACQL,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQU,KAAKC,MAAMX,QAASG,QAGpCO,UACQb,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQU,KAAKC,MAAMX,QAASG,QAGpCF,UACQJ,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQC,KAAKU,MAAMX,QAASG,QAGpCS,WACQf,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQY,MAAMD,MAAMX,QAASG,QAGrCU,UACQhB,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQa,KAAKF,MAAMX,QAASG,QAGpCW,aACQjB,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQc,QAAQH,MAAMX,QAASG,QAGvCY,aACQlB,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQe,QAAQJ,MAAMX,QAASG,QAGvCa,eACQnB,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQgB,UAAUL,MAAMX,QAASG,QAGzCc,OAAQ,WACJpB,gBAAiB,GAGrBqB,QAAS,WACLrB,gBAAiB"}

amd/src/page-studyplan-report.js

@@ -29,8 +29,16 @@ Vue.use(BootstrapVue);
 let debug = new Debugger("treestudyplanviewer");
 
 let strings = load_strings({
-    studyplan: {
+    studyplan_report: {
         studyplan_select_placeholder: 'studyplan_select_placeholder',
+        studyplan: 'studyplan',
+        page: 'studyplanpage',
+        periods: 'periods',
+        period: 'period',
+        loading: 'loading@core',
+        all: 'all@core',
+        from: 'from@core',
+        to: 'to@core',
     },
 });
 
@@ -44,7 +52,7 @@ let strings = load_strings({
 export function init(studyplanid, pageid, firstperiod, lastperiod) {
     if (undefined === pageid || !Number.isInteger(Number(pageid)) ||
         undefined === studyplanid || !Number.isInteger(Number(studyplanid))) {
-        debug.error("Did Error: studyplan id and page id not provided as integer numbers to script.",
+        debug.error("Error: studyplan id and page id not provided as integer numbers to script.",
             studyplanid, pageid, firstperiod, lastperiod);
         return; // Do not continue if plan and page are not proper integers
     }
@@ -57,18 +65,22 @@ export function init(studyplanid, pageid, firstperiod, lastperiod) {
         el: '#root',
         data: {
             structure: null,
+            studyplan: null,
+            page: null,
+            text: strings.studyplan_report,
         },
         async mounted() {
             
         }, 
         created() {
-            this.loadStructure();
+            // On creation, load the page as specified
+            this.loadStructure(pageid,firstperiod,lastperiod);
         },
         computed: {
            
         },
         methods: {
-            loadStructure() {
+            loadStructure(pageid,firstperiod,lastperiod) {
                 const self = this;
                 this.structure = null; // Starts loading icon. Hides old data.
                 call([{
@@ -79,8 +91,34 @@ export function init(studyplanid, pageid, firstperiod, lastperiod) {
                     }
                 }])[0].then(function(response){
                     self.structure = response;
+                    self.studyplan = response.studyplan;
+                    self.page = response.page;
                 }).catch(notification.exception);
-            }
+            },
+            selectedPage(e) {
+                debug.info("SelectedPage",e);
+                const pageid = e.target.value;
+                this.loadStructure(pageid);
+            },
+            selectedFirstPeriod(e) {
+                debug.info("selectedFirstPeriod",e);
+                let f = e.target.value;
+                let l = this.structure.lastperiod;
+                if ( l < f) {
+                    l = f;
+                }
+                this.loadStructure(this.page.id,f,l);
+            },
+            selectedLastPeriod(e) {
+                debug.info("selectedLastPeriod",e);
+                let f = this.structure.firstperiod;
+                let l = e.target.value;
+                if ( l < f) {
+                    l = f;
+                }
+                this.loadStructure(this.page.id,f,l);
+
+            },
         },
     });
 }

amd/src/report-viewer-components.js

@@ -158,6 +158,8 @@ export default {
                 description: 'studyplan_description',
                 duration: 'studyplan_duration',
                 details: 'studyplan_details',
+                overview: 'overviewreport:all',
+                oveviewperiod: 'overviewreport:period'
             }
 
         });
@@ -628,10 +630,10 @@ export default {
                             <!-- First paint the headings-->
                             <div class='r-studyplan-headings'
                                 ><s-studyline-header-heading :identifier="Number(page.id)"
-                                    ><a v-if="selectedpage" 
+                                    ><a v-if="selectedpage" class="ml-2"
                                         :href="wwwroot+'//local/treestudyplan/studyplan-report.php?page='+selectedpage.id"
                                         
-                                        target='_blank'><i class='fa fa-file-text'></i></a
+                                        target='_blank'><i class='fa fa-list-ul'></i>&nbsp;{{text.overview}}</a
                                 ></s-studyline-header-heading>
                                 <r-studyline-heading  v-for="(line,lineindex) in page.studylines"
                                     :key="line.id"
@@ -652,9 +654,11 @@ export default {
                                         v-model="page.perioddesc[index-1]"
                                         :identifier="Number(page.id)"
                                         ><a v-if="selectedpage"
+                                            v-b-tooltip.hover
                                             :href="wwwroot+'//local/treestudyplan/studyplan-report.php?page='+selectedpage.id
                                                    +'&firstperiod='+index+'&lastperiod='+index"
-                                        target='_blank'><i class='fa fa-file-text'></i></a
+                                            target='_blank'
+                                            :title="text.overviewperiod"><i class='fa fa-list-ul'></i></a
                                     ></s-studyline-header-period>
                                     <div class="s-studyline-header-filter"></div>
                                 </template>

amd/src/studyplan-report-components.js

@@ -186,7 +186,7 @@ export default {
                                     this.expansioninfo.periods, 
                                     pid, 
                                     {
-                                        expanded: (firstperiod?true:false),
+                                        expanded: ((firstperiod && period.lines.length > 0)?true:false),
                                     }
                                 );
                                 this.$set(

amd/src/util/debugger.js

@@ -18,34 +18,62 @@ export default function (handle) {
     }
 
     return {
-        write: function debugger_write() {
+        write() {
             if (output_enabled) {
                 let args = Array.prototype.slice.call(arguments);
                 args.unshift(handle + ": ");
                 console.info.apply(console, args);
             }
         },
-        info: function debugger_info() {
+        info() {
             if (output_enabled) {
                 let args = Array.prototype.slice.call(arguments);
                 args.unshift(handle + ": ");
                 console.info.apply(console, args);
             }
         },
-        warn: function debugger_warn() {
+        warn() {
             if (output_enabled) {
                 let args = Array.prototype.slice.call(arguments);
                 args.unshift(handle + ": ");
                 console.warn.apply(console, args);
             }
         },
-        error: function debugger_error() {
+        error() {
             if (output_enabled) {
                 let args = Array.prototype.slice.call(arguments);
                 args.unshift(handle + ": ");
                 console.error.apply(console, args);
             }
         },
+        time() {
+            if (output_enabled) {
+                let args = Array.prototype.slice.call(arguments);
+                args.unshift(handle + ": ");
+                console.time.apply(console, args);
+            }
+        },
+        timeEnd() {
+            if (output_enabled) {
+                let args = Array.prototype.slice.call(arguments);
+                args.unshift(handle + ": ");
+                console.timeEnd.apply(console, args);
+            }
+        },
+        timeLog() {
+            if (output_enabled) {
+                let args = Array.prototype.slice.call(arguments);
+                args.unshift(handle + ": ");
+                console.timeLog.apply(console, args);
+            }
+        },
+        timeStamp() {
+            if (output_enabled) {
+                let args = Array.prototype.slice.call(arguments);
+                args.unshift(handle + ": ");
+                console.timeStamp.apply(console, args);
+            }
+        },
         enable: function debugger_enable() {
             output_enabled = true;
         },

css/devstyles.css

@@ -1732,6 +1732,23 @@ body.path-local-treestudyplan .editmode-switch-form > * {
     display: inline-block;
     width: 100%;
 }
+.path-local-treestudyplan .q-pageperiodselection {
+    margin-left: 0;
+    margin-bottom: 1em;
+    margin-top: 1em;
+    padding-left: 0;
+    position: relative;
+}
+.path-local-treestudyplan .q-pageperiodselection .row {
+    margin-top: 0.5rem;
+}
+.path-local-treestudyplan .q-pageperiodselection select.custom-select {
+    width: 100%;
+}
+.path-local-treestudyplan .q-pageperiodselection .q-label {
+    position: relative;
+    top: 0.5em;
+}
 
 .path-local-treestudyplan .b-modal-justify-footer-between .modal-footer,
 .features-treestudyplan .b-modal-justify-footer-between .modal-footer {

lang/en/local_treestudyplan.php

@@ -462,4 +462,6 @@ $string["premiumfeature:morestudyplans"] = 'Creating more than 5 studyplans in a
 $string["premiumfeature:morecategories"] = 'Creating studyplans in more than 20 categories is a premium feature.';
 $string["overall"] = 'Course';
 $string["studyplan_report"] = 'Studyplan result overview';
+$string["overviewreport:all"] = 'Result overview';
+$string["overviewreport:period"] = 'Result overview for this period';
 

lang/nl/local_treestudyplan.php

@@ -462,3 +462,5 @@ $string["premiumfeature:morestudyplans"] = 'Meer dan 5 studieplannen in één ca
 $string["premiumfeature:morecategories"] = 'In meer dan 20 categoriën een studieplan aanmaken kan alleen met premium toegang.';
 $string["overall"] = 'Cursus voltooid';
 $string["studyplan_report"] = 'Studieplan resultatenoverzicht';
+$string["overviewreport:all"] = 'Resultatenoverzicht';
+$string["overviewreport:period"] = 'Resultatenoverzicht voor deze periode';

scss/studyplan-report.scss

@@ -172,4 +172,28 @@
             width: 100%;
         }
     }
+
+    .q-pageperiodselection {
+        margin-left: 0;
+        margin-bottom: 1em;
+        margin-top: 1em;
+        padding-left: 0;
+        position: relative;
+
+        .row {
+            margin-top: 0.5rem;
+        }
+
+        select.custom-select {
+            width: 100%;
+        }
+
+        .q-label {
+            position: relative;
+            top: 0.5em;
+        }
+
+    }
+
+
 }

studyplan-report.php

@@ -96,7 +96,55 @@ if($studyplan->name() != $page->fullname()) {
                 <span class="sr-only">Loading...</span>
             </div>
         </div>
-        <q-studyplanreport v-else :structure="structure" ></s-studyplanreport>
+        <template v-else>
+            <div class='container q-pageperiodselection'>
+                <div class='row'>
+                    <div class="col-sm-2 q-label">{{text.page}}</div>
+                    <div class="col-sm-6">
+                        <select class="custom-select" :value="page.id" @change="selectedPage">
+                            <template v-if="studyplan">
+                                <option v-for="p in studyplan.pages" 
+                                    :key="p.id" 
+                                    :value="p.id"
+                                    :selected="(page.id == p.id)?true:false"
+                                    >{{p.fullname}}</option>
+                            </template>
+                            <option v-else disabled>{{text.loading}}</option>
+                        </select>
+                    </div>
+                </div>
+                <div class='row'>
+                    <div class="col-sm-2 q-label" >{{text.period}} ({{text.from}} / {{text.to}})</div>
+                    <div class="col-sm-2">
+                        <select class="custom-select" @change="selectedFirstPeriod">
+                            <template v-if="page">
+                                <option v-for="p in page.perioddesc" 
+                                    :key="p.id" 
+                                    :value="p.period"
+                                    :selected="(structure.firstperiod == p.period)?true:false"
+                                    >{{p.fullname}}</option>
+                            </template>
+                            <option v-else disabled>{{text.loading}}</option>
+                        </select>
+                    </div>
+                    <div class="col-sm-2 ">
+                        <select class="custom-select" @change="selectedLastPeriod">
+                            <template v-if="page">
+                                <template v-for="p in page.perioddesc">
+                                    <option v-if="p.period >= structure.firstperiod"
+                                        :key="p.id" 
+                                        :value="p.period"
+                                        :selected="(structure.lastperiod == p.period)?true:false"
+                                        >{{p.fullname}}</option>
+                                </template>
+                            </template>
+                            <option v-else disabled>{{text.loading}}</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <q-studyplanreport :structure="structure" ></s-studyplanreport>
+        </template>
     </div>
 </div>
 <?php

styles.css

@@ -1732,6 +1732,23 @@ body.path-local-treestudyplan .editmode-switch-form > * {
     display: inline-block;
     width: 100%;
 }
+.path-local-treestudyplan .q-pageperiodselection {
+    margin-left: 0;
+    margin-bottom: 1em;
+    margin-top: 1em;
+    padding-left: 0;
+    position: relative;
+}
+.path-local-treestudyplan .q-pageperiodselection .row {
+    margin-top: 0.5rem;
+}
+.path-local-treestudyplan .q-pageperiodselection select.custom-select {
+    width: 100%;
+}
+.path-local-treestudyplan .q-pageperiodselection .q-label {
+    position: relative;
+    top: 0.5em;
+}
 
 .path-local-treestudyplan .b-modal-justify-footer-between .modal-footer,
 .features-treestudyplan .b-modal-justify-footer-between .modal-footer {