Miqra-Engineering/moodle_local_treestudyplan
2
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases 4 Wiki Activity

Added period display to editor

Browse Source
This commit is contained in:
PMKuipers 2023-07-28 00:04:24 +02:00
parent 6436d0367f
commit 8b378a548d
2 changed files with 98 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
amd/src/studyplan-editor-components.js
View File

@ -1362,10 +1362,13 @@ export default {
</drop-list>
</div>
<div class='t-studyplan-content' v-else>
<!-- First paint the headings-->
<!-- Now paint the headings column -->
<div class='t-studyplan-headings'>
<s-studyline-header-heading></s-studyline-header-heading>
<t-studyline-heading v-for="(line,lineindex) in page.studylines"
:key="line.id"
@resize="headingresized(lineindex,$event)"
v-model="page.studylines[lineindex]"
:layers='countLineLayers(line)+1'
:class=" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )
@ -1376,6 +1379,15 @@ export default {
<!-- Next, paint all the cells in the scrollable -->
<div class="t-studyplan-scrollable" >
<div class="t-studyplan-timeline" :style="columns_stylerule">
<!-- add period information -->
<template v-for="(n,index) in (page.periods+1)">
<s-studyline-header-period
v-if="index > 0"
v-model="page.perioddesc[index-1]"
></s-studyline-header-period>
<div class="s-studyline-header-filter"></div>
</template>
<!-- Line by line add the items -->
<!-- The grid layout handles putting it in rows and columns -->
<template v-for="(line,lineindex) in page.studylines"
@ -1512,9 +1524,9 @@ export default {
};
},
created() {
// Listener for the signal that a new connection was made and needs to be drawn
// Sent by the incoming item - By convention, outgoing items are responsible for drawing the lines
ItemEventBus.$on('lineHeightChange', this.onLineHeightChange);
// Listener for the signal that a new connection was made and needs to be drawn
// Sent by the incoming item - By convention, outgoing items are responsible for drawing the lines
ItemEventBus.$on('lineHeightChange', this.onLineHeightChange);
},
computed: {
@ -1524,7 +1536,7 @@ export default {
// All layers for this line have the first slot send an update message on layer height change.
// When one of those updates is received, record the height and recalculate the total height of the
// header
if(this.$refs.mainEl && lineid == this.value.id){
if(this.$refs.main && lineid == this.value.id){
const items = document.querySelectorAll(
`.t-studyline-slot-0[data-studyline='${this.value.id}']`);
@ -1538,13 +1550,13 @@ export default {
});
const heightStyle=`${heightSum}px`;
this.$refs.mainEl.style.height = heightStyle;
this.$refs.main.style.height = heightStyle;
}
}
},
template: `
<div class="t-studyline t-studyline-heading "
:data-studyline="value.id" ref="mainEl"
:data-studyline="value.id" ref="main"
><div class="t-studyline-handle" :style="'background-color: ' + value.color"></div>
<div class="t-studyline-title">
<abbr v-b-tooltip.hover :title="value.name">{{ value.shortname }}</abbr>
@ -1658,11 +1670,12 @@ export default {
const self=this;
if(self.type == "gradable" && self.slotindex == 1){
self.resizeListener = new ResizeObserver(() => {
if(self.$refs.sizeElement){
const height = self.$refs.sizeElement.getBoundingClientRect().height;
ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, height);
if(self.$refs.main){
const size = self.$refs.main.getBoundingClientRect();
ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, size.height);
}
}).observe(self.$refs.sizeElement);
}).observe(self.$refs.main);
}
},
unmounted() {
@ -1812,7 +1825,7 @@ export default {
},
template: `
<div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ' ' + ((slotindex==0)?' t-studyline-firstcolumn ':' ')"
:data-studyline="line.id" ref="sizeElement"
:data-studyline="line.id" ref="main"
><drag v-if="item"
:key="item.id"

73
amd/src/treestudyplan-components.js
View File

@ -27,6 +27,8 @@ export default {
noenddate: "noenddate",
}
});
// Create new eventbus for interaction between item components
const ItemEventBus = new Vue();
Vue.component('s-studyplan-card', {
props: {
@ -103,5 +105,76 @@ export default {
</b-card>
`,
});
/*
* S-STUDYLINE-HEADER-HEADING
* The only reasing this is not a simple empty div, is the fact that the header height
* needs to match that of the period headers
*/
Vue.component('s-studyline-header-heading', {
props: {
},
data() {
return {
layerHeights: {}
};
},
created() {
// Listener for the signal that a new connection was made and needs to be drawn
// Sent by the incoming item - By convention, outgoing items are responsible for drawing the lines
ItemEventBus.$on('headerHeightChange', this.onHeaderHeightChange);
},
computed: {
},
methods: {
onHeaderHeightChange(newheight){
console.info("Height change event to",newheight);
this.$refs.main.style.height = `${newheight}px`;
}
},
template: `
<div class="s-studyline-header-heading" ref="main"></div>
`,
});
Vue.component('s-studyline-header-period', {
props: {
value: {
type: Object, // dict with layer as index
},
},
mounted() {
const self=this;
if(self.value.period == 1){
self.resizeListener = new ResizeObserver(() => {
if(self.$refs.main){
const size = self.$refs.main.getBoundingClientRect();
ItemEventBus.$emit('headerHeightChange', size.height);
}
}).observe(self.$refs.main);
}
},
unmounted() {
if(this.resizeListener) {
this.resizeListener.disconnect();
}
},
computed: {
},
data() {
return {
};
},
template: `
<div class="s-studyline-header-period" ref="main"
><abbr v-b-tooltip.hover :title="value.fullname">{{ value.shortname }}</abbr>
</div>
`,
});
}
};