Added course filter

amd/src/report-viewer-components.js

@@ -627,7 +627,7 @@ export default {
                     for(let i = 0; i < periods; i++){
                         if(line.slots[index-i] && line.slots[index-i].courses){
                             const list = line.slots[index-i].courses;
-                            for(const ix in list){ // Really wish that 'for of' would work with the minifier moodle uses
+                            for(const ix in list){ s
                                 const item = list[ix];
                                 if(item.layer == layeridx){
                                     if(forGradable){

amd/src/studyplan-editor-components.js

@@ -4074,8 +4074,8 @@ export default {
             },
             methods: {
                 canLoadMore() {
-                    return (this.value.haschildren && (!this.value.children || this.value.children.length == 0)) ||
+                    return (this.value.haschildren && (!this.value.children )) ||
-                        (this.value.hascourses && (!this.value.courses || this.value.courses.length == 0));
+                        (this.value.hascourses && (!this.value.courses ));
                 },
                 onShowDetails(){
                     const self = this;
@@ -4180,10 +4180,12 @@ export default {
                     systembadges: [],
                     courses: [],
                     filters: {
+                        courses: "",
                         systembadges: "",
                         relatedbadges: "",
                     },
                     loadingcourses: false,
+                    loadingcategories: [],
                 };
             },
             watch: {
@@ -4204,8 +4206,68 @@ export default {
                         type: 'filter',
                     };
                 },
+                filteredCourses() {
+                    const self=this;
+                    if (self.filters.courses) {
+                        return self.filterCategories(self.courses);
+                    } else {
+                        return self.courses;
+                    }
+                }
             },
             methods: {
+                // TODO: Filtering like this doesn't work, since the courses are lazyloaded on opening
+                filterCategories(catlist) {
+                    const self = this;
+                    const list = [];
+                    const search = new RegExp(`.*?${self.filters.courses}.*?`,"ig");
+                    for (const cat of catlist) {
+                        const clone = Object.assign({},cat);
+                        clone.courses = [];
+
+                        if (cat.courses) { 
+                            for (const course of cat.courses) {
+                                if ( search.test(course.shortname) || search.test(course.fullname)) {
+                                    clone.courses.push(course);
+                                }
+                            }
+                        } else if (cat.hascourses && !(self.loadingcategories.includes(cat.id))) {
+                            self.loadingcategories.push(cat.id);
+                            debug.info(`Loading from category ${cat.category.name}`,cat);
+                            call([{
+                                methodname: 'local_treestudyplan_get_category',
+                                args: { "id": cat.id}
+                            }])[0].then(function(response){
+                                    // Add reactive array 'children' to cat
+                                self.$set(cat,"children",response.children);
+                                self.$set(cat,"courses",response.courses);
+                                self.loadingcategories.splice(self.loadingcategories.indexOf(cat.id),1);
+                            }).catch(notification.exception);
+                        }
+                       
+                        if (cat.children) {
+                            clone.children = self.filterCategories(cat.children);
+                        } else if (cat.haschildren && !(self.loadingcategories.includes(cat.id))) {
+                            self.loadingcategories.push(cat.id);
+                            debug.info(`Loading from category ${cat.category.name}`,cat);
+                            call([{
+                                methodname: 'local_treestudyplan_get_category',
+                                args: { "id": cat.id}
+                            }])[0].then(function(response){
+                                    // Add reactive array 'children' to cat
+                                self.$set(cat,"children",response.children);
+                                self.loadingcategories.splice(self.loadingcategories.indexOf(cat.id),1);
+                            }).catch(notification.exception);
+                        }
+                        
+                        if ((clone.children && clone.children.length) || clone.courses.length) {
+                            list.push(clone);
+                        }
+                    }
+
+                    return list;
+                },
+
                 initialize() {
                     const self = this;
                     self.loadingcourses = true;
@@ -4271,7 +4333,13 @@ export default {
                             <div v-if="loadingcourses"
                                 ><div class="spinner-border text-primary" role="status"></div
                             ></div>
-                            <t-coursecat-list v-model="courses"></t-coursecat-list>
+                            <div v-else class="ml-4">
+                                <input v-model="filters.courses" :placeholder="text.filter"></input>
+                                &nbsp; <a @click="filters.courses = ''" v-if="filters.courses" href='#'
+                                    ><i class='fa fa-times'></i></a
+                                ><b-spinner small v-if="loadingcategories.length > 0" variant="primary"></b-spinner>
+                            </div>
+                            <t-coursecat-list v-model="filteredCourses"></t-coursecat-list>
                         </b-tab>
                         <b-tab :title="text.flow">
                             <ul class="t-toolbox">