Skip to content
Snippets Groups Projects
Commit 97884ed2 authored by Marcus Eibrink-Lunzenauer's avatar Marcus Eibrink-Lunzenauer Committed by Elmar Ludwig
Browse files

Courseware: Strukturelemente nur einmal laden

parent 89ea9cc8
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
resources/vue/components/courseware/CoursewareActionWidget.vue
+ 25
− 47
View file @ 97884ed2
<template>
<ul class="widget-list widget-links cw-action-widget">
<li v-show="canEdit" class="cw-action-widget-edit" @click="editElement"><translate>Seite bearbeiten</translate></li>
<li v-show="canEdit" class="cw-action-widget-add" @click="addElement"><translate>Seite hinzufügen</translate></li>
<ul class="widget-list widget-links cw-action-widget" v-if="structuralElement">
<li v-show="canEdit" class="cw-action-widget-edit" @click="editElement">
<translate>Seite bearbeiten</translate>
</li>
<li v-show="canEdit" class="cw-action-widget-add" @click="addElement">
<translate>Seite hinzufügen</translate>
</li>
<li class="cw-action-widget-info" @click="showElementInfo"><translate>Informationen anzeigen</translate></li>
<li class="cw-action-widget-star" @click="createBookmark"><translate>Lesezeichen setzen</translate></li>
<li v-show="canEdit" @click="exportElement" class="cw-action-widget-export"><translate>Seite exportieren</translate></li>
<li v-show="canEdit && oerEnabled" @click="oerElement" class="cw-action-widget-oer"><translate>Seite auf %{oerTitle} veröffentlichen</translate></li>
<li v-show="!isRoot && canEdit" class="cw-action-widget-trash" @click="deleteElement"><translate>Seite löschen</translate></li>
<li v-show="canEdit" @click="exportElement" class="cw-action-widget-export">
<translate>Seite exportieren</translate>
</li>
<li v-show="canEdit && oerEnabled" @click="oerElement" class="cw-action-widget-oer">
<translate>Seite auf %{oerTitle} veröffentlichen</translate>
</li>
<li v-show="!isRoot && canEdit" class="cw-action-widget-trash" @click="deleteElement">
<translate>Seite löschen</translate>
</li>
</ul>
</template>
......@@ -17,29 +27,16 @@ import { mapActions, mapGetters } from 'vuex';
export default {
name: 'courseware-action-widget',
props: ['structuralElement'],
components: {
StudipIcon
StudipIcon,
},
mixins: [CoursewareExport],
data() {
return {
currentId: null,
currentElement: {},
}
},
computed: {
...mapGetters({
structuralElementById: 'courseware-structural-elements/byId',
oerEnabled: 'oerEnabled',
oerTitle: 'oerTitle',
}),
structuralElement() {
if (!this.currentId) {
return null;
}
return this.structuralElementById({ id: this.currentId });
},
isRoot() {
if (!this.structuralElement) {
return true;
......@@ -53,15 +50,12 @@ export default {
}
return this.structuralElement.attributes['can-edit'];
},
currentId() {
return this.structuralElement?.id;
},
async mounted() {
if (!this.currentId) {
this.setCurrentId(this.$route.params.id);
}
},
methods: {
...mapActions({
loadStructuralElement: 'loadStructuralElement',
showElementEditDialog: 'showElementEditDialog',
showElementAddDialog: 'showElementAddDialog',
showElementDeleteDialog: 'showElementDeleteDialog',
......@@ -70,19 +64,8 @@ export default {
showElementOerDialog: 'showElementOerDialog',
companionInfo: 'companionInfo',
addBookmark: 'addBookmark',
lockObject: 'lockObject'
lockObject: 'lockObject',
}),
async setCurrentId(id) {
this.currentId = id;
await this.loadStructuralElement(this.currentId);
this.initCurrent();
},
initCurrent() {
this.currentElement = JSON.parse(JSON.stringify(this.structuralElement));
if (!this.currentElement.attributes.payload.meta) {
this.currentElement.attributes.payload.meta = {};
}
},
async editElement() {
await this.lockObject({ id: this.currentId, type: 'courseware-structural-elements' });
this.showElementEditDialog(true);
......@@ -106,12 +89,7 @@ export default {
},
oerElement() {
this.showElementOerDialog(true);
}
},
watch: {
$route(to) {
this.setCurrentId(to.params.id);
},
},
}
};
</script>
resources/vue/components/courseware/CoursewareStructuralElement.vue
+ 620
− 426
View file @ 97884ed2
<template>
<div>
<div :class="{ 'cw-structural-element-consumemode': consumeMode }" class="cw-structural-element" v-if="validContext">
<div
:class="{ 'cw-structural-element-consumemode': consumeMode }"
class="cw-structural-element"
v-if="validContext"
>
<div class="cw-structural-element-content" v-if="structuralElement">
<courseware-ribbon :canEdit="canEdit">
<template #buttons>
......@@ -25,12 +29,19 @@
{{ ancestor.attributes.title }}
</router-link>
</span>
</li><li class="cw-ribbon-breadcrumb-item cw-ribbon-breadcrumb-item-current" :title="structuralElement.attributes.title">
</li>
<li
class="cw-ribbon-breadcrumb-item cw-ribbon-breadcrumb-item-current"
:title="structuralElement.attributes.title"
>
<span>{{ structuralElement.attributes.title }}</span>
</li>
</template>
<template #breadcrumbFallback>
<li class="cw-ribbon-breadcrumb-item cw-ribbon-breadcrumb-item-current" :title="structuralElement.attributes.title">
<li
class="cw-ribbon-breadcrumb-item cw-ribbon-breadcrumb-item-current"
:title="structuralElement.attributes.title"
>
<span>{{ structuralElement.attributes.title }}</span>
</li>
</template>
......@@ -50,10 +61,18 @@
</template>
</courseware-ribbon>
<div v-if="canRead" class="cw-container-wrapper" :class="{ 'cw-container-wrapper-consume': consumeMode }">
<div
v-if="canRead"
class="cw-container-wrapper"
:class="{ 'cw-container-wrapper-consume': consumeMode }"
>
<div v-if="structuralElementLoaded" class="cw-companion-box-wrapper">
<courseware-empty-element-box
v-if="(empty && !isRoot && canEdit) || (empty && !canEdit) || (!noContainers && empty && isRoot && canEdit)"
v-if="
(empty && !isRoot && canEdit) ||
(empty && !canEdit) ||
(!noContainers && empty && isRoot && canEdit)
"
:canEdit="canEdit"
:noContainers="noContainers"
/>
......@@ -71,7 +90,10 @@
</div>
<div v-else class="cw-container-wrapper" :class="{ 'cw-container-wrapper-consume': consumeMode }">
<div v-if="structuralElementLoaded" class="cw-companion-box-wrapper">
<courseware-companion-box mood="sad" :msgCompanion="$gettext('Diese Seite steht Ihnen leider nicht zur Verfügung')" />
<courseware-companion-box
mood="sad"
:msgCompanion="$gettext('Diese Seite steht Ihnen leider nicht zur Verfügung')"
/>
</div>
</div>
</div>
......@@ -115,21 +137,25 @@
<v-select
v-model="currentElement.attributes.payload.color"
:options="colors"
:reduce="color => color.class"
:reduce="(color) => color.class"
label="class"
class="cw-vs-select"
>
<template #open-indicator="selectAttributes">
<span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10"/></span>
<span v-bind="selectAttributes"
><studip-icon shape="arr_1down" size="10"
/></span>
</template>
<template #no-options="{ search, searching, loading }">
<translate>Es steht keine Auswahl zur Verfügung</translate>.
</template>
<template #selected-option="{ name, hex }">
<span class="vs__option-color" :style="{'background-color': hex}"></span><span>{{name}}</span>
<span class="vs__option-color" :style="{ 'background-color': hex }"></span
><span>{{ name }}</span>
</template>
<template #option="{ name, hex }">
<span class="vs__option-color" :style="{'background-color': hex}"></span><span>{{name}}</span>
<span class="vs__option-color" :style="{ 'background-color': hex }"></span
><span>{{ name }}</span>
</template>
</v-select>
</label>
......@@ -147,7 +173,9 @@
<label>
<translate>Lizenztyp</translate>
<select v-model="currentElement.attributes.payload.license_type">
<option v-for="license in licenses" :key="license.id" :value="license.id">{{license.name}}</option>
<option v-for="license in licenses" :key="license.id" :value="license.id">
{{ license.name }}
</option>
</select>
</label>
<label>
......@@ -155,14 +183,26 @@
<input type="text" v-model="currentElement.attributes.payload.required_time" />
</label>
<label>
<translate>Niveau</translate><br>
<translate>Niveau</translate><br />
<translate>von</translate>
<select v-model="currentElement.attributes.payload.difficulty_start">
<option v-for="difficulty_start in 12" :key="difficulty_start" :value="difficulty_start">{{difficulty_start}}</option>
<option
v-for="difficulty_start in 12"
:key="difficulty_start"
:value="difficulty_start"
>
{{ difficulty_start }}
</option>
</select>
<translate>bis</translate>
<select v-model="currentElement.attributes.payload.difficulty_end">
<option v-for="difficulty_end in 12" :key="difficulty_end" :value="difficulty_end">{{difficulty_end}}</option>
<option
v-for="difficulty_end in 12"
:key="difficulty_end"
:value="difficulty_end"
>
{{ difficulty_end }}
</option>
</select>
</label>
</form>
......@@ -303,25 +343,40 @@
>
<template v-slot:dialogContent>
<div v-show="!exportRunning">
<translate>Hiermit exportieren Sie die Seite "{{ currentElement.attributes.title }}" als ZIP-Datei.</translate>
<translate
>Hiermit exportieren Sie die Seite "{{ currentElement.attributes.title }}" als
ZIP-Datei.</translate
>
<div class="cw-element-export">
<label>
<input type="checkbox" v-model="exportChildren">
<input type="checkbox" v-model="exportChildren" />
<translate>Unterseiten exportieren</translate>
</label>
</div>
</div>
<courseware-companion-box v-show="exportRunning" :msgCompanion="$gettext('Export läuft, bitte haben sie einen Moment Geduld...')" mood="pointing"/>
<courseware-companion-box
v-show="exportRunning"
:msgCompanion="$gettext('Export läuft, bitte haben sie einen Moment Geduld...')"
mood="pointing"
/>
<div v-show="exportRunning" class="cw-import-zip">
<header>{{ exportState }}:</header>
<div class="progress-bar-wrapper">
<div class="progress-bar" role="progressbar" :style="{width: exportProgress + '%'}" :aria-valuenow="exportProgress" aria-valuemin="0" aria-valuemax="100">{{ exportProgress }}%</div>
<div
class="progress-bar"
role="progressbar"
:style="{ width: exportProgress + '%' }"
:aria-valuenow="exportProgress"
aria-valuemin="0"
aria-valuemax="100"
>
{{ exportProgress }}%
</div>
</div>
</div>
</template>
</studip-dialog>
<studip-dialog
......@@ -336,7 +391,6 @@
@close="showElementOerDialog(false)"
@confirm="publishCurrentElement"
>
<template v-slot:dialogContent>
<form class="default" @submit.prevent="">
<fieldset>
......@@ -355,7 +409,10 @@
</label>
<label>
<translate>Niveau</translate>:
<p> {{ currentElement.attributes.payload.difficulty_start }} - {{ currentElement.attributes.payload.difficulty_end }}</p>
<p>
{{ currentElement.attributes.payload.difficulty_start }} -
{{ currentElement.attributes.payload.difficulty_end }}
</p>
</label>
<label>
<translate>Lizenztyp</translate>:
......@@ -364,18 +421,16 @@
<label>
<translate>Sie können diese Daten unter "Seite bearbeiten" verändern</translate>.
</label>
</fieldset>
<fieldset>
<legend><translate>Einstellungen</translate></legend>
<label>
<translate>Unterseiten veröffentlichen</translate>
<input type="checkbox" v-model="oerChildren">
<input type="checkbox" v-model="oerChildren" />
</label>
</fieldset>
</form>
</template>
</studip-dialog>
<studip-dialog
......@@ -388,9 +443,12 @@
></studip-dialog>
</div>
<div v-else>
<courseware-companion-box v-if="currentElement !== ''" :msgCompanion="textCompanionWrongContext" mood="sad"/>
<courseware-companion-box
v-if="currentElement !== ''"
:msgCompanion="textCompanionWrongContext"
mood="sad"
/>
</div>
</div>
</template>
......@@ -430,13 +488,12 @@ export default {
IsoDate,
StudipDialog,
},
props: ['orderedStructuralElements'],
props: ['orderedStructuralElements', 'structuralElement'],
mixins: [CoursewareExport],
data() {
return {
currentId: null,
newChapterName: '',
newChapterParent: 'descendant',
currentElement: '',
......@@ -500,6 +557,10 @@ export default {
exportProgress: 'exportProgress',
}),
currentId() {
return this.structuralElement?.id;
},
textOer() {
return {
title: this.$gettext('Seite auf') + ' ' + this.oerTitle + ' ' + this.$gettext('veröffentlichen'),
......@@ -517,7 +578,12 @@ export default {
textDelete.title = this.$gettext('Seite unwiderruflich löschen');
textDelete.alert = this.$gettext('Möchten Sie die Seite wirklich löschen?');
if (this.structuralElementLoaded) {
textDelete.alert = this.$gettext('Möchten Sie die Seite') +' "'+ this.structuralElement.attributes.title + '" '+ this.$gettext('wirklich löschen?');
textDelete.alert =
this.$gettext('Möchten Sie die Seite') +
' "' +
this.structuralElement.attributes.title +
'" ' +
this.$gettext('wirklich löschen?');
}
return textDelete;
......@@ -527,13 +593,19 @@ export default {
let valid = false;
let context = this.$store.getters.context;
if (context.type === 'courses' && this.currentElement.relationships) {
if (this.currentElement.relationships.course && context.id === this.currentElement.relationships.course.data.id) {
if (
this.currentElement.relationships.course &&
context.id === this.currentElement.relationships.course.data.id
) {
valid = true;
}
}
if (context.type === 'users' && this.currentElement.relationships) {
if (this.currentElement.relationships.user && context.id === this.currentElement.relationships.user.data.id) {
if (
this.currentElement.relationships.user &&
context.id === this.currentElement.relationships.user.data.id
) {
valid = true;
}
}
......@@ -545,14 +617,6 @@ export default {
return this.structuralElement.relationships?.image?.meta?.['download-url'] ?? null;
},
structuralElement() {
if (!this.currentId) {
return null;
}
return this.structuralElementById({ id: this.currentId });
},
structuralElementLoaded() {
return this.structuralElement !== null && this.structuralElement !== {};
},
......@@ -655,16 +719,30 @@ export default {
{ id: 4, label: this.$gettext('Lesezeichen setzen'), icon: 'star', emit: 'setBookmark' },
];
if (this.canEdit) {
menu.push({ id: 1, label: this.$gettext('Seite bearbeiten'), icon: 'edit', emit: 'editCurrentElement' });
menu.push({
id: 1,
label: this.$gettext('Seite bearbeiten'),
icon: 'edit',
emit: 'editCurrentElement',
});
menu.push({ id: 2, label: this.$gettext('Seite hinzufügen'), icon: 'add', emit: 'addElement' });
menu.push({ id: 5, label: this.$gettext('Seite exportieren'), icon: 'export', emit: 'showExportOptions' });
menu.push({
id: 5,
label: this.$gettext('Seite exportieren'),
icon: 'export',
emit: 'showExportOptions',
});
}
if (this.canEdit && this.oerEnabled) {
menu.push({ id: 6, label: this.textOer.title, icon: 'oer-campus', emit: 'oerCurrentElement' });
}
if (!this.isRoot && this.canEdit) {
menu.push({ id: 7, label: this.$gettext('Seite löschen'), icon: 'trash', emit: 'deleteCurrentElement' });
menu.push({
id: 7,
label: this.$gettext('Seite löschen'),
icon: 'trash',
emit: 'deleteCurrentElement',
});
}
menu.sort((a, b) => a.id - b.id);
......@@ -672,28 +750,147 @@ export default {
},
colors() {
const colors = [
{name: this.$gettext('Schwarz'), class: 'black', hex: '#000000', level: 100, icon: 'black', darkmode: true},
{name: this.$gettext('Weiß'), class: 'white', hex: '#ffffff', level: 100, icon: 'white', darkmode: false},
{name: this.$gettext('Blau'), class: 'studip-blue', hex: '#28497c', level: 100, icon: 'blue', darkmode: true},
{name: this.$gettext('Hellblau'), class: 'studip-lightblue', hex: '#e7ebf1', level: 40, icon: 'lightblue', darkmode: false},
{name: this.$gettext('Rot'), class: 'studip-red', hex: '#d60000', level: 100, icon: 'red', darkmode: false},
{name: this.$gettext('Grün'), class: 'studip-green', hex: '#008512', level: 100, icon: 'green', darkmode: true},
{name: this.$gettext('Gelb'), class: 'studip-yellow', hex: '#ffbd33', level: 100, icon: 'yellow', darkmode: false},
{name: this.$gettext('Grau'), class: 'studip-gray', hex: '#636a71', level: 100, icon: 'grey', darkmode: true},
{name: this.$gettext('Holzkohle'), class: 'charcoal', hex: '#3c454e', level: 100, icon: false, darkmode: true},
{name: this.$gettext('Königliches Purpur'), class: 'royal-purple', hex: '#8656a2', level: 80, icon: false, darkmode: true},
{name: this.$gettext('Leguangrün'), class: 'iguana-green', hex: '#66b570', level: 60, icon: false, darkmode: true},
{name: this.$gettext('Königin blau'), class: 'queen-blue', hex: '#536d96', level: 80, icon: false, darkmode: true},
{name: this.$gettext('Helles Seegrün'), class: 'verdigris', hex: '#41afaa', level: 80, icon: false, darkmode: true},
{name: this.$gettext('Maulbeere'), class: 'mulberry', hex: '#bf5796', level: 80, icon: false, darkmode: true},
{name: this.$gettext('Kürbis'), class: 'pumpkin', hex: '#f26e00', level: 100, icon: false, darkmode: true},
{name: this.$gettext('Sonnenschein'), class: 'sunglow', hex: '#ffca5c', level: 80, icon: false, darkmode: false},
{name: this.$gettext('Apfelgrün'), class: 'apple-green', hex: '#8bbd40', level: 80, icon: false, darkmode: true},
{
name: this.$gettext('Schwarz'),
class: 'black',
hex: '#000000',
level: 100,
icon: 'black',
darkmode: true,
},
{
name: this.$gettext('Weiß'),
class: 'white',
hex: '#ffffff',
level: 100,
icon: 'white',
darkmode: false,
},
{
name: this.$gettext('Blau'),
class: 'studip-blue',
hex: '#28497c',
level: 100,
icon: 'blue',
darkmode: true,
},
{
name: this.$gettext('Hellblau'),
class: 'studip-lightblue',
hex: '#e7ebf1',
level: 40,
icon: 'lightblue',
darkmode: false,
},
{
name: this.$gettext('Rot'),
class: 'studip-red',
hex: '#d60000',
level: 100,
icon: 'red',
darkmode: false,
},
{
name: this.$gettext('Grün'),
class: 'studip-green',
hex: '#008512',
level: 100,
icon: 'green',
darkmode: true,
},
{
name: this.$gettext('Gelb'),
class: 'studip-yellow',
hex: '#ffbd33',
level: 100,
icon: 'yellow',
darkmode: false,
},
{
name: this.$gettext('Grau'),
class: 'studip-gray',
hex: '#636a71',
level: 100,
icon: 'grey',
darkmode: true,
},
{
name: this.$gettext('Holzkohle'),
class: 'charcoal',
hex: '#3c454e',
level: 100,
icon: false,
darkmode: true,
},
{
name: this.$gettext('Königliches Purpur'),
class: 'royal-purple',
hex: '#8656a2',
level: 80,
icon: false,
darkmode: true,
},
{
name: this.$gettext('Leguangrün'),
class: 'iguana-green',
hex: '#66b570',
level: 60,
icon: false,
darkmode: true,
},
{
name: this.$gettext('Königin blau'),
class: 'queen-blue',
hex: '#536d96',
level: 80,
icon: false,
darkmode: true,
},
{
name: this.$gettext('Helles Seegrün'),
class: 'verdigris',
hex: '#41afaa',
level: 80,
icon: false,
darkmode: true,
},
{
name: this.$gettext('Maulbeere'),
class: 'mulberry',
hex: '#bf5796',
level: 80,
icon: false,
darkmode: true,
},
{
name: this.$gettext('Kürbis'),
class: 'pumpkin',
hex: '#f26e00',
level: 100,
icon: false,
darkmode: true,
},
{
name: this.$gettext('Sonnenschein'),
class: 'sunglow',
hex: '#ffca5c',
level: 80,
icon: false,
darkmode: false,
},
{
name: this.$gettext('Apfelgrün'),
class: 'apple-green',
hex: '#8bbd40',
level: 80,
icon: false,
darkmode: true,
},
];
let elementColors = [];
colors.forEach( color => {
colors.forEach((color) => {
if (color.darkmode) {
elementColors.push(color);
}
......@@ -709,27 +906,14 @@ export default {
}
return '';
}
},
watch: {
$route(to) {
this.setCurrentId(to.params.id);
},
},
mounted() {
if (!this.currentId) {
this.setCurrentId(this.$route.params.id);
}
},
methods: {
...mapActions({
createStructuralElement: 'createStructuralElement',
updateStructuralElement: 'updateStructuralElement',
deleteStructuralElement: 'deleteStructuralElement',
loadStructuralElement: 'loadStructuralElement',
lockObject: 'lockObject',
unlockObject: 'unlockObject',
addBookmark: 'addBookmark',
......@@ -745,11 +929,6 @@ export default {
showElementOerDialog: 'showElementOerDialog',
}),
async setCurrentId(id) {
this.currentId = id;
await this.loadStructuralElement(this.currentId);
this.initCurrent();
},
initCurrent() {
this.currentElement = _.cloneDeep(this.structuralElement);
this.uploadFileError = '';
......@@ -785,7 +964,7 @@ export default {
},
async closeEditDialog() {
await this.unlockObject({ id: this.currentId, type: 'courseware-structural-elements' });
this.showElementEditDialog(false)
this.showElementEditDialog(false);
this.initCurrent();
},
closeAddDialog() {
......@@ -837,7 +1016,7 @@ export default {
id: this.currentId,
});
await this.unlockObject({ id: this.currentId, type: 'courseware-structural-elements' });
this.setCurrentId(this.$route.params.id);
this.$emit('select', this.currentId);
this.showElementEditDialog(false);
},
......@@ -849,7 +1028,7 @@ export default {
this.exportRunning = true;
await this.sendExportZip(this.currentElement.id, {
withChildren: this.exportChildren
withChildren: this.exportChildren,
});
this.exportRunning = false;
......@@ -889,7 +1068,12 @@ export default {
});
let newElement = this.$store.getters['courseware-structural-elements/lastCreated'];
this.companionSuccess({
info: this.$gettext('Seite') +' "' + newElement.attributes.title + '" ' + this.$gettext('wurde erfolgreich angelegt.'),
info:
this.$gettext('Seite') +
' "' +
newElement.attributes.title +
'" ' +
this.$gettext('wurde erfolgreich angelegt.'),
});
},
containerComponent(container) {
......@@ -909,7 +1093,17 @@ export default {
created() {
this.pluginManager.registerComponentsLocally(this);
},
watch: {
structuralElement() {
this.initCurrent();
},
},
// this line provides all the components to courseware plugins
provide: () => ({ containerComponents: ContainerComponents, coursewarePluginComponents: CoursewarePluginComponents }),
provide: () => ({
containerComponents: ContainerComponents,
coursewarePluginComponents: CoursewarePluginComponents,
}),
};
</script>
resources/vue/components/courseware/IndexApp.vue
+ 31
− 8
View file @ 97884ed2
<template>
<div v-if="courseware">
<courseware-structural-element
:structural-element="selected"
:ordered-structural-elements="orderedStructuralElements"
@select="selectStructuralElement"
></courseware-structural-element>
<MountingPortal mountTo="#courseware-action-widget" name="sidebar-actions">
<courseware-action-widget></courseware-action-widget>
<courseware-action-widget :structural-element="selected"></courseware-action-widget>
</MountingPortal>
<MountingPortal mountTo="#courseware-view-widget" name="sidebar-views">
<courseware-view-widget></courseware-view-widget>
</MountingPortal>
</div>
<div v-else>
<translate>Inhalte werden geladen</translate>...
</div>
<div v-else><translate>Inhalte werden geladen</translate>...</div>
</template>
<script>
......@@ -27,25 +27,48 @@ export default {
CoursewareViewWidget,
CoursewareActionWidget,
},
data: () => ({ orderedStructuralElements: [] }),
data: () => ({
selected: null,
orderedStructuralElements: [],
}),
computed: {
...mapGetters({
courseware: 'courseware',
relatedStructuralElement: 'courseware-structural-elements/related',
structuralElements: 'courseware-structural-elements/all',
structuralElementById: 'courseware-structural-elements/byId',
userId: 'userId',
}),
},
methods: {
...mapActions(['loadCoursewareStructure', 'loadTeacherStatus', 'coursewareBlockAdder']),
...mapActions([
'coursewareBlockAdder',
'loadCoursewareStructure',
'loadStructuralElement',
'loadTeacherStatus',
]),
async selectStructuralElement(id) {
if (!id) {
return;
}
await this.loadStructuralElement(id);
this.selected = this.structuralElementById({ id });
},
},
async mounted() {
await this.loadCoursewareStructure();
await this.loadTeacherStatus(this.userId);
const selectedId = this.$route.params?.id;
await this.selectStructuralElement(selectedId);
},
watch: {
$route() {
this.coursewareBlockAdder({}); //reset block adder on navigate
$route(to) {
// reset block adder on navigate
this.coursewareBlockAdder({});
const selectedId = to.params?.id;
this.selectStructuralElement(selectedId);
},
structuralElements(newElements, oldElements) {
const nodes = buildNodes(this.structuralElements, this.relatedStructuralElement.bind(this));
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment