CoursewareListContainer.vue

<template>
    <courseware-default-container
        :container="container"
        containerClass="cw-container-list"
        :canEdit="canEdit"
        :isTeacher="isTeacher"
        @storeContainer="storeContainer"
    >
        <template v-slot:containerContent>
            <ul v-if="!canEdit || currentElementisLink"  class="cw-container-list-block-list">
                <li v-for="block in blocks" :key="block.id" class="cw-block-item">
                    <component :is="component(block)" :block="block" :canEdit="canEdit" :isTeacher="isTeacher" />
                </li>
            </ul>
            <template v-else>
                <template v-if="!processing">
                    <span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span>
                    <span id="operation" class="assistive-text">
                        {{$gettext('Drücken Sie die Leertaste, um neu anzuordnen.')}}
                    </span>
                    <courseware-companion-box
                        v-if="empty"
                        mood="pointing"
                        :msgCompanion="$gettext('Dieser Abschnitt enthält keine Blöcke.')">
                    </courseware-companion-box>
                    <draggable
                        v-if="canEdit"
                        class="cw-container-list-block-list cw-container-list-sort-mode"
                        tag="ol"
                        role="listbox"
                        v-model="blockList"
                        v-bind="dragOptions"
                        handle=".cw-sortable-handle"
                        group="blocks"
                        @start="isDragging = true"
                        @end="dropBlock"
                        ref="sortables"
                        :containerId="container.id"
                        sectionId="0"
                    >
                        <li
                            v-for="block in blockList"
                            :key="block.id"
                            class="cw-block-item cw-block-item-sortable"
                        >
                            <span
                                :class="{ 'cw-sortable-handle-dragging': isDragging }"
                                class="cw-sortable-handle"
                                tabindex="0"
                                role="button"
                                aria-describedby="operation"
                                :ref="'sortableHandle' + block.id"
                                @keydown="keyHandler($event, block.id)"
                            ></span>
                            <component
                                :is="component(block)"
                                :block="block"
                                :canEdit="canEdit"
                                :isTeacher="isTeacher"
                                :class="{ 'cw-block-item-selected': keyboardSelected === block.id}"
                                :blockId="block.id"
                            />
                        </li>
                    </draggable>
                </template>
                <div v-else class="progress-wrapper" :style="{ height: contentHeight + 'px' }">
                    <studip-progress-indicator :description="$gettext('Vorgang wird bearbeitet...')" />
                </div>
            </template>
        </template>
    </courseware-default-container>
</template>

<script>
import ContainerComponents from './container-components.js';
import containerMixin from '@/vue/mixins/courseware/container.js';
import draggable from 'vuedraggable';
import { mapActions, mapGetters } from 'vuex';

export default {
    name: 'courseware-list-container',
    mixins: [containerMixin],
    components: Object.assign(ContainerComponents, {
        draggable,
    }),
    props: {
        container: Object,
        canEdit: Boolean,
        isTeacher: Boolean,
        canAddElements: Boolean,
    },
    data() {
        return {
            isDragging: false,
            dragOptions: {
                animation: 0,
                group: this.container.id,
                disabled: false,
                ghostClass: "block-ghost"
            },
            blockList: [],
            processing: false,
            contentHeight: 0,
            keyboardSelected: null,
            assistiveLive: ''
        };
    },
    computed: {
        ...mapGetters({
            userId: 'userId',
            blockById: 'courseware-blocks/byId',
            containerById: 'courseware-containers/byId',
            viewMode: 'viewMode',
            currentElementisLink: 'currentElementisLink'
        }),
        blocked() {
            return this.container?.relationships?.['edit-blocker']?.data !== null;
        },
        blockerId() {
            return this.blocked ? this.container?.relationships?.['edit-blocker']?.data?.id : null;
        },
        blockedByThisUser() {
            return this.blocked && this.userId === this.blockerId;
        },
        blockedByAnotherUser() {
            return this.blocked && this.userId !== this.blockerId;
        },
        blocks() {
            if (!this.container || this.container.newContainer) {
                return [];
            }
            let containerBlocks = this.container.relationships.blocks.data.map(({ id }) => this.blockById({ id })).filter(Boolean);
            let unallocated = new Set(containerBlocks.map(({ id }) => id));
            let sortedBlocks = this.container.attributes.payload.sections[0].blocks.map((id) => this.blockById({ id })).filter(Boolean);
            sortedBlocks.forEach(({ id }) => unallocated.delete(id));
            let unallocatedBlocks = [...unallocated].map((id) => this.blockById({ id }));

            return sortedBlocks.concat(unallocatedBlocks);
        },
        empty() {
            return this.blockList.length === 0;
        }
    },
    methods: {
        ...mapActions({
            updateContainer: 'updateContainer',
            loadContainer: 'courseware-containers/loadById',
            lockObject: 'lockObject',
            unlockObject: 'unlockObject',
            companionInfo: 'companionInfo'
        }),
        storeContainer(data) {
        },
        initCurrentData() {
            this.blockList = this.blocks;
        },
        async storeSort() {
            this.contentHeight = this.$refs.sortables.$el.offsetHeight;
            const timeout = setTimeout(() => this.processing = true, 800);
            if (this.blockedByAnotherUser) {
                this.companionInfo({ info: this.$gettext('Dieser Abschnitt wird bereits bearbeitet.') });
                clearTimeout(timeout);
                this.processing = false;
                this.loadContainer({id : this.container.id });
                return false;
            }
            await this.lockObject({ id: this.container.id, type: 'courseware-containers' });
            let currentContainer = this.container;
            currentContainer.attributes.payload.sections[0].blocks = this.blockList.map(block => {return block.id});
            await this.updateContainer({
                container: currentContainer,
                structuralElementId: currentContainer.relationships['structural-element'].data.id,
            });
            await this.unlockObject({ id: this.container.id, type: 'courseware-containers' });
            await this.loadContainer({id : this.container.id });
            this.initCurrentData();
            clearTimeout(timeout);
            this.processing = false;
            this.assistiveLive = '';
        },
        component(block) {
            if (block.attributes["block-type"] !== undefined) {
                return 'courseware-' + block.attributes["block-type"] + '-block';
            }
            return null;
        },
        keyHandler(e, blockId) {
            switch (e.keyCode) {
                case 27: // esc
                    this.abortKeyboardSorting(blockId);
                    break;
                case 13: // enter
                    e.preventDefault();
                    if (this.keyboardSelected) {
                        this.storeKeyboardSorting(blockId);
                    } else {
                        this.keyboardSelected = blockId;
                        const block = this.blockById({id: blockId});
                        const index = this.blockList.findIndex(b => b.id === block.id);
                        this.assistiveLive = 
                            this.$gettextInterpolate(
                                this.$gettext('%{blockTitle} Block ausgewählt. Aktuelle Position in der Liste: %{pos} von %{listLength}. Drücken Sie die Aufwärts- und Abwärtspfeiltasten, um die Position zu ändern, die Leertaste zum Ablegen, die Escape-Taste zum Abbrechen.')
                                , {blockTitle: block.attributes.title, pos: index + 1, listLength: this.blockList.length}
                            );
                    }
                    break;
            }
            if (this.keyboardSelected) {
                switch (e.keyCode) {
                    case 9: //tab
                        this.abortKeyboardSorting(blockId);
                        break;
                    case 38: // up
                        e.preventDefault();
                        this.moveItemUp(blockId);
                        break;
                    case 40: // down
                        e.preventDefault();
                        this.moveItemDown(blockId);
                        break;
                }
            }
        },
        moveItemUp(blockId) {
            const currentIndex = this.blockList.findIndex(block => block.id === blockId);
            if (currentIndex !== 0) {
                const block = this.blockById({id: blockId});
                const newPos = currentIndex - 1;
                this.blockList.splice(newPos, 0, this.blockList.splice(currentIndex, 1)[0]);
                this.assistiveLive = 
                    this.$gettextInterpolate(
                        this.$gettext('%{blockTitle} Block. Aktuelle Position in der Liste: %{pos} von %{listLength}.')
                        , {blockTitle: block.attributes.title, pos: newPos + 1, listLength: this.blockList.length}
                    );
            }
        },
        moveItemDown(blockId) {
            const currentIndex = this.blockList.findIndex(block => block.id === blockId);
            if (this.blockList.length - 1 > currentIndex) {
                const block = this.blockById({id: blockId});
                const newPos = currentIndex + 1;
                this.blockList.splice(newPos, 0, this.blockList.splice(currentIndex, 1)[0]);
                this.assistiveLive = 
                    this.$gettextInterpolate(
                        this.$gettext('%{blockTitle} Block. Aktuelle Position in der Liste: %{pos} von %{listLength}.')
                        , {blockTitle: block.attributes.title, pos: newPos + 1, listLength: this.blockList.length}
                    );
            }
        },
        abortKeyboardSorting(blockId) {
            const block = this.blockById({id: blockId});
            this.keyboardSelected = null;
            this.assistiveLive = 
                this.$gettextInterpolate(
                    this.$gettext('%{blockTitle} Block, Neuordnung abgebrochen.')
                    , {blockTitle: block.attributes.title}
                );
            this.initCurrentData();
        },
        storeKeyboardSorting(blockId) {
            const block = this.blockById({id: blockId});
            const currentIndex = this.blockList.findIndex(block => block.id === blockId);
            this.keyboardSelected = null;
            this.assistiveLive = 
                this.$gettextInterpolate(
                    this.$gettext('%{blockTitle} Block, abgelegt. Endgültige Position in der Liste: %{pos} von %{listLength}.')
                    , {blockTitle: block.attributes.title, pos: currentIndex + 1, listLength: this.blockList.length}
                );
            this.storeSort();
        }
    },
    mounted() {
        this.initCurrentData();
    },
    watch: {
        blocks() {
            this.initCurrentData();
        },
        blockList() {
            if (this.keyboardSelected) {
                this.$nextTick(() => {
                    const selected = this.$refs['sortableHandle' + this.keyboardSelected][0];
                    selected.focus();
                    selected.scrollIntoView({behavior: "smooth", block: "center"});
                });
            }
        }
    }
};
</script>