diff --git a/amd/build/studyplan-editor-components.min.js b/amd/build/studyplan-editor-components.min.js
index 7bfaab9..1a42205 100644
--- a/amd/build/studyplan-editor-components.min.js
+++ b/amd/build/studyplan-editor-components.min.js
@@ -1,3 +1,3 @@
-define("local_treestudyplan/studyplan-editor-components",["exports","./simpleline/simpleline","core/ajax","core/notification","core/str","./util/string-helper","./util/date-helper","./studyplan-processor","./util/debugger","./downloader","./treestudyplan-components","./util/mform-helper"],(function(_exports,_simpleline,_ajax,_notification,_str,_stringHelper,_dateHelper,_studyplanProcessor,_debugger,_downloader,_treestudyplanComponents,_mformHelper){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _createForOfIteratorHelper(o,allowArrayLike){var it="undefined"!=typeof Symbol&&o[Symbol.iterator]||o["@@iterator"];if(!it){if(Array.isArray(o)||(it=function(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(o))||allowArrayLike&&o&&"number"==typeof o.length){it&&(o=it);var i=0,F=function(){};return{s:F,n:function(){return i>=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function(_e){throw _e},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var err,normalCompletion=!0,didErr=!1;return{s:function(){it=it.call(o)},n:function(){var step=it.next();return normalCompletion=step.done,step},e:function(_e2){didErr=!0,err=_e2},f:function(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_notification=_interopRequireDefault(_notification),_debugger=_interopRequireDefault(_debugger),_treestudyplanComponents=_interopRequireDefault(_treestudyplanComponents),_mformHelper=_interopRequireDefault(_mformHelper);var STUDYPLAN_EDITOR_FIELDS=["name","shortname","description","idnumber","context_id","aggregation","aggregation_config"],STUDYPLAN_EDITOR_PAGE_FIELDS=["context_id","periods","startdate","enddate"],PERIOD_EDITOR_FIELDS=["fullname","shortname","startdate","enddate"],datechanger_globals={default:!1,defaultchoice:!1,hidewarn:!1},_default2={STUDYPLAN_EDITOR_FIELDS:STUDYPLAN_EDITOR_FIELDS,install:function(Vue){Vue.use(_treestudyplanComponents.default),Vue.use(_mformHelper.default);var debug=new _debugger.default("treestudyplan-editor");function isVisible(elem){return!!(elem.offsetWidth||elem.offsetHeight||elem.getClientRects().length)}var ItemEventBus=new Vue,string_keys=(0,_stringHelper.load_stringkeys)({conditions:[{value:"ALL",textkey:"condition_all"},{value:"ANY",textkey:"condition_any"}]}),strings=(0,_stringHelper.load_strings)({studyplan_text:{studyline_editmode:"studyline_editmode",toolbox_toggle:"toolbox_toggle",editmode_modules_hidden:"editmode_modules_hidden",studyline_add:"studyline_add",add$core:"add$core",edit$core:"edit$core",studyline_name:"studyline_name",studyline_name_ph:"studyline_name_ph",studyline_shortname:"studyline_shortname",studyline_shortname_ph:"studyline_shortname_ph",studyline_color:"studyline_color",associations:"associations",associated_cohorts:"associated_cohorts",associated_users:"associated_users",studyline_edit:"studyline_edit",studyplan_name:"studyplan_name",studyplan_name_ph:"studyplan_name_ph",studyplan_shortname:"studyplan_shortname",studyplan_shortname_ph:"studyplan_shortname_ph",studyplan_description:"studyplan_description",studyplan_description_ph:"studyplan_description_ph",studyplan_idnumber:"studyplan_idnumber",studyplan_idnumber_ph:"studyplan_idnumber_ph",studyplan_slots:"studyplan_slots",studyplan_startdate:"studyplan_startdate",studyplan_enddate:"studyplan_enddate"},studyplan_advanced:{advanced_tools:"advanced_tools",confirm_cancel:"confirm_cancel",confirm_ok:"confirm_ok",success$core:"success$core",error$core:"failed$core",advanced_converted:"advanced_converted",advanced_skipped:"advanced_skipped",advanced_failed:"advanced_failed",advanced_locked:"advanced_locked",advanced_multiple:"advanced_multiple",advanced_error:"advanced_error",advanced_tools_heading:"advanced_tools_heading",advanced_warning_title:"advanced_warning_title",advanced_warning:"advanced_warning",advanced_pick_scale:"advanced_pick_scale",advanced_course_manipulation_title:"advanced_course_manipulation_title",advanced_force_scale_title:"advanced_force_scale_title",advanced_force_scale_desc:"advanced_force_scale_desc",advanced_force_scale_button:"advanced_force_scale_button",advanced_disable_autoenddate_title:"advanced_disable_autoenddate_title",advanced_disable_autoenddate_desc:"advanced_disable_autoenddate_desc",advanced_disable_autoenddate_button:"advanced_disable_autoenddate_button",advanced_confirm_header:"advanced_confirm_header",advanced_force_scale_confirm:"advanced_force_scale_confirm",advanced_import:"advanced_import",advanced_export:"advanced_export",advanced_export_csv:"advanced_export_csv",advanced_import_from_file:"advanced_import_from_file",advanced_purge:"advanced_purge",advanced_purge_expl:"advanced_purge_expl",advanced_cascade_cohortsync_title:"advanced_cascade_cohortsync_title",advanced_cascade_cohortsync_desc:"advanced_cascade_cohortsync_desc",advanced_cascade_cohortsync:"advanced_cascade_cohortsync"},studyplan_edit:{studyplan_edit:"studyplan_edit",studyplan_name:"studyplan_name",studyplan_name_ph:"studyplan_name_ph",studyplan_shortname:"studyplan_shortname",studyplan_shortname_ph:"studyplan_shortname_ph",studyplan_description:"studyplan_description",studyplan_description_ph:"studyplan_description_ph",studyplan_idnumber:"studyplan_idnumber",studyplan_idnumber_ph:"studyplan_idnumber_ph",studyplan_context:"studyplan_context",studyplan_slots:"studyplan_slots",studyplan_startdate:"studyplan_startdate",studyplan_enddate:"studyplan_enddate",choose_aggregation_style:"choose_aggregation_style",setting_bistate_thresh_excellent:"setting_bistate_thresh_excellent",settingdesc_bistate_thresh_excellent:"settingdesc_bistate_thresh_excellent",setting_bistate_thresh_good:"setting_bistate_thresh_good",settingdesc_bistate_thresh_good:"settingdesc_bistate_thresh_good",setting_bistate_thresh_completed:"setting_bistate_thresh_completed",settingdesc_bistate_thresh_completed:"settingdesc_bistate_thresh_completed",setting_bistate_support_failed:"setting_bistate_support_failed",settingdesc_bistate_support_failed:"settingdesc_bistate_support_failed",setting_bistate_thresh_progress:"setting_bistate_thresh_progress",settingdesc_bistate_thresh_progress:"settingdesc_bistate_thresh_progress",setting_bistate_accept_pending_submitted:"setting_bistate_accept_pending_submitted",settingdesc_bistate_accept_pending_submitted:"settingdesc_bistate_accept_pending_submitted"},period_edit:{edit:"period_edit",fullname:"studyplan_name",shortname:"studyplan_shortname",startdate:"studyplan_startdate",enddate:"studyplan_enddate"},course_timing:{title:"course_timing_title",desc:"course_timing_desc",question:"course_timing_question",warning:"course_timing_warning",timing_ok:"course_timing_ok",timing_off:"course_timing_off",course:"course@core",period:"period",yes:"yes$core",no:"no$core",duration:"duration",years:"years$core",year:"year$core",weeks:"weeks$core",week:"week$core",days:"days$core",day:"day$core",rememberchoice:"course_timing_rememberchoice",hidewarning:"course_timing_hidewarning",periodspan:"course_period_span",periods:"periods",periodspan_desc:"course_period_span_desc"},studyplan_associate:{associations:"associations",associated_cohorts:"associated_cohorts",associated_users:"associated_users",associate_cohorts:"associate_cohorts",associate_users:"associate_users",add_association:"add_association",delete_association:"delete_association",associations_empty:"associations_empty",associations_search:"associations_search",cohorts:"cohorts",users:"users",selected:"selected",name:"name",context:"context"},item_text:{select_conditions:"select_conditions",item_configuration:"item_configuration",ok:"ok@core",delete:"delete@core",item_delete_message:"item_delete_message",type_course:"course@core",type_junction:"tool-junction",type_start:"tool-start",type_finish:"tool-finish",type_badge:"tool-badge",type_invalid:"course-invalid"},item_course_text:{select_conditions:"select_conditions",select_grades:"select_grades",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",grade_include:"grade_include",grade_require:"grade_require",ok:"ok@core",cancel:"cancel@core",delete:"delete@core"},invalid:{error:"error"},completion:{completion_completed:"completion_completed",completion_incomplete:"completion_incomplete",aggregation_all:"aggregation_all",aggregation_any:"aggregation_any",aggregation_overall_all:"aggregation_overall_all",aggregation_overall_any:"aggregation_overall_any",completion_not_configured:"completion_not_configured",configure_completion:"configure_completion"},badge:{share_badge:"share_badge",dateissued:"dateissued",dateexpire:"dateexpire",badgeinfo:"badgeinfo"}});Vue.component("t-studyplan-advanced",{props:{value:{type:Object,default:function(){return null}}},data:function(){return{force_scales:{selected_scale:null,result:[]},text:strings.studyplan_advanced}},created:function(){},mounted:function(){},updated:function(){},computed:{scales:function(){return[{id:null,disabled:!0,name:this.text.advanced_pick_scale}].concat(this.value.advanced.force_scales.scales)}},methods:{disable_autoenddate:function(){var self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_disable_autoenddate",args:{studyplan_id:this.value.id}}])[0].done((function(response){self.$bvModal.msgBoxConfirm((response.success?self.text.success$core:self.text.error$core)+"\n"+response.msg)})).fail(_notification.default.exception)},force_scales_start:function(){var _this=this,self=this;this.$bvModal.msgBoxConfirm(this.text.advanced_force_scale_confirm,{title:this.text.advanced_force_scale_confirm,okVariant:"danger",okTitle:this.text.confirm_ok,cancelTitle:this.text.confirm_cancel}).then((function(value){1==value&&(0,_ajax.call)([{methodname:"local_treestudyplan_force_studyplan_scale",args:{studyplan_id:_this.value.id,scale_id:_this.force_scales.selected_scale}}])[0].done((function(response){self.force_scales.result=response})).fail(_notification.default.exception)}))},export_plan:function(format){var self=this;null!=format&&["json","csv"].includes(format)||(format="json"),(0,_ajax.call)([{methodname:"local_treestudyplan_export_plan",args:{studyplan_id:this.value.id,format:format}}])[0].done((function(response){(0,_downloader.download)(self.value.shortname+"."+format,response.content,response.format)})).fail(_notification.default.exception)},import_studylines:function(){var _this2=this;(0,_downloader.upload)((function(filename,content){(0,_ajax.call)([{methodname:"local_treestudyplan_import_studylines",args:{studyplan_id:_this2.value.id,content:content,format:"application/json"}}])[0].done((function(response){response.success?location.reload():debug.error("Import failed: ",response.msg)})).fail(_notification.default.exception)}),"application/json")},purge_studyline:function(){(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyplan",args:{id:this.value.id,force:!0}}])[0].done((function(response){response.success?location.reload():debug.error("Could not delete plan: ",response.msg)})).fail(_notification.default.exception)},cascade_cohortsync:function(){var self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_cascade_cohortsync",args:{studyplan_id:this.value.id}}])[0].done((function(response){self.$bvModal.msgBoxOk(response.success?self.text.success$core:self.text.error$core,{title:self.text.advanced_cascade_cohortsync})})).fail(_notification.default.exception)},modal_close:function(){this.force_scales.result=[]}},template:'\n            <span>\n                <a  v-if="value.advanced"\n                    href=\'#\'\n                    @click.prevent=\'\'\n                    class=\'text-danger\'\n                    v-b-modal="\'t-studyplan-\'+value.id+\'-advanced\'"\n                    ><i class=\'fa fa-wrench\'></i> {{text.advanced_tools}}</a>\n                <b-modal v-if="value.advanced"\n                    :id="\'t-studyplan-\'+value.id+\'-advanced\'"\n                    size="lg"\n                    :title="text.advanced_tools_heading"\n                    ok-only\n                    @hide="modal_close"\n                    >\n                    <b-card no-body>\n                    <b-tabs card>\n                        <b-tab :title="text.advanced_warning_title" active>\n                            {{ text.advanced_warning}}\n                        </b-tab>\n                        <b-tab :title="text.advanced_course_manipulation_title" >\n                            <b-container>\n                            <b-row><b-col cols="*">\n                                <h3>{{ text.advanced_cascade_cohortsync_title}}</h3>\n                                    {{ text.advanced_cascade_cohortsync_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols="*">\n                                <b-button\n                                    variant="info"\n                                    @click="cascade_cohortsync"\n                                >{{ text.advanced_cascade_cohortsync}}</b-button>\n                            </b-col></b-row>\n                            <b-row class="mt-3"><b-col cols="*">\n                                <h3>{{ text.advanced_force_scale_title}}</h3>\n                                {{ text.advanced_force_scale_desc}}\n                            </b-col></b-row>\n                            <b-row>\n                                <b-col>\n                                    <b-form-select v-model="force_scales.selected_scale"\n                                    :options="scales" text-field="name" value-field="id"\n                                    ></b-form-select>\n                                </b-col>\n                                <b-col cols="4">\n                                    <b-button\n                                        variant="danger"\n                                        :disabled="force_scales.selected_scale == null"\n                                        @click="force_scales_start"\n                                    >{{ text.advanced_force_scale_button}}</b-button>\n                                </b-col>\n\n                            </b-row>\n                            <b-row class="mt-3"><b-col cols="*">\n                                <ul class=\'t-advanced-scrollable\' v-if="force_scales.result.length > 0">\n                                    <li v-for="c in force_scales.result">\n                                        <span class=\'t-advanced-coursename\'>{{c.course.fullname}}</span>\n                                        <ul v-if="c.grades.length > 0">\n                                            <li v-for=\'g in c.grades\'>\n                                                <span class=\'t-advanced-gradename\'><span v-html="g.name"></span></span>\n                                                <span v-if="g.changed == \'converted\'" class=\'t-advanced-status changed\'\n                                                    >{{text.advanced_converted}}</span\n                                                ><span v-else-if="g.changed == \'skipped\'" class=\'t-advanced-status skipped\'\n                                                    >{{text.advanced_skipped}}</span\n                                                >\n                                                <span v-else class=\'t-advanced-status skipped\'\n                                                    >{{text.advanced_error}}</span\n                                                >\n                                            </li>\n                                        </ul>\n                                    </li>\n                                </ul>\n                            </b-col></b-row>\n                            <b-row><b-col cols="*">\n                                <h3>{{ text.advanced_disable_autoenddate_title}}</h3>\n                                {{ text.advanced_disable_autoenddate_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols="*">\n                                <b-button\n                                    variant="danger"\n                                    @click="disable_autoenddate"\n                                >{{ text.advanced_disable_autoenddate_button}}</b-button>\n                            </b-col></b-row>\n                            </b-container>\n                        </b-tab>\n                        <b-tab :title=\'text.advanced_export\'>\n                            <b-button\n                                    variant="primary"\n                                    @click="export_plan"\n                                >{{ text.advanced_export}}</b-button>\n                            <b-button\n                                    variant="danger"\n                                    @click="import_studylines"\n                                >{{ text.advanced_import}}</b-button>\n                            <b-button\n                                variant="primary"\n                                @click="export_plan(\'csv\')"\n                            >{{ text.advanced_export_csv}}</b-button>\n                    </b-tab>\n                        <b-tab :title=\'text.advanced_purge\'>\n                            <p>{{text.advanced_purge_expl}}</p>\n                            <p><b-button\n                                    variant="danger"\n                                    @click="purge_studyline"\n                                >{{ text.advanced_purge}}</b-button></p>\n                        </b-tab>                    </b-tabs>\n                    </b-card>\n                </b-modal>\n            </span>\n            '}),Vue.component("t-studyplan-edit",{props:{value:{type:Object,default:function(){return null}},mode:{type:String,default:function(){return"edit"}},type:{type:String,default:function(){return"link"}},variant:{type:String,default:function(){return""}},contextid:{type:Number,default:1},defaultAggregation:{type:String,default:"core"}},data:function(){return{show:!1,config:{userfields:[{key:"selected"},{key:"firstname",sortable:!0},{key:"lastname",sortable:!0}],cohortfields:[{key:"selected"},{key:"name",sortable:!0},{key:"context",sortable:!0}]},editdata:{name:"",shortname:"",description:"",idnumber:"",context_id:this.contextid,periods:4,startdate:(new Date).getFullYear()+"-08-01",enddate:(new Date).getFullYear()+1+"-08-01",aggregation:this.defaultAggregation,aggregation_config:""},aggregation_parsed:{},aggregators:[],categories:[{context_id:1,category:{path:"System"}}],text:strings.studyplan_edit}},created:function(){var self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_list_aggregators",args:[]}])[0].done((function(response){for(var ix in self.aggregators=response,self.aggregators){var ag=self.aggregators[ix];try{ag.defaultconfig&&ag.defaultconfig.length>0&&(self.aggregation_parsed[ag.id]=JSON.parse(ag.defaultconfig))}catch(e){debug.warn(e)}}})).fail(_notification.default.exception),(0,_ajax.call)([{methodname:"local_treestudyplan_list_accessible_categories",args:{operation:"edit"}}])[0].done((function(response){for(var ix in response){var cat=response[ix];cat.category.pathname=cat.category.path.join(" / ")}self.categories=response})).fail(_notification.default.exception)},mounted:function(){},updated:function(){},computed:{},methods:{editPlanStart:function(){if("create"!=this.mode&&((0,_studyplanProcessor.objCopy)(this.editdata,this.value.pages[0],STUDYPLAN_EDITOR_PAGE_FIELDS),(0,_studyplanProcessor.objCopy)(this.editdata,this.value,STUDYPLAN_EDITOR_FIELDS)),this.editdata.aggregation_config&&this.editdata.aggregation_config.length>0)try{this.aggregation_parsed[this.editdata.aggregation]=JSON.parse(this.editdata.aggregation_config)}catch(e){debug.warn(e)}this.show=!0},editPlanFinish:function(){var self=this,args={},method="local_treestudyplan_edit_studyplan";"create"==this.mode?method="local_treestudyplan_add_studyplan":args.id=this.value.id,this.aggregation_parsed[this.editdata.aggregation]&&(this.editdata.aggregation_config=JSON.stringify(this.aggregation_parsed[this.editdata.aggregation])),(0,_studyplanProcessor.objCopy)(args,this.editdata,STUDYPLAN_EDITOR_FIELDS),(0,_studyplanProcessor.objCopy)(args,this.editdata,STUDYPLAN_EDITOR_PAGE_FIELDS),(0,_ajax.call)([{methodname:method,args:args}])[0].done((function(response){if("create"==self.mode)self.$emit("created",response),self.editdata={name:"",shortname:"",description:"",context_id:1,periods:4,startdate:(new Date).getFullYear()+"-08-01",enddate:(new Date).getFullYear()+1+"-08-01",aggregation:"bistate",aggregation_config:""};else{var moved_from=self.value.context_id,moved_to=response.context_id,moved=moved_from!=moved_to;response.pages[0].periods!=self.value.pages[0].periods?(0,_ajax.call)([{methodname:"local_treestudyplan_get_studyplan_map",args:{id:self.value.id}}])[0].done((function(response){self.value=(0,_studyplanProcessor.ProcessStudyplan)(response,!0),debug.info("studyplan processed"),self.$emit("input",self.value)})).fail((function(error){_notification.default.exception(error)})):((0,_studyplanProcessor.objCopy)(self.value,response,STUDYPLAN_EDITOR_FIELDS),self.$emit("input",self.value),moved&&self.$emit("moved",self.value,moved_from,moved_to))}})).fail(_notification.default.exception)},numberFilter:function(value){return value}},template:'\n            <span class=\'s-studyplan-edit\'>\n                <b-button :variant="variant" v-if=\'type == "button"\' @click.prevent=\'editPlanStart()\'\n                    ><slot><i class=\'fa fa-gear\'></i></slot></b-button>\n                <a variant="variant" v-else href=\'#\' @click.prevent=\'editPlanStart()\'\n                    ><slot><i class=\'fa fa-gear\'></i></slot></a>\n                <b-modal\n                    v-model="show"\n                    size="lg"\n                    ok-variant="primary"\n                    :title="text.studyplan_edit"\n                    @ok="editPlanFinish()"\n                    :ok-disabled="Math.min(editdata.name.length,editdata.shortname.length) == 0"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_name}}</b-col>\n                            <b-col cols="8">\n                                <b-form-input v-model="editdata.name"\n                                :state=\'editdata.name.length>0\'\n                                :placeholder="text.studyplan_name_ph"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_shortname}}</b-col>\n                            <b-col cols="8">\n                                <b-form-input v-model="editdata.shortname"\n                                :state=\'editdata.shortname.length>0\'\n                                :placeholder="text.studyplan_shortname_ph"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_idnumber}}</b-col>\n                            <b-col cols="8">\n                                <b-form-input v-model="editdata.idnumber"\n                                :placeholder="text.studyplan_idnumber_ph"></b-form-input>\n                            </b-col>\n                        </b-row>                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_description}}</b-col>\n                            <b-col cols="8">\n                                <mform name="studyplan_editform" :params="{studyplan_id: value.id}"></mform>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_context}}</b-col>\n                            <b-col cols="8">\n                                <b-form-select v-model="editdata.context_id"\n                                :options="categories" text-field="category.pathname" value-field="context_id"\n                                ></b-form-select>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_slots}}</b-col>\n                            <b-col cols="8">\n                                <b-form-input \n                                    min="1"\n                                    type="number"\n                                    no-wheel\n                                    v-model="editdata.periods"\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_startdate}}</b-col>\n                            <b-col cols="8">\n                                <b-form-datepicker start-weekday="1" v-model="editdata.startdate"></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_enddate}}</b-col>\n                            <b-col cols="8">\n                                <b-form-datepicker start-weekday="1" v-model="editdata.enddate" ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.choose_aggregation_style}}</b-col>\n                            <b-col cols="8">\n                                <b-form-select v-model="editdata.aggregation"\n                                :options="aggregators" text-field="name" value-field="id"\n                                ></b-form-select>\n                            </b-col>\n                        </b-row>\n                        <template v-if="aggregation_parsed.bistate && editdata.aggregation == \'bistate\'">\n                            <b-row >\n                                <b-col cols="4">{{ text.setting_bistate_thresh_excellent}}</b-col>\n                                <b-col cols="8">\n                                    <b-form-input v-model="aggregation_parsed.bistate.thresh_excellent"\n                                    type="number" number :formatter="numberFilter"\n                                    ></b-form-input>\n                                </b-col>\n                            </b-row>\n                            <b-row >\n                                <b-col cols="4">{{ text.setting_bistate_thresh_good}}</b-col>\n                                <b-col cols="8">\n                                    <b-form-input v-model="aggregation_parsed.bistate.thresh_good"\n                                    type="number" number :formatter="numberFilter"\n                                    ></b-form-input>\n                                </b-col>\n                            </b-row>\n                            <b-row >\n                                <b-col cols="4">{{ text.setting_bistate_thresh_completed}}</b-col>\n                                <b-col cols="8">\n                                    <b-form-input v-model="aggregation_parsed.bistate.thresh_completed"\n                                    type="number" number :formatter="numberFilter"\n                                    ></b-form-input>\n                                </b-col>\n                            </b-row>\n                            <b-row><b-col cols="*">&nbsp;</b-col></b-row>\n                            <b-row>\n                                <b-col cols="7">{{ text.setting_bistate_support_failed}}</b-col>\n                                <b-col cols="3">\n                                    <b-form-checkbox v-model="aggregation_parsed.bistate.use_failed"\n                                    ></b-form-checkbox>\n                                </b-col>\n                            </b-row>\n                            <b-row><b-col cols="*">&nbsp;</b-col></b-row>\n                            <b-row >\n                                <b-col cols="7">{{ text.setting_bistate_accept_pending_submitted}}</b-col>\n                                <b-col cols="3">\n                                    <b-form-checkbox v-model="aggregation_parsed.bistate.accept_pending_as_submitted"\n                                    ></b-form-checkbox>\n                                </b-col>\n                            </b-row>\n                        </template>\n                    </b-container>\n                </b-modal>\n            </span>\n            '}),Vue.component("t-studyplan-associate",{props:["value"],data:function(){return{show:!1,config:{userfields:[{key:"selected"},{key:"firstname",sortable:!0},{key:"lastname",sortable:!0}],cohortfields:[{key:"selected"},{key:"name",sortable:!0},{key:"context",sortable:!0}]},association:{cohorts:[],users:[]},loading:{cohorts:!1,users:!1},search:{users:[],cohorts:[]},selected:{search:{users:[],cohorts:[]},associated:{users:[],cohorts:[]}},text:strings.studyplan_associate}},created:function(){},mounted:function(){},updated:function(){},methods:{showModal:function(){this.show=!0,this.loadAssociations()},cohortOptionModel:function(c){return{value:c.id,text:c.name+" ("+c.context.path.join(" / ")+")"}},userOptionModel:function(u){return{value:u.id,text:u.firstname+" "+u.lastname}},loadAssociations:function(){var self=this;self.loading.cohorts=!0,self.loading.users=!0,(0,_ajax.call)([{methodname:"local_treestudyplan_associated_users",args:{studyplan_id:self.value.id}}])[0].done((function(response){self.association.users=response.map(self.userOptionModel),self.loading.users=!1})).fail(_notification.default.exception),(0,_ajax.call)([{methodname:"local_treestudyplan_associated_cohorts",args:{studyplan_id:self.value.id}}])[0].done((function(response){self.association.cohorts=response.map(self.cohortOptionModel),self.loading.cohorts=!1})).fail(_notification.default.exception)},searchCohorts:function(searchtext){var self=this;searchtext.length>0?(0,_ajax.call)([{methodname:"local_treestudyplan_list_cohort",args:{like:searchtext,exclude_id:self.value.id}}])[0].done((function(response){self.search.cohorts=response.map(self.cohortOptionModel)})).fail(_notification.default.exception):self.search.cohorts=[]},cohortAssociate:function(){var self=this,requests=[],associated=self.association.cohorts,search=self.search.cohorts,searchselected=self.selected.search.cohorts,_loop=function(i){var r=searchselected[i];requests.push({methodname:"local_treestudyplan_connect_cohort",args:{studyplan_id:self.value.id,cohort_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(associated,search,r)}})};for(var i in searchselected)_loop(i);(0,_ajax.call)(requests)},cohortDisassociate:function(){var self=this,requests=[],associatedselected=self.selected.associated.cohorts,associated=self.association.cohorts,search=self.search.cohorts,_loop2=function(i){var r=associatedselected[i];requests.push({methodname:"local_treestudyplan_disconnect_cohort",args:{studyplan_id:self.value.id,cohort_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(search,associated,r)}})};for(var i in associatedselected)_loop2(i);(0,_ajax.call)(requests)},searchUsers:function(searchtext){var self=this;searchtext.length>0?(0,_ajax.call)([{methodname:"local_treestudyplan_find_user",args:{like:searchtext,exclude_id:self.value.id}}])[0].done((function(response){self.search.users=response.map(self.userOptionModel)})).fail(_notification.default.exception):self.search.users=[]},userAssociate:function(){var self=this,requests=[],associated=self.association.users,search=self.search.users,searchselected=self.selected.search.users,_loop3=function(i){var r=searchselected[i];requests.push({methodname:"local_treestudyplan_connect_user",args:{studyplan_id:self.value.id,user_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(associated,search,r)}})};for(var i in searchselected)_loop3(i);(0,_ajax.call)(requests)},userDisassociate:function(){var self=this,requests=[],associated=self.association.users,associatedselected=self.selected.associated.users,search=self.search.users,_loop4=function(i){var r=associatedselected[i];requests.push({methodname:"local_treestudyplan_disconnect_user",args:{studyplan_id:self.value.id,user_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(search,associated,r)}})};for(var i in associatedselected)_loop4(i);(0,_ajax.call)(requests)}},template:'\n<span class=\'s-studyplan-associate\'\n    ><a href=\'#\' @click.prevent="showModal" ><slot><i class=\'fa fa-users\'></i></slot></a>\n    <b-modal\n        v-model="show"\n        size="lg"\n        ok-variant="primary"\n        :title="text.associations + \' - \' + value.name"\n        ok-only>\n        <b-tabs class=\'s-studyplan-associate-window\'>\n            <b-tab :title="text.cohorts">\n                <b-container>\n                    <b-row class=\'mb-2 mt-2\'>\n                        <b-col>{{text.associated_cohorts}}</b-col>\n                        <b-col>{{text.associate_cohorts}}</b-col>\n                    </b-row>\n                    <b-row class=\'mb-2\'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type="text" @input="searchCohorts($event)"\n                                :placeholder="text.search"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.associated.cohorts"\n                                :options="association.cohorts"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.search.cohorts"\n                                :options="search.cohorts"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class=\'mt-2\'>\n                        <b-col>\n                            <b-button variant=\'danger\' @click="cohortDisassociate()"\n                                ><i class=\'fa fa-chain-broken\'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant=\'success\' @click="cohortAssociate()"\n                                ><i class=\'fa fa-link\'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n            <b-tab :title="text.users">\n                <b-container>\n                    <b-row class=\'mb-2 mt-2\'>\n                        <b-col>{{text.associated_users}}</b-col>\n                        <b-col>{{text.associate_users}}</b-col>\n                    </b-row>\n                    <b-row class=\'mb-2\'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type="text"\n                                @input="searchUsers($event)"\n                                placeholder="Search users"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.associated.users"\n                                :options="association.users"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.search.users"\n                                :options="search.users"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class=\'mt-2\'>\n                        <b-col>\n                                <b-button variant=\'danger\' @click="userDisassociate()"\n                                ><i class=\'fa fa-chain-broken\'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant=\'success\' @click="userAssociate()"\n                                ><i class=\'fa fa-link\'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n        </b-tabs>\n    </b-modal>\n</span>\n'}),Vue.component("t-period-edit",{props:{value:{type:Object,default:function(){return null}},type:{type:String,default:function(){return"link"}},variant:{type:String,default:function(){return""}},minstart:{type:String,default:function(){return null}},maxend:{type:String,default:function(){return null}}},data:function(){return{show:!1,editdata:{fullname:"",shortname:"",startdate:(new Date).getFullYear()+"-08-01",enddate:(new Date).getFullYear()+1+"-08-01"},text:strings.period_edit}},created:function(){},mounted:function(){},updated:function(){},computed:{},methods:{editStart:function(){(0,_studyplanProcessor.objCopy)(this.editdata,this.value,PERIOD_EDITOR_FIELDS),this.show=!0},editFinish:function(){var self=this,args={id:this.value.id};(0,_studyplanProcessor.objCopy)(args,this.editdata,PERIOD_EDITOR_FIELDS),(0,_ajax.call)([{methodname:"local_treestudyplan_edit_period",args:args}])[0].done((function(response){(0,_studyplanProcessor.objCopy)(self.value,response,PERIOD_EDITOR_FIELDS),self.$emit("input",self.value),self.$emit("edited",self.value)})).fail(_notification.default.exception)},refresh:function(){var self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_get_period",args:{id:this.value.id}}])[0].done((function(response){(0,_studyplanProcessor.objCopy)(self.value,response,PERIOD_EDITOR_FIELDS),self.$emit("input",self.value)})).fail(_notification.default.exception)},add_day:function(date,days){return void 0===days&&(days=1),(0,_dateHelper.add_days)(date,days)},sub_day:function(date,days){return void 0===days&&(days=1),(0,_dateHelper.add_days)(date,0-days)}},template:'\n            <span class=\'t-period-edit\'>\n                <b-button :variant="variant" v-if=\'type == "button"\' @click.prevent=\'editStart()\'\n                    ><slot><i class=\'fa fa-gear\'></i></slot></b-button>\n                <a variant="variant" v-else href=\'#\' @click.prevent=\'editStart()\'\n                    ><slot><i class=\'fa fa-gear\'></i></slot></a>\n                <b-modal\n                    v-model="show"\n                    size="lg"\n                    ok-variant="primary"\n                    :title="text.edit"\n                    @ok="editFinish()"\n                    :ok-disabled="Math.min(editdata.fullname.length,editdata.shortname.length) == 0"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols="4">{{ text.fullname}}</b-col>\n                            <b-col cols="8">\n                                <b-form-input v-model="editdata.fullname"\n                                :state=\'editdata.fullname.length>0\'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.shortname}}</b-col>\n                            <b-col cols="8">\n                                <b-form-input v-model="editdata.shortname"\n                                :state=\'editdata.shortname.length>0\'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_startdate}}</b-col>\n                            <b-col cols="8">\n                                <b-form-datepicker\n                                    start-weekday="1"\n                                    v-model="editdata.startdate"\n                                    :min="(minstart ? minstart : \'\')"\n                                    :max="sub_day(value.enddate)"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_enddate}}</b-col>\n                            <b-col cols="8">\n                                <b-form-datepicker\n                                    start-weekday="1"\n                                    v-model="editdata.enddate"\n                                    :min="add_day(value.startdate)"\n                                    :max="(maxend ? maxend : \'\')"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </span>\n            '}),Vue.component("t-studyplan",{props:["value","index"],data:function(){return{config:{userfields:[{key:"selected"},{key:"firstname",sortable:!0},{key:"lastname",sortable:!0}],cohortfields:[{key:"selected"},{key:"name",sortable:!0},{key:"context",sortable:!0}]},create:{studyline:{name:"",shortname:"",color:"#DDDDDD"}},edit:{toolbox_shown:!1,studyline:{editmode:!1,data:{name:"",shortname:"",color:"#DDDDDD"},original:{}},studyplan:{data:{name:"",shortname:"",description:"",slots:4,startdate:"2020-08-01",enddate:"",aggregation:"",aggregation_config:"",aggregation_info:{useRequiredGrades:!0,useItemCondition:!1}},original:{}}},text:strings.studyplan_text,cache:{linelayers:{}}}},created:function(){},mounted:function(){0==this.page.studylines.length&&(this.edit.studyline.editmode=!0),this.$root.$emit("redrawLines")},updated:function(){this.$root.$emit("redrawLines"),ItemEventBus.$emit("redrawLines")},computed:{columns:function(){return 1+2*this.page.periods},columns_stylerule:function(){for(var s="grid-template-columns: var(--studyplan-filter-width)",i=0;i<this.page.periods;i++)s+=" var(--studyplan-course-width) var(--studyplan-filter-width)";return s+";"},page:function(){return this.value.pages[0]}},methods:{trashbin_accepts:function(type){return!!type.item},countLineLayers:function(line){if(this.cache.linelayers[line.id]&&new Date-this.cache.linelayers[line.id].timestamp<1e3)return this.cache.linelayers[line.id].value;for(var maxLayer=-1,i=0;i<=this.page.periods;i++)if(line.slots[i]){line.slots[i];for(var ix in line.slots[i].courses){var item=line.slots[i].courses[ix];item.layer>maxLayer&&(maxLayer=item.layer)}for(var _ix in line.slots[i].filters){var _item=line.slots[i].filters[_ix];_item.layer>maxLayer&&(maxLayer=_item.layer)}}return this.cache.linelayers[line.id]={value:maxLayer+1,timestamp:new Date},maxLayer+1},slotsempty:function(slots){if(Array.isArray(slots)){for(var count=0,i=0;i<slots.length;i++)Array.isArray(slots[i].courses)&&(count+=slots[i].courses.length),Array.isArray(slots[i].filters)&&(count+=slots[i].filters.length);return 0==count}return!1},movedStudyplan:function(plan,from,to){this.$emit("moved",plan,from,to)},addStudyLine:function(page,newlineinfo){(0,_ajax.call)([{methodname:"local_treestudyplan_add_studyline",args:{page_id:page.id,name:newlineinfo.name,shortname:newlineinfo.shortname,color:newlineinfo.color,sequence:page.studylines.length}}])[0].done((function(response){page.studylines.push(response),newlineinfo.name="",newlineinfo.shortname="",newlineinfo.color="#dddddd"})).fail(_notification.default.exception)},editLineStart:function(line){Object.assign(this.edit.studyline.data,line),this.edit.studyline.original=line,this.$bvModal.show("modal-edit-studyline-"+this.value.id)},editLineFinish:function(){var editedline=this.edit.studyline.data,originalline=this.edit.studyline.original;(0,_ajax.call)([{methodname:"local_treestudyplan_edit_studyline",args:{id:editedline.id,name:editedline.name,shortname:editedline.shortname,color:editedline.color}}])[0].done((function(response){originalline.name=response.name,originalline.shortname=response.shortname,originalline.color=response.color})).fail(_notification.default.exception)},deleteLine:function(page,line){var self=this;(0,_str.get_strings)([{key:"studyline_confirm_remove",param:line.name,component:"local_treestudyplan"},{key:"delete",component:"core"}]).then((function(s){self.$bvModal.msgBoxConfirm(s[0],{okTitle:s[1],okVariant:"danger"}).then((function(modalresponse){modalresponse&&(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyline",args:{id:line.id}}])[0].done((function(response){if(1==response.success){var index=page.studylines.indexOf(line);page.studylines.splice(index,1)}})).fail(_notification.default.exception)}))}))},reorderLines:function(event,lines){event.apply(lines);var sequence=[];for(var idx in lines)sequence.push({id:lines[idx].id,sequence:idx});(0,_ajax.call)([{methodname:"local_treestudyplan_reorder_studylines",args:{sequence:sequence}}])[0].done((function(response){})).fail(_notification.default.exception)},deletePlan:function(studyplan){var self=this;(0,_str.get_strings)([{key:"studyplan_confirm_remove",param:studyplan.name,component:"local_treestudyplan"},{key:"delete",component:"core"}]).then((function(s){self.$bvModal.msgBoxConfirm(s[0],{okTitle:s[1],okVariant:"danger"}).then((function(modalresponse){modalresponse&&(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyplan",args:{id:studyplan.id,force:!0}}])[0].done((function(response){1==response.success&&self.$root.$emit("studyplanRemoved",studyplan)})).fail(_notification.default.exception)}))}))},deleteStudyItem:function(event){var item=event.data;(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyitem",args:{id:item.id}}])[0].done((function(response){1==response.success&&event.source.$emit("cut",event)})).fail(_notification.default.exception)},showslot:function(line,index,layeridx,type){for(var forGradable="gradable"==type,periods=this.page.periods,show=!0,i=0;i<periods;i++)if(line.slots[index-i]&&line.slots[index-i].courses){var list=line.slots[index-i].courses;for(var ix in list){var item=list[ix];item.layer==layeridx&&(forGradable?i>0&&item.span-i>0&&(show=!1):item.span-i>1&&(show=!1))}}return show},periodEdited:function(pi){var prev=this.$refs["periodeditor-"+(pi.period-1)][0];prev&&prev.refresh();var next=this.$refs["periodeditor-"+(pi.period+1)][0];next&&next.refresh()},add_day:function(date,days){return void 0===days&&(days=1),(0,_dateHelper.add_days)(date,days)},sub_day:function(date,days){return void 0===days&&(days=1),(0,_dateHelper.add_days)(date,0-days)},toolbox_switched:function(event){this.$emit("toggletoolbox",event)}},template:'\n            <div>\n                <div class=\'controlbox t-studyplan-controlbox\'>\n                    <div class="controlbox-group">\n                        <b-form-checkbox v-model="edit.studyline.editmode" class="sw-studyplan-toolbar" switch\n                            @change="toolbox_switched(edit.toolbox_shown && !edit.studyline.editmode); "\n                            >{{ text.studyline_editmode }}</b-form-checkbox>\n                        <b-form-checkbox v-if="!edit.studyline.editmode" v-model="edit.toolbox_shown" class="sw-studyplan-toolbar" switch\n                            @change="toolbox_switched"\n                            >{{ text.toolbox_toggle}}</b-form-checkbox>\n                        <drop\n                            mode=\'copy\'\n                            class=\'t-item-deletebox text-danger border-danger\'\n                            @drop=\'deleteStudyItem\'\n                            :accepts-type="trashbin_accepts"\n                            ><i class=\'fa fa-trash\'></i>\n                        </drop>\n                    </div>\n                    <div class="controlbox-group">\n                        <span class=\'control editable\'>\n                            <t-studyplan-advanced v-model="value"></t-studyplan-advanced>\n                        </span>\n                        <span class=\'control editable\'>\n                            <t-studyplan-associate\n                                v-model="value"><i class=\'fa fa-users\'></i> {{text.associations}}</t-studyplan-associate>\n                        </span>\n                        <span class=\'control editable\'>\n                            <t-studyplan-edit v-model="value" @moved="movedStudyplan"\n                                ><i class=\'fa fa-gear\'></i> {{text.edit$core}}</t-studyplan-edit>\n                        </span>\n                        <span class=\'control deletable\'>\n                            <a v-if=\'page.studylines.length == 0\' href=\'#\' @click=\'deletePlan(value)\'\n                                ><i class=\'text-danger fa fa-trash\'></i></a>\n                        </span>\n                    </div>\n                </div>\n                <div class=\'t-studyplan-content-edit\' v-if="edit.studyline.editmode">\n                    <drop-list\n                        :items="page.studylines"\n                        class="t-slot-droplist"\n                        :accepts-type="\'studyline-\'+page.id"\n                        xreorder="$event.apply(page.studylines)"\n                        @reorder="reorderLines($event,page.studylines)"\n                        mode="copy"\n                        row\n                    >\n                        <template v-slot:item="{item}">\n                            <drag\n                                :key="item.id"\n                                class=\'t-studyline-drag\'\n                                :data="item"\n                                :type="\'studyline-\'+page.id"\n                                >\n                                <template v-slot:drag-image>\n                                    <i class="fa fa-arrows text-primary"></i>\n                                </template>\n                                <t-studyline-edit\n                                    v-model="item"\n                                    @edit=\'editLineStart(item)\'\n                                    @delete=\'deleteLine(page,item)\'\n                                    >\n                                    <div v-if="!slotsempty(item.slots)"> {{ text.editmode_modules_hidden}} </div>\n                                </t-studyline-edit>\n                            </drag>\n                        </template>\n                    </drop-list>\n                </div>\n                <div class=\'t-studyplan-content\' v-else>\n\n                    \x3c!-- Now paint the headings column --\x3e\n                    <div class=\'t-studyplan-headings\'>\n                        <s-studyline-header-heading></s-studyline-header-heading>\n                        <t-studyline-heading  v-for="(line,lineindex) in page.studylines"\n                            :key="line.id"\n                            @resize="headingresized(lineindex,$event)"\n                            v-model="page.studylines[lineindex]"\n                            :layers=\'countLineLayers(line)+1\'\n                            :class=" \'t-studyline\' + ((lineindex%2==0)?\' odd \' :\' even \' )\n                                    + ((lineindex==0)?\' first \':\' \')\n                                    + ((lineindex==page.studylines.length-1)?\' last \':\' \')"\n                        ></t-studyline-heading>\n                    </div>\n                    \x3c!-- Next, paint all the cells in the scrollable --\x3e\n                    <div class="t-studyplan-scrollable" >\n                        <div class="t-studyplan-timeline" :style="columns_stylerule">\n                        \x3c!-- add period information --\x3e\n                        <template v-for="(n,index) in (page.periods+1)">\n                            <s-studyline-header-period\n                                v-if="index > 0"\n                                v-model="page.perioddesc[index-1]"\n                                ><t-period-edit\n                                    :ref="\'periodeditor-\'+index"\n                                    @edited="periodEdited"\n                                    v-model="page.perioddesc[index-1]"\n                                    :minstart="(index > 1) ? add_day(page.perioddesc[index-2].startdate,2) : null"\n                                    :maxend="(index < page.periods) ? sub_day(page.perioddesc[index].enddate,2) : null"\n                                ></t-period-edit\n                            ></s-studyline-header-period>\n                            <div class="s-studyline-header-filter"></div>\n                        </template>\n\n                        \x3c!-- Line by line add the items --\x3e\n                        \x3c!-- The grid layout handles putting it in rows and columns --\x3e\n                        <template v-for="(line,lineindex) in page.studylines"\n                            ><template v-for="(layernr,layeridx) in countLineLayers(line)+1"\n                                ><template v-for="(n,index) in (page.periods+1)"\n                                    >\n                                    <t-studyline-slot\n                                        v-if="index > 0 && showslot(line, index, layeridx, \'gradable\')"\n                                        type=\'gradable\'\n                                        v-model="line.slots[index].courses"\n                                        :key="\'c-\'+lineindex+\'-\'+index+\'-\'+layernr"\n                                        :slotindex="index"\n                                        :line="line"\n                                        :plan="value"\n                                        :page="page"\n                                        :period="page.perioddesc[index-1]"\n                                        :layer="layeridx"\n                                        :class="\'t-studyline \' + ((lineindex%2==0)?\' odd \':\' even \')\n                                                + ((lineindex==0 && layernr==1)?\' first \':\' \')\n                                                + ((lineindex==page.studylines.length-1)?\' last \':\' \')\n                                                + ((layernr == countLineLayers(line))?\' lastlyr \':\' \')\n                                                + ((layernr == countLineLayers(line)+1)?\' newlyr \':\' \')"\n                                    ></t-studyline-slot\n                                    ><t-studyline-slot\n                                        type=\'filter\'\n                                        v-if="showslot(line, index, layeridx, \'filter\')"\n                                        v-model="line.slots[index].filters"\n                                        :key="\'f-\'+lineindex+\'-\'+index+\'-\'+layernr"\n                                        :slotindex="index"\n                                        :line="line"\n                                        :plan="value"\n                                        :page="page"\n                                        :layer="layeridx"\n                                        :class="\'t-studyline \' + ((lineindex%2==0)?\' odd \':\' even \')\n                                                + ((lineindex==0 && layernr==1)?\' first \':\'\')\n                                                + ((lineindex==page.studylines.length-1)?\' last \':\' \')\n                                                + ((index==page.periods)?\' rightmost\':\'\')\n                                                + ((layernr == countLineLayers(line))?\' lastlyr \':\' \')\n                                                + ((layernr == countLineLayers(line)+1)?\' newlyr \':\' \')"\n                                        >\n                                    </t-studyline-slot\n                                ></template\n                            ></template\n                        ></template\n                        ></div>\n                    </div>\n                </div>\n                <div v-if="edit.studyline.editmode" class=\'t-studyline-add\'>\n                    <a href="#" v-b-modal="\'modal-add-studyline-\'+page.id" @click="false;"\n                        ><i class=\'fa fa-plus\'></i>{{ text.studyline_add }}</a>\n                </div>\n                <b-modal\n                    :id="\'modal-add-studyline-\'+page.id"\n                    size="lg"\n                    :ok-title="text.add$core"\n                    ok-variant="primary"\n                    :title="text.studyline_add"\n                    @ok="addStudyLine(page,create.studyline)"\n                    :ok-disabled="Math.min(create.studyline.name.length,create.studyline.shortname.length) == 0"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols="3">{{text.studyline_name}}</b-col>\n                            <b-col>\n                                <b-form-input v-model="create.studyline.name" :placeholder="text.studyline_name_ph"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="3">{{text.studyline_shortname}}</b-col>\n                            <b-col>\n                            <b-form-input\n                                v-model="create.studyline.shortname"\n                                :placeholder="text.studyline_shortname_ph"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="3">{{text.studyline_color}}</b-col>\n                            <b-col>\n                                <input type="color" v-model="create.studyline.color" />\n                                \x3c!-- hsluv-picker v-model="create.studyline.color" horizontal displaysize="175" ></hsluv-picker --\x3e\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n                <b-modal\n                    :id="\'modal-edit-studyline-\'+value.id"\n                    size="lg"\n                    ok-variant="primary"\n                    :title="text.studyline_edit"\n                    @ok="editLineFinish()"\n                    :ok-disabled="Math.min(edit.studyline.data.name.length,edit.studyline.data.shortname.length) == 0"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols="3">{{ text.studyline_name}}</b-col>\n                            <b-col>\n                                <b-form-input\n                                    v-model="edit.studyline.data.name"\n                                    :placeholder="text.studyline_name_ph"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="3">{{ text.studyline_shortname}}</b-col>\n                            <b-col>\n                            <b-form-input\n                                v-model="edit.studyline.data.shortname"\n                                :placeholder="text.studyline_shortname_ph"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="3">{{ text.studyline_color}}</b-col>\n                            <b-col>\n                                <input type="color" v-model="edit.studyline.data.color" />\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            '}),Vue.component("t-studyline-heading",{props:{value:{type:Object,default:function(){return{}}},layers:{type:Number,default:1}},data:function(){return{layerHeights:{}}},created:function(){ItemEventBus.$on("lineHeightChange",this.onLineHeightChange)},computed:{},methods:{onLineHeightChange:function(lineid,layerid,newheight){if(this.$refs.main&&lineid==this.value.id){var items=document.querySelectorAll(".t-studyline-slot-0[data-studyline='".concat(this.value.id,"']")),heightSum=0;items.forEach((function(el){var height=el.getBoundingClientRect().height;heightSum+=height}));var heightStyle="".concat(heightSum,"px");this.$refs.main.style.height=heightStyle}}},template:'\n            <div class="t-studyline t-studyline-heading "\n                :data-studyline="value.id" ref="main"\n                ><div class="t-studyline-handle" :style="\'background-color: \' + value.color"></div>\n                <div class="t-studyline-title">\n                    <abbr v-b-tooltip.hover.right :title="value.name">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            '}),Vue.component("t-studyline-edit",{props:{value:{type:Object,default:function(){return{}}}},data:function(){return{}},computed:{deletable:function(){var slots=this.value.slots;if(Array.isArray(slots)){for(var count=0,i=0;i<slots.length;i++)Array.isArray(slots[i].courses)&&(count+=slots[i].courses.length),Array.isArray(slots[i].filters)&&(count+=slots[i].filters.length);return 0==count}return!1},editable:function(){return!0}},methods:{onEdit:function(){this.$emit("edit",this.value)},onDelete:function(){this.$emit("delete",this.value)}},template:"\n            <div :class=\"'t-studyline '\" >\n                <div class=\"t-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"t-studyline-title\">\n                    <div>\n                        <i class='fa fa-arrows text-primary'></i>\n                        <abbr v-b-tooltip.hover :title=\"value.name\">{{ value.shortname }}</abbr>\n                    </div>\n                </div>\n                <div class='t-studyline-editmode-content'>\n                    <slot></slot>\n                </div>\n                <div class='controlbox'>\n                    <template v-if='editable || deletable'>\n                    <span class='control editable' v-if='editable'>\n                        <a href='#' @click='onEdit'><i class='fa fa-pencil'></i></a>\n                    </span>\n                    <span class='control deletable' v-if='deletable'>\n                        <a v-if='deletable' href='#' @click='onDelete'><i class='text-danger fa fa-trash'></i></a>\n                    </span>\n                    </template>\n                </div>\n            </div>\n            "}),Vue.component("t-studyline-slot",{props:{type:{type:String,default:"gradable"},slotindex:{type:Number,default:""},line:{type:Object,default:function(){return null}},layer:{type:Number},value:{type:Array,default:function(){return[]}},plan:{type:Object,default:function(){return null}},page:{type:Object,default:function(){return null}},period:{type:Object,default:function(){return null}}},mounted:function(){var self=this;"gradable"==self.type&&1==self.slotindex&&(self.resizeListener=new ResizeObserver((function(){if(self.$refs.main){var size=self.$refs.main.getBoundingClientRect();ItemEventBus.$emit("lineHeightChange",self.line.id,self.layer,size.height)}})).observe(self.$refs.main))},unmounted:function(){this.resizeListener&&this.resizeListener.disconnect()},computed:{slotkey:function(){return"".concat(this.type,"'-'").concat(this.line.id,"-").concat(this.slotindex,"-").concat(this.layer)},itemidx:function(){for(var ix in this.value){if(this.value[ix].layer==this.layer)return ix}return null},item:function(){for(var ix in this.value){var itm=this.value[ix];if(itm.layer==this.layer)return itm}return null},listtype:function(){return this.type},dragacceptlist:function(){return"gradable"==this.type?["course","gradable-item"]:["filter","filter-item"]},courseHoverDummy:function(){return{course:this.hover.component}},current:function(){if(this.period&&this.period.startdate&&this.period.enddate){var now=new Date,pstart=new Date(this.period.startdate),pend=new Date(this.period.enddate);return now>=pstart&&now<pend}return!1},spanCss:function(){if(this.item&&this.item.span>1){var span=2*this.item.span-1;return"width: 100%; grid-column: span ".concat(span,";")}return""}},data:function(){return{text:strings.course_timing,resizeListener:null,hover:{component:null,type:null},datechanger:{coursespan:null,periodspan:null,default:!1,defaultchoice:!1,hidewarn:!1}}},methods:{onDrop:function(event){var _this3=this;this.hover.component=null,this.hover.type=null,debug.info(event);var self=this;if(event.type.item){var item=event.data;item.layer=this.layer,item.slot=this.slotindex,self.value.push(item),self.$emit("input",self.value),self.relocateStudyItem(item).done((function(){_this3.$refs.timingChecker&&_this3.$refs.timingChecker.validate_course_period()}))}else event.type.component&&(debug.info("Adding new component"),"gradable"==event.type.type?(0,_ajax.call)([{methodname:"local_treestudyplan_add_studyitem",args:{line_id:self.line.id,slot:self.slotindex,layer:self.layer,type:"course",details:{competency_id:null,conditions:"",course_id:event.data.id,badge_id:null,continuation_id:null}}}])[0].done((function(response){var item=response;self.relocateStudyItem(item).done((function(){self.value.push(item),self.$emit("input",self.value),_this3.$nextTick((function(){_this3.$refs.timingChecker&&_this3.$refs.timingChecker.validate_course_period()}))}))})).fail(_notification.default.exception):"filter"==event.type.type&&(debug.info("Adding new filter compenent"),(0,_ajax.call)([{methodname:"local_treestudyplan_add_studyitem",args:{line_id:self.line.id,slot:self.slotindex,type:event.data.type,details:{badge_id:event.data.badge?event.data.badge.id:void 0}}}])[0].done((function(response){var item=response;self.relocateStudyItem(item).done((function(){item.layer=_this3.layer,self.value.push(item),self.$emit("input",self.value)}))})).fail(_notification.default.exception)))},onCut:function(event){for(var id=event.data.id,i=0;i<this.value.length;i++)if(this.value[i].id==id){this.value.splice(i,1),i--;break}this.$emit("input",this.value)},relocateStudyItem:function(item){var iteminfo={id:item.id,layer:this.layer,slot:this.slotindex,line_id:this.line.id};return(0,_ajax.call)([{methodname:"local_treestudyplan_reorder_studyitems",args:{items:[iteminfo]}}])[0].fail(_notification.default.exception)},onDragEnter:function(event){this.hover.component=event.data,this.hover.type=event.type},onDragLeave:function(){this.hover.component=null,this.hover.type=null},maxSpan:function(){for(var freeIndex=this.slotindex,i=this.slotindex+1;i<=this.page.periods&&(this.line.slots&&this.line.slots[i]&&this.line.slots[i].courses);i++){var clist=this.line.slots[i].courses,flist=this.line.slots[i-1].filters,busy=!1;for(var ix in clist)if(clist[ix].layer==this.layer){busy=!0;break}for(var _ix2 in flist)if(flist[_ix2].layer==this.layer){busy=!0;break}if(busy)break;freeIndex=i}return freeIndex-this.slotindex+1},makeType:function(item){return{item:!0,component:!1,span:item.span,type:this.type}},checkType:function(type){return type.type==this.type&&("filter"==type||type.span<=this.maxSpan())}},template:'\n            <div :class="\'t-studyline-slot \'+type + \' t-studyline-slot-\'+slotindex + \' \' + ((slotindex==0)?\' t-studyline-firstcolumn \':\' \')\n                         + (current?\'current \':\' \')"\n                :data-studyline="line.id" ref="main"\n                :style=\'spanCss\'\n                ><drag v-if="item"\n\n                    :key="item.id"\n                    class="t-slot-item"\n                    :data="item"\n                    :type="makeType(item)"\n                    @cut="onCut"\n                        ><t-item\n                            @deleted="onCut"\n                            v-model="value[itemidx]"\n                            :plan="plan"\n                            :line=\'line\'\n                            :page=\'page\'\n                            :period=\'period\'\n                            :maxspan=\'maxSpan()\'\n                        ></t-item\n                    ></drag\n                ><drop v-else\n                    :class="\'t-slot-drop \'+type + (layer > 0?\' secondary\':\' primary\')"\n                    :accepts-type="checkType"\n                    @drop="onDrop"\n                    mode="cut"\n                    @dragenter="onDragEnter"\n                    @dragleave="onDragLeave"\n                ><template v-if="hover.component">\n                        <div v-if="hover.type.item"\n                            class="t-slot-item feedback"\n                            :key="hover.component.id"\n                            ><t-item v-model="hover.component" dummy></t-item\n                            ></div\n                        ><div v-else-if="hover.type.type == \'gradable\'"\n                            class="t-slot-item feedback"\n                            :key="\'course-\'+hover.component.id"\n                            ><t-item-course v-model="courseHoverDummy"></t-item-course></div\n                        ><div v-else-if="hover.type.type == \'filter\'"\n                            class="t-slot-item feedback"\n                            key="tooldrop"\n                            ><t-item-junction    v-if="hover.component.type == \'junction\'" ></t-item-junction\n                            ><t-item-start       v-else-if="hover.component.type == \'start\'"    ></t-item-start\n                            ><t-item-finish      v-else-if="hover.component.type == \'finish\'"   ></t-item-finish\n                            ><t-item-badge       v-else-if="hover.component.type == \'badge\'"    ></t-item-badge\n                        ></div\n                        ><div v-else\n                            class="t-slot-item feedback"\n                            :key="hover.type">--{{ hover.type }}--</div\n                    ></template\n                ></drop>\n                <t-item-timing-checker hidden\n                    v-if="value && value[itemidx] && value[itemidx].course"\n                    ref="timingChecker"\n                    :maxspan="maxSpan()"\n                    :page="page"\n                    :period="period"\n                    v-model="value[itemidx]"\n                    ></t-item-timing-checker>\n            </div>\n            '}),Vue.component("t-item-timing-checker",{props:{value:{type:Object},page:{type:Object},period:{type:Object},maxspan:{type:Number},hidden:{type:Boolean,default:!1}},computed:{endperiod:function(){var endperiodnr=Math.min(this.page.periods,this.period.period+(this.value.span-1));return this.page.perioddesc[endperiodnr-1]},course_period_matches:function(){return this.value&&"course"==this.value.type?(this.datechanger.coursespan=(0,_dateHelper.datespaninfo)(this.value.course.startdate,this.value.course.enddate),this.datechanger.periodspan=(0,_dateHelper.datespaninfo)(this.period.startdate,this.endperiod.enddate),this.datechanger.coursespan.first.getTime()==this.datechanger.periodspan.first.getTime()&&this.datechanger.coursespan.last.getTime()==this.datechanger.periodspan.last.getTime()):(debug.warn("Timing thing not proper configured",this.value,this.period,this.maxspan),!1)}},data:function(){return{id:Math.floor(Math.random()*Date.now()).toString(16),text:strings.course_timing,datechanger:{coursespan:null,periodspan:null,globals:datechanger_globals}}},methods:{validate_course_period:function(force){debug.info("Validating course and period"),this.course_period_matches?debug.info("Course timing matches period",this.datechanger):(debug.info("Course timing does not match period timing"),this.value.course.canupdatecourse?this.hidden&&this.datechanger.globals.default?this.datechanger.globals.defaultvalue&&this.change_course_period():this.$bvModal.show("t-course-timing-matching-"+this.id):this.hidden&&this.datechanger.globals.hidewarn||this.$bvModal.show("t-course-timing-warning-"+this.id))},change_course_period:function(){var self=this;return self.datechanger.globals.default&&(self.datechanger.globals.defaultvalue=!0),(0,_ajax.call)([{methodname:"local_treestudyplan_course_period_timing",args:{period_id:self.period.id,course_id:this.value.course.id,span:this.value.span}}])[0].fail(_notification.default.exception).done((function(response){self.value.course.startdate=response.startdate,self.value.course.enddate=response.enddate,self.value.course.timing=response.timing,self.$emit("input",self.value)}))},change_span:function(span){var self=this;return(0,_ajax.call)([{methodname:"local_treestudyplan_set_studyitem_span",args:{id:self.value.id,span:span}}])[0].fail(_notification.default.exception).done((function(response){self.value.span=response.span,self.$emit("input",self.value),self.$nextTick((function(){self.validate_course_period()}))}))},format_duration:function(dsi){var s="";return 1==dsi.years?s+="1 ".concat(this.text.year,", "):dsi.years>1&&(s+="".concat(dsi.years," ").concat(this.text.years,", ")),1==dsi.weeks?s+="1 ".concat(this.text.week,", "):dsi.weeks>1&&(s+="".concat(dsi.weeks," ").concat(this.text.weeks,", ")),1==dsi.days?s+="1 ".concat(this.text.day,", "):dsi.days>1&&(s+="".concat(dsi.days," ").concat(this.text.days,", ")),s.toLocaleLowerCase()}},template:'\n            <div :class="\'t-item-timing-checker\'" :style="hidden?\'display: none \':\'\'">\n                <template v-if="!hidden" >\n                    <span class="mr-1" v-if="course_period_matches">\n                        <i  class="text-success fa fa-calendar-check-o"\n                            v-b-tooltip.hover.topright :title="text.timing_ok"\n                        ></i>\n                    </span>\n                    <span class="mr-1" v-else>\n                        <a  href=\'#\' @click="validate_course_period()" class="text-warning"\n                            v-b-tooltip.hover.bottomleft :title="text.timing_off"\n                            ><i class="fa fa-calendar-times-o"\n                            ></i\n                            ><i class="fa fa-question-circle text-black-50"\n                                style="font-size: 0.8em; top: -0.3em; position: relative;"\n\n                            ></i\n                        ></a>\n                    </span>\n                    <span class="ml-1" v-b-tooltip.hover.bottomleft :title="text.periodspan_desc"\n                        >{{ text.periodspan\n                        }}&nbsp;<b-form-select\n                            class=""\n                            size="sm" @change="change_span" v-model="value.span">\n                            <b-form-select-option v-for="(n,i) in maxspan" :value=\'n\' :key=\'i\'\n                            >{{ n }}</b-form-select-option>\n                        </b-form-select\n                        >&nbsp;{{\n                            (value.span == 1)?text.period.toLowerCase():text.periods.toLowerCase()\n                        }}<i\n                            class="fa fa-question-circle text-black-50"\n                            style="font-size: 0.8em; top: -0.3em; position: relative;"\n                            ></i>\n                    </span>\n                </template>\n                <b-modal\n                    :id="\'t-course-timing-matching-\'+this.id"\n                    size="lg"\n                    :title="text.title"\n                    @ok="change_course_period"\n                    :ok-title="text.yes"\n                    ok-variant="danger"\n                    :cancel-title="text.no"\n                    cancel-variant="primary"\n                    >\n                    <b-container v-if="datechanger.coursespan && datechanger.periodspan && value && value.course">\n                        <b-row><b-col cols="12">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols="12"><div class="generalbox alert alert-warning">{{ text.question }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols="6">\n                                <h3> {{ text.course }} </h3>\n                                <p class="mb-0"><b>{{ value.course.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ value.course.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols="6">\n                                <h3> {{ text.period }} </h3>\n                                <p class="mb-0"><b>{{ period.fullname }}</b><b v-if="value.span > 1"> - {{ endperiod.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ period.shortname }}</b><b v-if="value.span > 1"> - {{ endperiod.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if=\'hidden\' class="pt-2"><b-col cols="12">\n                            <b-form-checkbox type="checkbox" v-model="datechanger.globals.default">{{ text.rememberchoice }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n                <b-modal\n                    :id="\'t-course-timing-warning-\'+this.id"\n                    size="lg"\n                    ok-variant="primary"\n                    :title="text.title"\n                    :ok-title="text.yes"\n                    ok-only\n                    >\n                    <b-container v-if="datechanger.coursespan && datechanger.periodspan && value && value.course">\n                        <b-row><b-col cols="12">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols="12"><div class="generalbox alert alert-warning">{{ text.warning }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols="6">\n                                <h3> {{ text.course }} </h3>\n                                <p class="mb-0"><b>{{ value.course.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ value.course.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols=>"6">\n                                <h3> {{ text.period }} </h3>\n                                <p class="mb-0"><b>{{ period.fullname }}</b><b v-if="value.span > 1"> - {{ endperiod.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ period.shortname }}</b><b v-if="value.span > 1"> - {{ endperiod.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if=\'hidden\' class="pt-2"><b-col cols="12">\n                            <b-form-checkbox type="checkbox" v-model="datechanger.globals.hidewarn">{{ text.hidewarning }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            '}),Vue.component("t-item",{props:{value:{type:Object,default:function(){return null}},dummy:{type:Boolean,default:function(){return!1}},plan:{type:Object,default:function(){return null}},line:{type:Object,default:function(){return null}},page:{type:Object,default:function(){return null}},period:{type:Object,default:function(){return null}},maxspan:{type:Number,default:function(){return 0}}},data:function(){return{dragLine:null,dragEventListener:null,deleteMode:!1,condition_options:string_keys.conditions,text:strings.item_text,showContext:!1,lines:[]}},methods:{dragStart:function(event){this.deleteMode=!1;var start=document.getElementById("studyitem-"+this.value.id),dragelement=document.getElementById("t-item-cdrag-"+this.value.id);dragelement.style.position="fixed",dragelement.style.left=event.position.x+"px",dragelement.style.top=event.position.y+"px",this.dragLine=new _simpleline.SimpleLine(start,dragelement,{color:"#777",gravity:{start:1.3,end:1.3}}),document.addEventListener("mousemove",this.onMouseMove)},dragEnd:function(){null!==this.dragLine&&this.dragLine.remove();var dragelement=document.getElementById("t-item-cdrag-"+this.value.id);dragelement.style.removeProperty("left"),dragelement.style.removeProperty("top"),dragelement.style.removeProperty("position"),document.removeEventListener("mousemove",this.onMouseMove)},onMouseMove:function(event){var dragelement=document.getElementById("t-item-cdrag-"+this.value.id);dragelement.style.position="fixed",dragelement.style.left=event.clientX+"px",dragelement.style.top=event.clientY+"px"},onDrop:function(event){var _this4=this,from_id=event.data.id,to_id=this.value.id;this.redrawLines(),(0,_ajax.call)([{methodname:"local_treestudyplan_connect_studyitems",args:{from_id:from_id,to_id:to_id}}])[0].done((function(response){var conn={id:response.id,from_id:response.from_id,to_id:response.to_id};ItemEventBus.$emit("createdConnection",conn),_this4.value.connections.in.push(conn)})).fail(_notification.default.exception)},redrawLine:function(conn){var start=document.getElementById("studyitem-".concat(conn.from_id)),end=document.getElementById("studyitem-".concat(conn.to_id));this.lines[conn.to_id]&&(this.lines[conn.to_id].remove(),delete this.lines[conn.to_id]),null!==start&&null!==end&&isVisible(start)&&isVisible(end)&&(this.lines[conn.to_id]=new _simpleline.SimpleLine(start,end,{color:"var(--success)",gravity:{start:1.3,end:1.3}}))},deleteLine:function(conn){var _this5=this,self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_disconnect_studyitems",args:{from_id:conn.from_id,to_id:conn.to_id}}])[0].done((function(response){if(response.success){_this5.removeLine(conn),ItemEventBus.$emit("connectionDisconnected",conn);var index=self.value.connections.out.indexOf(conn);self.value.connections.out.splice(index,1)}})).fail(_notification.default.exception)},highlight:function(conn){this.lines[conn.to_id]&&this.lines[conn.to_id].setConfig({color:"var(--danger)"})},normalize:function(conn){this.lines[conn.to_id]&&this.lines[conn.to_id].setConfig({color:"var(--success)"})},updateItem:function(){(0,_ajax.call)([{methodname:"local_treestudyplan_edit_studyitem",args:{id:this.value.id,conditions:this.value.conditions,continuation_id:this.value.continuation_id}}])[0].fail(_notification.default.exception)},doShowContext:function(event){this.hasContext&&(this.showContext=!0,event.preventDefault())},redrawLines:function(){if(this.value.connections&&this.value.connections.out)for(var i in this.value.connections.out){var conn=this.value.connections.out[i];this.redrawLine(conn)}},onCreatedConnection:function(conn){conn.from_id==this.value.id&&(this.value.connections.out.push(conn),this.redrawLine(conn))},onRemovedConnection:function(conn){if(this.value.connections&&this.value.connections.out)for(var i in this.value.connections.in){var c_in=this.value.connections.in[i];conn.id==c_in.id&&self.value.connections.out.splice(i,1)}},onRePositioned:function(){if(this.value.connections&&this.value.connections.out)for(var i in this.value.connections.out){var conn=this.value.connections.out[i];this.redrawLine(conn)}},onDisPositioned:function(re_id){if(this.value.connections&&this.value.connections.out)for(var i in this.value.connections.out){var conn=this.value.connections.out[i];conn.to_id==re_id&&this.removeLine(conn)}},onItemDeleted:function(item_id){if(this.value.connections&&this.value.connections.out)for(var i in this.value.connections.out){var conn=this.value.connections.out[i];conn.to_id==item_id&&(this.removeLine(conn),this.value.connections.out.splice(i,1))}if(this.value.connections&&this.value.connections.in)for(var _i in this.value.connections.in){this.value.connections.in[_i].from_id==item_id&&this.value.connections.out.splice(_i,1)}},onRedrawLines:function(){this.redrawLines()},removeLine:function(conn){this.lines[conn.to_id]&&(this.lines[conn.to_id].remove(),delete this.lines[conn.to_id])},deleteItem:function(){var self=this,msgparams={item:this.text["type_"+this.value.type].toLocaleLowerCase(),name:"course"==this.value.type?this.value.course.displayname:"",line:this.line?this.line.name:"",period:this.period?this.period.fullname:this.plan.name};this.$bvModal.msgBoxConfirm((0,_stringHelper.strformat)(this.text.item_delete_message,msgparams),{okVariant:"danger",okTitle:this.text.ok,cancelTitle:this.text.cancel}).then((function(value){value&&(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyitem",args:{id:self.value.id}}])[0].done((function(response){1==response.success&&self.$emit("deleted",{data:self.value})})).fail(_notification.default.exception)})).catch((function(err){debug.console.error(err)}))}},computed:{hasConnectionsOut:function(){return!["finish"].includes(this.value.type)},hasConnectionsIn:function(){return!["start"].includes(this.value.type)},hasContext:function(){return["start","junction","finish"].includes(this.value.type)}},created:function(){this.dummy||(ItemEventBus.$on("createdConnection",this.onCreatedConnection),ItemEventBus.$on("removedConnection",this.onRemovedConnection),ItemEventBus.$on("rePositioned",this.onRePositioned),ItemEventBus.$on("disPositioned",this.onDisPositioned),ItemEventBus.$on("itemDeleted",this.onItemDeleted),ItemEventBus.$on("redrawLines",this.onRedrawLines))},mounted:function(){var _this6=this;this.dummy||(this.redrawLines(),setTimeout((function(){ItemEventBus.$emit("rePositioned",_this6.value.id)}),10))},beforeDestroy:function(){if(!this.dummy){for(var i in this.value.connections.out){var conn=this.value.connections.out[i];this.removeLine(conn)}ItemEventBus.$emit("disPositioned",this.value.id),ItemEventBus.$off("createdConnection",this.onCreatedConnection),ItemEventBus.$off("removedConnection",this.onRemovedConnection),ItemEventBus.$off("rePositioned",this.onRePositioned),ItemEventBus.$off("disPositioned",this.onDisPositioned),ItemEventBus.$off("itemDeleted",this.onItemDeleted),ItemEventBus.$off("redrawLines",this.onRedrawLines)}},beforeUpdate:function(){},updated:function(){this.dummy||this.redrawLines()},template:'\n            <div class="t-item-base" :id="\'studyitem-\'+value.id">\n                <t-item-course\n                    v-if="value.type == \'course\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                    :plan=\'plan\'\n                    :page=\'page\'\n                    :period=\'period\'\n                    :maxspan=\'maxspan\'\n                ></t-item-course>\n                <t-item-junction\n                    v-if="value.type == \'junction\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-junction>\n                <t-item-start\n                    v-if="value.type == \'start\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-start>\n                <t-item-finish\n                    v-if="value.type == \'finish\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-finish>\n                <t-item-badge\n                    v-if="value.type == \'badge\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-badge>\n                <t-item-invalid\n                    v-if="value.type == \'invalid\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-invalid>\n                <drop v-if=\'!dummy && hasConnectionsIn\' accepts-type="linestart"\n                    :id="\'t-item-cend-\'+value.id"\n                    class="t-item-connector-end"\n                    mode="copy"\n                    @drop="onDrop"\n                    ><svg width=\'5px\' height=\'10px\'><rect ry="1px" rx="1px" y="0px" x="0px" height="10px" width="5px"/></svg></drop>\n                <drag v-if=\'!dummy && hasConnectionsOut\' type="linestart"\n                    :id="\'t-item-cstart-\'+value.id"\n                    :class="\'t-item-connector-start \' + ((deleteMode&&value.connections.out.length)?\'deleteMode\':\'\')"\n                    :data="value"\n                    @dragstart="dragStart"\n                    @dragend="dragEnd"\n                    @click="deleteMode = (value.connections.out.length)?(!deleteMode):false"\n                    >\n                    <svg  width=\'5px\' height=\'10px\'><rect ry="1px" rx="1px" y="0px" x="0px" height="10px" width="5px"/></svg>\n                    <template v-slot:drag-image="{data}"> <i :id="\'t-item-cdrag-\'+value.id" class="fa"></i>\n                    </template>\n                </drag>\n                <div class="deletebox" v-if="deleteMode && value.connections.out.length > 0"\n                    >\n                    <a v-for="conn in value.connections.out"\n                        @click="deleteLine(conn)"\n                        @mouseenter="highlight(conn)"\n                        @mouseleave="normalize(conn)"\n                        class="t-connection-delete text-danger"\n                        :title="conn.id">\n                        <i class="fa fa-trash"></i>\n                    </a>\n                </div>\n                <a  v-if="hasContext" class="t-item-config"\n                    v-b-modal="\'t-item-config-\'+value.id" href="#" @click.prevent=""><i  class="fa fa-gear"></i></a>\n                <b-modal no-body class=""\n                    :id="\'t-item-config-\'+value.id"\n                    :title="text[\'item_configuration\']"\n                    scrollable\n                    ok-only\n                    class="t-item-contextview b-modal-justify-footer-between"\n                >\n                    <b-form-group\n                        v-if="value.type != \'start\'"\n                        :label="text.select_conditions"\n                    >\n                        <b-form-select size="sm"\n                            @input="updateItem"\n                            v-model="value.conditions"\n                            :options="condition_options"\n                        ></b-form-select>\n                    </b-form-group>\n\n                   <template #modal-footer="{ ok, cancel, hide }" >\n                    <a href=\'#\' @click=\'deleteItem()\' class="text-danger"\n                        ><i class="fa fa-trash"></i>\n                        {{ text.delete }}\n                    </a>\n                    <b-button size="sm" variant="primary" @click="ok()">\n                      {{ text.ok }}\n                    </b-button>\n                  </template>\n\n                </b-modal>\n            </div>\n            '}),Vue.component("t-item-invalid",{props:{value:{type:Object,default:function(){return null}}},data:function(){return{text:strings.invalid}},methods:{},template:'\n            <div class="t-item-invalid">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md="1">\n                        <span class="t-timing-indicator timing-invalid"></span>\n                    </b-col>\n                    <b-col md="11">\n                        <b-card-body class="align-items-center">\n                            <i class="fa fa-exclamation"></i> {{text.error}}\n                            <a href=\'#\' @click=\'$emit("deleterq")\' class="text-danger"\n                            ><i class="fa fa-trash"></i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            '}),Vue.component("t-item-course",{props:{value:{type:Object,default:function(){return null}},plan:{type:Object,default:function(){return null}},page:{type:Object,default:function(){return null}},period:{type:Object,default:function(){return null}},maxspan:{type:Number,default:function(){return 0}}},data:function(){return{condition_options:string_keys.conditions,text:strings.item_course_text}},computed:{useItemConditions:function(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useItemConditions)&&this.plan.aggregation_info.useItemConditions},configurationState:function(){return this.hasGrades()||this.hasCompletions()?"t-configured-ok":"t-configured-alert"},configurationIcon:function(){return this.hasGrades()||this.hasCompletions()?"check":"exclamation-circle"},startdate:function(){return(0,_dateHelper.format_date)(this.value.course.startdate)},enddate:function(){return this.value.course.enddate?(0,_dateHelper.format_date)(this.value.course.enddate):this.text.noenddate}},methods:{hasGrades:function(){if(this.value.course.grades&&this.value.course.grades.length>0){var _step,_iterator=_createForOfIteratorHelper(this.value.course.grades);try{for(_iterator.s();!(_step=_iterator.n()).done;){if(_step.value.selected)return!0}}catch(err){_iterator.e(err)}finally{_iterator.f()}}return!1},hasCompletions:function(){if(this.value.course.completion&&this.value.course.completion.conditions){var _step2,_iterator2=_createForOfIteratorHelper(this.value.course.completion.conditions);try{for(_iterator2.s();!(_step2=_iterator2.n()).done;){var cgroup=_step2.value;if(cgroup.items&&cgroup.items.length>0)return!0}}catch(err){_iterator2.e(err)}finally{_iterator2.f()}}return!1},includeChanged:function(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:newValue,required:g.required}}])[0].fail(_notification.default.exception)},requiredChanged:function(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:g.selected,required:newValue}}])[0].fail(_notification.default.exception)},updateConditions:function(){(0,_ajax.call)([{methodname:"local_treestudyplan_edit_studyitem",args:{id:this.value.id,conditions:this.value.conditions}}])[0].fail(_notification.default.exception)}},created:function(){},template:'\n            <div class="t-item-course">\n            <b-card no-body >\n                <div class=\'d-flex flex-wrap mr-0 ml-0\'>\n                    <div>\n                        <span\n                            :title="text[\'coursetiming_\'+value.course.timing]"\n                            v-b-popover.hover.top="startdate+\' - \'+enddate"\n                            :class="\'t-timing-indicator timing-\'+value.course.timing"></span>\n                    </div>\n                    <div class="flex-fill align-items-center">\n                        <b-card-body >\n                            <a  class="t-item-course-config"\n                                v-b-modal="\'t-item-course-config-\'+value.id"\n                                href="#" @click.prevent=""\n                                ><i :class="\'fa fa-\'+configurationIcon+\' \' + configurationState"></i></a>\n                            <a  v-b-modal="\'t-item-course-config-\'+value.id"\n                                :id="\'t-item-course-details-\'+value.id"\n                                :href="\'/course/view.php?id=\'+value.course.id"\n                                @click.prevent.stop="">{{ value.course.displayname }}</a>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal class=""\n                    :id="\'t-item-course-config-\'+value.id"\n                    :title="value.course.displayname + \' - \' + value.course.fullname"\n                    ok-only\n                    size="lg"\n                    scrollable\n                    class="b-modal-justify-footer-between"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href="\'/course/view.php?id=\'+value.course.id" target="_blank"\n                                ><i class="fa fa-graduation-cap"></i> {{ value.course.fullname }}</a>\n                                <a v-if=\'!!value.course.completion\'\n                                    :href="\'/course/completion.php?id=\'+value.course.id"  target="_blank"\n                                :title="text.configure_completion"><i class="fa fa-gear"></i></a>\n                                </h1>\n                            {{ value.course.context.path.join(" / ")}} / {{value.course.shortname}}\n                        </div>\n                        <div class="r-course-detail-header-right">\n                            <div :class="\'r-timing-\'+value.course.timing">\n                                {{text[\'coursetiming_\'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                            <t-item-timing-checker\n                                class="mt-1"\n                                :maxspan="maxspan"\n                                :page="page"\n                                :period="period"\n                                v-model="value"\n                             ></t-item-timing-checker>\n                        </div>\n                    </template>\n\n                    <t-item-course-grades\n                        v-if=\'!!value.course.grades && value.course.grades.length > 0\'\n                        v-model=\'value\' :plan="plan"\n                        ></t-item-course-grades>\n                    <t-item-course-completion\n                        v-if=\'!!value.course.completion\'\n                        v-model=\'value.course.completion\'\n                        :course=\'value.course\'\n                        ></t-item-course-completion>\n\n                    <template #modal-footer="{ ok, cancel, hide }" >\n                        <a href=\'#\' @click=\'$emit("deleterq")\' class="text-danger"\n                            ><i class="fa fa-trash"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size="sm" variant="primary" @click="ok()">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n            </b-card></div>\n            '}),Vue.component("t-item-course-grades",{props:{value:{type:Object,default:function(){return null}},plan:{type:Object,default:function(){return null}}},data:function(){return{condition_options:string_keys.conditions,text:strings.item_course_text}},computed:{useRequiredGrades:function(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useRequiredGrades)&&this.plan.aggregation_info.useRequiredGrades},selectedgrades:function(){var list=[];for(var ix in this.value.course.grades){var g=this.value.course.grades[ix];g.selected&&list.push(g)}return list}},methods:{includeChanged:function(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:newValue,required:g.required}}])[0].fail(_notification.default.exception)},requiredChanged:function(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:g.selected,required:newValue}}])[0].fail(_notification.default.exception)}},created:function(){},template:'\n            <div>\n                <b-form-group\n                    :label="text.select_grades"\n                    ><ul class="t-item-module-children">\n                        <li class="t-item-course-gradeinfo">\n                            <span class=\'t-item-course-chk-lbl\'>{{text.grade_include}}</span\n                            ><span v-if="useRequiredGrades"  class=\'t-item-course-chk-lbl\'>{{text.grade_require}}</span>\n                        </li>\n                        <li class="t-item-course-gradeinfo" v-for="g in value.course.grades">\n                            <b-form-checkbox inline\n                                @change="includeChanged($event,g)" v-model="g.selected"\n                                ></b-form-checkbox>\n                            <b-form-checkbox v-if="useRequiredGrades" inline :disabled="!g.selected"\n                                @change="requiredChanged($event,g)" v-model="g.required"\n                                ></b-form-checkbox>\n                            <span :title="g.typename" v-html="g.icon"></span>\n                            <s-edit-mod\n                                :title="value.course.fullname"\n                                @saved="(fd) => g.name = fd.get(\'name\')"\n                                v-if="g.cmid > 0"\n                                :cmid="g.cmid"\n                                :coursectxid="value.course.ctxid"\n                                genericonly><span v-html="g.name"></span></s-edit-mod>\n                        </li>\n                    </ul>\n                </b-form-group>\n            </div>\n            '}),Vue.component("t-item-course-completion",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},course:{type:Object,default:function(){return{}}}},data:function(){return{text:strings.completion}},created:function(){var self=this,stringkeys=[];for(var key in this.text)stringkeys.push({key:key,component:"local_treestudyplan"});(0,_str.get_strings)(stringkeys).then((function(strings){var i=0;for(var _key in self.text)self.text[_key]=strings[i],i++}))},computed:{hasCompletions:function(){if(this.value.conditions){var _step3,_iterator3=_createForOfIteratorHelper(this.value.conditions);try{for(_iterator3.s();!(_step3=_iterator3.n()).done;){var cgroup=_step3.value;if(cgroup.items&&cgroup.items.length>0)return!0}}catch(err){_iterator3.e(err)}finally{_iterator3.f()}}return!1}},methods:{completion_icon:function(completion){switch(completion){case"progress":return"exclamation-circle";case"complete":case"complete-pass":return"check-circle";case"complete-fail":return"times-circle";default:return"circle-o"}},completion_tag:function(cgroup){return cgroup.completion?"completed":"incomplete"}},template:"\n            <table class=\"r-item-course-grade-details\">\n                <tr v-if=\"hasCompletions\">\n                    <td colspan='2'><span v-if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any}}</span></td>\n                </tr>\n                <tr v-else>\n                    <td colspan='2'>{{text.completion_not_configured}}!\n                    <br/><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                    </td>\n                </tr>\n                <template v-for='cgroup in value.conditions'>\n                    <tr>\n                        <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                        ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span>\n                        {{cgroup.title}}</th>\n                    </tr>\n                    <tr v-for='ci in cgroup.items'>\n                        <td><span v-html='ci.details.criteria'></span>\n                        </td>\n                        <td v-if=\"ci.details.requirement\" class=\"font-italic\">\n                            {{ci.details.requirement}}\n                        </td>\n                    </tr>\n                </template>\n            </table>\n            "}),Vue.component("t-item-junction",{props:{value:{type:Object,default:function(){return{}}}},data:function(){return{condition_options:string_keys.conditions}},methods:{},template:"\n            <div class='t-item-junction  t-item-filter'>\n                <i class=\"fa fa-check-circle\"></i>\n            </div>\n            "}),Vue.component("t-item-finish",{props:{value:{type:Object,default:function(){return{}}}},data:function(){return{}},methods:{},template:"\n            <div class='t-item-finish t-item-filter'>\n                <i class=\"fa fa-stop-circle\"></i>\n            </div>\n            "}),Vue.component("t-item-start",{props:{value:{type:Object,default:function(){return{}}}},data:function(){return{}},created:function(){},methods:{},template:"\n            <div class='t-item-start t-item-filter'>\n                <i class=\"fa fa-play-circle\"></i>\n            </div>\n            "}),Vue.component("t-item-badge",{props:{value:{type:Object,default:function(){return{badge:{}}}}},data:function(){return{txt:strings,text:strings.item_text}},methods:{},template:'\n            <div class=\'t-item-badge t-item-filter\' v-b-tooltip.hover :title="value.badge.name">\n                <svg class="t-badge-backdrop " width=\'50px\' height=\'50px\' viewBox="0 0 100 100">\n                    <title>{{value.badge.name}}</title>\n                    <circle cx="50" cy="50" r="46"\n                        style="stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;"/>\n                    <image class="badge-image" clip-path="circle() fill-box"\n                        :href="value.badge.imageurl" x="12" y="12" width="76" height="76"/>\n                </svg>\n                <a class="t-item-config badge"\n                v-b-modal="\'t-item-badge-details-\'+value.id" href="#" @click.prevent=""><i  class="fa fa-gear"></i></a>\n                <b-modal class=""\n                    :id="\'t-item-badge-details-\'+value.id"\n                    :title="value.badge.name"\n                    size="lg"\n                    ok-only\n                    centered\n                    scrollable\n                    class="b-modal-justify-footer-between"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class="fa fa-certificate"></i>\n                                <a :href="value.badge.infolink" target="_blank"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols="3">\n                            <img :src="value.badge.imageurl"/>\n                        </b-col><b-col cols="9">\n                            <p>{{value.badge.description}}</p>\n                            <ul class="list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1"\n                             v-if="value.badge.criteria"><li v-for="crit in value.badge.criteria"\n                             ><span v-html=\'crit\'></span></li></ul>\n                            <p><strong><i class="fa fa-link"></i>\n                                <a :href="value.badge.infolink">{{ txt.badge.badgeinfo }}</a></strong></p>\n                        </b-col></b-row>\n                    </b-container>\n                    <template #modal-footer="{ ok, cancel, hide }" >\n                        <a href=\'#\' @click=\'$emit("deleterq")\' class="text-danger"\n                            ><i class="fa fa-trash"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size="sm" variant="primary" @click="ok()">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n\n            </div>\n            '}),Vue.component("t-coursecat-list",{props:{value:{type:Array,default:function(){return{}}}},data:function(){return{}},methods:{},template:'\n            <ul class="t-coursecat-list">\n                <t-coursecat-list-item\n                    v-for="coursecat,idx in value"\n                    v-model="value[idx]"\n                    :key="coursecat.id"></t-coursecat-list-item>\n            </ul>\n            '}),Vue.component("t-coursecat-list-item",{props:{value:{type:Object,default:function(){return{}}}},data:function(){return{loading:!1}},computed:{showSpinner:function(){return this.canLoadMore()},hasDetails:function(){return this.value.haschildren||this.value.hascourses}},methods:{canLoadMore:function(){return this.value.haschildren&&(!this.value.children||0==this.value.children.length)||this.value.hascourses&&(!this.value.courses||0==this.value.courses.length)},onShowDetails:function(){var self=this;this.canLoadMore()&&(0,_ajax.call)([{methodname:"local_treestudyplan_get_category",args:{id:this.value.id}}])[0].done((function(response){self.$emit("input",response)})).fail(_notification.default.exception)}},template:'\n            <li class="t-coursecat-list-item">\n                <span v-if="hasDetails" v-b-toggle="\'coursecat-\'+value.id">\n                    <i class="when-closed fa fa-caret-right"></i>\n                    <i class="when-open fa fa-caret-down"></i>\n                    <span class="t-coursecat-heading">\n                        <i class="t-coursecat-list-item fa fa-tasks"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <span v-else>\n                    <span class="t-coursecat-heading">\n                        <i class="t-coursecat-list-item fa fa-tasks"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <b-collapse v-if="hasDetails" :id="\'coursecat-\'+value.id"\n                    @show="onShowDetails" :visible="!!(value.children) || !!(value.courses)">\n                    <b-spinner class="ml-4" v-if="showSpinner" small variant="primary"></b-spinner>\n                    <t-coursecat-list v-if="value.children" v-model="value.children"></t-coursecat-list>\n                    <t-course-list v-if="value.courses" v-model="value.courses"></t-course-list>\n                </b-collapse>\n            </li>\n            '}),Vue.component("t-course-list",{props:{value:{type:Array,default:function(){return{}}}},data:function(){return{}},methods:{makeType:function(){return{item:!1,component:!0,span:1,type:"gradable"}}},template:'\n            <ul class="t-course-list">\n                <li class="t-course-list-item" v-for="course in value" :key="course.id">\n                    <drag\n                        class="draggable-course"\n                        :data="course"\n                        :type="makeType()"\n                        @cut=""\n                    >\n                    <i class="t-course-list-item fa fa-book"></i> {{ course.shortname }} - {{ course.fullname }}\n                    </drag>\n                </li>\n            </ul>\n            '})}};return _exports.default=_default2,_exports.default}));
+define("local_treestudyplan/studyplan-editor-components",["exports","./simpleline/simpleline","core/ajax","core/notification","core/str","./util/string-helper","./util/date-helper","./studyplan-processor","./util/debugger","./downloader","./treestudyplan-components","./util/mform-helper"],(function(_exports,_simpleline,_ajax,_notification,_str,_stringHelper,_dateHelper,_studyplanProcessor,_debugger,_downloader,_treestudyplanComponents,_mformHelper){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _createForOfIteratorHelper(o,allowArrayLike){var it="undefined"!=typeof Symbol&&o[Symbol.iterator]||o["@@iterator"];if(!it){if(Array.isArray(o)||(it=function(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(o))||allowArrayLike&&o&&"number"==typeof o.length){it&&(o=it);var i=0,F=function(){};return{s:F,n:function(){return i>=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function(_e){throw _e},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var err,normalCompletion=!0,didErr=!1;return{s:function(){it=it.call(o)},n:function(){var step=it.next();return normalCompletion=step.done,step},e:function(_e2){didErr=!0,err=_e2},f:function(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_notification=_interopRequireDefault(_notification),_debugger=_interopRequireDefault(_debugger),_treestudyplanComponents=_interopRequireDefault(_treestudyplanComponents),_mformHelper=_interopRequireDefault(_mformHelper);var STUDYPLAN_EDITOR_FIELDS=["name","shortname","description","idnumber","context_id","aggregation","aggregation_config"],PERIOD_EDITOR_FIELDS=["fullname","shortname","startdate","enddate"],datechanger_globals={default:!1,defaultchoice:!1,hidewarn:!1},_default2={STUDYPLAN_EDITOR_FIELDS:STUDYPLAN_EDITOR_FIELDS,install:function(Vue){Vue.use(_treestudyplanComponents.default),Vue.use(_mformHelper.default);var debug=new _debugger.default("treestudyplan-editor");function isVisible(elem){return!!(elem.offsetWidth||elem.offsetHeight||elem.getClientRects().length)}var ItemEventBus=new Vue,string_keys=(0,_stringHelper.load_stringkeys)({conditions:[{value:"ALL",textkey:"condition_all"},{value:"ANY",textkey:"condition_any"}]}),strings=(0,_stringHelper.load_strings)({studyplan_text:{studyline_editmode:"studyline_editmode",toolbox_toggle:"toolbox_toggle",editmode_modules_hidden:"editmode_modules_hidden",studyline_add:"studyline_add",add$core:"add$core",edit$core:"edit$core",studyline_name:"studyline_name",studyline_name_ph:"studyline_name_ph",studyline_shortname:"studyline_shortname",studyline_shortname_ph:"studyline_shortname_ph",studyline_color:"studyline_color",associations:"associations",associated_cohorts:"associated_cohorts",associated_users:"associated_users",studyline_edit:"studyline_edit",studyplan_name:"studyplan_name",studyplan_name_ph:"studyplan_name_ph",studyplan_shortname:"studyplan_shortname",studyplan_shortname_ph:"studyplan_shortname_ph",studyplan_description:"studyplan_description",studyplan_description_ph:"studyplan_description_ph",studyplan_idnumber:"studyplan_idnumber",studyplan_idnumber_ph:"studyplan_idnumber_ph",studyplan_slots:"studyplan_slots",studyplan_startdate:"studyplan_startdate",studyplan_enddate:"studyplan_enddate"},studyplan_advanced:{advanced_tools:"advanced_tools",confirm_cancel:"confirm_cancel",confirm_ok:"confirm_ok",success$core:"success$core",error$core:"failed$core",advanced_converted:"advanced_converted",advanced_skipped:"advanced_skipped",advanced_failed:"advanced_failed",advanced_locked:"advanced_locked",advanced_multiple:"advanced_multiple",advanced_error:"advanced_error",advanced_tools_heading:"advanced_tools_heading",advanced_warning_title:"advanced_warning_title",advanced_warning:"advanced_warning",advanced_pick_scale:"advanced_pick_scale",advanced_course_manipulation_title:"advanced_course_manipulation_title",advanced_force_scale_title:"advanced_force_scale_title",advanced_force_scale_desc:"advanced_force_scale_desc",advanced_force_scale_button:"advanced_force_scale_button",advanced_disable_autoenddate_title:"advanced_disable_autoenddate_title",advanced_disable_autoenddate_desc:"advanced_disable_autoenddate_desc",advanced_disable_autoenddate_button:"advanced_disable_autoenddate_button",advanced_confirm_header:"advanced_confirm_header",advanced_force_scale_confirm:"advanced_force_scale_confirm",advanced_import:"advanced_import",advanced_export:"advanced_export",advanced_export_csv:"advanced_export_csv",advanced_import_from_file:"advanced_import_from_file",advanced_purge:"advanced_purge",advanced_purge_expl:"advanced_purge_expl",advanced_cascade_cohortsync_title:"advanced_cascade_cohortsync_title",advanced_cascade_cohortsync_desc:"advanced_cascade_cohortsync_desc",advanced_cascade_cohortsync:"advanced_cascade_cohortsync"},studyplan_edit:{studyplan_edit:"studyplan_edit",studyplan_add:"studyplan_add"},period_edit:{edit:"period_edit",fullname:"studyplan_name",shortname:"studyplan_shortname",startdate:"studyplan_startdate",enddate:"studyplan_enddate"},course_timing:{title:"course_timing_title",desc:"course_timing_desc",question:"course_timing_question",warning:"course_timing_warning",timing_ok:"course_timing_ok",timing_off:"course_timing_off",course:"course@core",period:"period",yes:"yes$core",no:"no$core",duration:"duration",years:"years$core",year:"year$core",weeks:"weeks$core",week:"week$core",days:"days$core",day:"day$core",rememberchoice:"course_timing_rememberchoice",hidewarning:"course_timing_hidewarning",periodspan:"course_period_span",periods:"periods",periodspan_desc:"course_period_span_desc"},studyplan_associate:{associations:"associations",associated_cohorts:"associated_cohorts",associated_users:"associated_users",associate_cohorts:"associate_cohorts",associate_users:"associate_users",add_association:"add_association",delete_association:"delete_association",associations_empty:"associations_empty",associations_search:"associations_search",cohorts:"cohorts",users:"users",selected:"selected",name:"name",context:"context"},item_text:{select_conditions:"select_conditions",item_configuration:"item_configuration",ok:"ok@core",delete:"delete@core",item_delete_message:"item_delete_message",type_course:"course@core",type_junction:"tool-junction",type_start:"tool-start",type_finish:"tool-finish",type_badge:"tool-badge",type_invalid:"course-invalid"},item_course_text:{select_conditions:"select_conditions",select_grades:"select_grades",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",grade_include:"grade_include",grade_require:"grade_require",ok:"ok@core",cancel:"cancel@core",delete:"delete@core"},invalid:{error:"error"},completion:{completion_completed:"completion_completed",completion_incomplete:"completion_incomplete",aggregation_all:"aggregation_all",aggregation_any:"aggregation_any",aggregation_overall_all:"aggregation_overall_all",aggregation_overall_any:"aggregation_overall_any",completion_not_configured:"completion_not_configured",configure_completion:"configure_completion"},badge:{share_badge:"share_badge",dateissued:"dateissued",dateexpire:"dateexpire",badgeinfo:"badgeinfo"}});Vue.component("t-studyplan-advanced",{props:{value:{type:Object,default:function(){return null}}},data:function(){return{force_scales:{selected_scale:null,result:[]},text:strings.studyplan_advanced}},created:function(){},mounted:function(){},updated:function(){},computed:{scales:function(){return[{id:null,disabled:!0,name:this.text.advanced_pick_scale}].concat(this.value.advanced.force_scales.scales)}},methods:{disable_autoenddate:function(){var self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_disable_autoenddate",args:{studyplan_id:this.value.id}}])[0].done((function(response){self.$bvModal.msgBoxConfirm((response.success?self.text.success$core:self.text.error$core)+"\n"+response.msg)})).fail(_notification.default.exception)},force_scales_start:function(){var _this=this,self=this;this.$bvModal.msgBoxConfirm(this.text.advanced_force_scale_confirm,{title:this.text.advanced_force_scale_confirm,okVariant:"danger",okTitle:this.text.confirm_ok,cancelTitle:this.text.confirm_cancel}).then((function(value){1==value&&(0,_ajax.call)([{methodname:"local_treestudyplan_force_studyplan_scale",args:{studyplan_id:_this.value.id,scale_id:_this.force_scales.selected_scale}}])[0].done((function(response){self.force_scales.result=response})).fail(_notification.default.exception)}))},export_plan:function(format){var self=this;null!=format&&["json","csv"].includes(format)||(format="json"),(0,_ajax.call)([{methodname:"local_treestudyplan_export_plan",args:{studyplan_id:this.value.id,format:format}}])[0].done((function(response){(0,_downloader.download)(self.value.shortname+"."+format,response.content,response.format)})).fail(_notification.default.exception)},import_studylines:function(){var _this2=this;(0,_downloader.upload)((function(filename,content){(0,_ajax.call)([{methodname:"local_treestudyplan_import_studylines",args:{studyplan_id:_this2.value.id,content:content,format:"application/json"}}])[0].done((function(response){response.success?location.reload():debug.error("Import failed: ",response.msg)})).fail(_notification.default.exception)}),"application/json")},purge_studyline:function(){(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyplan",args:{id:this.value.id,force:!0}}])[0].done((function(response){response.success?location.reload():debug.error("Could not delete plan: ",response.msg)})).fail(_notification.default.exception)},cascade_cohortsync:function(){var self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_cascade_cohortsync",args:{studyplan_id:this.value.id}}])[0].done((function(response){self.$bvModal.msgBoxOk(response.success?self.text.success$core:self.text.error$core,{title:self.text.advanced_cascade_cohortsync})})).fail(_notification.default.exception)},modal_close:function(){this.force_scales.result=[]}},template:'\n            <span>\n                <a  v-if="value.advanced"\n                    href=\'#\'\n                    @click.prevent=\'\'\n                    class=\'text-danger\'\n                    v-b-modal="\'t-studyplan-\'+value.id+\'-advanced\'"\n                    ><i class=\'fa fa-wrench\'></i> {{text.advanced_tools}}</a>\n                <b-modal v-if="value.advanced"\n                    :id="\'t-studyplan-\'+value.id+\'-advanced\'"\n                    size="lg"\n                    :title="text.advanced_tools_heading"\n                    ok-only\n                    @hide="modal_close"\n                    >\n                    <b-card no-body>\n                    <b-tabs card>\n                        <b-tab :title="text.advanced_warning_title" active>\n                            {{ text.advanced_warning}}\n                        </b-tab>\n                        <b-tab :title="text.advanced_course_manipulation_title" >\n                            <b-container>\n                            <b-row><b-col cols="*">\n                                <h3>{{ text.advanced_cascade_cohortsync_title}}</h3>\n                                    {{ text.advanced_cascade_cohortsync_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols="*">\n                                <b-button\n                                    variant="info"\n                                    @click="cascade_cohortsync"\n                                >{{ text.advanced_cascade_cohortsync}}</b-button>\n                            </b-col></b-row>\n                            <b-row class="mt-3"><b-col cols="*">\n                                <h3>{{ text.advanced_force_scale_title}}</h3>\n                                {{ text.advanced_force_scale_desc}}\n                            </b-col></b-row>\n                            <b-row>\n                                <b-col>\n                                    <b-form-select v-model="force_scales.selected_scale"\n                                    :options="scales" text-field="name" value-field="id"\n                                    ></b-form-select>\n                                </b-col>\n                                <b-col cols="4">\n                                    <b-button\n                                        variant="danger"\n                                        :disabled="force_scales.selected_scale == null"\n                                        @click="force_scales_start"\n                                    >{{ text.advanced_force_scale_button}}</b-button>\n                                </b-col>\n\n                            </b-row>\n                            <b-row class="mt-3"><b-col cols="*">\n                                <ul class=\'t-advanced-scrollable\' v-if="force_scales.result.length > 0">\n                                    <li v-for="c in force_scales.result">\n                                        <span class=\'t-advanced-coursename\'>{{c.course.fullname}}</span>\n                                        <ul v-if="c.grades.length > 0">\n                                            <li v-for=\'g in c.grades\'>\n                                                <span class=\'t-advanced-gradename\'><span v-html="g.name"></span></span>\n                                                <span v-if="g.changed == \'converted\'" class=\'t-advanced-status changed\'\n                                                    >{{text.advanced_converted}}</span\n                                                ><span v-else-if="g.changed == \'skipped\'" class=\'t-advanced-status skipped\'\n                                                    >{{text.advanced_skipped}}</span\n                                                >\n                                                <span v-else class=\'t-advanced-status skipped\'\n                                                    >{{text.advanced_error}}</span\n                                                >\n                                            </li>\n                                        </ul>\n                                    </li>\n                                </ul>\n                            </b-col></b-row>\n                            <b-row><b-col cols="*">\n                                <h3>{{ text.advanced_disable_autoenddate_title}}</h3>\n                                {{ text.advanced_disable_autoenddate_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols="*">\n                                <b-button\n                                    variant="danger"\n                                    @click="disable_autoenddate"\n                                >{{ text.advanced_disable_autoenddate_button}}</b-button>\n                            </b-col></b-row>\n                            </b-container>\n                        </b-tab>\n                        <b-tab :title=\'text.advanced_export\'>\n                            <b-button\n                                    variant="primary"\n                                    @click="export_plan"\n                                >{{ text.advanced_export}}</b-button>\n                            <b-button\n                                    variant="danger"\n                                    @click="import_studylines"\n                                >{{ text.advanced_import}}</b-button>\n                            <b-button\n                                variant="primary"\n                                @click="export_plan(\'csv\')"\n                            >{{ text.advanced_export_csv}}</b-button>\n                        </b-tab>\n                        <b-tab :title=\'text.advanced_purge\'>\n                            <p>{{text.advanced_purge_expl}}</p>\n                            <p><b-button\n                                    variant="danger"\n                                    @click="purge_studyline"\n                                >{{ text.advanced_purge}}</b-button></p>\n                        </b-tab>\n                    </b-tabs>\n                    </b-card>\n                </b-modal>\n            </span>\n            '}),Vue.component("t-studyplan-edit",{props:{value:{type:Object,default:function(){return null}},mode:{type:String,default:function(){return"edit"}},type:{type:String,default:function(){return"link"}},variant:{type:String,default:function(){return""}},contextid:{type:Number,default:1}},data:function(){return{text:strings.studyplan_edit}},computed:{},methods:{planSaved:function(updatedplan){var self=this;if(debug.info("Got new plan data",updatedplan),"create"==self.mode)self.$emit("created",updatedplan);else{var moved_from=self.value.context_id,moved_to=updatedplan.context_id,moved=moved_from!=moved_to;updatedplan.pages[0].periods!=self.value.pages[0].periods?(0,_ajax.call)([{methodname:"local_treestudyplan_get_studyplan_map",args:{id:self.value.id}}])[0].done((function(response){self.value=(0,_studyplanProcessor.ProcessStudyplan)(response,!0),debug.info("studyplan processed"),self.$emit("input",self.value)})).fail((function(error){_notification.default.exception(error)})):((0,_studyplanProcessor.objCopy)(self.value,updatedplan,STUDYPLAN_EDITOR_FIELDS),self.$emit("input",self.value),moved&&self.$emit("moved",self.value,moved_from,moved_to))}}},template:'\n            <span class=\'s-studyplan-edit\'>\n                <mform \n                    name="studyplan_editform" \n                    :params="{studyplan_id: value.id, mode: mode, contextid: contextid }" \n                    @saved="planSaved"\n                    :variant="variant"\n                    :type="type"\n                    :title="(mode == \'create\')?text.studyplan_add:text.studyplan_edit"\n                    ><slot><i class=\'fa fa-gear\'></i></slot></mform>\n            </span>\n            '}),Vue.component("t-studyplan-associate",{props:["value"],data:function(){return{show:!1,config:{userfields:[{key:"selected"},{key:"firstname",sortable:!0},{key:"lastname",sortable:!0}],cohortfields:[{key:"selected"},{key:"name",sortable:!0},{key:"context",sortable:!0}]},association:{cohorts:[],users:[]},loading:{cohorts:!1,users:!1},search:{users:[],cohorts:[]},selected:{search:{users:[],cohorts:[]},associated:{users:[],cohorts:[]}},text:strings.studyplan_associate}},created:function(){},mounted:function(){},updated:function(){},methods:{showModal:function(){this.show=!0,this.loadAssociations()},cohortOptionModel:function(c){return{value:c.id,text:c.name+" ("+c.context.path.join(" / ")+")"}},userOptionModel:function(u){return{value:u.id,text:u.firstname+" "+u.lastname}},loadAssociations:function(){var self=this;self.loading.cohorts=!0,self.loading.users=!0,(0,_ajax.call)([{methodname:"local_treestudyplan_associated_users",args:{studyplan_id:self.value.id}}])[0].done((function(response){self.association.users=response.map(self.userOptionModel),self.loading.users=!1})).fail(_notification.default.exception),(0,_ajax.call)([{methodname:"local_treestudyplan_associated_cohorts",args:{studyplan_id:self.value.id}}])[0].done((function(response){self.association.cohorts=response.map(self.cohortOptionModel),self.loading.cohorts=!1})).fail(_notification.default.exception)},searchCohorts:function(searchtext){var self=this;searchtext.length>0?(0,_ajax.call)([{methodname:"local_treestudyplan_list_cohort",args:{like:searchtext,exclude_id:self.value.id}}])[0].done((function(response){self.search.cohorts=response.map(self.cohortOptionModel)})).fail(_notification.default.exception):self.search.cohorts=[]},cohortAssociate:function(){var self=this,requests=[],associated=self.association.cohorts,search=self.search.cohorts,searchselected=self.selected.search.cohorts,_loop=function(i){var r=searchselected[i];requests.push({methodname:"local_treestudyplan_connect_cohort",args:{studyplan_id:self.value.id,cohort_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(associated,search,r)}})};for(var i in searchselected)_loop(i);(0,_ajax.call)(requests)},cohortDisassociate:function(){var self=this,requests=[],associatedselected=self.selected.associated.cohorts,associated=self.association.cohorts,search=self.search.cohorts,_loop2=function(i){var r=associatedselected[i];requests.push({methodname:"local_treestudyplan_disconnect_cohort",args:{studyplan_id:self.value.id,cohort_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(search,associated,r)}})};for(var i in associatedselected)_loop2(i);(0,_ajax.call)(requests)},searchUsers:function(searchtext){var self=this;searchtext.length>0?(0,_ajax.call)([{methodname:"local_treestudyplan_find_user",args:{like:searchtext,exclude_id:self.value.id}}])[0].done((function(response){self.search.users=response.map(self.userOptionModel)})).fail(_notification.default.exception):self.search.users=[]},userAssociate:function(){var self=this,requests=[],associated=self.association.users,search=self.search.users,searchselected=self.selected.search.users,_loop3=function(i){var r=searchselected[i];requests.push({methodname:"local_treestudyplan_connect_user",args:{studyplan_id:self.value.id,user_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(associated,search,r)}})};for(var i in searchselected)_loop3(i);(0,_ajax.call)(requests)},userDisassociate:function(){var self=this,requests=[],associated=self.association.users,associatedselected=self.selected.associated.users,search=self.search.users,_loop4=function(i){var r=associatedselected[i];requests.push({methodname:"local_treestudyplan_disconnect_user",args:{studyplan_id:self.value.id,user_id:r},fail:_notification.default.exception,done:function(response){response.success&&(0,_studyplanProcessor.transportItem)(search,associated,r)}})};for(var i in associatedselected)_loop4(i);(0,_ajax.call)(requests)}},template:'\n<span class=\'s-studyplan-associate\'\n    ><a href=\'#\' @click.prevent="showModal" ><slot><i class=\'fa fa-users\'></i></slot></a>\n    <b-modal\n        v-model="show"\n        size="lg"\n        ok-variant="primary"\n        :title="text.associations + \' - \' + value.name"\n        ok-only>\n        <b-tabs class=\'s-studyplan-associate-window\'>\n            <b-tab :title="text.cohorts">\n                <b-container>\n                    <b-row class=\'mb-2 mt-2\'>\n                        <b-col>{{text.associated_cohorts}}</b-col>\n                        <b-col>{{text.associate_cohorts}}</b-col>\n                    </b-row>\n                    <b-row class=\'mb-2\'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type="text" @input="searchCohorts($event)"\n                                :placeholder="text.search"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.associated.cohorts"\n                                :options="association.cohorts"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.search.cohorts"\n                                :options="search.cohorts"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class=\'mt-2\'>\n                        <b-col>\n                            <b-button variant=\'danger\' @click="cohortDisassociate()"\n                                ><i class=\'fa fa-chain-broken\'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant=\'success\' @click="cohortAssociate()"\n                                ><i class=\'fa fa-link\'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n            <b-tab :title="text.users">\n                <b-container>\n                    <b-row class=\'mb-2 mt-2\'>\n                        <b-col>{{text.associated_users}}</b-col>\n                        <b-col>{{text.associate_users}}</b-col>\n                    </b-row>\n                    <b-row class=\'mb-2\'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type="text"\n                                @input="searchUsers($event)"\n                                placeholder="Search users"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.associated.users"\n                                :options="association.users"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model="selected.search.users"\n                                :options="search.users"\n                                :select-size="10"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class=\'mt-2\'>\n                        <b-col>\n                                <b-button variant=\'danger\' @click="userDisassociate()"\n                                ><i class=\'fa fa-chain-broken\'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant=\'success\' @click="userAssociate()"\n                                ><i class=\'fa fa-link\'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n        </b-tabs>\n    </b-modal>\n</span>\n'}),Vue.component("t-period-edit",{props:{value:{type:Object,default:function(){return null}},type:{type:String,default:function(){return"link"}},variant:{type:String,default:function(){return""}},minstart:{type:String,default:function(){return null}},maxend:{type:String,default:function(){return null}}},data:function(){return{show:!1,editdata:{fullname:"",shortname:"",startdate:(new Date).getFullYear()+"-08-01",enddate:(new Date).getFullYear()+1+"-08-01"},text:strings.period_edit}},created:function(){},mounted:function(){},updated:function(){},computed:{},methods:{editStart:function(){(0,_studyplanProcessor.objCopy)(this.editdata,this.value,PERIOD_EDITOR_FIELDS),this.show=!0},editFinish:function(){var self=this,args={id:this.value.id};(0,_studyplanProcessor.objCopy)(args,this.editdata,PERIOD_EDITOR_FIELDS),(0,_ajax.call)([{methodname:"local_treestudyplan_edit_period",args:args}])[0].done((function(response){(0,_studyplanProcessor.objCopy)(self.value,response,PERIOD_EDITOR_FIELDS),self.$emit("input",self.value),self.$emit("edited",self.value)})).fail(_notification.default.exception)},refresh:function(){var self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_get_period",args:{id:this.value.id}}])[0].done((function(response){(0,_studyplanProcessor.objCopy)(self.value,response,PERIOD_EDITOR_FIELDS),self.$emit("input",self.value)})).fail(_notification.default.exception)},add_day:function(date,days){return void 0===days&&(days=1),(0,_dateHelper.add_days)(date,days)},sub_day:function(date,days){return void 0===days&&(days=1),(0,_dateHelper.add_days)(date,0-days)}},template:'\n            <span class=\'t-period-edit\'>\n                <b-button :variant="variant" v-if=\'type == "button"\' @click.prevent=\'editStart()\'\n                    ><slot><i class=\'fa fa-gear\'></i></slot></b-button>\n                <a variant="variant" v-else href=\'#\' @click.prevent=\'editStart()\'\n                    ><slot><i class=\'fa fa-gear\'></i></slot></a>\n                <b-modal\n                    v-model="show"\n                    size="lg"\n                    ok-variant="primary"\n                    :title="text.edit"\n                    @ok="editFinish()"\n                    :ok-disabled="Math.min(editdata.fullname.length,editdata.shortname.length) == 0"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols="4">{{ text.fullname}}</b-col>\n                            <b-col cols="8">\n                                <b-form-input v-model="editdata.fullname"\n                                :state=\'editdata.fullname.length>0\'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.shortname}}</b-col>\n                            <b-col cols="8">\n                                <b-form-input v-model="editdata.shortname"\n                                :state=\'editdata.shortname.length>0\'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_startdate}}</b-col>\n                            <b-col cols="8">\n                                <b-form-datepicker\n                                    start-weekday="1"\n                                    v-model="editdata.startdate"\n                                    :min="(minstart ? minstart : \'\')"\n                                    :max="sub_day(value.enddate)"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="4">{{ text.studyplan_enddate}}</b-col>\n                            <b-col cols="8">\n                                <b-form-datepicker\n                                    start-weekday="1"\n                                    v-model="editdata.enddate"\n                                    :min="add_day(value.startdate)"\n                                    :max="(maxend ? maxend : \'\')"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </span>\n            '}),Vue.component("t-studyplan",{props:["value","index"],data:function(){return{config:{userfields:[{key:"selected"},{key:"firstname",sortable:!0},{key:"lastname",sortable:!0}],cohortfields:[{key:"selected"},{key:"name",sortable:!0},{key:"context",sortable:!0}]},create:{studyline:{name:"",shortname:"",color:"#DDDDDD"}},edit:{toolbox_shown:!1,studyline:{editmode:!1,data:{name:"",shortname:"",color:"#DDDDDD"},original:{}},studyplan:{data:{name:"",shortname:"",description:"",slots:4,startdate:"2020-08-01",enddate:"",aggregation:"",aggregation_config:"",aggregation_info:{useRequiredGrades:!0,useItemCondition:!1}},original:{}}},text:strings.studyplan_text,cache:{linelayers:{}}}},created:function(){},mounted:function(){0==this.page.studylines.length&&(this.edit.studyline.editmode=!0),this.$root.$emit("redrawLines")},updated:function(){this.$root.$emit("redrawLines"),ItemEventBus.$emit("redrawLines")},computed:{columns:function(){return 1+2*this.page.periods},columns_stylerule:function(){for(var s="grid-template-columns: var(--studyplan-filter-width)",i=0;i<this.page.periods;i++)s+=" var(--studyplan-course-width) var(--studyplan-filter-width)";return s+";"},page:function(){return this.value.pages[0]}},methods:{trashbin_accepts:function(type){return!!type.item},countLineLayers:function(line){if(this.cache.linelayers[line.id]&&new Date-this.cache.linelayers[line.id].timestamp<1e3)return this.cache.linelayers[line.id].value;for(var maxLayer=-1,i=0;i<=this.page.periods;i++)if(line.slots[i]){line.slots[i];for(var ix in line.slots[i].courses){var item=line.slots[i].courses[ix];item.layer>maxLayer&&(maxLayer=item.layer)}for(var _ix in line.slots[i].filters){var _item=line.slots[i].filters[_ix];_item.layer>maxLayer&&(maxLayer=_item.layer)}}return this.cache.linelayers[line.id]={value:maxLayer+1,timestamp:new Date},maxLayer+1},slotsempty:function(slots){if(Array.isArray(slots)){for(var count=0,i=0;i<slots.length;i++)Array.isArray(slots[i].courses)&&(count+=slots[i].courses.length),Array.isArray(slots[i].filters)&&(count+=slots[i].filters.length);return 0==count}return!1},movedStudyplan:function(plan,from,to){this.$emit("moved",plan,from,to)},addStudyLine:function(page,newlineinfo){(0,_ajax.call)([{methodname:"local_treestudyplan_add_studyline",args:{page_id:page.id,name:newlineinfo.name,shortname:newlineinfo.shortname,color:newlineinfo.color,sequence:page.studylines.length}}])[0].done((function(response){page.studylines.push(response),newlineinfo.name="",newlineinfo.shortname="",newlineinfo.color="#dddddd"})).fail(_notification.default.exception)},editLineStart:function(line){Object.assign(this.edit.studyline.data,line),this.edit.studyline.original=line,this.$bvModal.show("modal-edit-studyline-"+this.value.id)},editLineFinish:function(){var editedline=this.edit.studyline.data,originalline=this.edit.studyline.original;(0,_ajax.call)([{methodname:"local_treestudyplan_edit_studyline",args:{id:editedline.id,name:editedline.name,shortname:editedline.shortname,color:editedline.color}}])[0].done((function(response){originalline.name=response.name,originalline.shortname=response.shortname,originalline.color=response.color})).fail(_notification.default.exception)},deleteLine:function(page,line){var self=this;(0,_str.get_strings)([{key:"studyline_confirm_remove",param:line.name,component:"local_treestudyplan"},{key:"delete",component:"core"}]).then((function(s){self.$bvModal.msgBoxConfirm(s[0],{okTitle:s[1],okVariant:"danger"}).then((function(modalresponse){modalresponse&&(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyline",args:{id:line.id}}])[0].done((function(response){if(1==response.success){var index=page.studylines.indexOf(line);page.studylines.splice(index,1)}})).fail(_notification.default.exception)}))}))},reorderLines:function(event,lines){event.apply(lines);var sequence=[];for(var idx in lines)sequence.push({id:lines[idx].id,sequence:idx});(0,_ajax.call)([{methodname:"local_treestudyplan_reorder_studylines",args:{sequence:sequence}}])[0].done((function(response){})).fail(_notification.default.exception)},deletePlan:function(studyplan){var self=this;(0,_str.get_strings)([{key:"studyplan_confirm_remove",param:studyplan.name,component:"local_treestudyplan"},{key:"delete",component:"core"}]).then((function(s){self.$bvModal.msgBoxConfirm(s[0],{okTitle:s[1],okVariant:"danger"}).then((function(modalresponse){modalresponse&&(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyplan",args:{id:studyplan.id,force:!0}}])[0].done((function(response){1==response.success&&self.$root.$emit("studyplanRemoved",studyplan)})).fail(_notification.default.exception)}))}))},deleteStudyItem:function(event){var item=event.data;(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyitem",args:{id:item.id}}])[0].done((function(response){1==response.success&&event.source.$emit("cut",event)})).fail(_notification.default.exception)},showslot:function(line,index,layeridx,type){for(var forGradable="gradable"==type,periods=this.page.periods,show=!0,i=0;i<periods;i++)if(line.slots[index-i]&&line.slots[index-i].courses){var list=line.slots[index-i].courses;for(var ix in list){var item=list[ix];item.layer==layeridx&&(forGradable?i>0&&item.span-i>0&&(show=!1):item.span-i>1&&(show=!1))}}return show},periodEdited:function(pi){var prev=this.$refs["periodeditor-"+(pi.period-1)][0];prev&&prev.refresh();var next=this.$refs["periodeditor-"+(pi.period+1)][0];next&&next.refresh()},add_day:function(date,days){return void 0===days&&(days=1),(0,_dateHelper.add_days)(date,days)},sub_day:function(date,days){return void 0===days&&(days=1),(0,_dateHelper.add_days)(date,0-days)},toolbox_switched:function(event){this.$emit("toggletoolbox",event)}},template:'\n            <div>\n                <div class=\'controlbox t-studyplan-controlbox\'>\n                    <div class="controlbox-group">\n                        <b-form-checkbox v-model="edit.studyline.editmode" class="sw-studyplan-toolbar" switch\n                            @change="toolbox_switched(edit.toolbox_shown && !edit.studyline.editmode); "\n                            >{{ text.studyline_editmode }}</b-form-checkbox>\n                        <b-form-checkbox v-if="!edit.studyline.editmode" v-model="edit.toolbox_shown" class="sw-studyplan-toolbar" switch\n                            @change="toolbox_switched"\n                            >{{ text.toolbox_toggle}}</b-form-checkbox>\n                        <drop\n                            mode=\'copy\'\n                            class=\'t-item-deletebox text-danger border-danger\'\n                            @drop=\'deleteStudyItem\'\n                            :accepts-type="trashbin_accepts"\n                            ><i class=\'fa fa-trash\'></i>\n                        </drop>\n                    </div>\n                    <div class="controlbox-group">\n                        <span class=\'control editable\'>\n                            <t-studyplan-advanced v-model="value"></t-studyplan-advanced>\n                        </span>\n                        <span class=\'control editable\'>\n                            <t-studyplan-associate\n                                v-model="value"><i class=\'fa fa-users\'></i> {{text.associations}}</t-studyplan-associate>\n                        </span>\n                        <span class=\'control editable\'>\n                            <t-studyplan-edit v-model="value" @moved="movedStudyplan" \n                                ><i class=\'fa fa-gear\'></i> {{text.edit$core}}</t-studyplan-edit>\n                        </span>\n                        <span class=\'control deletable\'>\n                            <a v-if=\'page.studylines.length == 0\' href=\'#\' @click=\'deletePlan(value)\'\n                                ><i class=\'text-danger fa fa-trash\'></i></a>\n                        </span>\n                    </div>\n                </div>\n                <div class=\'t-studyplan-content-edit\' v-if="edit.studyline.editmode">\n                    <drop-list\n                        :items="page.studylines"\n                        class="t-slot-droplist"\n                        :accepts-type="\'studyline-\'+page.id"\n                        xreorder="$event.apply(page.studylines)"\n                        @reorder="reorderLines($event,page.studylines)"\n                        mode="copy"\n                        row\n                    >\n                        <template v-slot:item="{item}">\n                            <drag\n                                :key="item.id"\n                                class=\'t-studyline-drag\'\n                                :data="item"\n                                :type="\'studyline-\'+page.id"\n                                >\n                                <template v-slot:drag-image>\n                                    <i class="fa fa-arrows text-primary"></i>\n                                </template>\n                                <t-studyline-edit\n                                    v-model="item"\n                                    @edit=\'editLineStart(item)\'\n                                    @delete=\'deleteLine(page,item)\'\n                                    >\n                                    <div v-if="!slotsempty(item.slots)"> {{ text.editmode_modules_hidden}} </div>\n                                </t-studyline-edit>\n                            </drag>\n                        </template>\n                    </drop-list>\n                </div>\n                <div class=\'t-studyplan-content\' v-else>\n\n                    \x3c!-- Now paint the headings column --\x3e\n                    <div class=\'t-studyplan-headings\'>\n                        <s-studyline-header-heading></s-studyline-header-heading>\n                        <t-studyline-heading  v-for="(line,lineindex) in page.studylines"\n                            :key="line.id"\n                            @resize="headingresized(lineindex,$event)"\n                            v-model="page.studylines[lineindex]"\n                            :layers=\'countLineLayers(line)+1\'\n                            :class=" \'t-studyline\' + ((lineindex%2==0)?\' odd \' :\' even \' )\n                                    + ((lineindex==0)?\' first \':\' \')\n                                    + ((lineindex==page.studylines.length-1)?\' last \':\' \')"\n                        ></t-studyline-heading>\n                    </div>\n                    \x3c!-- Next, paint all the cells in the scrollable --\x3e\n                    <div class="t-studyplan-scrollable" >\n                        <div class="t-studyplan-timeline" :style="columns_stylerule">\n                        \x3c!-- add period information --\x3e\n                        <template v-for="(n,index) in (page.periods+1)">\n                            <s-studyline-header-period\n                                v-if="index > 0"\n                                v-model="page.perioddesc[index-1]"\n                                ><t-period-edit\n                                    :ref="\'periodeditor-\'+index"\n                                    @edited="periodEdited"\n                                    v-model="page.perioddesc[index-1]"\n                                    :minstart="(index > 1) ? add_day(page.perioddesc[index-2].startdate,2) : null"\n                                    :maxend="(index < page.periods) ? sub_day(page.perioddesc[index].enddate,2) : null"\n                                ></t-period-edit\n                            ></s-studyline-header-period>\n                            <div class="s-studyline-header-filter"></div>\n                        </template>\n\n                        \x3c!-- Line by line add the items --\x3e\n                        \x3c!-- The grid layout handles putting it in rows and columns --\x3e\n                        <template v-for="(line,lineindex) in page.studylines"\n                            ><template v-for="(layernr,layeridx) in countLineLayers(line)+1"\n                                ><template v-for="(n,index) in (page.periods+1)"\n                                    >\n                                    <t-studyline-slot\n                                        v-if="index > 0 && showslot(line, index, layeridx, \'gradable\')"\n                                        type=\'gradable\'\n                                        v-model="line.slots[index].courses"\n                                        :key="\'c-\'+lineindex+\'-\'+index+\'-\'+layernr"\n                                        :slotindex="index"\n                                        :line="line"\n                                        :plan="value"\n                                        :page="page"\n                                        :period="page.perioddesc[index-1]"\n                                        :layer="layeridx"\n                                        :class="\'t-studyline \' + ((lineindex%2==0)?\' odd \':\' even \')\n                                                + ((lineindex==0 && layernr==1)?\' first \':\' \')\n                                                + ((lineindex==page.studylines.length-1)?\' last \':\' \')\n                                                + ((layernr == countLineLayers(line))?\' lastlyr \':\' \')\n                                                + ((layernr == countLineLayers(line)+1)?\' newlyr \':\' \')"\n                                    ></t-studyline-slot\n                                    ><t-studyline-slot\n                                        type=\'filter\'\n                                        v-if="showslot(line, index, layeridx, \'filter\')"\n                                        v-model="line.slots[index].filters"\n                                        :key="\'f-\'+lineindex+\'-\'+index+\'-\'+layernr"\n                                        :slotindex="index"\n                                        :line="line"\n                                        :plan="value"\n                                        :page="page"\n                                        :layer="layeridx"\n                                        :class="\'t-studyline \' + ((lineindex%2==0)?\' odd \':\' even \')\n                                                + ((lineindex==0 && layernr==1)?\' first \':\'\')\n                                                + ((lineindex==page.studylines.length-1)?\' last \':\' \')\n                                                + ((index==page.periods)?\' rightmost\':\'\')\n                                                + ((layernr == countLineLayers(line))?\' lastlyr \':\' \')\n                                                + ((layernr == countLineLayers(line)+1)?\' newlyr \':\' \')"\n                                        >\n                                    </t-studyline-slot\n                                ></template\n                            ></template\n                        ></template\n                        ></div>\n                    </div>\n                </div>\n                <div v-if="edit.studyline.editmode" class=\'t-studyline-add\'>\n                    <a href="#" v-b-modal="\'modal-add-studyline-\'+page.id" @click="false;"\n                        ><i class=\'fa fa-plus\'></i>{{ text.studyline_add }}</a>\n                </div>\n                <b-modal\n                    :id="\'modal-add-studyline-\'+page.id"\n                    size="lg"\n                    :ok-title="text.add$core"\n                    ok-variant="primary"\n                    :title="text.studyline_add"\n                    @ok="addStudyLine(page,create.studyline)"\n                    :ok-disabled="Math.min(create.studyline.name.length,create.studyline.shortname.length) == 0"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols="3">{{text.studyline_name}}</b-col>\n                            <b-col>\n                                <b-form-input v-model="create.studyline.name" :placeholder="text.studyline_name_ph"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="3">{{text.studyline_shortname}}</b-col>\n                            <b-col>\n                            <b-form-input\n                                v-model="create.studyline.shortname"\n                                :placeholder="text.studyline_shortname_ph"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="3">{{text.studyline_color}}</b-col>\n                            <b-col>\n                                <input type="color" v-model="create.studyline.color" />\n                                \x3c!-- hsluv-picker v-model="create.studyline.color" horizontal displaysize="175" ></hsluv-picker --\x3e\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n                <b-modal\n                    :id="\'modal-edit-studyline-\'+value.id"\n                    size="lg"\n                    ok-variant="primary"\n                    :title="text.studyline_edit"\n                    @ok="editLineFinish()"\n                    :ok-disabled="Math.min(edit.studyline.data.name.length,edit.studyline.data.shortname.length) == 0"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols="3">{{ text.studyline_name}}</b-col>\n                            <b-col>\n                                <b-form-input\n                                    v-model="edit.studyline.data.name"\n                                    :placeholder="text.studyline_name_ph"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="3">{{ text.studyline_shortname}}</b-col>\n                            <b-col>\n                            <b-form-input\n                                v-model="edit.studyline.data.shortname"\n                                :placeholder="text.studyline_shortname_ph"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols="3">{{ text.studyline_color}}</b-col>\n                            <b-col>\n                                <input type="color" v-model="edit.studyline.data.color" />\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            '}),Vue.component("t-studyline-heading",{props:{value:{type:Object,default:function(){return{}}},layers:{type:Number,default:1}},data:function(){return{layerHeights:{}}},created:function(){ItemEventBus.$on("lineHeightChange",this.onLineHeightChange)},computed:{},methods:{onLineHeightChange:function(lineid,layerid,newheight){if(this.$refs.main&&lineid==this.value.id){var items=document.querySelectorAll(".t-studyline-slot-0[data-studyline='".concat(this.value.id,"']")),heightSum=0;items.forEach((function(el){var height=el.getBoundingClientRect().height;heightSum+=height}));var heightStyle="".concat(heightSum,"px");this.$refs.main.style.height=heightStyle}}},template:'\n            <div class="t-studyline t-studyline-heading "\n                :data-studyline="value.id" ref="main"\n                ><div class="t-studyline-handle" :style="\'background-color: \' + value.color"></div>\n                <div class="t-studyline-title">\n                    <abbr v-b-tooltip.hover.right :title="value.name">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            '}),Vue.component("t-studyline-edit",{props:{value:{type:Object,default:function(){return{}}}},data:function(){return{}},computed:{deletable:function(){var slots=this.value.slots;if(Array.isArray(slots)){for(var count=0,i=0;i<slots.length;i++)Array.isArray(slots[i].courses)&&(count+=slots[i].courses.length),Array.isArray(slots[i].filters)&&(count+=slots[i].filters.length);return 0==count}return!1},editable:function(){return!0}},methods:{onEdit:function(){this.$emit("edit",this.value)},onDelete:function(){this.$emit("delete",this.value)}},template:"\n            <div :class=\"'t-studyline '\" >\n                <div class=\"t-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"t-studyline-title\">\n                    <div>\n                        <i class='fa fa-arrows text-primary'></i>\n                        <abbr v-b-tooltip.hover :title=\"value.name\">{{ value.shortname }}</abbr>\n                    </div>\n                </div>\n                <div class='t-studyline-editmode-content'>\n                    <slot></slot>\n                </div>\n                <div class='controlbox'>\n                    <template v-if='editable || deletable'>\n                    <span class='control editable' v-if='editable'>\n                        <a href='#' @click='onEdit'><i class='fa fa-pencil'></i></a>\n                    </span>\n                    <span class='control deletable' v-if='deletable'>\n                        <a v-if='deletable' href='#' @click='onDelete'><i class='text-danger fa fa-trash'></i></a>\n                    </span>\n                    </template>\n                </div>\n            </div>\n            "}),Vue.component("t-studyline-slot",{props:{type:{type:String,default:"gradable"},slotindex:{type:Number,default:""},line:{type:Object,default:function(){return null}},layer:{type:Number},value:{type:Array,default:function(){return[]}},plan:{type:Object,default:function(){return null}},page:{type:Object,default:function(){return null}},period:{type:Object,default:function(){return null}}},mounted:function(){var self=this;"gradable"==self.type&&1==self.slotindex&&(self.resizeListener=new ResizeObserver((function(){if(self.$refs.main){var size=self.$refs.main.getBoundingClientRect();ItemEventBus.$emit("lineHeightChange",self.line.id,self.layer,size.height)}})).observe(self.$refs.main))},unmounted:function(){this.resizeListener&&this.resizeListener.disconnect()},computed:{slotkey:function(){return"".concat(this.type,"'-'").concat(this.line.id,"-").concat(this.slotindex,"-").concat(this.layer)},itemidx:function(){for(var ix in this.value){if(this.value[ix].layer==this.layer)return ix}return null},item:function(){for(var ix in this.value){var itm=this.value[ix];if(itm.layer==this.layer)return itm}return null},listtype:function(){return this.type},dragacceptlist:function(){return"gradable"==this.type?["course","gradable-item"]:["filter","filter-item"]},courseHoverDummy:function(){return{course:this.hover.component}},current:function(){if(this.period&&this.period.startdate&&this.period.enddate){var now=new Date,pstart=new Date(this.period.startdate),pend=new Date(this.period.enddate);return now>=pstart&&now<pend}return!1},spanCss:function(){if(this.item&&this.item.span>1){var span=2*this.item.span-1;return"width: 100%; grid-column: span ".concat(span,";")}return""}},data:function(){return{text:strings.course_timing,resizeListener:null,hover:{component:null,type:null},datechanger:{coursespan:null,periodspan:null,default:!1,defaultchoice:!1,hidewarn:!1}}},methods:{onDrop:function(event){var _this3=this;this.hover.component=null,this.hover.type=null,debug.info(event);var self=this;if(event.type.item){var item=event.data;item.layer=this.layer,item.slot=this.slotindex,self.value.push(item),self.$emit("input",self.value),self.relocateStudyItem(item).done((function(){_this3.$refs.timingChecker&&_this3.$refs.timingChecker.validate_course_period()}))}else event.type.component&&(debug.info("Adding new component"),"gradable"==event.type.type?(0,_ajax.call)([{methodname:"local_treestudyplan_add_studyitem",args:{line_id:self.line.id,slot:self.slotindex,layer:self.layer,type:"course",details:{competency_id:null,conditions:"",course_id:event.data.id,badge_id:null,continuation_id:null}}}])[0].done((function(response){var item=response;self.relocateStudyItem(item).done((function(){self.value.push(item),self.$emit("input",self.value),_this3.$nextTick((function(){_this3.$refs.timingChecker&&_this3.$refs.timingChecker.validate_course_period()}))}))})).fail(_notification.default.exception):"filter"==event.type.type&&(debug.info("Adding new filter compenent"),(0,_ajax.call)([{methodname:"local_treestudyplan_add_studyitem",args:{line_id:self.line.id,slot:self.slotindex,type:event.data.type,details:{badge_id:event.data.badge?event.data.badge.id:void 0}}}])[0].done((function(response){var item=response;self.relocateStudyItem(item).done((function(){item.layer=_this3.layer,self.value.push(item),self.$emit("input",self.value)}))})).fail(_notification.default.exception)))},onCut:function(event){for(var id=event.data.id,i=0;i<this.value.length;i++)if(this.value[i].id==id){this.value.splice(i,1),i--;break}this.$emit("input",this.value)},relocateStudyItem:function(item){var iteminfo={id:item.id,layer:this.layer,slot:this.slotindex,line_id:this.line.id};return(0,_ajax.call)([{methodname:"local_treestudyplan_reorder_studyitems",args:{items:[iteminfo]}}])[0].fail(_notification.default.exception)},onDragEnter:function(event){this.hover.component=event.data,this.hover.type=event.type},onDragLeave:function(){this.hover.component=null,this.hover.type=null},maxSpan:function(){for(var freeIndex=this.slotindex,i=this.slotindex+1;i<=this.page.periods&&(this.line.slots&&this.line.slots[i]&&this.line.slots[i].courses);i++){var clist=this.line.slots[i].courses,flist=this.line.slots[i-1].filters,busy=!1;for(var ix in clist)if(clist[ix].layer==this.layer){busy=!0;break}for(var _ix2 in flist)if(flist[_ix2].layer==this.layer){busy=!0;break}if(busy)break;freeIndex=i}return freeIndex-this.slotindex+1},makeType:function(item){return{item:!0,component:!1,span:item.span,type:this.type}},checkType:function(type){return type.type==this.type&&("filter"==type||type.span<=this.maxSpan())}},template:'\n            <div :class="\'t-studyline-slot \'+type + \' t-studyline-slot-\'+slotindex + \' \' + ((slotindex==0)?\' t-studyline-firstcolumn \':\' \')\n                         + (current?\'current \':\' \')"\n                :data-studyline="line.id" ref="main"\n                :style=\'spanCss\'\n                ><drag v-if="item"\n\n                    :key="item.id"\n                    class="t-slot-item"\n                    :data="item"\n                    :type="makeType(item)"\n                    @cut="onCut"\n                        ><t-item\n                            @deleted="onCut"\n                            v-model="value[itemidx]"\n                            :plan="plan"\n                            :line=\'line\'\n                            :page=\'page\'\n                            :period=\'period\'\n                            :maxspan=\'maxSpan()\'\n                        ></t-item\n                    ></drag\n                ><drop v-else\n                    :class="\'t-slot-drop \'+type + (layer > 0?\' secondary\':\' primary\')"\n                    :accepts-type="checkType"\n                    @drop="onDrop"\n                    mode="cut"\n                    @dragenter="onDragEnter"\n                    @dragleave="onDragLeave"\n                ><template v-if="hover.component">\n                        <div v-if="hover.type.item"\n                            class="t-slot-item feedback"\n                            :key="hover.component.id"\n                            ><t-item v-model="hover.component" dummy></t-item\n                            ></div\n                        ><div v-else-if="hover.type.type == \'gradable\'"\n                            class="t-slot-item feedback"\n                            :key="\'course-\'+hover.component.id"\n                            ><t-item-course v-model="courseHoverDummy"></t-item-course></div\n                        ><div v-else-if="hover.type.type == \'filter\'"\n                            class="t-slot-item feedback"\n                            key="tooldrop"\n                            ><t-item-junction    v-if="hover.component.type == \'junction\'" ></t-item-junction\n                            ><t-item-start       v-else-if="hover.component.type == \'start\'"    ></t-item-start\n                            ><t-item-finish      v-else-if="hover.component.type == \'finish\'"   ></t-item-finish\n                            ><t-item-badge       v-else-if="hover.component.type == \'badge\'"    ></t-item-badge\n                        ></div\n                        ><div v-else\n                            class="t-slot-item feedback"\n                            :key="hover.type">--{{ hover.type }}--</div\n                    ></template\n                ></drop>\n                <t-item-timing-checker hidden\n                    v-if="value && value[itemidx] && value[itemidx].course"\n                    ref="timingChecker"\n                    :maxspan="maxSpan()"\n                    :page="page"\n                    :period="period"\n                    v-model="value[itemidx]"\n                    ></t-item-timing-checker>\n            </div>\n            '}),Vue.component("t-item-timing-checker",{props:{value:{type:Object},page:{type:Object},period:{type:Object},maxspan:{type:Number},hidden:{type:Boolean,default:!1}},computed:{endperiod:function(){var endperiodnr=Math.min(this.page.periods,this.period.period+(this.value.span-1));return this.page.perioddesc[endperiodnr-1]},course_period_matches:function(){return this.value&&"course"==this.value.type?(this.datechanger.coursespan=(0,_dateHelper.datespaninfo)(this.value.course.startdate,this.value.course.enddate),this.datechanger.periodspan=(0,_dateHelper.datespaninfo)(this.period.startdate,this.endperiod.enddate),this.datechanger.coursespan.first.getTime()==this.datechanger.periodspan.first.getTime()&&this.datechanger.coursespan.last.getTime()==this.datechanger.periodspan.last.getTime()):(debug.warn("Timing thing not proper configured",this.value,this.period,this.maxspan),!1)}},data:function(){return{id:Math.floor(Math.random()*Date.now()).toString(16),text:strings.course_timing,datechanger:{coursespan:null,periodspan:null,globals:datechanger_globals}}},methods:{validate_course_period:function(force){debug.info("Validating course and period"),this.course_period_matches?debug.info("Course timing matches period",this.datechanger):(debug.info("Course timing does not match period timing"),this.value.course.canupdatecourse?this.hidden&&this.datechanger.globals.default?this.datechanger.globals.defaultvalue&&this.change_course_period():this.$bvModal.show("t-course-timing-matching-"+this.id):this.hidden&&this.datechanger.globals.hidewarn||this.$bvModal.show("t-course-timing-warning-"+this.id))},change_course_period:function(){var self=this;return self.datechanger.globals.default&&(self.datechanger.globals.defaultvalue=!0),(0,_ajax.call)([{methodname:"local_treestudyplan_course_period_timing",args:{period_id:self.period.id,course_id:this.value.course.id,span:this.value.span}}])[0].fail(_notification.default.exception).done((function(response){self.value.course.startdate=response.startdate,self.value.course.enddate=response.enddate,self.value.course.timing=response.timing,self.$emit("input",self.value)}))},change_span:function(span){var self=this;return(0,_ajax.call)([{methodname:"local_treestudyplan_set_studyitem_span",args:{id:self.value.id,span:span}}])[0].fail(_notification.default.exception).done((function(response){self.value.span=response.span,self.$emit("input",self.value),self.$nextTick((function(){self.validate_course_period()}))}))},format_duration:function(dsi){var s="";return 1==dsi.years?s+="1 ".concat(this.text.year,", "):dsi.years>1&&(s+="".concat(dsi.years," ").concat(this.text.years,", ")),1==dsi.weeks?s+="1 ".concat(this.text.week,", "):dsi.weeks>1&&(s+="".concat(dsi.weeks," ").concat(this.text.weeks,", ")),1==dsi.days?s+="1 ".concat(this.text.day,", "):dsi.days>1&&(s+="".concat(dsi.days," ").concat(this.text.days,", ")),s.toLocaleLowerCase()}},template:'\n            <div :class="\'t-item-timing-checker\'" :style="hidden?\'display: none \':\'\'">\n                <template v-if="!hidden" >\n                    <span class="mr-1" v-if="course_period_matches">\n                        <i  class="text-success fa fa-calendar-check-o"\n                            v-b-tooltip.hover.topright :title="text.timing_ok"\n                        ></i>\n                    </span>\n                    <span class="mr-1" v-else>\n                        <a  href=\'#\' @click="validate_course_period()" class="text-warning"\n                            v-b-tooltip.hover.bottomleft :title="text.timing_off"\n                            ><i class="fa fa-calendar-times-o"\n                            ></i\n                            ><i class="fa fa-question-circle text-black-50"\n                                style="font-size: 0.8em; top: -0.3em; position: relative;"\n\n                            ></i\n                        ></a>\n                    </span>\n                    <span class="ml-1" v-b-tooltip.hover.bottomleft :title="text.periodspan_desc"\n                        >{{ text.periodspan\n                        }}&nbsp;<b-form-select\n                            class=""\n                            size="sm" @change="change_span" v-model="value.span">\n                            <b-form-select-option v-for="(n,i) in maxspan" :value=\'n\' :key=\'i\'\n                            >{{ n }}</b-form-select-option>\n                        </b-form-select\n                        >&nbsp;{{\n                            (value.span == 1)?text.period.toLowerCase():text.periods.toLowerCase()\n                        }}<i\n                            class="fa fa-question-circle text-black-50"\n                            style="font-size: 0.8em; top: -0.3em; position: relative;"\n                            ></i>\n                    </span>\n                </template>\n                <b-modal\n                    :id="\'t-course-timing-matching-\'+this.id"\n                    size="lg"\n                    :title="text.title"\n                    @ok="change_course_period"\n                    :ok-title="text.yes"\n                    ok-variant="danger"\n                    :cancel-title="text.no"\n                    cancel-variant="primary"\n                    >\n                    <b-container v-if="datechanger.coursespan && datechanger.periodspan && value && value.course">\n                        <b-row><b-col cols="12">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols="12"><div class="generalbox alert alert-warning">{{ text.question }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols="6">\n                                <h3> {{ text.course }} </h3>\n                                <p class="mb-0"><b>{{ value.course.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ value.course.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols="6">\n                                <h3> {{ text.period }} </h3>\n                                <p class="mb-0"><b>{{ period.fullname }}</b><b v-if="value.span > 1"> - {{ endperiod.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ period.shortname }}</b><b v-if="value.span > 1"> - {{ endperiod.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if=\'hidden\' class="pt-2"><b-col cols="12">\n                            <b-form-checkbox type="checkbox" v-model="datechanger.globals.default">{{ text.rememberchoice }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n                <b-modal\n                    :id="\'t-course-timing-warning-\'+this.id"\n                    size="lg"\n                    ok-variant="primary"\n                    :title="text.title"\n                    :ok-title="text.yes"\n                    ok-only\n                    >\n                    <b-container v-if="datechanger.coursespan && datechanger.periodspan && value && value.course">\n                        <b-row><b-col cols="12">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols="12"><div class="generalbox alert alert-warning">{{ text.warning }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols="6">\n                                <h3> {{ text.course }} </h3>\n                                <p class="mb-0"><b>{{ value.course.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ value.course.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols=>"6">\n                                <h3> {{ text.period }} </h3>\n                                <p class="mb-0"><b>{{ period.fullname }}</b><b v-if="value.span > 1"> - {{ endperiod.fullname }}</b></p>\n                                <p class="mb-1"><b>{{ period.shortname }}</b><b v-if="value.span > 1"> - {{ endperiod.shortname }}</b></p>\n                                <p class="mb-1">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class="mb-0"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if=\'hidden\' class="pt-2"><b-col cols="12">\n                            <b-form-checkbox type="checkbox" v-model="datechanger.globals.hidewarn">{{ text.hidewarning }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            '}),Vue.component("t-item",{props:{value:{type:Object,default:function(){return null}},dummy:{type:Boolean,default:function(){return!1}},plan:{type:Object,default:function(){return null}},line:{type:Object,default:function(){return null}},page:{type:Object,default:function(){return null}},period:{type:Object,default:function(){return null}},maxspan:{type:Number,default:function(){return 0}}},data:function(){return{dragLine:null,dragEventListener:null,deleteMode:!1,condition_options:string_keys.conditions,text:strings.item_text,showContext:!1,lines:[]}},methods:{dragStart:function(event){this.deleteMode=!1;var start=document.getElementById("studyitem-"+this.value.id),dragelement=document.getElementById("t-item-cdrag-"+this.value.id);dragelement.style.position="fixed",dragelement.style.left=event.position.x+"px",dragelement.style.top=event.position.y+"px",this.dragLine=new _simpleline.SimpleLine(start,dragelement,{color:"#777",gravity:{start:1.3,end:1.3}}),document.addEventListener("mousemove",this.onMouseMove)},dragEnd:function(){null!==this.dragLine&&this.dragLine.remove();var dragelement=document.getElementById("t-item-cdrag-"+this.value.id);dragelement.style.removeProperty("left"),dragelement.style.removeProperty("top"),dragelement.style.removeProperty("position"),document.removeEventListener("mousemove",this.onMouseMove)},onMouseMove:function(event){var dragelement=document.getElementById("t-item-cdrag-"+this.value.id);dragelement.style.position="fixed",dragelement.style.left=event.clientX+"px",dragelement.style.top=event.clientY+"px"},onDrop:function(event){var _this4=this,from_id=event.data.id,to_id=this.value.id;this.redrawLines(),(0,_ajax.call)([{methodname:"local_treestudyplan_connect_studyitems",args:{from_id:from_id,to_id:to_id}}])[0].done((function(response){var conn={id:response.id,from_id:response.from_id,to_id:response.to_id};ItemEventBus.$emit("createdConnection",conn),_this4.value.connections.in.push(conn)})).fail(_notification.default.exception)},redrawLine:function(conn){var start=document.getElementById("studyitem-".concat(conn.from_id)),end=document.getElementById("studyitem-".concat(conn.to_id));this.lines[conn.to_id]&&(this.lines[conn.to_id].remove(),delete this.lines[conn.to_id]),null!==start&&null!==end&&isVisible(start)&&isVisible(end)&&(this.lines[conn.to_id]=new _simpleline.SimpleLine(start,end,{color:"var(--success)",gravity:{start:1.3,end:1.3}}))},deleteLine:function(conn){var _this5=this,self=this;(0,_ajax.call)([{methodname:"local_treestudyplan_disconnect_studyitems",args:{from_id:conn.from_id,to_id:conn.to_id}}])[0].done((function(response){if(response.success){_this5.removeLine(conn),ItemEventBus.$emit("connectionDisconnected",conn);var index=self.value.connections.out.indexOf(conn);self.value.connections.out.splice(index,1)}})).fail(_notification.default.exception)},highlight:function(conn){this.lines[conn.to_id]&&this.lines[conn.to_id].setConfig({color:"var(--danger)"})},normalize:function(conn){this.lines[conn.to_id]&&this.lines[conn.to_id].setConfig({color:"var(--success)"})},updateItem:function(){(0,_ajax.call)([{methodname:"local_treestudyplan_edit_studyitem",args:{id:this.value.id,conditions:this.value.conditions,continuation_id:this.value.continuation_id}}])[0].fail(_notification.default.exception)},doShowContext:function(event){this.hasContext&&(this.showContext=!0,event.preventDefault())},redrawLines:function(){if(this.value.connections&&this.value.connections.out)for(var i in this.value.connections.out){var conn=this.value.connections.out[i];this.redrawLine(conn)}},onCreatedConnection:function(conn){conn.from_id==this.value.id&&(this.value.connections.out.push(conn),this.redrawLine(conn))},onRemovedConnection:function(conn){if(this.value.connections&&this.value.connections.out)for(var i in this.value.connections.in){var c_in=this.value.connections.in[i];conn.id==c_in.id&&self.value.connections.out.splice(i,1)}},onRePositioned:function(){if(this.value.connections&&this.value.connections.out)for(var i in this.value.connections.out){var conn=this.value.connections.out[i];this.redrawLine(conn)}},onDisPositioned:function(re_id){if(this.value.connections&&this.value.connections.out)for(var i in this.value.connections.out){var conn=this.value.connections.out[i];conn.to_id==re_id&&this.removeLine(conn)}},onItemDeleted:function(item_id){if(this.value.connections&&this.value.connections.out)for(var i in this.value.connections.out){var conn=this.value.connections.out[i];conn.to_id==item_id&&(this.removeLine(conn),this.value.connections.out.splice(i,1))}if(this.value.connections&&this.value.connections.in)for(var _i in this.value.connections.in){this.value.connections.in[_i].from_id==item_id&&this.value.connections.out.splice(_i,1)}},onRedrawLines:function(){this.redrawLines()},removeLine:function(conn){this.lines[conn.to_id]&&(this.lines[conn.to_id].remove(),delete this.lines[conn.to_id])},deleteItem:function(){var self=this,msgparams={item:this.text["type_"+this.value.type].toLocaleLowerCase(),name:"course"==this.value.type?this.value.course.displayname:"",line:this.line?this.line.name:"",period:this.period?this.period.fullname:this.plan.name};this.$bvModal.msgBoxConfirm((0,_stringHelper.strformat)(this.text.item_delete_message,msgparams),{okVariant:"danger",okTitle:this.text.ok,cancelTitle:this.text.cancel}).then((function(value){value&&(0,_ajax.call)([{methodname:"local_treestudyplan_delete_studyitem",args:{id:self.value.id}}])[0].done((function(response){1==response.success&&self.$emit("deleted",{data:self.value})})).fail(_notification.default.exception)})).catch((function(err){debug.console.error(err)}))}},computed:{hasConnectionsOut:function(){return!["finish"].includes(this.value.type)},hasConnectionsIn:function(){return!["start"].includes(this.value.type)},hasContext:function(){return["start","junction","finish"].includes(this.value.type)}},created:function(){this.dummy||(ItemEventBus.$on("createdConnection",this.onCreatedConnection),ItemEventBus.$on("removedConnection",this.onRemovedConnection),ItemEventBus.$on("rePositioned",this.onRePositioned),ItemEventBus.$on("disPositioned",this.onDisPositioned),ItemEventBus.$on("itemDeleted",this.onItemDeleted),ItemEventBus.$on("redrawLines",this.onRedrawLines))},mounted:function(){var _this6=this;this.dummy||(this.redrawLines(),setTimeout((function(){ItemEventBus.$emit("rePositioned",_this6.value.id)}),10))},beforeDestroy:function(){if(!this.dummy){for(var i in this.value.connections.out){var conn=this.value.connections.out[i];this.removeLine(conn)}ItemEventBus.$emit("disPositioned",this.value.id),ItemEventBus.$off("createdConnection",this.onCreatedConnection),ItemEventBus.$off("removedConnection",this.onRemovedConnection),ItemEventBus.$off("rePositioned",this.onRePositioned),ItemEventBus.$off("disPositioned",this.onDisPositioned),ItemEventBus.$off("itemDeleted",this.onItemDeleted),ItemEventBus.$off("redrawLines",this.onRedrawLines)}},beforeUpdate:function(){},updated:function(){this.dummy||this.redrawLines()},template:'\n            <div class="t-item-base" :id="\'studyitem-\'+value.id">\n                <t-item-course\n                    v-if="value.type == \'course\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                    :plan=\'plan\'\n                    :page=\'page\'\n                    :period=\'period\'\n                    :maxspan=\'maxspan\'\n                ></t-item-course>\n                <t-item-junction\n                    v-if="value.type == \'junction\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-junction>\n                <t-item-start\n                    v-if="value.type == \'start\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-start>\n                <t-item-finish\n                    v-if="value.type == \'finish\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-finish>\n                <t-item-badge\n                    v-if="value.type == \'badge\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-badge>\n                <t-item-invalid\n                    v-if="value.type == \'invalid\'"\n                    @deleterq="deleteItem"\n                    v-model="value"\n                ></t-item-invalid>\n                <drop v-if=\'!dummy && hasConnectionsIn\' accepts-type="linestart"\n                    :id="\'t-item-cend-\'+value.id"\n                    class="t-item-connector-end"\n                    mode="copy"\n                    @drop="onDrop"\n                    ><svg width=\'5px\' height=\'10px\'><rect ry="1px" rx="1px" y="0px" x="0px" height="10px" width="5px"/></svg></drop>\n                <drag v-if=\'!dummy && hasConnectionsOut\' type="linestart"\n                    :id="\'t-item-cstart-\'+value.id"\n                    :class="\'t-item-connector-start \' + ((deleteMode&&value.connections.out.length)?\'deleteMode\':\'\')"\n                    :data="value"\n                    @dragstart="dragStart"\n                    @dragend="dragEnd"\n                    @click="deleteMode = (value.connections.out.length)?(!deleteMode):false"\n                    >\n                    <svg  width=\'5px\' height=\'10px\'><rect ry="1px" rx="1px" y="0px" x="0px" height="10px" width="5px"/></svg>\n                    <template v-slot:drag-image="{data}"> <i :id="\'t-item-cdrag-\'+value.id" class="fa"></i>\n                    </template>\n                </drag>\n                <div class="deletebox" v-if="deleteMode && value.connections.out.length > 0"\n                    >\n                    <a v-for="conn in value.connections.out"\n                        @click="deleteLine(conn)"\n                        @mouseenter="highlight(conn)"\n                        @mouseleave="normalize(conn)"\n                        class="t-connection-delete text-danger"\n                        :title="conn.id">\n                        <i class="fa fa-trash"></i>\n                    </a>\n                </div>\n                <a  v-if="hasContext" class="t-item-config"\n                    v-b-modal="\'t-item-config-\'+value.id" href="#" @click.prevent=""><i  class="fa fa-gear"></i></a>\n                <b-modal no-body class=""\n                    :id="\'t-item-config-\'+value.id"\n                    :title="text[\'item_configuration\']"\n                    scrollable\n                    ok-only\n                    class="t-item-contextview b-modal-justify-footer-between"\n                >\n                    <b-form-group\n                        v-if="value.type != \'start\'"\n                        :label="text.select_conditions"\n                    >\n                        <b-form-select size="sm"\n                            @input="updateItem"\n                            v-model="value.conditions"\n                            :options="condition_options"\n                        ></b-form-select>\n                    </b-form-group>\n\n                   <template #modal-footer="{ ok, cancel, hide }" >\n                    <a href=\'#\' @click=\'deleteItem()\' class="text-danger"\n                        ><i class="fa fa-trash"></i>\n                        {{ text.delete }}\n                    </a>\n                    <b-button size="sm" variant="primary" @click="ok()">\n                      {{ text.ok }}\n                    </b-button>\n                  </template>\n\n                </b-modal>\n            </div>\n            '}),Vue.component("t-item-invalid",{props:{value:{type:Object,default:function(){return null}}},data:function(){return{text:strings.invalid}},methods:{},template:'\n            <div class="t-item-invalid">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md="1">\n                        <span class="t-timing-indicator timing-invalid"></span>\n                    </b-col>\n                    <b-col md="11">\n                        <b-card-body class="align-items-center">\n                            <i class="fa fa-exclamation"></i> {{text.error}}\n                            <a href=\'#\' @click=\'$emit("deleterq")\' class="text-danger"\n                            ><i class="fa fa-trash"></i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            '}),Vue.component("t-item-course",{props:{value:{type:Object,default:function(){return null}},plan:{type:Object,default:function(){return null}},page:{type:Object,default:function(){return null}},period:{type:Object,default:function(){return null}},maxspan:{type:Number,default:function(){return 0}}},data:function(){return{condition_options:string_keys.conditions,text:strings.item_course_text}},computed:{useItemConditions:function(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useItemConditions)&&this.plan.aggregation_info.useItemConditions},configurationState:function(){return this.hasGrades()||this.hasCompletions()?"t-configured-ok":"t-configured-alert"},configurationIcon:function(){return this.hasGrades()||this.hasCompletions()?"check":"exclamation-circle"},startdate:function(){return(0,_dateHelper.format_date)(this.value.course.startdate)},enddate:function(){return this.value.course.enddate?(0,_dateHelper.format_date)(this.value.course.enddate):this.text.noenddate}},methods:{hasGrades:function(){if(this.value.course.grades&&this.value.course.grades.length>0){var _step,_iterator=_createForOfIteratorHelper(this.value.course.grades);try{for(_iterator.s();!(_step=_iterator.n()).done;){if(_step.value.selected)return!0}}catch(err){_iterator.e(err)}finally{_iterator.f()}}return!1},hasCompletions:function(){if(this.value.course.completion&&this.value.course.completion.conditions){var _step2,_iterator2=_createForOfIteratorHelper(this.value.course.completion.conditions);try{for(_iterator2.s();!(_step2=_iterator2.n()).done;){var cgroup=_step2.value;if(cgroup.items&&cgroup.items.length>0)return!0}}catch(err){_iterator2.e(err)}finally{_iterator2.f()}}return!1},includeChanged:function(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:newValue,required:g.required}}])[0].fail(_notification.default.exception)},requiredChanged:function(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:g.selected,required:newValue}}])[0].fail(_notification.default.exception)},updateConditions:function(){(0,_ajax.call)([{methodname:"local_treestudyplan_edit_studyitem",args:{id:this.value.id,conditions:this.value.conditions}}])[0].fail(_notification.default.exception)}},created:function(){},template:'\n            <div class="t-item-course">\n            <b-card no-body >\n                <div class=\'d-flex flex-wrap mr-0 ml-0\'>\n                    <div>\n                        <span\n                            :title="text[\'coursetiming_\'+value.course.timing]"\n                            v-b-popover.hover.top="startdate+\' - \'+enddate"\n                            :class="\'t-timing-indicator timing-\'+value.course.timing"></span>\n                    </div>\n                    <div class="flex-fill align-items-center">\n                        <b-card-body >\n                            <a  class="t-item-course-config"\n                                v-b-modal="\'t-item-course-config-\'+value.id"\n                                href="#" @click.prevent=""\n                                ><i :class="\'fa fa-\'+configurationIcon+\' \' + configurationState"></i></a>\n                            <a  v-b-modal="\'t-item-course-config-\'+value.id"\n                                :id="\'t-item-course-details-\'+value.id"\n                                :href="\'/course/view.php?id=\'+value.course.id"\n                                @click.prevent.stop="">{{ value.course.displayname }}</a>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal class=""\n                    :id="\'t-item-course-config-\'+value.id"\n                    :title="value.course.displayname + \' - \' + value.course.fullname"\n                    ok-only\n                    size="lg"\n                    scrollable\n                    class="b-modal-justify-footer-between"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href="\'/course/view.php?id=\'+value.course.id" target="_blank"\n                                ><i class="fa fa-graduation-cap"></i> {{ value.course.fullname }}</a>\n                                <a v-if=\'!!value.course.completion\'\n                                    :href="\'/course/completion.php?id=\'+value.course.id"  target="_blank"\n                                :title="text.configure_completion"><i class="fa fa-gear"></i></a>\n                                </h1>\n                            {{ value.course.context.path.join(" / ")}} / {{value.course.shortname}}\n                        </div>\n                        <div class="r-course-detail-header-right">\n                            <div :class="\'r-timing-\'+value.course.timing">\n                                {{text[\'coursetiming_\'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                            <t-item-timing-checker\n                                class="mt-1"\n                                :maxspan="maxspan"\n                                :page="page"\n                                :period="period"\n                                v-model="value"\n                             ></t-item-timing-checker>\n                        </div>\n                    </template>\n\n                    <t-item-course-grades\n                        v-if=\'!!value.course.grades && value.course.grades.length > 0\'\n                        v-model=\'value\' :plan="plan"\n                        ></t-item-course-grades>\n                    <t-item-course-completion\n                        v-if=\'!!value.course.completion\'\n                        v-model=\'value.course.completion\'\n                        :course=\'value.course\'\n                        ></t-item-course-completion>\n\n                    <template #modal-footer="{ ok, cancel, hide }" >\n                        <a href=\'#\' @click=\'$emit("deleterq")\' class="text-danger"\n                            ><i class="fa fa-trash"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size="sm" variant="primary" @click="ok()">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n            </b-card></div>\n            '}),Vue.component("t-item-course-grades",{props:{value:{type:Object,default:function(){return null}},plan:{type:Object,default:function(){return null}}},data:function(){return{condition_options:string_keys.conditions,text:strings.item_course_text}},computed:{useRequiredGrades:function(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useRequiredGrades)&&this.plan.aggregation_info.useRequiredGrades},selectedgrades:function(){var list=[];for(var ix in this.value.course.grades){var g=this.value.course.grades[ix];g.selected&&list.push(g)}return list}},methods:{includeChanged:function(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:newValue,required:g.required}}])[0].fail(_notification.default.exception)},requiredChanged:function(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:g.selected,required:newValue}}])[0].fail(_notification.default.exception)}},created:function(){},template:'\n            <div>\n                <b-form-group\n                    :label="text.select_grades"\n                    ><ul class="t-item-module-children">\n                        <li class="t-item-course-gradeinfo">\n                            <span class=\'t-item-course-chk-lbl\'>{{text.grade_include}}</span\n                            ><span v-if="useRequiredGrades"  class=\'t-item-course-chk-lbl\'>{{text.grade_require}}</span>\n                        </li>\n                        <li class="t-item-course-gradeinfo" v-for="g in value.course.grades">\n                            <b-form-checkbox inline\n                                @change="includeChanged($event,g)" v-model="g.selected"\n                                ></b-form-checkbox>\n                            <b-form-checkbox v-if="useRequiredGrades" inline :disabled="!g.selected"\n                                @change="requiredChanged($event,g)" v-model="g.required"\n                                ></b-form-checkbox>\n                            <span :title="g.typename" v-html="g.icon"></span>\n                            <s-edit-mod\n                                :title="value.course.fullname"\n                                @saved="(fd) => g.name = fd.get(\'name\')"\n                                v-if="g.cmid > 0"\n                                :cmid="g.cmid"\n                                :coursectxid="value.course.ctxid"\n                                genericonly><span v-html="g.name"></span></s-edit-mod>\n                        </li>\n                    </ul>\n                </b-form-group>\n            </div>\n            '}),Vue.component("t-item-course-completion",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},course:{type:Object,default:function(){return{}}}},data:function(){return{text:strings.completion}},created:function(){var self=this,stringkeys=[];for(var key in this.text)stringkeys.push({key:key,component:"local_treestudyplan"});(0,_str.get_strings)(stringkeys).then((function(strings){var i=0;for(var _key in self.text)self.text[_key]=strings[i],i++}))},computed:{hasCompletions:function(){if(this.value.conditions){var _step3,_iterator3=_createForOfIteratorHelper(this.value.conditions);try{for(_iterator3.s();!(_step3=_iterator3.n()).done;){var cgroup=_step3.value;if(cgroup.items&&cgroup.items.length>0)return!0}}catch(err){_iterator3.e(err)}finally{_iterator3.f()}}return!1}},methods:{completion_icon:function(completion){switch(completion){case"progress":return"exclamation-circle";case"complete":case"complete-pass":return"check-circle";case"complete-fail":return"times-circle";default:return"circle-o"}},completion_tag:function(cgroup){return cgroup.completion?"completed":"incomplete"}},template:"\n            <table class=\"r-item-course-grade-details\">\n                <tr v-if=\"hasCompletions\">\n                    <td colspan='2'><span v-if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any}}</span></td>\n                </tr>\n                <tr v-else>\n                    <td colspan='2'>{{text.completion_not_configured}}!\n                    <br/><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                    </td>\n                </tr>\n                <template v-for='cgroup in value.conditions'>\n                    <tr>\n                        <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                        ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span>\n                        {{cgroup.title}}</th>\n                    </tr>\n                    <tr v-for='ci in cgroup.items'>\n                        <td><span v-html='ci.details.criteria'></span>\n                        </td>\n                        <td v-if=\"ci.details.requirement\" class=\"font-italic\">\n                            {{ci.details.requirement}}\n                        </td>\n                    </tr>\n                </template>\n            </table>\n            "}),Vue.component("t-item-junction",{props:{value:{type:Object,default:function(){return{}}}},data:function(){return{condition_options:string_keys.conditions}},methods:{},template:"\n            <div class='t-item-junction  t-item-filter'>\n                <i class=\"fa fa-check-circle\"></i>\n            </div>\n            "}),Vue.component("t-item-finish",{props:{value:{type:Object,default:function(){return{}}}},data:function(){return{}},methods:{},template:"\n            <div class='t-item-finish t-item-filter'>\n                <i class=\"fa fa-stop-circle\"></i>\n            </div>\n            "}),Vue.component("t-item-start",{props:{value:{type:Object,default:function(){return{}}}},data:function(){return{}},created:function(){},methods:{},template:"\n            <div class='t-item-start t-item-filter'>\n                <i class=\"fa fa-play-circle\"></i>\n            </div>\n            "}),Vue.component("t-item-badge",{props:{value:{type:Object,default:function(){return{badge:{}}}}},data:function(){return{txt:strings,text:strings.item_text}},methods:{},template:'\n            <div class=\'t-item-badge t-item-filter\' v-b-tooltip.hover :title="value.badge.name">\n                <svg class="t-badge-backdrop " width=\'50px\' height=\'50px\' viewBox="0 0 100 100">\n                    <title>{{value.badge.name}}</title>\n                    <circle cx="50" cy="50" r="46"\n                        style="stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;"/>\n                    <image class="badge-image" clip-path="circle() fill-box"\n                        :href="value.badge.imageurl" x="12" y="12" width="76" height="76"/>\n                </svg>\n                <a class="t-item-config badge"\n                v-b-modal="\'t-item-badge-details-\'+value.id" href="#" @click.prevent=""><i  class="fa fa-gear"></i></a>\n                <b-modal class=""\n                    :id="\'t-item-badge-details-\'+value.id"\n                    :title="value.badge.name"\n                    size="lg"\n                    ok-only\n                    centered\n                    scrollable\n                    class="b-modal-justify-footer-between"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class="fa fa-certificate"></i>\n                                <a :href="value.badge.infolink" target="_blank"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols="3">\n                            <img :src="value.badge.imageurl"/>\n                        </b-col><b-col cols="9">\n                            <p>{{value.badge.description}}</p>\n                            <ul class="list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1"\n                             v-if="value.badge.criteria"><li v-for="crit in value.badge.criteria"\n                             ><span v-html=\'crit\'></span></li></ul>\n                            <p><strong><i class="fa fa-link"></i>\n                                <a :href="value.badge.infolink">{{ txt.badge.badgeinfo }}</a></strong></p>\n                        </b-col></b-row>\n                    </b-container>\n                    <template #modal-footer="{ ok, cancel, hide }" >\n                        <a href=\'#\' @click=\'$emit("deleterq")\' class="text-danger"\n                            ><i class="fa fa-trash"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size="sm" variant="primary" @click="ok()">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n\n            </div>\n            '}),Vue.component("t-coursecat-list",{props:{value:{type:Array,default:function(){return{}}}},data:function(){return{}},methods:{},template:'\n            <ul class="t-coursecat-list">\n                <t-coursecat-list-item\n                    v-for="coursecat,idx in value"\n                    v-model="value[idx]"\n                    :key="coursecat.id"></t-coursecat-list-item>\n            </ul>\n            '}),Vue.component("t-coursecat-list-item",{props:{value:{type:Object,default:function(){return{}}}},data:function(){return{loading:!1}},computed:{showSpinner:function(){return this.canLoadMore()},hasDetails:function(){return this.value.haschildren||this.value.hascourses}},methods:{canLoadMore:function(){return this.value.haschildren&&(!this.value.children||0==this.value.children.length)||this.value.hascourses&&(!this.value.courses||0==this.value.courses.length)},onShowDetails:function(){var self=this;this.canLoadMore()&&(0,_ajax.call)([{methodname:"local_treestudyplan_get_category",args:{id:this.value.id}}])[0].done((function(response){self.$emit("input",response)})).fail(_notification.default.exception)}},template:'\n            <li class="t-coursecat-list-item">\n                <span v-if="hasDetails" v-b-toggle="\'coursecat-\'+value.id">\n                    <i class="when-closed fa fa-caret-right"></i>\n                    <i class="when-open fa fa-caret-down"></i>\n                    <span class="t-coursecat-heading">\n                        <i class="t-coursecat-list-item fa fa-tasks"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <span v-else>\n                    <span class="t-coursecat-heading">\n                        <i class="t-coursecat-list-item fa fa-tasks"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <b-collapse v-if="hasDetails" :id="\'coursecat-\'+value.id"\n                    @show="onShowDetails" :visible="!!(value.children) || !!(value.courses)">\n                    <b-spinner class="ml-4" v-if="showSpinner" small variant="primary"></b-spinner>\n                    <t-coursecat-list v-if="value.children" v-model="value.children"></t-coursecat-list>\n                    <t-course-list v-if="value.courses" v-model="value.courses"></t-course-list>\n                </b-collapse>\n            </li>\n            '}),Vue.component("t-course-list",{props:{value:{type:Array,default:function(){return{}}}},data:function(){return{}},methods:{makeType:function(){return{item:!1,component:!0,span:1,type:"gradable"}}},template:'\n            <ul class="t-course-list">\n                <li class="t-course-list-item" v-for="course in value" :key="course.id">\n                    <drag\n                        class="draggable-course"\n                        :data="course"\n                        :type="makeType()"\n                        @cut=""\n                    >\n                    <i class="t-course-list-item fa fa-book"></i> {{ course.shortname }} - {{ course.fullname }}\n                    </drag>\n                </li>\n            </ul>\n            '})}};return _exports.default=_default2,_exports.default}));
 
 //# sourceMappingURL=studyplan-editor-components.min.js.map
\ No newline at end of file
diff --git a/amd/build/studyplan-editor-components.min.js.map b/amd/build/studyplan-editor-components.min.js.map
index 90ecb66..d26aae4 100644
--- a/amd/build/studyplan-editor-components.min.js.map
+++ b/amd/build/studyplan-editor-components.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"studyplan-editor-components.min.js","sources":["../src/studyplan-editor-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 {call} from 'core/ajax';\nimport notification from 'core/notification';\nimport {get_strings} from 'core/str';\nimport {load_stringkeys, load_strings, strformat } from './util/string-helper';\nimport {format_date, add_days, datespaninfo } from './util/date-helper';\nimport {objCopy,transportItem} from './studyplan-processor';\nimport Debugger from './util/debugger';\nimport {download,upload} from './downloader';\nimport {ProcessStudyplan} from './studyplan-processor';\n\nimport TSComponents from './treestudyplan-components';\nimport mFormComponents from \"./util/mform-helper\";\n\n\nconst STUDYPLAN_EDITOR_FIELDS =\n['name','shortname','description','idnumber','context_id', 'aggregation','aggregation_config'];\nconst STUDYPLAN_EDITOR_PAGE_FIELDS =  //TODO: Add 'fullname', 'shortname' and 'description' when implementing proper page management\n['context_id', 'periods','startdate','enddate'];\nconst PERIOD_EDITOR_FIELDS =\n['fullname','shortname','startdate','enddate'];\n\nconst LINE_GRAVITY = 1.3;\n\nconst datechanger_globals = {\n    default: false,\n    defaultchoice: false,\n    hidewarn: false,\n};\n\nexport default {\n    STUDYPLAN_EDITOR_FIELDS: STUDYPLAN_EDITOR_FIELDS, // make copy available in plugin\n    install(Vue/*,options*/){\n        Vue.use(TSComponents);\n        Vue.use(mFormComponents);\n        let debug = new Debugger(\"treestudyplan-editor\");\n\n        /************************************\n         *                                  *\n         * Treestudyplan Editor components  *\n         *                                  *\n         ************************************/\n\n        /**\n         * Check if element is visible\n         * @param {Object} elem The element to check\n         * @returns {boolean} True if visible\n         */\n        function isVisible(elem){\n            return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );\n        }\n\n\n        // Create new eventbus for interaction between item components\n        const ItemEventBus = new Vue();\n\n        let string_keys = load_stringkeys({\n            conditions: [\n                { value: 'ALL', textkey: 'condition_all'},\n                { value: 'ANY', textkey: 'condition_any'},\n            ],\n        });\n\n        let strings = load_strings({\n            studyplan_text: {\n                studyline_editmode: 'studyline_editmode',\n                toolbox_toggle: 'toolbox_toggle',\n                editmode_modules_hidden:'editmode_modules_hidden',\n                studyline_add: 'studyline_add',\n                add$core: 'add$core',\n                edit$core: 'edit$core',\n                studyline_name: 'studyline_name',\n                studyline_name_ph: 'studyline_name_ph',\n                studyline_shortname: 'studyline_shortname',\n                studyline_shortname_ph: 'studyline_shortname_ph',\n                studyline_color: 'studyline_color',\n                associations: 'associations',\n                associated_cohorts: 'associated_cohorts',\n                associated_users: 'associated_users',\n                studyline_edit: 'studyline_edit',\n                studyplan_name: 'studyplan_name',\n                studyplan_name_ph: 'studyplan_name_ph',\n                studyplan_shortname: 'studyplan_shortname',\n                studyplan_shortname_ph: 'studyplan_shortname_ph',\n                studyplan_description: 'studyplan_description',\n                studyplan_description_ph: 'studyplan_description_ph',\n                studyplan_idnumber: 'studyplan_idnumber',\n                studyplan_idnumber_ph: 'studyplan_idnumber_ph',\n                studyplan_slots: 'studyplan_slots',\n                studyplan_startdate: 'studyplan_startdate',\n                studyplan_enddate: 'studyplan_enddate',\n            },\n            studyplan_advanced: {\n                advanced_tools: 'advanced_tools',\n                confirm_cancel: 'confirm_cancel',\n                confirm_ok: 'confirm_ok',\n                success$core: 'success$core',\n                error$core: 'failed$core',\n                advanced_converted: 'advanced_converted',\n                advanced_skipped: 'advanced_skipped',\n                advanced_failed: 'advanced_failed',\n                advanced_locked: 'advanced_locked',\n                advanced_multiple: 'advanced_multiple',\n                advanced_error: 'advanced_error',\n                advanced_tools_heading: 'advanced_tools_heading',\n                advanced_warning_title: 'advanced_warning_title',\n                advanced_warning: 'advanced_warning',\n                advanced_pick_scale: 'advanced_pick_scale',\n                advanced_course_manipulation_title: 'advanced_course_manipulation_title',\n                advanced_force_scale_title: 'advanced_force_scale_title',\n                advanced_force_scale_desc: 'advanced_force_scale_desc',\n                advanced_force_scale_button: 'advanced_force_scale_button',\n                advanced_disable_autoenddate_title: 'advanced_disable_autoenddate_title',\n                advanced_disable_autoenddate_desc: 'advanced_disable_autoenddate_desc',\n                advanced_disable_autoenddate_button: 'advanced_disable_autoenddate_button',\n                advanced_confirm_header: 'advanced_confirm_header',\n                advanced_force_scale_confirm: 'advanced_force_scale_confirm',\n                advanced_import: 'advanced_import',\n                advanced_export: 'advanced_export',\n                advanced_export_csv: 'advanced_export_csv',\n                advanced_import_from_file: 'advanced_import_from_file',\n                advanced_purge: \"advanced_purge\",\n                advanced_purge_expl: \"advanced_purge_expl\",\n                advanced_cascade_cohortsync_title: \"advanced_cascade_cohortsync_title\",\n                advanced_cascade_cohortsync_desc: \"advanced_cascade_cohortsync_desc\",\n                advanced_cascade_cohortsync: \"advanced_cascade_cohortsync\",\n            },\n            studyplan_edit: {\n                studyplan_edit: 'studyplan_edit',\n                studyplan_name: 'studyplan_name',\n                studyplan_name_ph: 'studyplan_name_ph',\n                studyplan_shortname: 'studyplan_shortname',\n                studyplan_shortname_ph: 'studyplan_shortname_ph',\n                studyplan_description: 'studyplan_description',\n                studyplan_description_ph: 'studyplan_description_ph',\n                studyplan_idnumber: 'studyplan_idnumber',\n                studyplan_idnumber_ph: 'studyplan_idnumber_ph',\n                studyplan_context: 'studyplan_context',\n                studyplan_slots: 'studyplan_slots',\n                studyplan_startdate: 'studyplan_startdate',\n                studyplan_enddate: 'studyplan_enddate',\n                choose_aggregation_style: 'choose_aggregation_style',\n                setting_bistate_thresh_excellent: 'setting_bistate_thresh_excellent',\n                settingdesc_bistate_thresh_excellent: 'settingdesc_bistate_thresh_excellent',\n                setting_bistate_thresh_good: 'setting_bistate_thresh_good',\n                settingdesc_bistate_thresh_good: 'settingdesc_bistate_thresh_good',\n                setting_bistate_thresh_completed: 'setting_bistate_thresh_completed',\n                settingdesc_bistate_thresh_completed: 'settingdesc_bistate_thresh_completed',\n                setting_bistate_support_failed: 'setting_bistate_support_failed',\n                settingdesc_bistate_support_failed: 'settingdesc_bistate_support_failed',\n                setting_bistate_thresh_progress: 'setting_bistate_thresh_progress',\n                settingdesc_bistate_thresh_progress: 'settingdesc_bistate_thresh_progress',\n                setting_bistate_accept_pending_submitted: 'setting_bistate_accept_pending_submitted',\n                settingdesc_bistate_accept_pending_submitted: 'settingdesc_bistate_accept_pending_submitted',\n            },\n            period_edit: {\n                edit: 'period_edit',\n                fullname: 'studyplan_name',\n                shortname: 'studyplan_shortname',\n                startdate: 'studyplan_startdate',\n                enddate: 'studyplan_enddate',\n            },\n            course_timing: {\n                title: 'course_timing_title',\n                desc: 'course_timing_desc',\n                question: 'course_timing_question',\n                warning: 'course_timing_warning',\n                timing_ok: 'course_timing_ok',\n                timing_off: 'course_timing_off',\n                course: 'course@core',\n                period: 'period',\n                yes: 'yes$core',\n                no: 'no$core',\n                duration: 'duration',\n                years: 'years$core',\n                year: 'year$core',\n                weeks: 'weeks$core',\n                week: 'week$core',\n                days: 'days$core',\n                day: 'day$core',\n                rememberchoice: 'course_timing_rememberchoice',\n                hidewarning: 'course_timing_hidewarning',\n                periodspan: 'course_period_span',\n                periods: 'periods',\n                periodspan_desc: 'course_period_span_desc',\n            },\n            studyplan_associate: {\n                associations: 'associations',\n                associated_cohorts: 'associated_cohorts',\n                associated_users: 'associated_users',\n                associate_cohorts: 'associate_cohorts',\n                associate_users: 'associate_users',\n                add_association: 'add_association',\n                delete_association: 'delete_association',\n                associations_empty: 'associations_empty',\n                associations_search: 'associations_search',\n                cohorts: 'cohorts',\n                users: 'users',\n                selected: 'selected',\n                name: 'name',\n                context: 'context',\n            },\n            item_text: {\n                select_conditions: \"select_conditions\",\n                item_configuration: \"item_configuration\",\n                ok: \"ok@core\",\n                delete: \"delete@core\",\n                item_delete_message: \"item_delete_message\",\n                type_course: \"course@core\",\n                type_junction: \"tool-junction\",\n                type_start: \"tool-start\",\n                type_finish: \"tool-finish\",\n                type_badge: \"tool-badge\",\n                type_invalid: \"course-invalid\",\n            },\n            item_course_text: {\n                select_conditions: \"select_conditions\",\n                select_grades: \"select_grades\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                grade_include: \"grade_include\",\n                grade_require: \"grade_require\",\n                ok: \"ok@core\",\n                cancel: \"cancel@core\",\n                delete: \"delete@core\",\n            },\n            invalid: {\n                error: 'error',\n            },\n            completion: {\n                completion_completed: \"completion_completed\",\n                completion_incomplete: \"completion_incomplete\",\n                aggregation_all: \"aggregation_all\",\n                aggregation_any: \"aggregation_any\",\n                aggregation_overall_all: \"aggregation_overall_all\",\n                aggregation_overall_any: \"aggregation_overall_any\",\n                completion_not_configured: \"completion_not_configured\",\n                configure_completion: \"configure_completion\",\n            },\n            badge: {\n                share_badge: \"share_badge\",\n                dateissued: \"dateissued\",\n                dateexpire: \"dateexpire\",\n                badgeinfo: \"badgeinfo\",\n            },\n\n        });\n\n\n        /*\n        * T-STUDYPLAN-ADVANCED\n        */\n        Vue.component('t-studyplan-advanced', {\n            props: {\n                value: {\n                    type: Object,\n                    default(){ return null;},\n                },\n            },\n            data() {\n                return {\n                    force_scales: {\n                        selected_scale: null,\n                        result: [],\n                    },\n                    text: strings.studyplan_advanced,\n                };\n            },\n            created() {\n            },\n            mounted() {\n            },\n            updated() {\n\n            },\n            computed: {\n                scales(){\n                    return [{\n                        id: null,\n                        disabled: true,\n                        name: this.text.advanced_pick_scale,\n                    }].concat(this.value.advanced.force_scales.scales);\n                },\n            },\n            methods: {\n                disable_autoenddate(){\n                    const self=this;\n                    call([{\n                        methodname: 'local_treestudyplan_disable_autoenddate',\n                        args: {\n                            studyplan_id: this.value.id,\n                        }\n                    }])[0].done(function(response){\n                        self.$bvModal.msgBoxConfirm((response.success?self.text.success$core:self.text.error$core)\n                             + \"\\n\" + response.msg);\n                    }).fail(notification.exception);\n                },\n                force_scales_start(){\n                    // set confirmation box\n                    const self=this;\n                    this.$bvModal.msgBoxConfirm(this.text.advanced_force_scale_confirm,{\n                        title: this.text.advanced_force_scale_confirm,\n                        okVariant: 'danger',\n                        okTitle: this.text.confirm_ok,\n                        cancelTitle: this.text.confirm_cancel,\n                    }).then( value => {\n                        if(value == true){\n                            call([{\n                                methodname: 'local_treestudyplan_force_studyplan_scale',\n                                args: {\n                                    studyplan_id: this.value.id,\n                                    scale_id: this.force_scales.selected_scale,\n                                }\n                            }])[0].done(function(response){\n                                self.force_scales.result = response;\n                            }).fail(notification.exception);\n                        }\n                    });\n                },\n                export_plan(format){\n                    const self = this;\n                    if(format == undefined || ![\"json\",\"csv\"].includes(format)){\n                        format = \"json\";\n                    }\n                    call([{\n                            methodname: 'local_treestudyplan_export_plan',\n                            args: {\n                                studyplan_id: this.value.id,\n                                format: format,\n                            },\n                        }])[0].done(function(response){\n\n                            download(self.value.shortname+\".\"+format,response.content,response.format);\n                        }).fail(notification.exception);\n                },\n                import_studylines(){\n                    //const self = this;\n                    upload((filename,content)=>{\n                        call([{\n                            methodname: 'local_treestudyplan_import_studylines',\n                            args: {\n                                studyplan_id:  this.value.id,\n                                content: content,\n                                format: \"application/json\",\n                            },\n                        }])[0].done(function(response){\n                            if(response.success){\n                                location.reload();\n                            } else {\n                                debug.error(\"Import failed: \",response.msg);\n                            }\n\n                        }).fail(notification.exception);\n                    }, \"application/json\");\n                },\n                purge_studyline(){\n                    call([{\n                        methodname: 'local_treestudyplan_delete_studyplan',\n                        args: {\n                            id:  this.value.id,\n                            force: true,\n                        },\n                    }])[0].done(function(response){\n                        if(response.success){\n                            location.reload();\n                        } else {\n                            debug.error(\"Could not delete plan: \",response.msg);\n                        }\n\n                    }).fail(notification.exception);\n                },\n                cascade_cohortsync(){\n                    const self = this;\n                    call([{\n                        methodname: 'local_treestudyplan_cascade_cohortsync',\n                        args: {\n                            studyplan_id:  this.value.id,\n                        },\n                    }])[0].done(function(response){\n                        self.$bvModal.msgBoxOk(response.success?self.text.success$core:self.text.error$core,\n                            { title: self.text.advanced_cascade_cohortsync});\n                    }).fail(notification.exception);\n                },\n                modal_close(){\n                    this.force_scales.result = [];\n                }\n            },\n            template:\n            `\n            <span>\n                <a  v-if=\"value.advanced\"\n                    href='#'\n                    @click.prevent=''\n                    class='text-danger'\n                    v-b-modal=\"'t-studyplan-'+value.id+'-advanced'\"\n                    ><i class='fa fa-wrench'></i> {{text.advanced_tools}}</a>\n                <b-modal v-if=\"value.advanced\"\n                    :id=\"'t-studyplan-'+value.id+'-advanced'\"\n                    size=\"lg\"\n                    :title=\"text.advanced_tools_heading\"\n                    ok-only\n                    @hide=\"modal_close\"\n                    >\n                    <b-card no-body>\n                    <b-tabs card>\n                        <b-tab :title=\"text.advanced_warning_title\" active>\n                            {{ text.advanced_warning}}\n                        </b-tab>\n                        <b-tab :title=\"text.advanced_course_manipulation_title\" >\n                            <b-container>\n                            <b-row><b-col cols=\"*\">\n                                <h3>{{ text.advanced_cascade_cohortsync_title}}</h3>\n                                    {{ text.advanced_cascade_cohortsync_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols=\"*\">\n                                <b-button\n                                    variant=\"info\"\n                                    @click=\"cascade_cohortsync\"\n                                >{{ text.advanced_cascade_cohortsync}}</b-button>\n                            </b-col></b-row>\n                            <b-row class=\"mt-3\"><b-col cols=\"*\">\n                                <h3>{{ text.advanced_force_scale_title}}</h3>\n                                {{ text.advanced_force_scale_desc}}\n                            </b-col></b-row>\n                            <b-row>\n                                <b-col>\n                                    <b-form-select v-model=\"force_scales.selected_scale\"\n                                    :options=\"scales\" text-field=\"name\" value-field=\"id\"\n                                    ></b-form-select>\n                                </b-col>\n                                <b-col cols=\"4\">\n                                    <b-button\n                                        variant=\"danger\"\n                                        :disabled=\"force_scales.selected_scale == null\"\n                                        @click=\"force_scales_start\"\n                                    >{{ text.advanced_force_scale_button}}</b-button>\n                                </b-col>\n\n                            </b-row>\n                            <b-row class=\"mt-3\"><b-col cols=\"*\">\n                                <ul class='t-advanced-scrollable' v-if=\"force_scales.result.length > 0\">\n                                    <li v-for=\"c in force_scales.result\">\n                                        <span class='t-advanced-coursename'>{{c.course.fullname}}</span>\n                                        <ul v-if=\"c.grades.length > 0\">\n                                            <li v-for='g in c.grades'>\n                                                <span class='t-advanced-gradename'><span v-html=\"g.name\"></span></span>\n                                                <span v-if=\"g.changed == 'converted'\" class='t-advanced-status changed'\n                                                    >{{text.advanced_converted}}</span\n                                                ><span v-else-if=\"g.changed == 'skipped'\" class='t-advanced-status skipped'\n                                                    >{{text.advanced_skipped}}</span\n                                                >\n                                                <span v-else class='t-advanced-status skipped'\n                                                    >{{text.advanced_error}}</span\n                                                >\n                                            </li>\n                                        </ul>\n                                    </li>\n                                </ul>\n                            </b-col></b-row>\n                            <b-row><b-col cols=\"*\">\n                                <h3>{{ text.advanced_disable_autoenddate_title}}</h3>\n                                {{ text.advanced_disable_autoenddate_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols=\"*\">\n                                <b-button\n                                    variant=\"danger\"\n                                    @click=\"disable_autoenddate\"\n                                >{{ text.advanced_disable_autoenddate_button}}</b-button>\n                            </b-col></b-row>\n                            </b-container>\n                        </b-tab>\n                        <b-tab :title='text.advanced_export'>\n                            <b-button\n                                    variant=\"primary\"\n                                    @click=\"export_plan\"\n                                >{{ text.advanced_export}}</b-button>\n                            <b-button\n                                    variant=\"danger\"\n                                    @click=\"import_studylines\"\n                                >{{ text.advanced_import}}</b-button>\n                            <b-button\n                                variant=\"primary\"\n                                @click=\"export_plan('csv')\"\n                            >{{ text.advanced_export_csv}}</b-button>\n                    </b-tab>\n                        <b-tab :title='text.advanced_purge'>\n                            <p>{{text.advanced_purge_expl}}</p>\n                            <p><b-button\n                                    variant=\"danger\"\n                                    @click=\"purge_studyline\"\n                                >{{ text.advanced_purge}}</b-button></p>\n                        </b-tab>                    </b-tabs>\n                    </b-card>\n                </b-modal>\n            </span>\n            `\n        });\n\n\n        /*\n        * T-STUDYPLAN-EDIT\n        */\n        Vue.component('t-studyplan-edit', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                'mode' :{\n                    type: String,\n                    default() { return \"edit\";},\n                },\n                'type' :{\n                    type: String,\n                    default() { return \"link\";},\n                },\n                'variant' : {\n                    type: String,\n                    default() { return \"\";},\n                },\n                'contextid': {\n                    type: Number,\n                    default: 1\n                },\n                'defaultAggregation': {\n                    type: String,\n                    default: \"core\",\n                }\n            },\n            data() {\n                return {\n                    show: false,\n                    config: {\n                        userfields: [\n                            { key: \"selected\",},\n                            { key: \"firstname\", \"sortable\": true,},\n                            { key: \"lastname\", \"sortable\": true,},\n                        ],\n                        cohortfields:[\n                            { key: \"selected\",},\n                            { key: \"name\", \"sortable\": true,},\n                            { key: \"context\", \"sortable\": true,},\n                        ]\n                    },\n                    editdata: {\n                        name: '',\n                        shortname: '',\n                        description: '',\n                        idnumber: '',\n                        context_id: this.contextid,\n                        periods : 4,\n                        startdate: (new Date()).getFullYear() + '-08-01',\n                        enddate:  ((new Date()).getFullYear()+1) + '-08-01',\n                        aggregation: this.defaultAggregation,\n                        aggregation_config: '',\n                    },\n                    aggregation_parsed: {\n\n                    },\n                    aggregators: [],\n                    categories: [ { context_id: 1, category: { path: \"System\"}}], // overwritten during load...\n                    text: strings.studyplan_edit,\n                };\n            },\n            created() {\n                // retrieve aggregator info\n                const self = this;\n                call([{\n                    methodname: 'local_treestudyplan_list_aggregators',\n                    args: [],\n                }])[0].done(function(response){\n                    self.aggregators = response;\n                    for(const ix  in self.aggregators){\n                        const ag = self.aggregators[ix];\n\n                        try{\n                            if(ag.defaultconfig && ag.defaultconfig.length > 0){\n                                self.aggregation_parsed[ag.id] = JSON.parse(ag.defaultconfig);\n                            }\n                        }\n                        catch(e){\n                            debug.warn(e);\n                        }\n                    }\n                }).fail(notification.exception);\n                call([{\n                    methodname: 'local_treestudyplan_list_accessible_categories',\n                    args: {operation: \"edit\",}\n                }])[0].done(function(response){\n                    for(const ix in response){\n                        const cat = response[ix];\n                        cat.category.pathname = cat.category.path.join(\" / \");\n                    }\n                    self.categories = response;\n                }).fail(notification.exception);\n            },\n            mounted() {\n            },\n            updated() {\n\n            },\n            computed: {\n            },\n            methods: {\n                editPlanStart(){\n                    if(this.mode != 'create'){\n                        objCopy(this.editdata,this.value.pages[0],STUDYPLAN_EDITOR_PAGE_FIELDS);\n                        objCopy(this.editdata,this.value,STUDYPLAN_EDITOR_FIELDS);\n\n                    }\n                    // decode the aggregation config data that is stored\n                    if(this.editdata.aggregation_config && this.editdata.aggregation_config.length > 0){\n                        try{\n                            this.aggregation_parsed[this.editdata.aggregation] = JSON.parse(this.editdata.aggregation_config);\n                        }\n                        catch(e){\n                            debug.warn(e);\n                        }\n                    }\n                    this.show = true;\n                },\n                editPlanFinish(){\n                    const self = this;\n                    let args = { };\n                    let method =  'local_treestudyplan_edit_studyplan';\n                    if(this.mode == 'create'){\n                        method = 'local_treestudyplan_add_studyplan';\n                    } else {\n                        args['id'] = this.value.id;\n                    }\n\n                    // store the configuration for this aggregation type if it is relevant\n                    if(this.aggregation_parsed[this.editdata.aggregation]){\n                        this.editdata.aggregation_config = JSON.stringify(this.aggregation_parsed[this.editdata.aggregation]);\n                    }\n                    objCopy(args,this.editdata,STUDYPLAN_EDITOR_FIELDS);\n                    objCopy(args,this.editdata,STUDYPLAN_EDITOR_PAGE_FIELDS);\n\n                    call([{\n                        methodname: method,\n                        args: args\n                    }])[0].done(function(response){\n                        if(self.mode == 'create'){\n                            self.$emit(\"created\", response);\n                            // And reset the edit fields to default\n                            self.editdata = {\n                                name: '',\n                                shortname: '',\n                                description: '',\n                                context_id: 1,\n                                periods : 4,\n                                startdate: (new Date()).getFullYear() + '-08-01',\n                                enddate: ((new Date()).getFullYear()+1) + '-08-01',\n                                aggregation: 'bistate',\n                                aggregation_config: '',\n                            };\n                        }\n                        else {\n                            // determine if the plan moved context...\n                            const moved_from = self.value.context_id;\n                            const moved_to = response.context_id;\n                            const moved = (moved_from != moved_to);\n\n                            if(response.pages[0].periods != self.value.pages[0].periods){\n                                // reload the entire model\n                                call([{\n                                    methodname: 'local_treestudyplan_get_studyplan_map',\n                                    args: { id: self.value.id}\n                                }])[0].done(function(response){\n                                    self.value = ProcessStudyplan(response,true);\n                                    debug.info('studyplan processed');\n                                    self.$emit('input',self.value);\n                                }).fail(function(error){\n                                    notification.exception(error);\n                                });\n                            } else {\n                                objCopy(self.value,response,STUDYPLAN_EDITOR_FIELDS);\n                                self.$emit('input',self.value);\n                                if(moved){\n                                    self.$emit('moved',self.value,moved_from, moved_to);\n                                }\n                            }\n                        }\n                    }).fail(notification.exception);\n                },\n                numberFilter(value){\n                    return value;\n                },\n            }\n            ,\n            template:\n            `\n            <span class='s-studyplan-edit'>\n                <b-button :variant=\"variant\" v-if='type == \"button\"' @click.prevent='editPlanStart()'\n                    ><slot><i class='fa fa-gear'></i></slot></b-button>\n                <a variant=\"variant\" v-else href='#' @click.prevent='editPlanStart()'\n                    ><slot><i class='fa fa-gear'></i></slot></a>\n                <b-modal\n                    v-model=\"show\"\n                    size=\"lg\"\n                    ok-variant=\"primary\"\n                    :title=\"text.studyplan_edit\"\n                    @ok=\"editPlanFinish()\"\n                    :ok-disabled=\"Math.min(editdata.name.length,editdata.shortname.length) == 0\"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_name}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-input v-model=\"editdata.name\"\n                                :state='editdata.name.length>0'\n                                :placeholder=\"text.studyplan_name_ph\"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_shortname}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-input v-model=\"editdata.shortname\"\n                                :state='editdata.shortname.length>0'\n                                :placeholder=\"text.studyplan_shortname_ph\"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_idnumber}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-input v-model=\"editdata.idnumber\"\n                                :placeholder=\"text.studyplan_idnumber_ph\"></b-form-input>\n                            </b-col>\n                        </b-row>                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_description}}</b-col>\n                            <b-col cols=\"8\">\n                                <mform name=\"studyplan_editform\" :params=\"{studyplan_id: value.id}\"></mform>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_context}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-select v-model=\"editdata.context_id\"\n                                :options=\"categories\" text-field=\"category.pathname\" value-field=\"context_id\"\n                                ></b-form-select>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_slots}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-input \n                                    min=\"1\"\n                                    type=\"number\"\n                                    no-wheel\n                                    v-model=\"editdata.periods\"\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_startdate}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-datepicker start-weekday=\"1\" v-model=\"editdata.startdate\"></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_enddate}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-datepicker start-weekday=\"1\" v-model=\"editdata.enddate\" ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.choose_aggregation_style}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-select v-model=\"editdata.aggregation\"\n                                :options=\"aggregators\" text-field=\"name\" value-field=\"id\"\n                                ></b-form-select>\n                            </b-col>\n                        </b-row>\n                        <template v-if=\"aggregation_parsed.bistate && editdata.aggregation == 'bistate'\">\n                            <b-row >\n                                <b-col cols=\"4\">{{ text.setting_bistate_thresh_excellent}}</b-col>\n                                <b-col cols=\"8\">\n                                    <b-form-input v-model=\"aggregation_parsed.bistate.thresh_excellent\"\n                                    type=\"number\" number :formatter=\"numberFilter\"\n                                    ></b-form-input>\n                                </b-col>\n                            </b-row>\n                            <b-row >\n                                <b-col cols=\"4\">{{ text.setting_bistate_thresh_good}}</b-col>\n                                <b-col cols=\"8\">\n                                    <b-form-input v-model=\"aggregation_parsed.bistate.thresh_good\"\n                                    type=\"number\" number :formatter=\"numberFilter\"\n                                    ></b-form-input>\n                                </b-col>\n                            </b-row>\n                            <b-row >\n                                <b-col cols=\"4\">{{ text.setting_bistate_thresh_completed}}</b-col>\n                                <b-col cols=\"8\">\n                                    <b-form-input v-model=\"aggregation_parsed.bistate.thresh_completed\"\n                                    type=\"number\" number :formatter=\"numberFilter\"\n                                    ></b-form-input>\n                                </b-col>\n                            </b-row>\n                            <b-row><b-col cols=\"*\">&nbsp;</b-col></b-row>\n                            <b-row>\n                                <b-col cols=\"7\">{{ text.setting_bistate_support_failed}}</b-col>\n                                <b-col cols=\"3\">\n                                    <b-form-checkbox v-model=\"aggregation_parsed.bistate.use_failed\"\n                                    ></b-form-checkbox>\n                                </b-col>\n                            </b-row>\n                            <b-row><b-col cols=\"*\">&nbsp;</b-col></b-row>\n                            <b-row >\n                                <b-col cols=\"7\">{{ text.setting_bistate_accept_pending_submitted}}</b-col>\n                                <b-col cols=\"3\">\n                                    <b-form-checkbox v-model=\"aggregation_parsed.bistate.accept_pending_as_submitted\"\n                                    ></b-form-checkbox>\n                                </b-col>\n                            </b-row>\n                        </template>\n                    </b-container>\n                </b-modal>\n            </span>\n            `\n        });\n\n        /*\n        * T-STUDYPLAN-ASSOCIATE\n        */\n        Vue.component('t-studyplan-associate', {\n            props: ['value',],\n            data() {\n                return {\n                    show: false,\n                    config: {\n                        userfields: [\n                            { key: \"selected\",},\n                            { key: \"firstname\", \"sortable\": true,},\n                            { key: \"lastname\", \"sortable\": true,},\n                        ],\n                        cohortfields:[\n                            { key: \"selected\",},\n                            { key: \"name\", \"sortable\": true,},\n                            { key: \"context\", \"sortable\": true,},\n                        ]\n                    },\n                    association: {\n                        cohorts: [],\n                        users: [],\n                    },\n                    loading: {\n                        cohorts: false,\n                        users: false,\n                    },\n                    search: {users: [], cohorts:[]},\n                    selected: {\n                         search: {users: [] , cohorts:[]},\n                         associated: {users: [] , cohorts:[]}\n                    },\n                    text: strings.studyplan_associate,\n                };\n            },\n            created() {\n\n            },\n            mounted() {\n            },\n            updated() {\n\n            },\n            methods: {\n                showModal(){\n                    this.show = true;\n                    this.loadAssociations();\n                },\n                cohortOptionModel(c){\n                    return {\n                        value: c.id,\n                        text: c.name + ' (' + c.context.path.join(' / ') + ')',\n                    };\n                },\n                userOptionModel(u){\n                    return {\n                        value: u.id,\n                        text: u.firstname + ' ' + u.lastname,\n                    };\n                },\n                loadAssociations(){\n                    const self = this;\n                    self.loading.cohorts = true;\n                    self.loading.users = true;\n                    call([{\n                        methodname: 'local_treestudyplan_associated_users',\n                        args: { studyplan_id: self.value.id,}\n                    }])[0].done(function(response){\n                        self.association.users = response.map(self.userOptionModel);\n                        self.loading.users = false;\n                    }).fail(notification.exception);\n\n                    call([{\n                        methodname: 'local_treestudyplan_associated_cohorts',\n                        args: { studyplan_id: self.value.id,}\n                    }])[0].done(function(response){\n                        self.association.cohorts = response.map(self.cohortOptionModel);\n                        self.loading.cohorts = false;\n                    }).fail(notification.exception);\n                },\n                searchCohorts(searchtext){\n                    const self = this;\n\n                    if(searchtext.length > 0)\n                    {\n                        call([{\n                            methodname: 'local_treestudyplan_list_cohort',\n                            args: { like: searchtext, exclude_id: self.value.id}\n                        }])[0].done(function(response){\n                            self.search.cohorts = response.map(self.cohortOptionModel);\n                        }).fail(notification.exception);\n                    }\n                    else {\n                        self.search.cohorts = [];\n                    }\n                },\n                cohortAssociate(){\n                    const self = this;\n                    let requests = [];\n                    const associated = self.association.cohorts;\n                    const search = self.search.cohorts;\n                    const searchselected = self.selected.search.cohorts;\n                    for(const i in searchselected){\n                        const r = searchselected[i];\n                        requests.push({\n                            methodname: 'local_treestudyplan_connect_cohort',\n                            args: {studyplan_id: self.value.id, cohort_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(associated,search,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n                cohortDisassociate(){\n                    const self = this;\n                    let requests = [];\n                    const associatedselected = self.selected.associated.cohorts;\n                    const associated = self.association.cohorts;\n                    const search =  self.search.cohorts;\n                    for(const i in associatedselected){\n                        const r = associatedselected[i];\n                        requests.push({\n                            methodname: 'local_treestudyplan_disconnect_cohort',\n                            args: {studyplan_id: self.value.id, cohort_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(search,associated,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n                searchUsers(searchtext){\n                    const self = this;\n                    if(searchtext.length > 0)\n                    {\n                        call([{\n                            methodname: 'local_treestudyplan_find_user',\n                            args: { like: searchtext, exclude_id: self.value.id}\n                        }])[0].done(function(response){\n                            self.search.users = response.map(self.userOptionModel);\n                        }).fail(notification.exception);\n                    }\n                    else {\n                        self.search.users = [];\n                    }\n                },\n                userAssociate(){\n                    const self = this;\n                    let requests = [];\n                    const associated = self.association.users;\n                    const search =  self.search.users;\n                    const searchselected =  self.selected.search.users;\n                    for(const i in searchselected){\n                        const r = searchselected[i];\n\n                        requests.push({\n                            methodname: 'local_treestudyplan_connect_user',\n                            args: {studyplan_id: self.value.id, user_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(associated,search,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n                userDisassociate(){\n                    const self = this;\n                    let requests = [];\n                    const associated = self.association.users;\n                    const associatedselected = self.selected.associated.users;\n                    const search = self.search.users;\n                    for(const i in associatedselected){\n                        const r = associatedselected[i];\n\n                        requests.push({\n                            methodname: 'local_treestudyplan_disconnect_user',\n                            args: {studyplan_id: self.value.id, user_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(search,associated,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n            }\n            ,\n            template:\n`\n<span class='s-studyplan-associate'\n    ><a href='#' @click.prevent=\"showModal\" ><slot><i class='fa fa-users'></i></slot></a>\n    <b-modal\n        v-model=\"show\"\n        size=\"lg\"\n        ok-variant=\"primary\"\n        :title=\"text.associations + ' - ' + value.name\"\n        ok-only>\n        <b-tabs class='s-studyplan-associate-window'>\n            <b-tab :title=\"text.cohorts\">\n                <b-container>\n                    <b-row class='mb-2 mt-2'>\n                        <b-col>{{text.associated_cohorts}}</b-col>\n                        <b-col>{{text.associate_cohorts}}</b-col>\n                    </b-row>\n                    <b-row class='mb-2'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type=\"text\" @input=\"searchCohorts($event)\"\n                                :placeholder=\"text.search\"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.associated.cohorts\"\n                                :options=\"association.cohorts\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.search.cohorts\"\n                                :options=\"search.cohorts\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class='mt-2'>\n                        <b-col>\n                            <b-button variant='danger' @click=\"cohortDisassociate()\"\n                                ><i class='fa fa-chain-broken'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant='success' @click=\"cohortAssociate()\"\n                                ><i class='fa fa-link'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n            <b-tab :title=\"text.users\">\n                <b-container>\n                    <b-row class='mb-2 mt-2'>\n                        <b-col>{{text.associated_users}}</b-col>\n                        <b-col>{{text.associate_users}}</b-col>\n                    </b-row>\n                    <b-row class='mb-2'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type=\"text\"\n                                @input=\"searchUsers($event)\"\n                                placeholder=\"Search users\"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.associated.users\"\n                                :options=\"association.users\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.search.users\"\n                                :options=\"search.users\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class='mt-2'>\n                        <b-col>\n                                <b-button variant='danger' @click=\"userDisassociate()\"\n                                ><i class='fa fa-chain-broken'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant='success' @click=\"userAssociate()\"\n                                ><i class='fa fa-link'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n        </b-tabs>\n    </b-modal>\n</span>\n`\n        });\n\n        /*******************\n         *\n         * Period editor\n         *\n         *************/\n\n        Vue.component('t-period-edit', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                'type' :{\n                    type: String,\n                    default() { return \"link\";},\n                },\n                'variant' : {\n                    type: String,\n                    default() { return \"\";},\n                },\n                'minstart' : {\n                    type: String,\n                    default() { return null;},\n                },\n                'maxend' : {\n                    type: String,\n                    default() { return null;},\n                }\n            },\n            data() {\n                return {\n                    show: false,\n                    editdata: {\n                        fullname: '',\n                        shortname: '',\n                        startdate: (new Date()).getFullYear() + '-08-01',\n                        enddate:  ((new Date()).getFullYear()+1) + '-08-01',\n                    },\n                    text: strings.period_edit,\n                };\n            },\n            created() {\n            },\n            mounted() {\n            },\n            updated() {\n\n            },\n            computed: {\n            },\n            methods: {\n                editStart(){\n                    objCopy(this.editdata,this.value,PERIOD_EDITOR_FIELDS);\n                    this.show = true;\n                },\n                editFinish(){\n                    const self = this;\n                    let args = { 'id': this.value.id };\n\n                    objCopy(args,this.editdata,PERIOD_EDITOR_FIELDS);\n\n                    call([{\n                        methodname: 'local_treestudyplan_edit_period',\n                        args: args\n                    }])[0].done(function(response){\n                        objCopy(self.value,response,PERIOD_EDITOR_FIELDS);\n                        self.$emit('input',self.value);\n                        self.$emit('edited',self.value);\n                    }).fail(notification.exception);\n                },\n                refresh(){\n                    const self = this;\n                    call([{\n                        methodname: 'local_treestudyplan_get_period',\n                        args: { 'id': this.value.id },\n                    }])[0].done(function(response){\n                        objCopy(self.value,response,PERIOD_EDITOR_FIELDS);\n                        self.$emit('input',self.value);\n                    }).fail(notification.exception);\n                },\n                add_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,days);\n                },\n                sub_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,0 - days);\n                },\n            }\n            ,\n            template:\n            `\n            <span class='t-period-edit'>\n                <b-button :variant=\"variant\" v-if='type == \"button\"' @click.prevent='editStart()'\n                    ><slot><i class='fa fa-gear'></i></slot></b-button>\n                <a variant=\"variant\" v-else href='#' @click.prevent='editStart()'\n                    ><slot><i class='fa fa-gear'></i></slot></a>\n                <b-modal\n                    v-model=\"show\"\n                    size=\"lg\"\n                    ok-variant=\"primary\"\n                    :title=\"text.edit\"\n                    @ok=\"editFinish()\"\n                    :ok-disabled=\"Math.min(editdata.fullname.length,editdata.shortname.length) == 0\"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.fullname}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-input v-model=\"editdata.fullname\"\n                                :state='editdata.fullname.length>0'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.shortname}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-input v-model=\"editdata.shortname\"\n                                :state='editdata.shortname.length>0'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_startdate}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-datepicker\n                                    start-weekday=\"1\"\n                                    v-model=\"editdata.startdate\"\n                                    :min=\"(minstart ? minstart : '')\"\n                                    :max=\"sub_day(value.enddate)\"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_enddate}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-datepicker\n                                    start-weekday=\"1\"\n                                    v-model=\"editdata.enddate\"\n                                    :min=\"add_day(value.startdate)\"\n                                    :max=\"(maxend ? maxend : '')\"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </span>\n            `\n        });\n\n        /*\n        * T-STUDYPLAN\n        */\n        Vue.component('t-studyplan', {\n            props: [ 'value', 'index', ],\n            data() {\n                return {\n                    config: {\n                        userfields: [\n                            { key: \"selected\",},\n                            { key: \"firstname\", \"sortable\": true,},\n                            { key: \"lastname\", \"sortable\": true,},\n                        ],\n                        cohortfields:[\n                            { key: \"selected\",},\n                            { key: \"name\", \"sortable\": true,},\n                            { key: \"context\", \"sortable\": true,},\n                        ]\n                    },\n                    create: {\n                        studyline: {\n                            'name': '',\n                            'shortname': '',\n                            'color': '#DDDDDD',\n                        },\n                    },\n                    edit: {\n                        toolbox_shown: false,\n                        studyline: {\n                            editmode: false,\n                            data: {\n                                name: '',\n                                shortname: '',\n                                color: '#DDDDDD',\n                            },\n                            original: {},\n                        },\n                        studyplan: {\n                            data: {\n                                name: '',\n                                shortname: '',\n                                description: '',\n                                slots : 4,\n                                startdate: '2020-08-01',\n                                enddate: '',\n                                aggregation: '',\n                                aggregation_config: '',\n                                aggregation_info: {\n                                    useRequiredGrades: true,\n                                    useItemCondition: false,\n                                },\n\n                            },\n                            original: {},\n                        }\n                    },\n                    text: strings.studyplan_text,\n                    cache: {\n                        linelayers: {},\n                    }\n                };\n            },\n            created() {\n\n            },\n            mounted() {\n                if(this.page.studylines.length == 0){\n                    // start in editmode if studylines are empty\n                    this.edit.studyline.editmode = true;\n                }\n                this.$root.$emit('redrawLines');\n            },\n            updated() {\n                this.$root.$emit('redrawLines');\n                ItemEventBus.$emit('redrawLines');\n            },\n            computed: {\n                columns() {\n                    return 1+ (this.page.periods * 2);\n                },\n                columns_stylerule() {\n                    // Uses css variables, so width for slots and filters can be configured in css\n                    let s = \"grid-template-columns: var(--studyplan-filter-width)\"; // use css variable here\n                    for(let i=0; i<this.page.periods;i++){\n                        s+= \" var(--studyplan-course-width) var(--studyplan-filter-width)\";\n                    }\n                    return s+\";\";\n                },\n                page(){\n                    // FIXME: Temporary hack until real page management is implemented\n                    return this.value.pages[0];\n                }\n            },\n            methods: {\n                trashbin_accepts(type){\n                    if(type.item){\n                        return true;\n                    } else {\n                        return false;\n                    }\n                },\n                countLineLayers(line){\n                    // For some optimization, we cache the value of this calculation for about a second\n                    // Would be a lot nicer if we could use a computed property for this.....\n                    if( this.cache.linelayers[line.id]\n                        && ((new Date()) - this.cache.linelayers[line.id].timestamp < 1000 )\n                    ){\n                        return this.cache.linelayers[line.id].value;\n                    }\n                    else\n                    {\n                        let maxLayer = -1;\n                        for(let i = 0; i <= this.page.periods; i++){\n                            if(line.slots[i]){\n                                const slot = line.slots[i];\n                                // Determine the amount of used layers in a studyline slit\n                                for(const ix in line.slots[i].courses){\n                                    const item = line.slots[i].courses[ix];\n                                    if(item.layer > maxLayer){\n                                        maxLayer = item.layer;\n                                    }\n                                }\n                                for(const ix in line.slots[i].filters){\n                                    const item = line.slots[i].filters[ix];\n                                    if(item.layer > maxLayer){\n                                        maxLayer = item.layer;\n                                    }\n                                }\n\n                            }\n                        }\n                        this.cache.linelayers[line.id] = {\n                            value: (maxLayer + 1),\n                            timestamp: (new Date()),\n                        };\n                        return maxLayer+1;\n                    }\n                },\n                slotsempty(slots) {\n                    if(Array.isArray(slots)){\n                        let count = 0;\n                        for(let i = 0; i < slots.length; i++) {\n                            if(Array.isArray(slots[i].courses)){\n                                count += slots[i].courses.length;\n                            }\n                            if(Array.isArray(slots[i].filters)){\n                                count += slots[i].filters.length;\n                            }\n                        }\n                        return (count == 0);\n                    } else {\n                        return false;\n                    }\n                },\n                movedStudyplan(plan,from,to) {\n                    this.$emit('moved',plan,from,to); // Throw the event up....\n                },\n                addStudyLine(page,newlineinfo) {\n                    call([{\n                        methodname: 'local_treestudyplan_add_studyline',\n                        args: {\n                            'page_id': page.id,\n                            'name': newlineinfo.name,\n                            'shortname': newlineinfo.shortname,\n                            'color': newlineinfo.color,\n                            'sequence': page.studylines.length,\n                        }\n                    }])[0].done(function(response){\n                        page.studylines.push(response);\n                        newlineinfo.name = '';\n                        newlineinfo.shortname = '';\n                        newlineinfo.color = \"#dddddd\";\n                    }).fail(notification.exception);\n                },\n                editLineStart(line) {\n                    Object.assign(this.edit.studyline.data,line);\n                    this.edit.studyline.original = line;\n                    this.$bvModal.show('modal-edit-studyline-'+this.value.id);\n                },\n                editLineFinish() {\n                    let editedline = this.edit.studyline.data;\n                    let originalline = this.edit.studyline.original;\n                    call([{\n                        methodname: 'local_treestudyplan_edit_studyline',\n                        args: { 'id': editedline.id,\n                                'name': editedline.name,\n                                'shortname': editedline.shortname,\n                                'color': editedline.color,}\n                    }])[0].done(function(response){\n                        originalline['name'] = response['name'];\n                        originalline['shortname'] = response['shortname'];\n                        originalline['color'] = response['color'];\n                    }).fail(notification.exception);\n                },\n                deleteLine(page,line) {\n                    const self=this;\n                    get_strings([\n                            {key: 'studyline_confirm_remove', param: line.name, component: 'local_treestudyplan' },\n                            {key: 'delete', component: 'core' },\n                        ]).then(function(s){\n                        self.$bvModal.msgBoxConfirm(s[0], {\n                            okTitle: s[1],\n                            okVariant: 'danger',\n                        }).then(function(modalresponse){\n                            if(modalresponse){\n                                call([{\n                                    methodname: 'local_treestudyplan_delete_studyline',\n                                    args: { 'id': line.id, }\n                                }])[0].done(function(response){\n                                    if(response.success == true){\n                                        let index = page.studylines.indexOf(line);\n                                        page.studylines.splice(index, 1);\n                                    }\n                                }).fail(notification.exception);\n                            }\n                        });\n                    });\n                },\n                reorderLines(event,lines){\n\n                    // apply reordering\n                    event.apply(lines);\n                    // send the new sequence to the server\n                    let sequence = [];\n                    for(let idx in lines)\n                    {\n                        sequence.push({'id': lines[idx].id,'sequence': idx});\n                    }\n                    call([{\n                        methodname: 'local_treestudyplan_reorder_studylines',\n                        args: { 'sequence': sequence }\n                    }])[0].done(function(response){\n                    }).fail(notification.exception);\n                },\n                deletePlan(studyplan){\n                    const self=this;\n                    get_strings([\n                        {key: 'studyplan_confirm_remove', param: studyplan.name, component: 'local_treestudyplan' },\n                        {key: 'delete', component: 'core' },\n                    ]).then(function(s){\n                        self.$bvModal.msgBoxConfirm(s[0], {\n                            okTitle: s[1],\n                            okVariant: 'danger',\n                        }).then(function(modalresponse){\n                            if(modalresponse){\n                                call([{\n                                    methodname: 'local_treestudyplan_delete_studyplan',\n                                    args: { 'id': studyplan.id, force: true}\n                                }])[0].done(function(response){\n                                    if(response.success == true){\n                                        self.$root.$emit(\"studyplanRemoved\",studyplan);\n                                    }\n                                }).fail(notification.exception);\n                            }\n                        });\n                    });\n                },\n                deleteStudyItem(event){\n                    //const self = this;\n                    let item = event.data;\n\n                    call([{\n                        methodname: 'local_treestudyplan_delete_studyitem',\n                        args: { 'id': item.id, }\n                    }])[0].done(function(response){\n                        if(response.success == true){\n                            event.source.$emit('cut',event);\n                        }\n                    }).fail(notification.exception);\n\n                },\n                showslot(line,index, layeridx, type){\n                    // check if the slot should be hidden because a previous slot has an item with a span\n                    // so big that it hides this slot\n                    const forGradable = (type == 'gradable')?true:false;\n                    const periods = this.page.periods;\n                    let show = true;\n                    for(let i = 0; i < periods; i++){\n                        if(line.slots[index-i] && line.slots[index-i].courses){\n                            const list = line.slots[index-i].courses;\n                            for(const ix in list){ // Really wish that 'for of' would work with the minifier moodle uses\n                                const item = list[ix];\n                                if(item.layer == layeridx){\n                                    if(forGradable){\n                                        if(i > 0 && (item.span - i) > 0){\n                                            show = false;\n                                        }\n                                    } else {\n                                        if((item.span - i) >  1){\n                                            show = false;\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n\n                    return show;\n                },\n                periodEdited(pi) {\n                    const prev = this.$refs[\"periodeditor-\" + (pi.period - 1)][0];\n                    if(prev) {\n                        prev.refresh();\n                    }\n                    const next = this.$refs[\"periodeditor-\" + (pi.period + 1)][0];\n                    if(next) {\n                        next.refresh();\n                    }\n                },\n                add_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,days);\n                },\n                sub_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,0 - days);\n                },\n                toolbox_switched(event){\n                    this.$emit('toggletoolbox',event);\n                }\n            }\n            ,\n            template:\n            `\n            <div>\n                <div class='controlbox t-studyplan-controlbox'>\n                    <div class=\"controlbox-group\">\n                        <b-form-checkbox v-model=\"edit.studyline.editmode\" class=\"sw-studyplan-toolbar\" switch\n                            @change=\"toolbox_switched(edit.toolbox_shown && !edit.studyline.editmode); \"\n                            >{{ text.studyline_editmode }}</b-form-checkbox>\n                        <b-form-checkbox v-if=\"!edit.studyline.editmode\" v-model=\"edit.toolbox_shown\" class=\"sw-studyplan-toolbar\" switch\n                            @change=\"toolbox_switched\"\n                            >{{ text.toolbox_toggle}}</b-form-checkbox>\n                        <drop\n                            mode='copy'\n                            class='t-item-deletebox text-danger border-danger'\n                            @drop='deleteStudyItem'\n                            :accepts-type=\"trashbin_accepts\"\n                            ><i class='fa fa-trash'></i>\n                        </drop>\n                    </div>\n                    <div class=\"controlbox-group\">\n                        <span class='control editable'>\n                            <t-studyplan-advanced v-model=\"value\"></t-studyplan-advanced>\n                        </span>\n                        <span class='control editable'>\n                            <t-studyplan-associate\n                                v-model=\"value\"><i class='fa fa-users'></i> {{text.associations}}</t-studyplan-associate>\n                        </span>\n                        <span class='control editable'>\n                            <t-studyplan-edit v-model=\"value\" @moved=\"movedStudyplan\"\n                                ><i class='fa fa-gear'></i> {{text.edit$core}}</t-studyplan-edit>\n                        </span>\n                        <span class='control deletable'>\n                            <a v-if='page.studylines.length == 0' href='#' @click='deletePlan(value)'\n                                ><i class='text-danger fa fa-trash'></i></a>\n                        </span>\n                    </div>\n                </div>\n                <div class='t-studyplan-content-edit' v-if=\"edit.studyline.editmode\">\n                    <drop-list\n                        :items=\"page.studylines\"\n                        class=\"t-slot-droplist\"\n                        :accepts-type=\"'studyline-'+page.id\"\n                        xreorder=\"$event.apply(page.studylines)\"\n                        @reorder=\"reorderLines($event,page.studylines)\"\n                        mode=\"copy\"\n                        row\n                    >\n                        <template v-slot:item=\"{item}\">\n                            <drag\n                                :key=\"item.id\"\n                                class='t-studyline-drag'\n                                :data=\"item\"\n                                :type=\"'studyline-'+page.id\"\n                                >\n                                <template v-slot:drag-image>\n                                    <i class=\"fa fa-arrows text-primary\"></i>\n                                </template>\n                                <t-studyline-edit\n                                    v-model=\"item\"\n                                    @edit='editLineStart(item)'\n                                    @delete='deleteLine(page,item)'\n                                    >\n                                    <div v-if=\"!slotsempty(item.slots)\"> {{ text.editmode_modules_hidden}} </div>\n                                </t-studyline-edit>\n                            </drag>\n                        </template>\n                    </drop-list>\n                </div>\n                <div class='t-studyplan-content' v-else>\n\n                    <!-- Now paint the headings column -->\n                    <div class='t-studyplan-headings'>\n                        <s-studyline-header-heading></s-studyline-header-heading>\n                        <t-studyline-heading  v-for=\"(line,lineindex) in page.studylines\"\n                            :key=\"line.id\"\n                            @resize=\"headingresized(lineindex,$event)\"\n                            v-model=\"page.studylines[lineindex]\"\n                            :layers='countLineLayers(line)+1'\n                            :class=\" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )\n                                    + ((lineindex==0)?' first ':' ')\n                                    + ((lineindex==page.studylines.length-1)?' last ':' ')\"\n                        ></t-studyline-heading>\n                    </div>\n                    <!-- Next, paint all the cells in the scrollable -->\n                    <div class=\"t-studyplan-scrollable\" >\n                        <div class=\"t-studyplan-timeline\" :style=\"columns_stylerule\">\n                        <!-- add period information -->\n                        <template v-for=\"(n,index) in (page.periods+1)\">\n                            <s-studyline-header-period\n                                v-if=\"index > 0\"\n                                v-model=\"page.perioddesc[index-1]\"\n                                ><t-period-edit\n                                    :ref=\"'periodeditor-'+index\"\n                                    @edited=\"periodEdited\"\n                                    v-model=\"page.perioddesc[index-1]\"\n                                    :minstart=\"(index > 1) ? add_day(page.perioddesc[index-2].startdate,2) : null\"\n                                    :maxend=\"(index < page.periods) ? sub_day(page.perioddesc[index].enddate,2) : null\"\n                                ></t-period-edit\n                            ></s-studyline-header-period>\n                            <div class=\"s-studyline-header-filter\"></div>\n                        </template>\n\n                        <!-- Line by line add the items -->\n                        <!-- The grid layout handles putting it in rows and columns -->\n                        <template v-for=\"(line,lineindex) in page.studylines\"\n                            ><template v-for=\"(layernr,layeridx) in countLineLayers(line)+1\"\n                                ><template v-for=\"(n,index) in (page.periods+1)\"\n                                    >\n                                    <t-studyline-slot\n                                        v-if=\"index > 0 && showslot(line, index, layeridx, 'gradable')\"\n                                        type='gradable'\n                                        v-model=\"line.slots[index].courses\"\n                                        :key=\"'c-'+lineindex+'-'+index+'-'+layernr\"\n                                        :slotindex=\"index\"\n                                        :line=\"line\"\n                                        :plan=\"value\"\n                                        :page=\"page\"\n                                        :period=\"page.perioddesc[index-1]\"\n                                        :layer=\"layeridx\"\n                                        :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n                                                + ((lineindex==0 && layernr==1)?' first ':' ')\n                                                + ((lineindex==page.studylines.length-1)?' last ':' ')\n                                                + ((layernr == countLineLayers(line))?' lastlyr ':' ')\n                                                + ((layernr == countLineLayers(line)+1)?' newlyr ':' ')\"\n                                    ></t-studyline-slot\n                                    ><t-studyline-slot\n                                        type='filter'\n                                        v-if=\"showslot(line, index, layeridx, 'filter')\"\n                                        v-model=\"line.slots[index].filters\"\n                                        :key=\"'f-'+lineindex+'-'+index+'-'+layernr\"\n                                        :slotindex=\"index\"\n                                        :line=\"line\"\n                                        :plan=\"value\"\n                                        :page=\"page\"\n                                        :layer=\"layeridx\"\n                                        :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n                                                + ((lineindex==0 && layernr==1)?' first ':'')\n                                                + ((lineindex==page.studylines.length-1)?' last ':' ')\n                                                + ((index==page.periods)?' rightmost':'')\n                                                + ((layernr == countLineLayers(line))?' lastlyr ':' ')\n                                                + ((layernr == countLineLayers(line)+1)?' newlyr ':' ')\"\n                                        >\n                                    </t-studyline-slot\n                                ></template\n                            ></template\n                        ></template\n                        ></div>\n                    </div>\n                </div>\n                <div v-if=\"edit.studyline.editmode\" class='t-studyline-add'>\n                    <a href=\"#\" v-b-modal=\"'modal-add-studyline-'+page.id\" @click=\"false;\"\n                        ><i class='fa fa-plus'></i>{{ text.studyline_add }}</a>\n                </div>\n                <b-modal\n                    :id=\"'modal-add-studyline-'+page.id\"\n                    size=\"lg\"\n                    :ok-title=\"text.add$core\"\n                    ok-variant=\"primary\"\n                    :title=\"text.studyline_add\"\n                    @ok=\"addStudyLine(page,create.studyline)\"\n                    :ok-disabled=\"Math.min(create.studyline.name.length,create.studyline.shortname.length) == 0\"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols=\"3\">{{text.studyline_name}}</b-col>\n                            <b-col>\n                                <b-form-input v-model=\"create.studyline.name\" :placeholder=\"text.studyline_name_ph\"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"3\">{{text.studyline_shortname}}</b-col>\n                            <b-col>\n                            <b-form-input\n                                v-model=\"create.studyline.shortname\"\n                                :placeholder=\"text.studyline_shortname_ph\"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"3\">{{text.studyline_color}}</b-col>\n                            <b-col>\n                                <input type=\"color\" v-model=\"create.studyline.color\" />\n                                <!-- hsluv-picker v-model=\"create.studyline.color\" horizontal displaysize=\"175\" ></hsluv-picker -->\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n                <b-modal\n                    :id=\"'modal-edit-studyline-'+value.id\"\n                    size=\"lg\"\n                    ok-variant=\"primary\"\n                    :title=\"text.studyline_edit\"\n                    @ok=\"editLineFinish()\"\n                    :ok-disabled=\"Math.min(edit.studyline.data.name.length,edit.studyline.data.shortname.length) == 0\"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols=\"3\">{{ text.studyline_name}}</b-col>\n                            <b-col>\n                                <b-form-input\n                                    v-model=\"edit.studyline.data.name\"\n                                    :placeholder=\"text.studyline_name_ph\"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"3\">{{ text.studyline_shortname}}</b-col>\n                            <b-col>\n                            <b-form-input\n                                v-model=\"edit.studyline.data.shortname\"\n                                :placeholder=\"text.studyline_shortname_ph\"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"3\">{{ text.studyline_color}}</b-col>\n                            <b-col>\n                                <input type=\"color\" v-model=\"edit.studyline.data.color\" />\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            `\n        });\n\n\n       /*\n        * T-STUDYLINE-HEADER\n        */\n       Vue.component('t-studyline-heading', {\n            props: {\n                value : {\n                    type: Object, // Studyline\n                    default: function(){ return {};},\n                },\n                layers: {\n                    type: Number,\n                    default: 1,\n                },\n            },\n            data() {\n                return {\n                    layerHeights: {}\n                };\n            },\n            created() {\n                // Listener for the signal that a new connection was made and needs to be drawn\n                // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines\n                ItemEventBus.$on('lineHeightChange', this.onLineHeightChange);\n            },\n            computed: {\n\n            },\n            methods: {\n                onLineHeightChange(lineid,layerid,newheight){\n                    // All layers for this line have the first slot send an update message on layer height change.\n                    // When one of those updates is received, record the height and recalculate the total height of the\n                    // header\n                    if(this.$refs.main && lineid == this.value.id){\n                        const items = document.querySelectorAll(\n                            `.t-studyline-slot-0[data-studyline='${this.value.id}']`);\n\n                        // determine the height of all the lines and add them up.\n                        let heightSum = 0;\n                        items.forEach((el) => {\n                            // getBoundingClientRect() Gets the actual fractional height instead of rounded to integer pixels\n                            const r = el.getBoundingClientRect();\n                            const height = r.height;\n                            heightSum += height;\n                        });\n\n                        const heightStyle=`${heightSum}px`;\n                        this.$refs.main.style.height = heightStyle;\n                    }\n                }\n            },\n            template: `\n            <div class=\"t-studyline t-studyline-heading \"\n                :data-studyline=\"value.id\" ref=\"main\"\n                ><div class=\"t-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"t-studyline-title\">\n                    <abbr v-b-tooltip.hover.right :title=\"value.name\">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            `,\n        });\n\n        /*\n        * T-STUDYLINE (Used only for study line edit mode)\n        */\n        Vue.component('t-studyline-edit', {\n            props: {\n                value : {\n                    type: Object, // Studyline\n                    default: function(){ return {};},\n                }\n           },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                deletable() {\n                    // Check if all the slots are empty\n                    const slots = this.value.slots;\n                    if(Array.isArray(slots)){\n                        let count = 0;\n                        for(let i = 0; i < slots.length; i++) {\n                            if(Array.isArray(slots[i].courses)){\n                                count += slots[i].courses.length;\n                            }\n                            if(Array.isArray(slots[i].filters)){\n                                count += slots[i].filters.length;\n                            }\n                        }\n                        return (count == 0);\n                    } else {\n                        return false;\n                    }\n                },\n                editable() {\n                    return true;\n                }\n            },\n            methods: {\n                onEdit() {\n                    this.$emit('edit',this.value);\n                },\n                onDelete() {\n                    this.$emit('delete',this.value);\n                },\n\n            },\n            template: `\n            <div :class=\"'t-studyline '\" >\n                <div class=\"t-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"t-studyline-title\">\n                    <div>\n                        <i class='fa fa-arrows text-primary'></i>\n                        <abbr v-b-tooltip.hover :title=\"value.name\">{{ value.shortname }}</abbr>\n                    </div>\n                </div>\n                <div class='t-studyline-editmode-content'>\n                    <slot></slot>\n                </div>\n                <div class='controlbox'>\n                    <template v-if='editable || deletable'>\n                    <span class='control editable' v-if='editable'>\n                        <a href='#' @click='onEdit'><i class='fa fa-pencil'></i></a>\n                    </span>\n                    <span class='control deletable' v-if='deletable'>\n                        <a v-if='deletable' href='#' @click='onDelete'><i class='text-danger fa fa-trash'></i></a>\n                    </span>\n                    </template>\n                </div>\n            </div>\n            `,\n        });\n\n        /*\n         * During a redisign it was decided to have the studyline still get the entire array as a value,\n         * even though it only shows one drop slot for the layer it is in. This is to make repainting easier,\n         * since we modify the array for the layer we handle. FIXME: Make this less weird\n         */\n        Vue.component('t-studyline-slot', {\n            props: {\n                type : {\n                    type: String,\n                    default: 'gradable',\n                },\n                slotindex : {\n                    type: Number,\n                    default: '',\n                },\n                line : {\n                    type: Object,\n                    default(){ return null;},\n                },\n                layer : {\n                    type: Number,\n                },\n                value: {\n                    type: Array, // dict with layer as index\n                    default(){ return [];},\n                },\n                plan: {\n                    type: Object, // Studyplan data\n                    default(){ return null;},\n                },\n                page: {\n                    type: Object, // Studyplan data\n                    default(){ return null;},\n                },\n                period: {\n                    type: Object, // Studyplan data\n                    default(){ return null;},\n                },\n            },\n            mounted() {\n                const self=this;\n                if(self.type == \"gradable\" && self.slotindex == 1){\n                    self.resizeListener = new ResizeObserver(() => {\n                        if(self.$refs.main){\n                            const size = self.$refs.main.getBoundingClientRect();\n\n                            ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, size.height);\n                        }\n                    }).observe(self.$refs.main);\n                }\n            },\n            unmounted() {\n                if(this.resizeListener) {\n                    this.resizeListener.disconnect();\n                }\n            },\n            computed: {\n                slotkey(){\n                    return `${this.type}'-'${this.line.id}-${this.slotindex}-${this.layer}`;\n                },\n                itemidx(){\n                    for(const ix in this.value){\n                        const itm = this.value[ix];\n                        if(itm.layer == this.layer){\n                            return ix;\n                        }\n                    }\n                    return null;\n                },\n                item(){\n                    for(const ix in this.value){\n                        const itm = this.value[ix];\n                        if(itm.layer == this.layer){\n                            return itm;\n                        }\n                    }\n                    return null;\n                },\n                listtype() {\n                    return this.type;\n                },\n                dragacceptlist(){\n                    if(this.type == \"gradable\"){\n                        return [\"course\", \"gradable-item\"];\n                    } else {\n                        return [\"filter\", \"filter-item\"];\n                    }\n                },\n                courseHoverDummy(){\n                    return {course: this.hover.component};\n                },\n                current(){\n                    if( this.period && this.period.startdate && this.period.enddate){\n                        const now = new Date();\n                        const pstart = new Date(this.period.startdate);\n                        const pend = new Date(this.period.enddate);\n                        return (now >= pstart && now < pend);\n                    }\n                    else {\n                        return false;\n                    }\n                },\n                spanCss(){\n                    if(this.item && this.item.span > 1){\n                        const span = (2 * this.item.span) - 1;\n                        return `width: 100%; grid-column: span ${span};`;\n                    } else {\n                        return \"\";\n                    }\n                }\n            },\n            data() {\n                return {\n                    text: strings.course_timing,\n                    resizeListener: null,\n                    hover: {\n                        component:null,\n                        type: null,\n                    },\n                    datechanger: {\n                        coursespan: null,\n                        periodspan: null,\n                        default: false,\n                        defaultchoice: false,\n                        hidewarn: false,\n                    }\n                };\n            },\n            methods: {\n                onDrop(event) {\n                    this.hover.component = null;\n                    this.hover.type = null;\n                    debug.info(event);\n                    const self = this;\n                    if(event.type.item) {\n                        let item = event.data;\n\n                        // To avoid weird visuals with the lines,\n                        // we add the item to the proper place in the front-end first\n                        item.layer = this.layer;\n                        item.slot = this.slotindex;\n                        self.value.push(item);\n                        self.$emit(\"input\",self.value);\n\n                        // then on the next tick, we inform the back end\n                        // Since moving things around has never been unsuccessful, unless you have other problems,\n                        // it's better to have nice visuals.\n                        self.relocateStudyItem(item).done(()=>{\n                            if(this.$refs.timingChecker){\n                                this.$refs.timingChecker.validate_course_period();\n                            }\n                        });\n                    }\n                    else if(event.type.component){\n                        debug.info(\"Adding new component\");\n                        if(event.type.type == \"gradable\"){\n                            call([{\n                                methodname: 'local_treestudyplan_add_studyitem',\n                                args: {\n                                    \"line_id\": self.line.id,\n                                    \"slot\" : self.slotindex,\n                                    \"layer\" : self.layer,\n                                    \"type\": 'course',\n                                    \"details\": {\n                                        \"competency_id\": null,\n                                        'conditions':'',\n                                        'course_id':event.data.id,\n                                        'badge_id':null,\n                                        'continuation_id':null,\n                                    }\n                                }\n                            }])[0].done((response) => {\n                                let item = response;\n                                self.relocateStudyItem(item).done(()=>{\n                                    self.value.push(item);\n                                    self.$emit(\"input\",self.value);\n\n                                    // call the validate period function on next tick,\n                                    // since it paints the item in the slot first\n                                    this.$nextTick(() => {\n                                        if(this.$refs.timingChecker){\n                                            this.$refs.timingChecker.validate_course_period();\n                                        }\n                                    });\n                                });\n                            }).fail(notification.exception);\n                        }\n                        else  if(event.type.type == \"filter\") {\n                            debug.info(\"Adding new filter compenent\");\n                            call([{\n                                methodname: 'local_treestudyplan_add_studyitem',\n                                args: {\n                                    \"line_id\": self.line.id,\n                                    \"slot\" : self.slotindex,\n                                    \"type\": event.data.type,\n                                    \"details\":{\n                                        \"badge_id\": event.data.badge?event.data.badge.id:undefined,\n                                    }\n                                }\n                            }])[0].done((response) => {\n                                let item = response;\n                                self.relocateStudyItem(item).done(()=>{\n                                    item.layer = this.layer;\n                                    self.value.push(item);\n                                    self.$emit(\"input\",self.value);\n                                });\n                            }).fail(notification.exception);\n                        }\n                    }\n                },\n                onCut(event) {\n                    const self=this;\n                    let id = event.data.id;\n                    for(let i = 0; i < self.value.length; i++){\n                        if(self.value[i].id == id){\n                            self.value.splice(i, 1); i--;\n                            break; // just remove one\n                        }\n                    }\n                    // Do something to signal that this item has been removed\n                    this.$emit(\"input\",this.value);\n                },\n                relocateStudyItem(item){\n                    const iteminfo = {'id': item.id, 'layer': this.layer, 'slot': this.slotindex, 'line_id': this.line.id};\n                    return call([{\n                        methodname: 'local_treestudyplan_reorder_studyitems',\n                        args: { 'items': [iteminfo] } // function was designed to relocate multiple items at once, hence the array\n                    }])[0].fail(notification.exception);\n                },\n                onDragEnter(event){\n                    this.hover.component = event.data;\n                    this.hover.type = event.type;\n                },\n                onDragLeave(){\n                    this.hover.component = null;\n                    this.hover.type = null;\n                },\n                maxSpan(){\n                    // Determine the maximum span for components in this slot\n                    // Used for setting the max in the timing adjustment screen(s)\n                    // And for checking the filter types\n\n                    // Assume this slot is first one available\n                    let freeIndex = this.slotindex;\n                    // Determine last free slot following this one in the layer\n                    for(let i = this.slotindex + 1; i <= this.page.periods; i++){\n                        if(this.line.slots && this.line.slots[i] && this.line.slots[i].courses){\n                            const clist = this.line.slots[i].courses;\n                            const flist = this.line.slots[i-1].filters; // next filter is in the same slot\n                            let busy = false;\n                            for(const ix in clist) {\n                                if( clist[ix].layer == this.layer) {\n                                    busy = true; // slot is busy in this layer.\n                                    break;\n                                }\n                            }\n                            for(const ix in flist) {\n                                if( flist[ix].layer == this.layer) {\n                                    busy = true; // slot is busy in this layer.\n                                    break;\n                                }\n                            }\n\n                            if(! busy) {\n                                // slot is free in this layer\n                                freeIndex = i;\n                            } else {\n                                break; // stop checking next slots\n                            }\n\n                        } else {\n                            break; // stop processing\n                        }\n                    }\n                    // calculate span from that\n                    return freeIndex - this.slotindex + 1;\n\n                },\n                makeType(item){\n                    return {\n                        item: true,\n                        component: false,\n                        span: item.span,\n                        type: this.type,\n                    };\n                },\n                checkType(type) {\n                    if(type.type == this.type){\n                        if(type == 'filter'){\n                             return true;\n                        } else if(type.span <= this.maxSpan()){\n                            return true;\n                        } else {\n                            return false;\n                        }\n                    } else {\n                        return false;\n                    }\n                }\n            },\n            template: `\n            <div :class=\"'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ' ' + ((slotindex==0)?' t-studyline-firstcolumn ':' ')\n                         + (current?'current ':' ')\"\n                :data-studyline=\"line.id\" ref=\"main\"\n                :style='spanCss'\n                ><drag v-if=\"item\"\n\n                    :key=\"item.id\"\n                    class=\"t-slot-item\"\n                    :data=\"item\"\n                    :type=\"makeType(item)\"\n                    @cut=\"onCut\"\n                        ><t-item\n                            @deleted=\"onCut\"\n                            v-model=\"value[itemidx]\"\n                            :plan=\"plan\"\n                            :line='line'\n                            :page='page'\n                            :period='period'\n                            :maxspan='maxSpan()'\n                        ></t-item\n                    ></drag\n                ><drop v-else\n                    :class=\"'t-slot-drop '+type + (layer > 0?' secondary':' primary')\"\n                    :accepts-type=\"checkType\"\n                    @drop=\"onDrop\"\n                    mode=\"cut\"\n                    @dragenter=\"onDragEnter\"\n                    @dragleave=\"onDragLeave\"\n                ><template v-if=\"hover.component\">\n                        <div v-if=\"hover.type.item\"\n                            class=\"t-slot-item feedback\"\n                            :key=\"hover.component.id\"\n                            ><t-item v-model=\"hover.component\" dummy></t-item\n                            ></div\n                        ><div v-else-if=\"hover.type.type == 'gradable'\"\n                            class=\"t-slot-item feedback\"\n                            :key=\"'course-'+hover.component.id\"\n                            ><t-item-course v-model=\"courseHoverDummy\"></t-item-course></div\n                        ><div v-else-if=\"hover.type.type == 'filter'\"\n                            class=\"t-slot-item feedback\"\n                            key=\"tooldrop\"\n                            ><t-item-junction    v-if=\"hover.component.type == 'junction'\" ></t-item-junction\n                            ><t-item-start       v-else-if=\"hover.component.type == 'start'\"    ></t-item-start\n                            ><t-item-finish      v-else-if=\"hover.component.type == 'finish'\"   ></t-item-finish\n                            ><t-item-badge       v-else-if=\"hover.component.type == 'badge'\"    ></t-item-badge\n                        ></div\n                        ><div v-else\n                            class=\"t-slot-item feedback\"\n                            :key=\"hover.type\">--{{ hover.type }}--</div\n                    ></template\n                ></drop>\n                <t-item-timing-checker hidden\n                    v-if=\"value && value[itemidx] && value[itemidx].course\"\n                    ref=\"timingChecker\"\n                    :maxspan=\"maxSpan()\"\n                    :page=\"page\"\n                    :period=\"period\"\n                    v-model=\"value[itemidx]\"\n                    ></t-item-timing-checker>\n            </div>\n            `,\n        });\n\n\n        Vue.component('t-item-timing-checker', {\n            props: {\n                value: {\n                    type: Object, // t-item model\n                },\n                page: {\n                    type: Object, // Studyplan data\n                },\n                period: {\n                    type: Object, // Studyplan data\n                },\n                maxspan: {\n                    type: Number,\n                },\n                hidden: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            computed: {\n                endperiod() {\n                    const endperiodnr = Math.min(this.page.periods,this.period.period + (this.value.span - 1));\n                    return this.page.perioddesc[endperiodnr-1];\n                },\n                course_period_matches() {\n                    const self=this;\n                    if(self.value && self.value.type == 'course'){\n                        self.datechanger.coursespan = datespaninfo(self.value.course.startdate,self.value.course.enddate);\n                        self.datechanger.periodspan = datespaninfo(self.period.startdate,self.endperiod.enddate);\n                        if( self.datechanger.coursespan.first.getTime() == self.datechanger.periodspan.first.getTime()\n                            && self.datechanger.coursespan.last.getTime() == self.datechanger.periodspan.last.getTime()  ){\n                            return true;\n                        }\n                        else {\n                            return false;\n                        }\n                    } else {\n                        debug.warn(\"Timing thing not proper configured\",self.value,self.period,self.maxspan);\n                        return false;\n                    }\n                },\n            },\n            data() {\n                return {\n                    // Create random id to avoid opening the wrong modals\n                    id: Math.floor(Math.random() * Date.now()).toString(16),\n                    text: strings.course_timing,\n                    datechanger: {\n                        coursespan: null,\n                        periodspan: null,\n                        globals: datechanger_globals,\n                    }\n                };\n            },\n            methods: {\n\n                validate_course_period(force) {\n                    const self = this;\n\n                    debug.info(\"Validating course and period\");\n                    if(!(self.course_period_matches)){\n                        debug.info(\"Course timing does not match period timing\");\n\n                        if(self.value.course.canupdatecourse){\n                            if(!self.hidden || !self.datechanger.globals.default){\n                                // Periods do not match, pop up the date change request\n                                this.$bvModal.show('t-course-timing-matching-'+this.id);\n                            } else if (self.datechanger.globals.defaultvalue){\n                                // go for it without asking\n                                self.change_course_period();\n                            }\n                        }\n                        else {\n                            // user is not able to change course timing - show a warning\n                            if(!self.hidden || !self.datechanger.globals.hidewarn){\n                                this.$bvModal.show('t-course-timing-warning-'+this.id);\n                            }\n                        }\n                    }\n                    else {\n                        debug.info(\"Course timing matches period\",self.datechanger);\n                    }\n                },\n                change_course_period() {\n                    const self=this;\n                    // Save the state\n                    if(self.datechanger.globals.default){\n                        self.datechanger.globals.defaultvalue = true;\n                    }\n                    return call([{\n                        methodname: 'local_treestudyplan_course_period_timing',\n                        args: { period_id: self.period.id,\n                                course_id: this.value.course.id,\n                                span: this.value.span,\n                            }\n                    }])[0].fail(notification.exception).done((response) => {\n                        self.value.course.startdate = response.startdate;\n                        self.value.course.enddate = response.enddate;\n                        self.value.course.timing = response.timing;\n                        self.$emit(\"input\",self.value);\n                    });\n                },\n                change_span(span) {\n                    const self=this;\n                    return call([{\n                        methodname: 'local_treestudyplan_set_studyitem_span',\n                        args: { id: self.value.id,\n                                span: span\n                            }\n                    }])[0].fail(notification.exception).done((response) => {\n                        self.value.span = response.span;\n                        self.$emit('input',self.value);\n                        self.$nextTick(() => {\n                            self.validate_course_period();\n                        });\n                    } );\n                },\n                format_duration(dsi){\n                    let s = \"\";\n                    if(dsi.years == 1){ s += `1 ${this.text.year}, `;}\n                    else if(dsi.years > 1){ s += `${dsi.years} ${this.text.years}, `;}\n                    if(dsi.weeks == 1){ s += `1 ${this.text.week}, `;}\n                    else if(dsi.weeks > 1){ s += `${dsi.weeks} ${this.text.weeks}, `;}\n                    if(dsi.days == 1){ s += `1 ${this.text.day}, `;}\n                    else if(dsi.days > 1){ s += `${dsi.days} ${this.text.days}, `;}\n\n                    return s.toLocaleLowerCase();\n                },\n            },\n            // To avoid the span creeping in the dom where it shouldn't, set display to none if it is hidden\n            // This does not affect the modals, which are rendered outside of this element when needed\n            template: `\n            <div :class=\"'t-item-timing-checker'\" :style=\"hidden?'display: none ':''\">\n                <template v-if=\"!hidden\" >\n                    <span class=\"mr-1\" v-if=\"course_period_matches\">\n                        <i  class=\"text-success fa fa-calendar-check-o\"\n                            v-b-tooltip.hover.topright :title=\"text.timing_ok\"\n                        ></i>\n                    </span>\n                    <span class=\"mr-1\" v-else>\n                        <a  href='#' @click=\"validate_course_period()\" class=\"text-warning\"\n                            v-b-tooltip.hover.bottomleft :title=\"text.timing_off\"\n                            ><i class=\"fa fa-calendar-times-o\"\n                            ></i\n                            ><i class=\"fa fa-question-circle text-black-50\"\n                                style=\"font-size: 0.8em; top: -0.3em; position: relative;\"\n\n                            ></i\n                        ></a>\n                    </span>\n                    <span class=\"ml-1\" v-b-tooltip.hover.bottomleft :title=\"text.periodspan_desc\"\n                        >{{ text.periodspan\n                        }}&nbsp;<b-form-select\n                            class=\"\"\n                            size=\"sm\" @change=\"change_span\" v-model=\"value.span\">\n                            <b-form-select-option v-for=\"(n,i) in maxspan\" :value='n' :key='i'\n                            >{{ n }}</b-form-select-option>\n                        </b-form-select\n                        >&nbsp;{{\n                            (value.span == 1)?text.period.toLowerCase():text.periods.toLowerCase()\n                        }}<i\n                            class=\"fa fa-question-circle text-black-50\"\n                            style=\"font-size: 0.8em; top: -0.3em; position: relative;\"\n                            ></i>\n                    </span>\n                </template>\n                <b-modal\n                    :id=\"'t-course-timing-matching-'+this.id\"\n                    size=\"lg\"\n                    :title=\"text.title\"\n                    @ok=\"change_course_period\"\n                    :ok-title=\"text.yes\"\n                    ok-variant=\"danger\"\n                    :cancel-title=\"text.no\"\n                    cancel-variant=\"primary\"\n                    >\n                    <b-container v-if=\"datechanger.coursespan && datechanger.periodspan && value && value.course\">\n                        <b-row><b-col cols=\"12\">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols=\"12\"><div class=\"generalbox alert alert-warning\">{{ text.question }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols=\"6\">\n                                <h3> {{ text.course }} </h3>\n                                <p class=\"mb-0\"><b>{{ value.course.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ value.course.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols=\"6\">\n                                <h3> {{ text.period }} </h3>\n                                <p class=\"mb-0\"><b>{{ period.fullname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ period.shortname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if='hidden' class=\"pt-2\"><b-col cols=\"12\">\n                            <b-form-checkbox type=\"checkbox\" v-model=\"datechanger.globals.default\">{{ text.rememberchoice }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n                <b-modal\n                    :id=\"'t-course-timing-warning-'+this.id\"\n                    size=\"lg\"\n                    ok-variant=\"primary\"\n                    :title=\"text.title\"\n                    :ok-title=\"text.yes\"\n                    ok-only\n                    >\n                    <b-container v-if=\"datechanger.coursespan && datechanger.periodspan && value && value.course\">\n                        <b-row><b-col cols=\"12\">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols=\"12\"><div class=\"generalbox alert alert-warning\">{{ text.warning }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols=\"6\">\n                                <h3> {{ text.course }} </h3>\n                                <p class=\"mb-0\"><b>{{ value.course.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ value.course.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols=>\"6\">\n                                <h3> {{ text.period }} </h3>\n                                <p class=\"mb-0\"><b>{{ period.fullname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ period.shortname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if='hidden' class=\"pt-2\"><b-col cols=\"12\">\n                            <b-form-checkbox type=\"checkbox\" v-model=\"datechanger.globals.hidewarn\">{{ text.hidewarning }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            `,\n        });\n\n\n        Vue.component('t-item', {\n            props: {\n                value :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                dummy :{\n                    type: Boolean,\n                    default() { return false;},\n                },\n                plan: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                line: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                page: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                period: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                maxspan: {\n                    type: Number,\n                    default() { return 0;},\n                },\n            },\n            data() {\n                return {\n                    dragLine: null,\n                    dragEventListener: null,\n                    deleteMode: false,\n                    condition_options: string_keys.conditions,\n                    text: strings.item_text,\n                    showContext: false,\n                    lines: [],\n                };\n            },\n            methods: {\n                dragStart(event){\n                    // Add line between start point and drag image\n                    this.deleteMode = false;\n                    let start = document.getElementById('studyitem-'+this.value.id);\n                    let dragelement= document.getElementById('t-item-cdrag-'+this.value.id);\n                    dragelement.style.position = 'fixed';\n                    dragelement.style.left = event.position.x+'px';\n                    dragelement.style.top = event.position.y+'px';\n                    this.dragLine = new SimpleLine(start,dragelement,{\n                            color: \"#777\",\n                            gravity: {\n                                start: LINE_GRAVITY,\n                                end: LINE_GRAVITY,\n                            },\n                        });\n                    // Add separate event listener to reposition mouse move\n                    document.addEventListener(\"mousemove\",this.onMouseMove);\n                },\n                dragEnd(){\n                    if(this.dragLine !== null) {\n                        this.dragLine.remove();\n                    }\n                    let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);\n                    dragelement.style.removeProperty('left');\n                    dragelement.style.removeProperty('top');\n                    dragelement.style.removeProperty('position');\n                    document.removeEventListener(\"mousemove\",this.onMouseMove);\n                },\n                onMouseMove: function(event){\n                    let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);\n                    dragelement.style.position = 'fixed';\n                    dragelement.style.left = event.clientX+'px';\n                    dragelement.style.top = event.clientY+'px';\n                    // line will follow automatically\n                },\n                onDrop(event){\n                    let from_id = event.data.id;\n                    let to_id = this.value.id;\n                    this.redrawLines();\n                    call([{\n                        methodname: 'local_treestudyplan_connect_studyitems',\n                        args: { 'from_id': from_id, 'to_id': to_id }\n                    }])[0].done((response)=>{\n                        let conn = {'id': response.id, 'from_id': response.from_id, 'to_id': response.to_id};\n                        ItemEventBus.$emit(\"createdConnection\",conn);\n                        this.value.connections.in.push(conn);\n                    }).fail(notification.exception);\n                },\n                redrawLine(conn){\n                    const lineColor = \"var(--success)\";\n                    const start = document.getElementById(`studyitem-${conn.from_id}`);\n                    const end = document.getElementById(`studyitem-${conn.to_id}`);\n\n                    // delete old line\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].remove();\n                        delete this.lines[conn.to_id];\n                    }\n                    // create a new line if the start and finish items are visible\n                    if(start !== null && end !== null && isVisible(start) && isVisible(end)){\n                        this.lines[conn.to_id] = new SimpleLine( start,end,{\n                            color: lineColor,\n                            gravity: {\n                                start: LINE_GRAVITY,\n                                end: LINE_GRAVITY,\n                            },\n                        });\n                    }\n\n                },\n                deleteLine(conn){\n                    const self = this;\n                    call([{\n                        methodname: 'local_treestudyplan_disconnect_studyitems',\n                        args: { 'from_id': conn.from_id, 'to_id': conn.to_id }\n                    }])[0].done((response)=>{\n                        if(response.success){\n                            this.removeLine(conn);\n                            // send disconnect event on message bus, so the connection on the other end can delete it too\n                            ItemEventBus.$emit(\"connectionDisconnected\",conn);\n                            // Remove connection from our outgoing list\n                            let index = self.value.connections.out.indexOf(conn);\n                            self.value.connections.out.splice(index, 1);\n                        }\n                    }).fail(notification.exception);\n                },\n                highlight(conn){\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].setConfig({color:\"var(--danger)\",});\n                    }\n                },\n                normalize(conn){\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].setConfig({color:\"var(--success)\",});\n                    }\n                },\n                updateItem() {\n                    call([{\n                        methodname: 'local_treestudyplan_edit_studyitem',\n                        args: { 'id': this.value.id,\n                                'conditions': this.value.conditions,\n                                'continuation_id': this.value.continuation_id,}\n                    }])[0].fail(notification.exception);\n                },\n                doShowContext(event) {\n                    if(this.hasContext){\n                        this.showContext=true;\n                        event.preventDefault();\n                    }\n                },\n                redrawLines(){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            this.redrawLine(conn);\n                        }\n                    }\n                },\n\n                // EVENT LISTENERS\n                onCreatedConnection(conn){\n                    if(conn.from_id == this.value.id){\n                        this.value.connections.out.push(conn);\n                        this.redrawLine(conn);\n                    }\n                },\n                // Listener for the signal that a connection was removed by the outgoing item\n                onRemovedConnection(conn){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.in){\n                            let c_in = this.value.connections.in[i];\n                            if(conn.id == c_in.id){\n                                self.value.connections.out.splice(i, 1);\n                            }\n                        }\n                    }\n                },\n                // Listener for reposition events\n                // When an item in the list is repositioned, all lines need to be redrawn\n                onRePositioned(){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            this.redrawLine(conn);\n                        }\n                    }\n                },\n                // When an item is disPositioned - (temporarily) removed from the list,\n                // all connections need to be deleted.\n                onDisPositioned(re_id){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            if(conn.to_id == re_id){\n                                this.removeLine(conn);\n                            }\n                        }\n                    }\n                },\n\n                // When an item is deleted\n                // all connections to/from that item need to be cleaned up\n                onItemDeleted(item_id){\n                    const self = this;\n                    if(this.value.connections && this.value.connections.out){\n                        for(const i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            if(conn.to_id == item_id){\n                                self.removeLine(conn);\n                                self.value.connections.out.splice(i, 1);\n                            }\n                        }\n                    }\n                    if(this.value.connections && this.value.connections.in){\n                        for(const i in this.value.connections.in){\n                            let conn = this.value.connections.in[i];\n                            if(conn.from_id == item_id){\n                                self.value.connections.out.splice(i, 1);\n                            }\n                        }\n                    }\n                },\n\n                onRedrawLines(){\n                    this.redrawLines();\n                },\n\n                removeLine(conn){\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].remove();\n                        delete this.lines[conn.to_id];\n                    }\n                },\n                deleteItem(){\n                    const self = this;\n                    const msgparams = {\n                        item: this.text['type_' + this.value.type].toLocaleLowerCase(),\n                        name: (this.value.type=='course')?this.value.course.displayname:\"\",\n                        line: (this.line) ? this.line.name : \"\",\n                        period: (this.period) ? this.period.fullname : this.plan.name,\n                    };\n\n                    this.$bvModal.msgBoxConfirm(strformat(this.text.item_delete_message, msgparams), {\n                        okVariant : 'danger',\n                        okTitle : this.text.ok,\n                        cancelTitle: this.text.cancel,\n                    }).then(value => {\n                        if ( value ) {\n                            // Confirmed to delete.\n                            call([{\n                                methodname: 'local_treestudyplan_delete_studyitem',\n                                args: { 'id': self.value.id, }\n                            }])[0].done(function(response){\n                                if(response.success == true){\n                                    self.$emit(\"deleted\",{ data: self.value });\n                                }\n                            }).fail(notification.exception);\n                        }\n                    }).catch(err => {\n                        debug.console.error(err);\n                    });\n                }\n\n\n            },\n            computed: {\n                hasConnectionsOut() {\n                    return !([\"finish\",].includes(this.value.type));\n                },\n                hasConnectionsIn() {\n                    return !([\"start\",].includes(this.value.type));\n                },\n                hasContext() {\n                    return ['start','junction','finish'].includes(this.value.type);\n                }\n            },\n            created(){\n                // Add event listeners on the message bus\n                // But only if not in \"dummy\" mode - mode which is used for droplist placeholders\n                // Since an item is \"fully made\" with all references, not specifying dummy mode really messes things up\n                if(!this.dummy){\n\n                    // Listener for the signal that a new connection was made and needs to be drawn\n                    // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines\n                    ItemEventBus.$on('createdConnection', this.onCreatedConnection);\n                    // Listener for the signal that a connection was removed by the outgoing item\n                    ItemEventBus.$on('removedConnection', this.onRemovedConnection);\n                    // Listener for reposition events\n                    // When an item in the list is repositioned, all lines need to be redrawn\n                    ItemEventBus.$on('rePositioned', this.onRePositioned);\n                    // When an item is disPositioned - (temporarily) removed from the list,\n                    // all connections need to be deleted.\n                    ItemEventBus.$on('disPositioned', this.onDisPositioned);\n                    // When an item is deleted\n                    // all connections to/from that item need to be cleaned up\n                    ItemEventBus.$on('itemDeleted', this.onItemDeleted);\n                    ItemEventBus.$on('redrawLines', this.onRedrawLines);\n\n\n                }\n            },\n            mounted(){\n                // Initialize connection lines when mounting\n                // But only if not in \"dummy\" mode - mode which is used for droplist placeholders\n                // Since an item is \"fully made\" with all references, not specifying dummy mode really messes things up\n\n                if(!this.dummy)\n                {\n                    this.redrawLines();\n                    setTimeout(()=>{\n                        ItemEventBus.$emit(\"rePositioned\",this.value.id);\n                    },10);\n                }\n            },\n            beforeDestroy(){\n                if(!this.dummy) {\n                    for(let i in this.value.connections.out){\n                        let conn = this.value.connections.out[i];\n                        this.removeLine(conn);\n                    }\n                    ItemEventBus.$emit(\"disPositioned\",this.value.id);\n\n                    // Remove event listeners\n                    ItemEventBus.$off('createdConnection', this.onCreatedConnection);\n                    ItemEventBus.$off('removedConnection', this.onRemovedConnection);\n                    ItemEventBus.$off('rePositioned', this.onRePositioned);\n                    ItemEventBus.$off('disPositioned', this.onDisPositioned);\n                    ItemEventBus.$off('itemDeleted', this.onItemDeleted);\n                    ItemEventBus.$off('redrawLines', this.onRedrawLines);\n                }\n            },\n            beforeUpdate(){\n            },\n            updated(){\n                if(!this.dummy) {\n                    this.redrawLines();\n                }\n            },\n            template: `\n            <div class=\"t-item-base\" :id=\"'studyitem-'+value.id\">\n                <t-item-course\n                    v-if=\"value.type == 'course'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                    :plan='plan'\n                    :page='page'\n                    :period='period'\n                    :maxspan='maxspan'\n                ></t-item-course>\n                <t-item-junction\n                    v-if=\"value.type == 'junction'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-junction>\n                <t-item-start\n                    v-if=\"value.type == 'start'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-start>\n                <t-item-finish\n                    v-if=\"value.type == 'finish'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-finish>\n                <t-item-badge\n                    v-if=\"value.type == 'badge'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-badge>\n                <t-item-invalid\n                    v-if=\"value.type == 'invalid'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-invalid>\n                <drop v-if='!dummy && hasConnectionsIn' accepts-type=\"linestart\"\n                    :id=\"'t-item-cend-'+value.id\"\n                    class=\"t-item-connector-end\"\n                    mode=\"copy\"\n                    @drop=\"onDrop\"\n                    ><svg width='5px' height='10px'><rect ry=\"1px\" rx=\"1px\" y=\"0px\" x=\"0px\" height=\"10px\" width=\"5px\"/></svg></drop>\n                <drag v-if='!dummy && hasConnectionsOut' type=\"linestart\"\n                    :id=\"'t-item-cstart-'+value.id\"\n                    :class=\"'t-item-connector-start ' + ((deleteMode&&value.connections.out.length)?'deleteMode':'')\"\n                    :data=\"value\"\n                    @dragstart=\"dragStart\"\n                    @dragend=\"dragEnd\"\n                    @click=\"deleteMode = (value.connections.out.length)?(!deleteMode):false\"\n                    >\n                    <svg  width='5px' height='10px'><rect ry=\"1px\" rx=\"1px\" y=\"0px\" x=\"0px\" height=\"10px\" width=\"5px\"/></svg>\n                    <template v-slot:drag-image=\"{data}\"> <i :id=\"'t-item-cdrag-'+value.id\" class=\"fa\"></i>\n                    </template>\n                </drag>\n                <div class=\"deletebox\" v-if=\"deleteMode && value.connections.out.length > 0\"\n                    >\n                    <a v-for=\"conn in value.connections.out\"\n                        @click=\"deleteLine(conn)\"\n                        @mouseenter=\"highlight(conn)\"\n                        @mouseleave=\"normalize(conn)\"\n                        class=\"t-connection-delete text-danger\"\n                        :title=\"conn.id\">\n                        <i class=\"fa fa-trash\"></i>\n                    </a>\n                </div>\n                <a  v-if=\"hasContext\" class=\"t-item-config\"\n                    v-b-modal=\"'t-item-config-'+value.id\" href=\"#\" @click.prevent=\"\"><i  class=\"fa fa-gear\"></i></a>\n                <b-modal no-body class=\"\"\n                    :id=\"'t-item-config-'+value.id\"\n                    :title=\"text['item_configuration']\"\n                    scrollable\n                    ok-only\n                    class=\"t-item-contextview b-modal-justify-footer-between\"\n                >\n                    <b-form-group\n                        v-if=\"value.type != 'start'\"\n                        :label=\"text.select_conditions\"\n                    >\n                        <b-form-select size=\"sm\"\n                            @input=\"updateItem\"\n                            v-model=\"value.conditions\"\n                            :options=\"condition_options\"\n                        ></b-form-select>\n                    </b-form-group>\n\n                   <template #modal-footer=\"{ ok, cancel, hide }\" >\n                    <a href='#' @click='deleteItem()' class=\"text-danger\"\n                        ><i class=\"fa fa-trash\"></i>\n                        {{ text.delete }}\n                    </a>\n                    <b-button size=\"sm\" variant=\"primary\" @click=\"ok()\">\n                      {{ text.ok }}\n                    </b-button>\n                  </template>\n\n                </b-modal>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-invalid', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default: function(){ return null;},\n                },\n            },\n            data() {\n                return {\n                    text: strings.invalid,\n                };\n            },\n            methods: {\n            },\n            template: `\n            <div class=\"t-item-invalid\">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span class=\"t-timing-indicator timing-invalid\"></span>\n                    </b-col>\n                    <b-col md=\"11\">\n                        <b-card-body class=\"align-items-center\">\n                            <i class=\"fa fa-exclamation\"></i> {{text.error}}\n                            <a href='#' @click='$emit(\"deleterq\")' class=\"text-danger\"\n                            ><i class=\"fa fa-trash\"></i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-course', {\n            props: {\n                value:{\n                    type: Object,\n                    default(){ return null;},\n                },\n                plan:{\n                    type: Object,\n                    default(){ return null;},\n                },\n                page: {\n                    type: Object, // PAge data\n                    default() { return null;}\n                },\n                period: {\n                    type: Object, // Period data\n                    default() { return null;}\n                },\n                maxspan: {\n                    type: Number,\n                    default() { return 0;}\n                },\n            },\n            data() {\n                return {\n                    condition_options: string_keys.conditions,\n                    text: strings.item_course_text,\n                };\n            },\n            computed: {\n                useItemConditions() {\n                    if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useItemConditions !== undefined){\n                        return this.plan.aggregation_info.useItemConditions;\n                    }\n                    else {\n                        return false;\n                    }\n                },\n\n                configurationState(){\n                    if(this.hasGrades() || this.hasCompletions()) {\n                        return \"t-configured-ok\";\n                    } else {\n                        return \"t-configured-alert\";\n                    }\n                },\n\n                configurationIcon(){\n                    if(this.hasGrades() || this.hasCompletions()) {\n                        return \"check\";\n                    } else {\n                        return \"exclamation-circle\";\n                    }\n                },\n                startdate(){\n                    return format_date(this.value.course.startdate);\n                },\n                enddate(){\n                    if(this.value.course.enddate){\n                        return format_date(this.value.course.enddate);\n                    }\n                    else {\n                        return this.text.noenddate;\n                    }\n                }\n\n            },\n            methods: {\n                hasGrades() {\n                    if(this.value.course.grades && this.value.course.grades.length > 0){\n                        for(const g of this.value.course.grades){\n                            if(g.selected){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n                hasCompletions() {\n                    if(this.value.course.completion && this.value.course.completion.conditions) {\n                        for(const cgroup of this.value.course.completion.conditions){\n                            if(cgroup.items && cgroup.items.length > 0){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n                includeChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': newValue,\n                                'required': g.required,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n                requiredChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': g.selected,\n                                'required': newValue,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n                updateConditions() {\n                    call([{\n                        methodname: 'local_treestudyplan_edit_studyitem',\n                        args: { 'id': this.value.id,\n                                'conditions': this.value.conditions,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n            },\n            created() {\n\n            },\n            template: `\n            <div class=\"t-item-course\">\n            <b-card no-body >\n                <div class='d-flex flex-wrap mr-0 ml-0'>\n                    <div>\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'t-timing-indicator timing-'+value.course.timing\"></span>\n                    </div>\n                    <div class=\"flex-fill align-items-center\">\n                        <b-card-body >\n                            <a  class=\"t-item-course-config\"\n                                v-b-modal=\"'t-item-course-config-'+value.id\"\n                                href=\"#\" @click.prevent=\"\"\n                                ><i :class=\"'fa fa-'+configurationIcon+' ' + configurationState\"></i></a>\n                            <a  v-b-modal=\"'t-item-course-config-'+value.id\"\n                                :id=\"'t-item-course-details-'+value.id\"\n                                :href=\"'/course/view.php?id='+value.course.id\"\n                                @click.prevent.stop=\"\">{{ value.course.displayname }}</a>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal class=\"\"\n                    :id=\"'t-item-course-config-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    ok-only\n                    size=\"lg\"\n                    scrollable\n                    class=\"b-modal-justify-footer-between\"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"'/course/view.php?id='+value.course.id\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a>\n                                <a v-if='!!value.course.completion'\n                                    :href=\"'/course/completion.php?id='+value.course.id\"  target=\"_blank\"\n                                :title=\"text.configure_completion\"><i class=\"fa fa-gear\"></i></a>\n                                </h1>\n                            {{ value.course.context.path.join(\" / \")}} / {{value.course.shortname}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                            <t-item-timing-checker\n                                class=\"mt-1\"\n                                :maxspan=\"maxspan\"\n                                :page=\"page\"\n                                :period=\"period\"\n                                v-model=\"value\"\n                             ></t-item-timing-checker>\n                        </div>\n                    </template>\n\n                    <t-item-course-grades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value' :plan=\"plan\"\n                        ></t-item-course-grades>\n                    <t-item-course-completion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        ></t-item-course-completion>\n\n                    <template #modal-footer=\"{ ok, cancel, hide }\" >\n                        <a href='#' @click='$emit(\"deleterq\")' class=\"text-danger\"\n                            ><i class=\"fa fa-trash\"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size=\"sm\" variant=\"primary\" @click=\"ok()\">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n            </b-card></div>\n            `,\n        });\n\n\n        Vue.component('t-item-course-grades', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                'plan' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n            },\n            data() {\n                return {\n                    condition_options: string_keys.conditions,\n                    text: strings.item_course_text,\n                };\n            },\n            computed: {\n                useRequiredGrades() {\n                    if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useRequiredGrades !== undefined){\n                        return this.plan.aggregation_info.useRequiredGrades;\n                    }\n                    else {\n                        return false;\n                    }\n                },\n                selectedgrades(){\n                    let list = [];\n                    for(let ix in this.value.course.grades){\n                        let g = this.value.course.grades[ix];\n                        if(g.selected){\n                            list.push(g);\n                        }\n                    }\n                    return list;\n                },\n            },\n            methods: {\n                includeChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': newValue,\n                                'required': g.required,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n                requiredChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': g.selected,\n                                'required': newValue,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n            },\n            created() {\n\n            },\n            template: `\n            <div>\n                <b-form-group\n                    :label=\"text.select_grades\"\n                    ><ul class=\"t-item-module-children\">\n                        <li class=\"t-item-course-gradeinfo\">\n                            <span class='t-item-course-chk-lbl'>{{text.grade_include}}</span\n                            ><span v-if=\"useRequiredGrades\"  class='t-item-course-chk-lbl'>{{text.grade_require}}</span>\n                        </li>\n                        <li class=\"t-item-course-gradeinfo\" v-for=\"g in value.course.grades\">\n                            <b-form-checkbox inline\n                                @change=\"includeChanged($event,g)\" v-model=\"g.selected\"\n                                ></b-form-checkbox>\n                            <b-form-checkbox v-if=\"useRequiredGrades\" inline :disabled=\"!g.selected\"\n                                @change=\"requiredChanged($event,g)\" v-model=\"g.required\"\n                                ></b-form-checkbox>\n                            <span :title=\"g.typename\" v-html=\"g.icon\"></span>\n                            <s-edit-mod\n                                :title=\"value.course.fullname\"\n                                @saved=\"(fd) => g.name = fd.get('name')\"\n                                v-if=\"g.cmid > 0\"\n                                :cmid=\"g.cmid\"\n                                :coursectxid=\"value.course.ctxid\"\n                                genericonly><span v-html=\"g.name\"></span></s-edit-mod>\n                        </li>\n                    </ul>\n                </b-form-group>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-course-completion',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                course: {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                    text: strings.completion,\n                };\n            },\n            created(){\n                const self = this;\n                // Get text strings for condition settings\n                let stringkeys = [];\n                for(const key in  this.text){\n                    stringkeys.push({ key: key, component: 'local_treestudyplan'});\n                }\n                get_strings(stringkeys).then(function(strings){\n                    let i = 0;\n                    for(const key in  self.text){\n                        self.text[key] = strings[i];\n                        i++;\n                    }\n                });\n            },\n            computed: {\n                hasCompletions() {\n                    if(this.value.conditions) {\n                        for(const cgroup of this.value.conditions){\n                            if(cgroup.items && cgroup.items.length > 0){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n            },\n            methods: {\n                completion_icon(completion) {\n                    switch(completion){\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"complete\":\n                            return \"check-circle\";\n                        case \"complete-pass\":\n                            return \"check-circle\";\n                        case \"complete-fail\":\n                            return \"times-circle\";\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                    }\n                },\n\n                completion_tag(cgroup){\n                    return cgroup.completion?'completed':'incomplete';\n                }\n            },\n            template: `\n            <table class=\"r-item-course-grade-details\">\n                <tr v-if=\"hasCompletions\">\n                    <td colspan='2'><span v-if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any}}</span></td>\n                </tr>\n                <tr v-else>\n                    <td colspan='2'>{{text.completion_not_configured}}!\n                    <br/><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                    </td>\n                </tr>\n                <template v-for='cgroup in value.conditions'>\n                    <tr>\n                        <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                        ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span>\n                        {{cgroup.title}}</th>\n                    </tr>\n                    <tr v-for='ci in cgroup.items'>\n                        <td><span v-html='ci.details.criteria'></span>\n                        </td>\n                        <td v-if=\"ci.details.requirement\" class=\"font-italic\">\n                            {{ci.details.requirement}}\n                        </td>\n                    </tr>\n                </template>\n            </table>\n            `,\n        });\n\n\n        /************************************\n        *                                  *\n        * Toolbox list components          *\n        *                                  *\n        ************************************/\n        Vue.component('t-item-junction',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                    condition_options: string_keys.conditions,\n                };\n            },\n            methods: {\n\n            },\n            template: `\n            <div class='t-item-junction  t-item-filter'>\n                <i class=\"fa fa-check-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-finish',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            methods: {\n            },\n            template: `\n            <div class='t-item-finish t-item-filter'>\n                <i class=\"fa fa-stop-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-start',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            created(){\n\n            },\n            methods: {\n            },\n            template: `\n            <div class='t-item-start t-item-filter'>\n                <i class=\"fa fa-play-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-badge',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return { badge: {}};},\n                },\n            },\n            data() {\n                return {\n                    txt: strings,\n                    text: strings.item_text,\n                };\n            },\n            methods: {\n            },\n            template: `\n            <div class='t-item-badge t-item-filter' v-b-tooltip.hover :title=\"value.badge.name\">\n                <svg class=\"t-badge-backdrop \" width='50px' height='50px' viewBox=\"0 0 100 100\">\n                    <title>{{value.badge.name}}</title>\n                    <circle cx=\"50\" cy=\"50\" r=\"46\"\n                        style=\"stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;\"/>\n                    <image class=\"badge-image\" clip-path=\"circle() fill-box\"\n                        :href=\"value.badge.imageurl\" x=\"12\" y=\"12\" width=\"76\" height=\"76\"/>\n                </svg>\n                <a class=\"t-item-config badge\"\n                v-b-modal=\"'t-item-badge-details-'+value.id\" href=\"#\" @click.prevent=\"\"><i  class=\"fa fa-gear\"></i></a>\n                <b-modal class=\"\"\n                    :id=\"'t-item-badge-details-'+value.id\"\n                    :title=\"value.badge.name\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    class=\"b-modal-justify-footer-between\"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class=\"fa fa-certificate\"></i>\n                                <a :href=\"value.badge.infolink\" target=\"_blank\"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols=\"3\">\n                            <img :src=\"value.badge.imageurl\"/>\n                        </b-col><b-col cols=\"9\">\n                            <p>{{value.badge.description}}</p>\n                            <ul class=\"list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1\"\n                             v-if=\"value.badge.criteria\"><li v-for=\"crit in value.badge.criteria\"\n                             ><span v-html='crit'></span></li></ul>\n                            <p><strong><i class=\"fa fa-link\"></i>\n                                <a :href=\"value.badge.infolink\">{{ txt.badge.badgeinfo }}</a></strong></p>\n                        </b-col></b-row>\n                    </b-container>\n                    <template #modal-footer=\"{ ok, cancel, hide }\" >\n                        <a href='#' @click='$emit(\"deleterq\")' class=\"text-danger\"\n                            ><i class=\"fa fa-trash\"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size=\"sm\" variant=\"primary\" @click=\"ok()\">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n\n            </div>\n            `,\n        });\n\n        Vue.component('t-coursecat-list',{\n            props: {\n                value : {\n                    type: Array,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            methods: {\n            },\n            template: `\n            <ul class=\"t-coursecat-list\">\n                <t-coursecat-list-item\n                    v-for=\"coursecat,idx in value\"\n                    v-model=\"value[idx]\"\n                    :key=\"coursecat.id\"></t-coursecat-list-item>\n            </ul>\n            `,\n        });\n\n        Vue.component('t-coursecat-list-item',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                    loading: false,\n\n                };\n            },\n            computed: {\n                showSpinner() {\n                    return this.canLoadMore();\n                },\n                hasDetails() {\n                    return (this.value.haschildren || this.value.hascourses);\n                }\n\n            },\n            methods: {\n                canLoadMore() {\n                    return (this.value.haschildren && (!this.value.children || this.value.children.length == 0)) ||\n                        (this.value.hascourses && (!this.value.courses || this.value.courses.length == 0));\n                },\n                onShowDetails(){\n                    const self = this;\n                    if(this.canLoadMore()) {\n                        call([{\n                            methodname: 'local_treestudyplan_get_category',\n                            args: { \"id\": this.value.id}\n                        }])[0].done(function(response){\n                            self.$emit('input', response);\n                        }).fail(notification.exception);\n                    }\n                }\n            },\n            template: `\n            <li class=\"t-coursecat-list-item\">\n                <span v-if=\"hasDetails\" v-b-toggle=\"'coursecat-'+value.id\">\n                    <i class=\"when-closed fa fa-caret-right\"></i>\n                    <i class=\"when-open fa fa-caret-down\"></i>\n                    <span class=\"t-coursecat-heading\">\n                        <i class=\"t-coursecat-list-item fa fa-tasks\"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <span v-else>\n                    <span class=\"t-coursecat-heading\">\n                        <i class=\"t-coursecat-list-item fa fa-tasks\"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <b-collapse v-if=\"hasDetails\" :id=\"'coursecat-'+value.id\"\n                    @show=\"onShowDetails\" :visible=\"!!(value.children) || !!(value.courses)\">\n                    <b-spinner class=\"ml-4\" v-if=\"showSpinner\" small variant=\"primary\"></b-spinner>\n                    <t-coursecat-list v-if=\"value.children\" v-model=\"value.children\"></t-coursecat-list>\n                    <t-course-list v-if=\"value.courses\" v-model=\"value.courses\"></t-course-list>\n                </b-collapse>\n            </li>\n            `,\n        });\n\n        Vue.component('t-course-list',{\n            props: {\n                value : {\n                    type: Array,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            methods: {\n                makeType(){\n                    return {\n                        item: false,\n                        component: true,\n                        span: 1, //TODO: Detect longer courses and give them an appropriate span\n                        type: 'gradable',\n                    };\n                },\n            },\n            template: `\n            <ul class=\"t-course-list\">\n                <li class=\"t-course-list-item\" v-for=\"course in value\" :key=\"course.id\">\n                    <drag\n                        class=\"draggable-course\"\n                        :data=\"course\"\n                        :type=\"makeType()\"\n                        @cut=\"\"\n                    >\n                    <i class=\"t-course-list-item fa fa-book\"></i> {{ course.shortname }} - {{ course.fullname }}\n                    </drag>\n                </li>\n            </ul>\n            `,\n        });\n\n    },\n};\n"],"names":["STUDYPLAN_EDITOR_FIELDS","STUDYPLAN_EDITOR_PAGE_FIELDS","PERIOD_EDITOR_FIELDS","datechanger_globals","default","defaultchoice","hidewarn","install","Vue","use","TSComponents","mFormComponents","debug","Debugger","isVisible","elem","offsetWidth","offsetHeight","getClientRects","length","ItemEventBus","string_keys","conditions","value","textkey","strings","studyplan_text","studyline_editmode","toolbox_toggle","editmode_modules_hidden","studyline_add","add$core","edit$core","studyline_name","studyline_name_ph","studyline_shortname","studyline_shortname_ph","studyline_color","associations","associated_cohorts","associated_users","studyline_edit","studyplan_name","studyplan_name_ph","studyplan_shortname","studyplan_shortname_ph","studyplan_description","studyplan_description_ph","studyplan_idnumber","studyplan_idnumber_ph","studyplan_slots","studyplan_startdate","studyplan_enddate","studyplan_advanced","advanced_tools","confirm_cancel","confirm_ok","success$core","error$core","advanced_converted","advanced_skipped","advanced_failed","advanced_locked","advanced_multiple","advanced_error","advanced_tools_heading","advanced_warning_title","advanced_warning","advanced_pick_scale","advanced_course_manipulation_title","advanced_force_scale_title","advanced_force_scale_desc","advanced_force_scale_button","advanced_disable_autoenddate_title","advanced_disable_autoenddate_desc","advanced_disable_autoenddate_button","advanced_confirm_header","advanced_force_scale_confirm","advanced_import","advanced_export","advanced_export_csv","advanced_import_from_file","advanced_purge","advanced_purge_expl","advanced_cascade_cohortsync_title","advanced_cascade_cohortsync_desc","advanced_cascade_cohortsync","studyplan_edit","studyplan_context","choose_aggregation_style","setting_bistate_thresh_excellent","settingdesc_bistate_thresh_excellent","setting_bistate_thresh_good","settingdesc_bistate_thresh_good","setting_bistate_thresh_completed","settingdesc_bistate_thresh_completed","setting_bistate_support_failed","settingdesc_bistate_support_failed","setting_bistate_thresh_progress","settingdesc_bistate_thresh_progress","setting_bistate_accept_pending_submitted","settingdesc_bistate_accept_pending_submitted","period_edit","edit","fullname","shortname","startdate","enddate","course_timing","title","desc","question","warning","timing_ok","timing_off","course","period","yes","no","duration","years","year","weeks","week","days","day","rememberchoice","hidewarning","periodspan","periods","periodspan_desc","studyplan_associate","associate_cohorts","associate_users","add_association","delete_association","associations_empty","associations_search","cohorts","users","selected","name","context","item_text","select_conditions","item_configuration","ok","delete","item_delete_message","type_course","type_junction","type_start","type_finish","type_badge","type_invalid","item_course_text","select_grades","coursetiming_past","coursetiming_present","coursetiming_future","grade_include","grade_require","cancel","invalid","error","completion","completion_completed","completion_incomplete","aggregation_all","aggregation_any","aggregation_overall_all","aggregation_overall_any","completion_not_configured","configure_completion","badge","share_badge","dateissued","dateexpire","badgeinfo","component","props","type","Object","data","force_scales","selected_scale","result","text","created","mounted","updated","computed","scales","id","disabled","this","concat","advanced","methods","disable_autoenddate","self","methodname","args","studyplan_id","done","response","$bvModal","msgBoxConfirm","success","msg","fail","notification","exception","force_scales_start","okVariant","okTitle","cancelTitle","then","_this","scale_id","export_plan","format","undefined","includes","content","import_studylines","filename","_this2","location","reload","purge_studyline","force","cascade_cohortsync","msgBoxOk","modal_close","template","String","Number","show","config","userfields","key","cohortfields","editdata","description","idnumber","context_id","contextid","Date","getFullYear","aggregation","defaultAggregation","aggregation_config","aggregation_parsed","aggregators","categories","category","path","ix","ag","defaultconfig","JSON","parse","e","warn","operation","cat","pathname","join","editPlanStart","mode","pages","editPlanFinish","method","stringify","$emit","moved_from","moved_to","moved","info","numberFilter","association","loading","search","associated","showModal","loadAssociations","cohortOptionModel","c","userOptionModel","u","firstname","lastname","map","searchCohorts","searchtext","like","exclude_id","cohortAssociate","requests","searchselected","i","r","push","cohort_id","cohortDisassociate","associatedselected","searchUsers","userAssociate","user_id","userDisassociate","editStart","editFinish","refresh","add_day","date","sub_day","create","studyline","toolbox_shown","editmode","color","original","studyplan","slots","aggregation_info","useRequiredGrades","useItemCondition","cache","linelayers","page","studylines","$root","columns","columns_stylerule","s","trashbin_accepts","item","countLineLayers","line","timestamp","maxLayer","courses","layer","filters","slotsempty","Array","isArray","count","movedStudyplan","plan","from","to","addStudyLine","newlineinfo","editLineStart","assign","editLineFinish","editedline","originalline","deleteLine","param","modalresponse","index","indexOf","splice","reorderLines","event","lines","apply","sequence","idx","deletePlan","deleteStudyItem","source","showslot","layeridx","forGradable","list","span","periodEdited","pi","prev","$refs","next","toolbox_switched","layers","layerHeights","$on","onLineHeightChange","lineid","layerid","newheight","main","items","document","querySelectorAll","heightSum","forEach","el","height","getBoundingClientRect","heightStyle","style","deletable","editable","onEdit","onDelete","slotindex","resizeListener","ResizeObserver","size","observe","unmounted","disconnect","slotkey","itemidx","itm","listtype","dragacceptlist","courseHoverDummy","hover","current","now","pstart","pend","spanCss","datechanger","coursespan","onDrop","slot","relocateStudyItem","_this3","timingChecker","validate_course_period","$nextTick","onCut","iteminfo","onDragEnter","onDragLeave","maxSpan","freeIndex","clist","flist","busy","makeType","checkType","maxspan","hidden","Boolean","endperiod","endperiodnr","Math","min","perioddesc","course_period_matches","first","getTime","last","floor","random","toString","globals","canupdatecourse","defaultvalue","change_course_period","period_id","course_id","timing","change_span","format_duration","dsi","toLocaleLowerCase","dummy","dragLine","dragEventListener","deleteMode","condition_options","showContext","dragStart","start","getElementById","dragelement","position","left","x","top","y","SimpleLine","gravity","end","addEventListener","onMouseMove","dragEnd","remove","removeProperty","removeEventListener","clientX","clientY","from_id","to_id","redrawLines","conn","_this4","connections","in","redrawLine","_this5","removeLine","out","highlight","setConfig","normalize","updateItem","continuation_id","doShowContext","hasContext","preventDefault","onCreatedConnection","onRemovedConnection","c_in","onRePositioned","onDisPositioned","re_id","onItemDeleted","item_id","onRedrawLines","deleteItem","msgparams","displayname","catch","err","console","hasConnectionsOut","hasConnectionsIn","setTimeout","_this6","beforeDestroy","$off","beforeUpdate","useItemConditions","configurationState","hasGrades","hasCompletions","configurationIcon","noenddate","grades","cgroup","includeChanged","newValue","g","required","requiredChanged","updateConditions","selectedgrades","guestmode","stringkeys","completion_icon","completion_tag","txt","showSpinner","canLoadMore","hasDetails","haschildren","hascourses","children","onShowDetails"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"studyplan-editor-components.min.js","sources":["../src/studyplan-editor-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 {call} from 'core/ajax';\nimport notification from 'core/notification';\nimport {get_strings} from 'core/str';\nimport {load_stringkeys, load_strings, strformat } from './util/string-helper';\nimport {format_date, add_days, datespaninfo } from './util/date-helper';\nimport {objCopy,transportItem} from './studyplan-processor';\nimport Debugger from './util/debugger';\nimport {download,upload} from './downloader';\nimport {ProcessStudyplan} from './studyplan-processor';\n\nimport TSComponents from './treestudyplan-components';\nimport mFormComponents from \"./util/mform-helper\";\n\n\nconst STUDYPLAN_EDITOR_FIELDS =\n['name','shortname','description','idnumber','context_id', 'aggregation','aggregation_config'];\nconst STUDYPLAN_EDITOR_PAGE_FIELDS =  //TODO: Add 'fullname', 'shortname' and 'description' when implementing proper page management\n['context_id', 'periods','startdate','enddate'];\nconst PERIOD_EDITOR_FIELDS =\n['fullname','shortname','startdate','enddate'];\n\nconst LINE_GRAVITY = 1.3;\n\nconst datechanger_globals = {\n    default: false,\n    defaultchoice: false,\n    hidewarn: false,\n};\n\nexport default {\n    STUDYPLAN_EDITOR_FIELDS: STUDYPLAN_EDITOR_FIELDS, // make copy available in plugin\n    install(Vue/*,options*/){\n        Vue.use(TSComponents);\n        Vue.use(mFormComponents);\n        let debug = new Debugger(\"treestudyplan-editor\");\n\n        /************************************\n         *                                  *\n         * Treestudyplan Editor components  *\n         *                                  *\n         ************************************/\n\n        /**\n         * Check if element is visible\n         * @param {Object} elem The element to check\n         * @returns {boolean} True if visible\n         */\n        function isVisible(elem){\n            return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );\n        }\n\n\n        // Create new eventbus for interaction between item components\n        const ItemEventBus = new Vue();\n\n        let string_keys = load_stringkeys({\n            conditions: [\n                { value: 'ALL', textkey: 'condition_all'},\n                { value: 'ANY', textkey: 'condition_any'},\n            ],\n        });\n\n        let strings = load_strings({\n            studyplan_text: {\n                studyline_editmode: 'studyline_editmode',\n                toolbox_toggle: 'toolbox_toggle',\n                editmode_modules_hidden:'editmode_modules_hidden',\n                studyline_add: 'studyline_add',\n                add$core: 'add$core',\n                edit$core: 'edit$core',\n                studyline_name: 'studyline_name',\n                studyline_name_ph: 'studyline_name_ph',\n                studyline_shortname: 'studyline_shortname',\n                studyline_shortname_ph: 'studyline_shortname_ph',\n                studyline_color: 'studyline_color',\n                associations: 'associations',\n                associated_cohorts: 'associated_cohorts',\n                associated_users: 'associated_users',\n                studyline_edit: 'studyline_edit',\n                studyplan_name: 'studyplan_name',\n                studyplan_name_ph: 'studyplan_name_ph',\n                studyplan_shortname: 'studyplan_shortname',\n                studyplan_shortname_ph: 'studyplan_shortname_ph',\n                studyplan_description: 'studyplan_description',\n                studyplan_description_ph: 'studyplan_description_ph',\n                studyplan_idnumber: 'studyplan_idnumber',\n                studyplan_idnumber_ph: 'studyplan_idnumber_ph',\n                studyplan_slots: 'studyplan_slots',\n                studyplan_startdate: 'studyplan_startdate',\n                studyplan_enddate: 'studyplan_enddate',\n            },\n            studyplan_advanced: {\n                advanced_tools: 'advanced_tools',\n                confirm_cancel: 'confirm_cancel',\n                confirm_ok: 'confirm_ok',\n                success$core: 'success$core',\n                error$core: 'failed$core',\n                advanced_converted: 'advanced_converted',\n                advanced_skipped: 'advanced_skipped',\n                advanced_failed: 'advanced_failed',\n                advanced_locked: 'advanced_locked',\n                advanced_multiple: 'advanced_multiple',\n                advanced_error: 'advanced_error',\n                advanced_tools_heading: 'advanced_tools_heading',\n                advanced_warning_title: 'advanced_warning_title',\n                advanced_warning: 'advanced_warning',\n                advanced_pick_scale: 'advanced_pick_scale',\n                advanced_course_manipulation_title: 'advanced_course_manipulation_title',\n                advanced_force_scale_title: 'advanced_force_scale_title',\n                advanced_force_scale_desc: 'advanced_force_scale_desc',\n                advanced_force_scale_button: 'advanced_force_scale_button',\n                advanced_disable_autoenddate_title: 'advanced_disable_autoenddate_title',\n                advanced_disable_autoenddate_desc: 'advanced_disable_autoenddate_desc',\n                advanced_disable_autoenddate_button: 'advanced_disable_autoenddate_button',\n                advanced_confirm_header: 'advanced_confirm_header',\n                advanced_force_scale_confirm: 'advanced_force_scale_confirm',\n                advanced_import: 'advanced_import',\n                advanced_export: 'advanced_export',\n                advanced_export_csv: 'advanced_export_csv',\n                advanced_import_from_file: 'advanced_import_from_file',\n                advanced_purge: \"advanced_purge\",\n                advanced_purge_expl: \"advanced_purge_expl\",\n                advanced_cascade_cohortsync_title: \"advanced_cascade_cohortsync_title\",\n                advanced_cascade_cohortsync_desc: \"advanced_cascade_cohortsync_desc\",\n                advanced_cascade_cohortsync: \"advanced_cascade_cohortsync\",\n            },\n            studyplan_edit: {\n                studyplan_edit: 'studyplan_edit',\n                studyplan_add: 'studyplan_add',\n            },\n            period_edit: {\n                edit: 'period_edit',\n                fullname: 'studyplan_name',\n                shortname: 'studyplan_shortname',\n                startdate: 'studyplan_startdate',\n                enddate: 'studyplan_enddate',\n            },\n            course_timing: {\n                title: 'course_timing_title',\n                desc: 'course_timing_desc',\n                question: 'course_timing_question',\n                warning: 'course_timing_warning',\n                timing_ok: 'course_timing_ok',\n                timing_off: 'course_timing_off',\n                course: 'course@core',\n                period: 'period',\n                yes: 'yes$core',\n                no: 'no$core',\n                duration: 'duration',\n                years: 'years$core',\n                year: 'year$core',\n                weeks: 'weeks$core',\n                week: 'week$core',\n                days: 'days$core',\n                day: 'day$core',\n                rememberchoice: 'course_timing_rememberchoice',\n                hidewarning: 'course_timing_hidewarning',\n                periodspan: 'course_period_span',\n                periods: 'periods',\n                periodspan_desc: 'course_period_span_desc',\n            },\n            studyplan_associate: {\n                associations: 'associations',\n                associated_cohorts: 'associated_cohorts',\n                associated_users: 'associated_users',\n                associate_cohorts: 'associate_cohorts',\n                associate_users: 'associate_users',\n                add_association: 'add_association',\n                delete_association: 'delete_association',\n                associations_empty: 'associations_empty',\n                associations_search: 'associations_search',\n                cohorts: 'cohorts',\n                users: 'users',\n                selected: 'selected',\n                name: 'name',\n                context: 'context',\n            },\n            item_text: {\n                select_conditions: \"select_conditions\",\n                item_configuration: \"item_configuration\",\n                ok: \"ok@core\",\n                delete: \"delete@core\",\n                item_delete_message: \"item_delete_message\",\n                type_course: \"course@core\",\n                type_junction: \"tool-junction\",\n                type_start: \"tool-start\",\n                type_finish: \"tool-finish\",\n                type_badge: \"tool-badge\",\n                type_invalid: \"course-invalid\",\n            },\n            item_course_text: {\n                select_conditions: \"select_conditions\",\n                select_grades: \"select_grades\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                grade_include: \"grade_include\",\n                grade_require: \"grade_require\",\n                ok: \"ok@core\",\n                cancel: \"cancel@core\",\n                delete: \"delete@core\",\n            },\n            invalid: {\n                error: 'error',\n            },\n            completion: {\n                completion_completed: \"completion_completed\",\n                completion_incomplete: \"completion_incomplete\",\n                aggregation_all: \"aggregation_all\",\n                aggregation_any: \"aggregation_any\",\n                aggregation_overall_all: \"aggregation_overall_all\",\n                aggregation_overall_any: \"aggregation_overall_any\",\n                completion_not_configured: \"completion_not_configured\",\n                configure_completion: \"configure_completion\",\n            },\n            badge: {\n                share_badge: \"share_badge\",\n                dateissued: \"dateissued\",\n                dateexpire: \"dateexpire\",\n                badgeinfo: \"badgeinfo\",\n            },\n\n        });\n\n\n        /*\n        * T-STUDYPLAN-ADVANCED\n        */\n        Vue.component('t-studyplan-advanced', {\n            props: {\n                value: {\n                    type: Object,\n                    default(){ return null;},\n                },\n            },\n            data() {\n                return {\n                    force_scales: {\n                        selected_scale: null,\n                        result: [],\n                    },\n                    text: strings.studyplan_advanced,\n                };\n            },\n            created() {\n            },\n            mounted() {\n            },\n            updated() {\n\n            },\n            computed: {\n                scales(){\n                    return [{\n                        id: null,\n                        disabled: true,\n                        name: this.text.advanced_pick_scale,\n                    }].concat(this.value.advanced.force_scales.scales);\n                },\n            },\n            methods: {\n                disable_autoenddate(){\n                    const self=this;\n                    call([{\n                        methodname: 'local_treestudyplan_disable_autoenddate',\n                        args: {\n                            studyplan_id: this.value.id,\n                        }\n                    }])[0].done(function(response){\n                        self.$bvModal.msgBoxConfirm((response.success?self.text.success$core:self.text.error$core)\n                             + \"\\n\" + response.msg);\n                    }).fail(notification.exception);\n                },\n                force_scales_start(){\n                    // set confirmation box\n                    const self=this;\n                    this.$bvModal.msgBoxConfirm(this.text.advanced_force_scale_confirm,{\n                        title: this.text.advanced_force_scale_confirm,\n                        okVariant: 'danger',\n                        okTitle: this.text.confirm_ok,\n                        cancelTitle: this.text.confirm_cancel,\n                    }).then( value => {\n                        if(value == true){\n                            call([{\n                                methodname: 'local_treestudyplan_force_studyplan_scale',\n                                args: {\n                                    studyplan_id: this.value.id,\n                                    scale_id: this.force_scales.selected_scale,\n                                }\n                            }])[0].done(function(response){\n                                self.force_scales.result = response;\n                            }).fail(notification.exception);\n                        }\n                    });\n                },\n                export_plan(format){\n                    const self = this;\n                    if(format == undefined || ![\"json\",\"csv\"].includes(format)){\n                        format = \"json\";\n                    }\n                    call([{\n                            methodname: 'local_treestudyplan_export_plan',\n                            args: {\n                                studyplan_id: this.value.id,\n                                format: format,\n                            },\n                        }])[0].done(function(response){\n\n                            download(self.value.shortname+\".\"+format,response.content,response.format);\n                        }).fail(notification.exception);\n                },\n                import_studylines(){\n                    //const self = this;\n                    upload((filename,content)=>{\n                        call([{\n                            methodname: 'local_treestudyplan_import_studylines',\n                            args: {\n                                studyplan_id:  this.value.id,\n                                content: content,\n                                format: \"application/json\",\n                            },\n                        }])[0].done(function(response){\n                            if(response.success){\n                                location.reload();\n                            } else {\n                                debug.error(\"Import failed: \",response.msg);\n                            }\n\n                        }).fail(notification.exception);\n                    }, \"application/json\");\n                },\n                purge_studyline(){\n                    call([{\n                        methodname: 'local_treestudyplan_delete_studyplan',\n                        args: {\n                            id:  this.value.id,\n                            force: true,\n                        },\n                    }])[0].done(function(response){\n                        if(response.success){\n                            location.reload();\n                        } else {\n                            debug.error(\"Could not delete plan: \",response.msg);\n                        }\n\n                    }).fail(notification.exception);\n                },\n                cascade_cohortsync(){\n                    const self = this;\n                    call([{\n                        methodname: 'local_treestudyplan_cascade_cohortsync',\n                        args: {\n                            studyplan_id:  this.value.id,\n                        },\n                    }])[0].done(function(response){\n                        self.$bvModal.msgBoxOk(response.success?self.text.success$core:self.text.error$core,\n                            { title: self.text.advanced_cascade_cohortsync});\n                    }).fail(notification.exception);\n                },\n                modal_close(){\n                    this.force_scales.result = [];\n                }\n            },\n            template:\n            `\n            <span>\n                <a  v-if=\"value.advanced\"\n                    href='#'\n                    @click.prevent=''\n                    class='text-danger'\n                    v-b-modal=\"'t-studyplan-'+value.id+'-advanced'\"\n                    ><i class='fa fa-wrench'></i> {{text.advanced_tools}}</a>\n                <b-modal v-if=\"value.advanced\"\n                    :id=\"'t-studyplan-'+value.id+'-advanced'\"\n                    size=\"lg\"\n                    :title=\"text.advanced_tools_heading\"\n                    ok-only\n                    @hide=\"modal_close\"\n                    >\n                    <b-card no-body>\n                    <b-tabs card>\n                        <b-tab :title=\"text.advanced_warning_title\" active>\n                            {{ text.advanced_warning}}\n                        </b-tab>\n                        <b-tab :title=\"text.advanced_course_manipulation_title\" >\n                            <b-container>\n                            <b-row><b-col cols=\"*\">\n                                <h3>{{ text.advanced_cascade_cohortsync_title}}</h3>\n                                    {{ text.advanced_cascade_cohortsync_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols=\"*\">\n                                <b-button\n                                    variant=\"info\"\n                                    @click=\"cascade_cohortsync\"\n                                >{{ text.advanced_cascade_cohortsync}}</b-button>\n                            </b-col></b-row>\n                            <b-row class=\"mt-3\"><b-col cols=\"*\">\n                                <h3>{{ text.advanced_force_scale_title}}</h3>\n                                {{ text.advanced_force_scale_desc}}\n                            </b-col></b-row>\n                            <b-row>\n                                <b-col>\n                                    <b-form-select v-model=\"force_scales.selected_scale\"\n                                    :options=\"scales\" text-field=\"name\" value-field=\"id\"\n                                    ></b-form-select>\n                                </b-col>\n                                <b-col cols=\"4\">\n                                    <b-button\n                                        variant=\"danger\"\n                                        :disabled=\"force_scales.selected_scale == null\"\n                                        @click=\"force_scales_start\"\n                                    >{{ text.advanced_force_scale_button}}</b-button>\n                                </b-col>\n\n                            </b-row>\n                            <b-row class=\"mt-3\"><b-col cols=\"*\">\n                                <ul class='t-advanced-scrollable' v-if=\"force_scales.result.length > 0\">\n                                    <li v-for=\"c in force_scales.result\">\n                                        <span class='t-advanced-coursename'>{{c.course.fullname}}</span>\n                                        <ul v-if=\"c.grades.length > 0\">\n                                            <li v-for='g in c.grades'>\n                                                <span class='t-advanced-gradename'><span v-html=\"g.name\"></span></span>\n                                                <span v-if=\"g.changed == 'converted'\" class='t-advanced-status changed'\n                                                    >{{text.advanced_converted}}</span\n                                                ><span v-else-if=\"g.changed == 'skipped'\" class='t-advanced-status skipped'\n                                                    >{{text.advanced_skipped}}</span\n                                                >\n                                                <span v-else class='t-advanced-status skipped'\n                                                    >{{text.advanced_error}}</span\n                                                >\n                                            </li>\n                                        </ul>\n                                    </li>\n                                </ul>\n                            </b-col></b-row>\n                            <b-row><b-col cols=\"*\">\n                                <h3>{{ text.advanced_disable_autoenddate_title}}</h3>\n                                {{ text.advanced_disable_autoenddate_desc}}\n                            </b-col></b-row>\n                            <b-row><b-col cols=\"*\">\n                                <b-button\n                                    variant=\"danger\"\n                                    @click=\"disable_autoenddate\"\n                                >{{ text.advanced_disable_autoenddate_button}}</b-button>\n                            </b-col></b-row>\n                            </b-container>\n                        </b-tab>\n                        <b-tab :title='text.advanced_export'>\n                            <b-button\n                                    variant=\"primary\"\n                                    @click=\"export_plan\"\n                                >{{ text.advanced_export}}</b-button>\n                            <b-button\n                                    variant=\"danger\"\n                                    @click=\"import_studylines\"\n                                >{{ text.advanced_import}}</b-button>\n                            <b-button\n                                variant=\"primary\"\n                                @click=\"export_plan('csv')\"\n                            >{{ text.advanced_export_csv}}</b-button>\n                        </b-tab>\n                        <b-tab :title='text.advanced_purge'>\n                            <p>{{text.advanced_purge_expl}}</p>\n                            <p><b-button\n                                    variant=\"danger\"\n                                    @click=\"purge_studyline\"\n                                >{{ text.advanced_purge}}</b-button></p>\n                        </b-tab>\n                    </b-tabs>\n                    </b-card>\n                </b-modal>\n            </span>\n            `\n        });\n\n\n        /*\n        * T-STUDYPLAN-EDIT\n        */\n        Vue.component('t-studyplan-edit', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                'mode' :{\n                    type: String,\n                    default() { return \"edit\";},\n                },\n                'type' :{\n                    type: String,\n                    default() { return \"link\";},\n                },\n                'variant' : {\n                    type: String,\n                    default() { return \"\";},\n                },\n                'contextid': {\n                    type: Number,\n                    default: 1\n                },\n            },\n            data() {\n                return {\n                    text: strings.studyplan_edit,\n                };\n            },\n            computed: {\n            },\n            methods: {\n                planSaved(updatedplan){\n                    const self = this;\n                    debug.info(\"Got new plan data\",updatedplan);\n\n                    if(self.mode == 'create'){\n                        // Inform parent of the details of the newly created plan\n                        self.$emit(\"created\",updatedplan);\n                    }\n                    else {\n                        // determine if the plan moved context...\n                        const moved_from = self.value.context_id;\n                        const moved_to = updatedplan.context_id;\n                        const moved = (moved_from != moved_to);\n\n                        if(updatedplan.pages[0].periods != self.value.pages[0].periods){\n                            // If the pages changed, just reload the entire model for the plan\n                            call([{\n                                methodname: 'local_treestudyplan_get_studyplan_map',\n                                args: { id: self.value.id}\n                            }])[0].done(function(response){\n                                self.value = ProcessStudyplan(response,true);\n                                debug.info('studyplan processed');\n                                self.$emit('input',self.value);\n                            }).fail(function(error){\n                                notification.exception(error);\n                            });\n                        } else {\n                            // Copy updated fields and trigger update\n                            objCopy(self.value,updatedplan,STUDYPLAN_EDITOR_FIELDS);\n                            self.$emit('input',self.value);\n                            if(moved){\n                                self.$emit('moved',self.value, moved_from, moved_to);\n                            }\n                        }\n                    }\n                },\n            }\n            ,\n            template:\n            `\n            <span class='s-studyplan-edit'>\n                <mform \n                    name=\"studyplan_editform\" \n                    :params=\"{studyplan_id: value.id, mode: mode, contextid: contextid }\" \n                    @saved=\"planSaved\"\n                    :variant=\"variant\"\n                    :type=\"type\"\n                    :title=\"(mode == 'create')?text.studyplan_add:text.studyplan_edit\"\n                    ><slot><i class='fa fa-gear'></i></slot></mform>\n            </span>\n            `\n        });\n\n        /*\n        * T-STUDYPLAN-ASSOCIATE\n        */\n        Vue.component('t-studyplan-associate', {\n            props: ['value',],\n            data() {\n                return {\n                    show: false,\n                    config: {\n                        userfields: [\n                            { key: \"selected\",},\n                            { key: \"firstname\", \"sortable\": true,},\n                            { key: \"lastname\", \"sortable\": true,},\n                        ],\n                        cohortfields:[\n                            { key: \"selected\",},\n                            { key: \"name\", \"sortable\": true,},\n                            { key: \"context\", \"sortable\": true,},\n                        ]\n                    },\n                    association: {\n                        cohorts: [],\n                        users: [],\n                    },\n                    loading: {\n                        cohorts: false,\n                        users: false,\n                    },\n                    search: {users: [], cohorts:[]},\n                    selected: {\n                         search: {users: [] , cohorts:[]},\n                         associated: {users: [] , cohorts:[]}\n                    },\n                    text: strings.studyplan_associate,\n                };\n            },\n            created() {\n\n            },\n            mounted() {\n            },\n            updated() {\n\n            },\n            methods: {\n                showModal(){\n                    this.show = true;\n                    this.loadAssociations();\n                },\n                cohortOptionModel(c){\n                    return {\n                        value: c.id,\n                        text: c.name + ' (' + c.context.path.join(' / ') + ')',\n                    };\n                },\n                userOptionModel(u){\n                    return {\n                        value: u.id,\n                        text: u.firstname + ' ' + u.lastname,\n                    };\n                },\n                loadAssociations(){\n                    const self = this;\n                    self.loading.cohorts = true;\n                    self.loading.users = true;\n                    call([{\n                        methodname: 'local_treestudyplan_associated_users',\n                        args: { studyplan_id: self.value.id,}\n                    }])[0].done(function(response){\n                        self.association.users = response.map(self.userOptionModel);\n                        self.loading.users = false;\n                    }).fail(notification.exception);\n\n                    call([{\n                        methodname: 'local_treestudyplan_associated_cohorts',\n                        args: { studyplan_id: self.value.id,}\n                    }])[0].done(function(response){\n                        self.association.cohorts = response.map(self.cohortOptionModel);\n                        self.loading.cohorts = false;\n                    }).fail(notification.exception);\n                },\n                searchCohorts(searchtext){\n                    const self = this;\n\n                    if(searchtext.length > 0)\n                    {\n                        call([{\n                            methodname: 'local_treestudyplan_list_cohort',\n                            args: { like: searchtext, exclude_id: self.value.id}\n                        }])[0].done(function(response){\n                            self.search.cohorts = response.map(self.cohortOptionModel);\n                        }).fail(notification.exception);\n                    }\n                    else {\n                        self.search.cohorts = [];\n                    }\n                },\n                cohortAssociate(){\n                    const self = this;\n                    let requests = [];\n                    const associated = self.association.cohorts;\n                    const search = self.search.cohorts;\n                    const searchselected = self.selected.search.cohorts;\n                    for(const i in searchselected){\n                        const r = searchselected[i];\n                        requests.push({\n                            methodname: 'local_treestudyplan_connect_cohort',\n                            args: {studyplan_id: self.value.id, cohort_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(associated,search,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n                cohortDisassociate(){\n                    const self = this;\n                    let requests = [];\n                    const associatedselected = self.selected.associated.cohorts;\n                    const associated = self.association.cohorts;\n                    const search =  self.search.cohorts;\n                    for(const i in associatedselected){\n                        const r = associatedselected[i];\n                        requests.push({\n                            methodname: 'local_treestudyplan_disconnect_cohort',\n                            args: {studyplan_id: self.value.id, cohort_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(search,associated,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n                searchUsers(searchtext){\n                    const self = this;\n                    if(searchtext.length > 0)\n                    {\n                        call([{\n                            methodname: 'local_treestudyplan_find_user',\n                            args: { like: searchtext, exclude_id: self.value.id}\n                        }])[0].done(function(response){\n                            self.search.users = response.map(self.userOptionModel);\n                        }).fail(notification.exception);\n                    }\n                    else {\n                        self.search.users = [];\n                    }\n                },\n                userAssociate(){\n                    const self = this;\n                    let requests = [];\n                    const associated = self.association.users;\n                    const search =  self.search.users;\n                    const searchselected =  self.selected.search.users;\n                    for(const i in searchselected){\n                        const r = searchselected[i];\n\n                        requests.push({\n                            methodname: 'local_treestudyplan_connect_user',\n                            args: {studyplan_id: self.value.id, user_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(associated,search,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n                userDisassociate(){\n                    const self = this;\n                    let requests = [];\n                    const associated = self.association.users;\n                    const associatedselected = self.selected.associated.users;\n                    const search = self.search.users;\n                    for(const i in associatedselected){\n                        const r = associatedselected[i];\n\n                        requests.push({\n                            methodname: 'local_treestudyplan_disconnect_user',\n                            args: {studyplan_id: self.value.id, user_id: r},\n                            fail: notification.exception,\n                            done: function(response){\n                                if(response.success){\n                                    transportItem(search,associated,r);\n                                }\n                            }\n                        });\n                    }\n                    call(requests);\n                },\n            }\n            ,\n            template:\n`\n<span class='s-studyplan-associate'\n    ><a href='#' @click.prevent=\"showModal\" ><slot><i class='fa fa-users'></i></slot></a>\n    <b-modal\n        v-model=\"show\"\n        size=\"lg\"\n        ok-variant=\"primary\"\n        :title=\"text.associations + ' - ' + value.name\"\n        ok-only>\n        <b-tabs class='s-studyplan-associate-window'>\n            <b-tab :title=\"text.cohorts\">\n                <b-container>\n                    <b-row class='mb-2 mt-2'>\n                        <b-col>{{text.associated_cohorts}}</b-col>\n                        <b-col>{{text.associate_cohorts}}</b-col>\n                    </b-row>\n                    <b-row class='mb-2'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type=\"text\" @input=\"searchCohorts($event)\"\n                                :placeholder=\"text.search\"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.associated.cohorts\"\n                                :options=\"association.cohorts\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.search.cohorts\"\n                                :options=\"search.cohorts\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class='mt-2'>\n                        <b-col>\n                            <b-button variant='danger' @click=\"cohortDisassociate()\"\n                                ><i class='fa fa-chain-broken'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant='success' @click=\"cohortAssociate()\"\n                                ><i class='fa fa-link'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n            <b-tab :title=\"text.users\">\n                <b-container>\n                    <b-row class='mb-2 mt-2'>\n                        <b-col>{{text.associated_users}}</b-col>\n                        <b-col>{{text.associate_users}}</b-col>\n                    </b-row>\n                    <b-row class='mb-2'>\n                        <b-col>\n                        </b-col>\n                        <b-col>\n                            <b-form-input\n                                type=\"text\"\n                                @input=\"searchUsers($event)\"\n                                placeholder=\"Search users\"></b-form-input>\n                        </b-col>\n                    </b-row>\n                    <b-row>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.associated.users\"\n                                :options=\"association.users\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                        <b-col>\n                            <b-form-select\n                                multiple\n                                v-model=\"selected.search.users\"\n                                :options=\"search.users\"\n                                :select-size=\"10\"\n                                ></b-form-select>\n                        </b-col>\n                    </b-row>\n                    <b-row class='mt-2'>\n                        <b-col>\n                                <b-button variant='danger' @click=\"userDisassociate()\"\n                                ><i class='fa fa-chain-broken'></i>&nbsp;{{text.delete_association}}</b-button>\n                        </b-col>\n                        <b-col>\n                            <b-button variant='success' @click=\"userAssociate()\"\n                                ><i class='fa fa-link'></i>&nbsp;{{text.add_association}}</b-button>\n                        </b-col>\n                    </b-row>\n                </b-container>\n            </b-tab>\n        </b-tabs>\n    </b-modal>\n</span>\n`\n        });\n\n        /*******************\n         *\n         * Period editor\n         *\n         *************/\n\n        Vue.component('t-period-edit', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                'type' :{\n                    type: String,\n                    default() { return \"link\";},\n                },\n                'variant' : {\n                    type: String,\n                    default() { return \"\";},\n                },\n                'minstart' : {\n                    type: String,\n                    default() { return null;},\n                },\n                'maxend' : {\n                    type: String,\n                    default() { return null;},\n                }\n            },\n            data() {\n                return {\n                    show: false,\n                    editdata: {\n                        fullname: '',\n                        shortname: '',\n                        startdate: (new Date()).getFullYear() + '-08-01',\n                        enddate:  ((new Date()).getFullYear()+1) + '-08-01',\n                    },\n                    text: strings.period_edit,\n                };\n            },\n            created() {\n            },\n            mounted() {\n            },\n            updated() {\n\n            },\n            computed: {\n            },\n            methods: {\n                editStart(){\n                    objCopy(this.editdata,this.value,PERIOD_EDITOR_FIELDS);\n                    this.show = true;\n                },\n                editFinish(){\n                    const self = this;\n                    let args = { 'id': this.value.id };\n\n                    objCopy(args,this.editdata,PERIOD_EDITOR_FIELDS);\n\n                    call([{\n                        methodname: 'local_treestudyplan_edit_period',\n                        args: args\n                    }])[0].done(function(response){\n                        objCopy(self.value,response,PERIOD_EDITOR_FIELDS);\n                        self.$emit('input',self.value);\n                        self.$emit('edited',self.value);\n                    }).fail(notification.exception);\n                },\n                refresh(){\n                    const self = this;\n                    call([{\n                        methodname: 'local_treestudyplan_get_period',\n                        args: { 'id': this.value.id },\n                    }])[0].done(function(response){\n                        objCopy(self.value,response,PERIOD_EDITOR_FIELDS);\n                        self.$emit('input',self.value);\n                    }).fail(notification.exception);\n                },\n                add_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,days);\n                },\n                sub_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,0 - days);\n                },\n            }\n            ,\n            template:\n            `\n            <span class='t-period-edit'>\n                <b-button :variant=\"variant\" v-if='type == \"button\"' @click.prevent='editStart()'\n                    ><slot><i class='fa fa-gear'></i></slot></b-button>\n                <a variant=\"variant\" v-else href='#' @click.prevent='editStart()'\n                    ><slot><i class='fa fa-gear'></i></slot></a>\n                <b-modal\n                    v-model=\"show\"\n                    size=\"lg\"\n                    ok-variant=\"primary\"\n                    :title=\"text.edit\"\n                    @ok=\"editFinish()\"\n                    :ok-disabled=\"Math.min(editdata.fullname.length,editdata.shortname.length) == 0\"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.fullname}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-input v-model=\"editdata.fullname\"\n                                :state='editdata.fullname.length>0'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.shortname}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-input v-model=\"editdata.shortname\"\n                                :state='editdata.shortname.length>0'\n                                ></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_startdate}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-datepicker\n                                    start-weekday=\"1\"\n                                    v-model=\"editdata.startdate\"\n                                    :min=\"(minstart ? minstart : '')\"\n                                    :max=\"sub_day(value.enddate)\"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"4\">{{ text.studyplan_enddate}}</b-col>\n                            <b-col cols=\"8\">\n                                <b-form-datepicker\n                                    start-weekday=\"1\"\n                                    v-model=\"editdata.enddate\"\n                                    :min=\"add_day(value.startdate)\"\n                                    :max=\"(maxend ? maxend : '')\"\n                                ></b-form-datepicker>\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </span>\n            `\n        });\n\n        /*\n        * T-STUDYPLAN\n        */\n        Vue.component('t-studyplan', {\n            props: [ 'value', 'index', ],\n            data() {\n                return {\n                    config: {\n                        userfields: [\n                            { key: \"selected\",},\n                            { key: \"firstname\", \"sortable\": true,},\n                            { key: \"lastname\", \"sortable\": true,},\n                        ],\n                        cohortfields:[\n                            { key: \"selected\",},\n                            { key: \"name\", \"sortable\": true,},\n                            { key: \"context\", \"sortable\": true,},\n                        ]\n                    },\n                    create: {\n                        studyline: {\n                            'name': '',\n                            'shortname': '',\n                            'color': '#DDDDDD',\n                        },\n                    },\n                    edit: {\n                        toolbox_shown: false,\n                        studyline: {\n                            editmode: false,\n                            data: {\n                                name: '',\n                                shortname: '',\n                                color: '#DDDDDD',\n                            },\n                            original: {},\n                        },\n                        studyplan: {\n                            data: {\n                                name: '',\n                                shortname: '',\n                                description: '',\n                                slots : 4,\n                                startdate: '2020-08-01',\n                                enddate: '',\n                                aggregation: '',\n                                aggregation_config: '',\n                                aggregation_info: {\n                                    useRequiredGrades: true,\n                                    useItemCondition: false,\n                                },\n\n                            },\n                            original: {},\n                        }\n                    },\n                    text: strings.studyplan_text,\n                    cache: {\n                        linelayers: {},\n                    }\n                };\n            },\n            created() {\n\n            },\n            mounted() {\n                if(this.page.studylines.length == 0){\n                    // start in editmode if studylines are empty\n                    this.edit.studyline.editmode = true;\n                }\n                this.$root.$emit('redrawLines');\n            },\n            updated() {\n                this.$root.$emit('redrawLines');\n                ItemEventBus.$emit('redrawLines');\n            },\n            computed: {\n                columns() {\n                    return 1+ (this.page.periods * 2);\n                },\n                columns_stylerule() {\n                    // Uses css variables, so width for slots and filters can be configured in css\n                    let s = \"grid-template-columns: var(--studyplan-filter-width)\"; // use css variable here\n                    for(let i=0; i<this.page.periods;i++){\n                        s+= \" var(--studyplan-course-width) var(--studyplan-filter-width)\";\n                    }\n                    return s+\";\";\n                },\n                page(){\n                    // FIXME: Temporary hack until real page management is implemented\n                    return this.value.pages[0];\n                }\n            },\n            methods: {\n                trashbin_accepts(type){\n                    if(type.item){\n                        return true;\n                    } else {\n                        return false;\n                    }\n                },\n                countLineLayers(line){\n                    // For some optimization, we cache the value of this calculation for about a second\n                    // Would be a lot nicer if we could use a computed property for this.....\n                    if( this.cache.linelayers[line.id]\n                        && ((new Date()) - this.cache.linelayers[line.id].timestamp < 1000 )\n                    ){\n                        return this.cache.linelayers[line.id].value;\n                    }\n                    else\n                    {\n                        let maxLayer = -1;\n                        for(let i = 0; i <= this.page.periods; i++){\n                            if(line.slots[i]){\n                                const slot = line.slots[i];\n                                // Determine the amount of used layers in a studyline slit\n                                for(const ix in line.slots[i].courses){\n                                    const item = line.slots[i].courses[ix];\n                                    if(item.layer > maxLayer){\n                                        maxLayer = item.layer;\n                                    }\n                                }\n                                for(const ix in line.slots[i].filters){\n                                    const item = line.slots[i].filters[ix];\n                                    if(item.layer > maxLayer){\n                                        maxLayer = item.layer;\n                                    }\n                                }\n\n                            }\n                        }\n                        this.cache.linelayers[line.id] = {\n                            value: (maxLayer + 1),\n                            timestamp: (new Date()),\n                        };\n                        return maxLayer+1;\n                    }\n                },\n                slotsempty(slots) {\n                    if(Array.isArray(slots)){\n                        let count = 0;\n                        for(let i = 0; i < slots.length; i++) {\n                            if(Array.isArray(slots[i].courses)){\n                                count += slots[i].courses.length;\n                            }\n                            if(Array.isArray(slots[i].filters)){\n                                count += slots[i].filters.length;\n                            }\n                        }\n                        return (count == 0);\n                    } else {\n                        return false;\n                    }\n                },\n                movedStudyplan(plan,from,to) {\n                    this.$emit('moved',plan,from,to); // Throw the event up....\n                },\n                addStudyLine(page,newlineinfo) {\n                    call([{\n                        methodname: 'local_treestudyplan_add_studyline',\n                        args: {\n                            'page_id': page.id,\n                            'name': newlineinfo.name,\n                            'shortname': newlineinfo.shortname,\n                            'color': newlineinfo.color,\n                            'sequence': page.studylines.length,\n                        }\n                    }])[0].done(function(response){\n                        page.studylines.push(response);\n                        newlineinfo.name = '';\n                        newlineinfo.shortname = '';\n                        newlineinfo.color = \"#dddddd\";\n                    }).fail(notification.exception);\n                },\n                editLineStart(line) {\n                    Object.assign(this.edit.studyline.data,line);\n                    this.edit.studyline.original = line;\n                    this.$bvModal.show('modal-edit-studyline-'+this.value.id);\n                },\n                editLineFinish() {\n                    let editedline = this.edit.studyline.data;\n                    let originalline = this.edit.studyline.original;\n                    call([{\n                        methodname: 'local_treestudyplan_edit_studyline',\n                        args: { 'id': editedline.id,\n                                'name': editedline.name,\n                                'shortname': editedline.shortname,\n                                'color': editedline.color,}\n                    }])[0].done(function(response){\n                        originalline['name'] = response['name'];\n                        originalline['shortname'] = response['shortname'];\n                        originalline['color'] = response['color'];\n                    }).fail(notification.exception);\n                },\n                deleteLine(page,line) {\n                    const self=this;\n                    get_strings([\n                            {key: 'studyline_confirm_remove', param: line.name, component: 'local_treestudyplan' },\n                            {key: 'delete', component: 'core' },\n                        ]).then(function(s){\n                        self.$bvModal.msgBoxConfirm(s[0], {\n                            okTitle: s[1],\n                            okVariant: 'danger',\n                        }).then(function(modalresponse){\n                            if(modalresponse){\n                                call([{\n                                    methodname: 'local_treestudyplan_delete_studyline',\n                                    args: { 'id': line.id, }\n                                }])[0].done(function(response){\n                                    if(response.success == true){\n                                        let index = page.studylines.indexOf(line);\n                                        page.studylines.splice(index, 1);\n                                    }\n                                }).fail(notification.exception);\n                            }\n                        });\n                    });\n                },\n                reorderLines(event,lines){\n\n                    // apply reordering\n                    event.apply(lines);\n                    // send the new sequence to the server\n                    let sequence = [];\n                    for(let idx in lines)\n                    {\n                        sequence.push({'id': lines[idx].id,'sequence': idx});\n                    }\n                    call([{\n                        methodname: 'local_treestudyplan_reorder_studylines',\n                        args: { 'sequence': sequence }\n                    }])[0].done(function(response){\n                    }).fail(notification.exception);\n                },\n                deletePlan(studyplan){\n                    const self=this;\n                    get_strings([\n                        {key: 'studyplan_confirm_remove', param: studyplan.name, component: 'local_treestudyplan' },\n                        {key: 'delete', component: 'core' },\n                    ]).then(function(s){\n                        self.$bvModal.msgBoxConfirm(s[0], {\n                            okTitle: s[1],\n                            okVariant: 'danger',\n                        }).then(function(modalresponse){\n                            if(modalresponse){\n                                call([{\n                                    methodname: 'local_treestudyplan_delete_studyplan',\n                                    args: { 'id': studyplan.id, force: true}\n                                }])[0].done(function(response){\n                                    if(response.success == true){\n                                        self.$root.$emit(\"studyplanRemoved\",studyplan);\n                                    }\n                                }).fail(notification.exception);\n                            }\n                        });\n                    });\n                },\n                deleteStudyItem(event){\n                    //const self = this;\n                    let item = event.data;\n\n                    call([{\n                        methodname: 'local_treestudyplan_delete_studyitem',\n                        args: { 'id': item.id, }\n                    }])[0].done(function(response){\n                        if(response.success == true){\n                            event.source.$emit('cut',event);\n                        }\n                    }).fail(notification.exception);\n\n                },\n                showslot(line,index, layeridx, type){\n                    // check if the slot should be hidden because a previous slot has an item with a span\n                    // so big that it hides this slot\n                    const forGradable = (type == 'gradable')?true:false;\n                    const periods = this.page.periods;\n                    let show = true;\n                    for(let i = 0; i < periods; i++){\n                        if(line.slots[index-i] && line.slots[index-i].courses){\n                            const list = line.slots[index-i].courses;\n                            for(const ix in list){ // Really wish that 'for of' would work with the minifier moodle uses\n                                const item = list[ix];\n                                if(item.layer == layeridx){\n                                    if(forGradable){\n                                        if(i > 0 && (item.span - i) > 0){\n                                            show = false;\n                                        }\n                                    } else {\n                                        if((item.span - i) >  1){\n                                            show = false;\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n\n                    return show;\n                },\n                periodEdited(pi) {\n                    const prev = this.$refs[\"periodeditor-\" + (pi.period - 1)][0];\n                    if(prev) {\n                        prev.refresh();\n                    }\n                    const next = this.$refs[\"periodeditor-\" + (pi.period + 1)][0];\n                    if(next) {\n                        next.refresh();\n                    }\n                },\n                add_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,days);\n                },\n                sub_day(date,days) {\n                    if( days === undefined ){\n                        days = 1;\n                    }\n                    return add_days(date,0 - days);\n                },\n                toolbox_switched(event){\n                    this.$emit('toggletoolbox',event);\n                }\n            }\n            ,\n            template:\n            `\n            <div>\n                <div class='controlbox t-studyplan-controlbox'>\n                    <div class=\"controlbox-group\">\n                        <b-form-checkbox v-model=\"edit.studyline.editmode\" class=\"sw-studyplan-toolbar\" switch\n                            @change=\"toolbox_switched(edit.toolbox_shown && !edit.studyline.editmode); \"\n                            >{{ text.studyline_editmode }}</b-form-checkbox>\n                        <b-form-checkbox v-if=\"!edit.studyline.editmode\" v-model=\"edit.toolbox_shown\" class=\"sw-studyplan-toolbar\" switch\n                            @change=\"toolbox_switched\"\n                            >{{ text.toolbox_toggle}}</b-form-checkbox>\n                        <drop\n                            mode='copy'\n                            class='t-item-deletebox text-danger border-danger'\n                            @drop='deleteStudyItem'\n                            :accepts-type=\"trashbin_accepts\"\n                            ><i class='fa fa-trash'></i>\n                        </drop>\n                    </div>\n                    <div class=\"controlbox-group\">\n                        <span class='control editable'>\n                            <t-studyplan-advanced v-model=\"value\"></t-studyplan-advanced>\n                        </span>\n                        <span class='control editable'>\n                            <t-studyplan-associate\n                                v-model=\"value\"><i class='fa fa-users'></i> {{text.associations}}</t-studyplan-associate>\n                        </span>\n                        <span class='control editable'>\n                            <t-studyplan-edit v-model=\"value\" @moved=\"movedStudyplan\" \n                                ><i class='fa fa-gear'></i> {{text.edit$core}}</t-studyplan-edit>\n                        </span>\n                        <span class='control deletable'>\n                            <a v-if='page.studylines.length == 0' href='#' @click='deletePlan(value)'\n                                ><i class='text-danger fa fa-trash'></i></a>\n                        </span>\n                    </div>\n                </div>\n                <div class='t-studyplan-content-edit' v-if=\"edit.studyline.editmode\">\n                    <drop-list\n                        :items=\"page.studylines\"\n                        class=\"t-slot-droplist\"\n                        :accepts-type=\"'studyline-'+page.id\"\n                        xreorder=\"$event.apply(page.studylines)\"\n                        @reorder=\"reorderLines($event,page.studylines)\"\n                        mode=\"copy\"\n                        row\n                    >\n                        <template v-slot:item=\"{item}\">\n                            <drag\n                                :key=\"item.id\"\n                                class='t-studyline-drag'\n                                :data=\"item\"\n                                :type=\"'studyline-'+page.id\"\n                                >\n                                <template v-slot:drag-image>\n                                    <i class=\"fa fa-arrows text-primary\"></i>\n                                </template>\n                                <t-studyline-edit\n                                    v-model=\"item\"\n                                    @edit='editLineStart(item)'\n                                    @delete='deleteLine(page,item)'\n                                    >\n                                    <div v-if=\"!slotsempty(item.slots)\"> {{ text.editmode_modules_hidden}} </div>\n                                </t-studyline-edit>\n                            </drag>\n                        </template>\n                    </drop-list>\n                </div>\n                <div class='t-studyplan-content' v-else>\n\n                    <!-- Now paint the headings column -->\n                    <div class='t-studyplan-headings'>\n                        <s-studyline-header-heading></s-studyline-header-heading>\n                        <t-studyline-heading  v-for=\"(line,lineindex) in page.studylines\"\n                            :key=\"line.id\"\n                            @resize=\"headingresized(lineindex,$event)\"\n                            v-model=\"page.studylines[lineindex]\"\n                            :layers='countLineLayers(line)+1'\n                            :class=\" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )\n                                    + ((lineindex==0)?' first ':' ')\n                                    + ((lineindex==page.studylines.length-1)?' last ':' ')\"\n                        ></t-studyline-heading>\n                    </div>\n                    <!-- Next, paint all the cells in the scrollable -->\n                    <div class=\"t-studyplan-scrollable\" >\n                        <div class=\"t-studyplan-timeline\" :style=\"columns_stylerule\">\n                        <!-- add period information -->\n                        <template v-for=\"(n,index) in (page.periods+1)\">\n                            <s-studyline-header-period\n                                v-if=\"index > 0\"\n                                v-model=\"page.perioddesc[index-1]\"\n                                ><t-period-edit\n                                    :ref=\"'periodeditor-'+index\"\n                                    @edited=\"periodEdited\"\n                                    v-model=\"page.perioddesc[index-1]\"\n                                    :minstart=\"(index > 1) ? add_day(page.perioddesc[index-2].startdate,2) : null\"\n                                    :maxend=\"(index < page.periods) ? sub_day(page.perioddesc[index].enddate,2) : null\"\n                                ></t-period-edit\n                            ></s-studyline-header-period>\n                            <div class=\"s-studyline-header-filter\"></div>\n                        </template>\n\n                        <!-- Line by line add the items -->\n                        <!-- The grid layout handles putting it in rows and columns -->\n                        <template v-for=\"(line,lineindex) in page.studylines\"\n                            ><template v-for=\"(layernr,layeridx) in countLineLayers(line)+1\"\n                                ><template v-for=\"(n,index) in (page.periods+1)\"\n                                    >\n                                    <t-studyline-slot\n                                        v-if=\"index > 0 && showslot(line, index, layeridx, 'gradable')\"\n                                        type='gradable'\n                                        v-model=\"line.slots[index].courses\"\n                                        :key=\"'c-'+lineindex+'-'+index+'-'+layernr\"\n                                        :slotindex=\"index\"\n                                        :line=\"line\"\n                                        :plan=\"value\"\n                                        :page=\"page\"\n                                        :period=\"page.perioddesc[index-1]\"\n                                        :layer=\"layeridx\"\n                                        :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n                                                + ((lineindex==0 && layernr==1)?' first ':' ')\n                                                + ((lineindex==page.studylines.length-1)?' last ':' ')\n                                                + ((layernr == countLineLayers(line))?' lastlyr ':' ')\n                                                + ((layernr == countLineLayers(line)+1)?' newlyr ':' ')\"\n                                    ></t-studyline-slot\n                                    ><t-studyline-slot\n                                        type='filter'\n                                        v-if=\"showslot(line, index, layeridx, 'filter')\"\n                                        v-model=\"line.slots[index].filters\"\n                                        :key=\"'f-'+lineindex+'-'+index+'-'+layernr\"\n                                        :slotindex=\"index\"\n                                        :line=\"line\"\n                                        :plan=\"value\"\n                                        :page=\"page\"\n                                        :layer=\"layeridx\"\n                                        :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n                                                + ((lineindex==0 && layernr==1)?' first ':'')\n                                                + ((lineindex==page.studylines.length-1)?' last ':' ')\n                                                + ((index==page.periods)?' rightmost':'')\n                                                + ((layernr == countLineLayers(line))?' lastlyr ':' ')\n                                                + ((layernr == countLineLayers(line)+1)?' newlyr ':' ')\"\n                                        >\n                                    </t-studyline-slot\n                                ></template\n                            ></template\n                        ></template\n                        ></div>\n                    </div>\n                </div>\n                <div v-if=\"edit.studyline.editmode\" class='t-studyline-add'>\n                    <a href=\"#\" v-b-modal=\"'modal-add-studyline-'+page.id\" @click=\"false;\"\n                        ><i class='fa fa-plus'></i>{{ text.studyline_add }}</a>\n                </div>\n                <b-modal\n                    :id=\"'modal-add-studyline-'+page.id\"\n                    size=\"lg\"\n                    :ok-title=\"text.add$core\"\n                    ok-variant=\"primary\"\n                    :title=\"text.studyline_add\"\n                    @ok=\"addStudyLine(page,create.studyline)\"\n                    :ok-disabled=\"Math.min(create.studyline.name.length,create.studyline.shortname.length) == 0\"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols=\"3\">{{text.studyline_name}}</b-col>\n                            <b-col>\n                                <b-form-input v-model=\"create.studyline.name\" :placeholder=\"text.studyline_name_ph\"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"3\">{{text.studyline_shortname}}</b-col>\n                            <b-col>\n                            <b-form-input\n                                v-model=\"create.studyline.shortname\"\n                                :placeholder=\"text.studyline_shortname_ph\"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"3\">{{text.studyline_color}}</b-col>\n                            <b-col>\n                                <input type=\"color\" v-model=\"create.studyline.color\" />\n                                <!-- hsluv-picker v-model=\"create.studyline.color\" horizontal displaysize=\"175\" ></hsluv-picker -->\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n                <b-modal\n                    :id=\"'modal-edit-studyline-'+value.id\"\n                    size=\"lg\"\n                    ok-variant=\"primary\"\n                    :title=\"text.studyline_edit\"\n                    @ok=\"editLineFinish()\"\n                    :ok-disabled=\"Math.min(edit.studyline.data.name.length,edit.studyline.data.shortname.length) == 0\"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols=\"3\">{{ text.studyline_name}}</b-col>\n                            <b-col>\n                                <b-form-input\n                                    v-model=\"edit.studyline.data.name\"\n                                    :placeholder=\"text.studyline_name_ph\"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"3\">{{ text.studyline_shortname}}</b-col>\n                            <b-col>\n                            <b-form-input\n                                v-model=\"edit.studyline.data.shortname\"\n                                :placeholder=\"text.studyline_shortname_ph\"></b-form-input>\n                            </b-col>\n                        </b-row>\n                        <b-row>\n                            <b-col cols=\"3\">{{ text.studyline_color}}</b-col>\n                            <b-col>\n                                <input type=\"color\" v-model=\"edit.studyline.data.color\" />\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            `\n        });\n\n\n       /*\n        * T-STUDYLINE-HEADER\n        */\n       Vue.component('t-studyline-heading', {\n            props: {\n                value : {\n                    type: Object, // Studyline\n                    default: function(){ return {};},\n                },\n                layers: {\n                    type: Number,\n                    default: 1,\n                },\n            },\n            data() {\n                return {\n                    layerHeights: {}\n                };\n            },\n            created() {\n                // Listener for the signal that a new connection was made and needs to be drawn\n                // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines\n                ItemEventBus.$on('lineHeightChange', this.onLineHeightChange);\n            },\n            computed: {\n\n            },\n            methods: {\n                onLineHeightChange(lineid,layerid,newheight){\n                    // All layers for this line have the first slot send an update message on layer height change.\n                    // When one of those updates is received, record the height and recalculate the total height of the\n                    // header\n                    if(this.$refs.main && lineid == this.value.id){\n                        const items = document.querySelectorAll(\n                            `.t-studyline-slot-0[data-studyline='${this.value.id}']`);\n\n                        // determine the height of all the lines and add them up.\n                        let heightSum = 0;\n                        items.forEach((el) => {\n                            // getBoundingClientRect() Gets the actual fractional height instead of rounded to integer pixels\n                            const r = el.getBoundingClientRect();\n                            const height = r.height;\n                            heightSum += height;\n                        });\n\n                        const heightStyle=`${heightSum}px`;\n                        this.$refs.main.style.height = heightStyle;\n                    }\n                }\n            },\n            template: `\n            <div class=\"t-studyline t-studyline-heading \"\n                :data-studyline=\"value.id\" ref=\"main\"\n                ><div class=\"t-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"t-studyline-title\">\n                    <abbr v-b-tooltip.hover.right :title=\"value.name\">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            `,\n        });\n\n        /*\n        * T-STUDYLINE (Used only for study line edit mode)\n        */\n        Vue.component('t-studyline-edit', {\n            props: {\n                value : {\n                    type: Object, // Studyline\n                    default: function(){ return {};},\n                }\n           },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                deletable() {\n                    // Check if all the slots are empty\n                    const slots = this.value.slots;\n                    if(Array.isArray(slots)){\n                        let count = 0;\n                        for(let i = 0; i < slots.length; i++) {\n                            if(Array.isArray(slots[i].courses)){\n                                count += slots[i].courses.length;\n                            }\n                            if(Array.isArray(slots[i].filters)){\n                                count += slots[i].filters.length;\n                            }\n                        }\n                        return (count == 0);\n                    } else {\n                        return false;\n                    }\n                },\n                editable() {\n                    return true;\n                }\n            },\n            methods: {\n                onEdit() {\n                    this.$emit('edit',this.value);\n                },\n                onDelete() {\n                    this.$emit('delete',this.value);\n                },\n\n            },\n            template: `\n            <div :class=\"'t-studyline '\" >\n                <div class=\"t-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"t-studyline-title\">\n                    <div>\n                        <i class='fa fa-arrows text-primary'></i>\n                        <abbr v-b-tooltip.hover :title=\"value.name\">{{ value.shortname }}</abbr>\n                    </div>\n                </div>\n                <div class='t-studyline-editmode-content'>\n                    <slot></slot>\n                </div>\n                <div class='controlbox'>\n                    <template v-if='editable || deletable'>\n                    <span class='control editable' v-if='editable'>\n                        <a href='#' @click='onEdit'><i class='fa fa-pencil'></i></a>\n                    </span>\n                    <span class='control deletable' v-if='deletable'>\n                        <a v-if='deletable' href='#' @click='onDelete'><i class='text-danger fa fa-trash'></i></a>\n                    </span>\n                    </template>\n                </div>\n            </div>\n            `,\n        });\n\n        /*\n         * During a redisign it was decided to have the studyline still get the entire array as a value,\n         * even though it only shows one drop slot for the layer it is in. This is to make repainting easier,\n         * since we modify the array for the layer we handle. FIXME: Make this less weird\n         */\n        Vue.component('t-studyline-slot', {\n            props: {\n                type : {\n                    type: String,\n                    default: 'gradable',\n                },\n                slotindex : {\n                    type: Number,\n                    default: '',\n                },\n                line : {\n                    type: Object,\n                    default(){ return null;},\n                },\n                layer : {\n                    type: Number,\n                },\n                value: {\n                    type: Array, // dict with layer as index\n                    default(){ return [];},\n                },\n                plan: {\n                    type: Object, // Studyplan data\n                    default(){ return null;},\n                },\n                page: {\n                    type: Object, // Studyplan data\n                    default(){ return null;},\n                },\n                period: {\n                    type: Object, // Studyplan data\n                    default(){ return null;},\n                },\n            },\n            mounted() {\n                const self=this;\n                if(self.type == \"gradable\" && self.slotindex == 1){\n                    self.resizeListener = new ResizeObserver(() => {\n                        if(self.$refs.main){\n                            const size = self.$refs.main.getBoundingClientRect();\n\n                            ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, size.height);\n                        }\n                    }).observe(self.$refs.main);\n                }\n            },\n            unmounted() {\n                if(this.resizeListener) {\n                    this.resizeListener.disconnect();\n                }\n            },\n            computed: {\n                slotkey(){\n                    return `${this.type}'-'${this.line.id}-${this.slotindex}-${this.layer}`;\n                },\n                itemidx(){\n                    for(const ix in this.value){\n                        const itm = this.value[ix];\n                        if(itm.layer == this.layer){\n                            return ix;\n                        }\n                    }\n                    return null;\n                },\n                item(){\n                    for(const ix in this.value){\n                        const itm = this.value[ix];\n                        if(itm.layer == this.layer){\n                            return itm;\n                        }\n                    }\n                    return null;\n                },\n                listtype() {\n                    return this.type;\n                },\n                dragacceptlist(){\n                    if(this.type == \"gradable\"){\n                        return [\"course\", \"gradable-item\"];\n                    } else {\n                        return [\"filter\", \"filter-item\"];\n                    }\n                },\n                courseHoverDummy(){\n                    return {course: this.hover.component};\n                },\n                current(){\n                    if( this.period && this.period.startdate && this.period.enddate){\n                        const now = new Date();\n                        const pstart = new Date(this.period.startdate);\n                        const pend = new Date(this.period.enddate);\n                        return (now >= pstart && now < pend);\n                    }\n                    else {\n                        return false;\n                    }\n                },\n                spanCss(){\n                    if(this.item && this.item.span > 1){\n                        const span = (2 * this.item.span) - 1;\n                        return `width: 100%; grid-column: span ${span};`;\n                    } else {\n                        return \"\";\n                    }\n                }\n            },\n            data() {\n                return {\n                    text: strings.course_timing,\n                    resizeListener: null,\n                    hover: {\n                        component:null,\n                        type: null,\n                    },\n                    datechanger: {\n                        coursespan: null,\n                        periodspan: null,\n                        default: false,\n                        defaultchoice: false,\n                        hidewarn: false,\n                    }\n                };\n            },\n            methods: {\n                onDrop(event) {\n                    this.hover.component = null;\n                    this.hover.type = null;\n                    debug.info(event);\n                    const self = this;\n                    if(event.type.item) {\n                        let item = event.data;\n\n                        // To avoid weird visuals with the lines,\n                        // we add the item to the proper place in the front-end first\n                        item.layer = this.layer;\n                        item.slot = this.slotindex;\n                        self.value.push(item);\n                        self.$emit(\"input\",self.value);\n\n                        // then on the next tick, we inform the back end\n                        // Since moving things around has never been unsuccessful, unless you have other problems,\n                        // it's better to have nice visuals.\n                        self.relocateStudyItem(item).done(()=>{\n                            if(this.$refs.timingChecker){\n                                this.$refs.timingChecker.validate_course_period();\n                            }\n                        });\n                    }\n                    else if(event.type.component){\n                        debug.info(\"Adding new component\");\n                        if(event.type.type == \"gradable\"){\n                            call([{\n                                methodname: 'local_treestudyplan_add_studyitem',\n                                args: {\n                                    \"line_id\": self.line.id,\n                                    \"slot\" : self.slotindex,\n                                    \"layer\" : self.layer,\n                                    \"type\": 'course',\n                                    \"details\": {\n                                        \"competency_id\": null,\n                                        'conditions':'',\n                                        'course_id':event.data.id,\n                                        'badge_id':null,\n                                        'continuation_id':null,\n                                    }\n                                }\n                            }])[0].done((response) => {\n                                let item = response;\n                                self.relocateStudyItem(item).done(()=>{\n                                    self.value.push(item);\n                                    self.$emit(\"input\",self.value);\n\n                                    // call the validate period function on next tick,\n                                    // since it paints the item in the slot first\n                                    this.$nextTick(() => {\n                                        if(this.$refs.timingChecker){\n                                            this.$refs.timingChecker.validate_course_period();\n                                        }\n                                    });\n                                });\n                            }).fail(notification.exception);\n                        }\n                        else  if(event.type.type == \"filter\") {\n                            debug.info(\"Adding new filter compenent\");\n                            call([{\n                                methodname: 'local_treestudyplan_add_studyitem',\n                                args: {\n                                    \"line_id\": self.line.id,\n                                    \"slot\" : self.slotindex,\n                                    \"type\": event.data.type,\n                                    \"details\":{\n                                        \"badge_id\": event.data.badge?event.data.badge.id:undefined,\n                                    }\n                                }\n                            }])[0].done((response) => {\n                                let item = response;\n                                self.relocateStudyItem(item).done(()=>{\n                                    item.layer = this.layer;\n                                    self.value.push(item);\n                                    self.$emit(\"input\",self.value);\n                                });\n                            }).fail(notification.exception);\n                        }\n                    }\n                },\n                onCut(event) {\n                    const self=this;\n                    let id = event.data.id;\n                    for(let i = 0; i < self.value.length; i++){\n                        if(self.value[i].id == id){\n                            self.value.splice(i, 1); i--;\n                            break; // just remove one\n                        }\n                    }\n                    // Do something to signal that this item has been removed\n                    this.$emit(\"input\",this.value);\n                },\n                relocateStudyItem(item){\n                    const iteminfo = {'id': item.id, 'layer': this.layer, 'slot': this.slotindex, 'line_id': this.line.id};\n                    return call([{\n                        methodname: 'local_treestudyplan_reorder_studyitems',\n                        args: { 'items': [iteminfo] } // function was designed to relocate multiple items at once, hence the array\n                    }])[0].fail(notification.exception);\n                },\n                onDragEnter(event){\n                    this.hover.component = event.data;\n                    this.hover.type = event.type;\n                },\n                onDragLeave(){\n                    this.hover.component = null;\n                    this.hover.type = null;\n                },\n                maxSpan(){\n                    // Determine the maximum span for components in this slot\n                    // Used for setting the max in the timing adjustment screen(s)\n                    // And for checking the filter types\n\n                    // Assume this slot is first one available\n                    let freeIndex = this.slotindex;\n                    // Determine last free slot following this one in the layer\n                    for(let i = this.slotindex + 1; i <= this.page.periods; i++){\n                        if(this.line.slots && this.line.slots[i] && this.line.slots[i].courses){\n                            const clist = this.line.slots[i].courses;\n                            const flist = this.line.slots[i-1].filters; // next filter is in the same slot\n                            let busy = false;\n                            for(const ix in clist) {\n                                if( clist[ix].layer == this.layer) {\n                                    busy = true; // slot is busy in this layer.\n                                    break;\n                                }\n                            }\n                            for(const ix in flist) {\n                                if( flist[ix].layer == this.layer) {\n                                    busy = true; // slot is busy in this layer.\n                                    break;\n                                }\n                            }\n\n                            if(! busy) {\n                                // slot is free in this layer\n                                freeIndex = i;\n                            } else {\n                                break; // stop checking next slots\n                            }\n\n                        } else {\n                            break; // stop processing\n                        }\n                    }\n                    // calculate span from that\n                    return freeIndex - this.slotindex + 1;\n\n                },\n                makeType(item){\n                    return {\n                        item: true,\n                        component: false,\n                        span: item.span,\n                        type: this.type,\n                    };\n                },\n                checkType(type) {\n                    if(type.type == this.type){\n                        if(type == 'filter'){\n                             return true;\n                        } else if(type.span <= this.maxSpan()){\n                            return true;\n                        } else {\n                            return false;\n                        }\n                    } else {\n                        return false;\n                    }\n                }\n            },\n            template: `\n            <div :class=\"'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ' ' + ((slotindex==0)?' t-studyline-firstcolumn ':' ')\n                         + (current?'current ':' ')\"\n                :data-studyline=\"line.id\" ref=\"main\"\n                :style='spanCss'\n                ><drag v-if=\"item\"\n\n                    :key=\"item.id\"\n                    class=\"t-slot-item\"\n                    :data=\"item\"\n                    :type=\"makeType(item)\"\n                    @cut=\"onCut\"\n                        ><t-item\n                            @deleted=\"onCut\"\n                            v-model=\"value[itemidx]\"\n                            :plan=\"plan\"\n                            :line='line'\n                            :page='page'\n                            :period='period'\n                            :maxspan='maxSpan()'\n                        ></t-item\n                    ></drag\n                ><drop v-else\n                    :class=\"'t-slot-drop '+type + (layer > 0?' secondary':' primary')\"\n                    :accepts-type=\"checkType\"\n                    @drop=\"onDrop\"\n                    mode=\"cut\"\n                    @dragenter=\"onDragEnter\"\n                    @dragleave=\"onDragLeave\"\n                ><template v-if=\"hover.component\">\n                        <div v-if=\"hover.type.item\"\n                            class=\"t-slot-item feedback\"\n                            :key=\"hover.component.id\"\n                            ><t-item v-model=\"hover.component\" dummy></t-item\n                            ></div\n                        ><div v-else-if=\"hover.type.type == 'gradable'\"\n                            class=\"t-slot-item feedback\"\n                            :key=\"'course-'+hover.component.id\"\n                            ><t-item-course v-model=\"courseHoverDummy\"></t-item-course></div\n                        ><div v-else-if=\"hover.type.type == 'filter'\"\n                            class=\"t-slot-item feedback\"\n                            key=\"tooldrop\"\n                            ><t-item-junction    v-if=\"hover.component.type == 'junction'\" ></t-item-junction\n                            ><t-item-start       v-else-if=\"hover.component.type == 'start'\"    ></t-item-start\n                            ><t-item-finish      v-else-if=\"hover.component.type == 'finish'\"   ></t-item-finish\n                            ><t-item-badge       v-else-if=\"hover.component.type == 'badge'\"    ></t-item-badge\n                        ></div\n                        ><div v-else\n                            class=\"t-slot-item feedback\"\n                            :key=\"hover.type\">--{{ hover.type }}--</div\n                    ></template\n                ></drop>\n                <t-item-timing-checker hidden\n                    v-if=\"value && value[itemidx] && value[itemidx].course\"\n                    ref=\"timingChecker\"\n                    :maxspan=\"maxSpan()\"\n                    :page=\"page\"\n                    :period=\"period\"\n                    v-model=\"value[itemidx]\"\n                    ></t-item-timing-checker>\n            </div>\n            `,\n        });\n\n\n        Vue.component('t-item-timing-checker', {\n            props: {\n                value: {\n                    type: Object, // t-item model\n                },\n                page: {\n                    type: Object, // Studyplan data\n                },\n                period: {\n                    type: Object, // Studyplan data\n                },\n                maxspan: {\n                    type: Number,\n                },\n                hidden: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            computed: {\n                endperiod() {\n                    const endperiodnr = Math.min(this.page.periods,this.period.period + (this.value.span - 1));\n                    return this.page.perioddesc[endperiodnr-1];\n                },\n                course_period_matches() {\n                    const self=this;\n                    if(self.value && self.value.type == 'course'){\n                        self.datechanger.coursespan = datespaninfo(self.value.course.startdate,self.value.course.enddate);\n                        self.datechanger.periodspan = datespaninfo(self.period.startdate,self.endperiod.enddate);\n                        if( self.datechanger.coursespan.first.getTime() == self.datechanger.periodspan.first.getTime()\n                            && self.datechanger.coursespan.last.getTime() == self.datechanger.periodspan.last.getTime()  ){\n                            return true;\n                        }\n                        else {\n                            return false;\n                        }\n                    } else {\n                        debug.warn(\"Timing thing not proper configured\",self.value,self.period,self.maxspan);\n                        return false;\n                    }\n                },\n            },\n            data() {\n                return {\n                    // Create random id to avoid opening the wrong modals\n                    id: Math.floor(Math.random() * Date.now()).toString(16),\n                    text: strings.course_timing,\n                    datechanger: {\n                        coursespan: null,\n                        periodspan: null,\n                        globals: datechanger_globals,\n                    }\n                };\n            },\n            methods: {\n\n                validate_course_period(force) {\n                    const self = this;\n\n                    debug.info(\"Validating course and period\");\n                    if(!(self.course_period_matches)){\n                        debug.info(\"Course timing does not match period timing\");\n\n                        if(self.value.course.canupdatecourse){\n                            if(!self.hidden || !self.datechanger.globals.default){\n                                // Periods do not match, pop up the date change request\n                                this.$bvModal.show('t-course-timing-matching-'+this.id);\n                            } else if (self.datechanger.globals.defaultvalue){\n                                // go for it without asking\n                                self.change_course_period();\n                            }\n                        }\n                        else {\n                            // user is not able to change course timing - show a warning\n                            if(!self.hidden || !self.datechanger.globals.hidewarn){\n                                this.$bvModal.show('t-course-timing-warning-'+this.id);\n                            }\n                        }\n                    }\n                    else {\n                        debug.info(\"Course timing matches period\",self.datechanger);\n                    }\n                },\n                change_course_period() {\n                    const self=this;\n                    // Save the state\n                    if(self.datechanger.globals.default){\n                        self.datechanger.globals.defaultvalue = true;\n                    }\n                    return call([{\n                        methodname: 'local_treestudyplan_course_period_timing',\n                        args: { period_id: self.period.id,\n                                course_id: this.value.course.id,\n                                span: this.value.span,\n                            }\n                    }])[0].fail(notification.exception).done((response) => {\n                        self.value.course.startdate = response.startdate;\n                        self.value.course.enddate = response.enddate;\n                        self.value.course.timing = response.timing;\n                        self.$emit(\"input\",self.value);\n                    });\n                },\n                change_span(span) {\n                    const self=this;\n                    return call([{\n                        methodname: 'local_treestudyplan_set_studyitem_span',\n                        args: { id: self.value.id,\n                                span: span\n                            }\n                    }])[0].fail(notification.exception).done((response) => {\n                        self.value.span = response.span;\n                        self.$emit('input',self.value);\n                        self.$nextTick(() => {\n                            self.validate_course_period();\n                        });\n                    } );\n                },\n                format_duration(dsi){\n                    let s = \"\";\n                    if(dsi.years == 1){ s += `1 ${this.text.year}, `;}\n                    else if(dsi.years > 1){ s += `${dsi.years} ${this.text.years}, `;}\n                    if(dsi.weeks == 1){ s += `1 ${this.text.week}, `;}\n                    else if(dsi.weeks > 1){ s += `${dsi.weeks} ${this.text.weeks}, `;}\n                    if(dsi.days == 1){ s += `1 ${this.text.day}, `;}\n                    else if(dsi.days > 1){ s += `${dsi.days} ${this.text.days}, `;}\n\n                    return s.toLocaleLowerCase();\n                },\n            },\n            // To avoid the span creeping in the dom where it shouldn't, set display to none if it is hidden\n            // This does not affect the modals, which are rendered outside of this element when needed\n            template: `\n            <div :class=\"'t-item-timing-checker'\" :style=\"hidden?'display: none ':''\">\n                <template v-if=\"!hidden\" >\n                    <span class=\"mr-1\" v-if=\"course_period_matches\">\n                        <i  class=\"text-success fa fa-calendar-check-o\"\n                            v-b-tooltip.hover.topright :title=\"text.timing_ok\"\n                        ></i>\n                    </span>\n                    <span class=\"mr-1\" v-else>\n                        <a  href='#' @click=\"validate_course_period()\" class=\"text-warning\"\n                            v-b-tooltip.hover.bottomleft :title=\"text.timing_off\"\n                            ><i class=\"fa fa-calendar-times-o\"\n                            ></i\n                            ><i class=\"fa fa-question-circle text-black-50\"\n                                style=\"font-size: 0.8em; top: -0.3em; position: relative;\"\n\n                            ></i\n                        ></a>\n                    </span>\n                    <span class=\"ml-1\" v-b-tooltip.hover.bottomleft :title=\"text.periodspan_desc\"\n                        >{{ text.periodspan\n                        }}&nbsp;<b-form-select\n                            class=\"\"\n                            size=\"sm\" @change=\"change_span\" v-model=\"value.span\">\n                            <b-form-select-option v-for=\"(n,i) in maxspan\" :value='n' :key='i'\n                            >{{ n }}</b-form-select-option>\n                        </b-form-select\n                        >&nbsp;{{\n                            (value.span == 1)?text.period.toLowerCase():text.periods.toLowerCase()\n                        }}<i\n                            class=\"fa fa-question-circle text-black-50\"\n                            style=\"font-size: 0.8em; top: -0.3em; position: relative;\"\n                            ></i>\n                    </span>\n                </template>\n                <b-modal\n                    :id=\"'t-course-timing-matching-'+this.id\"\n                    size=\"lg\"\n                    :title=\"text.title\"\n                    @ok=\"change_course_period\"\n                    :ok-title=\"text.yes\"\n                    ok-variant=\"danger\"\n                    :cancel-title=\"text.no\"\n                    cancel-variant=\"primary\"\n                    >\n                    <b-container v-if=\"datechanger.coursespan && datechanger.periodspan && value && value.course\">\n                        <b-row><b-col cols=\"12\">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols=\"12\"><div class=\"generalbox alert alert-warning\">{{ text.question }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols=\"6\">\n                                <h3> {{ text.course }} </h3>\n                                <p class=\"mb-0\"><b>{{ value.course.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ value.course.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols=\"6\">\n                                <h3> {{ text.period }} </h3>\n                                <p class=\"mb-0\"><b>{{ period.fullname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ period.shortname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if='hidden' class=\"pt-2\"><b-col cols=\"12\">\n                            <b-form-checkbox type=\"checkbox\" v-model=\"datechanger.globals.default\">{{ text.rememberchoice }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n                <b-modal\n                    :id=\"'t-course-timing-warning-'+this.id\"\n                    size=\"lg\"\n                    ok-variant=\"primary\"\n                    :title=\"text.title\"\n                    :ok-title=\"text.yes\"\n                    ok-only\n                    >\n                    <b-container v-if=\"datechanger.coursespan && datechanger.periodspan && value && value.course\">\n                        <b-row><b-col cols=\"12\">{{ text.desc }}</b-col></b-row>\n                        <b-row><b-col cols=\"12\"><div class=\"generalbox alert alert-warning\">{{ text.warning }}</div></b-col></b-row>\n                        <b-row>\n                            <b-col cols=\"6\">\n                                <h3> {{ text.course }} </h3>\n                                <p class=\"mb-0\"><b>{{ value.course.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ value.course.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.coursespan)}}</p>\n                            </b-col>\n                            <b-col cols=>\"6\">\n                                <h3> {{ text.period }} </h3>\n                                <p class=\"mb-0\"><b>{{ period.fullname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.fullname }}</b></p>\n                                <p class=\"mb-1\"><b>{{ period.shortname }}</b><b v-if=\"value.span > 1\"> - {{ endperiod.shortname }}</b></p>\n                                <p class=\"mb-1\">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>\n                                <p class=\"mb-0\"><b>{{ text.duration }}</b><br>\n                                {{ format_duration(datechanger.periodspan)}}</p>\n                            </b-col>\n                        </b-row>\n                        <b-row v-if='hidden' class=\"pt-2\"><b-col cols=\"12\">\n                            <b-form-checkbox type=\"checkbox\" v-model=\"datechanger.globals.hidewarn\">{{ text.hidewarning }}</b-form-checkbox>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            `,\n        });\n\n\n        Vue.component('t-item', {\n            props: {\n                value :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                dummy :{\n                    type: Boolean,\n                    default() { return false;},\n                },\n                plan: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                line: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                page: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                period: {\n                    type: Object, // Studyplan page\n                    default() { return null;},\n                },\n                maxspan: {\n                    type: Number,\n                    default() { return 0;},\n                },\n            },\n            data() {\n                return {\n                    dragLine: null,\n                    dragEventListener: null,\n                    deleteMode: false,\n                    condition_options: string_keys.conditions,\n                    text: strings.item_text,\n                    showContext: false,\n                    lines: [],\n                };\n            },\n            methods: {\n                dragStart(event){\n                    // Add line between start point and drag image\n                    this.deleteMode = false;\n                    let start = document.getElementById('studyitem-'+this.value.id);\n                    let dragelement= document.getElementById('t-item-cdrag-'+this.value.id);\n                    dragelement.style.position = 'fixed';\n                    dragelement.style.left = event.position.x+'px';\n                    dragelement.style.top = event.position.y+'px';\n                    this.dragLine = new SimpleLine(start,dragelement,{\n                            color: \"#777\",\n                            gravity: {\n                                start: LINE_GRAVITY,\n                                end: LINE_GRAVITY,\n                            },\n                        });\n                    // Add separate event listener to reposition mouse move\n                    document.addEventListener(\"mousemove\",this.onMouseMove);\n                },\n                dragEnd(){\n                    if(this.dragLine !== null) {\n                        this.dragLine.remove();\n                    }\n                    let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);\n                    dragelement.style.removeProperty('left');\n                    dragelement.style.removeProperty('top');\n                    dragelement.style.removeProperty('position');\n                    document.removeEventListener(\"mousemove\",this.onMouseMove);\n                },\n                onMouseMove: function(event){\n                    let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);\n                    dragelement.style.position = 'fixed';\n                    dragelement.style.left = event.clientX+'px';\n                    dragelement.style.top = event.clientY+'px';\n                    // line will follow automatically\n                },\n                onDrop(event){\n                    let from_id = event.data.id;\n                    let to_id = this.value.id;\n                    this.redrawLines();\n                    call([{\n                        methodname: 'local_treestudyplan_connect_studyitems',\n                        args: { 'from_id': from_id, 'to_id': to_id }\n                    }])[0].done((response)=>{\n                        let conn = {'id': response.id, 'from_id': response.from_id, 'to_id': response.to_id};\n                        ItemEventBus.$emit(\"createdConnection\",conn);\n                        this.value.connections.in.push(conn);\n                    }).fail(notification.exception);\n                },\n                redrawLine(conn){\n                    const lineColor = \"var(--success)\";\n                    const start = document.getElementById(`studyitem-${conn.from_id}`);\n                    const end = document.getElementById(`studyitem-${conn.to_id}`);\n\n                    // delete old line\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].remove();\n                        delete this.lines[conn.to_id];\n                    }\n                    // create a new line if the start and finish items are visible\n                    if(start !== null && end !== null && isVisible(start) && isVisible(end)){\n                        this.lines[conn.to_id] = new SimpleLine( start,end,{\n                            color: lineColor,\n                            gravity: {\n                                start: LINE_GRAVITY,\n                                end: LINE_GRAVITY,\n                            },\n                        });\n                    }\n\n                },\n                deleteLine(conn){\n                    const self = this;\n                    call([{\n                        methodname: 'local_treestudyplan_disconnect_studyitems',\n                        args: { 'from_id': conn.from_id, 'to_id': conn.to_id }\n                    }])[0].done((response)=>{\n                        if(response.success){\n                            this.removeLine(conn);\n                            // send disconnect event on message bus, so the connection on the other end can delete it too\n                            ItemEventBus.$emit(\"connectionDisconnected\",conn);\n                            // Remove connection from our outgoing list\n                            let index = self.value.connections.out.indexOf(conn);\n                            self.value.connections.out.splice(index, 1);\n                        }\n                    }).fail(notification.exception);\n                },\n                highlight(conn){\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].setConfig({color:\"var(--danger)\",});\n                    }\n                },\n                normalize(conn){\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].setConfig({color:\"var(--success)\",});\n                    }\n                },\n                updateItem() {\n                    call([{\n                        methodname: 'local_treestudyplan_edit_studyitem',\n                        args: { 'id': this.value.id,\n                                'conditions': this.value.conditions,\n                                'continuation_id': this.value.continuation_id,}\n                    }])[0].fail(notification.exception);\n                },\n                doShowContext(event) {\n                    if(this.hasContext){\n                        this.showContext=true;\n                        event.preventDefault();\n                    }\n                },\n                redrawLines(){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            this.redrawLine(conn);\n                        }\n                    }\n                },\n\n                // EVENT LISTENERS\n                onCreatedConnection(conn){\n                    if(conn.from_id == this.value.id){\n                        this.value.connections.out.push(conn);\n                        this.redrawLine(conn);\n                    }\n                },\n                // Listener for the signal that a connection was removed by the outgoing item\n                onRemovedConnection(conn){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.in){\n                            let c_in = this.value.connections.in[i];\n                            if(conn.id == c_in.id){\n                                self.value.connections.out.splice(i, 1);\n                            }\n                        }\n                    }\n                },\n                // Listener for reposition events\n                // When an item in the list is repositioned, all lines need to be redrawn\n                onRePositioned(){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            this.redrawLine(conn);\n                        }\n                    }\n                },\n                // When an item is disPositioned - (temporarily) removed from the list,\n                // all connections need to be deleted.\n                onDisPositioned(re_id){\n                    if(this.value.connections && this.value.connections.out){\n                        for(let i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            if(conn.to_id == re_id){\n                                this.removeLine(conn);\n                            }\n                        }\n                    }\n                },\n\n                // When an item is deleted\n                // all connections to/from that item need to be cleaned up\n                onItemDeleted(item_id){\n                    const self = this;\n                    if(this.value.connections && this.value.connections.out){\n                        for(const i in this.value.connections.out){\n                            let conn = this.value.connections.out[i];\n                            if(conn.to_id == item_id){\n                                self.removeLine(conn);\n                                self.value.connections.out.splice(i, 1);\n                            }\n                        }\n                    }\n                    if(this.value.connections && this.value.connections.in){\n                        for(const i in this.value.connections.in){\n                            let conn = this.value.connections.in[i];\n                            if(conn.from_id == item_id){\n                                self.value.connections.out.splice(i, 1);\n                            }\n                        }\n                    }\n                },\n\n                onRedrawLines(){\n                    this.redrawLines();\n                },\n\n                removeLine(conn){\n                    if(this.lines[conn.to_id]){\n                        this.lines[conn.to_id].remove();\n                        delete this.lines[conn.to_id];\n                    }\n                },\n                deleteItem(){\n                    const self = this;\n                    const msgparams = {\n                        item: this.text['type_' + this.value.type].toLocaleLowerCase(),\n                        name: (this.value.type=='course')?this.value.course.displayname:\"\",\n                        line: (this.line) ? this.line.name : \"\",\n                        period: (this.period) ? this.period.fullname : this.plan.name,\n                    };\n\n                    this.$bvModal.msgBoxConfirm(strformat(this.text.item_delete_message, msgparams), {\n                        okVariant : 'danger',\n                        okTitle : this.text.ok,\n                        cancelTitle: this.text.cancel,\n                    }).then(value => {\n                        if ( value ) {\n                            // Confirmed to delete.\n                            call([{\n                                methodname: 'local_treestudyplan_delete_studyitem',\n                                args: { 'id': self.value.id, }\n                            }])[0].done(function(response){\n                                if(response.success == true){\n                                    self.$emit(\"deleted\",{ data: self.value });\n                                }\n                            }).fail(notification.exception);\n                        }\n                    }).catch(err => {\n                        debug.console.error(err);\n                    });\n                }\n\n\n            },\n            computed: {\n                hasConnectionsOut() {\n                    return !([\"finish\",].includes(this.value.type));\n                },\n                hasConnectionsIn() {\n                    return !([\"start\",].includes(this.value.type));\n                },\n                hasContext() {\n                    return ['start','junction','finish'].includes(this.value.type);\n                }\n            },\n            created(){\n                // Add event listeners on the message bus\n                // But only if not in \"dummy\" mode - mode which is used for droplist placeholders\n                // Since an item is \"fully made\" with all references, not specifying dummy mode really messes things up\n                if(!this.dummy){\n\n                    // Listener for the signal that a new connection was made and needs to be drawn\n                    // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines\n                    ItemEventBus.$on('createdConnection', this.onCreatedConnection);\n                    // Listener for the signal that a connection was removed by the outgoing item\n                    ItemEventBus.$on('removedConnection', this.onRemovedConnection);\n                    // Listener for reposition events\n                    // When an item in the list is repositioned, all lines need to be redrawn\n                    ItemEventBus.$on('rePositioned', this.onRePositioned);\n                    // When an item is disPositioned - (temporarily) removed from the list,\n                    // all connections need to be deleted.\n                    ItemEventBus.$on('disPositioned', this.onDisPositioned);\n                    // When an item is deleted\n                    // all connections to/from that item need to be cleaned up\n                    ItemEventBus.$on('itemDeleted', this.onItemDeleted);\n                    ItemEventBus.$on('redrawLines', this.onRedrawLines);\n\n\n                }\n            },\n            mounted(){\n                // Initialize connection lines when mounting\n                // But only if not in \"dummy\" mode - mode which is used for droplist placeholders\n                // Since an item is \"fully made\" with all references, not specifying dummy mode really messes things up\n\n                if(!this.dummy)\n                {\n                    this.redrawLines();\n                    setTimeout(()=>{\n                        ItemEventBus.$emit(\"rePositioned\",this.value.id);\n                    },10);\n                }\n            },\n            beforeDestroy(){\n                if(!this.dummy) {\n                    for(let i in this.value.connections.out){\n                        let conn = this.value.connections.out[i];\n                        this.removeLine(conn);\n                    }\n                    ItemEventBus.$emit(\"disPositioned\",this.value.id);\n\n                    // Remove event listeners\n                    ItemEventBus.$off('createdConnection', this.onCreatedConnection);\n                    ItemEventBus.$off('removedConnection', this.onRemovedConnection);\n                    ItemEventBus.$off('rePositioned', this.onRePositioned);\n                    ItemEventBus.$off('disPositioned', this.onDisPositioned);\n                    ItemEventBus.$off('itemDeleted', this.onItemDeleted);\n                    ItemEventBus.$off('redrawLines', this.onRedrawLines);\n                }\n            },\n            beforeUpdate(){\n            },\n            updated(){\n                if(!this.dummy) {\n                    this.redrawLines();\n                }\n            },\n            template: `\n            <div class=\"t-item-base\" :id=\"'studyitem-'+value.id\">\n                <t-item-course\n                    v-if=\"value.type == 'course'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                    :plan='plan'\n                    :page='page'\n                    :period='period'\n                    :maxspan='maxspan'\n                ></t-item-course>\n                <t-item-junction\n                    v-if=\"value.type == 'junction'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-junction>\n                <t-item-start\n                    v-if=\"value.type == 'start'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-start>\n                <t-item-finish\n                    v-if=\"value.type == 'finish'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-finish>\n                <t-item-badge\n                    v-if=\"value.type == 'badge'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-badge>\n                <t-item-invalid\n                    v-if=\"value.type == 'invalid'\"\n                    @deleterq=\"deleteItem\"\n                    v-model=\"value\"\n                ></t-item-invalid>\n                <drop v-if='!dummy && hasConnectionsIn' accepts-type=\"linestart\"\n                    :id=\"'t-item-cend-'+value.id\"\n                    class=\"t-item-connector-end\"\n                    mode=\"copy\"\n                    @drop=\"onDrop\"\n                    ><svg width='5px' height='10px'><rect ry=\"1px\" rx=\"1px\" y=\"0px\" x=\"0px\" height=\"10px\" width=\"5px\"/></svg></drop>\n                <drag v-if='!dummy && hasConnectionsOut' type=\"linestart\"\n                    :id=\"'t-item-cstart-'+value.id\"\n                    :class=\"'t-item-connector-start ' + ((deleteMode&&value.connections.out.length)?'deleteMode':'')\"\n                    :data=\"value\"\n                    @dragstart=\"dragStart\"\n                    @dragend=\"dragEnd\"\n                    @click=\"deleteMode = (value.connections.out.length)?(!deleteMode):false\"\n                    >\n                    <svg  width='5px' height='10px'><rect ry=\"1px\" rx=\"1px\" y=\"0px\" x=\"0px\" height=\"10px\" width=\"5px\"/></svg>\n                    <template v-slot:drag-image=\"{data}\"> <i :id=\"'t-item-cdrag-'+value.id\" class=\"fa\"></i>\n                    </template>\n                </drag>\n                <div class=\"deletebox\" v-if=\"deleteMode && value.connections.out.length > 0\"\n                    >\n                    <a v-for=\"conn in value.connections.out\"\n                        @click=\"deleteLine(conn)\"\n                        @mouseenter=\"highlight(conn)\"\n                        @mouseleave=\"normalize(conn)\"\n                        class=\"t-connection-delete text-danger\"\n                        :title=\"conn.id\">\n                        <i class=\"fa fa-trash\"></i>\n                    </a>\n                </div>\n                <a  v-if=\"hasContext\" class=\"t-item-config\"\n                    v-b-modal=\"'t-item-config-'+value.id\" href=\"#\" @click.prevent=\"\"><i  class=\"fa fa-gear\"></i></a>\n                <b-modal no-body class=\"\"\n                    :id=\"'t-item-config-'+value.id\"\n                    :title=\"text['item_configuration']\"\n                    scrollable\n                    ok-only\n                    class=\"t-item-contextview b-modal-justify-footer-between\"\n                >\n                    <b-form-group\n                        v-if=\"value.type != 'start'\"\n                        :label=\"text.select_conditions\"\n                    >\n                        <b-form-select size=\"sm\"\n                            @input=\"updateItem\"\n                            v-model=\"value.conditions\"\n                            :options=\"condition_options\"\n                        ></b-form-select>\n                    </b-form-group>\n\n                   <template #modal-footer=\"{ ok, cancel, hide }\" >\n                    <a href='#' @click='deleteItem()' class=\"text-danger\"\n                        ><i class=\"fa fa-trash\"></i>\n                        {{ text.delete }}\n                    </a>\n                    <b-button size=\"sm\" variant=\"primary\" @click=\"ok()\">\n                      {{ text.ok }}\n                    </b-button>\n                  </template>\n\n                </b-modal>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-invalid', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default: function(){ return null;},\n                },\n            },\n            data() {\n                return {\n                    text: strings.invalid,\n                };\n            },\n            methods: {\n            },\n            template: `\n            <div class=\"t-item-invalid\">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span class=\"t-timing-indicator timing-invalid\"></span>\n                    </b-col>\n                    <b-col md=\"11\">\n                        <b-card-body class=\"align-items-center\">\n                            <i class=\"fa fa-exclamation\"></i> {{text.error}}\n                            <a href='#' @click='$emit(\"deleterq\")' class=\"text-danger\"\n                            ><i class=\"fa fa-trash\"></i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-course', {\n            props: {\n                value:{\n                    type: Object,\n                    default(){ return null;},\n                },\n                plan:{\n                    type: Object,\n                    default(){ return null;},\n                },\n                page: {\n                    type: Object, // PAge data\n                    default() { return null;}\n                },\n                period: {\n                    type: Object, // Period data\n                    default() { return null;}\n                },\n                maxspan: {\n                    type: Number,\n                    default() { return 0;}\n                },\n            },\n            data() {\n                return {\n                    condition_options: string_keys.conditions,\n                    text: strings.item_course_text,\n                };\n            },\n            computed: {\n                useItemConditions() {\n                    if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useItemConditions !== undefined){\n                        return this.plan.aggregation_info.useItemConditions;\n                    }\n                    else {\n                        return false;\n                    }\n                },\n\n                configurationState(){\n                    if(this.hasGrades() || this.hasCompletions()) {\n                        return \"t-configured-ok\";\n                    } else {\n                        return \"t-configured-alert\";\n                    }\n                },\n\n                configurationIcon(){\n                    if(this.hasGrades() || this.hasCompletions()) {\n                        return \"check\";\n                    } else {\n                        return \"exclamation-circle\";\n                    }\n                },\n                startdate(){\n                    return format_date(this.value.course.startdate);\n                },\n                enddate(){\n                    if(this.value.course.enddate){\n                        return format_date(this.value.course.enddate);\n                    }\n                    else {\n                        return this.text.noenddate;\n                    }\n                }\n\n            },\n            methods: {\n                hasGrades() {\n                    if(this.value.course.grades && this.value.course.grades.length > 0){\n                        for(const g of this.value.course.grades){\n                            if(g.selected){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n                hasCompletions() {\n                    if(this.value.course.completion && this.value.course.completion.conditions) {\n                        for(const cgroup of this.value.course.completion.conditions){\n                            if(cgroup.items && cgroup.items.length > 0){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n                includeChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': newValue,\n                                'required': g.required,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n                requiredChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': g.selected,\n                                'required': newValue,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n                updateConditions() {\n                    call([{\n                        methodname: 'local_treestudyplan_edit_studyitem',\n                        args: { 'id': this.value.id,\n                                'conditions': this.value.conditions,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n            },\n            created() {\n\n            },\n            template: `\n            <div class=\"t-item-course\">\n            <b-card no-body >\n                <div class='d-flex flex-wrap mr-0 ml-0'>\n                    <div>\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'t-timing-indicator timing-'+value.course.timing\"></span>\n                    </div>\n                    <div class=\"flex-fill align-items-center\">\n                        <b-card-body >\n                            <a  class=\"t-item-course-config\"\n                                v-b-modal=\"'t-item-course-config-'+value.id\"\n                                href=\"#\" @click.prevent=\"\"\n                                ><i :class=\"'fa fa-'+configurationIcon+' ' + configurationState\"></i></a>\n                            <a  v-b-modal=\"'t-item-course-config-'+value.id\"\n                                :id=\"'t-item-course-details-'+value.id\"\n                                :href=\"'/course/view.php?id='+value.course.id\"\n                                @click.prevent.stop=\"\">{{ value.course.displayname }}</a>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal class=\"\"\n                    :id=\"'t-item-course-config-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    ok-only\n                    size=\"lg\"\n                    scrollable\n                    class=\"b-modal-justify-footer-between\"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"'/course/view.php?id='+value.course.id\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a>\n                                <a v-if='!!value.course.completion'\n                                    :href=\"'/course/completion.php?id='+value.course.id\"  target=\"_blank\"\n                                :title=\"text.configure_completion\"><i class=\"fa fa-gear\"></i></a>\n                                </h1>\n                            {{ value.course.context.path.join(\" / \")}} / {{value.course.shortname}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                            <t-item-timing-checker\n                                class=\"mt-1\"\n                                :maxspan=\"maxspan\"\n                                :page=\"page\"\n                                :period=\"period\"\n                                v-model=\"value\"\n                             ></t-item-timing-checker>\n                        </div>\n                    </template>\n\n                    <t-item-course-grades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value' :plan=\"plan\"\n                        ></t-item-course-grades>\n                    <t-item-course-completion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        ></t-item-course-completion>\n\n                    <template #modal-footer=\"{ ok, cancel, hide }\" >\n                        <a href='#' @click='$emit(\"deleterq\")' class=\"text-danger\"\n                            ><i class=\"fa fa-trash\"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size=\"sm\" variant=\"primary\" @click=\"ok()\">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n            </b-card></div>\n            `,\n        });\n\n\n        Vue.component('t-item-course-grades', {\n            props: {\n                'value' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                'plan' :{\n                    type: Object,\n                    default(){ return null;},\n                },\n            },\n            data() {\n                return {\n                    condition_options: string_keys.conditions,\n                    text: strings.item_course_text,\n                };\n            },\n            computed: {\n                useRequiredGrades() {\n                    if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useRequiredGrades !== undefined){\n                        return this.plan.aggregation_info.useRequiredGrades;\n                    }\n                    else {\n                        return false;\n                    }\n                },\n                selectedgrades(){\n                    let list = [];\n                    for(let ix in this.value.course.grades){\n                        let g = this.value.course.grades[ix];\n                        if(g.selected){\n                            list.push(g);\n                        }\n                    }\n                    return list;\n                },\n            },\n            methods: {\n                includeChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': newValue,\n                                'required': g.required,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n                requiredChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': g.selected,\n                                'required': newValue,\n                                }\n                    }])[0].fail(notification.exception);\n                },\n            },\n            created() {\n\n            },\n            template: `\n            <div>\n                <b-form-group\n                    :label=\"text.select_grades\"\n                    ><ul class=\"t-item-module-children\">\n                        <li class=\"t-item-course-gradeinfo\">\n                            <span class='t-item-course-chk-lbl'>{{text.grade_include}}</span\n                            ><span v-if=\"useRequiredGrades\"  class='t-item-course-chk-lbl'>{{text.grade_require}}</span>\n                        </li>\n                        <li class=\"t-item-course-gradeinfo\" v-for=\"g in value.course.grades\">\n                            <b-form-checkbox inline\n                                @change=\"includeChanged($event,g)\" v-model=\"g.selected\"\n                                ></b-form-checkbox>\n                            <b-form-checkbox v-if=\"useRequiredGrades\" inline :disabled=\"!g.selected\"\n                                @change=\"requiredChanged($event,g)\" v-model=\"g.required\"\n                                ></b-form-checkbox>\n                            <span :title=\"g.typename\" v-html=\"g.icon\"></span>\n                            <s-edit-mod\n                                :title=\"value.course.fullname\"\n                                @saved=\"(fd) => g.name = fd.get('name')\"\n                                v-if=\"g.cmid > 0\"\n                                :cmid=\"g.cmid\"\n                                :coursectxid=\"value.course.ctxid\"\n                                genericonly><span v-html=\"g.name\"></span></s-edit-mod>\n                        </li>\n                    </ul>\n                </b-form-group>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-course-completion',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                course: {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                    text: strings.completion,\n                };\n            },\n            created(){\n                const self = this;\n                // Get text strings for condition settings\n                let stringkeys = [];\n                for(const key in  this.text){\n                    stringkeys.push({ key: key, component: 'local_treestudyplan'});\n                }\n                get_strings(stringkeys).then(function(strings){\n                    let i = 0;\n                    for(const key in  self.text){\n                        self.text[key] = strings[i];\n                        i++;\n                    }\n                });\n            },\n            computed: {\n                hasCompletions() {\n                    if(this.value.conditions) {\n                        for(const cgroup of this.value.conditions){\n                            if(cgroup.items && cgroup.items.length > 0){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n            },\n            methods: {\n                completion_icon(completion) {\n                    switch(completion){\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"complete\":\n                            return \"check-circle\";\n                        case \"complete-pass\":\n                            return \"check-circle\";\n                        case \"complete-fail\":\n                            return \"times-circle\";\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                    }\n                },\n\n                completion_tag(cgroup){\n                    return cgroup.completion?'completed':'incomplete';\n                }\n            },\n            template: `\n            <table class=\"r-item-course-grade-details\">\n                <tr v-if=\"hasCompletions\">\n                    <td colspan='2'><span v-if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any}}</span></td>\n                </tr>\n                <tr v-else>\n                    <td colspan='2'>{{text.completion_not_configured}}!\n                    <br/><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                    </td>\n                </tr>\n                <template v-for='cgroup in value.conditions'>\n                    <tr>\n                        <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                        ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span>\n                        {{cgroup.title}}</th>\n                    </tr>\n                    <tr v-for='ci in cgroup.items'>\n                        <td><span v-html='ci.details.criteria'></span>\n                        </td>\n                        <td v-if=\"ci.details.requirement\" class=\"font-italic\">\n                            {{ci.details.requirement}}\n                        </td>\n                    </tr>\n                </template>\n            </table>\n            `,\n        });\n\n\n        /************************************\n        *                                  *\n        * Toolbox list components          *\n        *                                  *\n        ************************************/\n        Vue.component('t-item-junction',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                    condition_options: string_keys.conditions,\n                };\n            },\n            methods: {\n\n            },\n            template: `\n            <div class='t-item-junction  t-item-filter'>\n                <i class=\"fa fa-check-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-finish',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            methods: {\n            },\n            template: `\n            <div class='t-item-finish t-item-filter'>\n                <i class=\"fa fa-stop-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-start',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            created(){\n\n            },\n            methods: {\n            },\n            template: `\n            <div class='t-item-start t-item-filter'>\n                <i class=\"fa fa-play-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('t-item-badge',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return { badge: {}};},\n                },\n            },\n            data() {\n                return {\n                    txt: strings,\n                    text: strings.item_text,\n                };\n            },\n            methods: {\n            },\n            template: `\n            <div class='t-item-badge t-item-filter' v-b-tooltip.hover :title=\"value.badge.name\">\n                <svg class=\"t-badge-backdrop \" width='50px' height='50px' viewBox=\"0 0 100 100\">\n                    <title>{{value.badge.name}}</title>\n                    <circle cx=\"50\" cy=\"50\" r=\"46\"\n                        style=\"stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;\"/>\n                    <image class=\"badge-image\" clip-path=\"circle() fill-box\"\n                        :href=\"value.badge.imageurl\" x=\"12\" y=\"12\" width=\"76\" height=\"76\"/>\n                </svg>\n                <a class=\"t-item-config badge\"\n                v-b-modal=\"'t-item-badge-details-'+value.id\" href=\"#\" @click.prevent=\"\"><i  class=\"fa fa-gear\"></i></a>\n                <b-modal class=\"\"\n                    :id=\"'t-item-badge-details-'+value.id\"\n                    :title=\"value.badge.name\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    class=\"b-modal-justify-footer-between\"\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class=\"fa fa-certificate\"></i>\n                                <a :href=\"value.badge.infolink\" target=\"_blank\"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols=\"3\">\n                            <img :src=\"value.badge.imageurl\"/>\n                        </b-col><b-col cols=\"9\">\n                            <p>{{value.badge.description}}</p>\n                            <ul class=\"list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1\"\n                             v-if=\"value.badge.criteria\"><li v-for=\"crit in value.badge.criteria\"\n                             ><span v-html='crit'></span></li></ul>\n                            <p><strong><i class=\"fa fa-link\"></i>\n                                <a :href=\"value.badge.infolink\">{{ txt.badge.badgeinfo }}</a></strong></p>\n                        </b-col></b-row>\n                    </b-container>\n                    <template #modal-footer=\"{ ok, cancel, hide }\" >\n                        <a href='#' @click='$emit(\"deleterq\")' class=\"text-danger\"\n                            ><i class=\"fa fa-trash\"></i>\n                            {{ text.delete }}\n                        </a>\n                        <b-button size=\"sm\" variant=\"primary\" @click=\"ok()\">\n                          {{ text.ok }}\n                        </b-button>\n                    </template>\n                </b-modal>\n\n            </div>\n            `,\n        });\n\n        Vue.component('t-coursecat-list',{\n            props: {\n                value : {\n                    type: Array,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            methods: {\n            },\n            template: `\n            <ul class=\"t-coursecat-list\">\n                <t-coursecat-list-item\n                    v-for=\"coursecat,idx in value\"\n                    v-model=\"value[idx]\"\n                    :key=\"coursecat.id\"></t-coursecat-list-item>\n            </ul>\n            `,\n        });\n\n        Vue.component('t-coursecat-list-item',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                    loading: false,\n\n                };\n            },\n            computed: {\n                showSpinner() {\n                    return this.canLoadMore();\n                },\n                hasDetails() {\n                    return (this.value.haschildren || this.value.hascourses);\n                }\n\n            },\n            methods: {\n                canLoadMore() {\n                    return (this.value.haschildren && (!this.value.children || this.value.children.length == 0)) ||\n                        (this.value.hascourses && (!this.value.courses || this.value.courses.length == 0));\n                },\n                onShowDetails(){\n                    const self = this;\n                    if(this.canLoadMore()) {\n                        call([{\n                            methodname: 'local_treestudyplan_get_category',\n                            args: { \"id\": this.value.id}\n                        }])[0].done(function(response){\n                            self.$emit('input', response);\n                        }).fail(notification.exception);\n                    }\n                }\n            },\n            template: `\n            <li class=\"t-coursecat-list-item\">\n                <span v-if=\"hasDetails\" v-b-toggle=\"'coursecat-'+value.id\">\n                    <i class=\"when-closed fa fa-caret-right\"></i>\n                    <i class=\"when-open fa fa-caret-down\"></i>\n                    <span class=\"t-coursecat-heading\">\n                        <i class=\"t-coursecat-list-item fa fa-tasks\"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <span v-else>\n                    <span class=\"t-coursecat-heading\">\n                        <i class=\"t-coursecat-list-item fa fa-tasks\"></i>\n                        {{ value.category.name }}\n                    </span>\n                </span>\n                <b-collapse v-if=\"hasDetails\" :id=\"'coursecat-'+value.id\"\n                    @show=\"onShowDetails\" :visible=\"!!(value.children) || !!(value.courses)\">\n                    <b-spinner class=\"ml-4\" v-if=\"showSpinner\" small variant=\"primary\"></b-spinner>\n                    <t-coursecat-list v-if=\"value.children\" v-model=\"value.children\"></t-coursecat-list>\n                    <t-course-list v-if=\"value.courses\" v-model=\"value.courses\"></t-course-list>\n                </b-collapse>\n            </li>\n            `,\n        });\n\n        Vue.component('t-course-list',{\n            props: {\n                value : {\n                    type: Array,\n                    default: function(){ return {};},\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            methods: {\n                makeType(){\n                    return {\n                        item: false,\n                        component: true,\n                        span: 1, //TODO: Detect longer courses and give them an appropriate span\n                        type: 'gradable',\n                    };\n                },\n            },\n            template: `\n            <ul class=\"t-course-list\">\n                <li class=\"t-course-list-item\" v-for=\"course in value\" :key=\"course.id\">\n                    <drag\n                        class=\"draggable-course\"\n                        :data=\"course\"\n                        :type=\"makeType()\"\n                        @cut=\"\"\n                    >\n                    <i class=\"t-course-list-item fa fa-book\"></i> {{ course.shortname }} - {{ course.fullname }}\n                    </drag>\n                </li>\n            </ul>\n            `,\n        });\n\n    },\n};\n"],"names":["STUDYPLAN_EDITOR_FIELDS","PERIOD_EDITOR_FIELDS","datechanger_globals","default","defaultchoice","hidewarn","install","Vue","use","TSComponents","mFormComponents","debug","Debugger","isVisible","elem","offsetWidth","offsetHeight","getClientRects","length","ItemEventBus","string_keys","conditions","value","textkey","strings","studyplan_text","studyline_editmode","toolbox_toggle","editmode_modules_hidden","studyline_add","add$core","edit$core","studyline_name","studyline_name_ph","studyline_shortname","studyline_shortname_ph","studyline_color","associations","associated_cohorts","associated_users","studyline_edit","studyplan_name","studyplan_name_ph","studyplan_shortname","studyplan_shortname_ph","studyplan_description","studyplan_description_ph","studyplan_idnumber","studyplan_idnumber_ph","studyplan_slots","studyplan_startdate","studyplan_enddate","studyplan_advanced","advanced_tools","confirm_cancel","confirm_ok","success$core","error$core","advanced_converted","advanced_skipped","advanced_failed","advanced_locked","advanced_multiple","advanced_error","advanced_tools_heading","advanced_warning_title","advanced_warning","advanced_pick_scale","advanced_course_manipulation_title","advanced_force_scale_title","advanced_force_scale_desc","advanced_force_scale_button","advanced_disable_autoenddate_title","advanced_disable_autoenddate_desc","advanced_disable_autoenddate_button","advanced_confirm_header","advanced_force_scale_confirm","advanced_import","advanced_export","advanced_export_csv","advanced_import_from_file","advanced_purge","advanced_purge_expl","advanced_cascade_cohortsync_title","advanced_cascade_cohortsync_desc","advanced_cascade_cohortsync","studyplan_edit","studyplan_add","period_edit","edit","fullname","shortname","startdate","enddate","course_timing","title","desc","question","warning","timing_ok","timing_off","course","period","yes","no","duration","years","year","weeks","week","days","day","rememberchoice","hidewarning","periodspan","periods","periodspan_desc","studyplan_associate","associate_cohorts","associate_users","add_association","delete_association","associations_empty","associations_search","cohorts","users","selected","name","context","item_text","select_conditions","item_configuration","ok","delete","item_delete_message","type_course","type_junction","type_start","type_finish","type_badge","type_invalid","item_course_text","select_grades","coursetiming_past","coursetiming_present","coursetiming_future","grade_include","grade_require","cancel","invalid","error","completion","completion_completed","completion_incomplete","aggregation_all","aggregation_any","aggregation_overall_all","aggregation_overall_any","completion_not_configured","configure_completion","badge","share_badge","dateissued","dateexpire","badgeinfo","component","props","type","Object","data","force_scales","selected_scale","result","text","created","mounted","updated","computed","scales","id","disabled","this","concat","advanced","methods","disable_autoenddate","self","methodname","args","studyplan_id","done","response","$bvModal","msgBoxConfirm","success","msg","fail","notification","exception","force_scales_start","okVariant","okTitle","cancelTitle","then","_this","scale_id","export_plan","format","undefined","includes","content","import_studylines","filename","_this2","location","reload","purge_studyline","force","cascade_cohortsync","msgBoxOk","modal_close","template","String","Number","planSaved","updatedplan","info","mode","$emit","moved_from","context_id","moved_to","moved","pages","show","config","userfields","key","cohortfields","association","loading","search","associated","showModal","loadAssociations","cohortOptionModel","c","path","join","userOptionModel","u","firstname","lastname","map","searchCohorts","searchtext","like","exclude_id","cohortAssociate","requests","searchselected","i","r","push","cohort_id","cohortDisassociate","associatedselected","searchUsers","userAssociate","user_id","userDisassociate","editdata","Date","getFullYear","editStart","editFinish","refresh","add_day","date","sub_day","create","studyline","toolbox_shown","editmode","color","original","studyplan","description","slots","aggregation","aggregation_config","aggregation_info","useRequiredGrades","useItemCondition","cache","linelayers","page","studylines","$root","columns","columns_stylerule","s","trashbin_accepts","item","countLineLayers","line","timestamp","maxLayer","ix","courses","layer","filters","slotsempty","Array","isArray","count","movedStudyplan","plan","from","to","addStudyLine","newlineinfo","editLineStart","assign","editLineFinish","editedline","originalline","deleteLine","param","modalresponse","index","indexOf","splice","reorderLines","event","lines","apply","sequence","idx","deletePlan","deleteStudyItem","source","showslot","layeridx","forGradable","list","span","periodEdited","pi","prev","$refs","next","toolbox_switched","layers","layerHeights","$on","onLineHeightChange","lineid","layerid","newheight","main","items","document","querySelectorAll","heightSum","forEach","el","height","getBoundingClientRect","heightStyle","style","deletable","editable","onEdit","onDelete","slotindex","resizeListener","ResizeObserver","size","observe","unmounted","disconnect","slotkey","itemidx","itm","listtype","dragacceptlist","courseHoverDummy","hover","current","now","pstart","pend","spanCss","datechanger","coursespan","onDrop","slot","relocateStudyItem","_this3","timingChecker","validate_course_period","$nextTick","onCut","iteminfo","onDragEnter","onDragLeave","maxSpan","freeIndex","clist","flist","busy","makeType","checkType","maxspan","hidden","Boolean","endperiod","endperiodnr","Math","min","perioddesc","course_period_matches","first","getTime","last","warn","floor","random","toString","globals","canupdatecourse","defaultvalue","change_course_period","period_id","course_id","timing","change_span","format_duration","dsi","toLocaleLowerCase","dummy","dragLine","dragEventListener","deleteMode","condition_options","showContext","dragStart","start","getElementById","dragelement","position","left","x","top","y","SimpleLine","gravity","end","addEventListener","onMouseMove","dragEnd","remove","removeProperty","removeEventListener","clientX","clientY","from_id","to_id","redrawLines","conn","_this4","connections","in","redrawLine","_this5","removeLine","out","highlight","setConfig","normalize","updateItem","continuation_id","doShowContext","hasContext","preventDefault","onCreatedConnection","onRemovedConnection","c_in","onRePositioned","onDisPositioned","re_id","onItemDeleted","item_id","onRedrawLines","deleteItem","msgparams","displayname","catch","err","console","hasConnectionsOut","hasConnectionsIn","setTimeout","_this6","beforeDestroy","$off","beforeUpdate","useItemConditions","configurationState","hasGrades","hasCompletions","configurationIcon","noenddate","grades","cgroup","includeChanged","newValue","g","required","requiredChanged","updateConditions","selectedgrades","guestmode","stringkeys","completion_icon","completion_tag","txt","showSpinner","canLoadMore","hasDetails","haschildren","hascourses","children","onShowDetails"],"mappings":"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"}
\ No newline at end of file
diff --git a/amd/build/treestudyplan-components.min.js b/amd/build/treestudyplan-components.min.js
index 0a79deb..cea6e1e 100644
--- a/amd/build/treestudyplan-components.min.js
+++ b/amd/build/treestudyplan-components.min.js
@@ -1,3 +1,3 @@
-define("local_treestudyplan/treestudyplan-components",["exports","./util/string-helper","./util/date-helper"],(function(_exports,_stringHelper,_dateHelper){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={studyplanTiming:function(a){var now=(new Date).getTime(),timing="future";return new Date(a.startdate).getTime()<now&&(timing=a.enddate&&now>new Date(a.enddate).getTime()?"past":"present"),timing},install:function(Vue){var strings=(0,_stringHelper.load_strings)({studyplancard:{open:"open",noenddate:"noenddate",idnumber:"studyplan_idnumber"}}),ItemEventBus=new Vue;Vue.component("s-studyplan-card",{props:{value:{type:Object},open:{type:Boolean}},data:function(){return{text:strings.studyplancard}},computed:{timing:function(){var now=(new Date).getTime(),startdate=new Date(this.value.pages[0].startdate).getTime(),enddate=new Date(this.value.pages[0].enddate).getTime(),timing="future";return startdate<now&&(timing=this.value.pages[0].enddate&&now>enddate?"past":"present"),timing},startdate:function(){return(0,_dateHelper.format_date)(this.value.pages[0].startdate)},enddate:function(){return this.value.pages[0].enddate?(0,_dateHelper.format_date)(this.value.pages[0].enddate):this.text.noenddate}},methods:{onOpenClick:function(e){this.$emit("open",e)}},template:"\n            <b-card\n                :class=\"'s-studyplan-card timing-' + timing\"\n            >\n                <template #header></template>\n                <b-card-title>\n                    <a v-if='open' href='#' @click.prevent='onOpenClick($event)'>{{value.name}}</a>\n                    <template v-else>{{value.name}}</template>\n                    <slot name='title'></slot>\n                </b-card-title>\n                <div class='s-studyplan-card-idnumber' v-if='value.idnumber'><i>{{ text.idnumber}}:</i> {{ value.idnumber }}</div>\n                <div class='s-studyplan-card-description' v-if='value.description'>{{ value.description }}</div>\n                <slot></slot>\n                <template #footer>\n                    <span :class=\"'t-timing-'+timing\" v-html=\"startdate + ' - '+ enddate\"></span>\n                    <span class=\"s-studyplan-card-buttons\">\n                    <slot name='footer'></slot>\n                    <b-button style=\"float:right;\" v-if='open' variant='primary'\n                        @click.prevent='onOpenClick($event)'>{{ text.open }}</b-button>\n                    </span>\n                </template>\n            </b-card>\n            "}),Vue.component("s-studyline-header-heading",{props:{},data:function(){return{layerHeights:{}}},created:function(){ItemEventBus.$on("headerHeightChange",this.onHeaderHeightChange)},computed:{},methods:{onHeaderHeightChange:function(newheight){this.$refs.main&&(this.$refs.main.style.height="".concat(newheight,"px"))}},template:'\n            <div class="s-studyline-header-heading" ref="main"></div>\n            '}),Vue.component("s-studyline-header-period",{props:{value:{type:Object}},mounted:function(){var self=this;1==self.value.period&&(self.resizeListener=new ResizeObserver((function(){if(self.$refs.main){var size=self.$refs.main.getBoundingClientRect();ItemEventBus.$emit("headerHeightChange",size.height)}})).observe(self.$refs.main))},unmounted:function(){this.resizeListener&&this.resizeListener.disconnect()},computed:{startdate:function(){return(0,_dateHelper.format_date)(this.value.startdate)},enddate:function(){return(0,_dateHelper.format_date)(this.value.enddate)},current:function(){if(this.value&&this.value.startdate&&this.value.enddate){var now=new Date,pstart=new Date(this.value.startdate),pend=new Date(this.value.enddate);return now>=pstart&&now<pend}return!1}},data:function(){return{}},template:'\n            <div :class="\'s-studyline-header-period \' + (current?\'current \':\' \')" ref="main"\n                ><p><abbr :id="\'s-period-\'+value.id" :title="value.fullname">{{ value.shortname }}</abbr>\n                <b-tooltip\n                    :target="\'s-period-\'+value.id" triggers="hover"\n                    >{{ value.fullname }}<br>\n                    <span class="s-studyline-header-period-datespan">\n                        <span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>\n                    </span>\n                </b-tooltip>\n                <slot></slot\n                ><p class="s-studyline-header-period-datespan small">\n                    <span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>\n                </p>\n            </div>\n            '})}};return _exports.default=_default,_exports.default}));
+define("local_treestudyplan/treestudyplan-components",["exports","./util/string-helper","./util/date-helper"],(function(_exports,_stringHelper,_dateHelper){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={studyplanTiming:function(a){var now=(new Date).getTime(),timing="future";return new Date(a.startdate).getTime()<now&&(timing=a.enddate&&now>new Date(a.enddate).getTime()?"past":"present"),timing},install:function(Vue){var strings=(0,_stringHelper.load_strings)({studyplancard:{open:"open",noenddate:"noenddate",idnumber:"studyplan_idnumber",description:"studyplan_description"}}),ItemEventBus=new Vue;Vue.component("s-studyplan-card",{props:{value:{type:Object},open:{type:Boolean}},data:function(){return{text:strings.studyplancard}},computed:{timing:function(){var now=(new Date).getTime(),startdate=new Date(this.value.pages[0].startdate).getTime(),enddate=new Date(this.value.pages[0].enddate).getTime(),timing="future";return startdate<now&&(timing=this.value.pages[0].enddate&&now>enddate?"past":"present"),timing},startdate:function(){return(0,_dateHelper.format_date)(this.value.pages[0].startdate)},enddate:function(){return this.value.pages[0].enddate?(0,_dateHelper.format_date)(this.value.pages[0].enddate):this.text.noenddate}},methods:{onOpenClick:function(e){this.$emit("open",e)}},template:"\n            <b-card\n                :class=\"'s-studyplan-card timing-' + timing\"\n            >\n                <template #header></template>\n                <b-card-title>\n                    <a v-if='open' href='#' @click.prevent='onOpenClick($event)'>{{value.name}}</a>\n                    <template v-else>{{value.name}}</template>\n                    <slot name='title'></slot>\n                </b-card-title>\n                <div class='s-studyplan-card-icon'><img :src='value.icon' style=\"width: 64px; height: 64px;\"></div>\n                <div class='s-studyplan-card-idnumber' v-if='value.idnumber'><i>{{ text.idnumber}}:</i> {{ value.idnumber }}</div>\n                \n                <slot></slot>\n                <template #footer>\n                    <span :class=\"'t-timing-'+timing\" v-html=\"startdate + ' - '+ enddate\"></span>\n                    <span class=\"s-studyplan-card-buttons\">\n                    <slot name='footer'></slot>\n                    <template v-if='value.description'>\n                        <b-button variant=\"primary\" v-b-modal=\"'modal-description-'+value.id\"\n                        ><i class='fa fa-info-circle'></i> {{ text.description }}</b-button>\n                        <b-modal\n                            :title=\"value.name\"\n                            scrollable\n                            centered\n                            ok-only\n                            size=\"xl\"\n                            :id=\"'modal-description-'+value.id\"\n                            ><span v-html=\"value.description\"></span>\n                        </b-modal>\n                    </template>\n                    <b-button style=\"float:right;\" v-if='open' variant='primary'\n                        @click.prevent='onOpenClick($event)'>{{ text.open }}</b-button>\n                    </span>\n                </template>\n            </b-card>\n            "}),Vue.component("s-studyline-header-heading",{props:{},data:function(){return{layerHeights:{}}},created:function(){ItemEventBus.$on("headerHeightChange",this.onHeaderHeightChange)},computed:{},methods:{onHeaderHeightChange:function(newheight){this.$refs.main&&(this.$refs.main.style.height="".concat(newheight,"px"))}},template:'\n            <div class="s-studyline-header-heading" ref="main"></div>\n            '}),Vue.component("s-studyline-header-period",{props:{value:{type:Object}},mounted:function(){var self=this;1==self.value.period&&(self.resizeListener=new ResizeObserver((function(){if(self.$refs.main){var size=self.$refs.main.getBoundingClientRect();ItemEventBus.$emit("headerHeightChange",size.height)}})).observe(self.$refs.main))},unmounted:function(){this.resizeListener&&this.resizeListener.disconnect()},computed:{startdate:function(){return(0,_dateHelper.format_date)(this.value.startdate)},enddate:function(){return(0,_dateHelper.format_date)(this.value.enddate)},current:function(){if(this.value&&this.value.startdate&&this.value.enddate){var now=new Date,pstart=new Date(this.value.startdate),pend=new Date(this.value.enddate);return now>=pstart&&now<pend}return!1}},data:function(){return{}},template:'\n            <div :class="\'s-studyline-header-period \' + (current?\'current \':\' \')" ref="main"\n                ><p><abbr :id="\'s-period-\'+value.id" :title="value.fullname">{{ value.shortname }}</abbr>\n                <b-tooltip\n                    :target="\'s-period-\'+value.id" triggers="hover"\n                    >{{ value.fullname }}<br>\n                    <span class="s-studyline-header-period-datespan">\n                        <span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>\n                    </span>\n                </b-tooltip>\n                <slot></slot\n                ><p class="s-studyline-header-period-datespan small">\n                    <span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>\n                </p>\n            </div>\n            '})}};return _exports.default=_default,_exports.default}));
 
 //# sourceMappingURL=treestudyplan-components.min.js.map
\ No newline at end of file
diff --git a/amd/build/treestudyplan-components.min.js.map b/amd/build/treestudyplan-components.min.js.map
index c453b6b..6d7310d 100644
--- a/amd/build/treestudyplan-components.min.js.map
+++ b/amd/build/treestudyplan-components.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"treestudyplan-components.min.js","sources":["../src/treestudyplan-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {load_strings} from './util/string-helper';\nimport {format_date} from './util/date-helper';\n\nexport default {\n    studyplanTiming(a) {\n        const now = new Date().getTime();\n        let timing = 'future';\n        if(new Date(a.startdate).getTime() < now){\n            if(a.enddate && now > new Date(a.enddate).getTime()) {\n                timing = 'past';\n            } else {\n                timing = 'present';\n            }\n        }\n        return timing;\n    },\n\n    install(Vue/*,options*/){\n        let strings = load_strings({\n            studyplancard: {\n                open: \"open\",\n                noenddate: \"noenddate\",\n                idnumber: \"studyplan_idnumber\"\n            }\n        });\n        // Create new eventbus for interaction between item components\n        const ItemEventBus = new Vue();\n\n        Vue.component('s-studyplan-card', {\n            props: {\n                value: {\n                    type: Object,\n                },\n                open: {\n                    type: Boolean\n                }\n            },\n            data() {\n                return {\n                    text: strings.studyplancard\n                };\n            },\n            computed: {\n                timing(){\n                    const now = new Date().getTime();\n                    const startdate = new Date(this.value.pages[0].startdate).getTime();\n                    const enddate = new Date(this.value.pages[0].enddate).getTime();\n                    let timing = 'future';\n                    if(startdate < now){\n                        if(this.value.pages[0].enddate && now > enddate) {\n                            timing = 'past';\n                        } else {\n                            timing = 'present';\n                        }\n                    }\n                    return timing;\n                },\n                startdate(){\n                    return format_date(this.value.pages[0].startdate);\n                },\n                enddate(){\n                    if(this.value.pages[0].enddate){\n                        return format_date(this.value.pages[0].enddate);\n                    }\n                    else {\n                        return this.text.noenddate;\n                    }\n                }\n            },\n            methods: {\n                onOpenClick(e) {\n                    this.$emit('open',e);\n                }\n            },\n            template: `\n            <b-card\n                :class=\"'s-studyplan-card timing-' + timing\"\n            >\n                <template #header></template>\n                <b-card-title>\n                    <a v-if='open' href='#' @click.prevent='onOpenClick($event)'>{{value.name}}</a>\n                    <template v-else>{{value.name}}</template>\n                    <slot name='title'></slot>\n                </b-card-title>\n                <div class='s-studyplan-card-idnumber' v-if='value.idnumber'><i>{{ text.idnumber}}:</i> {{ value.idnumber }}</div>\n                <div class='s-studyplan-card-description' v-if='value.description'>{{ value.description }}</div>\n                <slot></slot>\n                <template #footer>\n                    <span :class=\"'t-timing-'+timing\" v-html=\"startdate + ' - '+ enddate\"></span>\n                    <span class=\"s-studyplan-card-buttons\">\n                    <slot name='footer'></slot>\n                    <b-button style=\"float:right;\" v-if='open' variant='primary'\n                        @click.prevent='onOpenClick($event)'>{{ text.open }}</b-button>\n                    </span>\n                </template>\n            </b-card>\n            `,\n        });\n\n        /*\n        * S-STUDYLINE-HEADER-HEADING\n        * The only reasing this is not a simple empty div, is the fact that the header height\n        * needs to match that of the period headers\n        */\n        Vue.component('s-studyline-header-heading', {\n            props: {\n\n            },\n            data() {\n                return {\n                    layerHeights: {}\n                };\n            },\n            created() {\n                // Listener for the signal that a new connection was made and needs to be drawn\n                // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines\n                ItemEventBus.$on('headerHeightChange', this.onHeaderHeightChange);\n            },\n            computed: {\n\n            },\n            methods: {\n                onHeaderHeightChange(newheight){\n                    if(this.$refs.main){\n                        this.$refs.main.style.height = `${newheight}px`;\n                    }\n                }\n            },\n            template: `\n            <div class=\"s-studyline-header-heading\" ref=\"main\"></div>\n            `,\n        });\n\n        Vue.component('s-studyline-header-period', {\n            props: {\n                value: {\n                    type: Object, // dict with layer as index\n                },\n            },\n            mounted() {\n                const self=this;\n                if(self.value.period == 1){\n                    self.resizeListener = new ResizeObserver(() => {\n                        if(self.$refs.main){\n                            const size = self.$refs.main.getBoundingClientRect();\n                            ItemEventBus.$emit('headerHeightChange', size.height);\n                        }\n                    }).observe(self.$refs.main);\n                }\n            },\n            unmounted() {\n                if(this.resizeListener) {\n                    this.resizeListener.disconnect();\n                }\n            },\n            computed: {\n                startdate(){\n                    return format_date(this.value.startdate);\n                },\n                enddate(){\n                    return format_date(this.value.enddate);\n                },\n                current(){\n                    if( this.value && this.value.startdate && this.value.enddate){\n                        const now = new Date();\n                        const pstart = new Date(this.value.startdate);\n                        const pend = new Date(this.value.enddate);\n                        return (now >= pstart && now < pend);\n                    }\n                    else {\n                        return false;\n                    }\n                }\n\n            },\n            data() {\n                return {\n                };\n            },\n            template: `\n            <div :class=\"'s-studyline-header-period ' + (current?'current ':' ')\" ref=\"main\"\n                ><p><abbr :id=\"'s-period-'+value.id\" :title=\"value.fullname\">{{ value.shortname }}</abbr>\n                <b-tooltip\n                    :target=\"'s-period-'+value.id\" triggers=\"hover\"\n                    >{{ value.fullname }}<br>\n                    <span class=\"s-studyline-header-period-datespan\">\n                        <span class=\"date\">{{ startdate }}</span> - <span class=\"date\">{{ enddate }}</span>\n                    </span>\n                </b-tooltip>\n                <slot></slot\n                ><p class=\"s-studyline-header-period-datespan small\">\n                    <span class=\"date\">{{ startdate }}</span> - <span class=\"date\">{{ enddate }}</span>\n                </p>\n            </div>\n            `,\n        });\n\n\n    }\n};"],"names":["studyplanTiming","a","now","Date","getTime","timing","startdate","enddate","install","Vue","strings","studyplancard","open","noenddate","idnumber","ItemEventBus","component","props","value","type","Object","Boolean","data","text","computed","this","pages","methods","onOpenClick","e","$emit","template","layerHeights","created","$on","onHeaderHeightChange","newheight","$refs","main","style","height","mounted","self","period","resizeListener","ResizeObserver","size","getBoundingClientRect","observe","unmounted","disconnect","current","pstart","pend"],"mappings":"yPASe,CACXA,yBAAgBC,OACNC,KAAM,IAAIC,MAAOC,UACnBC,OAAS,gBACV,IAAIF,KAAKF,EAAEK,WAAWF,UAAYF,MAE7BG,OADDJ,EAAEM,SAAWL,IAAM,IAAIC,KAAKF,EAAEM,SAASH,UAC7B,OAEA,WAGVC,QAGXG,iBAAQC,SACAC,SAAU,8BAAa,CACvBC,cAAe,CACXC,KAAM,OACNC,UAAW,YACXC,SAAU,wBAIZC,aAAe,IAAIN,IAEzBA,IAAIO,UAAU,mBAAoB,CAC9BC,MAAO,CACHC,MAAO,CACHC,KAAMC,QAEVR,KAAM,CACFO,KAAME,UAGdC,sBACW,CACHC,KAAMb,QAAQC,gBAGtBa,SAAU,CACNnB,sBACUH,KAAM,IAAIC,MAAOC,UACjBE,UAAY,IAAIH,KAAKsB,KAAKP,MAAMQ,MAAM,GAAGpB,WAAWF,UACpDG,QAAU,IAAIJ,KAAKsB,KAAKP,MAAMQ,MAAM,GAAGnB,SAASH,UAClDC,OAAS,gBACVC,UAAYJ,MAEPG,OADDoB,KAAKP,MAAMQ,MAAM,GAAGnB,SAAWL,IAAMK,QAC3B,OAEA,WAGVF,QAEXC,4BACW,2BAAYmB,KAAKP,MAAMQ,MAAM,GAAGpB,YAE3CC,0BACOkB,KAAKP,MAAMQ,MAAM,GAAGnB,SACZ,2BAAYkB,KAAKP,MAAMQ,MAAM,GAAGnB,SAGhCkB,KAAKF,KAAKV,YAI7Bc,QAAS,CACLC,qBAAYC,QACHC,MAAM,OAAOD,KAG1BE,mtCA8BJtB,IAAIO,UAAU,6BAA8B,CACxCC,MAAO,GAGPK,sBACW,CACHU,aAAc,KAGtBC,mBAGIlB,aAAamB,IAAI,qBAAsBT,KAAKU,uBAEhDX,SAAU,GAGVG,QAAS,CACLQ,8BAAqBC,WACdX,KAAKY,MAAMC,YACLD,MAAMC,KAAKC,MAAMC,iBAAYJ,mBAI9CL,mGAKJtB,IAAIO,UAAU,4BAA6B,CACvCC,MAAO,CACHC,MAAO,CACHC,KAAMC,SAGdqB,uBACUC,KAAKjB,KACa,GAArBiB,KAAKxB,MAAMyB,SACVD,KAAKE,eAAiB,IAAIC,gBAAe,cAClCH,KAAKL,MAAMC,KAAK,KACTQ,KAAOJ,KAAKL,MAAMC,KAAKS,wBAC7BhC,aAAae,MAAM,qBAAsBgB,KAAKN,YAEnDQ,QAAQN,KAAKL,MAAMC,QAG9BW,qBACOxB,KAAKmB,qBACCA,eAAeM,cAG5B1B,SAAU,CACNlB,4BACW,2BAAYmB,KAAKP,MAAMZ,YAElCC,0BACW,2BAAYkB,KAAKP,MAAMX,UAElC4C,sBACQ1B,KAAKP,OAASO,KAAKP,MAAMZ,WAAamB,KAAKP,MAAMX,QAAQ,KACnDL,IAAM,IAAIC,KACViD,OAAS,IAAIjD,KAAKsB,KAAKP,MAAMZ,WAC7B+C,KAAO,IAAIlD,KAAKsB,KAAKP,MAAMX,gBACzBL,KAAOkD,QAAUlD,IAAMmD,YAGxB,IAKnB/B,sBACW,IAGXS"}
\ No newline at end of file
+{"version":3,"file":"treestudyplan-components.min.js","sources":["../src/treestudyplan-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {load_strings} from './util/string-helper';\nimport {format_date} from './util/date-helper';\n\nexport default {\n    studyplanTiming(a) {\n        const now = new Date().getTime();\n        let timing = 'future';\n        if(new Date(a.startdate).getTime() < now){\n            if(a.enddate && now > new Date(a.enddate).getTime()) {\n                timing = 'past';\n            } else {\n                timing = 'present';\n            }\n        }\n        return timing;\n    },\n\n    install(Vue/*,options*/){\n        let strings = load_strings({\n            studyplancard: {\n                open: \"open\",\n                noenddate: \"noenddate\",\n                idnumber: \"studyplan_idnumber\",\n                description: \"studyplan_description\"\n            }\n        });\n        // Create new eventbus for interaction between item components\n        const ItemEventBus = new Vue();\n\n        Vue.component('s-studyplan-card', {\n            props: {\n                value: {\n                    type: Object,\n                },\n                open: {\n                    type: Boolean\n                }\n            },\n            data() {\n                return {\n                    text: strings.studyplancard\n                };\n            },\n            computed: {\n                timing(){\n                    const now = new Date().getTime();\n                    const startdate = new Date(this.value.pages[0].startdate).getTime();\n                    const enddate = new Date(this.value.pages[0].enddate).getTime();\n                    let timing = 'future';\n                    if(startdate < now){\n                        if(this.value.pages[0].enddate && now > enddate) {\n                            timing = 'past';\n                        } else {\n                            timing = 'present';\n                        }\n                    }\n                    return timing;\n                },\n                startdate(){\n                    return format_date(this.value.pages[0].startdate);\n                },\n                enddate(){\n                    if(this.value.pages[0].enddate){\n                        return format_date(this.value.pages[0].enddate);\n                    }\n                    else {\n                        return this.text.noenddate;\n                    }\n                }\n            },\n            methods: {\n                onOpenClick(e) {\n                    this.$emit('open',e);\n                }\n            },\n            template: `\n            <b-card\n                :class=\"'s-studyplan-card timing-' + timing\"\n            >\n                <template #header></template>\n                <b-card-title>\n                    <a v-if='open' href='#' @click.prevent='onOpenClick($event)'>{{value.name}}</a>\n                    <template v-else>{{value.name}}</template>\n                    <slot name='title'></slot>\n                </b-card-title>\n                <div class='s-studyplan-card-icon'><img :src='value.icon' style=\"width: 64px; height: 64px;\"></div>\n                <div class='s-studyplan-card-idnumber' v-if='value.idnumber'><i>{{ text.idnumber}}:</i> {{ value.idnumber }}</div>\n                \n                <slot></slot>\n                <template #footer>\n                    <span :class=\"'t-timing-'+timing\" v-html=\"startdate + ' - '+ enddate\"></span>\n                    <span class=\"s-studyplan-card-buttons\">\n                    <slot name='footer'></slot>\n                    <template v-if='value.description'>\n                        <b-button variant=\"primary\" v-b-modal=\"'modal-description-'+value.id\"\n                        ><i class='fa fa-info-circle'></i> {{ text.description }}</b-button>\n                        <b-modal\n                            :title=\"value.name\"\n                            scrollable\n                            centered\n                            ok-only\n                            size=\"xl\"\n                            :id=\"'modal-description-'+value.id\"\n                            ><span v-html=\"value.description\"></span>\n                        </b-modal>\n                    </template>\n                    <b-button style=\"float:right;\" v-if='open' variant='primary'\n                        @click.prevent='onOpenClick($event)'>{{ text.open }}</b-button>\n                    </span>\n                </template>\n            </b-card>\n            `,\n        });\n\n        /*\n        * S-STUDYLINE-HEADER-HEADING\n        * The only reasing this is not a simple empty div, is the fact that the header height\n        * needs to match that of the period headers\n        */\n        Vue.component('s-studyline-header-heading', {\n            props: {\n\n            },\n            data() {\n                return {\n                    layerHeights: {}\n                };\n            },\n            created() {\n                // Listener for the signal that a new connection was made and needs to be drawn\n                // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines\n                ItemEventBus.$on('headerHeightChange', this.onHeaderHeightChange);\n            },\n            computed: {\n\n            },\n            methods: {\n                onHeaderHeightChange(newheight){\n                    if(this.$refs.main){\n                        this.$refs.main.style.height = `${newheight}px`;\n                    }\n                }\n            },\n            template: `\n            <div class=\"s-studyline-header-heading\" ref=\"main\"></div>\n            `,\n        });\n\n        Vue.component('s-studyline-header-period', {\n            props: {\n                value: {\n                    type: Object, // dict with layer as index\n                },\n            },\n            mounted() {\n                const self=this;\n                if(self.value.period == 1){\n                    self.resizeListener = new ResizeObserver(() => {\n                        if(self.$refs.main){\n                            const size = self.$refs.main.getBoundingClientRect();\n                            ItemEventBus.$emit('headerHeightChange', size.height);\n                        }\n                    }).observe(self.$refs.main);\n                }\n            },\n            unmounted() {\n                if(this.resizeListener) {\n                    this.resizeListener.disconnect();\n                }\n            },\n            computed: {\n                startdate(){\n                    return format_date(this.value.startdate);\n                },\n                enddate(){\n                    return format_date(this.value.enddate);\n                },\n                current(){\n                    if( this.value && this.value.startdate && this.value.enddate){\n                        const now = new Date();\n                        const pstart = new Date(this.value.startdate);\n                        const pend = new Date(this.value.enddate);\n                        return (now >= pstart && now < pend);\n                    }\n                    else {\n                        return false;\n                    }\n                }\n\n            },\n            data() {\n                return {\n                };\n            },\n            template: `\n            <div :class=\"'s-studyline-header-period ' + (current?'current ':' ')\" ref=\"main\"\n                ><p><abbr :id=\"'s-period-'+value.id\" :title=\"value.fullname\">{{ value.shortname }}</abbr>\n                <b-tooltip\n                    :target=\"'s-period-'+value.id\" triggers=\"hover\"\n                    >{{ value.fullname }}<br>\n                    <span class=\"s-studyline-header-period-datespan\">\n                        <span class=\"date\">{{ startdate }}</span> - <span class=\"date\">{{ enddate }}</span>\n                    </span>\n                </b-tooltip>\n                <slot></slot\n                ><p class=\"s-studyline-header-period-datespan small\">\n                    <span class=\"date\">{{ startdate }}</span> - <span class=\"date\">{{ enddate }}</span>\n                </p>\n            </div>\n            `,\n        });\n\n\n    }\n};"],"names":["studyplanTiming","a","now","Date","getTime","timing","startdate","enddate","install","Vue","strings","studyplancard","open","noenddate","idnumber","description","ItemEventBus","component","props","value","type","Object","Boolean","data","text","computed","this","pages","methods","onOpenClick","e","$emit","template","layerHeights","created","$on","onHeaderHeightChange","newheight","$refs","main","style","height","mounted","self","period","resizeListener","ResizeObserver","size","getBoundingClientRect","observe","unmounted","disconnect","current","pstart","pend"],"mappings":"yPASe,CACXA,yBAAgBC,OACNC,KAAM,IAAIC,MAAOC,UACnBC,OAAS,gBACV,IAAIF,KAAKF,EAAEK,WAAWF,UAAYF,MAE7BG,OADDJ,EAAEM,SAAWL,IAAM,IAAIC,KAAKF,EAAEM,SAASH,UAC7B,OAEA,WAGVC,QAGXG,iBAAQC,SACAC,SAAU,8BAAa,CACvBC,cAAe,CACXC,KAAM,OACNC,UAAW,YACXC,SAAU,qBACVC,YAAa,2BAIfC,aAAe,IAAIP,IAEzBA,IAAIQ,UAAU,mBAAoB,CAC9BC,MAAO,CACHC,MAAO,CACHC,KAAMC,QAEVT,KAAM,CACFQ,KAAME,UAGdC,sBACW,CACHC,KAAMd,QAAQC,gBAGtBc,SAAU,CACNpB,sBACUH,KAAM,IAAIC,MAAOC,UACjBE,UAAY,IAAIH,KAAKuB,KAAKP,MAAMQ,MAAM,GAAGrB,WAAWF,UACpDG,QAAU,IAAIJ,KAAKuB,KAAKP,MAAMQ,MAAM,GAAGpB,SAASH,UAClDC,OAAS,gBACVC,UAAYJ,MAEPG,OADDqB,KAAKP,MAAMQ,MAAM,GAAGpB,SAAWL,IAAMK,QAC3B,OAEA,WAGVF,QAEXC,4BACW,2BAAYoB,KAAKP,MAAMQ,MAAM,GAAGrB,YAE3CC,0BACOmB,KAAKP,MAAMQ,MAAM,GAAGpB,SACZ,2BAAYmB,KAAKP,MAAMQ,MAAM,GAAGpB,SAGhCmB,KAAKF,KAAKX,YAI7Be,QAAS,CACLC,qBAAYC,QACHC,MAAM,OAAOD,KAG1BE,s6DA4CJvB,IAAIQ,UAAU,6BAA8B,CACxCC,MAAO,GAGPK,sBACW,CACHU,aAAc,KAGtBC,mBAGIlB,aAAamB,IAAI,qBAAsBT,KAAKU,uBAEhDX,SAAU,GAGVG,QAAS,CACLQ,8BAAqBC,WACdX,KAAKY,MAAMC,YACLD,MAAMC,KAAKC,MAAMC,iBAAYJ,mBAI9CL,mGAKJvB,IAAIQ,UAAU,4BAA6B,CACvCC,MAAO,CACHC,MAAO,CACHC,KAAMC,SAGdqB,uBACUC,KAAKjB,KACa,GAArBiB,KAAKxB,MAAMyB,SACVD,KAAKE,eAAiB,IAAIC,gBAAe,cAClCH,KAAKL,MAAMC,KAAK,KACTQ,KAAOJ,KAAKL,MAAMC,KAAKS,wBAC7BhC,aAAae,MAAM,qBAAsBgB,KAAKN,YAEnDQ,QAAQN,KAAKL,MAAMC,QAG9BW,qBACOxB,KAAKmB,qBACCA,eAAeM,cAG5B1B,SAAU,CACNnB,4BACW,2BAAYoB,KAAKP,MAAMb,YAElCC,0BACW,2BAAYmB,KAAKP,MAAMZ,UAElC6C,sBACQ1B,KAAKP,OAASO,KAAKP,MAAMb,WAAaoB,KAAKP,MAAMZ,QAAQ,KACnDL,IAAM,IAAIC,KACVkD,OAAS,IAAIlD,KAAKuB,KAAKP,MAAMb,WAC7BgD,KAAO,IAAInD,KAAKuB,KAAKP,MAAMZ,gBACzBL,KAAOmD,QAAUnD,IAAMoD,YAGxB,IAKnB/B,sBACW,IAGXS"}
\ No newline at end of file
diff --git a/amd/build/util/formfields.min.js b/amd/build/util/formfields.min.js
new file mode 100644
index 0000000..195405e
--- /dev/null
+++ b/amd/build/util/formfields.min.js
@@ -0,0 +1,3 @@
+define("local_treestudyplan/util/formfields",["exports","./debugger"],(function(_exports,_debugger){var obj;Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.text_integer=function(id){var element=document.getElementById(id);debug.warn("Initializing form element text_integer on ",id,element)};var debug=new(_debugger=(obj=_debugger)&&obj.__esModule?obj:{default:obj}).default("formfields")}));
+
+//# sourceMappingURL=formfields.min.js.map
\ No newline at end of file
diff --git a/amd/build/util/formfields.min.js.map b/amd/build/util/formfields.min.js.map
new file mode 100644
index 0000000..da7180a
--- /dev/null
+++ b/amd/build/util/formfields.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"formfields.min.js","sources":["../../src/util/formfields.js"],"sourcesContent":["import Debugger from './debugger';\nconst debug = new Debugger(\"formfields\");\n/**\n * convert a text field into an integer only text field\n * @param {Date|string} id The Id of the form field\n */\nexport function text_integer(id){\n    const element = document.getElementById(id);\n    debug.warn(\"Initializing form element text_integer on \",id,element);\n}"],"names":["id","element","document","getElementById","debug","warn"],"mappings":"mMAM6BA,QACnBC,QAAUC,SAASC,eAAeH,IACxCI,MAAMC,KAAK,6CAA6CL,GAAGC,cAPzDG,MAAQ,yEAAa"}
\ No newline at end of file
diff --git a/amd/build/util/int-textfield.min.js b/amd/build/util/int-textfield.min.js
new file mode 100644
index 0000000..1a5fee5
--- /dev/null
+++ b/amd/build/util/int-textfield.min.js
@@ -0,0 +1,3 @@
+
+
+//# sourceMappingURL=int-textfield.min.js.map
\ No newline at end of file
diff --git a/amd/build/util/int-textfield.min.js.map b/amd/build/util/int-textfield.min.js.map
new file mode 100644
index 0000000..7bbeec7
--- /dev/null
+++ b/amd/build/util/int-textfield.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"int-textfield.min.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
\ No newline at end of file
diff --git a/amd/build/util/mform-helper.min.js b/amd/build/util/mform-helper.min.js
index 3e49630..3e82e55 100644
--- a/amd/build/util/mform-helper.min.js
+++ b/amd/build/util/mform-helper.min.js
@@ -1,3 +1,3 @@
-define("local_treestudyplan/util/mform-helper",["exports","core/ajax","core/fragment","core/templates","core/notification","./string-helper","./debugger"],(function(_exports,_ajax,_fragment,_templates,_notification,_stringHelper,_debugger){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);var _default={install:function(Vue){var debug=new _debugger.default("treestudyplan-mform-helper"),strings=(0,_stringHelper.load_strings)({editmod:{save$core:"save$core",cancel$core:"cancel$core"}});Vue.component("mform",{props:{name:{type:String},params:{type:Object},title:{type:String,default:""}},data:function(){return{content:"",loading:!0,uuid:void 0!==crypto.randomUUID?crypto.randomUUID():"10000000-1000-4000-8000-100000000000".replace(/[018]/g,(function(c){return(c^crypto.getRandomValues(new Uint8Array(1))[0]&15>>c/4).toString(16)})),text:strings}},computed:{},methods:{openForm:function(){this.$refs.editormodal.show()},onShown:function(){var self=this;debug.info('Loading form "'.concat(self.name,'" with params'),self.params),self.loading=!1,(0,_ajax.call)([{methodname:"local_treestudyplan_get_mform",args:{formname:self.name,params:JSON.stringify(self.params)}}])[0].then((function(data){var html=data.html;self.loading=!1;var js=(0,_fragment.processCollectedJavascript)(data.javascript);debug.info("Replacing content / el",self.$refs.content),debug.info("Replacing content / html",html),debug.info("Replacing content / js",js);var r=(0,_templates.replaceNodeContents)(self.$refs.content,html,js);debug.info("R:",r)})).catch(_notification.default.exception)},onSave:function(){var self=this,form=this.$refs.content.getElementsByTagName("form")[0];form.dispatchEvent(new Event("save-form-state"));var formdata=new FormData(form),data=new URLSearchParams(formdata).toString();(0,_ajax.call)([{methodname:"local_treestudyplan_submit_mform",args:{formname:self.name,params:JSON.stringify(self.params),formdata:data}}])[0].then((function(){self.$emit("saved",formdata)})).catch(_notification.default.exception)}},template:'\n            <span class=\'mform-container\'><a href=\'#\' @click.prevent="openForm"><slot><i class="fa fa-cog"></i></slot></a>\n                <b-modal\n                    ref="editormodal"\n                    scrollable\n                    centered\n                    size="xl"\n                    id="\'modal-\'+uuid"\n                    @shown="onShown"\n                    @ok="onSave"\n                    :title="title"\n                    :ok-title="text.save$core"\n                    ><div :class="\'s-mform-content\'" ref="content"\n                        ><div class="d-flex justify-content-center mb-3"\n                            ><b-spinner variant="primary"></b-spinner\n                        ></div\n                    ></div\n                ></b-modal>\n            </span>\n            '})}};return _exports.default=_default,_exports.default}));
+define("local_treestudyplan/util/mform-helper",["exports","core/ajax","core/fragment","core/templates","core/notification","./string-helper","./debugger"],(function(_exports,_ajax,_fragment,_templates,_notification,_stringHelper,_debugger){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);var _default={install:function(Vue){var debug=new _debugger.default("treestudyplan-mform-helper"),strings=(0,_stringHelper.load_strings)({editmod:{save$core:"save$core",cancel$core:"cancel$core"}});Vue.component("mform",{props:{name:{type:String},params:{type:Object},title:{type:String,default:""},variant:{type:String,default:"primary"},type:{type:String,default:"link"}},data:function(){return{content:"",loading:!0,uuid:void 0!==crypto.randomUUID?crypto.randomUUID():"10000000-1000-4000-8000-100000000000".replace(/[018]/g,(function(c){return(c^crypto.getRandomValues(new Uint8Array(1))[0]&15>>c/4).toString(16)})),text:strings}},computed:{},methods:{openForm:function(){this.$refs.editormodal.show()},onShown:function(){var self=this;debug.info('Loading form "'.concat(self.name,'" with params'),self.params),self.loading=!1,(0,_ajax.call)([{methodname:"local_treestudyplan_get_mform",args:{formname:self.name,params:JSON.stringify(self.params)}}])[0].then((function(data){var html=data.html;self.loading=!1;var js=(0,_fragment.processCollectedJavascript)(data.javascript);(0,_templates.replaceNodeContents)(self.$refs.content,html,js)})).catch(_notification.default.exception)},onSave:function(){var self=this,form=this.$refs.content.getElementsByTagName("form")[0];form.dispatchEvent(new Event("save-form-state"));var formdata=new FormData(form),data=new URLSearchParams(formdata).toString();(0,_ajax.call)([{methodname:"local_treestudyplan_submit_mform",args:{formname:self.name,params:JSON.stringify(self.params),formdata:data}}])[0].then((function(response){var updatedplan=JSON.parse(response.data);self.$emit("saved",updatedplan,formdata)})).catch(_notification.default.exception)}},template:'\n            <span class=\'mform-container\'>\n                <b-button :variant="variant" v-if=\'type == "button"\' @click.prevent=\'openForm\'\n                    ><slot><i class=\'fa fa-gear\'></i></slot></b-button>\n                <a variant="variant" v-else href=\'#\' @click.prevent=\'openForm\'\n                    ><slot><i class=\'fa fa-gear\'></i></slot></a>\n                <b-modal\n                    ref="editormodal"\n                    scrollable\n                    centered\n                    size="xl"\n                    id="\'modal-\'+uuid"\n                    @shown="onShown"\n                    @ok="onSave"\n                    :title="title"\n                    :ok-title="text.save$core"\n                    ><div :class="\'s-mform-content\'" ref="content"\n                        ><div class="d-flex justify-content-center mb-3"\n                            ><b-spinner variant="primary"></b-spinner\n                        ></div\n                    ></div\n                ></b-modal>\n            </span>\n            '})}};return _exports.default=_default,_exports.default}));
 
 //# sourceMappingURL=mform-helper.min.js.map
\ No newline at end of file
diff --git a/amd/build/util/mform-helper.min.js.map b/amd/build/util/mform-helper.min.js.map
index d42367e..e825a19 100644
--- a/amd/build/util/mform-helper.min.js.map
+++ b/amd/build/util/mform-helper.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"mform-helper.min.js","sources":["../../src/util/mform-helper.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint no-bitwise: \"off\"*/\n/*eslint-disable no-trailing-spaces*/\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {call} from 'core/ajax';\nimport {processCollectedJavascript} from 'core/fragment';\nimport {replaceNodeContents} from 'core/templates';\nimport notification from 'core/notification';\nimport {load_strings} from './string-helper';\nimport Debugger from './debugger';\n//import {markFormSubmitted} from 'core_form/changechecker'; // Moodle 4.00+ only\n//import {notifyFormSubmittedByJavascript} from 'core_form/events'; // Moodle 4.00+ only\n\n/**\n * Create a random UUID in both secure and insecure contexts\n * @returns UUID\n */\nfunction create_uuid() {\n    if (crypto.randomUUID !== undefined ) {\n        return crypto.randomUUID();\n    } else {\n        return \"10000000-1000-4000-8000-100000000000\".replace(/[018]/g, c =>\n            (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)\n        );\n    }\n}\n\nexport default {\n    install(Vue/*,options*/){\n        let debug = new Debugger(\"treestudyplan-mform-helper\");\n        let strings = load_strings({\n            editmod: {\n                save$core: \"save$core\",\n                cancel$core: \"cancel$core\",\n            }\n        });\n\n        Vue.component('mform', {\n            props: {\n                name: {\n                    type: String,\n                },\n                params: {\n                    type: Object,\n                },\n                title: {\n                    type: String,\n                    default: \"\",\n                },\n            },\n            data() {\n                return {\n                    content: \"\",\n                    loading: true,\n                    uuid: create_uuid(),\n                    text: strings,\n                };\n            },\n            computed: {\n            },\n            methods: {\n                openForm(){\n                    const self = this;\n                    self.$refs[\"editormodal\"].show();\n                },\n                onShown(){\n                    const self = this;\n                    debug.info(`Loading form \"${self.name}\" with params`,self.params);\n                    self.loading = false;\n                    call([{\n                        methodname: 'local_treestudyplan_get_mform',\n                        args: {formname: self.name, params: JSON.stringify(self.params)}\n                    }])[0].then((data)=>{\n                        const html = data.html;\n                        self.loading = false;\n                        // Process the collected javascript;\n                        const js = processCollectedJavascript(data.javascript);\n                        debug.info(\"Replacing content / el\",self.$refs[\"content\"]);\n                        debug.info(\"Replacing content / html\", html);\n                        debug.info(\"Replacing content / js\",js);\n\n                        const r = replaceNodeContents(self.$refs[\"content\"], html, js);\n                        debug.info(\"R:\",r);\n                        \n                    }).catch(notification.exception);\n\n                },\n                onSave(){\n                    const self = this;\n                    let form = this.$refs[\"content\"].getElementsByTagName(\"form\")[0];\n\n                    // markFormSubmitted(form); // Moodle 4.00+ only\n                    // We call this, so other modules can update the form with the latest state.\n                    form.dispatchEvent(new Event(\"save-form-state\"));\n                    // Tell all form fields we are about to submit the form.\n                    // notifyFormSubmittedByJavascript(form); // Moodle 4.00+ only\n\n                    const formdata = new FormData(form);\n                    const data = new URLSearchParams(formdata).toString();\n\n                    call([{\n                        methodname: 'local_treestudyplan_submit_mform',\n                        args: {formname: self.name, params: JSON.stringify(self.params), formdata: data}\n                    }])[0].then(()=>{\n                        self.$emit(\"saved\",formdata);\n                    }).catch(notification.exception);\n\n                }\n            },\n            template: `\n            <span class='mform-container'><a href='#' @click.prevent=\"openForm\"><slot><i class=\"fa fa-cog\"></i></slot></a>\n                <b-modal\n                    ref=\"editormodal\"\n                    scrollable\n                    centered\n                    size=\"xl\"\n                    id=\"'modal-'+uuid\"\n                    @shown=\"onShown\"\n                    @ok=\"onSave\"\n                    :title=\"title\"\n                    :ok-title=\"text.save$core\"\n                    ><div :class=\"'s-mform-content'\" ref=\"content\"\n                        ><div class=\"d-flex justify-content-center mb-3\"\n                            ><b-spinner variant=\"primary\"></b-spinner\n                        ></div\n                    ></div\n                ></b-modal>\n            </span>\n            `,\n        });\n    }\n};\n\n"],"names":["install","Vue","debug","Debugger","strings","editmod","save$core","cancel$core","component","props","name","type","String","params","Object","title","default","data","content","loading","uuid","undefined","crypto","randomUUID","replace","c","getRandomValues","Uint8Array","toString","text","computed","methods","openForm","this","$refs","show","onShown","self","info","methodname","args","formname","JSON","stringify","then","html","js","javascript","r","catch","notification","exception","onSave","form","getElementsByTagName","dispatchEvent","Event","formdata","FormData","URLSearchParams","$emit","template"],"mappings":"+fA8Be,CACXA,iBAAQC,SACAC,MAAQ,IAAIC,kBAAS,8BACrBC,SAAU,8BAAa,CACvBC,QAAS,CACLC,UAAW,YACXC,YAAa,iBAIrBN,IAAIO,UAAU,QAAS,CACnBC,MAAO,CACHC,KAAM,CACFC,KAAMC,QAEVC,OAAQ,CACJF,KAAMG,QAEVC,MAAO,CACHJ,KAAMC,OACNI,QAAS,KAGjBC,sBACW,CACHC,QAAS,GACTC,SAAS,EACTC,UApCUC,IAAtBC,OAAOC,WACAD,OAAOC,aAEP,uCAAuCC,QAAQ,UAAU,SAAAC,UAC3DA,EAAIH,OAAOI,gBAAgB,IAAIC,WAAW,IAAI,GAAK,IAAMF,EAAI,GAAGG,SAAS,OAiClEC,KAAMzB,UAGd0B,SAAU,GAEVC,QAAS,CACLC,oBACiBC,KACRC,MAAL,YAA0BC,QAE9BC,uBACUC,KAAOJ,KACb/B,MAAMoC,6BAAsBD,KAAK3B,sBAAoB2B,KAAKxB,QAC1DwB,KAAKlB,SAAU,iBACV,CAAC,CACFoB,WAAY,gCACZC,KAAM,CAACC,SAAUJ,KAAK3B,KAAMG,OAAQ6B,KAAKC,UAAUN,KAAKxB,YACxD,GAAG+B,MAAK,SAAC3B,UACH4B,KAAO5B,KAAK4B,KAClBR,KAAKlB,SAAU,MAET2B,IAAK,wCAA2B7B,KAAK8B,YAC3C7C,MAAMoC,KAAK,yBAAyBD,KAAKH,MAAL,SACpChC,MAAMoC,KAAK,2BAA4BO,MACvC3C,MAAMoC,KAAK,yBAAyBQ,QAE9BE,GAAI,kCAAoBX,KAAKH,MAAL,QAAuBW,KAAMC,IAC3D5C,MAAMoC,KAAK,KAAKU,MAEjBC,MAAMC,sBAAaC,YAG1BC,sBACUf,KAAOJ,KACToB,KAAOpB,KAAKC,MAAL,QAAsBoB,qBAAqB,QAAQ,GAI9DD,KAAKE,cAAc,IAAIC,MAAM,wBAIvBC,SAAW,IAAIC,SAASL,MACxBpC,KAAO,IAAI0C,gBAAgBF,UAAU7B,0BAEtC,CAAC,CACFW,WAAY,mCACZC,KAAM,CAACC,SAAUJ,KAAK3B,KAAMG,OAAQ6B,KAAKC,UAAUN,KAAKxB,QAAS4C,SAAUxC,SAC3E,GAAG2B,MAAK,WACRP,KAAKuB,MAAM,QAAQH,aACpBR,MAAMC,sBAAaC,aAI9BU"}
\ No newline at end of file
+{"version":3,"file":"mform-helper.min.js","sources":["../../src/util/mform-helper.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint no-bitwise: \"off\"*/\n/*eslint-disable no-trailing-spaces*/\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {call} from 'core/ajax';\nimport {processCollectedJavascript} from 'core/fragment';\nimport {replaceNodeContents} from 'core/templates';\nimport notification from 'core/notification';\nimport {load_strings} from './string-helper';\nimport Debugger from './debugger';\n//import {markFormSubmitted} from 'core_form/changechecker'; // Moodle 4.00+ only\n//import {notifyFormSubmittedByJavascript} from 'core_form/events'; // Moodle 4.00+ only\n\n/**\n * Create a random UUID in both secure and insecure contexts\n * @returns UUID\n */\nfunction create_uuid() {\n    if (crypto.randomUUID !== undefined ) {\n        return crypto.randomUUID();\n    } else {\n        return \"10000000-1000-4000-8000-100000000000\".replace(/[018]/g, c =>\n            (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)\n        );\n    }\n}\n\nexport default {\n    install(Vue/*,options*/){\n        let debug = new Debugger(\"treestudyplan-mform-helper\");\n        let strings = load_strings({\n            editmod: {\n                save$core: \"save$core\",\n                cancel$core: \"cancel$core\",\n            }\n        });\n\n        Vue.component('mform', {\n            props: {\n                name: {\n                    type: String,\n                },\n                params: {\n                    type: Object,\n                },\n                title: {\n                    type: String,\n                    default: \"\",\n                },\n                variant: {\n                    type: String,\n                    default: \"primary\",\n                },\n                type: {\n                    type: String,\n                    default: \"link\",\n                }\n            },\n            data() {\n                return {\n                    content: \"\",\n                    loading: true,\n                    uuid: create_uuid(),\n                    text: strings,\n                };\n            },\n            computed: {\n            },\n            methods: {\n                openForm(){\n                    const self = this;\n                    self.$refs[\"editormodal\"].show();\n                },\n                onShown(){\n                    const self = this;\n                    debug.info(`Loading form \"${self.name}\" with params`,self.params);\n                    self.loading = false;\n                    call([{\n                        methodname: 'local_treestudyplan_get_mform',\n                        args: {formname: self.name, params: JSON.stringify(self.params)}\n                    }])[0].then((data)=>{\n                        const html = data.html;\n                        self.loading = false;\n                        // Process the collected javascript;\n                        const js = processCollectedJavascript(data.javascript);\n                        replaceNodeContents(self.$refs[\"content\"], html, js);\n                        \n                    }).catch(notification.exception);\n\n                },\n                onSave(){\n                    const self = this;\n                    let form = this.$refs[\"content\"].getElementsByTagName(\"form\")[0];\n\n                    // markFormSubmitted(form); // Moodle 4.00+ only\n                    // We call this, so other modules can update the form with the latest state.\n                    form.dispatchEvent(new Event(\"save-form-state\"));\n                    // Tell all form fields we are about to submit the form.\n                    // notifyFormSubmittedByJavascript(form); // Moodle 4.00+ only\n\n                    const formdata = new FormData(form);\n                    const data = new URLSearchParams(formdata).toString();\n\n                    call([{\n                        methodname: 'local_treestudyplan_submit_mform',\n                        args: {formname: self.name, params: JSON.stringify(self.params), formdata: data}\n                    }])[0].then((response)=>{\n                        const updatedplan = JSON.parse(response.data);\n                        self.$emit(\"saved\",updatedplan,formdata);\n                    }).catch(notification.exception);\n                }\n            },\n            template: `\n            <span class='mform-container'>\n                <b-button :variant=\"variant\" v-if='type == \"button\"' @click.prevent='openForm'\n                    ><slot><i class='fa fa-gear'></i></slot></b-button>\n                <a variant=\"variant\" v-else href='#' @click.prevent='openForm'\n                    ><slot><i class='fa fa-gear'></i></slot></a>\n                <b-modal\n                    ref=\"editormodal\"\n                    scrollable\n                    centered\n                    size=\"xl\"\n                    id=\"'modal-'+uuid\"\n                    @shown=\"onShown\"\n                    @ok=\"onSave\"\n                    :title=\"title\"\n                    :ok-title=\"text.save$core\"\n                    ><div :class=\"'s-mform-content'\" ref=\"content\"\n                        ><div class=\"d-flex justify-content-center mb-3\"\n                            ><b-spinner variant=\"primary\"></b-spinner\n                        ></div\n                    ></div\n                ></b-modal>\n            </span>\n            `,\n        });\n    }\n};\n\n"],"names":["install","Vue","debug","Debugger","strings","editmod","save$core","cancel$core","component","props","name","type","String","params","Object","title","default","variant","data","content","loading","uuid","undefined","crypto","randomUUID","replace","c","getRandomValues","Uint8Array","toString","text","computed","methods","openForm","this","$refs","show","onShown","self","info","methodname","args","formname","JSON","stringify","then","html","js","javascript","catch","notification","exception","onSave","form","getElementsByTagName","dispatchEvent","Event","formdata","FormData","URLSearchParams","response","updatedplan","parse","$emit","template"],"mappings":"+fA8Be,CACXA,iBAAQC,SACAC,MAAQ,IAAIC,kBAAS,8BACrBC,SAAU,8BAAa,CACvBC,QAAS,CACLC,UAAW,YACXC,YAAa,iBAIrBN,IAAIO,UAAU,QAAS,CACnBC,MAAO,CACHC,KAAM,CACFC,KAAMC,QAEVC,OAAQ,CACJF,KAAMG,QAEVC,MAAO,CACHJ,KAAMC,OACNI,QAAS,IAEbC,QAAS,CACLN,KAAMC,OACNI,QAAS,WAEbL,KAAM,CACFA,KAAMC,OACNI,QAAS,SAGjBE,sBACW,CACHC,QAAS,GACTC,SAAS,EACTC,UA5CUC,IAAtBC,OAAOC,WACAD,OAAOC,aAEP,uCAAuCC,QAAQ,UAAU,SAAAC,UAC3DA,EAAIH,OAAOI,gBAAgB,IAAIC,WAAW,IAAI,GAAK,IAAMF,EAAI,GAAGG,SAAS,OAyClEC,KAAM1B,UAGd2B,SAAU,GAEVC,QAAS,CACLC,oBACiBC,KACRC,MAAL,YAA0BC,QAE9BC,uBACUC,KAAOJ,KACbhC,MAAMqC,6BAAsBD,KAAK5B,sBAAoB4B,KAAKzB,QAC1DyB,KAAKlB,SAAU,iBACV,CAAC,CACFoB,WAAY,gCACZC,KAAM,CAACC,SAAUJ,KAAK5B,KAAMG,OAAQ8B,KAAKC,UAAUN,KAAKzB,YACxD,GAAGgC,MAAK,SAAC3B,UACH4B,KAAO5B,KAAK4B,KAClBR,KAAKlB,SAAU,MAET2B,IAAK,wCAA2B7B,KAAK8B,+CACvBV,KAAKH,MAAL,QAAuBW,KAAMC,OAElDE,MAAMC,sBAAaC,YAG1BC,sBACUd,KAAOJ,KACTmB,KAAOnB,KAAKC,MAAL,QAAsBmB,qBAAqB,QAAQ,GAI9DD,KAAKE,cAAc,IAAIC,MAAM,wBAIvBC,SAAW,IAAIC,SAASL,MACxBnC,KAAO,IAAIyC,gBAAgBF,UAAU5B,0BAEtC,CAAC,CACFW,WAAY,mCACZC,KAAM,CAACC,SAAUJ,KAAK5B,KAAMG,OAAQ8B,KAAKC,UAAUN,KAAKzB,QAAS4C,SAAUvC,SAC3E,GAAG2B,MAAK,SAACe,cACHC,YAAclB,KAAKmB,MAAMF,SAAS1C,MACxCoB,KAAKyB,MAAM,QAAQF,YAAYJ,aAChCR,MAAMC,sBAAaC,aAG9Ba"}
\ No newline at end of file
diff --git a/amd/src/studyplan-editor-components.js b/amd/src/studyplan-editor-components.js
index 67df67b..ecefd7f 100644
--- a/amd/src/studyplan-editor-components.js
+++ b/amd/src/studyplan-editor-components.js
@@ -135,31 +135,7 @@ export default {
             },
             studyplan_edit: {
                 studyplan_edit: 'studyplan_edit',
-                studyplan_name: 'studyplan_name',
-                studyplan_name_ph: 'studyplan_name_ph',
-                studyplan_shortname: 'studyplan_shortname',
-                studyplan_shortname_ph: 'studyplan_shortname_ph',
-                studyplan_description: 'studyplan_description',
-                studyplan_description_ph: 'studyplan_description_ph',
-                studyplan_idnumber: 'studyplan_idnumber',
-                studyplan_idnumber_ph: 'studyplan_idnumber_ph',
-                studyplan_context: 'studyplan_context',
-                studyplan_slots: 'studyplan_slots',
-                studyplan_startdate: 'studyplan_startdate',
-                studyplan_enddate: 'studyplan_enddate',
-                choose_aggregation_style: 'choose_aggregation_style',
-                setting_bistate_thresh_excellent: 'setting_bistate_thresh_excellent',
-                settingdesc_bistate_thresh_excellent: 'settingdesc_bistate_thresh_excellent',
-                setting_bistate_thresh_good: 'setting_bistate_thresh_good',
-                settingdesc_bistate_thresh_good: 'settingdesc_bistate_thresh_good',
-                setting_bistate_thresh_completed: 'setting_bistate_thresh_completed',
-                settingdesc_bistate_thresh_completed: 'settingdesc_bistate_thresh_completed',
-                setting_bistate_support_failed: 'setting_bistate_support_failed',
-                settingdesc_bistate_support_failed: 'settingdesc_bistate_support_failed',
-                setting_bistate_thresh_progress: 'setting_bistate_thresh_progress',
-                settingdesc_bistate_thresh_progress: 'settingdesc_bistate_thresh_progress',
-                setting_bistate_accept_pending_submitted: 'setting_bistate_accept_pending_submitted',
-                settingdesc_bistate_accept_pending_submitted: 'settingdesc_bistate_accept_pending_submitted',
+                studyplan_add: 'studyplan_add',
             },
             period_edit: {
                 edit: 'period_edit',
@@ -491,14 +467,15 @@ export default {
                                 variant="primary"
                                 @click="export_plan('csv')"
                             >{{ text.advanced_export_csv}}</b-button>
-                    </b-tab>
+                        </b-tab>
                         <b-tab :title='text.advanced_purge'>
                             <p>{{text.advanced_purge_expl}}</p>
                             <p><b-button
                                     variant="danger"
                                     @click="purge_studyline"
                                 >{{ text.advanced_purge}}</b-button></p>
-                        </b-tab>                    </b-tabs>
+                        </b-tab>
+                    </b-tabs>
                     </b-card>
                 </b-modal>
             </span>
@@ -531,299 +508,64 @@ export default {
                     type: Number,
                     default: 1
                 },
-                'defaultAggregation': {
-                    type: String,
-                    default: "core",
-                }
             },
             data() {
                 return {
-                    show: false,
-                    config: {
-                        userfields: [
-                            { key: "selected",},
-                            { key: "firstname", "sortable": true,},
-                            { key: "lastname", "sortable": true,},
-                        ],
-                        cohortfields:[
-                            { key: "selected",},
-                            { key: "name", "sortable": true,},
-                            { key: "context", "sortable": true,},
-                        ]
-                    },
-                    editdata: {
-                        name: '',
-                        shortname: '',
-                        description: '',
-                        idnumber: '',
-                        context_id: this.contextid,
-                        periods : 4,
-                        startdate: (new Date()).getFullYear() + '-08-01',
-                        enddate:  ((new Date()).getFullYear()+1) + '-08-01',
-                        aggregation: this.defaultAggregation,
-                        aggregation_config: '',
-                    },
-                    aggregation_parsed: {
-
-                    },
-                    aggregators: [],
-                    categories: [ { context_id: 1, category: { path: "System"}}], // overwritten during load...
                     text: strings.studyplan_edit,
                 };
-            },
-            created() {
-                // retrieve aggregator info
-                const self = this;
-                call([{
-                    methodname: 'local_treestudyplan_list_aggregators',
-                    args: [],
-                }])[0].done(function(response){
-                    self.aggregators = response;
-                    for(const ix  in self.aggregators){
-                        const ag = self.aggregators[ix];
-
-                        try{
-                            if(ag.defaultconfig && ag.defaultconfig.length > 0){
-                                self.aggregation_parsed[ag.id] = JSON.parse(ag.defaultconfig);
-                            }
-                        }
-                        catch(e){
-                            debug.warn(e);
-                        }
-                    }
-                }).fail(notification.exception);
-                call([{
-                    methodname: 'local_treestudyplan_list_accessible_categories',
-                    args: {operation: "edit",}
-                }])[0].done(function(response){
-                    for(const ix in response){
-                        const cat = response[ix];
-                        cat.category.pathname = cat.category.path.join(" / ");
-                    }
-                    self.categories = response;
-                }).fail(notification.exception);
-            },
-            mounted() {
-            },
-            updated() {
-
             },
             computed: {
             },
             methods: {
-                editPlanStart(){
-                    if(this.mode != 'create'){
-                        objCopy(this.editdata,this.value.pages[0],STUDYPLAN_EDITOR_PAGE_FIELDS);
-                        objCopy(this.editdata,this.value,STUDYPLAN_EDITOR_FIELDS);
-
-                    }
-                    // decode the aggregation config data that is stored
-                    if(this.editdata.aggregation_config && this.editdata.aggregation_config.length > 0){
-                        try{
-                            this.aggregation_parsed[this.editdata.aggregation] = JSON.parse(this.editdata.aggregation_config);
-                        }
-                        catch(e){
-                            debug.warn(e);
-                        }
-                    }
-                    this.show = true;
-                },
-                editPlanFinish(){
+                planSaved(updatedplan){
                     const self = this;
-                    let args = { };
-                    let method =  'local_treestudyplan_edit_studyplan';
-                    if(this.mode == 'create'){
-                        method = 'local_treestudyplan_add_studyplan';
-                    } else {
-                        args['id'] = this.value.id;
+                    debug.info("Got new plan data",updatedplan);
+
+                    if(self.mode == 'create'){
+                        // Inform parent of the details of the newly created plan
+                        self.$emit("created",updatedplan);
                     }
+                    else {
+                        // determine if the plan moved context...
+                        const moved_from = self.value.context_id;
+                        const moved_to = updatedplan.context_id;
+                        const moved = (moved_from != moved_to);
 
-                    // store the configuration for this aggregation type if it is relevant
-                    if(this.aggregation_parsed[this.editdata.aggregation]){
-                        this.editdata.aggregation_config = JSON.stringify(this.aggregation_parsed[this.editdata.aggregation]);
-                    }
-                    objCopy(args,this.editdata,STUDYPLAN_EDITOR_FIELDS);
-                    objCopy(args,this.editdata,STUDYPLAN_EDITOR_PAGE_FIELDS);
-
-                    call([{
-                        methodname: method,
-                        args: args
-                    }])[0].done(function(response){
-                        if(self.mode == 'create'){
-                            self.$emit("created", response);
-                            // And reset the edit fields to default
-                            self.editdata = {
-                                name: '',
-                                shortname: '',
-                                description: '',
-                                context_id: 1,
-                                periods : 4,
-                                startdate: (new Date()).getFullYear() + '-08-01',
-                                enddate: ((new Date()).getFullYear()+1) + '-08-01',
-                                aggregation: 'bistate',
-                                aggregation_config: '',
-                            };
-                        }
-                        else {
-                            // determine if the plan moved context...
-                            const moved_from = self.value.context_id;
-                            const moved_to = response.context_id;
-                            const moved = (moved_from != moved_to);
-
-                            if(response.pages[0].periods != self.value.pages[0].periods){
-                                // reload the entire model
-                                call([{
-                                    methodname: 'local_treestudyplan_get_studyplan_map',
-                                    args: { id: self.value.id}
-                                }])[0].done(function(response){
-                                    self.value = ProcessStudyplan(response,true);
-                                    debug.info('studyplan processed');
-                                    self.$emit('input',self.value);
-                                }).fail(function(error){
-                                    notification.exception(error);
-                                });
-                            } else {
-                                objCopy(self.value,response,STUDYPLAN_EDITOR_FIELDS);
+                        if(updatedplan.pages[0].periods != self.value.pages[0].periods){
+                            // If the pages changed, just reload the entire model for the plan
+                            call([{
+                                methodname: 'local_treestudyplan_get_studyplan_map',
+                                args: { id: self.value.id}
+                            }])[0].done(function(response){
+                                self.value = ProcessStudyplan(response,true);
+                                debug.info('studyplan processed');
                                 self.$emit('input',self.value);
-                                if(moved){
-                                    self.$emit('moved',self.value,moved_from, moved_to);
-                                }
+                            }).fail(function(error){
+                                notification.exception(error);
+                            });
+                        } else {
+                            // Copy updated fields and trigger update
+                            objCopy(self.value,updatedplan,STUDYPLAN_EDITOR_FIELDS);
+                            self.$emit('input',self.value);
+                            if(moved){
+                                self.$emit('moved',self.value, moved_from, moved_to);
                             }
                         }
-                    }).fail(notification.exception);
-                },
-                numberFilter(value){
-                    return value;
+                    }
                 },
             }
             ,
             template:
             `
             <span class='s-studyplan-edit'>
-                <b-button :variant="variant" v-if='type == "button"' @click.prevent='editPlanStart()'
-                    ><slot><i class='fa fa-gear'></i></slot></b-button>
-                <a variant="variant" v-else href='#' @click.prevent='editPlanStart()'
-                    ><slot><i class='fa fa-gear'></i></slot></a>
-                <b-modal
-                    v-model="show"
-                    size="lg"
-                    ok-variant="primary"
-                    :title="text.studyplan_edit"
-                    @ok="editPlanFinish()"
-                    :ok-disabled="Math.min(editdata.name.length,editdata.shortname.length) == 0"
-                    >
-                    <b-container>
-                        <b-row>
-                            <b-col cols="4">{{ text.studyplan_name}}</b-col>
-                            <b-col cols="8">
-                                <b-form-input v-model="editdata.name"
-                                :state='editdata.name.length>0'
-                                :placeholder="text.studyplan_name_ph"></b-form-input>
-                            </b-col>
-                        </b-row>
-                        <b-row>
-                            <b-col cols="4">{{ text.studyplan_shortname}}</b-col>
-                            <b-col cols="8">
-                                <b-form-input v-model="editdata.shortname"
-                                :state='editdata.shortname.length>0'
-                                :placeholder="text.studyplan_shortname_ph"></b-form-input>
-                            </b-col>
-                        </b-row>
-                        <b-row>
-                            <b-col cols="4">{{ text.studyplan_idnumber}}</b-col>
-                            <b-col cols="8">
-                                <b-form-input v-model="editdata.idnumber"
-                                :placeholder="text.studyplan_idnumber_ph"></b-form-input>
-                            </b-col>
-                        </b-row>                        <b-row>
-                            <b-col cols="4">{{ text.studyplan_description}}</b-col>
-                            <b-col cols="8">
-                                <mform name="studyplan_editform" :params="{studyplan_id: value.id}"></mform>
-                            </b-col>
-                        </b-row>
-                        <b-row>
-                            <b-col cols="4">{{ text.studyplan_context}}</b-col>
-                            <b-col cols="8">
-                                <b-form-select v-model="editdata.context_id"
-                                :options="categories" text-field="category.pathname" value-field="context_id"
-                                ></b-form-select>
-                            </b-col>
-                        </b-row>
-                        <b-row>
-                            <b-col cols="4">{{ text.studyplan_slots}}</b-col>
-                            <b-col cols="8">
-                                <b-form-input 
-                                    min="1"
-                                    type="number"
-                                    no-wheel
-                                    v-model="editdata.periods"
-                                ></b-form-input>
-                            </b-col>
-                        </b-row>
-                        <b-row>
-                            <b-col cols="4">{{ text.studyplan_startdate}}</b-col>
-                            <b-col cols="8">
-                                <b-form-datepicker start-weekday="1" v-model="editdata.startdate"></b-form-datepicker>
-                            </b-col>
-                        </b-row>
-                        <b-row>
-                            <b-col cols="4">{{ text.studyplan_enddate}}</b-col>
-                            <b-col cols="8">
-                                <b-form-datepicker start-weekday="1" v-model="editdata.enddate" ></b-form-datepicker>
-                            </b-col>
-                        </b-row>
-                        <b-row>
-                            <b-col cols="4">{{ text.choose_aggregation_style}}</b-col>
-                            <b-col cols="8">
-                                <b-form-select v-model="editdata.aggregation"
-                                :options="aggregators" text-field="name" value-field="id"
-                                ></b-form-select>
-                            </b-col>
-                        </b-row>
-                        <template v-if="aggregation_parsed.bistate && editdata.aggregation == 'bistate'">
-                            <b-row >
-                                <b-col cols="4">{{ text.setting_bistate_thresh_excellent}}</b-col>
-                                <b-col cols="8">
-                                    <b-form-input v-model="aggregation_parsed.bistate.thresh_excellent"
-                                    type="number" number :formatter="numberFilter"
-                                    ></b-form-input>
-                                </b-col>
-                            </b-row>
-                            <b-row >
-                                <b-col cols="4">{{ text.setting_bistate_thresh_good}}</b-col>
-                                <b-col cols="8">
-                                    <b-form-input v-model="aggregation_parsed.bistate.thresh_good"
-                                    type="number" number :formatter="numberFilter"
-                                    ></b-form-input>
-                                </b-col>
-                            </b-row>
-                            <b-row >
-                                <b-col cols="4">{{ text.setting_bistate_thresh_completed}}</b-col>
-                                <b-col cols="8">
-                                    <b-form-input v-model="aggregation_parsed.bistate.thresh_completed"
-                                    type="number" number :formatter="numberFilter"
-                                    ></b-form-input>
-                                </b-col>
-                            </b-row>
-                            <b-row><b-col cols="*">&nbsp;</b-col></b-row>
-                            <b-row>
-                                <b-col cols="7">{{ text.setting_bistate_support_failed}}</b-col>
-                                <b-col cols="3">
-                                    <b-form-checkbox v-model="aggregation_parsed.bistate.use_failed"
-                                    ></b-form-checkbox>
-                                </b-col>
-                            </b-row>
-                            <b-row><b-col cols="*">&nbsp;</b-col></b-row>
-                            <b-row >
-                                <b-col cols="7">{{ text.setting_bistate_accept_pending_submitted}}</b-col>
-                                <b-col cols="3">
-                                    <b-form-checkbox v-model="aggregation_parsed.bistate.accept_pending_as_submitted"
-                                    ></b-form-checkbox>
-                                </b-col>
-                            </b-row>
-                        </template>
-                    </b-container>
-                </b-modal>
+                <mform 
+                    name="studyplan_editform" 
+                    :params="{studyplan_id: value.id, mode: mode, contextid: contextid }" 
+                    @saved="planSaved"
+                    :variant="variant"
+                    :type="type"
+                    :title="(mode == 'create')?text.studyplan_add:text.studyplan_edit"
+                    ><slot><i class='fa fa-gear'></i></slot></mform>
             </span>
             `
         });
@@ -1644,7 +1386,7 @@ export default {
                                 v-model="value"><i class='fa fa-users'></i> {{text.associations}}</t-studyplan-associate>
                         </span>
                         <span class='control editable'>
-                            <t-studyplan-edit v-model="value" @moved="movedStudyplan"
+                            <t-studyplan-edit v-model="value" @moved="movedStudyplan" 
                                 ><i class='fa fa-gear'></i> {{text.edit$core}}</t-studyplan-edit>
                         </span>
                         <span class='control deletable'>
diff --git a/amd/src/treestudyplan-components.js b/amd/src/treestudyplan-components.js
index f8b8255..2f85efa 100644
--- a/amd/src/treestudyplan-components.js
+++ b/amd/src/treestudyplan-components.js
@@ -26,7 +26,8 @@ export default {
             studyplancard: {
                 open: "open",
                 noenddate: "noenddate",
-                idnumber: "studyplan_idnumber"
+                idnumber: "studyplan_idnumber",
+                description: "studyplan_description"
             }
         });
         // Create new eventbus for interaction between item components
@@ -88,13 +89,27 @@ export default {
                     <template v-else>{{value.name}}</template>
                     <slot name='title'></slot>
                 </b-card-title>
+                <div class='s-studyplan-card-icon'><img :src='value.icon' style="width: 64px; height: 64px;"></div>
                 <div class='s-studyplan-card-idnumber' v-if='value.idnumber'><i>{{ text.idnumber}}:</i> {{ value.idnumber }}</div>
-                <div class='s-studyplan-card-description' v-if='value.description'>{{ value.description }}</div>
+                
                 <slot></slot>
                 <template #footer>
                     <span :class="'t-timing-'+timing" v-html="startdate + ' - '+ enddate"></span>
                     <span class="s-studyplan-card-buttons">
                     <slot name='footer'></slot>
+                    <template v-if='value.description'>
+                        <b-button variant="primary" v-b-modal="'modal-description-'+value.id"
+                        ><i class='fa fa-info-circle'></i> {{ text.description }}</b-button>
+                        <b-modal
+                            :title="value.name"
+                            scrollable
+                            centered
+                            ok-only
+                            size="xl"
+                            :id="'modal-description-'+value.id"
+                            ><span v-html="value.description"></span>
+                        </b-modal>
+                    </template>
                     <b-button style="float:right;" v-if='open' variant='primary'
                         @click.prevent='onOpenClick($event)'>{{ text.open }}</b-button>
                     </span>
diff --git a/amd/src/util/formfields.js b/amd/src/util/formfields.js
new file mode 100644
index 0000000..b072421
--- /dev/null
+++ b/amd/src/util/formfields.js
@@ -0,0 +1,10 @@
+import Debugger from './debugger';
+const debug = new Debugger("formfields");
+/**
+ * convert a text field into an integer only text field
+ * @param {Date|string} id The Id of the form field
+ */
+export function text_integer(id){
+    const element = document.getElementById(id);
+    debug.warn("Initializing form element text_integer on ",id,element);
+}
\ No newline at end of file
diff --git a/amd/src/util/mform-helper.js b/amd/src/util/mform-helper.js
index 7d53916..7a49430 100644
--- a/amd/src/util/mform-helper.js
+++ b/amd/src/util/mform-helper.js
@@ -50,6 +50,14 @@ export default {
                     type: String,
                     default: "",
                 },
+                variant: {
+                    type: String,
+                    default: "primary",
+                },
+                type: {
+                    type: String,
+                    default: "link",
+                }
             },
             data() {
                 return {
@@ -78,12 +86,7 @@ export default {
                         self.loading = false;
                         // Process the collected javascript;
                         const js = processCollectedJavascript(data.javascript);
-                        debug.info("Replacing content / el",self.$refs["content"]);
-                        debug.info("Replacing content / html", html);
-                        debug.info("Replacing content / js",js);
-
-                        const r = replaceNodeContents(self.$refs["content"], html, js);
-                        debug.info("R:",r);
+                        replaceNodeContents(self.$refs["content"], html, js);
                         
                     }).catch(notification.exception);
 
@@ -104,14 +107,18 @@ export default {
                     call([{
                         methodname: 'local_treestudyplan_submit_mform',
                         args: {formname: self.name, params: JSON.stringify(self.params), formdata: data}
-                    }])[0].then(()=>{
-                        self.$emit("saved",formdata);
+                    }])[0].then((response)=>{
+                        const updatedplan = JSON.parse(response.data);
+                        self.$emit("saved",updatedplan,formdata);
                     }).catch(notification.exception);
-
                 }
             },
             template: `
-            <span class='mform-container'><a href='#' @click.prevent="openForm"><slot><i class="fa fa-cog"></i></slot></a>
+            <span class='mform-container'>
+                <b-button :variant="variant" v-if='type == "button"' @click.prevent='openForm'
+                    ><slot><i class='fa fa-gear'></i></slot></b-button>
+                <a variant="variant" v-else href='#' @click.prevent='openForm'
+                    ><slot><i class='fa fa-gear'></i></slot></a>
                 <b-modal
                     ref="editormodal"
                     scrollable
diff --git a/classes/aggregator.php b/classes/aggregator.php
index 01f4662..22a28d4 100644
--- a/classes/aggregator.php
+++ b/classes/aggregator.php
@@ -21,6 +21,8 @@
  */
 
 namespace local_treestudyplan;
+
+use moodle_exception;
 use \ValueError;
 
 defined('MOODLE_INTERNAL') || die();
@@ -71,7 +73,6 @@ abstract class aggregator {
         ];
     }
 
-
     /**
      * Create a new aggregatior object based on the specified method
      * @param mixed $method Aggregation method
@@ -83,7 +84,7 @@ abstract class aggregator {
             $agclass = self::aggregator_name($method);
             return new $agclass($configstr);
         } else {
-            throw new \ValueError("Cannot find aggregator '{$method}'");
+            throw new moodle_exception("Cannot find aggregator '{$method}'");
         }
     }
 
diff --git a/classes/local/form_elements/text_integer.php b/classes/local/form_elements/text_integer.php
new file mode 100644
index 0000000..d901518
--- /dev/null
+++ b/classes/local/form_elements/text_integer.php
@@ -0,0 +1,40 @@
+<?php
+namespace local_treestudyplan\local\form_elements;
+use MoodleQuickForm_text;
+use MoodleQuickForm;
+
+
+defined('MOODLE_INTERNAL') || die();
+global $CFG;
+require_once($CFG->libdir . "/form/text.php");
+
+
+class text_integer extends MoodleQuickForm_text {
+    public function toHtml()
+    {
+        global $PAGE;
+         // Add number type attribute
+        $this->_attributes['type'] = 'number';
+
+        $html = parent::toHtml(); 
+        // Add javascript call to handle stuff
+        $PAGE->requires->js_call_amd('local_treestudyplan/util/formfields', 'text_integer', ['id' => $this->getAttribute('id')]);
+        return $html;
+    }
+
+    public static function Register() {
+        global $CFG;
+        MoodleQuickForm::registerElementType(
+            // The custom element is named `course_competency_rule`.
+            // This is the element name used in the `addElement()` function.
+            'text_integer',
+        
+            // This is where it's definition is defined.
+            // This does not currently support class auto-loading.
+            "$CFG->dirroot/local/treestudyplan/classes/local/form_elements/text_integer.php",
+        
+            // The class name of the element.
+            'local_treestudyplan\local\form_elements\text_integer'
+        );
+    }
+}
\ No newline at end of file
diff --git a/classes/local/forms/formbase.php b/classes/local/forms/formbase.php
index 76dc974..6eb636d 100644
--- a/classes/local/forms/formbase.php
+++ b/classes/local/forms/formbase.php
@@ -53,14 +53,14 @@ abstract class formbase extends \moodleform {
     /** 
      * Process the submission and perform necessary actions
      * @param object $entry The processed form data
-     * @return bool True if submission successful
+     * @return object|array Data to pass to receiver if submission successful
      * @throws \moodle_exception if an error must be given for a specific reason.
      */
     abstract protected function process_submitted_data(object $entry);
 
     /** 
      * Process the submission and perform necessary actions
-     * @return bool True if submission successful
+     * @return object|array Data to pass to receiver if submission successful
      * @throws \moodle_exception if an error must be given for a specific reason.
      */
     public function process_submission() {
@@ -69,7 +69,7 @@ abstract class formbase extends \moodleform {
         if($data) {
             return $this->process_submitted_data($data);
         } else {
-            return false;
+           throw new \moodle_exception('no_form_data','local_treestudyplan');
         }
     }
 
diff --git a/classes/local/forms/studyplan_editform.php b/classes/local/forms/studyplan_editform.php
index c1fb884..0015e6e 100644
--- a/classes/local/forms/studyplan_editform.php
+++ b/classes/local/forms/studyplan_editform.php
@@ -1,7 +1,11 @@
 <?php
 
 namespace local_treestudyplan\local\forms;
+
+use local_treestudyplan\aggregator;
 use local_treestudyplan\studyplan;
+use local_treestudyplan\courseservice;
+use local_treestudyplan\local\form_elements\text_integer;
 use local_treestudyplan\local\helpers\webservicehelper;
 use moodle_exception;
 use stdClass;
@@ -25,16 +29,32 @@ class studyplan_editform extends formbase {
      */    
     public static function init_customdata(object $params) {
         $customdata = new stdClass;
-        $customdata->plan = studyplan::find_by_id($params->studyplan_id);
-        $customdata->context = $customdata->plan->context();
+        $customdata->create = $params->mode=='create'?true:false;
+        if($customdata->create){
+            $customdata->context = \context::instance_by_id($params->contextid);
+        } else {
+            
+            $customdata->plan = studyplan::find_by_id($params->studyplan_id);
+            $customdata->context = $customdata->plan->context();
+            $customdata->simplemodel = $customdata->plan->simple_model();
+        }
+
         $customdata->editoroptions = [
             'trusttext' => true,
             'subdirs' => true,
             'maxfiles' => 20,
             'maxbytes' => 20*1024*1024,
-            'context' => \context_system::instance(),
+            'context' => \context_system::instance(), // Keep the files in system context
         ];
-        return $customdata;
+        $customdata->fileoptions = [
+            'subdirs' => 0,
+            'maxbytes' => 10*1024*1024, // Max 10MiB should be sufficient for a picture.
+            'areamaxbytes' => 10485760,
+            'maxfiles' => 1, // Just one file
+            'accepted_types' => ['.jpg', '.png'],
+            'return_types' => FILE_INTERNAL | FILE_EXTERNAL,
+        ];
+        return $customdata; 
     }
 
     /**
@@ -62,16 +82,65 @@ class studyplan_editform extends formbase {
             with existing moodle code assumptions. 
             The form API does seem needlessly convoluted in it's use, but we need the editor...
         */
-        $entry = $DB->get_record(studyplan::TABLE, ['id' => $customdata->plan->id()]);
+        if($customdata->create) {
+            $entry = new stdClass;
+            $entry->context_id = $customdata->context->id;
+            $entry->aggregation = get_config("local_treestudyplan","aggregation_mode");
+            $ag_cfg = json_decode(aggregator::create($entry->aggregation, "")->config_string(),true);
+            
+            // Determine the next august 1st for default value purposes.
+            $august = strtotime("first day of august this year");
+            if($august < time()) {
+                $august = strtotime("first day of august next year");
+            }
+            $entry->startdate = $august;
+            $entry->enddate = $august + (364*24*60*60); // Not bothering about leap years here.
+            $entry->periods = 4;
+        } else {
+            $entry = $DB->get_record(studyplan::TABLE, ['id' => $customdata->plan->id()]);
+
+            $entry->startdate = strtotime($customdata->simplemodel['pages'][0]['startdate']);
+            $entry->enddate = strtotime($customdata->simplemodel['pages'][0]['enddate']);
+            $entry->periods = $customdata->simplemodel['pages'][0]['periods'];
+            $ag_cfg = json_decode($customdata->plan->aggregator()->config_string(),true);
+        }
+
+        // Prepare the editor
         $entry = file_prepare_standard_editor(  $entry,
-                                                'description',
-                                                $customdata->editoroptions,
-                                                \context_system::instance(),
-                                                'local_treestudyplan',
-                                                'studyplan',
-                                                $customdata->plan->id());
-        
+            'description',
+            $customdata->editoroptions,
+            \context_system::instance(),
+            'local_treestudyplan',
+            'studyplan',
+            ($customdata->create)?null:$customdata->plan->id()
+        );
+
+        // Prepare file area for the icon
+        // Get an unused draft itemid which will be used for this form.
+        $draftitemid = file_get_submitted_draft_itemid('icon');
+        file_prepare_draft_area(
+            // The $draftitemid is the target location.
+            $draftitemid,
+            // The combination of contextid / component / filearea / itemid
+            // form the virtual bucket that files are currently stored in
+            // and will be copied from.
+            \context_system::instance()->id,
+            'local_treestudyplan',
+            'icon',
+            ($customdata->create)?null:$customdata->plan->id(),
+            $customdata->fileoptions
+        );
+        $entry->icon = $draftitemid;
+
+        // Add aggregation configs to entry.
+
+        foreach ($ag_cfg as $key => $val) {
+            $entrykey = $entry->aggregation."_".$key;
+            $entry->$entrykey = $val;
+        }
+
         return $entry;
+
     }
 
     /**
@@ -80,7 +149,117 @@ class studyplan_editform extends formbase {
     public function definition() {
         $mform = $this->_form;
         $customdata = (object)$this->_customdata;
+
+        // Register integer type
+        text_integer::Register();
+
         // Define the form
+        $field = 'name';
+        $mform->addElement('text',$field,
+            get_string('studyplan_name','local_treestudyplan'),
+            []);
+        $mform->addRule($field, null, 'required', null, 'client');
+
+        $field = 'shortname';
+        $mform->addElement('text',$field,
+            get_string('studyplan_shortname','local_treestudyplan'),
+            []);
+        $mform->addRule($field, null, 'required', null, 'client');
+
+        $field = 'idnumber';
+        $mform->addElement('text',$field,
+            get_string('studyplan_idnumber','local_treestudyplan'),
+            []);
+
+        $contextlist = [];
+        foreach(courseservice::list_accessible_categories() as $c){
+            $contextlist[$c['context_id']] = implode(" / ",$c['category']['path']);
+        }
+        $mform->addElement('autocomplete', 'context_id', 
+            get_string('studyplan_context','local_treestudyplan'), 
+            $contextlist);
+
+        $mform->addRule('context_id', null, 'required', null, 'client');
+
+        $mform->addElement(
+            'filemanager',
+            'icon',
+            get_string('studyplan_icon', 'local_treestudyplan'),
+            null,
+            $customdata->fileoptions
+        );
+
+        $field = 'startdate';
+        $mform->addElement('date_selector',$field,
+            get_string('studyplan_startdate','local_treestudyplan'),
+            []);
+        $mform->addRule($field, null, 'required', null, 'client');
+
+        $field = 'enddate';
+        $mform->addElement('date_selector',$field,
+            get_string('studyplan_startdate','local_treestudyplan'),
+            []);
+        $mform->addRule($field, null, 'required', null, 'client');
+
+        $field = 'periods';
+        $mform->addElement('text_integer',$field,
+            get_string('studyplan_slots','local_treestudyplan'),
+            []);
+        $mform->setType($field, PARAM_INT);
+        $mform->addRule($field, null, 'required', null, 'client');
+
+        $aggregators = [];
+        foreach(aggregator::list_model() as $a){
+            // Add method only if not deprecated or currently used
+            if ( $customdata->simplemodel['aggregation'] == $a['id'] || !($a['deprecated']) ) {
+                $aggregators[$a['id']] = $a['name'];
+            }
+        }
+        $mform->addElement('select','aggregation',
+            get_string('choose_aggregation_style','local_treestudyplan'),
+            $aggregators);
+
+        /* Start Bistate aggregation specific items */
+        $field = 'bistate_thresh_excellent';
+        $mform->addElement('text_integer',$field,
+            get_string('setting_bistate_thresh_excellent','local_treestudyplan'),
+            [],
+        );
+        $mform->setType($field, PARAM_INT);
+        $mform->hideIf($field, "aggregation", "neq", "bistate");
+
+        $field = 'bistate_thresh_good';
+        $mform->addElement('text_integer',$field,
+            get_string('setting_bistate_thresh_good','local_treestudyplan'),
+            [],
+        );
+        $mform->setType($field, PARAM_INT);
+        $mform->hideIf($field, "aggregation", "neq", "bistate");
+
+        $field = 'bistate_thresh_completed';
+        $mform->addElement('text_integer',$field,
+            get_string('setting_bistate_thresh_completed','local_treestudyplan'),
+            [],
+        );
+        $mform->setType($field, PARAM_INT);
+        $mform->hideIf($field, "aggregation", "neq", "bistate");
+
+        $field = 'bistate_use_failed';
+        $mform->addElement('checkbox',$field,
+            get_string('setting_bistate_support_failed','local_treestudyplan'),
+            [],
+        );
+        $mform->hideIf($field, "aggregation", "neq", "bistate");
+        
+        $field = 'bistate_accept_pending_as_submitted';
+        $mform->addElement('checkbox',$field,
+            get_string('setting_bistate_accept_pending_submitted','local_treestudyplan'),
+            [],
+        );
+        $mform->hideIf($field, "aggregation", "neq", "bistate");        
+
+        /* End Bistate aggregation specific items */
+
         $mform->addElement('editor', 'description_editor',
              get_string('studyplan_description', 'local_treestudyplan'), 
              null, 
@@ -96,25 +275,81 @@ class studyplan_editform extends formbase {
      */
     protected function process_submitted_data($entry) {
         $customdata = (object)$this->_customdata;
-        // Process the provided files in the description editor
-        $entry = file_postupdate_standard_editor($entry,
-                                                'description',
-                                                $customdata->editoroptions,
-                                                \context_system::instance(),
-                                                'local_treestudyplan',
-                                                'studyplan',
-                                                $customdata->plan->id());
-        
-        $f = fopen("/tmp/debug","a+");
-        fputs($f,print_r($entry,true));
-        fclose($f);
-        
-        // Use our own abstraction to update the record, so caches are maintained
-        $customdata->plan->edit(['description' => $entry->description,
-                                 'descriptionformat' => $entry->descriptionformat]);
 
+        // Add aggregation configs to entry.
+        $ag_cfg = json_decode(aggregator::create($entry->aggregation, "")->config_string(),true); // Retrieve default config string from selected aggregation method
+        foreach ($ag_cfg as $key => $val) {
+            $entrykey = $entry->aggregation."_".$key;
+            $ag_cfg[$key] = $entry->$entrykey;
+        }
+        $aggregation_config = json_encode($ag_cfg);
 
-        return true;
+        if($customdata->create) {
+
+            // Use our own abstraction to update the record, so caches are maintained
+            $plan = studyplan::add(['name' => $entry->name,
+                        'shortname' => $entry->shortname,
+                        'idnumber' => $entry->idnumber,
+                        'context_id' => $customdata->contextid,
+                        'aggregation' => $entry->aggregation,
+                        'aggregation_config' => $aggregation_config,
+                        'startdate' => date("Y-m-d",$entry->startdate),
+                        'enddate' => date("Y-m-d",$entry->enddate),
+                        'periods' => $entry->periods,
+                        ]);
+            // Process the provided files in the description editor
+            $entry = file_postupdate_standard_editor($entry,
+                                                    'description',
+                                                    $customdata->editoroptions,
+                                                    \context_system::instance(),
+                                                    'local_treestudyplan',
+                                                    'studyplan',
+                                                    $plan->id());   
+            // Update the description
+            $plan->edit([
+                'description' => $entry->description,
+                'descriptionformat' => $entry->descriptionformat,
+            ]);
+        } else {
+            $plan = $customdata->plan;
+            
+            // Process the provided files in the description editor
+            $entry = file_postupdate_standard_editor($entry,
+                                                    'description',
+                                                    $customdata->editoroptions,
+                                                    \context_system::instance(),
+                                                    'local_treestudyplan',
+                                                    'studyplan',
+                                                    $plan->id());
+
+            // Use our own abstraction to update the record, so caches are maintained
+            $plan->edit(['name' => $entry->name,
+                        'shortname' => $entry->shortname,
+                        'idnumber' => $entry->idnumber,
+                        'description' => $entry->description,
+                        'descriptionformat' => $entry->descriptionformat,
+                        'aggregation' => $entry->aggregation,
+                        'aggregation_config' => $aggregation_config,
+                        'startdate' => date("Y-m-d",$entry->startdate),
+                        'enddate' => date("Y-m-d",$entry->enddate),
+                        'periods' => $entry->periods,
+                        ]);
+        }
+
+        // Now save the icon file in correct part of the File API.
+        file_save_draft_area_files(
+            // The $entry->icon property contains the itemid of the draft file area.
+            $entry->icon,
+            // The combination of contextid / component / filearea / itemid
+            // form the virtual bucket that file are stored in.
+            \context_system::instance()->id,
+            'local_treestudyplan',
+            'icon',
+            $plan->id(),
+            $customdata->fileoptions
+        );
+                            
+        return $plan->simple_model(); // Return the simple model of the plan to make sure we can update stuff
     }
 
 
diff --git a/classes/studyitemconnection.php b/classes/studyitemconnection.php
index 778d802..5d369a4 100644
--- a/classes/studyitemconnection.php
+++ b/classes/studyitemconnection.php
@@ -168,9 +168,9 @@ class studyitemconnection {
                 'to_id' => $toid,
             ]);
 
-            return success::success('Items Disconnected');
+            return success::success(['msg'=>'Items Disconnected']);
         } else {
-            return success::success('Connection does not exist');
+            return success::success(['msg'=>'Connection does not exist']);
         }
     }
 
diff --git a/classes/studyplan.php b/classes/studyplan.php
index 3ea2c85..4f2d7a1 100644
--- a/classes/studyplan.php
+++ b/classes/studyplan.php
@@ -118,6 +118,62 @@ class studyplan {
         return $this->r->name;
     }
 
+    private function icon() {
+        global $CFG;
+        $fs = \get_file_storage();
+        // Returns an array of `stored_file` instances.
+        $files = $fs->get_area_files(\context_system::instance()->id, 'local_treestudyplan', 'icon', $this->id);
+
+        if (count($files) > 0 ){
+            $file = array_shift($files);
+            if ($file->get_filename() == ".") {
+                // Get next file if the first is the directory itself.
+                $file = array_shift($files);
+            }
+
+            $url = \moodle_url::make_pluginfile_url(
+                $file->get_contextid(),
+                $file->get_component(),
+                $file->get_filearea(),
+                $file->get_itemid(),
+                $file->get_filepath(),
+                $file->get_filename(),
+                false                     // Do not force download of the file.
+            );
+        } else {
+            // Try the configured default in settings.
+            $defaulticon = get_config('local_treestudyplan', 'defaulticon');
+            if (empty($defaulticon)) {
+                   // Fall back to the standard (ugly) default image.
+                   $url = new \moodle_url($CFG->wwwroot . "/local/treestudyplan/pix/default_icon.png");
+            } else {
+                $url = \moodle_url::make_pluginfile_url(\context_system::instance()->id, 'local_treestudyplan', 'defaulticon', 0, "/",
+                    $defaulticon);
+            }
+            
+        }
+        return $url->out();
+    }
+
+    /** 
+     * Return description with all file references resolved
+     */
+    public function description() {
+        $text = file_rewrite_pluginfile_urls(
+            // The content of the text stored in the database.
+            $this->r->description,
+            // The pluginfile URL which will serve the request.
+            'pluginfile.php',
+        
+            // The combination of contextid / component / filearea / itemid
+            // form the virtual bucket that file are stored in.
+            \context_system::instance()->id, // System instance is always used for this
+            'local_treestudyplan',
+            'studyplan',
+            $this->id
+        );
+        return $text;
+    }
     /**
      * Return the studyplan pages associated with this plan
      * @return studyplanpage[]
@@ -160,6 +216,7 @@ class studyplan {
             "context_id" => new \external_value(PARAM_INT, 'context_id of studyplan'),
             "description" => new \external_value(PARAM_RAW, 'description of studyplan'),
             "descriptionformat" => new \external_value(PARAM_INT, 'description format'),
+            "icon" => new \external_value(PARAM_RAW,'icon for this plan'),
             "aggregation" => new \external_value(PARAM_TEXT, 'selected aggregator'),
             "aggregation_config" => new \external_value(PARAM_TEXT, 'config string for aggregator'),
             "aggregation_info" => aggregator::basic_structure(),
@@ -183,8 +240,9 @@ class studyplan {
             'shortname' => $this->r->shortname,
             'idnumber' => $this->r->idnumber,
             'context_id' => $this->context()->id,
-            'description' => $this->r->description,
+            'description' => $this->description(),
             'descriptionformat' => $this->r->descriptionformat,
+            'icon' => $this->icon(),
             'aggregation' => $this->r->aggregation,
             'aggregation_config' => $this->aggregator->config_string(),
             'aggregation_info' => $this->aggregator->basic_model(),
@@ -204,6 +262,7 @@ class studyplan {
             "idnumber" => new \external_value(PARAM_TEXT, 'idnumber of curriculum'),
             "description" => new \external_value(PARAM_RAW, 'description of studyplan'),
             "descriptionformat" => new \external_value(PARAM_INT, 'description format'),
+            "icon" => new \external_value(PARAM_RAW,'icon for this plan'),
             "context_id" => new \external_value(PARAM_INT, 'context_id of studyplan'),
             "aggregation" => new \external_value(PARAM_TEXT, 'selected aggregator'),
             "aggregation_config" => new \external_value(PARAM_TEXT, 'config string for aggregator'),
@@ -232,8 +291,9 @@ class studyplan {
             'name' => $this->r->name,
             'shortname' => $this->r->shortname,
             'idnumber' => $this->r->idnumber,
-            'description' => $this->r->description,
+            'description' => $this->description(),
             'descriptionformat' => $this->r->descriptionformat,
+            'icon' => $this->icon(),
             'context_id' => $this->context()->id,
             "aggregation" => $this->r->aggregation,
             "aggregation_config" => $this->aggregator->config_string(),
@@ -562,6 +622,7 @@ class studyplan {
             "shortname" => new \external_value(PARAM_TEXT, 'shortname of studyplan'),
             "description" => new \external_value(PARAM_RAW, 'description of studyplan'),
             "descriptionformat" => new \external_value(PARAM_INT, 'description format'),
+            "icon" => new \external_value(PARAM_RAW,'icon for this plan'),
             "idnumber" => new \external_value(PARAM_TEXT, 'idnumber of curriculum'),
             "pages" => new \external_multiple_structure(studyplanpage::user_structure()),
             "aggregation_info" => aggregator::basic_structure(),
@@ -580,8 +641,9 @@ class studyplan {
             'id' => $this->r->id,
             'name' => $this->r->name,
             'shortname' => $this->r->shortname,
-            'description' => $this->r->description,
+            'description' => $this->description(),
             'descriptionformat' => $this->r->descriptionformat,
+            'icon' => $this->icon(),
             'idnumber' => $this->r->idnumber,
             'pages' => [],
             'aggregation_info' => $this->aggregator->basic_model(),
@@ -618,8 +680,13 @@ class studyplan {
             'name' => $name,
             'shortname' => $shortname,
             'description' => $this->r->description,
+            'descriptionformat' => $this->r->descriptionformat,
+            'aggregation' => $this->r->aggregation,
+            'aggregation_config' => $this->r->aggregation_config
         ]);
 
+        //TODO: Copy any files related to this userid....
+
         // Next, copy the studylines.
 
         foreach ($this->pages() as $p) {
diff --git a/classes/success.php b/classes/success.php
index 0e07100..dbcc58a 100644
--- a/classes/success.php
+++ b/classes/success.php
@@ -41,27 +41,31 @@ class success {
     /**
      * Create new successful result with optional message
      * @param string $msg Message to add to result
+     * @param array|object $data Custom data to pass to receiver
      */
-    public static function success($msg = "") : self {
-        return new self(true, $msg);
+    public static function success($data=[]) : self {
+        return new self(true, 'success', $data);
     }
 
     /**
      * Create new failed result with optional message
      * @param string $msg Message to add to result
+     * @param array|object $data Custom data to pass to receiver
      */
-    public static function fail($msg = "") : self {
-        return new self(false, $msg);
+    public static function fail($msg = "", $data=[]) : self {
+        return new self(false, $msg, $data);
     }
 
     /**
      * Create new succes result
      * @param bool $success Whether result is succesful or not
      * @param string $msg Message to add to result
+     * @param array|object $data Custom data to pass to receiver
      */
-    public function __construct($success, $msg) {
+    public function __construct($success, $msg, $data=[]) {
         $this->success = ($success) ? true : false;
         $this->msg = $msg;
+        $this->data = json_encode($data);
     }
 
     /**
@@ -71,6 +75,7 @@ class success {
         return new \external_single_structure([
             "success" => new \external_value(PARAM_BOOL, 'operation completed succesfully'),
             "msg" => new \external_value(PARAM_TEXT, 'message'),
+            "data" => new \external_value(PARAM_RAW, 'message'),
         ]);
     }
 
@@ -80,7 +85,7 @@ class success {
      * @return array Webservice value
      */
     public function model() {
-        return ["success" => $this->success, "msg" => $this->msg];
+        return ["success" => $this->success, "msg" => $this->msg, "data" => $this->data];
     }
 
     /**
@@ -101,4 +106,13 @@ class success {
         return $this->msg;
     }
 
+    /**
+     * Get data
+     *
+     * @return string Message
+     */
+    public function data() {
+        return json_decode($this->data);
+    }
+
 }
diff --git a/classes/utilityservice.php b/classes/utilityservice.php
index 2bbf054..fad8b9e 100644
--- a/classes/utilityservice.php
+++ b/classes/utilityservice.php
@@ -156,12 +156,9 @@ class utilityservice extends \external_api {
 
         // Load the form, provide submitted form data and perform security checks
         $mform = self::load_mform($formname, $params, $ajaxformdata);
-
-        if ($mform->process_submission() !== false) {
-            return success::success()->model();
-        } else {
-            return success::fail("Error in submission data")->model();
-        }
+        
+        $return = $mform->process_submission();
+        return success::success($return)->model();
     }
 
 
diff --git a/db/install.xml b/db/install.xml
index adedf9a..6030d58 100644
--- a/db/install.xml
+++ b/db/install.xml
@@ -27,7 +27,7 @@
         <FIELD NAME="name" TYPE="text" NOTNULL="true" SEQUENCE="false"/>
         <FIELD NAME="shortname" TYPE="text" NOTNULL="true" SEQUENCE="false"/>
         <FIELD NAME="description" TYPE="text" NOTNULL="false" SEQUENCE="false"/>
-        <FIELD NAME="descriptionformat" TYPE="int" LENGTH="4" NOTNULL="true" DEFAULT="0" SEQUENCE="false"/>
+        <FIELD NAME="descriptionformat" TYPE="int" LENGTH="4" NOTNULL="true" DEFAULT="1" SEQUENCE="false"/>
         <FIELD NAME="idnumber" TYPE="text" NOTNULL="false" SEQUENCE="false"/>
         <FIELD NAME="aggregation" TYPE="char" LENGTH="30" NOTNULL="true" DEFAULT="bistate" SEQUENCE="false"/>
         <FIELD NAME="aggregation_config" TYPE="text" NOTNULL="false" SEQUENCE="false"/>
@@ -170,6 +170,7 @@
         <FIELD NAME="fullname" TYPE="text" NOTNULL="false" SEQUENCE="false"/>
         <FIELD NAME="shortname" TYPE="text" NOTNULL="false" SEQUENCE="false"/>
         <FIELD NAME="description" TYPE="text" NOTNULL="false" SEQUENCE="false"/>
+        <FIELD NAME="descriptionformat" TYPE="int" LENGTH="4" NOTNULL="true" DEFAULT="1" SEQUENCE="false"/>
         <FIELD NAME="startdate" TYPE="text" NOTNULL="false" SEQUENCE="false"/>
         <FIELD NAME="enddate" TYPE="text" NOTNULL="false" SEQUENCE="false"/>
       </FIELDS>
diff --git a/db/upgrade.php b/db/upgrade.php
index 856d2b6..1a66c5b 100644
--- a/db/upgrade.php
+++ b/db/upgrade.php
@@ -497,7 +497,7 @@ function xmldb_local_treestudyplan_upgrade($oldversion) {
 
         // Define field descriptionformat to be added to local_treestudyplan.
         $table = new xmldb_table('local_treestudyplan');
-        $field = new xmldb_field('descriptionformat', XMLDB_TYPE_INTEGER, '4', null, XMLDB_NOTNULL, null, '0', 'description');
+        $field = new xmldb_field('descriptionformat', XMLDB_TYPE_INTEGER, '4', null, XMLDB_NOTNULL, null, '1', 'description');
 
         // Conditionally launch add field descriptionformat.
         if (!$dbman->field_exists($table, $field)) {
@@ -507,6 +507,19 @@ function xmldb_local_treestudyplan_upgrade($oldversion) {
         // Treestudyplan savepoint reached.
         upgrade_plugin_savepoint(true, 2023101900, 'local', 'treestudyplan');
     }
+    if ($oldversion < 2023102200) {
 
+        // Define field descriptionformat to be added to local_treestudyplan.
+        $table = new xmldb_table('local_treestudyplan_page');
+        $field = new xmldb_field('descriptionformat', XMLDB_TYPE_INTEGER, '4', null, XMLDB_NOTNULL, null, '1', 'description');
+
+        // Conditionally launch add field descriptionformat.
+        if (!$dbman->field_exists($table, $field)) {
+            $dbman->add_field($table, $field);
+        }
+
+        // Treestudyplan savepoint reached.
+        upgrade_plugin_savepoint(true, 2023102200, 'local', 'treestudyplan');
+    }
     return true;
 }
diff --git a/edit-plan.php b/edit-plan.php
index a40d1bd..66d89ac 100644
--- a/edit-plan.php
+++ b/edit-plan.php
@@ -128,7 +128,6 @@ print $OUTPUT->header();
                     @click='selectStudyplan(studyplan)'>{{ studyplan.name }}</b-form-select-option>
             </b-form-select>&nbsp;
             <t-studyplan-edit
-                @creating=""
                 @created="onStudyPlanCreated"
                 v-if='!activestudyplan && !loadingstudyplan'
                 mode="create"
diff --git a/lib.php b/lib.php
index d2ff918..f1e7b62 100644
--- a/lib.php
+++ b/lib.php
@@ -404,23 +404,37 @@ function local_treestudyplan_pluginfile(
 ): bool {
     global $DB,$USER;
 
+    $fp = fopen("/tmp/debug","a+");
+    fputs($fp, print_r([
+        'context' => $context,
+        'filearea' => $filearea,
+        'args' => $args,
+        'forcedownload' => $forcedownload,
+        'options' => $options,
+    ],true)."\n\n");
+    fclose($fp);
+
+    $studyplan_filecaps = ["local/treestudyplan:editstudyplan","local/treestudyplan:viewuserreports"];
+
     // Check the contextlevel is as expected - the studyplan plugin only uses system context for storing files.
-    // This avoids headaches when moving studyplans, while the security impact is minimal... 
+    // This avoids headaches when moving studyplans between contexts, while the security impact is minimal... 
     if ($context->contextlevel != CONTEXT_SYSTEM) {
         return false;
     }
 
+
     // Make sure the filearea is one of those used by the plugin.
-    if ($filearea == "studyplan") {
+    if (in_array($filearea,["studyplan","icon"])) {
         // The args is an array containing [itemid, path].
         // Fetch the itemid from the path.
         $itemid = array_shift($args);
 
         $plan = studyplan::find_by_id($itemid);
         $planctx = $plan->context();
+
         // Check if the current user has access to this studyplan
-        if (webservicehelper::has_capabilities(['',''],$planctx) || $plan->has_linked_user($USER)) {
-            // Extract the filename / filepath from the $args array.
+        if ( webservicehelper::has_capabilities($studyplan_filecaps,$planctx) || $plan->has_linked_user($USER)) {
+            // Extract the filename / filepath from the $args array
             $filename = array_pop($args); // The last item in the $args array.
             if (empty($args)) {
                 // $args is empty => the path is '/'.
@@ -432,20 +446,41 @@ function local_treestudyplan_pluginfile(
 
             // Retrieve the file from the Files API.
             $fs = get_file_storage();
-            $file = $fs->get_file(\context_system::instance(), 'local_treestudyplan', $filearea, $itemid, $filepath, $filename);
+            $file = $fs->get_file(\context_system::instance()->id, 'local_treestudyplan', $filearea, $itemid, $filepath, $filename);
             if (!$file) {
                 // The file does not exist.
                 return false;
             }
-
             // We can now send the file back to the browser - in this case with a cache lifetime of 1 day and no filtering.
             send_stored_file($file, 24*60*60, 0, $forcedownload, $options);
         } else {
             return false;
         }
 
-       
+    } else if (in_array($filearea,['defaulticon'])) {
+        // The args is an array containing [itemid, path].
+        // Fetch the itemid from the path.
+        $itemid = array_shift($args);
 
+        // Extract the filename / filepath from the $args array
+        $filename = array_pop($args); // The last item in the $args array.
+        if (empty($args)) {
+            // $args is empty => the path is '/'.
+            $filepath = '/';
+        } else {
+            // $args contains the remaining elements of the filepath.
+            $filepath = '/' . implode('/', $args) . '/';
+        }
+
+        // Retrieve the file from the Files API.
+        $fs = get_file_storage();
+        $file = $fs->get_file(\context_system::instance()->id, 'local_treestudyplan', $filearea, $itemid, $filepath, $filename);
+        if (!$file) {
+            // The file does not exist.
+            return false;
+        }
+        // We can now send the file back to the browser - in this case with a cache lifetime of 1 day and no filtering.
+        send_stored_file($file, 24*60*60, 0, $forcedownload, $options);
     } else {
         return false;
     }
diff --git a/pix/default_icon.png b/pix/default_icon.png
new file mode 100644
index 0000000..c6d7704
Binary files /dev/null and b/pix/default_icon.png differ
diff --git a/settings.php b/settings.php
index 4c9f6b2..40e032e 100644
--- a/settings.php
+++ b/settings.php
@@ -54,6 +54,16 @@ if ($hassiteconfig) {
         true,
     ));
 
+    // Default image for study plans
+    $page->add(new admin_setting_configstoredfile('local_treestudyplan/defaulticon', 
+        get_string('setting_defaulticon', 'local_treestudyplan'), 
+        get_string('setting_defaulticon_desc', 'local_treestudyplan'),
+        'defaulticon', 0,
+        [
+            'maxfiles' => 1, 
+            'accepted_types' => ['.jpg', '.png']]
+    ));
+
     // OUTCOME AGGREGATION SETTINGS.
     $page->add(new admin_setting_heading('local_treestudyplan/aggregation_heading',
         get_string('setting_aggregation_heading', 'local_treestudyplan'),
diff --git a/version.php b/version.php
index 6e14b37..c9780bb 100644
--- a/version.php
+++ b/version.php
@@ -22,7 +22,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $plugin->component = 'local_treestudyplan';  // Recommended since 2.0.2 (MDL-26035). Required since 3.0 (MDL-48494).
-$plugin->version = 2023102100;  // YYYYMMDDHH (year, month, day, iteration).
+$plugin->version = 2023102300;  // YYYYMMDDHH (year, month, day, iteration).
 $plugin->requires = 2021051700; // YYYYMMDDHH (This is the release version for Moodle 3.11).
 
 $plugin->release = "1.1.0-b";