Moved toolbox to studyplan components to better support coaching role
This commit is contained in:
PMKuipers
parent
25a5ff8398
commit
500555e785
2
amd/build/page-edit-plan.min.js
vendored
2
amd/build/page-edit-plan.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
amd/build/studyplan-editor-components.min.js
vendored
2
amd/build/studyplan-editor-components.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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();
|
||||
},
|
||||
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
<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>
|
||||
`,
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
|
|
|
|||
106
edit-plan.php
106
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>
|
||||
<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>
|
||||
<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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user