Multi-period courses drag and drop

This commit is contained in:
PMKuipers 2023-08-04 11:54:16 +02:00
parent f97c4cb2ef
commit 235972e2f4
6 changed files with 151 additions and 155 deletions

View File

@ -171,7 +171,15 @@ export function init(contextid,categoryid) {
},
contextid(){
return contextid;
}
},
filterComponentType(){
return {
item: true,
component: false,
span: 1,
type: 'filter',
};
},
},
methods: {
closeStudyplan() {
@ -250,7 +258,6 @@ export function init(contextid,categoryid) {
download(plan.shortname+".json",response.content,response.format);
}).fail(notification.exception);
},
},
});
}

View File

@ -169,7 +169,6 @@ export default {
day: 'day$core',
rememberchoice: 'course_timing_rememberchoice',
hidewarning: 'course_timing_hidewarning,'
},
studyplan_associate: {
associations: 'associations',
@ -1285,7 +1284,7 @@ export default {
methods: {
countLineLayers(line){
let maxLayer = -1;
for(let i = 0; i <= this.value.slots; i++){
for(let i = 0; i <= this.page.periods; i++){
const slot = line.slots[i];
// Determine the amount of used layers in a studyline slit
for(const ix in line.slots[i].competencies){
@ -1447,6 +1446,34 @@ export default {
}).fail(notification.exception);
},
showslot(line,index, layeridx, type){
// check if the slot should be hidden because a previous slot has an item with a span
// so big that it hides this slot
const forGradable = (type == 'gradable')?true:false;
const periods = this.page.periods;
let show = true;
for(let i = 0; i < periods; i++){
if(line.slots[index-i] && line.slots[index-i].competencies){
const list = line.slots[index-i].competencies;
for(const ix in list){ // Really wish that for ( .. of .. ) would work with the minifier
const item = list[ix];
if(item.layer == layeridx){
if(forGradable){
if(i > 0 && (item.span - i) > 0){
show = false;
}
} else {
if((item.span - i) > 1){
show = false;
}
}
}
}
}
}
return show;
}
}
,
template:
@ -1540,35 +1567,36 @@ export default {
<!-- Line by line add the items -->
<!-- The grid layout handles putting it in rows and columns -->
<template v-for="(line,lineindex) in page.studylines"
><template v-for="layeridx in countLineLayers(line)+1"
><template v-for="(layernr,layeridx) in countLineLayers(line)+1"
><template v-for="(n,index) in (page.periods+1)"
>
<t-studyline-slot
v-if="index > 0"
v-if="index > 0 && showslot(line, index, layeridx, 'gradable')"
type='gradable'
v-model="line.slots[index].competencies"
:key="'c-'+lineindex+'-'+index+'-'+layeridx"
:key="'c-'+lineindex+'-'+index+'-'+layernr"
:slotindex="index"
:line="line"
:plan="value"
:page="page"
:period="page.perioddesc[index-1]"
:layer="layeridx-1"
:layer="layeridx"
:class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
+ ((lineindex==0 && layeridx==1)?' first ':' ')
+ ((lineindex==0 && layernr==1)?' first ':' ')
+ ((lineindex==page.studylines.length-1)?' last ':' ')"
></t-studyline-slot
><t-studyline-slot
type='filter'
v-if="showslot(line, index, layeridx, 'filter')"
v-model="line.slots[index].filters"
:key="'f-'+lineindex+'-'+index+'-'+layeridx"
:key="'f-'+lineindex+'-'+index+'-'+layernr"
:slotindex="index"
:line="line"
:plan="value"
:page="page"
:layer="layeridx-1"
:layer="layeridx"
:class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
+ ((lineindex==0 && layeridx==1)?' first ':'')
+ ((lineindex==0 && layernr==1)?' first ':'')
+ ((lineindex==page.studylines.length-1)?' last ':' ')
+ ((index==page.periods)?' rightmost':'')"
>
@ -1876,6 +1904,14 @@ export default {
else {
return false;
}
},
spanCss(){
if(this.item && this.item.span > 1){
const span = (2 * this.item.span) - 1;
return `width: 100%; grid-column: span ${span};`;
} else {
return "";
}
}
},
data() {
@ -1896,40 +1932,33 @@ export default {
};
},
methods: {
dragacceptitem(){
if(this.type == "gradable"){
return ["gradable-item"];
} else {
return ["filter-item"];
}
},
dragacceptcomponent(){
if(this.type == "gradable"){
return ["course",];
} else {
return ["filter",];
}
},
onDrop(event) {
this.hover.component = null;
this.hover.type = null;
const self = this;
if(self.dragacceptitem().includes(event.type)) {
if(event.type.item) {
let item = event.data;
// Perform layer update - set this slot and layer here
self.relocateStudyItem(item).done(()=>{
// To avoid weird visuals with the lines,
// we add the item to the proper place in the front-end first
item.layer = this.layer;
item.slot = this.slotindex;
self.value.push(item);
self.$emit("input",self.value);
// then on the next tick, we inform the back end
// Since moving things around has never been unsuccessful, unless you have other problems,
// it's better to have nice visuals.
this.$nextTick(() => {
self.relocateStudyItem(item).done(()=>{
self.validate_course_period();
});
});
}
else if(self.dragacceptcomponent().includes(event.type) ){
else if(event.type.component){
if(event.type == "course"){
if(event.type.type == "course"){
call([{
methodname: 'local_treestudyplan_add_studyitem',
args: {
@ -1951,11 +1980,13 @@ export default {
self.relocateStudyItem(item).done(()=>{
self.value.push(item);
self.$emit("input",self.value);
self.validate_course_period();
// call the validate period function on next tick,
// since it paints the item in the slot first
this.$nextTick(self.validate_course_period);
});
}).fail(notification.exception);
}
else if(event.type == "filter") {
else if(event.type.type == "filter") {
call([{
methodname: 'local_treestudyplan_add_studyitem',
args: {
@ -2055,39 +2086,86 @@ export default {
else if(dsi.days > 1){ s += `${dsi.days} ${this.text.days}, `;}
return s.toLocaleLowerCase();
},
maxSpan(){
// Determine the maximum span for components in this slot
// Used for setting the max in the timing adjustment screen (s)
// And for checking the filter types
// Assume this slot is first one available
let freeIndex = this.slotindex;
// Determine last free slot following this one in the layer
for(let i = this.slotindex + 1; i <= this.page.periods; i++){
if(this.line.slots && this.line.slots[i] && this.line.slots[i].competencies){
const l = this.line.slots[i].competencies;
if(l[this.layer]) {
// slot is busy in this layer.
break;
} else {
freeIndex = i;
}
} else {
break; // stop processing
}
}
// calculate span from that
return freeIndex - this.slotindex + 1;
},
makeType(item){
return {
item: true,
component: false,
span: item.span,
type: this.type,
};
},
checkType(type) {
if(type.type == this.type){
if(type == 'filter'){
return true;
} else if(type.span <= this.maxSpan()){
return true;
} else {
return false;
}
} else {
return false;
}
}
},
template: `
<div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ' ' + ((slotindex==0)?' t-studyline-firstcolumn ':' ')
+ (current?'current ':' ')"
:data-studyline="line.id" ref="main"
:style='spanCss'
><drag v-if="item"
:key="item.id"
class="t-slot-item"
:data="item"
:type="type+'-item'"
:type="makeType(item)"
@cut="onCut"
><t-item v-model="item" :plan="plan"></t-item
></drag
><drop v-else
:class="'t-slot-drop '+type + (layer > 0?' secondary':' primary')"
:accepts-type="dragacceptlist"
:accepts-type="checkType"
@drop="onDrop"
mode="cut"
@dragenter="onDragEnter"
@dragleave="onDragLeave"
><template v-if="hover.component">
<div v-if="hover.type == listtype+'-item'"
<div v-if="hover.type.item"
class="t-slot-item feedback"
:key="hover.component.id"
><t-item v-model="hover.component" dummy></t-item
></div
><div v-else-if="hover.type == 'course'"
><div v-else-if="hover.type.type == 'gradable'"
class="t-slot-item feedback"
:key="'course-'+hover.component.id"
><t-item-course v-model="courseHoverDummy"></t-item-course></div
><div v-else-if="hover.type == 'filter'"
><div v-else-if="hover.type.type == 'filter'"
class="t-slot-item feedback"
key="tooldrop"
><t-item-junction v-if="hover.component.type == 'junction'" ></t-item-junction
@ -2941,110 +3019,9 @@ export default {
/************************************
* *
* Competency map Vue components *
* Toolbox list components *
* *
************************************/
Vue.component('t-competency-heading', {
props: {
value : {
type: Object,
},
},
data() {
return {
};
},
computed: {
inuse() {
return (this.value.inuse !== undefined && !!this.value.inuse);
}
},
methods: {
onCut(){
// console.info('cutevent-competency',event);
this.value.inuse=true;
this.$emit('input',this.value);
},
},
template: `
<span class="t-competency-heading">
<i :class="'t-'+value.type+' fa fa-puzzle-piece'" v-if="value.type == 'module'"></i>
<i :class="'t-'+value.type+' fa fa-map'" v-else-if="value.type == 'category'"></i>
<i :class="'t-'+value.type+' fa fa-check-square'" v-else-if="value.type == 'goal'"></i>
<i :class="'t-'+value.type+' fa fa-circle'" v-else ></i>
<drag
class="draggable-competency"
v-if="value.type == 'module' && !inuse"
:data="value"
type="competency"
@cut="onCut">
{{ value.shortname }}
</drag>
<span v-else-if="value.type == 'module'" class="disabled-competency">{{ value.shortname }}</span>
<span v-else class="competency-info">{{ value.shortname }}</span>
</span>
`,
});
Vue.component('t-competency-display', {
props: {
value : {
type: Object,
default: function(){ return {};},
},
},
data() {
return {
dragLine: null,
};
},
methods: {
},
computed: {
haschildren() {
return this.value.children && this.value.children.length > 0;
},
},
template: `
<li>
<span v-if="haschildren" v-b-toggle="'cmp-'+value.id">
<i class="when-closed fa fa-caret-right"></i>
<i class="when-open fa fa-caret-down"></i>
<t-competency-heading v-model="value"></t-competency-heading>
</span>
<span v-else>
<t-competency-heading v-model="value"></t-competency-heading>
</span>
<b-collapse v-if="haschildren" :id="'cmp-'+value.id">
<t-competency-list v-model="value.children"></t-competency-list>
</b-collapse>
</li>
`,
});
Vue.component('t-competency-list', {
props: {
value : {
type: Array,
default: function(){ return [];},
},
},
data() {
return {
};
},
methods: {
},
template: `
<ul class='t-competency-list'>
<t-competency-display
v-for="(child, index) in value"
:key='child.idnumber'
v-model="value[index]"
></t-competency-display>
</ul>
`,
});
Vue.component('t-item-junction',{
props: {
value : {
@ -3270,6 +3247,14 @@ export default {
};
},
methods: {
makeType(){
return {
item: false,
component: true,
span: 1, //TODO: Detect longer courses and give them an appropriate span
type: 'gradable',
};
},
},
template: `
<ul class="t-course-list">
@ -3277,7 +3262,7 @@ export default {
<drag
class="draggable-course"
:data="course"
type="course"
:type="makeType()"
@cut=""
>
<i class="t-course-list-item fa fa-book"></i> {{ course.shortname }} - {{ course.fullname }}

View File

@ -124,7 +124,7 @@ export default {
},
methods: {
onHeaderHeightChange(newheight){
console.info("Height change event to",newheight);
//console.info("Height change event to",newheight);
this.$refs.main.style.height = `${newheight}px`;
}
},

View File

@ -84,6 +84,7 @@ class studyitem {
"conditions"=> new \external_value(PARAM_TEXT, 'conditions for completion'),
"slot" => new \external_value(PARAM_INT, 'slot in the study plan'),
"layer" => new \external_value(PARAM_INT, 'layer in the slot'),
"span" => new \external_value(PARAM_INT, 'how many periods the item spans'),
"course" => courseinfo::editor_structure(VALUE_OPTIONAL),
"badge" => badgeinfo::editor_structure(VALUE_OPTIONAL),
"continuation_id" => new \external_value(PARAM_INT, 'id of continued item'),
@ -110,6 +111,7 @@ class studyitem {
'conditions' => $this->r->conditions,
'slot' => $this->r->slot,
'layer' => $this->r->layer,
'span' => $this->r->span,
'continuation_id' => $this->r->continuation_id,
'connections' => [
"in" => [],
@ -332,6 +334,7 @@ class studyitem {
"completion" => new \external_value(PARAM_TEXT, 'completion state (incomplete|progress|completed|excellent)'),
"slot" => new \external_value(PARAM_INT, 'slot in the study plan'),
"layer" => new \external_value(PARAM_INT, 'layer in the slot'),
"span" => new \external_value(PARAM_INT, 'how many periods the item spans'),
"course" => courseinfo::user_structure(VALUE_OPTIONAL),
"badge" => badgeinfo::user_structure(VALUE_OPTIONAL),
"continuation" => self::link_structure(VALUE_OPTIONAL),
@ -352,6 +355,7 @@ class studyitem {
'completion' => completion::label($this->completion($userid)),
'slot' => $this->r->slot,
'layer' => $this->r->layer,
'span' => $this->r->span,
'connections' => [
"in" => [],
"out" => [],

View File

@ -366,11 +366,11 @@ ul.t-competency-list li {
}
.t-slot-drop.secondary {
min-height: 0px;
min-height: 3px;
}
.t-slot-drop.secondary.drop-allowed {
min-height: 12px;
min-height: 3px;
}
.t-slot-item.feedback {

View File

@ -147,21 +147,21 @@ print $OUTPUT->header();
<b-tab title="<?php t('toolbox')?>">
<ul class="t-toolbox">
<li><drag
type="filter"
: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="filter"
: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="filter"
:type="filterComponentType"
:data="{type: 'start'}"
@cut=""
><t-item-start></t-item-start><?php t("tool-start") ?>
@ -173,7 +173,7 @@ print $OUTPUT->header();
<ul class="t-badges">
<li v-for="b in badges"><img :src="b.imageurl" :alt="b.name"><drag
class="t-badge-drag"
type="filter"
:type="filterComponentType"
:data="{type: 'badge', badge: b}"
@cut=""
>{{b.name}}