CoursewareStructuralElement.vue

<template>
    <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">
                    <template #buttons>
                        <router-link v-if="prevElement" :to="'/structural_element/' + prevElement.id">
                            <button class="cw-ribbon-button cw-ribbon-button-prev" :title="textRibbon.perv" />
                        </router-link>
                        <button v-else class="cw-ribbon-button cw-ribbon-button-prev-disabled" />
                        <router-link v-if="nextElement" :to="'/structural_element/' + nextElement.id">
                            <button class="cw-ribbon-button cw-ribbon-button-next" :title="textRibbon.next" />
                        </router-link>
                        <button v-else class="cw-ribbon-button cw-ribbon-button-next-disabled" />
                    </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')"
                        />
                    </template>
                </courseware-ribbon>

                <div
                    v-if="canRead"
                    class="cw-container-wrapper"
                    :class="{ 'cw-container-wrapper-consume': consumeMode }"
                >
                    <div v-if="structuralElementLoaded" class="cw-companion-box-wrapper">
                        <courseware-empty-element-box
                            v-if="
                                (empty && !isRoot && canEdit) ||
                                (empty && !canEdit) ||
                                (!noContainers && empty && isRoot && canEdit)
                            "
                            :canEdit="canEdit"
                            :noContainers="noContainers"
                        />
                        <courseware-wellcome-screen v-if="noContainers && isRoot && canEdit" />
                    </div>
                    <component
                        v-for="container in containers"
                        :key="container.id"
                        :is="containerComponent(container)"
                        :container="container"
                        :canEdit="canEdit"
                        :isTeacher="isTeacher"
                        class="cw-container-item"
                    />
                </div>
                <div v-else class="cw-container-wrapper" :class="{ 'cw-container-wrapper-consume': consumeMode }">
                    <div v-if="structuralElementLoaded" class="cw-companion-box-wrapper">
                        <courseware-companion-box
                            mood="sad"
                            :msgCompanion="$gettext('Diese Seite steht Ihnen leider nicht zur Verfügung')"
                        />
                    </div>
                </div>
            </div>

            <courseware-companion-overlay />

            <studip-dialog
                v-if="showEditDialog"
                :title="textEdit.title"
                :confirmText="textEdit.confirm"
                :confirmClass="'accept'"
                :closeText="textEdit.close"
                :closeClass="'cancel'"
                height="500"
                width="500"
                class="studip-dialog-with-tab"
                @close="closeEditDialog"
                @confirm="storeCurrentElement"
            >
                <template v-slot:dialogContent>
                    <courseware-tabs class="cw-tab-in-dialog">
                        <courseware-tab :name="textEdit.basic" :selected="true">
                            <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">
                            <form class="default" @submit.prevent="">
                                <label>
                                    <translate>Farbe</translate>
                                    <v-select
                                        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>
                                    </v-select>
                                </label>
                                <label>
                                    <translate>Zweck</translate>
                                    <select v-model="currentElement.attributes.purpose">
                                        <option value="content"><translate>Inhalt</translate></option>
                                        <option value="template"><translate>Vorlage</translate></option>
                                        <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"