diff --git a/amd/src/studyplan-editor-components.js b/amd/src/studyplan-editor-components.js
index f0015ac..b1e6c14 100644
--- a/amd/src/studyplan-editor-components.js
+++ b/amd/src/studyplan-editor-components.js
@@ -1,5 +1,7 @@
/*eslint no-var: "error"*/
/*eslint no-console: "off"*/
+/*eslint no-unused-vars: warn */
+/*eslint max-len: ["error", { "code": 160 }] */
/*eslint-disable no-trailing-spaces */
/*eslint-env es6*/
// Put this file in path/to/plugin/amd/src
@@ -1131,6 +1133,26 @@ export default {
}
},
methods: {
+ countLineLayers(line){
+ let maxLayer = -1;
+ for(let i = 0; i <= this.value.slots; i++){
+ const slot = line.slots[i];
+ // Determine the amount of used layers in a studyline slit
+ for(const ix in line.slots[i].competencies){
+ const item = line.slots[i].competencies[ix];
+ if(item.layer > maxLayer){
+ maxLayer = item.layer;
+ }
+ }
+ for(const ix in line.slots[i].filters){
+ const item = line.slots[i].filters[ix];
+ if(item.layer > maxLayer){
+ maxLayer = item.layer;
+ }
+ }
+ }
+ return maxLayer+1;
+ },
slotsempty(slots) {
if(Array.isArray(slots)){
let count = 0;
@@ -1353,32 +1375,36 @@ export default {
-
-
+
@@ -1594,6 +1620,11 @@ export default {
`,
});
+ /*
+ * During a redisign it was decided to have the studyline still get the entire array as a value,
+ * even though it only shows one drop slot for the layer it is in. This is to make repainting easier,
+ * since we modify the array for the layer we handle
+ */
Vue.component('t-studyline-slot', {
props: {
type : {
@@ -1608,8 +1639,11 @@ export default {
type: Object,
default(){ return null;},
},
+ layer : {
+ type: Number,
+ },
value: {
- type: Array,
+ type: Array, // dict with layer as index
default(){ return [];},
},
plan: {
@@ -1640,20 +1674,35 @@ export default {
}
},
computed: {
+ item(){
+ for(const itm of this.value){
+ if(itm.layer == this.layer){
+ return itm;
+ }
+ }
+ return null;
+ },
listtype() {
return this.type;
},
dragacceptlist(){
if(this.type == "gradable"){
- return ["course","competency","gradable-item"];
+ return ["course", "gradable-item"];
} else {
return ["filter", "filter-item"];
}
},
+ courseHoverDummy(){
+ return {course: this.hover.component};
+ }
},
data() {
return {
resizeListener: null,
+ hover: {
+ component:null,
+ type: null,
+ }
};
},
methods: {
@@ -1666,51 +1715,34 @@ export default {
},
dragacceptcomponent(){
if(this.type == "gradable"){
- return ["course","competency",];
+ return ["course",];
} else {
return ["filter",];
}
},
- onInsert(event) {
+ onDrop(event) {
+ this.hover.component = null;
+ this.hover.type = null;
+
const self = this;
if(self.dragacceptitem().includes(event.type)) {
let item = event.data;
- self.value.splice( event.index,0, item);
- self.afterReorder(self.value).done(function(){
+ // Perform layer update - set this slot and layer here
+ self.relocateStudyItem(item).done(()=>{
+ item.layer = this.layer;
+ item.slot = this.slotindex;
+ self.value.push(item);
self.$emit("input",self.value);
});
}
else if(self.dragacceptcomponent().includes(event.type) ){
- if(event.type == "competency"){
- call([{
- methodname: 'local_treestudyplan_add_studyitem',
- args: {
- "line_id": self.line.id,
- "slot" : self.slotindex,
- "type": 'competency',
- "details": {
- "competency_id": event.data.id,
- 'conditions':'',
- 'course_id':null,
- 'badge_id':null,
- 'continuation_id':null,
- }
- }
- }])[0].done((response) => {
- console.info('Add item response:', response);
- let item = response;
- self.value.splice(event.index, 0, item);
- self.afterReorder(self.value).done(function () {
- self.$emit("input", self.value);
- });
- }).fail(notification.exception);
- }
- else if(event.type == "course"){
+ if(event.type == "course"){
call([{
methodname: 'local_treestudyplan_add_studyitem',
args: {
"line_id": self.line.id,
"slot" : self.slotindex,
+ "layer" : self.layer,
"type": 'course',
"details": {
"competency_id": null,
@@ -1723,9 +1755,9 @@ export default {
}])[0].done((response) => {
console.info('Add item response:', response);
let item = response;
- self.value.splice(event.index, 0, item);
- self.afterReorder(self.value).done(function () {
- self.$emit("input", self.value);
+ self.relocateStudyItem(item).done(()=>{
+ self.value.push(item);
+ self.$emit("input",self.value);
});
}).fail(notification.exception);
}
@@ -1743,9 +1775,9 @@ export default {
}])[0].done((response) => {
console.info('Add item response:', response);
let item = response;
- self.value.splice(event.index, 0, item);
- self.afterReorder(self.value).done(function () {
- self.$emit("input", self.value);
+ self.relocateStudyItem(item).done(()=>{
+ self.value.push(item);
+ self.$emit("input",self.value);
});
}).fail(notification.exception);
}
@@ -1754,88 +1786,76 @@ export default {
onCut(event) {
const self=this;
let id = event.data.id;
-
for(let i = 0; i < self.value.length; i++){
if(self.value[i].id == id){
self.value.splice(i, 1); i--;
break; // just remove one
}
}
- this.afterReorder(self.value);
+ // Do something to signal that this item has been removed
this.$emit("input",this.value);
},
- onReorder(event) {
- const self=this;
- // apply list first
- event.apply(self.value);
- this.afterReorder(self.value);
- },
- afterReorder() {
- const self=this;
- // send the new order to the server
- let items = [];
- for(let idx in self.value)
- {
- self.value[idx].layer = idx;
- items.push({'id': self.value[idx].id,'layer': idx, 'slot': this.slotindex, 'line_id': this.line.id});
- }
+ relocateStudyItem(item){
+ const iteminfo = {'id': item.id, 'layer': this.layer, 'slot': this.slotindex, 'line_id': this.line.id};
return call([{
methodname: 'local_treestudyplan_reorder_studyitems',
- args: { 'items': items }
- }])[0].fail(notification.exception);
+ args: { 'items': [iteminfo] } // function was designed to relocate multiple items at once, hence the array
+ }])[0].fail(notification.exception);
},
- feedbackDummy(type,data){
- let item = {};
- item[type] = data;
- return item;
- }
+ onDragEnter(event){
+ this.hover.component = event.data;
+ this.hover.type = event.type;
+ },
+ onDragLeave(){
+ this.hover.component = null;
+ this.hover.type = null;
+ },
+
},
template: `
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
--{{ type }}--
-
-
-
+ :key="hover.type">--{{ hover.type }}--