Newer
Older
<focus-trap v-model="consumModeTrap">
<div>
<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 && canAddElements">
<template #buttons>
<router-link v-if="prevElement" :to="'/structural_element/' + prevElement.id">
<div class="cw-ribbon-button cw-ribbon-button-prev" :title="textRibbon.perv" />
</router-link>
<div v-else class="cw-ribbon-button cw-ribbon-button-prev-disabled" :title="$gettext('Keine vorherige Seite')"/>
<router-link v-if="nextElement" :to="'/structural_element/' + nextElement.id">
<div class="cw-ribbon-button cw-ribbon-button-next" :title="textRibbon.next" />
</router-link>
<div v-else class="cw-ribbon-button cw-ribbon-button-next-disabled" :title="$gettext('Keine nächste Seite')"/>
</template>
<template #breadcrumbList>
<li
v-for="ancestor in ancestors"
:key="ancestor.id"
:title="ancestor.attributes.title"
class="cw-ribbon-breadcrumb-item"
>
<span>
<router-link :to="'/structural_element/' + ancestor.id">{{ ancestor.attributes.title || "–" }}</router-link>
</span>
</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"
>
<span>{{ structuralElement.attributes.title }}</span>
</li>
</template>
<template #menu>
<studip-action-menu
v-if="!consumeMode"
:items="menuItems"
class="cw-ribbon-action-menu"
@editCurrentElement="menuAction('editCurrentElement')"
@addElement="menuAction('addElement')"
@deleteCurrentElement="menuAction('deleteCurrentElement')"
@showInfo="menuAction('showInfo')"
@showExportOptions="menuAction('showExportOptions')"
@oerCurrentElement="menuAction('oerCurrentElement')"
@setBookmark="menuAction('setBookmark')"
@sortContainers="menuAction('sortContainers')"
@pdfExport="menuAction('pdfExport')"
@showSuggest="menuAction('showSuggest')"
@linkElement="menuAction('linkElement')"
v-if="canVisit && !sortMode && !isLink"
class="cw-container-wrapper"
:class="{
'cw-container-wrapper-consume': consumeMode,
'cw-container-wrapper-discuss': discussView,
}"
>
<div v-if="structuralElementLoaded" class="cw-companion-box-wrapper">
<courseware-companion-box
v-if="blockedByAnotherUser"
:msgCompanion="$gettextInterpolate('Die Einstellungen dieser Seite werden im Moment von %{blockingUserName} bearbeitet', {blockingUserName: blockingUserName})"
mood="pointing"
>
<template #companionActions>
<button class="button" @click="menuAction('removeLock')">
{{ textRemoveLock.title }}
</button>
</template>
</courseware-companion-box>
<courseware-empty-element-box
v-if="showEmptyElementBox"
:canEdit="canEdit"
:noContainers="noContainers"
/>
<courseware-wellcome-screen v-if="noContainers && isRoot && canEdit" />
</div>
<courseware-structural-element-discussion
v-if="!noContainers && discussView"
:structuralElement="structuralElement"
:canEdit="canEdit"
<component
v-for="container in containers"
:key="container.id"
:is="containerComponent(container)"
:container="container"
:canEdit="canEdit"
:canAddElements="canAddElements"
:isTeacher="userIsTeacher"
class="cw-container-item"
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<div
v-if="isLink"
class="container-wrapper"
:class="{
'cw-container-wrapper-consume': consumeMode,
'cw-container-wrapper-discuss': discussView,
}"
>
<courseware-structural-element-discussion
v-if="discussView"
:structuralElement="structuralElement"
:canEdit="canEdit"
/>
<courseware-companion-box
v-if="editView"
:msgCompanion="$gettextInterpolate('Dieser Inhalt ist aus den persönlichen Lerninhalten von %{ ownerName } verlinkt und kann nur dort bearbeitet werden.', { ownerName: ownerName })"
mood="pointing"
/>
<component
v-for="container in linkedContainers"
:key="container.id"
:is="containerComponent(container)"
:container="container"
:canEdit="false"
:canAddElements="false"
:isTeacher="userIsTeacher"
class="cw-container-item"
/>
</div>
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<div v-if="canVisit && canEdit && sortMode" class="cw-container-wrapper-sort-mode">
<draggable
class="cw-structural-element-list-sort-mode"
tag="ul"
v-model="containerList"
v-bind="dragOptions"
handle=".cw-sortable-handle"
@start="isDragging = true"
@end="isDragging = false"
>
<transition-group type="transition" name="flip-containers">
<li
v-for="container in containerList"
:key="container.id"
class="cw-container-item-sortable"
>
<span class="cw-sortable-handle"></span>
<span>{{ container.attributes.title }} ({{ container.attributes.width }})</span>
</li>
</transition-group>
</draggable>
<div class="cw-container-sort-buttons">
<button class="button accept" @click="storeSort">
<translate>Sortierung speichern</translate>
</button>
<button class="button cancel" @click="resetSort">
<translate>Sortieren abbrechen</translate>
</button>
</div>
<div
v-if="!canVisit"
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.')"
/>
</div>
<studip-dialog
v-if="showEditDialog"
:title="textEdit.title"
:confirmText="textEdit.confirm"
confirmClass="accept"
:closeText="textEdit.close"
closeClass="cancel"
height="500"
:width="inContent ? '720' : '500'"
<courseware-tab :name="textEdit.basic" :selected="true" :index="0">
<form class="default" @submit.prevent="">
<label>
<translate>Titel</translate>
<input type="text" v-model="currentElement.attributes.title" />
</label>
<label>
<translate>Beschreibung</translate>
<textarea
v-model="currentElement.attributes.payload.description"
class="cw-structural-element-description"
/>
</label>
</form>
</courseware-tab>
<courseware-tab :name="textEdit.meta" :index="1">
<form class="default" @submit.prevent="">
<label>
<translate>Farbe</translate>
v-model="currentElement.attributes.payload.color"
:options="colors"
: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>
</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>
</template>
<template #option="{ name, hex }">
<span class="vs__option-color" :style="{ 'background-color': hex }"></span
><span>{{ name }}</span>
</template>
<select v-model="currentElement.attributes.purpose">
<option value="content"><translate>Inhalt</translate></option>
<option v-if="!inCourse" value="template"><translate>Aufgabenvorlage</translate></option>
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<option value="oer"><translate>OER-Material</translate></option>
<option value="portfolio"><translate>ePortfolio</translate></option>
<option value="draft"><translate>Entwurf</translate></option>
<option value="other"><translate>Sonstiges</translate></option>
</select>
</label>
<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>
</select>
</label>
<label>
<translate>Geschätzter zeitlicher Aufwand</translate>
<input type="text" v-model="currentElement.attributes.payload.required_time" />
</label>
<label>
<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>
</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>
</select>
</label>
</form>
</courseware-tab>
<courseware-tab :name="textEdit.image" :index="2">
<form class="default" @submit.prevent="">
<img
v-if="image"
:src="image"
class="cw-structural-element-image-preview"
:alt="$gettext('Vorschaubild')"
<label v-if="image">
<button class="button" @click="deleteImage" v-translate>Bild löschen</button>
</label>
<div v-if="uploadFileError" class="messagebox messagebox_error">
{{ uploadFileError }}
</div>
<label v-if="!image">
<translate>Bild hochladen</translate>
<input ref="upload_image" type="file" accept="image/*" @change="checkUploadFile" />
</label>
</form>
</courseware-tab>
<courseware-tab :name="textEdit.approval" :index="3">
<courseware-structural-element-permissions
v-if="inCourse"
:element="currentElement"
@updateReadApproval="updateReadApproval"
@updateWriteApproval="updateWriteApproval"
/>
<courseware-content-permissions
v-if="inContent"
:element="currentElement"
@updateReadApproval="updateReadApproval"
@updateWriteApproval="updateWriteApproval"
/>
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
</courseware-tab>
<courseware-tab v-if="inCourse" :name="textEdit.visible" :index="4">
<form class="default" @submit.prevent="">
<label>
<translate>Sichtbar ab</translate>
<input type="date" v-model="currentElement.attributes['release-date']" />
</label>
<label>
<translate>Unsichtbar ab</translate>
<input type="date" v-model="currentElement.attributes['withdraw-date']" />
</label>
</form>
</courseware-tab>
</courseware-tabs>
</template>
</studip-dialog>
<studip-dialog
v-if="showAddDialog"
:title="$gettext('Seite hinzufügen')"
:confirmText="$gettext('Erstellen')"
confirmClass="accept"
:closeText="$gettext('Schließen')"
closeClass="cancel"
class="cw-structural-element-dialog"
@close="closeAddDialog"
@confirm="createElement"
>
<template v-slot:dialogContent>
<form class="default" @submit.prevent="">
<label>
<translate>Position der neuen Seite</translate>
<select v-model="newChapterParent">
<option v-if="!isRoot" value="sibling">
<translate>Neben der aktuellen Seite</translate>
</option>
<option value="descendant"><translate>Unterhalb der aktuellen Seite</translate></option>
</select>
</label>
<label>
<translate>Name der neuen Seite</translate><br />
<input v-model="newChapterName" type="text" />
</label>
</form>
</template>
</studip-dialog>
<studip-dialog
v-if="showInfoDialog"
:title="textInfo.title"
:closeText="textInfo.close"
closeClass="cancel"
@close="showElementInfoDialog(false)"
>
<template v-slot:dialogContent>
<table class="cw-structural-element-info">
<tr>
<td><translate>Titel</translate>:</td>
<td>{{ structuralElement.attributes.title }}</td>
</tr>
<tr>
<td><translate>Beschreibung</translate>:</td>
<td>{{ structuralElement.attributes.payload.description }}</td>
</tr>
<tr>
<td><translate>Seite wurde erstellt von</translate>:</td>
<td>{{ ownerName }}</td>
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
</tr>
<tr>
<td><translate>Seite wurde erstellt am</translate>:</td>
<td><iso-date :date="structuralElement.attributes.mkdate" /></td>
</tr>
<tr>
<td><translate>Zuletzt bearbeitet von</translate>:</td>
<td>{{ editor }}</td>
</tr>
<tr>
<td><translate>Zuletzt bearbeitet am</translate>:</td>
<td><iso-date :date="structuralElement.attributes.chdate" /></td>
</tr>
</table>
</template>
</studip-dialog>
<studip-dialog
v-if="showExportDialog"
:title="textExport.title"
:confirmText="textExport.confirm"
confirmClass="accept"
:closeText="textExport.close"
closeClass="cancel"
height="350"
@close="showElementExportDialog(false)"
@confirm="exportCurrentElement"
>
<template v-slot:dialogContent>
<div v-show="!exportRunning">
<translate> Hiermit exportieren Sie die Seite "%{ currentElement.attributes.title }" als ZIP-Datei.</translate>
<div class="cw-element-export">
<input type="checkbox" v-model="exportChildren" />
<translate>Unterseiten exportieren</translate>
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
</div>
</div>
<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>
</div>
</template>
</studip-dialog>
<studip-dialog
v-if="showPdfExportDialog"
:title="textExport.title"
:confirmText="textExport.confirm"
confirmClass="accept"
:closeText="textExport.close"
closeClass="cancel"
height="350"
@close="showElementPdfExportDialog(false)"
@confirm="pdfExportCurrentElement"
>
<template v-slot:dialogContent>
<translate> Hiermit exportieren Sie die Seite "%{ currentElement.attributes.title }" als PDF-Datei.</translate>
<div class="cw-element-export">
<label>
<input type="checkbox" v-model="pdfExportChildren" />
<translate>Unterseiten exportieren</translate>
</label>
</div>
</template>
</studip-dialog>
<studip-dialog
v-if="showOerDialog"
height="600"
width="600"
:title="textOer.title"
:confirmText="textOer.confirm"
confirmClass="accept"
:closeText="textOer.close"
closeClass="cancel"
@close="showElementOerDialog(false)"
@confirm="publishCurrentElement"
>
<template v-slot:dialogContent>
<form v-show="!oerExportRunning" class="default" @submit.prevent="">
<fieldset>
<legend><translate>Grunddaten</translate></legend>
<p><translate>Vorschaubild</translate>:</p>
<img
v-if="currentElement.relationships.image.data"
:src="currentElement.relationships.image.meta['download-url']"
width="400"
/>
</label>
<label>
<p><translate>Beschreibung</translate>:</p>
<p>{{ currentElement.attributes.payload.description }}</p>
</label>
<label>
<translate>Niveau</translate>:
<p>
{{ currentElement.attributes.payload.difficulty_start }} -
{{ currentElement.attributes.payload.difficulty_end }}
</p>
</label>
<label>
<translate>Lizenztyp</translate>:
<p>{{ currentLicenseName }}</p>
</label>
<label>
<translate>Sie können diese Daten unter "Seite bearbeiten" verändern.</translate>
</fieldset>
<fieldset>
<legend><translate>Einstellungen</translate></legend>
<translate>Unterseiten veröffentlichen</translate>
<input type="checkbox" v-model="oerChildren" />
<courseware-companion-box
v-show="oerExportRunning"
:msgCompanion="$gettext('Export läuft, bitte haben sie einen Moment Geduld...')"
mood="pointing"
/>
<studip-dialog
v-if="showSuggestOerDialog"
height="600"
width="600"
:title="textSuggestOer.title"
:confirmText="textSuggestOer.confirm"
confirmClass="accept"
:closeText="textSuggestOer.close"
closeClass="cancel"
@close="updateShowSuggestOerDialog(false)"
@confirm="sendOerSuggestion"
>
<template v-slot:dialogContent>
<p><translate>Das folgende Courseware-Material wird %{ ownerName }
zur Veröffentlichung im OER Campus vorgeschlagen:</translate></p>
<table class="cw-structural-element-info">
<tr>
<td><translate>Titel</translate>:</td>
<td>{{ structuralElement.attributes.title }}</td>
</tr>
<tr>
<td><translate>Beschreibung</translate>:</td>
<td>{{ structuralElement.attributes.payload.description }}</td>
</tr>
</table>
<form class="default" @submit.prevent="">
<label>
<translate>Ihr Vorschlag wird anonym versendet. Falls gewünscht, können Sie
zusätzlich eine Nachricht verfassen:</translate>
<textarea
v-model="additionalText"
class="cw-structural-element-description"
/>
</label>
</form>
</template>
</studip-dialog>
<studip-dialog
v-if="showDeleteDialog"
:title="textDelete.title"
:question="textDelete.alert"
height="180"
@confirm="deleteCurrentElement"
@close="closeDeleteDialog"
></studip-dialog>
<studip-dialog
v-if="showLinkDialog"
:title="$gettext('Öffentlichen Link für Seite erzeugen')"
:confirmText="$gettext('Erstellen')"
confirmClass="accept"
:closeText="$gettext('Schließen')"
closeClass="cancel"
class="cw-structural-element-dialog"
@close="closeLinkDialog"
@confirm="createElementLink"
>
<template v-slot:dialogContent>
<form class="default" @submit.prevent="">
<label>
<translate>Passwort</translate>
<input type="password" v-model="publicLink.password" />
</label>
<label>
<translate>Ablaufdatum</translate>
<input v-model="publicLink['expire-date']" type="date" class="size-l" />
</label>
</form>
</template>
</studip-dialog>
<studip-dialog
v-if="showRemoveLockDialog"
:title="textRemoveLock.title"
:question="textRemoveLock.alert"
height="200"
width="450"
@confirm="executeRemoveLock"
@close="showElementRemoveLockDialog(false)"
></studip-dialog>
</div>
<div v-else>
<courseware-companion-box
v-if="currentElement !== ''"
:msgCompanion="textCompanionWrongContext"
mood="sad"
/>
</div>
</template>
<script>
import ContainerComponents from './container-components.js';
import CoursewarePluginComponents from './plugin-components.js';
import CoursewareStructuralElementPermissions from './CoursewareStructuralElementPermissions.vue';
import CoursewareContentPermissions from './CoursewareContentPermissions.vue';
import CoursewareStructuralElementDiscussion from './CoursewareStructuralElementDiscussion.vue';
import CoursewareAccordionContainer from './CoursewareAccordionContainer.vue';
import CoursewareCompanionBox from './CoursewareCompanionBox.vue';
import CoursewareWellcomeScreen from './CoursewareWellcomeScreen.vue';
import CoursewareEmptyElementBox from './CoursewareEmptyElementBox.vue';
import CoursewareListContainer from './CoursewareListContainer.vue';
import CoursewareTabsContainer from './CoursewareTabsContainer.vue';
import CoursewareRibbon from './CoursewareRibbon.vue';
import CoursewareTabs from './CoursewareTabs.vue';
import CoursewareTab from './CoursewareTab.vue';
import CoursewareExport from '@/vue/mixins/courseware/export.js';
import CoursewareOerMessage from '@/vue/mixins/courseware/oermessage.js';
import CoursewareDateInput from './CoursewareDateInput.vue';
import IsoDate from './IsoDate.vue';
import StudipDialog from '../StudipDialog.vue';
import { mapActions, mapGetters } from 'vuex';
export default {
name: 'courseware-structural-element',
components: {
CoursewareStructuralElementPermissions,
CoursewareContentPermissions,
CoursewareRibbon,
CoursewareListContainer,
CoursewareAccordionContainer,
CoursewareTabsContainer,
CoursewareCompanionBox,
CoursewareWellcomeScreen,
CoursewareEmptyElementBox,
CoursewareTabs,
CoursewareTab,
CoursewareDateInput,
props: ['canVisit', 'orderedStructuralElements', 'structuralElement'],
mixins: [CoursewareExport, CoursewareOerMessage],
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
data() {
return {
newChapterName: '',
newChapterParent: 'descendant',
currentElement: '',
uploadFileError: '',
textCompanionWrongContext: this.$gettext('Die angeforderte Seite ist nicht Teil dieser Courseware.'),
textEdit: {
title: this.$gettext('Seite bearbeiten'),
confirm: this.$gettext('Speichern'),
close: this.$gettext('Schließen'),
basic: this.$gettext('Grunddaten'),
image: this.$gettext('Bild'),
meta: this.$gettext('Metadaten'),
approval: this.$gettext('Rechte'),
visible: this.$gettext('Sichtbarkeit'),
},
textInfo: {
title: this.$gettext('Informationen zur Seite'),
close: this.$gettext('Schließen'),
},
textExport: {
title: this.$gettext('Seite exportieren'),
confirm: this.$gettext('Exportieren'),
close: this.$gettext('Schließen'),
},
textAdd: {
title: this.$gettext('Seite hinzufügen'),
confirm: this.$gettext('Erstellen'),
close: this.$gettext('Schließen'),
},
textRibbon: {
perv: this.$gettext('zurück'),
next: this.$gettext('weiter'),
},
textRemoveLock: {
title: this.$gettext('Sperre aufheben'),
alert: this.$gettext('Möchten Sie die Sperre der Seite wirklich aufheben?'),
},
exportRunning: false,
exportChildren: false,
containerList: [],
isDragging: false,
dragOptions: {
animation: 0,
group: 'description',
disabled: false,
ghostClass: 'container-ghost',
},
errorEmptyChapterName: false,
publicLink: {
passsword: '',
'expire-date': ''
};
},
computed: {
...mapGetters({
courseware: 'courseware',
consumeMode: 'consumeMode',
containerById: 'courseware-containers/byId',
relatedContainers: 'courseware-containers/related',
relatedStructuralElements: 'courseware-structural-elements/related',
structuralElementById: 'courseware-structural-elements/byId',
userIsTeacher: 'userIsTeacher',
pluginManager: 'pluginManager',
showEditDialog: 'showStructuralElementEditDialog',
showAddDialog: 'showStructuralElementAddDialog',
showExportDialog: 'showStructuralElementExportDialog',
showInfoDialog: 'showStructuralElementInfoDialog',
showDeleteDialog: 'showStructuralElementDeleteDialog',
showOerDialog: 'showStructuralElementOerDialog',
showSuggestOerDialog: 'showSuggestOerDialog',
showLinkDialog: 'showStructuralElementLinkDialog',
oerEnabled: 'oerEnabled',
licenses: 'licenses',
exportState: 'exportState',
sortMode: 'structuralElementSortMode',
viewMode: 'viewMode',
taskById: 'courseware-tasks/byId',
blocked: 'currentElementBlocked',
blockerId: 'currentElementBlockerId',
blockedByThisUser: 'currentElementBlockedByThisUser',
blockedByAnotherUser: 'currentElementBlockedByAnotherUser',
currentId() {
return this.structuralElement?.id;
},
title: this.$gettext('Seite auf dem OER Campus veröffentlichen'),
confirm: this.$gettext('Veröffentlichen'),
close: this.$gettext('Schließen'),
textSuggestOer() {
return {
title: this.$gettext('Material für den OER Campus vorschlagen'),
confirm: this.$gettext('Material vorschlagen'),
close: this.$gettext('Schließen'),
};
},
inCourse() {
return this.$store.getters.context.type === 'courses';
},
inContent() {
// The rights tab in contents will be only visible to the owner.
return this.$store.getters.context.type === 'users' && this.userId === this.currentElement.relationships.user.data.id;
},
textDelete() {
let textDelete = {};
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.$gettextInterpolate('Möchten Sie die Seite %{ pageTitle } und alle ihre Unterseiten wirklich löschen?', {pageTitle: this.structuralElement.attributes.title});
}
return textDelete;
},
validContext() {
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
) {
valid = true;
}
}
if (context.type === 'users' && this.currentElement.relationships) {
if (
this.currentElement.relationships.user &&
context.id === this.currentElement.relationships.user.data.id
) {
if (context.type === 'sharedusers') {
if (context.id === this.courseware.relationships.root.data.id) {
valid = true;
}
}
if (context.type === 'public') {
valid = true;
}
return valid;
},
image() {
return this.structuralElement.relationships?.image?.meta?.['download-url'] ?? null;
},
structuralElementLoaded() {
return this.structuralElement !== null && this.structuralElement !== {};
},
ancestors() {
if (!this.structuralElement) {
return [];
}
const finder = (parent) => {
const parentId = parent.relationships?.parent?.data?.id;
if (!parentId) {
return null;
}
if (!element) {
console.error(`CoursewareStructuralElement#ancestors: Could not find parent by ID: "${parentId}".`);
}
return element;
};
const visitAncestors = function* (node) {
const parent = finder(node);
if (parent) {
yield parent;
const currentIndex = this.orderedStructuralElements.indexOf(this.structuralElement.id);
if (currentIndex <= 0) {
const previousId = this.orderedStructuralElements[currentIndex - 1];
const previous = this.structuralElementById({ id: previousId });
return previous;
const currentIndex = this.orderedStructuralElements.indexOf(this.structuralElement.id);
const lastIndex = this.orderedStructuralElements.length - 1;
if (currentIndex === -1 || currentIndex === lastIndex) {
return null;
const nextId = this.orderedStructuralElements[currentIndex + 1];
const next = this.structuralElementById({ id: nextId });
return next;
},
empty() {
if (this.containers === null) {
return true;
} else {
return !this.containers.some((container) => container.relationships.blocks.data.length > 0);
return (
this.relatedContainers({
parent: this.structuralElement,
relationship: 'containers',
}) ?? []
);
},
noContainers() {
if (this.containers === null) {
return true;
} else {
return this.containers.length === 0;
}
},
canEdit() {
if (!this.structuralElement) {
return false;
}
return this.structuralElement.attributes['can-edit'];
},
isRoot() {
return this.structuralElement.relationships.parent.data === null;
},
editor() {
parent: this.structuralElement,
relationship: 'editor',
});
return editor?.attributes['formatted-name'] ?? '';
},
menuItems() {
let menu = [
{ id: 4, label: this.$gettext('Informationen anzeigen'), icon: 'info', emit: 'showInfo' },
{ id: 5, label: this.$gettext('Lesezeichen setzen'), icon: 'star', emit: 'setBookmark' },
Jan-Hendrik Willms
committed
{ id: 6, label: this.$gettext('Material für den OER Campus vorschlagen'), icon: 'oer-campus', emit: 'showSuggest' },
if (!this.blocked) {
menu.push({
id: 1,
label: this.$gettext('Seite bearbeiten'),
icon: 'edit',
emit: 'editCurrentElement',
});
menu.push({
id: 2,
label: this.$gettext('Abschnitte sortieren'),
icon: 'arr_1sort',
emit: 'sortContainers',
});
}
if (this.blocked && this.blockedByAnotherUser && this.userIsTeacher) {
menu.push({
id: 1,
label: this.textRemoveLock.title,
icon: 'lock-unlocked',
emit: 'removeLock',
});
}
menu.push({ id: 3, label: this.$gettext('Seite hinzufügen'), icon: 'add', emit: 'addElement' });
}
if (this.context.type === 'users') {
menu.push({ id: 7, label: this.$gettext('Öffentlichen Link erzeugen'), icon: 'group', emit: 'linkElement' });
if (!this.isRoot && this.canEdit && !this.isTask && !this.blocked) {
id: 8,
label: this.$gettext('Seite löschen'),
icon: 'trash',
emit: 'deleteCurrentElement',
});
}
menu.sort((a, b) => a.id - b.id);
return menu;
},
colors() {
const colors = [
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
{
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) => {
if (color.darkmode) {
elementColors.push(color);
}
});
return elementColors;
},
currentLicenseName() {
for (let i = 0; i < this.licenses.length; i++) {
if (this.licenses[i]['id'] == this.currentElement.attributes.payload.license_type) {
return this.licenses[i]['name'];
}
}
return '';
},
blockingUser() {
if (this.blockedByAnotherUser) {
return this.userById({id: this.blockerId});
}
return null;
blockingUserName() {
return this.blockingUser ? this.blockingUser.attributes['formatted-name'] : '';
discussView() {
return this.viewMode === 'discuss';
},
editView() {
return this.viewMode === 'edit';
},
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
pdfExportURL() {
if (this.context.type === 'users') {
return STUDIP.URLHelper.getURL(
'dispatch.php/contents/courseware/pdf_export/' + this.structuralElement.id
);
}
if (this.context.type === 'courses') {
return STUDIP.URLHelper.getURL(
'dispatch.php/course/courseware/pdf_export/' + this.structuralElement.id
);
}
return '';
},
isTask() {
return this.structuralElement?.relationships.task.data !== null;
},
task() {
if (!this.isTask) {
return null;
}
return this.taskById({ id: this.structuralElement.relationships.task.data.id });
},
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
solver() {
if (this.task) {
const solver = this.task.relationships.solver.data;
if (solver.type === 'users') {
return this.userById({ id: solver.id });
}
if (solver.type === 'status-groups') {
return this.groupById({ id: solver.id });
}
}
return null;
},
solverName() {
if (this.solver) {
if (this.solver.type === 'users') {
return this.solver.attributes['formatted-name'];
}
if (this.solver.type === 'status-groups') {
return this.solver.attributes.name;
}
}
return '';
},
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
canAddElements() {
if (!this.isTask) {
return true;
}
// still loading
if (!this.task) {
return false;
}
const taskGroup = this.relatedTaskGroups({ parent: this.task, relationship: 'task-group' });
return taskGroup?.attributes['solver-may-add-blocks'];
},
showEmptyElementBox() {
if (!this.empty) {
return false;
}
return (
(!this.isRoot && this.canEdit) || !this.canEdit || (!this.noContainers && this.isRoot && this.canEdit)
);
},
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
isLink() {
if (this.structuralElement) {
return this.structuralElement.attributes['is-link'] === 1;
}
return false;
},
linkedElement() {
if (this.isLink) {
return this.structuralElementById({ id: this.structuralElement.attributes['target-id']});
}
return null;
},
linkedContainers() {
let containers = [];
let relatedContainers = this.linkedElement?.relationships?.containers?.data;
if (relatedContainers) {
for (const container of relatedContainers) {
containers.push(this.containerById({ id: container.id}));
}
}
return containers;
},
owner() {
const user = this.$store.getters['users/related']({
parent: { type: this.structuralElement.type, id: this.structuralElement.id },
relationship: 'owner'
});
return user ? user : null;
},
ownerName() {
return this.owner ? this.owner.attributes['formatted-name'] : '?';
},
},
methods: {
...mapActions({
createStructuralElement: 'createStructuralElement',
updateStructuralElement: 'updateStructuralElement',
deleteStructuralElement: 'deleteStructuralElement',
lockObject: 'lockObject',
unlockObject: 'unlockObject',
addBookmark: 'addBookmark',
companionInfo: 'companionInfo',
uploadImageForStructuralElement: 'uploadImageForStructuralElement',
deleteImageForStructuralElement: 'deleteImageForStructuralElement',
companionSuccess: 'companionSuccess',
showElementEditDialog: 'showElementEditDialog',
showElementAddDialog: 'showElementAddDialog',
showElementExportDialog: 'showElementExportDialog',
showElementInfoDialog: 'showElementInfoDialog',
showElementDeleteDialog: 'showElementDeleteDialog',
showElementOerDialog: 'showElementOerDialog',
showElementLinkDialog: 'showElementLinkDialog',
updateShowSuggestOerDialog: 'updateShowSuggestOerDialog',
updateContainer: 'updateContainer',
setStructuralElementSortMode: 'setStructuralElementSortMode',
sortContainersInStructualElements: 'sortContainersInStructualElements',
loadTask: 'loadTask',
loadStructuralElement: 'loadStructuralElement',
createLink: 'createLink',
}),
initCurrent() {
this.currentElement = _.cloneDeep(this.structuralElement);
this.uploadFileError = '';
},
async menuAction(action) {
switch (action) {
case 'removeLock':
this.displayRemoveLockDialog();
break;
if (this.blockedByAnotherUser) {
this.companionInfo({ info: this.$gettext('Diese Seite wird bereits bearbeitet.') });
return false;
}
try {
await this.lockObject({ id: this.currentId, type: 'courseware-structural-elements' });
if (error.status === 409) {
this.companionInfo({ info: this.$gettext('Diese Seite wird bereits bearbeitet.') });
} else {
console.log(error);
}
return false;
}
this.showElementEditDialog(true);
break;
case 'addElement':
this.newChapterName = '';
this.newChapterParent = 'descendant';
this.showElementAddDialog(true);
break;
case 'deleteCurrentElement':
await this.loadStructuralElement(this.currentId);
if (this.blockedByAnotherUser) {
this.companionInfo({ info: this.$gettextInterpolate('Löschen nicht möglich, da %{blockingUserName} die Seite bearbeitet.', {blockingUserName: this.blockingUserName}) });
return false;
}
await this.lockObject({ id: this.currentId, type: 'courseware-structural-elements' });
this.showElementDeleteDialog(true);
break;
case 'showInfo':
this.showElementInfoDialog(true);
break;
case 'showExportOptions':
this.showElementExportDialog(true);
break;
case 'oerCurrentElement':
this.showElementOerDialog(true);
break;
case 'showSuggest':
this.updateShowSuggestOerDialog(true);
break;
case 'setBookmark':
this.setBookmark();
break;
if (this.blockedByAnotherUser) {
this.companionInfo({ info: this.$gettext('Diese Seite wird bereits bearbeitet.') });
return false;
}
try {
await this.lockObject({ id: this.currentId, type: 'courseware-structural-elements' });
} catch (error) {
if (error.status === 409) {
this.companionInfo({ info: this.$gettext('Diese Seite wird bereits bearbeitet.') });
} else {
console.log(error);
}
return false;
}
this.enableSortContainers();
break;
case 'linkElement':
this.showElementLinkDialog(true);
break;
}
},
async closeEditDialog() {
await this.loadStructuralElement(this.currentElement.id);
if (this.blockedByThisUser) {
await this.unlockObject({ id: this.currentId, type: 'courseware-structural-elements' });
await this.loadStructuralElement(this.currentElement.id);
}
this.showElementEditDialog(false);
this.initCurrent();
},
closeAddDialog() {
this.showElementAddDialog(false);
},
checkUploadFile() {
const file = this.$refs?.upload_image?.files[0];
if (file.size > 2097152) {
this.uploadFileError = this.$gettext('Diese Datei ist zu groß. Bitte wählen Sie eine kleinere Datei.');
} else if (!file.type.includes('image')) {
this.uploadFileError = this.$gettext('Diese Datei ist kein Bild. Bitte wählen Sie ein Bild aus.');
} else {
this.uploadFileError = '';
}
},
deleteImage() {
this.deleteImageForStructuralElement(this.currentElement);
this.initCurrent();
},
async storeCurrentElement() {
await this.loadStructuralElement(this.currentElement.id);
if (this.blockedByAnotherUser) {
this.companionWarning({ info: this.$gettextInterpolate('Ihre Änderungen konnten nicht gespeichert werden, da %{blockingUserName} die Bearbeitung übernommen hat.', {blockingUserName: this.blockingUserName}) });
this.showElementEditDialog(false);
return false;
}
if (!this.blocked) {
await this.lockObject({ id: this.currentId, type: 'courseware-structural-elements' });
}
const file = this.$refs?.upload_image?.files[0];
if (file) {
if (file.size > 2097152) {
return false;
}
this.uploadFileError = '';
this.uploadImageForStructuralElement({
structuralElement: this.currentElement,
file,
}).catch((error) => {
console.error(error);
this.uploadFileError = this.$gettext('Fehler beim Hochladen der Datei.');
});
}
if (this.currentElement.attributes['release-date'] !== '') {
this.currentElement.attributes['release-date'] =
new Date(this.currentElement.attributes['release-date']).getTime() / 1000;
}
if (this.currentElement.attributes['withdraw-date'] !== '') {
this.currentElement.attributes['withdraw-date'] =
new Date(this.currentElement.attributes['withdraw-date']).getTime() / 1000;
}
await this.updateStructuralElement({
element: this.currentElement,
id: this.currentId,
});
await this.unlockObject({ id: this.currentId, type: 'courseware-structural-elements' });
this.$emit('select', this.currentId);
enableSortContainers() {
this.setStructuralElementSortMode(true);
},
storeSort() {
this.setStructuralElementSortMode(false);
this.sortContainersInStructualElements({
structuralElement: this.structuralElement,
containers: this.containerList,
});
this.$emit('select', this.currentId);
},
resetSort() {
this.setStructuralElementSortMode(false);
this.containerList = this.containers;
},
async exportCurrentElement(data) {
if (this.exportRunning) {
return;
}
this.exportRunning = true;
await this.sendExportZip(this.currentElement.id, {
withChildren: this.exportChildren,
});
this.exportRunning = false;
this.showElementExportDialog(false);
},
pdfExportCurrentElement() {
this.showElementPdfExportDialog(false);
let url = '';
let withChildren = this.pdfExportChildren ? '/1' : '/0';
if (this.context.type === 'users') {
url = STUDIP.URLHelper.getURL('dispatch.php/contents/courseware/pdf_export/' + this.structuralElement.id + withChildren);
}
if (this.context.type === 'courses') {
url = STUDIP.URLHelper.getURL('dispatch.php/course/courseware/pdf_export/' + this.structuralElement.id + withChildren);
}
if (url) {
window.open(url , '_blank').focus();
}
},
async publishCurrentElement() {
if (this.oerExportRunning) {
return;
}
this.oerExportRunning = true;
await this.exportToOER(this.currentElement, { withChildren: this.oerChildren });
this.oerExportRunning = false;
this.showElementOerDialog(false);
},
async closeDeleteDialog() {
await this.loadStructuralElement(this.currentElement.id);
if (this.blockedByThisUser) {
await this.unlockObject({ id: this.currentId, type: 'courseware-structural-elements' });
}
this.showElementDeleteDialog(false);
},
async deleteCurrentElement() {
await this.loadStructuralElement(this.currentElement.id);
if (this.blockedByAnotherUser) {
this.companionWarning({ info: this.$gettextInterpolate('Löschen nicht möglich, da %{blockingUserName} die Bearbeitung übernommen hat.', {blockingUserName: this.blockingUserName}) });
this.showElementDeleteDialog(false);
return false;
}
let parent_id = this.structuralElement.relationships.parent.data.id;
Marcus Eibrink-Lunzenauer
committed
this.showElementDeleteDialog(false);
this.companionInfo({ info: this.$gettext('Lösche Seite und alle darunter liegenden Elemente.') });
this.deleteStructuralElement({
id: this.currentId,
parentId: this.structuralElement.relationships.parent.data.id,
})
.then(response => {
this.$router.push(parent_id);
this.companionInfo({ info: this.$gettext('Die Seite wurde gelöscht.') });
})
.catch(error => {
this.companionError({ info: this.$gettext('Die Seite konnte nicht gelöscht werden.') });
console.debug(error);
});
},
async createElement() {
let title = this.newChapterName; // this is the title of the new element
let parent_id = this.currentId; // new page is descandant as default
if (this.errorEmptyChapterName = title.trim() === '') {
return;
}
if (this.newChapterParent === 'sibling') {
parent_id = this.structuralElement.relationships.parent.data.id;
}
this.showElementAddDialog(false);
await this.createStructuralElement({
attributes: {
title,
},
parentId: parent_id,
currentId: this.currentId,
});
let newElement = this.$store.getters['courseware-structural-elements/lastCreated'];
this.companionSuccess({
this.$gettextInterpolate('Die Seite %{ pageTitle } wurde erfolgreich angelegt.', {pageTitle: newElement.attributes.title})
},
containerComponent(container) {
return 'courseware-' + container.attributes['container-type'] + '-container';
},
setBookmark() {
this.addBookmark(this.structuralElement);
this.companionInfo({ info: this.$gettext('Das Lesezeichen wurde gesetzt.') });
},
updateReadApproval(approval) {
this.currentElement.attributes['read-approval'] = approval;
},
updateWriteApproval(approval) {
this.currentElement.attributes['write-approval'] = approval;
},
sendOerSuggestion() {
this.suggestViaAction(this.currentElement, this.additionalText);
this.updateShowSuggestOerDialog(false);
1609
1610
1611
1612
1613
1614
1615
1616
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627
1628
1629
1630
1631
1632
1633
},
async createElementLink() {
const date = this.publicLink['expire-date'];
const publicLink = {
attributes: {
password: this.publicLink.password,
'expire-date': date === '' ? new Date(0).toISOString() : new Date(date).toISOString()
},
relationships: {
'structural-element': {
data: {
id: this.currentElement.id,
type: 'courseware-structural-elements'
}
}
}
}
await this.createLink({ publicLink });
this.companionSuccess({
info: this.$gettext('Öffentlicher Link wurde angelegt. Unter Freigaben finden Sie alle Ihre öffentlichen Links.'),
});
this.closeLinkDialog();
},
closeLinkDialog() {
passsword: '',
'expire-date': ''
};
this.showElementLinkDialog(false);
},
displayRemoveLockDialog() {
this.showElementRemoveLockDialog(true);
},
async executeRemoveLock() {
await this.unlockObject({ id: this.currentId, type: 'courseware-structural-elements' });
await this.loadStructuralElement(this.currentElement.id);
this.showElementRemoveLockDialog(false);
},
created() {
this.pluginManager.registerComponentsLocally(this);
},
watch: {
async structuralElement() {
this.setCurrentElementId(this.structuralElement.id);
this.initCurrent();
if (this.isTask) {
this.loadTask({
taskId: this.structuralElement.relationships.task.data.id,
});
}
if (this.isLink) {
this.loadStructuralElement(this.structuralElement.attributes['target-id']);
}
consumeMode(newState) {
this.consumModeTrap = newState;
},
// this line provides all the components to courseware plugins
provide: () => ({
containerComponents: ContainerComponents,
coursewarePluginComponents: CoursewarePluginComponents,
}),