diff --git a/amd/build/studyplan-report-components.min.js b/amd/build/studyplan-report-components.min.js
index b6157bb..44477c8 100644
--- a/amd/build/studyplan-report-components.min.js
+++ b/amd/build/studyplan-report-components.min.js
@@ -1,3 +1,3 @@
-define("local_treestudyplan/studyplan-report-components",["exports","./simpleline/simpleline","core/str","./util/string-helper","./util/date-helper","core/ajax","core/notification","./util/svgarc","./util/debugger","core/config","./studyplan-processor","./treestudyplan-components","core/edit_switch"],(function(_exports,_simpleline,_str,_stringHelper,_dateHelper,_ajax,_notification,_svgarc,_debugger,_config,_studyplanProcessor,_treestudyplanComponents,_edit_switch){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_notification=_interopRequireDefault(_notification),_debugger=_interopRequireDefault(_debugger),_config=_interopRequireDefault(_config),_treestudyplanComponents=_interopRequireDefault(_treestudyplanComponents);Math.PI;var _default={install(Vue){Vue.use(_treestudyplanComponents.default);let debug=new _debugger.default("treestudyplan-viewer"),strings=(0,_stringHelper.load_strings)({report:{loading:"loadinghelp@core",studyplan_past:"studyplan_past",studyplan_present:"studyplan_present",studyplan_future:"studyplan_future",back:"back"},invalid:{error:"error"},header:{overall:"overall",students:"students@core"},studentresults:{completion_incomplete:"completion_incomplete",completion_failed:"completion_failed",completion_pending:"completion_pending",completion_progress:"completion_progress",completion_completed:"completion_completed",completion_good:"completion_good",completion_excellent:"completion_excellent",student_not_tracked:"student_not_tracked"}});Vue.component("q-studyplanreport",{props:{structure:{type:Object}},data:()=>({students:[],studentresults:{},expansioninfo:{periods:{},lines:{},items:{}},groupinfo:{},sorting:{name:"asc"}}),created(){this.loadStudents()},computed:{sortedstudents(){return this.students}},watch:{structure:{immediate:!0,handler(structure){for(const period of structure.periods){const pid=period.period.id;this.expansioninfo.periods[pid]||(this.$set(this.expansioninfo.periods,pid,{expanded:!1}),this.$set(this.expansioninfo.lines,period.period.id,{}));for(const line of period.lines){const lid=line.line.id;this.expansioninfo.lines[lid]||this.$set(this.expansioninfo.lines[pid],lid,{expanded:!0});for(const item of line.items)this.expansioninfo.items[item.id]||this.$set(this.expansioninfo.items,item.id,{expanded:!1})}}}}},methods:{loadStudents(){const self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_all_associated_grouped",args:{studyplan_id:this.structure.studyplan.id}}])[0].then((function(response){self.students=response;for(const group of self.students){self.$set(self.groupinfo,group.label,{expand:!0});for(const student of group.users)self.studentresults[student.id]={loading:!0,results:[]},(0,_ajax.call)([{methodname:"local_treestudyplan_get_report_data",args:{pageid:self.structure.page.id,userid:student.id,firstperiod:self.structure.firstperiod,lastperiod:self.structure.lastperiod}}])[0].then((function(response){self.studentresults[student.id].loading=!1,self.studentresults[student.id].results=response})).catch(_notification.default.exception)}})).catch(_notification.default.exception)},expansionChanged(parm,id,val){parm="p"==parm[0]?"periods":"l"==parm[0]?"lines":"items",debug.info("Expansion Changed",parm,id,val),"lines"==parm?this.expansioninfo[parm][id[0]][id[1]].expanded=val:this.expansioninfo[parm][id].expanded=val}},template:"\n            <div>\n                <q-header \n                    :sorting='sorting' \n                    :structure='structure'\n                    :expansion='expansioninfo'\n                    @expansion='expansionChanged'\n                ></q-header>\n                <div class='q-scrolly'>\n                    <template v-for=\"group in sortedstudents\">\n                        <q-groupheading v-if=\"group.users\" :label=\"group.label\" :groupinfo=\"groupinfo[group.label]\"></q-groupheading>\n                        <template v-if='group.users && groupinfo[group.label].expand'>\n                            <q-studentresults v-for=\"student in group.users\"\n                                :student='student'\n                                :structure='structure'\n                                :results='studentresults[student.id]'\n                                :expansion='expansioninfo'\n                                ></q-studentresults>\n                        </template>\n                    </template>\n                </div>\n            </div>\n            "}),Vue.component("q-header",{props:{structure:{type:Object},sorting:{type:Object},expansion:{type:Object}},data:()=>({text:strings.header}),computed:{},methods:{conditions(item){const course=item.course,list=[];if(debug.info("Determining conditions",course),course.completion){debug.info("Has Competencies");for(const cmp of course.competencies)list.push({name:cmp.title})}else if(course.completion){debug.info("Has Core completion");for(const cnd of course.completion.conditions)for(const itm of cnd.items)list.push({name:itm.title})}else if(course.grades){debug.info("Has selected grades");for(const g of course.grades)list.push({name:g.name})}return list}},mounted(){},updated(){},template:"\n            <div class='q-header'>\n                <div class='q-studentname heading'><span>{{text.students}}</span></div>\n                <div v-for=\"p in structure.periods\" class='q-period-heading' >\n                    <div class='q-header-title'>\n                        <a  v-if=\"expansion.periods[p.period.id].expanded\"\n                            href='#' @click.prevent=\"$emit('expansion','periods',p.period.id,false);\"><i class='fa fa-minus-square'></i></a>\n                        <a  v-else\n                            href='#' @click.prevent=\"$emit('expansion','periods',p.period.id,true);\"><i class='fa fa-plus-square'></i></a>\n                        {{ p.period.fullname}}\n                    </div>\n                    <div v-if=\"expansion.periods[p.period.id].expanded\" class='q-header-details'>\n                        <div class='q-line-heading' v-for='l in p.lines'>\n                            <div class='q-header-title'><span v-html=\"l.line.shortname\"></span></div>\n                            <div v-if=\"l.items.length == 1 || expansion.lines[p.period.id][l.line.id].expanded\" class='q-header-details'>\n                                <div class='q-item-heading' v-for='item in l.items'>\n                                    <div class='q-header-title'>\n                                        <a  v-if=\"expansion.items[item.id].expanded\"\n                                            href='#' @click.prevent=\"$emit('expansion','items',item.id,false);\"\n                                                ><i class='fa fa-minus-square'></i></a>\n                                        <a  v-else\n                                            href='#' @click.prevent=\"$emit('expansion','items',item.id,true);\"\n                                                ><i class='fa fa-plus-square'></i></a>\n                                        {{ item.course.displayname}}\n                                    </div>\n                                    <div v-if=\"expansion.items[item.id].expanded\" class='q-header-details'>\n                                        <div class='q-condition-heading'>\n                                            {{ text.overall }}\n                                        </div>\n                                        <div v-for=\"c in conditions(item)\" class=\"q-condition-heading\" >\n                                            <span v-html=\"c.name\"></span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            "}),Vue.component("q-groupheading",{props:{structure:{type:Object}},data:()=>({}),computed:{},methods:{},template:"\n            <div class='q-groupheading'>\n\n            </div>\n            "}),Vue.component("q-studentresults",{props:{student:{type:Object},structure:{type:Object},results:{type:Object},expansion:{type:Object}},data:()=>({text:strings.studentresults}),computed:{},methods:{hasprogressinfo:item=>!!item.course.enrolled&&(item.course.completion||item.course.competency||item.course.grades),completion_icon(completion){switch(completion){default:return"circle-o";case"pending":return"question-circle";case"failed":return"times-circle";case"progress":return"exclamation-circle";case"completed":case"good":case"excellent":return"check-circle"}},circle_icon(completion){switch(completion){default:return null;case"failed":return"times";case"progress":return"";case"completed":case"good":case"excellent":return"check"}},courseprogress(item){return item.course.enrolled?item.course.completion?item.course.completion.progress/item.course.completion.count:item.course.competency?item.course.competency.progress/item.course.competency.count:item.course.grades?this.gradeprogress(item.course.grades)/item.course.grades.length:0:0},gradeprogress(grades){let progress=0;for(const ix in grades){const g=grades[ix];["completed","excellent","good"].includes(g.completion)&&progress++}return progress},conditions(item){},useritems(line){const list=[];for(const item of line.items){let newitm=item;for(const itm of this.results.results)if(item.id==itm.id){newitm=itm;break}list.push(newitm)}return list}},template:"\n            <div class='q-student-results'>\n                <div class='q-studentname '><span>{{student.firstname}} {{student.lastname}}</span></div>\n                <div v-for=\"p in structure.periods\" class='q-period-results' >\n                    <div  v-if=\"expansion.periods[p.period.id].expanded\" class='q-result-details'>\n                        <div class='q-line-results' v-for='l in p.lines'>\n                            <div v-if=\"l.items.length == 1 || expansion.lines[p.period.id][l.line.id].expanded\" class='q-result-details'>\n                                <div class='q-item-results' v-for='item in useritems(l)'>\n                                    <div v-if=\"expansion.items[item.id].expanded\" class='q-result-details'>\n                                        <div class='q-result q-overviewresult'>\n                                            <template v-if='!item.course.enrolled'>\n                                                <i v-b-popover.top\n                                                    class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                                    :title=\"text.student_not_tracked\"></i>\n                                            </template>\n                                            <template v-else-if='hasprogressinfo(item)'>\n                                                <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(item.completion)'\n                                                    :value='courseprogress(item)'\n                                                    :max='1'\n                                                    :min='0'\n                                                    :class=\"'r-course-result r-completion-'+item.completion\"\n                                                    :icon='circle_icon(item.completion)'\n                                                    :title=\"text['completion_'+item.completion]\"\n                                                ></r-progress-circle>\n                                                <i v-else v-b-popover.top\n                                                    :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                            ' r-completion-'+item.completion\"\n                                                    :title=\"text['completion_'+item.completion]\"></i>\n                                            </template>\n                                            <template v-else>\n                                                <i v-b-popover.top\n                                                    :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                            ' r-completion-'+item.completion\"\n                                                    :title=\"text['completion_'+item.completion]\"></i>\n                                            </template>\n                                        </div>\n                                        <div class='q-condition-heading' v-for='c in conditions(item)'>\n                                            \n\n\n                                        </div>\n                                    </div>\n                                    <div v-else class='q-result q-overviewresult'>\n                                        <template v-if='!item.course.enrolled'>\n                                            <i v-b-popover.top\n                                                class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                                :title=\"text.student_not_tracked\"></i>\n                                        </template>\n                                        <template v-else-if='hasprogressinfo(item)'>\n                                            <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(item.completion)'\n                                                :value='courseprogress(item)'\n                                                :max='1'\n                                                :min='0'\n                                                :class=\"'r-course-result r-completion-'+item.completion\"\n                                                :icon='circle_icon(item.completion)'\n                                                :title=\"text['completion_'+item.completion]\"\n                                            ></r-progress-circle>\n                                            <i v-else v-b-popover.top\n                                                :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                        ' r-completion-'+item.completion\"\n                                                :title=\"text['completion_'+item.completion]\"></i>\n                                        </template>\n                                        <template v-else>\n                                            <i v-b-popover.top\n                                                :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                        ' r-completion-'+item.completion\"\n                                                :title=\"text['completion_'+item.completion]\"></i>\n                                        </template>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            "})}};return _exports.default=_default,_exports.default}));
+define("local_treestudyplan/studyplan-report-components",["exports","./simpleline/simpleline","core/str","./util/string-helper","./util/date-helper","core/ajax","core/notification","./util/svgarc","./util/debugger","core/config","./studyplan-processor","./treestudyplan-components","core/edit_switch"],(function(_exports,_simpleline,_str,_stringHelper,_dateHelper,_ajax,_notification,_svgarc,_debugger,_config,_studyplanProcessor,_treestudyplanComponents,_edit_switch){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_notification=_interopRequireDefault(_notification),_debugger=_interopRequireDefault(_debugger),_config=_interopRequireDefault(_config),_treestudyplanComponents=_interopRequireDefault(_treestudyplanComponents);Math.PI;var _default={install(Vue){Vue.use(_treestudyplanComponents.default);let debug=new _debugger.default("treestudyplan-viewer"),strings=(0,_stringHelper.load_strings)({report:{loading:"loadinghelp@core",studyplan_past:"studyplan_past",studyplan_present:"studyplan_present",studyplan_future:"studyplan_future",back:"back"},invalid:{error:"error"},header:{overall:"overall",students:"students@core"},studentresults:{completion_incomplete:"completion_incomplete",completion_failed:"completion_failed",completion_pending:"completion_pending",completion_progress:"completion_progress",completion_completed:"completion_completed",completion_good:"completion_good",completion_excellent:"completion_excellent",student_not_tracked:"student_not_tracked"}});Vue.component("q-studyplanreport",{props:{structure:{type:Object}},data:()=>({students:[],studentresults:{},expansioninfo:{periods:{},lines:{},items:{}},groupinfo:{},sorting:{name:"asc"}}),created(){this.loadStudents()},computed:{sortedstudents(){return this.students}},watch:{structure:{immediate:!0,handler(structure){for(const period of structure.periods){const pid=period.period.id;this.expansioninfo.periods[pid]||(this.$set(this.expansioninfo.periods,pid,{expanded:!1}),this.$set(this.expansioninfo.lines,period.period.id,{}));for(const line of period.lines){const lid=line.line.id;this.expansioninfo.lines[lid]||this.$set(this.expansioninfo.lines[pid],lid,{expanded:!0});for(const item of line.items)this.expansioninfo.items[item.id]||this.$set(this.expansioninfo.items,item.id,{expanded:!1})}}}}},methods:{loadStudents(){const self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_all_associated_grouped",args:{studyplan_id:this.structure.studyplan.id}}])[0].then((function(response){self.students=response;for(const group of self.students){self.$set(self.groupinfo,group.label,{expand:!0});for(const student of group.users)self.$set(self.studentresults,student.id,{loading:!0,results:[]}),(0,_ajax.call)([{methodname:"local_treestudyplan_get_report_data",args:{pageid:self.structure.page.id,userid:student.id,firstperiod:self.structure.firstperiod,lastperiod:self.structure.lastperiod}}])[0].then((function(response){self.studentresults[student.id].loading=!1,self.studentresults[student.id].results=response})).catch(_notification.default.exception)}})).catch(_notification.default.exception)},expansionChanged(parm,id,val){parm="p"==parm[0]?"periods":"l"==parm[0]?"lines":"items",debug.info("Expansion Changed",parm,id,val),"lines"==parm?this.expansioninfo[parm][id[0]][id[1]].expanded=val:this.expansioninfo[parm][id].expanded=val}},template:"\n            <div>\n                <q-header \n                    :sorting='sorting' \n                    :structure='structure'\n                    :expansion='expansioninfo'\n                    @expansion='expansionChanged'\n                ></q-header>\n                <div class='q-scrolly'>\n                    <template v-for=\"group in sortedstudents\">\n                        <q-groupheading v-if=\"group.users\" :label=\"group.label\" :groupinfo=\"groupinfo[group.label]\"></q-groupheading>\n                        <template v-if='group.users && groupinfo[group.label].expand'>\n                            <q-studentresults v-for=\"student in group.users\"\n                                :student='student'\n                                :structure='structure'\n                                :results='studentresults[student.id].results'\n                                :loading='studentresults[student.id].loading'\n                                :expansion='expansioninfo'\n                                ></q-studentresults>\n                        </template>\n                    </template>\n                </div>\n            </div>\n            "}),Vue.component("q-header",{props:{structure:{type:Object},sorting:{type:Object},expansion:{type:Object}},data:()=>({text:strings.header}),computed:{},methods:{conditions(item){const course=item.course,list=[];if(debug.info("Determining conditions",course),course.completion){debug.info("Has Competencies");for(const cmp of course.competencies)list.push({name:cmp.title})}else if(course.completion){debug.info("Has Core completion");for(const cnd of course.completion.conditions)for(const itm of cnd.items)list.push({name:itm.title})}else if(course.grades){debug.info("Has selected grades");for(const g of course.grades)list.push({name:g.name})}return list}},mounted(){},updated(){},template:"\n            <div class='q-header'>\n                <div class='q-studentname heading'><span>{{text.students}}</span></div>\n                <div v-for=\"p in structure.periods\" class='q-period-heading' >\n                    <div class='q-header-title'>\n                        <a  v-if=\"expansion.periods[p.period.id].expanded\"\n                            href='#' @click.prevent=\"$emit('expansion','periods',p.period.id,false);\"><i class='fa fa-minus-square'></i></a>\n                        <a  v-else\n                            href='#' @click.prevent=\"$emit('expansion','periods',p.period.id,true);\"><i class='fa fa-plus-square'></i></a>\n                        {{ p.period.fullname}}\n                    </div>\n                    <div v-if=\"expansion.periods[p.period.id].expanded\" class='q-header-details'>\n                        <div class='q-line-heading' v-for='l in p.lines'>\n                            <div class='q-header-title'><span v-html=\"l.line.shortname\"></span></div>\n                            <div v-if=\"l.items.length == 1 || expansion.lines[p.period.id][l.line.id].expanded\" class='q-header-details'>\n                                <div class='q-item-heading' v-for='item in l.items'>\n                                    <div class='q-header-title'>\n                                        <a  v-if=\"expansion.items[item.id].expanded\"\n                                            href='#' @click.prevent=\"$emit('expansion','items',item.id,false);\"\n                                                ><i class='fa fa-minus-square'></i></a>\n                                        <a  v-else\n                                            href='#' @click.prevent=\"$emit('expansion','items',item.id,true);\"\n                                                ><i class='fa fa-plus-square'></i></a>\n                                        {{ item.course.displayname}}\n                                    </div>\n                                    <div v-if=\"expansion.items[item.id].expanded\" class='q-header-details'>\n                                        <div class='q-condition-heading'>\n                                            {{ text.overall }}\n                                        </div>\n                                        <div v-for=\"c in conditions(item)\" class=\"q-condition-heading\" >\n                                            <span v-html=\"c.name\"></span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            "}),Vue.component("q-groupheading",{props:{structure:{type:Object}},data:()=>({}),computed:{},methods:{},template:"\n            <div class='q-groupheading'>\n\n            </div>\n            "}),Vue.component("q-studentresults",{props:{student:{type:Object},structure:{type:Object},results:{type:Array},loading:{type:Boolean,default:!1},expansion:{type:Object}},data:()=>({text:strings.studentresults}),computed:{},methods:{hasprogressinfo:item=>!!item.course.enrolled&&(item.course.completion||item.course.competency||item.course.grades),completion_icon(completion){switch(completion){default:return"circle-o";case"pending":return"question-circle";case"failed":return"times-circle";case"progress":return"exclamation-circle";case"completed":case"good":case"excellent":return"check-circle"}},circle_icon(completion){switch(completion){default:return null;case"failed":return"times";case"progress":return"";case"completed":case"good":case"excellent":return"check"}},courseprogress(item){return item.course.enrolled?item.course.completion?item.course.completion.progress/item.course.completion.count:item.course.competency?item.course.competency.progress/item.course.competency.count:item.course.grades?this.gradeprogress(item.course.grades)/item.course.grades.length:0:0},gradeprogress(grades){let progress=0;for(const ix in grades){const g=grades[ix];["completed","excellent","good"].includes(g.completion)&&progress++}return progress},conditions(item){},useritems(line){const list=[];for(const item of line.items){let newitm=item;for(const itm of this.results)if(item.id==itm.id){newitm=itm;break}list.push(newitm)}return list}},template:"\n            <div class='q-student-results'>\n                <div class='q-studentname '><span>{{student.firstname}} {{student.lastname}}</span></div>\n                <div v-for=\"p in structure.periods\" class='q-period-results' >\n                    <div  v-if=\"expansion.periods[p.period.id].expanded\" class='q-result-details'>\n                        <div class='q-line-results' v-for='l in p.lines'>\n                            <div v-if=\"l.items.length == 1 || expansion.lines[p.period.id][l.line.id].expanded\" class='q-result-details'>\n                                <div class='q-item-results' v-for='item in useritems(l)'>\n                                    <div v-if=\"expansion.items[item.id].expanded\" class='q-result-details'>\n                                        <div class='q-result q-overviewresult'>\n                                            <template v-if=\"loading\">\n                                                <div class=\"spinner-border spinner-border-sm text-info\" role=\"status\"></div>\n                                            </template>\n                                            <template v-else-if='!item.course.enrolled'>\n                                                <i v-b-popover.top\n                                                    class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                                    :title=\"text.student_not_tracked\"></i>\n                                            </template>\n                                            <template v-else-if='hasprogressinfo(item)'>\n                                                <i v-b-popover.top\n                                                    :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                            ' r-completion-'+item.completion\"\n                                                    :title=\"text['completion_'+item.completion]\"></i>\n                                            </template>\n                                            <template v-else>\n                                                <i v-b-popover.top\n                                                    :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                            ' r-completion-'+item.completion\"\n                                                    :title=\"text['completion_'+item.completion]\"></i>\n                                            </template>\n                                        </div>\n                                        <div class='q-condition-heading' v-for='c in conditions(item)'>\n                                            \n\n\n                                        </div>\n                                    </div>\n                                    <div v-else class='q-result q-overviewresult'>\n                                        <template v-if=\"loading\">\n                                            <div class=\"spinner-border spinner-border-sm text-info\" role=\"status\"></div>\n                                        </template>\n                                        <template v-else-if='!item.course.enrolled'>\n                                            <i v-b-popover.top\n                                                class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                                :title=\"text.student_not_tracked\"></i>\n                                        </template>\n                                        <template v-else-if='hasprogressinfo(item)'>\n                                            <i v-b-popover.top\n                                                :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                        ' r-completion-'+item.completion\"\n                                                :title=\"text['completion_'+item.completion]\"></i>\n                                        </template>\n                                        <template v-else>\n                                            <i v-b-popover.top\n                                                :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                        ' r-completion-'+item.completion\"\n                                                :title=\"text['completion_'+item.completion]\"></i>\n                                        </template>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            "})}};return _exports.default=_default,_exports.default}));
 
 //# sourceMappingURL=studyplan-report-components.min.js.map
\ No newline at end of file
diff --git a/amd/build/studyplan-report-components.min.js.map b/amd/build/studyplan-report-components.min.js.map
index 9a468d6..7e46704 100644
--- a/amd/build/studyplan-report-components.min.js.map
+++ b/amd/build/studyplan-report-components.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"studyplan-report-components.min.js","sources":["../src/studyplan-report-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint no-unused-vars: warn */\n/*eslint max-len: [\"error\", { \"code\": 160 }] */\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {SimpleLine} from './simpleline/simpleline';\nimport {get_strings} from 'core/str';\nimport {load_strings} from './util/string-helper';\nimport {format_date,studyplanPageTiming,studyplanTiming} from './util/date-helper';\nimport {call} from 'core/ajax';\nimport notification from 'core/notification';\nimport {svgarcpath} from './util/svgarc';\nimport Debugger from './util/debugger';\nimport Config from 'core/config';\nimport {ProcessStudyplan, ProcessStudyplanPage, objCopy} from './studyplan-processor';\nimport TSComponents from './treestudyplan-components';\nimport {eventTypes as editSwEventTypes} from 'core/edit_switch';\n\n// Make π available as a constant\nconst π = Math.PI;\n// Gravity value for arrow lines - determines how much a line is pulled in the direction of the start/end before changing direction\nconst LINE_GRAVITY = 1.3;\n\n\nexport default {\n    install(Vue/*,options*/){\n        Vue.use(TSComponents);\n        let debug = new Debugger(\"treestudyplan-viewer\");\n\n        let strings = load_strings({\n            report: {\n                loading: \"loadinghelp@core\",\n                studyplan_past: \"studyplan_past\",\n                studyplan_present: \"studyplan_present\",\n                studyplan_future: \"studyplan_future\",\n                back: \"back\",\n            },\n            \n            invalid: {\n                error: 'error',\n            },\n            header: {\n                overall: 'overall',\n                students: 'students@core'\n            },\n            studentresults: {\n                completion_incomplete: \"completion_incomplete\",\n                completion_failed: \"completion_failed\",\n                completion_pending: \"completion_pending\",\n                completion_progress: \"completion_progress\",\n                completion_completed: \"completion_completed\",\n                completion_good: \"completion_good\",\n                completion_excellent: \"completion_excellent\",\n                student_not_tracked: \"student_not_tracked\",\n            }\n        });\n\n        /************************************\n         *                                  *\n         * Treestudyplan Viewer components  *\n         *                                  *\n         ************************************/\n\n        Vue.component('q-studyplanreport', {\n            props: {\n                structure: {\n                    type: Object,\n                },\n            },\n            data() {\n                return {\n                    students: [],\n                    studentresults: {},\n                    expansioninfo: {\n                        periods: {},\n                        lines: {},\n                        items: {},\n                    },\n                    groupinfo: {},\n\n                    sorting: {\n                        name: \"asc\",\n                    }\n                };\n            },\n            created() {\n                this.loadStudents();\n            },\n            computed: {\n                sortedstudents(){\n                    return this.students;\n                }\n            },\n            watch:{\n                structure: {\n                    immediate: true,\n                    handler (structure) {\n                        // (Re)build expansion info structure\n                        for (const period of structure.periods) {\n                            const pid = period.period.id;\n                            if (!this.expansioninfo.periods[pid]) {\n                                // Use this.$set to make sure the properties are reactive.\n                                this.$set(\n                                    this.expansioninfo.periods, \n                                    pid, \n                                    {\n                                        expanded: false,\n                                    }\n                                );\n                                this.$set(\n                                    this.expansioninfo.lines, \n                                    period.period.id, \n                                    {}\n                                );\n                            }\n                            for (const line of period.lines) {\n                                const lid = line.line.id;\n                                if (!this.expansioninfo.lines[lid]) {\n                                    // Use this.$set to make sure the properties are reactive.\n                                    this.$set(\n                                        this.expansioninfo.lines[pid],\n                                        lid, \n                                        {\n                                            expanded: true,\n                                        }\n                                    );\n                                }\n                                for (const item of line.items) {\n                                    if (!this.expansioninfo.items[item.id]) {\n                                        // Use this.$set to make sure the properties are reactive.\n                                        this.$set(\n                                            this.expansioninfo.items,\n                                            item.id,\n                                            {\n                                            expanded: false,\n                                            }\n                                        );\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n            },\n            methods: {\n                loadStudents() {\n                    const self = this;\n                    call([{\n                        methodname: 'local_treestudyplan_all_associated_grouped',\n                        args: { studyplan_id: this.structure.studyplan.id}\n                    }])[0].then(function(response){\n                        self.students = response;\n                        for(const group of self.students) {\n                            self.$set(\n                                self.groupinfo,\n                                group.label,\n                                {\n                                  expand: true,\n                                }\n                            );\n\n                            for(const student of group.users){\n                                self.studentresults[student.id] = {\n                                    loading: true,\n                                    results: [],\n                                };\n                                call([{\n                                    methodname: 'local_treestudyplan_get_report_data',\n                                    args: { pageid: self.structure.page.id, \n                                            userid: student.id,\n                                            firstperiod: self.structure.firstperiod,\n                                            lastperiod: self.structure.lastperiod,\n                                        }\n                                }])[0].then(function(response){\n                                    self.studentresults[student.id].loading = false;\n                                    self.studentresults[student.id].results = response;\n                                }).catch(notification.exception);\n                            }\n                        }\n                    }).catch(notification.exception);\n                },\n                expansionChanged(parm, id, val) {\n                    if(parm[0] == 'p') {\n                        parm = 'periods';\n                    } else if(parm[0] == 'l') {\n                        parm = 'lines';\n                    } else {\n                        parm = 'items';\n                    }\n                    debug.info('Expansion Changed',parm,id,val);\n\n                    if (parm == 'lines') {\n                        this.expansioninfo[parm][id[0]][id[1]].expanded = val;\n                    } else {\n                        this.expansioninfo[parm][id].expanded = val;\n                    }\n\n                }\n            },\n            template: `\n            <div>\n                <q-header \n                    :sorting='sorting' \n                    :structure='structure'\n                    :expansion='expansioninfo'\n                    @expansion='expansionChanged'\n                ></q-header>\n                <div class='q-scrolly'>\n                    <template v-for=\"group in sortedstudents\">\n                        <q-groupheading v-if=\"group.users\" :label=\"group.label\" :groupinfo=\"groupinfo[group.label]\"></q-groupheading>\n                        <template v-if='group.users && groupinfo[group.label].expand'>\n                            <q-studentresults v-for=\"student in group.users\"\n                                :student='student'\n                                :structure='structure'\n                                :results='studentresults[student.id]'\n                                :expansion='expansioninfo'\n                                ></q-studentresults>\n                        </template>\n                    </template>\n                </div>\n            </div>\n            `,\n        });\n\n        Vue.component('q-header', {\n            props: {\n                structure: {\n                    type: Object,\n                },\n                sorting: {\n                    type: Object,\n                },\n                expansion: {\n                    type: Object\n                },\n            },\n            data() {\n                return {\n                    text: strings.header,\n                };\n            },\n            computed: {\n            },\n            methods: {\n                conditions(item) {\n                    const course = item.course;\n                    const list = [];\n                    debug.info(\"Determining conditions\", course);\n                    if (course.completion) {\n                        debug.info(\"Has Competencies\");\n                        for (const cmp of course.competencies) {\n                            list.push({\n                                name: cmp.title,\n                            });\n                        }\n                    } else if(course.completion) {\n                        debug.info(\"Has Core completion\");\n                        for (const cnd of course.completion.conditions) {\n                            for (const itm of cnd.items) {\n                                list.push({\n                                    name: itm.title,\n                                });\n                            }\n                        }\n                    } else if(course.grades) {\n                        debug.info(\"Has selected grades\");\n                        for (const g of course.grades) {\n                            list.push({\n                                name: g.name,\n                            });\n                        }\n                    }\n\n                    return list;\n                },\n            },\n            mounted() {\n                \n            },\n            updated() {\n            },\n            template: `\n            <div class='q-header'>\n                <div class='q-studentname heading'><span>{{text.students}}</span></div>\n                <div v-for=\"p in structure.periods\" class='q-period-heading' >\n                    <div class='q-header-title'>\n                        <a  v-if=\"expansion.periods[p.period.id].expanded\"\n                            href='#' @click.prevent=\"$emit('expansion','periods',p.period.id,false);\"><i class='fa fa-minus-square'></i></a>\n                        <a  v-else\n                            href='#' @click.prevent=\"$emit('expansion','periods',p.period.id,true);\"><i class='fa fa-plus-square'></i></a>\n                        {{ p.period.fullname}}\n                    </div>\n                    <div v-if=\"expansion.periods[p.period.id].expanded\" class='q-header-details'>\n                        <div class='q-line-heading' v-for='l in p.lines'>\n                            <div class='q-header-title'><span v-html=\"l.line.shortname\"></span></div>\n                            <div v-if=\"l.items.length == 1 || expansion.lines[p.period.id][l.line.id].expanded\" class='q-header-details'>\n                                <div class='q-item-heading' v-for='item in l.items'>\n                                    <div class='q-header-title'>\n                                        <a  v-if=\"expansion.items[item.id].expanded\"\n                                            href='#' @click.prevent=\"$emit('expansion','items',item.id,false);\"\n                                                ><i class='fa fa-minus-square'></i></a>\n                                        <a  v-else\n                                            href='#' @click.prevent=\"$emit('expansion','items',item.id,true);\"\n                                                ><i class='fa fa-plus-square'></i></a>\n                                        {{ item.course.displayname}}\n                                    </div>\n                                    <div v-if=\"expansion.items[item.id].expanded\" class='q-header-details'>\n                                        <div class='q-condition-heading'>\n                                            {{ text.overall }}\n                                        </div>\n                                        <div v-for=\"c in conditions(item)\" class=\"q-condition-heading\" >\n                                            <span v-html=\"c.name\"></span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            `,\n        });\n\n        Vue.component('q-groupheading', {\n            props: {\n                structure: {\n                    type: Object,\n                },\n            },\n            data() {\n                return {\n\n                };\n            },\n            computed: {\n            },\n            methods: {\n            },\n            template: `\n            <div class='q-groupheading'>\n\n            </div>\n            `,\n        });\n\n        Vue.component('q-studentresults', {\n            props: {\n                student: {\n                    type: Object,\n                },\n                structure: {\n                    type: Object,\n                },\n                results: {\n                    type: Object\n                },                \n                expansion: {\n                    type: Object\n                },\n            },\n            data() {\n                return {\n                    text: strings.studentresults,\n                };\n            },\n            computed: {\n            },\n            methods: {\n                hasprogressinfo(item) {\n                    if (!item.course.enrolled) {\n                        return false;\n                    } else {\n                        return (item.course.completion || item.course.competency || item.course.grades);\n                    }\n                },\n                completion_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                        case \"pending\":\n                            return \"question-circle\";\n                        case \"failed\":\n                            return \"times-circle\";\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"completed\":\n                            return \"check-circle\";\n                        case \"good\":\n                            return \"check-circle\";\n                        case \"excellent\":\n                            return \"check-circle\";\n                    }\n                },\n                circle_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return null;\n                        case \"failed\":\n                            return \"times\";\n                        case \"progress\":\n                            return \"\";\n                        case \"completed\":\n                            return \"check\";\n                        case \"good\":\n                            return \"check\";\n                        case \"excellent\":\n                            return \"check\";\n                    }\n                },\n                courseprogress(item) {\n                    if (!item.course.enrolled) {\n                        return 0;\n                    } else if(item.course.completion) {\n                        return (item.course.completion.progress / item.course.completion.count); \n                    } else if(item.course.competency) {\n                        return (item.course.competency.progress / item.course.competency.count); \n                    } else if(item.course.grades) {\n                        return (this.gradeprogress(item.course.grades) / item.course.grades.length); \n                    } else {\n                        return 0;\n                    }\n                },\n                gradeprogress(grades) {\n                    let progress = 0;\n                    for (const ix in grades) {\n                        const g = grades[ix];\n                        if ([\"completed\",\"excellent\",\"good\"].includes(g.completion)) {\n                            progress++;\n                        }\n                    }\n                    return progress;\n                },\n                conditions(item) {\n\n                },\n                useritems(line) {\n                    const list = [];\n                    for (const item of line.items) {\n                        let newitm = item;\n                        for (const itm of this.results.results) {\n                            if (item.id == itm.id) {\n                                newitm = itm;\n                                break;\n                            }\n                        }\n                        list.push(newitm);\n                    }\n                    return list;\n                }\n            },\n            template: `\n            <div class='q-student-results'>\n                <div class='q-studentname '><span>{{student.firstname}} {{student.lastname}}</span></div>\n                <div v-for=\"p in structure.periods\" class='q-period-results' >\n                    <div  v-if=\"expansion.periods[p.period.id].expanded\" class='q-result-details'>\n                        <div class='q-line-results' v-for='l in p.lines'>\n                            <div v-if=\"l.items.length == 1 || expansion.lines[p.period.id][l.line.id].expanded\" class='q-result-details'>\n                                <div class='q-item-results' v-for='item in useritems(l)'>\n                                    <div v-if=\"expansion.items[item.id].expanded\" class='q-result-details'>\n                                        <div class='q-result q-overviewresult'>\n                                            <template v-if='!item.course.enrolled'>\n                                                <i v-b-popover.top\n                                                    class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                                    :title=\"text.student_not_tracked\"></i>\n                                            </template>\n                                            <template v-else-if='hasprogressinfo(item)'>\n                                                <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(item.completion)'\n                                                    :value='courseprogress(item)'\n                                                    :max='1'\n                                                    :min='0'\n                                                    :class=\"'r-course-result r-completion-'+item.completion\"\n                                                    :icon='circle_icon(item.completion)'\n                                                    :title=\"text['completion_'+item.completion]\"\n                                                ></r-progress-circle>\n                                                <i v-else v-b-popover.top\n                                                    :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                            ' r-completion-'+item.completion\"\n                                                    :title=\"text['completion_'+item.completion]\"></i>\n                                            </template>\n                                            <template v-else>\n                                                <i v-b-popover.top\n                                                    :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                            ' r-completion-'+item.completion\"\n                                                    :title=\"text['completion_'+item.completion]\"></i>\n                                            </template>\n                                        </div>\n                                        <div class='q-condition-heading' v-for='c in conditions(item)'>\n                                            \n\n\n                                        </div>\n                                    </div>\n                                    <div v-else class='q-result q-overviewresult'>\n                                        <template v-if='!item.course.enrolled'>\n                                            <i v-b-popover.top\n                                                class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                                :title=\"text.student_not_tracked\"></i>\n                                        </template>\n                                        <template v-else-if='hasprogressinfo(item)'>\n                                            <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(item.completion)'\n                                                :value='courseprogress(item)'\n                                                :max='1'\n                                                :min='0'\n                                                :class=\"'r-course-result r-completion-'+item.completion\"\n                                                :icon='circle_icon(item.completion)'\n                                                :title=\"text['completion_'+item.completion]\"\n                                            ></r-progress-circle>\n                                            <i v-else v-b-popover.top\n                                                :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                        ' r-completion-'+item.completion\"\n                                                :title=\"text['completion_'+item.completion]\"></i>\n                                        </template>\n                                        <template v-else>\n                                            <i v-b-popover.top\n                                                :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                        ' r-completion-'+item.completion\"\n                                                :title=\"text['completion_'+item.completion]\"></i>\n                                        </template>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            `,\n        });\n\n    },\n};"],"names":["Math","PI","install","Vue","use","TSComponents","debug","Debugger","strings","report","loading","studyplan_past","studyplan_present","studyplan_future","back","invalid","error","header","overall","students","studentresults","completion_incomplete","completion_failed","completion_pending","completion_progress","completion_completed","completion_good","completion_excellent","student_not_tracked","component","props","structure","type","Object","data","expansioninfo","periods","lines","items","groupinfo","sorting","name","created","loadStudents","computed","sortedstudents","this","watch","immediate","handler","period","pid","id","$set","expanded","line","lid","item","methods","self","methodname","args","studyplan_id","studyplan","then","response","group","label","expand","student","users","results","pageid","page","userid","firstperiod","lastperiod","catch","notification","exception","expansionChanged","parm","val","info","template","expansion","text","conditions","course","list","completion","cmp","competencies","push","title","cnd","itm","grades","g","mounted","updated","hasprogressinfo","enrolled","competency","completion_icon","circle_icon","courseprogress","progress","count","gradeprogress","length","ix","includes","useritems","newitm"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"studyplan-report-components.min.js","sources":["../src/studyplan-report-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint no-unused-vars: warn */\n/*eslint max-len: [\"error\", { \"code\": 160 }] */\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {SimpleLine} from './simpleline/simpleline';\nimport {get_strings} from 'core/str';\nimport {load_strings} from './util/string-helper';\nimport {format_date,studyplanPageTiming,studyplanTiming} from './util/date-helper';\nimport {call} from 'core/ajax';\nimport notification from 'core/notification';\nimport {svgarcpath} from './util/svgarc';\nimport Debugger from './util/debugger';\nimport Config from 'core/config';\nimport {ProcessStudyplan, ProcessStudyplanPage, objCopy} from './studyplan-processor';\nimport TSComponents from './treestudyplan-components';\nimport {eventTypes as editSwEventTypes} from 'core/edit_switch';\n\n// Make π available as a constant\nconst π = Math.PI;\n// Gravity value for arrow lines - determines how much a line is pulled in the direction of the start/end before changing direction\nconst LINE_GRAVITY = 1.3;\n\n\nexport default {\n    install(Vue/*,options*/){\n        Vue.use(TSComponents);\n        let debug = new Debugger(\"treestudyplan-viewer\");\n\n        let strings = load_strings({\n            report: {\n                loading: \"loadinghelp@core\",\n                studyplan_past: \"studyplan_past\",\n                studyplan_present: \"studyplan_present\",\n                studyplan_future: \"studyplan_future\",\n                back: \"back\",\n            },\n            \n            invalid: {\n                error: 'error',\n            },\n            header: {\n                overall: 'overall',\n                students: 'students@core'\n            },\n            studentresults: {\n                completion_incomplete: \"completion_incomplete\",\n                completion_failed: \"completion_failed\",\n                completion_pending: \"completion_pending\",\n                completion_progress: \"completion_progress\",\n                completion_completed: \"completion_completed\",\n                completion_good: \"completion_good\",\n                completion_excellent: \"completion_excellent\",\n                student_not_tracked: \"student_not_tracked\",\n            }\n        });\n\n        /************************************\n         *                                  *\n         * Treestudyplan Viewer components  *\n         *                                  *\n         ************************************/\n\n        Vue.component('q-studyplanreport', {\n            props: {\n                structure: {\n                    type: Object,\n                },\n            },\n            data() {\n                return {\n                    students: [],\n                    studentresults: {},\n                    expansioninfo: {\n                        periods: {},\n                        lines: {},\n                        items: {},\n                    },\n                    groupinfo: {},\n\n                    sorting: {\n                        name: \"asc\",\n                    }\n                };\n            },\n            created() {\n                this.loadStudents();\n            },\n            computed: {\n                sortedstudents(){\n                    return this.students;\n                }\n            },\n            watch:{\n                structure: {\n                    immediate: true,\n                    handler (structure) {\n                        // (Re)build expansion info structure\n                        for (const period of structure.periods) {\n                            const pid = period.period.id;\n                            if (!this.expansioninfo.periods[pid]) {\n                                // Use this.$set to make sure the properties are reactive.\n                                this.$set(\n                                    this.expansioninfo.periods, \n                                    pid, \n                                    {\n                                        expanded: false,\n                                    }\n                                );\n                                this.$set(\n                                    this.expansioninfo.lines, \n                                    period.period.id, \n                                    {}\n                                );\n                            }\n                            for (const line of period.lines) {\n                                const lid = line.line.id;\n                                if (!this.expansioninfo.lines[lid]) {\n                                    // Use this.$set to make sure the properties are reactive.\n                                    this.$set(\n                                        this.expansioninfo.lines[pid],\n                                        lid, \n                                        {\n                                            expanded: true,\n                                        }\n                                    );\n                                }\n                                for (const item of line.items) {\n                                    if (!this.expansioninfo.items[item.id]) {\n                                        // Use this.$set to make sure the properties are reactive.\n                                        this.$set(\n                                            this.expansioninfo.items,\n                                            item.id,\n                                            {\n                                            expanded: false,\n                                            }\n                                        );\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n            },\n            methods: {\n                loadStudents() {\n                    const self = this;\n                    call([{\n                        methodname: 'local_treestudyplan_all_associated_grouped',\n                        args: { studyplan_id: this.structure.studyplan.id}\n                    }])[0].then(function(response){\n                        self.students = response;\n                        for(const group of self.students) {\n                            self.$set(\n                                self.groupinfo,\n                                group.label,\n                                {\n                                  expand: true,\n                                }\n                            );\n\n                            for(const student of group.users){\n                                self.$set(\n                                    self.studentresults,\n                                    student.id, \n                                    {\n                                        loading: true,\n                                        results: [],\n                                    }\n                                );\n                                call([{\n                                    methodname: 'local_treestudyplan_get_report_data',\n                                    args: { pageid: self.structure.page.id, \n                                            userid: student.id,\n                                            firstperiod: self.structure.firstperiod,\n                                            lastperiod: self.structure.lastperiod,\n                                        }\n                                }])[0].then(function(response){\n                                    self.studentresults[student.id].loading = false;\n                                    self.studentresults[student.id].results = response;\n                                }).catch(notification.exception);\n                            }\n                        }\n                    }).catch(notification.exception);\n                },\n                expansionChanged(parm, id, val) {\n                    if(parm[0] == 'p') {\n                        parm = 'periods';\n                    } else if(parm[0] == 'l') {\n                        parm = 'lines';\n                    } else {\n                        parm = 'items';\n                    }\n                    debug.info('Expansion Changed',parm,id,val);\n\n                    if (parm == 'lines') {\n                        this.expansioninfo[parm][id[0]][id[1]].expanded = val;\n                    } else {\n                        this.expansioninfo[parm][id].expanded = val;\n                    }\n\n                }\n            },\n            template: `\n            <div>\n                <q-header \n                    :sorting='sorting' \n                    :structure='structure'\n                    :expansion='expansioninfo'\n                    @expansion='expansionChanged'\n                ></q-header>\n                <div class='q-scrolly'>\n                    <template v-for=\"group in sortedstudents\">\n                        <q-groupheading v-if=\"group.users\" :label=\"group.label\" :groupinfo=\"groupinfo[group.label]\"></q-groupheading>\n                        <template v-if='group.users && groupinfo[group.label].expand'>\n                            <q-studentresults v-for=\"student in group.users\"\n                                :student='student'\n                                :structure='structure'\n                                :results='studentresults[student.id].results'\n                                :loading='studentresults[student.id].loading'\n                                :expansion='expansioninfo'\n                                ></q-studentresults>\n                        </template>\n                    </template>\n                </div>\n            </div>\n            `,\n        });\n\n        Vue.component('q-header', {\n            props: {\n                structure: {\n                    type: Object,\n                },\n                sorting: {\n                    type: Object,\n                },\n                expansion: {\n                    type: Object\n                },\n            },\n            data() {\n                return {\n                    text: strings.header,\n                };\n            },\n            computed: {\n            },\n            methods: {\n                conditions(item) {\n                    const course = item.course;\n                    const list = [];\n                    debug.info(\"Determining conditions\", course);\n                    if (course.completion) {\n                        debug.info(\"Has Competencies\");\n                        for (const cmp of course.competencies) {\n                            list.push({\n                                name: cmp.title,\n                            });\n                        }\n                    } else if(course.completion) {\n                        debug.info(\"Has Core completion\");\n                        for (const cnd of course.completion.conditions) {\n                            for (const itm of cnd.items) {\n                                list.push({\n                                    name: itm.title,\n                                });\n                            }\n                        }\n                    } else if(course.grades) {\n                        debug.info(\"Has selected grades\");\n                        for (const g of course.grades) {\n                            list.push({\n                                name: g.name,\n                            });\n                        }\n                    }\n\n                    return list;\n                },\n            },\n            mounted() {\n                \n            },\n            updated() {\n            },\n            template: `\n            <div class='q-header'>\n                <div class='q-studentname heading'><span>{{text.students}}</span></div>\n                <div v-for=\"p in structure.periods\" class='q-period-heading' >\n                    <div class='q-header-title'>\n                        <a  v-if=\"expansion.periods[p.period.id].expanded\"\n                            href='#' @click.prevent=\"$emit('expansion','periods',p.period.id,false);\"><i class='fa fa-minus-square'></i></a>\n                        <a  v-else\n                            href='#' @click.prevent=\"$emit('expansion','periods',p.period.id,true);\"><i class='fa fa-plus-square'></i></a>\n                        {{ p.period.fullname}}\n                    </div>\n                    <div v-if=\"expansion.periods[p.period.id].expanded\" class='q-header-details'>\n                        <div class='q-line-heading' v-for='l in p.lines'>\n                            <div class='q-header-title'><span v-html=\"l.line.shortname\"></span></div>\n                            <div v-if=\"l.items.length == 1 || expansion.lines[p.period.id][l.line.id].expanded\" class='q-header-details'>\n                                <div class='q-item-heading' v-for='item in l.items'>\n                                    <div class='q-header-title'>\n                                        <a  v-if=\"expansion.items[item.id].expanded\"\n                                            href='#' @click.prevent=\"$emit('expansion','items',item.id,false);\"\n                                                ><i class='fa fa-minus-square'></i></a>\n                                        <a  v-else\n                                            href='#' @click.prevent=\"$emit('expansion','items',item.id,true);\"\n                                                ><i class='fa fa-plus-square'></i></a>\n                                        {{ item.course.displayname}}\n                                    </div>\n                                    <div v-if=\"expansion.items[item.id].expanded\" class='q-header-details'>\n                                        <div class='q-condition-heading'>\n                                            {{ text.overall }}\n                                        </div>\n                                        <div v-for=\"c in conditions(item)\" class=\"q-condition-heading\" >\n                                            <span v-html=\"c.name\"></span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            `,\n        });\n\n        Vue.component('q-groupheading', {\n            props: {\n                structure: {\n                    type: Object,\n                },\n            },\n            data() {\n                return {\n\n                };\n            },\n            computed: {\n            },\n            methods: {\n            },\n            template: `\n            <div class='q-groupheading'>\n\n            </div>\n            `,\n        });\n\n        Vue.component('q-studentresults', {\n            props: {\n                student: {\n                    type: Object,\n                },\n                structure: {\n                    type: Object,\n                },\n                results: {\n                    type: Array,\n                },\n                loading: {\n                    type: Boolean,\n                    default: false\n                },\n                expansion: {\n                    type: Object,\n                },\n            },\n            data() {\n                return {\n                    text: strings.studentresults,\n                };\n            },\n            computed: {\n            },\n            methods: {\n                hasprogressinfo(item) {\n                    if (!item.course.enrolled) {\n                        return false;\n                    } else {\n                        return (item.course.completion || item.course.competency || item.course.grades);\n                    }\n                },\n                completion_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                        case \"pending\":\n                            return \"question-circle\";\n                        case \"failed\":\n                            return \"times-circle\";\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"completed\":\n                            return \"check-circle\";\n                        case \"good\":\n                            return \"check-circle\";\n                        case \"excellent\":\n                            return \"check-circle\";\n                    }\n                },\n                circle_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return null;\n                        case \"failed\":\n                            return \"times\";\n                        case \"progress\":\n                            return \"\";\n                        case \"completed\":\n                            return \"check\";\n                        case \"good\":\n                            return \"check\";\n                        case \"excellent\":\n                            return \"check\";\n                    }\n                },\n                courseprogress(item) {\n                    if (!item.course.enrolled) {\n                        return 0;\n                    } else if(item.course.completion) {\n                        return (item.course.completion.progress / item.course.completion.count); \n                    } else if(item.course.competency) {\n                        return (item.course.competency.progress / item.course.competency.count); \n                    } else if(item.course.grades) {\n                        return (this.gradeprogress(item.course.grades) / item.course.grades.length); \n                    } else {\n                        return 0;\n                    }\n                },\n                gradeprogress(grades) {\n                    let progress = 0;\n                    for (const ix in grades) {\n                        const g = grades[ix];\n                        if ([\"completed\",\"excellent\",\"good\"].includes(g.completion)) {\n                            progress++;\n                        }\n                    }\n                    return progress;\n                },\n                conditions(item) {\n\n                },\n                useritems(line) {\n                    const list = [];\n                    for (const item of line.items) {\n                        let newitm = item;\n                        for (const itm of this.results) {\n                            if (item.id == itm.id) {\n                                newitm = itm;\n                                break;\n                            }\n                        }\n                        list.push(newitm);\n                    }\n                    return list;\n                }\n            },\n            template: `\n            <div class='q-student-results'>\n                <div class='q-studentname '><span>{{student.firstname}} {{student.lastname}}</span></div>\n                <div v-for=\"p in structure.periods\" class='q-period-results' >\n                    <div  v-if=\"expansion.periods[p.period.id].expanded\" class='q-result-details'>\n                        <div class='q-line-results' v-for='l in p.lines'>\n                            <div v-if=\"l.items.length == 1 || expansion.lines[p.period.id][l.line.id].expanded\" class='q-result-details'>\n                                <div class='q-item-results' v-for='item in useritems(l)'>\n                                    <div v-if=\"expansion.items[item.id].expanded\" class='q-result-details'>\n                                        <div class='q-result q-overviewresult'>\n                                            <template v-if=\"loading\">\n                                                <div class=\"spinner-border spinner-border-sm text-info\" role=\"status\"></div>\n                                            </template>\n                                            <template v-else-if='!item.course.enrolled'>\n                                                <i v-b-popover.top\n                                                    class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                                    :title=\"text.student_not_tracked\"></i>\n                                            </template>\n                                            <template v-else-if='hasprogressinfo(item)'>\n                                                <i v-b-popover.top\n                                                    :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                            ' r-completion-'+item.completion\"\n                                                    :title=\"text['completion_'+item.completion]\"></i>\n                                            </template>\n                                            <template v-else>\n                                                <i v-b-popover.top\n                                                    :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                            ' r-completion-'+item.completion\"\n                                                    :title=\"text['completion_'+item.completion]\"></i>\n                                            </template>\n                                        </div>\n                                        <div class='q-condition-heading' v-for='c in conditions(item)'>\n                                            \n\n\n                                        </div>\n                                    </div>\n                                    <div v-else class='q-result q-overviewresult'>\n                                        <template v-if=\"loading\">\n                                            <div class=\"spinner-border spinner-border-sm text-info\" role=\"status\"></div>\n                                        </template>\n                                        <template v-else-if='!item.course.enrolled'>\n                                            <i v-b-popover.top\n                                                class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                                :title=\"text.student_not_tracked\"></i>\n                                        </template>\n                                        <template v-else-if='hasprogressinfo(item)'>\n                                            <i v-b-popover.top\n                                                :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                        ' r-completion-'+item.completion\"\n                                                :title=\"text['completion_'+item.completion]\"></i>\n                                        </template>\n                                        <template v-else>\n                                            <i v-b-popover.top\n                                                :class=\"'r-course-result fa fa-'+completion_icon(item.completion)+\n                                                        ' r-completion-'+item.completion\"\n                                                :title=\"text['completion_'+item.completion]\"></i>\n                                        </template>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            `,\n        });\n\n    },\n};"],"names":["Math","PI","install","Vue","use","TSComponents","debug","Debugger","strings","report","loading","studyplan_past","studyplan_present","studyplan_future","back","invalid","error","header","overall","students","studentresults","completion_incomplete","completion_failed","completion_pending","completion_progress","completion_completed","completion_good","completion_excellent","student_not_tracked","component","props","structure","type","Object","data","expansioninfo","periods","lines","items","groupinfo","sorting","name","created","loadStudents","computed","sortedstudents","this","watch","immediate","handler","period","pid","id","$set","expanded","line","lid","item","methods","self","methodname","args","studyplan_id","studyplan","then","response","group","label","expand","student","users","results","pageid","page","userid","firstperiod","lastperiod","catch","notification","exception","expansionChanged","parm","val","info","template","expansion","text","conditions","course","list","completion","cmp","competencies","push","title","cnd","itm","grades","g","mounted","updated","Array","Boolean","default","hasprogressinfo","enrolled","competency","completion_icon","circle_icon","courseprogress","progress","count","gradeprogress","length","ix","includes","useritems","newitm"],"mappings":"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"}
\ No newline at end of file
diff --git a/amd/src/studyplan-report-components.js b/amd/src/studyplan-report-components.js
index c3aeb21..5a3f59c 100644
--- a/amd/src/studyplan-report-components.js
+++ b/amd/src/studyplan-report-components.js
@@ -163,10 +163,14 @@ export default {
                             );
 
                             for(const student of group.users){
-                                self.studentresults[student.id] = {
-                                    loading: true,
-                                    results: [],
-                                };
+                                self.$set(
+                                    self.studentresults,
+                                    student.id, 
+                                    {
+                                        loading: true,
+                                        results: [],
+                                    }
+                                );
                                 call([{
                                     methodname: 'local_treestudyplan_get_report_data',
                                     args: { pageid: self.structure.page.id, 
@@ -215,7 +219,8 @@ export default {
                             <q-studentresults v-for="student in group.users"
                                 :student='student'
                                 :structure='structure'
-                                :results='studentresults[student.id]'
+                                :results='studentresults[student.id].results'
+                                :loading='studentresults[student.id].loading'
                                 :expansion='expansioninfo'
                                 ></q-studentresults>
                         </template>
@@ -355,10 +360,14 @@ export default {
                     type: Object,
                 },
                 results: {
-                    type: Object
-                },                
+                    type: Array,
+                },
+                loading: {
+                    type: Boolean,
+                    default: false
+                },
                 expansion: {
-                    type: Object
+                    type: Object,
                 },
             },
             data() {
@@ -440,7 +449,7 @@ export default {
                     const list = [];
                     for (const item of line.items) {
                         let newitm = item;
-                        for (const itm of this.results.results) {
+                        for (const itm of this.results) {
                             if (item.id == itm.id) {
                                 newitm = itm;
                                 break;
@@ -451,6 +460,7 @@ export default {
                     return list;
                 }
             },
+            /* https://css-tricks.com/position-sticky-and-table-headers/ */
             template: `
             <div class='q-student-results'>
                 <div class='q-studentname '><span>{{student.firstname}} {{student.lastname}}</span></div>
@@ -461,21 +471,16 @@ export default {
                                 <div class='q-item-results' v-for='item in useritems(l)'>
                                     <div v-if="expansion.items[item.id].expanded" class='q-result-details'>
                                         <div class='q-result q-overviewresult'>
-                                            <template v-if='!item.course.enrolled'>
+                                            <template v-if="loading">
+                                                <div class="spinner-border spinner-border-sm text-info" role="status"></div>
+                                            </template>
+                                            <template v-else-if='!item.course.enrolled'>
                                                 <i v-b-popover.top
                                                     class="r-course-result fa fa-exclamation-triangle t-not-enrolled-alert"
                                                     :title="text.student_not_tracked"></i>
                                             </template>
                                             <template v-else-if='hasprogressinfo(item)'>
-                                                <r-progress-circle v-if='["failed", "progress","incomplete"].includes(item.completion)'
-                                                    :value='courseprogress(item)'
-                                                    :max='1'
-                                                    :min='0'
-                                                    :class="'r-course-result r-completion-'+item.completion"
-                                                    :icon='circle_icon(item.completion)'
-                                                    :title="text['completion_'+item.completion]"
-                                                ></r-progress-circle>
-                                                <i v-else v-b-popover.top
+                                                <i v-b-popover.top
                                                     :class="'r-course-result fa fa-'+completion_icon(item.completion)+
                                                             ' r-completion-'+item.completion"
                                                     :title="text['completion_'+item.completion]"></i>
@@ -494,21 +499,16 @@ export default {
                                         </div>
                                     </div>
                                     <div v-else class='q-result q-overviewresult'>
-                                        <template v-if='!item.course.enrolled'>
+                                        <template v-if="loading">
+                                            <div class="spinner-border spinner-border-sm text-info" role="status"></div>
+                                        </template>
+                                        <template v-else-if='!item.course.enrolled'>
                                             <i v-b-popover.top
                                                 class="r-course-result fa fa-exclamation-triangle t-not-enrolled-alert"
                                                 :title="text.student_not_tracked"></i>
                                         </template>
                                         <template v-else-if='hasprogressinfo(item)'>
-                                            <r-progress-circle v-if='["failed", "progress","incomplete"].includes(item.completion)'
-                                                :value='courseprogress(item)'
-                                                :max='1'
-                                                :min='0'
-                                                :class="'r-course-result r-completion-'+item.completion"
-                                                :icon='circle_icon(item.completion)'
-                                                :title="text['completion_'+item.completion]"
-                                            ></r-progress-circle>
-                                            <i v-else v-b-popover.top
+                                            <i v-b-popover.top
                                                 :class="'r-course-result fa fa-'+completion_icon(item.completion)+
                                                         ' r-completion-'+item.completion"
                                                 :title="text['completion_'+item.completion]"></i>
diff --git a/css/devstyles.css b/css/devstyles.css
index 1570dc0..8a62235 100644
--- a/css/devstyles.css
+++ b/css/devstyles.css
@@ -1681,6 +1681,9 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .path-local-treestudyplan .q-header .q-result,
 .path-local-treestudyplan .q-student-results .q-result {
     height: 2rem;
+    display: flex;
+    justify-content: center;
+    padding-top: 0.25rem;
 }
 .path-local-treestudyplan .q-header,
 .path-local-treestudyplan .q-student-results {
diff --git a/scss/studyplan-report.scss b/scss/studyplan-report.scss
index 96c79c9..9b0546f 100644
--- a/scss/studyplan-report.scss
+++ b/scss/studyplan-report.scss
@@ -38,7 +38,9 @@
 
         .q-result {
             height: 2rem;
-
+            display: flex;
+            justify-content: center;
+            padding-top: 0.25rem;
         }
 
     }
diff --git a/styles.css b/styles.css
index 1570dc0..8a62235 100644
--- a/styles.css
+++ b/styles.css
@@ -1681,6 +1681,9 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .path-local-treestudyplan .q-header .q-result,
 .path-local-treestudyplan .q-student-results .q-result {
     height: 2rem;
+    display: flex;
+    justify-content: center;
+    padding-top: 0.25rem;
 }
 .path-local-treestudyplan .q-header,
 .path-local-treestudyplan .q-student-results {