Moved toolbox to studyplan components to better support coaching role

amd/src/page-edit-plan.js

@@ -89,22 +89,12 @@ export function init(contextid,categoryid,options) {
                     aggregation_config: '',
                 }
             },
-            toolbox: {
+
-                shown: false,
-                right: true,
-            },
-            filters: {
-                systembadges: "",
-                relatedbadges: "",
-            },
             activestudyplan: null,
             activepage: null,
             loadingstudyplan: false,
             studyplans: [],
-            frameworks: [],
+
-            relatedbadges: [],
-            systembadges: [],
-            courses: [],
             text: strings.studyplan,
             usedcontexts: [],
         },
@@ -144,14 +134,7 @@ export function init(contextid,categoryid,options) {
             contextid(){
                 return contextid;
             },
-            filterComponentType(){
+
-                return {
-                    item: false,
-                    component: true,
-                    span: 1,
-                    type: 'filter',
-                };
-            },
         },
         methods: {
             initialize() {
@@ -185,19 +168,13 @@ export function init(contextid,categoryid,options) {
                         app.selectStudyplan(id);
                     }
                 }).catch(notification.exception);
-                call([{
+
-                    methodname: 'local_treestudyplan_map_categories',
-                    args: { }
-                }])[0].then(function(response){
-                    app.courses = response;
-                }).catch(notification.exception);
                 call([{
                     methodname: 'local_treestudyplan_list_available_categories',
                     args: { operation: 'edit', refcontext_id: contextid}
                 }])[0].then(function(response){
                     app.usedcontexts = response;
                 }).catch(notification.exception);
-                this.filter_systembadges();
             },
             closeStudyplan() {
                 app.activestudyplan = null;
@@ -253,10 +230,6 @@ export function init(contextid,categoryid,options) {
                     app.loadingstudyplan = false;
                 });
             },
-            onPageChange(page) {
-                this.activepage = page;
-                this.filter_relatedbadges();
-            },
             import_studyplan(){
                 const self = this;
                 upload((filename,content)=>{
@@ -293,43 +266,7 @@ export function init(contextid,categoryid,options) {
                         download(plan.shortname+".json",response.content,response.format);
                     }).catch(notification.exception);
             },
-            toggletoolbox(event) {
+           
-                debug.info(event);
-                this.toolbox.shown = event;
-            },
-            filter_systembadges() {
-                const self = this;
-                call([{
-                    methodname: 'local_treestudyplan_search_badges',
-                    args: { 
-                            search: this.filters.systembadges || ""
-                            }
-                }])[0].then(function(response){
-                    self.systembadges = response;
-                }).catch(notification.exception);
-            },
-            filter_relatedbadges() {
-                const self = this;
-                if (this.activepage) {
-                    call([{
-                        methodname: 'local_treestudyplan_search_related_badges',
-                        args: { 
-                                page_id: this.activepage.id,
-                                search: this.filters.relatedbadges || ""
-                              }
-                    }])[0].then(function(response){
-                        self.relatedbadges = response;
-                    }).catch(notification.exception);
-                }
-            },
-            reset_systembadges() {
-                this.filters.systembadges = "";
-                this.filter_systembadges();
-            },
-            reset_relatedbadges() {
-                this.filters.relatedbadges = "";
-                this.filter_relatedbadges();
-            },
         },
     });
 }

amd/src/studyplan-editor-components.js

@@ -268,6 +268,19 @@ export default {
                 dateexpire: "dateexpire",
                 badgeinfo: "badgeinfo",
             },
+            toolbox: {
+                toolbox: 'toolbox',
+                toolbarRight: 'toolbar-right',
+                courses: 'courses',
+                flow: 'flow',
+                toolJunction: 'tool-junction',
+                toolFinish: 'tool-finish',
+                toolStart: 'tool-start',
+                badges: 'badges',
+                relatedbages: 'relatedbages@badges',
+                filter: 'filter@core',
+                sitebadges: 'sitebadges@core',
+            }
         });
 
         /*
@@ -1726,6 +1739,9 @@ export default {
             template:
             `
             <div>
+                <t-toolbox v-model="edit.toolbox_shown"
+                 :activepage="selectedpage"
+                 :coaching="coaching"></t-toolbox>
                 <div class='controlbox t-studyplan-controlbox'>
                     <div class="controlbox-group">
                         <b-form-checkbox v-if="!coaching"
@@ -1736,7 +1752,7 @@ export default {
                         v-if="!edit.studyline.editmode" v-model="edit.toolbox_shown" class="sw-studyplan-toolbar" switch
                             @change="toolbox_switched"
                             >{{ text.toolbox_toggle}}</b-form-checkbox>
-                        <drop
+                        <drop 
                             mode='copy'
                             class='t-item-deletebox text-danger border-danger'
                             @drop='deleteStudyItem'
@@ -2041,7 +2057,6 @@ export default {
             `
         });
 
-
        /*
         * T-STUDYLINE-HEADER
         */
@@ -4122,5 +4137,212 @@ export default {
             `,
         });
 
+        Vue.component('t-toolbox',{
+            props: {
+                value : {
+                    type: Boolean,
+                    default: true,
+                },
+                activepage: {
+                    type: Object,
+                    default() { return null;}
+                },
+                'coaching': {
+                    type: Boolean,
+                    default: false,
+                },
+            },
+            data() {
+                return {
+                    toolboxright: true, 
+                    text: strings.toolbox,
+                    relatedbadges: [],
+                    systembadges: [],
+                    courses: [],
+                    filters: {
+                        systembadges: "",
+                        relatedbadges: "",
+                    },
+                    loadingcourses: false,
+                };
+            },
+            watch: {
+                // whenever activepage changes, this function will run
+                activepage: function (newVal, oldVal) {
+                  this.filter_relatedbadges();
+                }
+              },
+            mounted() {
+                this.initialize();
+            },
+            computed: {
+                filterComponentType(){
+                    return {
+                        item: false,
+                        component: true,
+                        span: 1,
+                        type: 'filter',
+                    };
+                },
+            },
+            methods: {
+                initialize() {
+                    const self = this;
+                    self.loadingcourses = true;
+                    call([{
+                        methodname: 'local_treestudyplan_map_categories',
+                        args: { }
+                    }])[0].then(function(response){
+                        self.courses = response;
+                        self.loadingcourses = false;
+                    }).catch(notification.exception);
+                    this.filter_systembadges();
+                },
+                filter_systembadges() {
+                    const self = this;
+                    call([{
+                        methodname: 'local_treestudyplan_search_badges',
+                        args: { 
+                                search: this.filters.systembadges || ""
+                                }
+                    }])[0].then(function(response){
+                        self.systembadges = response;
+                    }).catch(notification.exception);
+                },
+                filter_relatedbadges() {
+                    const self = this;
+                    if (this.activepage) {
+                        call([{
+                            methodname: 'local_treestudyplan_search_related_badges',
+                            args: { 
+                                    page_id: this.activepage.id,
+                                    search: this.filters.relatedbadges || ""
+                                  }
+                        }])[0].then(function(response){
+                            self.relatedbadges = response;
+                        }).catch(notification.exception);
+                    }
+                },
+                reset_systembadges() {
+                    this.filters.systembadges = "";
+                    this.filter_systembadges();
+                },
+                reset_relatedbadges() {
+                    this.filters.relatedbadges = "";
+                    this.filter_relatedbadges();
+                },
+            },
+            template: `
+            <div class="t-toolbox">
+                <b-sidebar
+                    id="toolbox-sidebar"
+                    :right='toolboxright'
+                    shadow
+                    v-model="value"
+                    no-header
+                >
+                    <div class="m-3 border-bottom-1 border-primary"><h3>{{text.toolbox}}</h3></div>
+                    <div class='t-toolbox-preface'>
+                        <b-form-checkbox v-model="toolboxright" switch>{{text.toolbarRight}}</b-form-checkbox>
+                    </div>
+                    <b-tabs content-class='mt-3'>
+                        <b-tab :title="text.courses">
+                            <div v-if="loadingcourses"
+                                ><div class="spinner-border text-primary" role="status"></div
+                            ></div>
+                            <t-coursecat-list v-model="courses"></t-coursecat-list>
+                        </b-tab>
+                        <b-tab :title="text.flow">
+                            <ul class="t-toolbox">
+                                <li><drag
+                                    :type="filterComponentType"
+                                    :data="{type: 'junction'}"
+                                    @cut=""
+                                    ><t-item-junction></t-item-junction>{{ text.toolJunction }}
+                                    <template v-slot:drag-image="{data}"><t-item-junction></t-item-junction></template>
+                                </drag></li>
+                                <li><drag
+                                    :type="filterComponentType"
+                                    :data="{type: 'finish'}"
+                                    @cut=""
+                                    ><t-item-finish></t-item-finish>{{ text.toolFinish }}
+                                    <template v-slot:drag-image="{data}"><t-item-finish></t-item-finish></template>
+                                </drag></li>
+                                <li><drag
+                                    :type="filterComponentType"
+                                    :data="{type: 'start'}"
+                                    @cut=""
+                                    ><t-item-start></t-item-start>{{ text.toolStart }}
+                                    <template v-slot:drag-image="{data}"><t-item-start></t-item-start></template>
+                                </drag></li>
+                            </ul>
+                        </b-tab>
+                        <b-tab :title="text.badges">
+                            <b-card no-body class="mb-1">
+                            <b-card-header header-tag="header" class="p-1" role="tab">
+                                <b-button block v-b-toggle.relatedbadges variant="light">
+                                    <span class='float-left'>{{ text.relatedbages }}</span>
+                                    <span class="when-open float-right"><i class='fa fa-caret-down'></i></span>
+                                    <span class="when-closed float-right"><i class='fa fa-caret-right'></i></span>
+                                </b-button>
+                            </b-card-header>
+                            <b-collapse id="relatedbadges" visible accordion="my-accordion" role="tabpanel">
+                                <b-card-body>
+                                <input v-model="filters.relatedbadges" @input="filter_relatedbadges" :placeholder="text.filter"></input>
+                                &nbsp;<a @click="reset_relatedbadges" v-if="filters.relatedbadges" href='#'
+                                    ><i class='fa fa-times'></i></a>
+                                <ul class="t-badges">
+                                    <li v-for="b in relatedbadges"><drag
+                                    class="t-badge-drag"
+                                    :type="filterComponentType"
+                                    :data="{type: 'badge', badge: b}"
+                                    @cut=""
+                                    ><img :class="(!b.active)?'disabled':''" :src="b.imageurl" :alt="b.name"> 
+                                    <span :class="(!b.active)?'disabled':''">{{b.name}}</span>
+                                    <template v-slot:drag-image="{data}"
+                                            ><img :class="(!b.active)?'disabled':''" :src="b.imageurl" :alt="b.name"
+                                        ></template>
+                                    </drag></li>
+                                </ul>
+                                </b-card-body>
+                            </b-collapse>
+                            </b-card>
+                            <b-card v-if="!coaching" no-body class="mb-1">
+                            <b-card-header header-tag="header" class="p-1" role="tab">
+                                <b-button block v-b-toggle.systembadges variant="light">
+                                    <span class='float-left'>{{ text.sitebadges }}</span>
+                                    <span class="when-open float-right"><i class='fa fa-caret-down'></i></span>
+                                    <span class="when-closed float-right"><i class='fa fa-caret-right'></i></span>
+                                </b-button>
+                            </b-card-header>
+                            <b-collapse  d="systembadges" accordion="my-accordion" role="tabpanel">
+                                <b-card-body>
+                                <input v-model="filters.systembadges" @input="filter_systembadges" :placeholder="text.filter"></input>
+                                &nbsp; <a @click="reset_systembadges" v-if="filters.systembadges" href='#'
+                                    ><i class='fa fa-times'></i></a>
+                                <ul class="t-badges">
+                                    <li v-for="b in systembadges"><drag
+                                    class="t-badge-drag"
+                                    :type="filterComponentType"
+                                    :data="{type: 'badge', badge: b}"
+                                    @cut=""
+                                    ><img :class="(!b.active)?'disabled':''" :src="b.imageurl" :alt="b.name"> 
+                                        <span :class="(!b.active)?'disabled':''">{{b.name}}</span>
+                                        <template v-slot:drag-image="{data}"
+                                            ><img :class="(!b.active)?'disabled':''" :src="b.imageurl" :alt="b.name"
+                                        ></template>
+                                    </drag></li>
+                                </ul>
+                                </b-card-body>
+                            </b-collapse>
+                            </b-card>
+                        </b-tab>
+                    </b-tabs>
+                </b-sidebar>
+            </div>
+            `,
+        });
+
     },
+    
 };

edit-plan.php

@@ -166,8 +166,6 @@ print $OUTPUT->header();
                 v-if='activestudyplan'
                 v-model='activestudyplan'
                 @moved="movedStudyplan"
-                @toggletoolbox="toggletoolbox"
-                @pagechanged="onPageChange"
             ></t-studyplan>
             <div v-else-if='loadingstudyplan' class="spinner-border text-primary" role="status">
                 <span class="sr-only">Loading...</span>
@@ -192,110 +190,6 @@ print $OUTPUT->header();
                 </b-card-group>
             </div>
         </div>
-
-        <b-sidebar
-            id="toolbox-sidebar"
-            :right='toolbox.right'
-            shadow
-            v-model="toolbox.shown"
-            no-header
-        >
-            <div class="m-3 border-bottom-1 border-primary"><h3><?php t("toolbox")?></h3></div>
-            <div class='t-toolbox-preface'>
-                <b-form-checkbox v-model="toolbox.right" switch><?php t("toolbar-right");?></b-form-checkbox>
-            </div>
-            <b-tabs content-class='mt-3'>
-                <b-tab title="<?php t('courses')?>">
-                    <t-coursecat-list v-model="courses"></t-coursecat-list>
-                </b-tab>
-                <b-tab title="<?php t('flow')?>">
-                    <ul class="t-toolbox">
-                        <li><drag
-                            :type="filterComponentType"
-                            :data="{type: 'junction'}"
-                            @cut=""
-                            ><t-item-junction></t-item-junction><?php t("tool-junction") ?>
-                            <template v-slot:drag-image="{data}"><t-item-junction></t-item-junction></template>
-                        </drag></li>
-                        <li><drag
-                            :type="filterComponentType"
-                            :data="{type: 'finish'}"
-                            @cut=""
-                            ><t-item-finish></t-item-finish><?php t("tool-finish") ?>
-                            <template v-slot:drag-image="{data}"><t-item-finish></t-item-finish></template>
-                        </drag></li>
-                        <li><drag
-                            :type="filterComponentType"
-                            :data="{type: 'start'}"
-                            @cut=""
-                            ><t-item-start></t-item-start><?php t("tool-start") ?>
-                            <template v-slot:drag-image="{data}"><t-item-start></t-item-start></template>
-                        </drag></li>
-                    </ul>
-                </b-tab>
-                <b-tab title="<?php t('badges')?>">
-                    <b-card no-body class="mb-1">
-                    <b-card-header header-tag="header" class="p-1" role="tab">
-                        <b-button block v-b-toggle.relatedbadges variant="light">
-                            <span class='float-left'><?php t("relatedbages",[],"badges") ?></span>
-                            <span class="when-open float-right"><i class='fa fa-caret-down'></i></span>
-                            <span class="when-closed float-right"><i class='fa fa-caret-right'></i></span>
-                        </b-button>
-                    </b-card-header>
-                    <b-collapse id="relatedbadges" visible accordion="my-accordion" role="tabpanel">
-                        <b-card-body>
-                        <input v-model="filters.relatedbadges" @input="filter_relatedbadges" placeholder="<?php t("filter",[],"core"); ?>"></input>
-                        &nbsp;<a @click="reset_relatedbadges" v-if="filters.relatedbadges" href='#'
-                            ><i class='fa fa-times'></i></a>
-                        <ul class="t-badges">
-                            <li v-for="b in relatedbadges"><drag
-                            class="t-badge-drag"
-                            :type="filterComponentType"
-                            :data="{type: 'badge', badge: b}"
-                            @cut=""
-                            ><img :class="(!b.active)?'disabled':''" :src="b.imageurl" :alt="b.name"> 
-                            <span :class="(!b.active)?'disabled':''">{{b.name}}</span>
-                            <template v-slot:drag-image="{data}"
-                                    ><img :class="(!b.active)?'disabled':''" :src="b.imageurl" :alt="b.name"
-                                ></template>
-                            </drag></li>
-                        </ul>
-                        </b-card-body>
-                    </b-collapse>
-                    </b-card>
-                    <b-card no-body class="mb-1">
-                    <b-card-header header-tag="header" class="p-1" role="tab">
-                        <b-button block v-b-toggle.systembadges variant="light">
-                            <span class='float-left'><?php t("sitebadges",[],"badges") ?></span>
-                            <span class="when-open float-right"><i class='fa fa-caret-down'></i></span>
-                            <span class="when-closed float-right"><i class='fa fa-caret-right'></i></span>
-                        </b-button>
-                    </b-card-header>
-                    <b-collapse id="systembadges" accordion="my-accordion" role="tabpanel">
-                        <b-card-body>
-                        <input v-model="filters.systembadges" @input="filter_systembadges" placeholder="<?php t("filter",[],"core"); ?>"></input>
-                        &nbsp; <a @click="reset_systembadges" v-if="filters.systembadges" href='#'
-                            ><i class='fa fa-times'></i></a>
-                        <ul class="t-badges">
-                            <li v-for="b in systembadges"><drag
-                            class="t-badge-drag"
-                            :type="filterComponentType"
-                            :data="{type: 'badge', badge: b}"
-                            @cut=""
-                            ><img :class="(!b.active)?'disabled':''" :src="b.imageurl" :alt="b.name"> 
-                                <span :class="(!b.active)?'disabled':''">{{b.name}}</span>
-                                <template v-slot:drag-image="{data}"
-                                    ><img :class="(!b.active)?'disabled':''" :src="b.imageurl" :alt="b.name"
-                                ></template>
-                            </drag></li>
-                        </ul>
-                        </b-card-body>
-                    </b-collapse>
-                    </b-card>
-                    
-                </b-tab>
-            </b-tabs>
-        </b-sidebar>
     </div>
 </div>
 <?php