Newer
Older
<template>
<studip-wizard-dialog
:title="$gettext('Lernmaterial kopieren')"
:confirmText="$gettext('Kopieren')"
:closeText="$gettext('Abbrechen')"
:lastRequiredSlotId="2"
:requirements="requirements"
:slots="wizardSlots"
@close="close"
@confirm="copy"
>
<template v-slot:source>
<form class="default" @submit.prevent="">
<fieldset class="radiobutton-set">
<template v-if="inCourseContext">
<input
id="cw-shelf-copy-source-self"
type="radio"
v-model="source"
value="self"
:aria-description="text.sourceSelf"
/>
<label @click="source = 'self'" for="cw-shelf-copy-source-self">
<div class="icon"><studip-icon shape="seminar" :size="32"/></div>
<div class="text">{{ text.sourceSelf }}</div>
<studip-icon shape="radiobutton-unchecked" :size="24" class="unchecked" />
<studip-icon shape="check-circle" :size="24" class="check" />
</label>
</template>
<input
id="cw-shelf-copy-source-courses"
type="radio"
v-model="source"
value="courses"
:aria-description="text.sourceCourses"
/>
<label @click="source = 'courses'" for="cw-shelf-copy-source-courses">
<div class="icon"><studip-icon shape="seminar" :size="32"/></div>
<div class="text">{{ text.sourceCourses }}</div>
<studip-icon shape="radiobutton-unchecked" :size="24" class="unchecked" />
<studip-icon shape="check-circle" :size="24" class="check" />
</label>
<input
id="cw-shelf-copy-source-users"
type="radio"
v-model="source"
value="users"
:aria-description="text.sourceUsers"
/>
<label @click="source = 'users'" for="cw-shelf-copy-source-users">
<div class="icon"><studip-icon shape="content" :size="32"/></div>
<div class="text">{{ text.sourceUsers }}</div>
<studip-icon shape="radiobutton-unchecked" :size="24" class="unchecked" />
<studip-icon shape="check-circle" :size="24" class="check" />
</label>
</fieldset>
<template v-if="source === 'courses'">
<label>
<span>{{ $gettext('Semester') }}</span><span aria-hidden="true"></span>
<select v-model="selectedSemester">
<option value="all">{{ $gettext('Alle Semester') }}</option>
<option v-for="semester in semesterMap" :key="semester.id" :value="semester.id">
{{ semester.attributes.title }}
</option>
</select>
</label>
<label>
<span>{{ $gettext('Veranstaltung') }}</span><span aria-hidden="true" class="wizard-required">*</span>
<studip-select
v-if="filteredCourses.length !== 0 && !loadingCourses"
:options="filteredCourses"
:clearable="false"
:reduce="option => option.id"
v-model="selectedRange"
>
<template #open-indicator="selectAttributes">
<span v-bind="selectAttributes"
/></span>
</template>
</studip-select>
<p v-if="loadingCourses">
{{$gettext('Lade Veranstaltungen…')}}
</p>
<p v-if="filteredCourses.length === 0 && !loadingCourses">
{{$gettext('Es wurden keine geeigneten Veranstaltungen gefunden.')}}
</p>
</label>
</template>
</form>
</template>
<template v-slot:unit>
<form class="default" @submit.prevent="">
<fieldset v-if="units.length !== 0" class="radiobutton-set">
<template v-for="unit in units">
<input
:id="'cw-shelf-copy-unit-' + unit.id"
type="radio"
v-model="selectedUnit"
:checked="unit.id === selectedUnitId"
:value="unit"
:key="'radio-' + unit.id"
:aria-description="unit.element.attributes.title"
/>
<label @click="selectedUnit = unit" :key="'label-' + unit.id" :for="'cw-shelf-copy-unit-' + unit.id">
<div class="icon"><studip-icon shape="courseware" :size="32"/></div>
<div class="text">{{ unit.element.attributes.title }}</div>
<studip-icon shape="radiobutton-unchecked" :size="24" class="unchecked" />
<studip-icon shape="check-circle" :size="24" class="check" />
</label>
</template>
</fieldset>
<courseware-companion-box
v-else
mood="sad"
:msgCompanion="$gettext('Für die gewählte Quelle stehen keine Lernmaterialien zur Verfügung.')"
/>
</form>
</template>
<template v-slot:edit>
<form v-if="selectedUnit" class="default" @submit.prevent="">
<label>
{{$gettext('Titel')}}
<input type="text" v-model="modifiedTitle" :placeholder="selectedUnitTitle" name="title" />
</label>
<label>
{{$gettext('Farbe')}}
<studip-select
v-model="modifiedColor"
:options="colors"
:reduce="(color) => color.class"
:clearable="false"
label="class"
>
<template #open-indicator="selectAttributes">
<span v-bind="selectAttributes"
/></span>
</template>
<template #no-options>
{{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
</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>
</studip-select>
</label>
<label>
{{$gettext('Beschreibung')}}
<textarea v-model="modifiedDescription" :placeholder="selectedUnitDescription" />
</label>
</form>
<courseware-companion-box
v-else
mood="pointing"
:msgCompanion="$gettext('Bitte wählen Sie ein Lernmaterial aus.')"
/>
</template>
</studip-wizard-dialog>
</template>
<script>
import CoursewareCompanionBox from '../layouts/CoursewareCompanionBox.vue';
import colorMixin from '@/vue/mixins/courseware/colors.js';
import StudipSelect from '../../StudipSelect.vue';
import StudipWizardDialog from '../../StudipWizardDialog.vue';
import { mapActions, mapGetters } from 'vuex'
export default {
name: 'courseware-shelf-dialog-copy',
mixins: [colorMixin],
components: {
CoursewareCompanionBox,
StudipWizardDialog,
StudipSelect,
},
data() {
return {
wizardSlots: [
{ id: 1, valid: false, name: 'source', title: this.$gettext('Quelle'), icon: 'source',
description: this.$gettext('Wählen Sie hier den Ort in Stud.IP aus, an dem sich das zu kopierende Lernmaterial befindet.') },
{ id: 2, valid: false, name: 'unit', title: this.$gettext('Lernmaterial'), icon: 'courseware',
description: this.$gettext('Wählen Sie hier das gewünschte Lernmaterial aus der Liste aus. Eine Auswahl wird durch einen grauen Hintergrund und einen Kontrollhaken angezeigt.') },
{ id: 3, valid: true, name: 'edit', title: this.$gettext('Anpassen'), icon: 'edit', target: 'title',
description: this.$gettext('Sie können hier die Daten des zu kopierenden Lernmaterials anpassen. Eine Anpassung ist optional, Sie können das Lernmaterial auch unverändert kopieren.') },
],
source: '',
loadingCourses: false,
courses: [],
selectedRange: '',
loadingUnits: false,
selectedUnit: null,
selectedUnitElement: null,
modifiedTitle: '',
modifiedColor: '',
modifiedDescription: '',
requirements: [],
text: {
source: this.$gettext('Quelle'),
unit: this.$gettext('Lernmaterial'),
sourceSelf: this.$gettext('Diese Veranstaltung'),
sourceCourses: this.$gettext('Veranstaltung'),
sourceUsers: this.$gettext('Arbeitsplatz'),
}
}
},
computed: {
...mapGetters({
userId: 'userId',
coursewareUnits: 'courseware-units/all',
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
structuralElementById: 'courseware-structural-elements/byId',
context: 'context'
}),
colors() {
return this.mixinColors.filter(color => color.darkmode);
},
units() {
let units = this.coursewareUnits.filter(unit => unit.relationships.range.data.id === this.selectedRange);
units.forEach(unit => {
unit.element = this.getUnitElement(unit);
});
if (this.inCourseContext) {
units = units.filter(unit => unit.element.attributes.purpose !== 'template');
}
return units;
},
selectedUnitId() {
return this.selectedUnit?.id;
},
inCourseContext() {
return this.context.type === 'courses';
},
selectedUnitTitle() {
return this.selectedUnitElement.attributes.title ?? '';
},
selectedUnitDescription() {
return this.selectedUnitElement.attributes.payload.description ?? '';
const courses = this.courses.filter((course) => { return course.id !== this.context.id });
if (this.selectedSemester === 'all') {
return courses;
} else {
return courses.filter((course) => {
return course.relationships['start-semester'].data.id === this.selectedSemester;
});
}
}
},
async mounted() {
this.initWizardData();
},
methods: {
...mapActions({
companionSuccess: 'companionSuccess',
loadCourseUnits: 'loadCourseUnits',
loadUsersCourses: 'loadUsersCourses',
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
300
301
302
303
304
305
loadUserUnits: 'loadUserUnits',
setShowUnitCopyDialog: 'setShowUnitCopyDialog',
copyUnit: 'copyUnit',
}),
initWizardData() {
this.source = this.inCourseContext ? 'self' : 'users';
this.selectedRange = '';
this.selectedUnit = null;
},
close() {
this.setShowUnitCopyDialog(false);
this.initWizardData();
},
getUnitElement(unit) {
return this.structuralElementById({id: unit.relationships['structural-element'].data.id});
},
async copy() {
if (this.selectedUnit) {
const element = this.getUnitElement(this.selectedUnit);
const modified = {
title: this.modifiedTitle !== '' ? this.modifiedTitle : this.selectedUnitTitle,
color: this.modifiedColor,
description: this.modifiedDescription !== '' ? this.modifiedDescription : this.selectedUnitDescription
}
await this.copyUnit({ unitId: this.selectedUnit.id, modified: modified });
this.companionSuccess({ info: this.$gettext('Lernmaterial kopiert.') });
this.close();
}
},
async updateCourses() {
this.loadingCourses = true;
this.courses = await this.loadUsersCourses({ userId: this.userId, withCourseware: true });
this.loadingCourses = false;
},
loadSemesterMap() {
let view = this;
let semesters = [];
this.courses.every(course => {
let semId = course.relationships['start-semester'].data.id;
if(!semesters.includes(semId)) {
semesters.push(semId);
}
return true;
});
semesters.every(semester => {
view.loadSemester({id: semester}).then( () => {
view.semesterMap.push(view.semesterById({id: semester}));
view.semesterMap.sort((a, b) => new Date(b.attributes.start) - new Date(a.attributes.start));
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
392
393
394
async updateCourseUnits(cid) {
this.loadingUnits = true;
await this.loadCourseUnits(cid);
this.loadingUnits = false;
},
setElementData() {
this.selectedUnitElement = this.getUnitElement(this.selectedUnit);
this.modifiedTitle = this.selectedUnitElement.attributes.title;
this.modifiedColor = this.selectedUnitElement.attributes.payload.color;
this.modifiedDescription = this.selectedUnitElement.attributes.payload.description;
},
resetElementData() {
this.modifiedTitle = '';
this.modifiedColor = '';
this.modifiedDescription = '';
},
validateSelection() {
this.requirements = [];
if (this.selectedRange === '') {
this.requirements.push({slot: this.wizardSlots[0], text: this.text.source });
}
if (this.selectedUnit === null) {
this.requirements.push({slot: this.wizardSlots[1], text: this.text.unit });
}
}
},
watch: {
selectedUnit(newUnit) {
this.validateSelection();
const slot = this.wizardSlots[1];
if (newUnit !== null) {
slot.valid = true;
this.setElementData();
} else {
slot.valid = false;
this.resetElementData();
}
},
selectedRange(newRid) {
this.selectedUnit = null;
this.validateSelection();
const slot = this.wizardSlots[0];
if (newRid !== '') {
slot.valid = true;
if (this.source === 'courses' || this.source === 'self') {
this.updateCourseUnits(newRid);
}
if (this.source === 'users') {
this.loadUserUnits(newRid);
}
} else {
slot.valid = false;
}
},
source(newSource) {
switch (newSource) {
case 'self':
this.selectedRange = this.context.id;
break;
case 'courses':
this.selectedRange = '';
this.updateCourses();
break;
case 'users':
this.selectedRange = this.userId;
break;
}
},
selectedSemester(newSemester) {
this.selectedRange = '';
}
}
}