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

Update

Browse Source
This commit is contained in:
PMKuipers 2024-02-20 20:40:18 +01:00
parent ed353540f0
commit f8b18d4d6e
8 changed files with 273 additions and 308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
amd/build/studyplan-report-components.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
amd/build/studyplan-report-components.min.js.map
View File

File diff suppressed because one or more lines are too long

260
amd/src/studyplan-report-components.js
View File

@ -13,16 +13,81 @@ import Debugger from './util/debugger';
import Config from 'core/config'; import Config from 'core/config';
import TSComponents from './treestudyplan-components'; import TSComponents from './treestudyplan-components';
const debug = new Debugger("treestudyplan-viewer");
// Make π available as a constant // Make π available as a constant
const π = Math.PI; const π = Math.PI;
// Gravity value for arrow lines - determines how much a line is pulled in the direction of the start/end before changing direction // Gravity value for arrow lines - determines how much a line is pulled in the direction of the start/end before changing direction
const LINE_GRAVITY = 1.3; const LINE_GRAVITY = 1.3;
/**
* Retrieve condition headers
* @param {Object} item
*/
function conditionHeaders(item) {
const course = item.course;
const list = [];
if (course.completion) {
for (const cmp of course.competencies) {
list.push({
name: cmp.title,
});
}
} else if(course.completion) {
for (const cnd of course.completion.conditions) {
for (const itm of cnd.items) {
list.push({
name: itm.title,
});
}
}
} else if(course.grades) {
for(const g of course.grades) {
if (g.selected) {
debug.info("...included");
list.push({
name: g.name,
});
}
}
}
debug.info("Returning list",list);
return list;
}
/**
* Retrieve conditions
* @param {Object} item
*/
function conditions(item) {
const course = item.course;
const list = [];
if (course.completion) {
for (const cmp of course.competencies) {
list.push(cmp);
}
} else if(course.completion) {
for (const cnd of course.completion.conditions) {
for (const itm of cnd.items) {
list.push(itm);
}
}
} else if(course.grades) {
for(const g of course.grades) {
if (g.selected) {
list.push(g);
}
}
}
return list;
}
export default { export default {
install(Vue/*,options*/){ install(Vue/*,options*/){
Vue.use(TSComponents); Vue.use(TSComponents);
let debug = new Debugger("treestudyplan-viewer");
let strings = load_strings({ let strings = load_strings({
report: { report: {
@ -83,11 +148,6 @@ export default {
created() { created() {
this.loadStudents(); this.loadStudents();
}, },
computed: {
sortedstudents(){
return this.students;
}
},
watch:{ watch:{
structure: { structure: {
immediate: true, immediate: true,
@ -139,6 +199,37 @@ export default {
} }
} }
}, },
computed: {
sortedstudents(){
return this.students;
},
resultColCount(){
let count = 0;
for (const period of this.structure.periods) {
const pid = period.period.id;
if (!this.expansioninfo.periods[pid].expanded) {
// This period is not expanded. Just one
count += 1;
} else {
for (const line of period.lines) {
const lid = line.line.id;
if (!this.expansioninfo.lines[pid][lid]) {
count +=1;
} else {
for (const item of line.items) {
if (!this.expansioninfo.items[item.id]) {
count += 1;
} else {
count += 1 + conditions(item).length;
}
}
}
}
}
}
return count;
}
},
methods: { methods: {
loadStudents() { loadStudents() {
const self = this; const self = this;
@ -195,32 +286,30 @@ export default {
} else { } else {
this.expansioninfo[parm][id].expanded = val; this.expansioninfo[parm][id].expanded = val;
} }
},
}
}, },
template: ` template: `
<div> <table class='q-studyplanreport'>
<q-header <q-header
:sorting='sorting' :sorting='sorting'
:structure='structure' :structure='structure'
:expansion='expansioninfo' :expansion='expansioninfo'
@expansion='expansionChanged' @expansion='expansionChanged'
></q-header> ></q-header>
<div class='q-scrolly'> <template v-for="group in sortedstudents">
<template v-for="group in sortedstudents"> <q-groupheading v-if="group.users" :label="group.label" :groupinfo="groupinfo[group.label]"></q-groupheading>
<q-groupheading v-if="group.users" :label="group.label" :groupinfo="groupinfo[group.label]"></q-groupheading> <template v-if='group.users && groupinfo[group.label].expand'>
<template v-if='group.users && groupinfo[group.label].expand'> <q-studentresults v-for="student in group.users"
<q-studentresults v-for="student in group.users" :student='student'
:student='student' :structure='structure'
:structure='structure' :results='studentresults[student.id].results'
:results='studentresults[student.id].results' :loading='studentresults[student.id].loading'
:loading='studentresults[student.id].loading' :expansion='expansioninfo'
:expansion='expansioninfo' ></q-studentresults>
></q-studentresults>
</template>
</template> </template>
</div> </template>
</div> </table>
`, `,
}); });
@ -245,38 +334,12 @@ export default {
}, },
methods: { methods: {
conditions(item) { conditions(item) {
const course = item.course; return conditionHeaders(item);
const list = [];
debug.info("Determining conditions", course);
if (course.completion) {
debug.info("Has Competencies");
for (const cmp of course.competencies) {
list.push({
name: cmp.title,
});
}
} else if(course.completion) {
debug.info("Has Core completion");
for (const cnd of course.completion.conditions) {
for (const itm of cnd.items) {
list.push({
name: itm.title,
});
}
}
} else if(course.grades) {
debug.info("Has selected grades");
for (const g of course.grades) {
list.push({
name: g.name,
});
}
}
return list;
}, },
colspanPeriod(period) { colspanPeriod(period) {
if (this.expansion.periods[period.id].expanded) { const pid = period.period.id;
debug.info("Checking period expansion",period,this.expansion.periods);
if (this.expansion.periods[pid].expanded) {
let sum = 0; let sum = 0;
for (const l of period.lines) { for (const l of period.lines) {
sum += this.colspanLine(period,l); sum += this.colspanLine(period,l);
@ -287,7 +350,10 @@ export default {
} }
}, },
colspanLine(period,line) { colspanLine(period,line) {
if (this.expansion.lines[period.id][line.id].expanded) { const pid = period.period.id;
const lid = line.line.id;
if (this.expansion.lines[pid][lid].expanded) {
let sum = 0; let sum = 0;
for (const i of line.items) { for (const i of line.items) {
sum += this.colspanItem(i); sum += this.colspanItem(i);
@ -319,39 +385,39 @@ export default {
template: ` template: `
<thead class='q-header'> <thead class='q-header'>
<tr> <!-- period heading --> <tr> <!-- period heading -->
<th rowspan='3' class='q-studentname'><span>{{text.students}}</span></th> <th rowspan='4' class='q-studentname'><span>{{text.students}}</span></th>
<th v-for="p in structure.periods" <th v-for="p in structure.periods"
class='q-period-heading' class='q-period-heading'
:colspan='colspanPeriod(p)' :colspan='colspanPeriod(p)'
:rowspan='(expansion.periods[p.period.id].expanded)?1:3' :rowspan='(expansion.periods[p.period.id].expanded)?1:4'
><a v-if="expansion.periods[p.period.id].expanded" ><a v-if="expansion.periods[p.period.id].expanded"
href='#' @click.prevent="$emit('expansion','periods',p.period.id,false);" href='#' @click.prevent="$emit('expansion','periods',p.period.id,false);"
><i class='fa fa-minus-square'></i></a ><i class='fa fa-minus-square'></i></a
><a v-else ><a v-else
href='#' @click.prevent="$emit('expansion','periods',p.period.id,true);" href='#' @click.prevent="$emit('expansion','periods',p.period.id,true);"
><i class='fa fa-plus-square'></i></a ><i class='fa fa-plus-square'></i></a
>{{ p.period.fullname}}< >&nbsp;{{ p.period.fullname}}
/th> </th>
</tr> </tr>
<tr> <!-- line heading --> <tr> <!-- line heading -->
<template v-for="p in structure.periods"> <template v-for="p in structure.periods">
<template v-if="expansion.periods[p.period.id].expanded"> <template v-if="expansion.periods[p.period.id].expanded">
<th v-for='l in p.lines" <th v-for="l in p.lines"
class='q-line-heading' class='q-line-heading'
:colspan="colspanLine(p,l)" :colspan="colspanLine(p,l)"
><span v-html="l.line.shortname"></span ><span v-html="l.line.shortname"></span
><th> ></th>
</template> </template>
</template> </template>
</tr> </tr>
<tr> <!-- item heading --> <tr> <!-- item heading -->
<template v-for="p in structure.periods"> <template v-for="p in structure.periods">
<template v-if="expansion.periods[p.period.id].expanded"> <template v-if="expansion.periods[p.period.id].expanded">
<template v-for='l in p.lines"> <template v-for="l in p.lines">
<template v-if="expansion.lines[p.period.id][l.line.id].expanded"> <template v-if="expansion.lines[p.period.id][l.line.id].expanded">
<th v-for="item in l.items" <th v-for="item in l.items"
class='q-item-heading' :class="'q-item-heading ' + ((expansion.items[item.id].expanded)?'expanded':'collapsed')"
:colspan="colspanitem(item)" :colspan="colspanItem(item)"
:rowspan='(expansion.items[item.id].expanded)?1:2' :rowspan='(expansion.items[item.id].expanded)?1:2'
><a v-if="expansion.items[item.id].expanded" ><a v-if="expansion.items[item.id].expanded"
href='#' @click.prevent="$emit('expansion','items',item.id,false);" href='#' @click.prevent="$emit('expansion','items',item.id,false);"
@ -359,8 +425,8 @@ export default {
><a v-else ><a v-else
href='#' @click.prevent="$emit('expansion','items',item.id,true);" href='#' @click.prevent="$emit('expansion','items',item.id,true);"
><i class='fa fa-plus-square'></i></a ><i class='fa fa-plus-square'></i></a
><span v-html="item.course.displayname"></span>< >&nbsp;<span v-html="item.course.displayname"></span
/th> ></th>
</template> </template>
</template> </template>
</template> </template>
@ -369,13 +435,12 @@ export default {
<tr> <!-- condition heading --> <tr> <!-- condition heading -->
<template v-for="p in structure.periods"> <template v-for="p in structure.periods">
<template v-if="expansion.periods[p.period.id].expanded"> <template v-if="expansion.periods[p.period.id].expanded">
<template v-for='l in p.lines"> <template v-for="l in p.lines">
<template v-if="expansion.lines[p.period.id][l.line.id].expanded"> <template v-if="expansion.lines[p.period.id][l.line.id].expanded">
<template v-for="item in l.items"> <template v-for="item in l.items">
<th class='q-condition-heading overall
>{{ text.overall }}<
/th>
<template v-if="expansion.items[item.id].expanded"> <template v-if="expansion.items[item.id].expanded">
<th class='q-condition-heading overall'
><span>{{ text.overall }}</span></th>
<th v-for="c in conditions(item)" <th v-for="c in conditions(item)"
class='q-condition-heading' class='q-condition-heading'
><span v-html="c.name"></span ><span v-html="c.name"></span
@ -407,9 +472,9 @@ export default {
methods: { methods: {
}, },
template: ` template: `
<div class='q-groupheading'> <tr class='q-groupheading'>
</div> </tr>
`, `,
}); });
@ -453,7 +518,10 @@ export default {
list.push(newitm); list.push(newitm);
} }
return list; return list;
} },
conditions(item) {
return conditions(item);
},
}, },
/* https://css-tricks.com/position-sticky-and-table-headers/ */ /* https://css-tricks.com/position-sticky-and-table-headers/ */
/* TODO: Rework below to make use of tables. Use <Thead> as main element. Then create multiple <tr> as needed for the headers. /* TODO: Rework below to make use of tables. Use <Thead> as main element. Then create multiple <tr> as needed for the headers.
@ -461,19 +529,19 @@ export default {
*/ */
template: ` template: `
<tr class='q-student-results'> <tr class='q-student-results'>
<th class='q-studentname'><span>{{student.firstname}} {{student.lastname}}</span></th> <td class='q-studentname'><span>{{student.firstname}} {{student.lastname}}</span></td>
<template v-for="p in structure.periods"> <template v-for="p in structure.periods">
<template v-if="expansion.periods[p.period.id].expanded"> <template v-if="expansion.periods[p.period.id].expanded">
<template v-for='l in p.lines"> <template v-for="l in p.lines">
<template v-if="expansion.lines[p.period.id][l.line.id].expanded"> <template v-if="expansion.lines[p.period.id][l.line.id].expanded">
<template v-for="item in useritems(l)"> <template v-for="item in useritems(l)">
<td class='q-result overall <td class='q-result overall'
><q-courseresult ><q-courseresult
:item="item" :item="item"
:student="student" :student="student"
:loading="loading" :loading="loading"
></q-courseresult>< ></q-courseresult
/td> ></td>
<template v-if="expansion.items[item.id].expanded"> <template v-if="expansion.items[item.id].expanded">
<td v-for="(c,idx) in conditions(item)" <td v-for="(c,idx) in conditions(item)"
class='q-result' class='q-result'
@ -482,8 +550,8 @@ export default {
:conditionidx="idx" :conditionidx="idx"
:student="student" :student="student"
:loading="loading" :loading="loading"
></q-conditionresult>< ></q-conditionresult
/td> ></td>
</template> </template>
</template> </template>
</template> </template>
@ -546,22 +614,22 @@ export default {
methods: { methods: {
}, },
template: ` template: `
<div class='q-courseresult'> <span class='q-courseresult'>
<template v-if="loading"> <template v-if="loading">
<div class="spinner-border spinner-border-sm text-info" role="status"></div> <div class="spinner-border spinner-border-sm text-info" role="status"></div>
</template> </template>
<template v-else-if='!item.course.enrolled'> <template v-else-if='!item.course.enrolled'>
<i v-b-popover.top <i v-b-popover.top
class="r-course-result fa fa-exclamation-triangle t-not-enrolled-alert" class="fa fa-exclamation-triangle t-not-enrolled-alert"
:title="text.student_not_tracked"></i> :title="text.student_not_tracked"></i>
</template> </template>
<template v-else> <template v-else>
<i v-b-popover.top <i v-b-popover.top
:class="'r-course-result fa fa-'+completion_icon+ :class="'fa fa-'+completion_icon+
' r-completion-'+item.completion" ' r-completion-'+item.completion"
:title="text['completion_'+item.completion]"></i> :title="text['completion_'+item.completion]"></i>
</template> </template>
</div> </span>
`, `,
}); });
@ -588,24 +656,7 @@ export default {
}, },
computed: { computed: {
conditions() { conditions() {
const course = this.item.course; return conditions(this.item);
const list = [];
debug.info("Determining conditions", course);
if (course.completion) {
debug.info("Has Competencies");
return course.competencies;
} else if(course.completion) {
debug.info("Has Core completion");
const list = [];
for (const cnd of course.completion.conditions) {
for (const itm of cnd.items) {
list.push(itm);
}
}
return list;
} else if(course.grades) {
return course.grades;
}
}, },
condition() { condition() {
if (this.conditionidx >= 0 && this.conditionidx < this.conditions.length) { if (this.conditionidx >= 0 && this.conditionidx < this.conditions.length) {
@ -645,21 +696,22 @@ export default {
}, },
// TODO: Show actual grades when relevant at all (don;t forget the grade point completion requirement) // TODO: Show actual grades when relevant at all (don;t forget the grade point completion requirement)
template: ` template: `
<div class='q-conditionresult'> <span class='q-conditionresult'>
<template v-if="loading"> <template v-if="loading">
<div class="spinner-border spinner-border-sm text-info" role="status"></div> <div class="spinner-border spinner-border-sm text-info" role="status"></div>
</template> </template>
<template v-else-if='!item.course.enrolled'> <template v-else-if='!item.course.enrolled'>
<i v-b-popover.top <i v-b-popover.top
class="r-course-result fa fa-exclamation-triangle t-not-enrolled-alert" class="fa fa-exclamation-triangle t-not-enrolled-alert"
:title="text.student_not_tracked"></i> :title="text.student_not_tracked"></i>
</template> </template>
<template v-else>
<i v-b-popover.top <i v-b-popover.top
:class="'r-course-result fa fa-'+completion_icon(item.completion)+ :class="'fa fa-'+completion_icon(item.completion)+
' r-completion-'+item.completion" ' r-completion-'+item.completion"
:title="text['completion_'+item.completion]"></i> :title="text['completion_'+item.completion]"></i>
</template> </template>
</div> </span>
`, `,
}); });

116
css/devstyles.css
View File

@ -1578,12 +1578,12 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan { .path-local-treestudyplan {
font: inherit; font: inherit;
} }
.path-local-treestudyplan table.studyplanreport {
table-layout: fixed;
}
.path-local-treestudyplan .q-header, .path-local-treestudyplan .q-header,
.path-local-treestudyplan .q-student-results { .path-local-treestudyplan .q-student-results {
background-color: white; background-color: white;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
} }
.path-local-treestudyplan .q-header .q-period-heading, .path-local-treestudyplan .q-header .q-period-heading,
.path-local-treestudyplan .q-header .q-line-heading, .path-local-treestudyplan .q-header .q-line-heading,
@ -1601,26 +1601,6 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan .q-student-results .q-line-results, .path-local-treestudyplan .q-student-results .q-line-results,
.path-local-treestudyplan .q-student-results .q-item-results, .path-local-treestudyplan .q-student-results .q-item-results,
.path-local-treestudyplan .q-student-results .q-condition-results { .path-local-treestudyplan .q-student-results .q-condition-results {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.path-local-treestudyplan .q-header .q-period-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-line-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-item-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-condition-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-period-results:not(:last-child),
.path-local-treestudyplan .q-header .q-line-results:not(:last-child),
.path-local-treestudyplan .q-header .q-item-results:not(:last-child),
.path-local-treestudyplan .q-header .q-condition-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-period-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-line-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-item-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-condition-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-period-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-line-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-item-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-condition-results:not(:last-child) {
border-right: 1px solid gray; border-right: 1px solid gray;
} }
.path-local-treestudyplan .q-header .q-period-heading .q-header-title, .path-local-treestudyplan .q-header .q-period-heading .q-header-title,
@ -1641,93 +1621,69 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan .q-student-results .q-condition-results .q-header-title { .path-local-treestudyplan .q-student-results .q-condition-results .q-header-title {
padding: 0.5rem; padding: 0.5rem;
} }
.path-local-treestudyplan .q-header .q-period-heading .q-header-details,
.path-local-treestudyplan .q-header .q-period-heading .q-result-details,
.path-local-treestudyplan .q-header .q-line-heading .q-header-details,
.path-local-treestudyplan .q-header .q-line-heading .q-result-details,
.path-local-treestudyplan .q-header .q-item-heading .q-header-details,
.path-local-treestudyplan .q-header .q-item-heading .q-result-details,
.path-local-treestudyplan .q-header .q-condition-heading .q-header-details,
.path-local-treestudyplan .q-header .q-condition-heading .q-result-details,
.path-local-treestudyplan .q-header .q-period-results .q-header-details,
.path-local-treestudyplan .q-header .q-period-results .q-result-details,
.path-local-treestudyplan .q-header .q-line-results .q-header-details,
.path-local-treestudyplan .q-header .q-line-results .q-result-details,
.path-local-treestudyplan .q-header .q-item-results .q-header-details,
.path-local-treestudyplan .q-header .q-item-results .q-result-details,
.path-local-treestudyplan .q-header .q-condition-results .q-header-details,
.path-local-treestudyplan .q-header .q-condition-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-period-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-period-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-line-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-line-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-item-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-item-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-condition-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-condition-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-period-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-period-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-line-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-line-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-item-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-item-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-condition-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-condition-results .q-result-details {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border-top: 1px solid green;
}
.path-local-treestudyplan .q-header .q-result, .path-local-treestudyplan .q-header .q-result,
.path-local-treestudyplan .q-student-results .q-result { .path-local-treestudyplan .q-student-results .q-result {
height: 2rem; height: 2rem;
display: flex;
justify-content: center;
padding-top: 0.25rem; padding-top: 0.25rem;
} }
.path-local-treestudyplan .q-header, .path-local-treestudyplan .q-header,
.path-local-treestudyplan .q-student-results { .path-local-treestudyplan .q-student-results {
/*.q-line-heading > .q-header-title,*/ /*.q-line-heading > .q-header-title,*/
} }
.path-local-treestudyplan .q-header .q-item-heading > .q-header-title, .path-local-treestudyplan .q-header .q-item-heading.collapsed,
.path-local-treestudyplan .q-header .q-condition-heading, .path-local-treestudyplan .q-header .q-condition-heading,
.path-local-treestudyplan .q-student-results .q-item-heading > .q-header-title, .path-local-treestudyplan .q-student-results .q-item-heading.collapsed,
.path-local-treestudyplan .q-student-results .q-condition-heading { .path-local-treestudyplan .q-student-results .q-condition-heading {
width: 2rem; width: 2rem;
writing-mode: vertical-lr; writing-mode: vertical-lr;
text-orientation: sideways; text-orientation: sideways;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.path-local-treestudyplan .q-header .q-line-heading > .q-header-title, .path-local-treestudyplan .q-header .q-period-heading,
.path-local-treestudyplan .q-student-results .q-line-heading > .q-header-title { .path-local-treestudyplan .q-header .q-line-heading,
.path-local-treestudyplan .q-header .q-item-heading,
.path-local-treestudyplan .q-header .q-condition-heading,
.path-local-treestudyplan .q-student-results .q-period-heading,
.path-local-treestudyplan .q-student-results .q-line-heading,
.path-local-treestudyplan .q-student-results .q-item-heading,
.path-local-treestudyplan .q-student-results .q-condition-heading {
vertical-align: top;
}
.path-local-treestudyplan .q-header .q-line-heading,
.path-local-treestudyplan .q-student-results .q-line-heading {
height: fit-content; height: fit-content;
} }
.path-local-treestudyplan .q-header .q-item-heading > .q-item-heading, .path-local-treestudyplan .q-header .q-item-heading,
.path-local-treestudyplan .q-student-results .q-item-heading > .q-item-heading { .path-local-treestudyplan .q-student-results .q-item-heading {
height: 6rem; height: 6rem;
} }
.path-local-treestudyplan .q-header .q-condition-heading, .path-local-treestudyplan .q-header .q-condition-heading,
.path-local-treestudyplan .q-student-results .q-condition-heading { .path-local-treestudyplan .q-student-results .q-condition-heading {
text-align: center;
}
.path-local-treestudyplan .q-header .q-condition-heading span,
.path-local-treestudyplan .q-student-results .q-condition-heading span {
height: 8rem; height: 8rem;
white-space: nowrap;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
.path-local-treestudyplan .q-result {
text-align: center;
vertical-align: middle;
border-right: 1px solid gray;
} }
.path-local-treestudyplan .q-studentname { .path-local-treestudyplan .q-studentname {
padding: 0.5em; padding: 0.5em;
border-right: 2px solid grey; border-right: 2px solid grey;
width: 20rem; width: 20rem;
} }
.path-local-treestudyplan .q-studentname.heading { .path-local-treestudyplan .q-courseresult i.fa,
font-weight: bold; .path-local-treestudyplan .q-conditionresult i.fa {
vertical-align: bottom; font-size: 21px;
display: flex; vertical-align: middle;
}
.path-local-treestudyplan .q-studentname.heading span {
align-self: flex-end;
}
.path-local-treestudyplan .q-scrolly {
overflow-y: auto;
max-height: 300rem;
} }
.path-local-treestudyplan .b-modal-justify-footer-between .modal-footer, .path-local-treestudyplan .b-modal-justify-footer-between .modal-footer,

5
lang/en/local_treestudyplan.php
View File

@ -459,4 +459,7 @@ $string["setting_premium_key"] = 'Activation key';
$string["settingdesc_premium_key"] = 'Paste the premium key you received in the box above.'; $string["settingdesc_premium_key"] = 'Paste the premium key you received in the box above.';
$string["premiumfeature:morestudyplans"] = 'Creating more than 5 studyplans in a single category is a premium feature.'; $string["premiumfeature:morestudyplans"] = 'Creating more than 5 studyplans in a single category is a premium feature.';
$string["premiumfeature:morecategories"] = 'Creating studyplans in more than 20 categories is a premium feature.'; $string["premiumfeature:morecategories"] = 'Creating studyplans in more than 20 categories is a premium feature.';
$string["overall"] = 'Course';
$string["studyplan_report"] = 'Studyplan result overview';

4
lang/nl/local_treestudyplan.php
View File

@ -459,4 +459,6 @@ $string["setting_premium_key"] = 'Activation key';
$string["settingdesc_premium_key"] = 'Premium activation key'; $string["settingdesc_premium_key"] = 'Premium activation key';
$string["premiumfeature:morestudyplans"] = 'Meer dan 5 studieplannen in één categorie aanmaken kan alleen met premium toegang.'; $string["premiumfeature:morestudyplans"] = 'Meer dan 5 studieplannen in één categorie aanmaken kan alleen met premium toegang.';
$string["premiumfeature:morecategories"] = 'In meer dan 20 categoriën een studieplan aanmaken kan alleen met premium toegang.'; $string["premiumfeature:morecategories"] = 'In meer dan 20 categoriën een studieplan aanmaken kan alleen met premium toegang.';
$string["overall"] = 'Cursus voltooid';
$string["studyplan_report"] = 'Studieplan resultatenoverzicht';

76
scss/studyplan-report.scss
View File

@ -1,45 +1,28 @@
.path-local-treestudyplan { .path-local-treestudyplan {
font: inherit; font: inherit;
table.studyplanreport {
table-layout: fixed;
}
.q-header, .q-student-results { .q-header, .q-student-results {
background-color: white; background-color: white;
display: flex;
flex-direction: row;;
flex-wrap: nowrap;
.q-period-heading, .q-line-heading, .q-item-heading, .q-condition-heading, .q-period-heading, .q-line-heading, .q-item-heading, .q-condition-heading,
.q-period-results, .q-line-results, .q-item-results, .q-condition-results .q-period-results, .q-line-results, .q-item-results, .q-condition-results
{ {
display: flex;
flex-direction: column;
flex-grow: 1;
&:not(:last-child) { border-right: 1px solid gray;
border-right: 1px solid gray;
}
.q-header-title { .q-header-title {
padding: 0.5rem; padding: 0.5rem;
} }
.q-header-details,
.q-result-details {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border-top: 1px solid green;
}
} }
.q-result { .q-result {
height: 2rem; height: 2rem;
display: flex;
justify-content: center;
padding-top: 0.25rem; padding-top: 0.25rem;
} }
@ -47,47 +30,60 @@
.q-header, .q-student-results { .q-header, .q-student-results {
/*.q-line-heading > .q-header-title,*/ /*.q-line-heading > .q-header-title,*/
.q-item-heading > .q-header-title, .q-item-heading.collapsed,
.q-condition-heading { .q-condition-heading {
width: 2rem; width: 2rem;
writing-mode: vertical-lr; writing-mode: vertical-lr;
text-orientation: sideways; text-orientation: sideways;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.q-line-heading > .q-header-title { .q-period-heading,
.q-line-heading,
.q-item-heading,
.q-condition-heading {
vertical-align: top;
}
.q-line-heading {
height: fit-content; height: fit-content;
} }
.q-item-heading > .q-item-heading { .q-item-heading {
height: 6rem; height: 6rem;
} }
.q-condition-heading { .q-condition-heading {
height: 8rem; text-align: center;
span {
height: 8rem;
white-space: nowrap;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
} }
} }
.q-result {
text-align: center;
vertical-align: middle;
border-right: 1px solid gray;
}
.q-studentname { .q-studentname {
padding: 0.5em; padding: 0.5em;
&.heading {
font-weight: bold;
vertical-align: bottom;
display: flex;
span {
align-self:flex-end;
}
}
border-right: 2px solid grey; border-right: 2px solid grey;
width: 20rem; width: 20rem;
} }
.q-scrolly {
overflow-y: auto; .q-courseresult,
max-height: 300rem; .q-conditionresult{
i.fa {
font-size: 21px;
vertical-align: middle;
}
} }
} }

116
styles.css
View File

@ -1578,12 +1578,12 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan { .path-local-treestudyplan {
font: inherit; font: inherit;
} }
.path-local-treestudyplan table.studyplanreport {
table-layout: fixed;
}
.path-local-treestudyplan .q-header, .path-local-treestudyplan .q-header,
.path-local-treestudyplan .q-student-results { .path-local-treestudyplan .q-student-results {
background-color: white; background-color: white;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
} }
.path-local-treestudyplan .q-header .q-period-heading, .path-local-treestudyplan .q-header .q-period-heading,
.path-local-treestudyplan .q-header .q-line-heading, .path-local-treestudyplan .q-header .q-line-heading,
@ -1601,26 +1601,6 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan .q-student-results .q-line-results, .path-local-treestudyplan .q-student-results .q-line-results,
.path-local-treestudyplan .q-student-results .q-item-results, .path-local-treestudyplan .q-student-results .q-item-results,
.path-local-treestudyplan .q-student-results .q-condition-results { .path-local-treestudyplan .q-student-results .q-condition-results {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.path-local-treestudyplan .q-header .q-period-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-line-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-item-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-condition-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-period-results:not(:last-child),
.path-local-treestudyplan .q-header .q-line-results:not(:last-child),
.path-local-treestudyplan .q-header .q-item-results:not(:last-child),
.path-local-treestudyplan .q-header .q-condition-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-period-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-line-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-item-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-condition-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-period-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-line-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-item-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-condition-results:not(:last-child) {
border-right: 1px solid gray; border-right: 1px solid gray;
} }
.path-local-treestudyplan .q-header .q-period-heading .q-header-title, .path-local-treestudyplan .q-header .q-period-heading .q-header-title,
@ -1641,93 +1621,69 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan .q-student-results .q-condition-results .q-header-title { .path-local-treestudyplan .q-student-results .q-condition-results .q-header-title {
padding: 0.5rem; padding: 0.5rem;
} }
.path-local-treestudyplan .q-header .q-period-heading .q-header-details,
.path-local-treestudyplan .q-header .q-period-heading .q-result-details,
.path-local-treestudyplan .q-header .q-line-heading .q-header-details,
.path-local-treestudyplan .q-header .q-line-heading .q-result-details,
.path-local-treestudyplan .q-header .q-item-heading .q-header-details,
.path-local-treestudyplan .q-header .q-item-heading .q-result-details,
.path-local-treestudyplan .q-header .q-condition-heading .q-header-details,
.path-local-treestudyplan .q-header .q-condition-heading .q-result-details,
.path-local-treestudyplan .q-header .q-period-results .q-header-details,
.path-local-treestudyplan .q-header .q-period-results .q-result-details,
.path-local-treestudyplan .q-header .q-line-results .q-header-details,
.path-local-treestudyplan .q-header .q-line-results .q-result-details,
.path-local-treestudyplan .q-header .q-item-results .q-header-details,
.path-local-treestudyplan .q-header .q-item-results .q-result-details,
.path-local-treestudyplan .q-header .q-condition-results .q-header-details,
.path-local-treestudyplan .q-header .q-condition-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-period-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-period-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-line-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-line-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-item-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-item-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-condition-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-condition-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-period-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-period-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-line-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-line-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-item-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-item-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-condition-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-condition-results .q-result-details {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border-top: 1px solid green;
}
.path-local-treestudyplan .q-header .q-result, .path-local-treestudyplan .q-header .q-result,
.path-local-treestudyplan .q-student-results .q-result { .path-local-treestudyplan .q-student-results .q-result {
height: 2rem; height: 2rem;
display: flex;
justify-content: center;
padding-top: 0.25rem; padding-top: 0.25rem;
} }
.path-local-treestudyplan .q-header, .path-local-treestudyplan .q-header,
.path-local-treestudyplan .q-student-results { .path-local-treestudyplan .q-student-results {
/*.q-line-heading > .q-header-title,*/ /*.q-line-heading > .q-header-title,*/
} }
.path-local-treestudyplan .q-header .q-item-heading > .q-header-title, .path-local-treestudyplan .q-header .q-item-heading.collapsed,
.path-local-treestudyplan .q-header .q-condition-heading, .path-local-treestudyplan .q-header .q-condition-heading,
.path-local-treestudyplan .q-student-results .q-item-heading > .q-header-title, .path-local-treestudyplan .q-student-results .q-item-heading.collapsed,
.path-local-treestudyplan .q-student-results .q-condition-heading { .path-local-treestudyplan .q-student-results .q-condition-heading {
width: 2rem; width: 2rem;
writing-mode: vertical-lr; writing-mode: vertical-lr;
text-orientation: sideways; text-orientation: sideways;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.path-local-treestudyplan .q-header .q-line-heading > .q-header-title, .path-local-treestudyplan .q-header .q-period-heading,
.path-local-treestudyplan .q-student-results .q-line-heading > .q-header-title { .path-local-treestudyplan .q-header .q-line-heading,
.path-local-treestudyplan .q-header .q-item-heading,
.path-local-treestudyplan .q-header .q-condition-heading,
.path-local-treestudyplan .q-student-results .q-period-heading,
.path-local-treestudyplan .q-student-results .q-line-heading,
.path-local-treestudyplan .q-student-results .q-item-heading,
.path-local-treestudyplan .q-student-results .q-condition-heading {
vertical-align: top;
}
.path-local-treestudyplan .q-header .q-line-heading,
.path-local-treestudyplan .q-student-results .q-line-heading {
height: fit-content; height: fit-content;
} }
.path-local-treestudyplan .q-header .q-item-heading > .q-item-heading, .path-local-treestudyplan .q-header .q-item-heading,
.path-local-treestudyplan .q-student-results .q-item-heading > .q-item-heading { .path-local-treestudyplan .q-student-results .q-item-heading {
height: 6rem; height: 6rem;
} }
.path-local-treestudyplan .q-header .q-condition-heading, .path-local-treestudyplan .q-header .q-condition-heading,
.path-local-treestudyplan .q-student-results .q-condition-heading { .path-local-treestudyplan .q-student-results .q-condition-heading {
text-align: center;
}
.path-local-treestudyplan .q-header .q-condition-heading span,
.path-local-treestudyplan .q-student-results .q-condition-heading span {
height: 8rem; height: 8rem;
white-space: nowrap;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
.path-local-treestudyplan .q-result {
text-align: center;
vertical-align: middle;
border-right: 1px solid gray;
} }
.path-local-treestudyplan .q-studentname { .path-local-treestudyplan .q-studentname {
padding: 0.5em; padding: 0.5em;
border-right: 2px solid grey; border-right: 2px solid grey;
width: 20rem; width: 20rem;
} }
.path-local-treestudyplan .q-studentname.heading { .path-local-treestudyplan .q-courseresult i.fa,
font-weight: bold; .path-local-treestudyplan .q-conditionresult i.fa {
vertical-align: bottom; font-size: 21px;
display: flex; vertical-align: middle;
}
.path-local-treestudyplan .q-studentname.heading span {
align-self: flex-end;
}
.path-local-treestudyplan .q-scrolly {
overflow-y: auto;
max-height: 300rem;
} }
.path-local-treestudyplan .b-modal-justify-footer-between .modal-footer, .path-local-treestudyplan .b-modal-justify-footer-between .modal-footer,