{{ text.editmode_modules_hidden}}
{{ value.shortname }}
--{{ hover.type }}--
{{plantext.drophere}}
{{ text.periodspan
}}
{{ n }}
{{value.span}} {{
(value.span == 1)?text.period.toLowerCase():text.periods.toLowerCase()
}}
{{ text.desc }}
{{ text.rememberchoice }}
{{ text.desc }}
"6">
{{ text.hidewarning }}
`,
});
Vue.component('t-item', {
props: {
value: {
type: Object,
default() {
return null;
},
},
dummy: {
type: Boolean,
default() {
return false;
},
},
plan: {
type: Object, // Studyplan page
default() {
return null;
},
},
line: {
type: Object, // Studyplan page
default() {
return null;
},
},
page: {
type: Object, // Studyplan page
default() {
return null;
},
},
period: {
type: Object, // Studyplan page
default() {
return null;
},
},
maxspan: {
type: Number,
default() {
return 0;
},
},
},
data() {
return {
dragLine: null,
dragEventListener: null,
deleteMode: false,
conditionOptions: stringKeys.conditions,
text: strings.itemText,
showContext: false,
lines: [],
};
},
methods: {
dragStart(event) {
// Add line between start point and drag image
this.deleteMode = false;
let start = document.getElementById('studyitem-' + this.value.id);
let dragelement = document.getElementById('t-item-cdrag-' + this.value.id);
dragelement.style.position = 'fixed';
dragelement.style.left = event.position.x + 'px';
dragelement.style.top = event.position.y + 'px';
this.dragLine = new SimpleLine(start, dragelement, {
color: "#777",
gravity: {
start: LINE_GRAVITY,
end: LINE_GRAVITY,
},
});
// Add separate event listener to reposition mouse move
document.addEventListener("mousemove", this.onMouseMove);
},
dragEnd() {
if (this.dragLine !== null) {
this.dragLine.remove();
}
let dragelement = document.getElementById('t-item-cdrag-' + this.value.id);
dragelement.style.removeProperty('left');
dragelement.style.removeProperty('top');
dragelement.style.removeProperty('position');
document.removeEventListener("mousemove", this.onMouseMove);
},
onMouseMove: function(event) {
let dragelement = document.getElementById('t-item-cdrag-' + this.value.id);
dragelement.style.position = 'fixed';
dragelement.style.left = event.clientX + 'px';
dragelement.style.top = event.clientY + 'px';
// Line will follow automatically
},
onDrop(event) {
let fromid = event.data.id;
let toid = this.value.id;
this.redrawLines();
call([{
methodname: 'local_treestudyplan_connect_studyitems',
args: {'from_id': fromid, 'to_id': toid}
}])[0].then((response)=>{
let conn = {'id': response.id, 'from_id': response.from_id, 'to_id': response.to_id};
ItemEventBus.$emit("createdConnection", conn);
this.value.connections.in.push(conn);
return;
}).catch(notification.exception);
},
redrawLine(conn) {
const lineColor = "var(--success)";
const start = document.getElementById(`studyitem-${conn.from_id}`);
const end = document.getElementById(`studyitem-${conn.to_id}`);
// Delete old line
if (this.lines[conn.to_id]) {
this.lines[conn.to_id].remove();
delete this.lines[conn.to_id];
}
// Create a new line if the start and finish items are visible
if (start !== null && end !== null && isVisible(start) && isVisible(end)) {
this.lines[conn.to_id] = new SimpleLine(start, end, {
color: lineColor,
gravity: {
start: LINE_GRAVITY,
end: LINE_GRAVITY,
},
});
}
},
deleteLine(conn) {
const self = this;
call([{
methodname: 'local_treestudyplan_disconnect_studyitems',
args: {'from_id': conn.from_id, 'to_id': conn.to_id}
}])[0].then((response)=>{
if (response.success) {
this.removeLine(conn);
// Send disconnect event on message bus, so the connection on the other end can delete it too
ItemEventBus.$emit("connectionDisconnected", conn);
// Remove connection from our outgoing list
let index = self.value.connections.out.indexOf(conn);
self.value.connections.out.splice(index, 1);
}
return;
}).catch(notification.exception);
},
highlight(conn) {
if (this.lines[conn.to_id]) {
this.lines[conn.to_id].setConfig({color: "var(--danger)"});
}
},
normalize(conn) {
if (this.lines[conn.to_id]) {
this.lines[conn.to_id].setConfig({color: "var(--success)"});
}
},
updateItem() {
call([{
methodname: 'local_treestudyplan_edit_studyitem',
args: {
'id': this.value.id,
'conditions': this.value.conditions,
'continuation_id': this.value.continuation_id,
}
}])[0].catch(notification.exception);
},
doShowContext(event) {
if (this.hasContext) {
this.showContext = true;
event.preventDefault();
}
},
redrawLines() {
if (this.value.connections && this.value.connections.out) {
for (let i in this.value.connections.out) {
let conn = this.value.connections.out[i];
this.redrawLine(conn);
}
}
},
// EVENT LISTENERS
onCreatedConnection(conn) {
if (conn.from_id == this.value.id) {
this.value.connections.out.push(conn);
this.redrawLine(conn);
}
},
// Listener for the signal that a connection was removed by the outgoing item
onRemovedConnection(conn) {
if (this.value.connections && this.value.connections.out) {
for (let i in this.value.connections.in) {
let cin = this.value.connections.in[i];
if (conn.id == cin.id) {
self.value.connections.out.splice(i, 1);
}
}
}
},
// Listener for reposition events
// When an item in the list is repositioned, all lines need to be redrawn
onRePositioned() {
this.redrawLines();
},
// When an item is disPositioned - (temporarily) removed from the list,
// all connections need to be deleted.
onDisPositioned(reid) {
if (this.value.connections && this.value.connections.out) {
for (let i in this.value.connections.out) {
let conn = this.value.connections.out[i];
if (conn.to_id == reid) {
this.removeLine(conn);
}
}
}
},
// When an item is deleted
// all connections to/from that item need to be cleaned up
onItemDeleted(itemid) {
const self = this;
if (this.value.connections && this.value.connections.out) {
for (const i in this.value.connections.out) {
let conn = this.value.connections.out[i];
if (conn.to_id == itemid) {
self.removeLine(conn);
self.value.connections.out.splice(i, 1);
}
}
}
if (this.value.connections && this.value.connections.in) {
for (const i in this.value.connections.in) {
let conn = this.value.connections.in[i];
if (conn.from_id == itemid) {
self.value.connections.out.splice(i, 1);
}
}
}
},
onRedrawLines() {
this.redrawLines();
},
removeLine(conn) {
if (this.lines[conn.to_id]) {
this.lines[conn.to_id].remove();
delete this.lines[conn.to_id];
}
},
deleteItem() {
const self = this;
const msgparams = {
item: this.text['type_' + this.value.type].toLocaleLowerCase(),
name: (this.value.type == 'course') ? this.value.course.displayname : "",
line: (this.line) ? this.line.name : "",
period: (this.period) ? this.period.fullname : this.plan.name,
};
this.$bvModal.msgBoxConfirm(strformat(this.text.item_delete_message, msgparams), {
okVariant: 'danger',
okTitle: this.text.ok,
cancelTitle: this.text.cancel,
}).then(value => {
if (value) {
// Confirmed to delete.
call([{
methodname: 'local_treestudyplan_delete_studyitem',
args: {
'id': self.value.id,
}
}])[0].then((response) => {
if (response.success == true) {
self.$emit("deleted", {data: self.value});
}
return;
}).catch(notification.exception);
}
return;
}).catch(err => {
debug.console.error(err);
});
}
},
computed: {
hasConnectionsOut() {
return !(["finish"].includes(this.value.type));
},
hasConnectionsIn() {
return !(["start"].includes(this.value.type));
},
hasContext() {
return ['start', 'junction', 'finish'].includes(this.value.type);
}
},
created() {
// Add event listeners on the message bus
// But only if not in "dummy" mode - mode which is used for droplist placeholders
// Since an item is "fully made" with all references, not specifying dummy mode really messes things up
if (!this.dummy) {
// 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('createdConnection', this.onCreatedConnection);
// Listener for the signal that a connection was removed by the outgoing item
ItemEventBus.$on('removedConnection', this.onRemovedConnection);
// Listener for reposition events
// When an item in the list is repositioned, all lines need to be redrawn
ItemEventBus.$on('rePositioned', this.onRePositioned);
// When an item is disPositioned - (temporarily) removed from the list,
// all connections need to be deleted.
ItemEventBus.$on('disPositioned', this.onDisPositioned);
// When an item is deleted
// all connections to/from that item need to be cleaned up
ItemEventBus.$on('itemDeleted', this.onItemDeleted);
ItemEventBus.$on('redrawLines', this.onRedrawLines);
}
},
mounted() {
// Initialize connection lines when mounting
// But only if not in "dummy" mode - mode which is used for droplist placeholders
// Since an item is "fully made" with all references, not specifying dummy mode really messes things up
if (!this.dummy) {
this.redrawLines();
setTimeout(()=>{
ItemEventBus.$emit("rePositioned", this.value.id);
}, 10);
}
},
beforeDestroy() {
if (!this.dummy) {
for (let i in this.value.connections.out) {
let conn = this.value.connections.out[i];
this.removeLine(conn);
}
ItemEventBus.$emit("disPositioned", this.value.id);
// Remove event listeners
ItemEventBus.$off('createdConnection', this.onCreatedConnection);
ItemEventBus.$off('removedConnection', this.onRemovedConnection);
ItemEventBus.$off('rePositioned', this.onRePositioned);
ItemEventBus.$off('disPositioned', this.onDisPositioned);
ItemEventBus.$off('itemDeleted', this.onItemDeleted);
ItemEventBus.$off('redrawLines', this.onRedrawLines);
}
},
updated() {
if (!this.dummy) {
this.redrawLines();
}
},
template: `
`,
});
Vue.component('t-item-invalid', {
props: {
'value': {
type: Object,
default() {
return null;
},
},
},
data() {
return {
text: strings.invalid,
};
},
methods: {
},
template: `
`,
});
// TAG: Course item
Vue.component('t-item-course', {
props: {
value: {
type: Object,
default() {
return null;
},
},
plan: {
type: Object,
default() {
return null;
},
},
line: {
type: Object,
default() {
return null;
},
},
page: {
type: Object, // PAge data
default() {
return null;
}
},
period: {
type: Object, // Period data
default() {
return null;
}
},
maxspan: {
type: Number,
default() {
return 0;
}
},
},
data() {
return {
conditionOptions: stringKeys.conditions,
text: strings.itemCourseText,
};
},
computed: {
useItemConditions() {
if (this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useItemConditions !== undefined) {
return this.plan.aggregation_info.useItemConditions;
} else {
return false;
}
},
configurationState() {
if (this.hasGrades() || this.hasCompletions() || this.hasCompetencies()) {
return "t-configured-ok";
} else {
return "t-configured-alert";
}
},
configurationIcon() {
if (this.hasGrades() || this.hasCompletions() || this.hasCompetencies()) {
return "check";
} else {
return "exclamation-circle";
}
},
startdate() {
return formatDate(this.value.course.startdate);
},
enddate() {
if (this.value.course.enddate > 0) {
return formatDate(this.value.course.enddate);
} else {
return this.text.noenddate;
}
},
wwwroot() {
return Config.wwwroot;
}
},
methods: {
hasGrades() {
if (this.value.course.grades && this.value.course.grades.length > 0) {
for (const g of this.value.course.grades) {
if (g.selected) {
return true;
}
}
}
return false;
},
hasCompletions() {
if (this.value.course.completion && this.value.course.completion.conditions) {
for (const cgroup of this.value.course.completion.conditions) {
if (cgroup.items && cgroup.items.length > 0) {
return true;
}
}
}
return false;
},
hasCompetencies() {
if (this.value.course.competency && this.value.course.competency.competencies) {
return (this.value.course.competency.competencies.length > 0);
}
return false;
},
includeChanged(newValue, g) {
call([{
methodname: 'local_treestudyplan_include_grade',
args: {
'grade_id': g.id,
'item_id': this.value.id,
'include': newValue,
'required': g.required,
}
}])[0].catch(notification.exception);
},
requiredChanged(newValue, g) {
call([{
methodname: 'local_treestudyplan_include_grade',
args: {
'grade_id': g.id,
'item_id': this.value.id,
'include': g.selected,
'required': newValue,
}
}])[0].catch(notification.exception);
},
updateConditions() {
call([{
methodname: 'local_treestudyplan_edit_studyitem',
args: {
'id': this.value.id,
'conditions': this.value.conditions,
}
}])[0].catch(notification.exception);
},
},
template: `
{{ text.question }}
{{ text.course }}
{{ value.course.fullname }}
{{ value.course.shortname }}
{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}
{{ text.duration }}
{{ formatDuration(datechanger.coursespan)}}
{{ text.period }}
{{ period.fullname }} - {{ endperiod.fullname }}
{{ period.shortname }} - {{ endperiod.shortname }}
{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}
{{ text.duration }}
{{ formatDuration(datechanger.periodspan)}}
{{ text.warning }}
{{ text.course }}
{{ value.course.fullname }}
{{ value.course.shortname }}
{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}
{{ text.duration }}
{{ formatDuration(datechanger.coursespan)}}
{{ text.period }}
{{ period.fullname }} - {{ endperiod.fullname }}
{{ period.shortname }} - {{ endperiod.shortname }}
{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}
{{ text.duration }}
{{ formatDuration(datechanger.periodspan)}}
{{ value.course.fullname }}
{{ value.course.context.path.join(" / ")}} / {{value.course.shortname}}
{{text['coursetiming_'+value.course.timing]}}
{{ startdate }} - {{ enddate }}
{{ startdate }} - {{ enddate }}
- {{text.grade_include}}{{text.grade_require}}
-
| {{ text.aggregation_overall_all}}{{ text.aggregation_overall_any}} | |
| {{text.completion_not_configured}}!
{{text.configure_completion}} |
|
| {{ text.aggregation_all}}{{ text.aggregation_any}} {{cgroup.title}} | |
|---|---|
| {{ci.details.requirement}} | |
| {{text.competency_not_configured}}
{{text.configure_competency}} |
|||||||||
| {{text.heading}} | {{text.required}} | ||||||||
|---|---|---|---|---|---|---|---|---|---|
|
|
|||||||||
| {{text.heading}} | {{text.required}} | ||
|---|---|---|---|
| {{ cc.points }} {{ text.points }} | {{ text.required }} |
{{value.badge.description}}
-
{{ course.shortname }} - {{ course.fullname }}