<template> <div class="cw-welcome-screen"> <courseware-companion-box :msgCompanion="this.$gettext('Es wurden bisher noch keine Inhalte eingepflegt.')"> <template v-slot:companionActions> <button v-if="canEdit && noContainers" class="button" @click="addContainer"><translate>Einen Abschnitt hinzufügen</translate></button> <button v-if="canEdit && !noContainers && !editMode" class="button" @click="switchToEditView"><translate>Seite bearbeiten</translate></button> </template> </courseware-companion-box> </div> </template> <script> import CoursewareCompanionBox from '../layouts/CoursewareCompanionBox.vue'; import { mapActions, mapGetters } from 'vuex'; export default { name: 'courseware-empty-element-box', components: { CoursewareCompanionBox, }, props: { canEdit: Boolean, noContainers: Boolean }, data() { return{} }, computed: { ...mapGetters({ viewMode: 'viewMode' }), editMode() { return this.viewMode === 'edit'; } }, methods: { ...mapActions({ coursewareViewMode: 'coursewareViewMode', coursewareConsumeMode: 'coursewareConsumeMode', coursewareContainerAdder: 'coursewareContainerAdder', coursewareSelectedToolbarItem: 'coursewareSelectedToolbarItem', coursewareShowToolbar: 'coursewareShowToolbar' }), addContainer() { this.coursewareViewMode('edit'); this.coursewareConsumeMode(false); this.coursewareContainerAdder(true); this.coursewareSelectedToolbarItem('blockadder'); this.coursewareShowToolbar(true); }, switchToEditView() { this.coursewareViewMode('edit'); this.coursewareConsumeMode(false); } } } </script>