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