path: root/resources/vue/components/courseware/unit/CoursewareShelfDialogAdd.vue

<template>
    <studip-wizard-dialog
        :title="$gettext('Lernmaterial hinzufügen')"
        :confirmText="$gettext('Erstellen')"
        :closeText="$gettext('Abbrechen')"
        :slots="wizardSlots"
        :lastRequiredSlotId="1"
        :requirements="requirements"
        @close="setShowUnitNewDialog(false)"
        @confirm="createUnit"
    >
        <template v-slot:basic>
            <form class="default" @submit.prevent="">
                <label>
                    <span>{{ text.title }}</span><span aria-hidden="true" class="wizard-required">*</span>
                    <input type="text" v-model="addWizardData.title" name="title" required/>
                </label>
                <label>
                    <span>{{ text.description }}</span><span aria-hidden="true" class="wizard-required">*</span>
                    <textarea v-model="addWizardData.description" name="description" required/>
                </label>
            </form>
        </template>
        <template v-slot:layout>
            <form class="default" @submit.prevent="">
                <label>
                        {{ $gettext('Bild hochladen') }}
                        <br>
                        <input class="cw-file-input" ref="upload_image" type="file" accept="image/*" name="image" @change="checkUploadFile"/>
                        <CoursewareCompanionBox
                            v-if="uploadFileError"
                            :msgCompanion="uploadFileError"
                            mood="sad"
                            class="cw-companion-box-in-form"
                        />
                </label>
                <template v-if="selectedStockImage">
                    <StockImageSelectableImageCard :stock-image="selectedStockImage" />
                    <label>
                        <button class="button" type="button" @click="selectedStockImage = null">
                            {{ $gettext('Bild entfernen') }}
                        </button>
                    </label>
                </template>
                <label v-else>
                    {{ $gettext('oder') }}
                    <br>
                    <button class="button" type="button" @click="showStockImageSelector = true">
                        {{ $gettext('Aus dem Bilderpool auswählen') }}
                    </button>
                    <StockImageSelector v-if="showStockImageSelector" @close="showStockImageSelector = false" @select="onSelectStockImage" />
                </label>
                <label for="color">
                    {{ $gettext('Farbe') }}
                </label>
                <StudipSelect
                    id="color"
                    v-model="addWizardData.color"
                    :options="colors"
                    :reduce="(color) => color.class"
                    label="name"
                    :clearable="false"
                >
                    <template #no-options>
                        {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
                    </template>
                    <template #selected-option="option">
                        <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
                        ><span>{{ option.name }}</span>
                    </template>
                    <template #option="option">
                        <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
                        ><span>{{ option.name }}</span>
                    </template>
                </StudipSelect>
                <label>
                    <span>{{ $gettext('Titelseite') }}</span>
                    <select v-model="addWizardData.rootLayout" name="layout">
                        <option value="default">{{ $gettext('Automatisch') }}</option>
                        <option value="toc">{{ $gettext('Automatisch mit Inhaltsverzeichnis') }}</option>
                        <option value="classic">{{ $gettext('Frei bearbeitbar') }}</option>
                        <option value="none">{{ $gettext('Keine') }}</option>
                    </select>
                </label>
            </form>
        </template>
        <template v-slot:advanced>
            <form class="default" @submit.prevent="">
                <label>
                    {{ $gettext('Art des Lernmaterials') }}
                    <select v-model="addWizardData.purpose" name="purpose">
                        <option value="content">{{ $gettext('Inhalt') }}</option>
                        <option value="oer">{{ $gettext('OER-Material') }}</option>
                        <option value="portfolio">{{ $gettext('ePortfolio') }}</option>
                        <option value="draft">{{ $gettext('Entwurf') }}</option>
                        <option v-if="!inCourseContext" value="template">{{ $gettext('Aufgabenvorlage') }}</option>
                        <option value="other">{{ $gettext('Sonstiges') }}</option>
                    </select>
                </label>
                <template v-if="purposeIsOer">
                    <label>
                        {{ $gettext('Lizenztyp') }}
                        <select v-model="addWizardData.license_type">
                            <option v-for="license in licenses" :key="license.id" :value="license.id">
                                {{ license.name }}
                            </option>
                        </select>
                    </label>
                    <label>
                        {{ $gettext('Geschätzter zeitlicher Aufwand') }}
                        <input type="text" v-model="addWizardData.required_time" />
                    </label>
                    <label>
                        {{ $gettext('Niveau') }}<br />
                        {{ $gettext('von') }}
                        <select v-model="addWizardData.difficulty_start">
                            <option value="">-</option>
                            <option
                                v-for="difficulty_start in 12"
                                :key="difficulty_start"
                                :value="difficulty_start"
                            >
                                {{ difficulty_start }}
                            </option>
                        </select>
                        {{ $gettext('bis') }}
                        <select v-model="addWizardData.difficulty_end">
                            <option value="">-</option>
                            <option
                                v-for="difficulty_end in 12"
                                :key="difficulty_end"
                                :value="difficulty_end"
                            >
                                {{ difficulty_end }}
                            </option>
                        </select>
                    </label>
                </template>
            </form>
        </template>
    </studip-wizard-dialog>
</template>

<script>
import CoursewareCompanionBox from '../layouts/CoursewareCompanionBox.vue';
import StockImageSelectableImageCard from '../../stock-images/SelectableImageCard.vue';
import StockImageSelector from '../../stock-images/SelectorDialog.vue';
import StudipSelect from '../../StudipSelect.vue';
import StudipWizardDialog from '../../StudipWizardDialog.vue';
import colorMixin from '@/vue/mixins/courseware/colors.js';
import { mapActions, mapGetters } from 'vuex';

export default {
    name: 'courseware-shelf-dialog-add',
    mixins: [colorMixin],
    components: {
        CoursewareCompanionBox,
        StockImageSelectableImageCard,
        StockImageSelector,
        StudipWizardDialog,
        StudipSelect,
    },
    data() {
        return {
            wizardSlots: [
                { id: 1, valid: false, name: 'basic', title: this.$gettext('Grundeinstellungen'), icon: 'courseware', target: 'title',
                  description: this.$gettext('Wählen Sie einen kurzen, prägnanten Titel und beschreiben Sie in einigen Worten den Inhalt des Lernmaterials. Eine Beschreibung erleichtert Lernenden die Auswahl des Lernmaterials.') },
                { id: 2, valid: true, name: 'layout', title: this.$gettext('Darstellung'), icon: 'picture', target: 'image',
                  description: this.$gettext('Ein Vorschaubild motiviert Lernende das Lernmaterial zu erkunden. Die Kombination aus Bild und Farbe erleichtert das wiederfinden des Lernmaterials in der Übersicht.') },
                { id: 3, valid: true, name: 'advanced', title: this.$gettext('Zusatzangaben'), icon: 'info-list', target: 'purpose',
                  description: this.$gettext('Hier können Sie detaillierte Angaben zum Lernmaterial eintragen. Diese sind besonders interessant wenn das Lernmaterial als OER geteilt wird.') }
            ],
            text: {
                title: this.$gettext('Titel des Lernmaterials'),
                description: this.$gettext('Beschreibung')
            },
            addWizardData: {},
            uploadFileError: '',
            requirements: [],
            showStockImageSelector: false,
            selectedStockImage: null,
        }
    },
    computed: {
        ...mapGetters({
            licenses: 'licenses',
            context: 'context',
            lastCreateCoursewareUnit: 'courseware-units/lastCreated',
            structuralElementById:  'courseware-structural-elements/byId',
        }),
        inCourseContext() {
            return this.context.type === 'courses';
        },
        colors() {
            return this.mixinColors.filter(color => color.darkmode);
        },
        purposeIsOer() {
            return this.addWizardData.purpose === 'oer';
        },
    },
    mounted() {
        this.initAddWizardData();
    },
    methods: {
        ...mapActions({
            companionError: 'companionError',
            companionInfo: 'companionInfo',
            companionSuccess: 'companionSuccess',
            createCoursewareUnit: 'courseware-units/create',
            setShowUnitNewDialog: 'setShowUnitNewDialog',
            setStockImageForStructuralElement: 'setStockImageForStructuralElement',
            loadStructuralElementById: 'courseware-structural-elements/loadById',
            uploadImageForStructuralElement: 'uploadImageForStructuralElement',
        }),
        initAddWizardData() {
            this.addWizardData = {
                title: '',
                description: '',
                purpose: 'content',
                color: 'studip-blue',
                rootLayout: 'default'
            }
        },
        validateSlots() {
            let valid = true;
            this.wizardSlots.forEach(slot => {
                if (!slot.valid) {
                    valid = false;
                }
            });

            return valid;
        },
        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 Datei aus, die kleiner als 2MB ist.');
            } 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 = '';
                this.selectedStockImage = null;
            }
        },
        async createUnit() {
            if (!this.validateSlots()) {
                this.companionError({
                    info: this.$gettext('Bitte füllen Sie alle notwendigen Angaben aus.'),
                });
                return false;
            }
            const file = this.$refs?.upload_image?.files[0];
            const unit = {
                attributes: {
                    title: this.addWizardData.title,
                    purpose: this.addWizardData.purpose,
                    payload: {
                        description: this.addWizardData.description,
                        color: this.addWizardData.color,
                        license_type: this.purposeIsOer ? this.addWizardData.license_type : '',
                        required_time: this.purposeIsOer ? this.addWizardData.required_time : '',
                        difficulty_start: this.purposeIsOer ? this.addWizardData.difficulty_start : '',
                        difficulty_end: this.purposeIsOer ? this.addWizardData.difficulty_end : ''
                    },
                    settings: {
                        'root-layout': this.addWizardData.rootLayout
                    }
                },
                relationships: {
                    range: {
                        data: {
                            type: this.context.type,
                            id: this.context.id
                        }
                    }
                }
            };
            this.setShowUnitNewDialog(false);

            await this.createCoursewareUnit(unit, { root: true });
            this.companionSuccess({ info: this.$gettext('Neues Lernmaterial angelegt.') });
            const newElementId = this.lastCreateCoursewareUnit.relationships['structural-element'].data.id
            await this.loadStructuralElementById({ id: newElementId });
            let newStructuralElement = this.structuralElementById({id: newElementId});

            try {
                if (file) {
                    await this.uploadImageForStructuralElement({
                        structuralElement: newStructuralElement,
                        file,
                    });
                } else if (this.selectedStockImage) {
                    await this.setStockImageForStructuralElement({
                        structuralElement: newStructuralElement,
                        stockImage: this.selectedStockImage,
                    })
                }

                this.loadStructuralElementById({id: newStructuralElement.id, options: {include: 'children'}});
            } catch(error) {
                console.error(error);
                this.companionError({ info: this.$gettext('Das Bild für das neue Lernmaterial konnte nicht gespeichert werden.') });
            }
        },
        onSelectStockImage(stockImage) {
            if (this.$refs?.upload_image) {
                this.$refs.upload_image.value = null;
            }
            this.selectedStockImage = stockImage;
            this.showStockImageSelector = false;
        },
    },
    watch: {
        addWizardData: {
            handler(newData) {
                this.requirements = [];
                const slot = this.wizardSlots[0];
                if (newData.title !== '' && newData.description !== '') {
                    slot.valid = true;
                }
                if (newData.title === '' ) {
                    slot.valid = false;
                    this.requirements.push({slot: slot, text: this.text.title, target: 'title' });
                }
                if (newData.description === '') {
                    slot.valid = false;
                    this.requirements.push({slot: slot, text: this.text.description, target: 'description' });
                }
            },
            deep: true
        }
    }
}
</script>