fixes #1171 and #1169

Closes #1171 and #1169

Merge request studip/studip!844

app/controllers/contents/courseware.php

@@ -117,11 +117,7 @@ class Contents_CoursewareController extends AuthenticatedController
     private function setCoursewareSidebar()
     {
         $sidebar = \Sidebar::Get();
-        $actions = new TemplateWidget(
-            _('Aktionen'),
-            $this->get_template_factory()->open('course/courseware/action_widget')
-        );
-        $sidebar->addWidget($actions)->addLayoutCSSClass('courseware-action-widget');
+        $sidebar->addWidget(new VueWidget('courseware-action-widget'));
 
         $views = new TemplateWidget(
             _('Suche'),
@@ -129,17 +125,8 @@ class Contents_CoursewareController extends AuthenticatedController
         );
         $sidebar->addWidget($views)->addLayoutCSSClass('courseware-search-widget');
 
-        $views = new \TemplateWidget(
-            _('Ansichten'),
-            $this->get_template_factory()->open('course/courseware/view_widget')
-        );
-        $sidebar->addWidget($views)->addLayoutCSSClass('courseware-view-widget');
-
-        $exports = new TemplateWidget(
-            _('Export '),
-            $this->get_template_factory()->open('course/courseware/export_widget')
-        );
-        $sidebar->addWidget($exports)->addLayoutCSSClass('courseware-export-widget');
+        $sidebar->addWidget(new VueWidget('courseware-view-widget'));
+        $sidebar->addWidget(new VueWidget('courseware-export-widget'));
     }
 
     private function getLicences()

app/controllers/course/courseware.php

@@ -110,11 +110,7 @@ class Course_CoursewareController extends AuthenticatedController
     private function setIndexSidebar(): void
     {
         $sidebar = Sidebar::Get();
-        $actions = new TemplateWidget(
-            _('Aktionen'),
-            $this->get_template_factory()->open('course/courseware/action_widget')
-        );
-        $sidebar->addWidget($actions)->addLayoutCSSClass('courseware-action-widget');
+        $sidebar->addWidget(new VueWidget('courseware-action-widget'));
 
         $views = new TemplateWidget(
             _('Suche'),
@@ -122,20 +118,10 @@ class Course_CoursewareController extends AuthenticatedController
         );
         $sidebar->addWidget($views)->addLayoutCSSClass('courseware-search-widget');
 
-        $views = new TemplateWidget(
-            _('Ansichten'),
-            $this->get_template_factory()->open('course/courseware/view_widget')
-        );
-        $sidebar->addWidget($views)->addLayoutCSSClass('courseware-view-widget');
-
-        $exports = new TemplateWidget(
-            _('Export '),
-            $this->get_template_factory()->open('course/courseware/export_widget')
-        );
-        $sidebar->addWidget($exports)->addLayoutCSSClass('courseware-export-widget');
+        $sidebar->addWidget(new VueWidget('courseware-view-widget'));
+        $sidebar->addWidget(new VueWidget('courseware-export-widget'));
     }
 
-
     private function setDashboardSidebar(): void
     {
         $sidebar = Sidebar::Get();

app/views/course/courseware/action_widget.php

-<aside id="courseware-action-widget" class="widget-sidebar"></aside>

app/views/course/courseware/export_widget.php

-<aside id="courseware-export-widget" class="widget-sidebar"></aside>

app/views/course/courseware/view_widget.php

-<aside id="courseware-view-widget" class="widget-sidebar"></aside>

lib/classes/sidebar/VueWidget.php

+<?php
+/**
+ * This widget type delegates all rendering of the widget to vuejs.
+ *
+ * @author  Elmar Ludwig
+ * @license GPL2 or any later version
+ * @since   Stud.IP 5.0
+ */
+class VueWidget extends Widget
+{
+    /**
+     * Constructs the widget with the given id on the element.
+     */
+    public function __construct($id)
+    {
+        $this->id = $id;
+        $this->layout = 'widgets/vue-widget';
+        $this->forced_rendering = true;
+    }
+}

resources/vue/base-components.js

 import Multiselect from './components/Multiselect.vue';
 import EditableList from "./components/EditableList.vue";
 import Quicksearch from './components/Quicksearch.vue';
+import SidebarWidget from './components/SidebarWidget.vue';
 import StudipActionMenu from './components/StudipActionMenu.vue';
 import StudipAssetImg from './components/StudipAssetImg.vue';
 import StudipDateTime from './components/StudipDateTime.vue';
@@ -23,6 +24,7 @@ const BaseComponents = {
     EditableList,
     Quicksearch,
     RangeInput,
+    SidebarWidget,
     StudipActionMenu,
     StudipAssetImg,
     StudipDateTime,

resources/vue/components/SidebarWidget.vue

+<template>
+    <div class="sidebar-widget">
+        <div class="sidebar-widget-header" v-if="title">
+            {{ title }}
+        </div>
+        <div class="sidebar-widget-content">
+            <slot name="content" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'sidebar-widget',
+    props: {
+        title: String,
+    },
+}
+</script>

resources/vue/components/courseware/CoursewareActionWidget.vue

 <template>
-    <ul class="widget-list widget-links cw-action-widget" v-if="structuralElement">
-        <li class="cw-action-widget-show-toc">
-            <button @click="toggleTOC">
-                {{ tocText }}
-            </button>
-        </li>
-        <li class="cw-action-widget-show-consume-mode">
-            <button @click="showConsumeMode">
-                <translate>Vollbild einschalten</translate>
-            </button>
-        </li>
-        <li v-if="canEdit" class="cw-action-widget-edit">
-            <button @click="editElement">
-                <translate>Seite bearbeiten</translate>
-            </button>
-        </li>
-        <li v-if="canEdit" class="cw-action-widget-sort">
-            <button @click="sortContainers">
-                <translate>Abschnitte sortieren</translate>
-            </button>
-        </li>
-        <li v-if="canEdit" class="cw-action-widget-add">
-            <button @click="addElement">
-                <translate>Seite hinzufügen</translate>
-            </button>
-        </li>
-        <li class="cw-action-widget-info">
-            <button @click="showElementInfo">
-                <translate>Informationen anzeigen</translate>
-            </button>
-        </li>
-        <li class="cw-action-widget-star">
-            <button @click="createBookmark">
-                <translate>Lesezeichen setzen</translate>
-            </button>
-        </li>
-        <li v-if="context.type === 'users'" class="cw-action-widget-link">
-            <button @click="linkElement">
-                <translate>Öffentlichen Link erzeugen</translate>
-            </button>
-        </li>
-        <li v-if="!isOwner" class="cw-action-widget-oer">
-            <button @click="suggestOER">
-                <translate>Material für %{oerTitle} vorschlagen</translate>
-            </button>
-        </li>
-        <li v-if="!isRoot && canEdit" class="cw-action-widget-trash">
-            <button @click="deleteElement">
-                <translate>Seite löschen</translate>
-            </button>
-        </li>
-    </ul>
+    <sidebar-widget :title="$gettext('Aktionen')" v-if="structuralElement">
+        <template #content>
+            <ul class="widget-list widget-links cw-action-widget">
+                <li class="cw-action-widget-show-toc">
+                    <button @click="toggleTOC">
+                        {{ tocText }}
+                    </button>
+                </li>
+                <li class="cw-action-widget-show-consume-mode">
+                    <button @click="showConsumeMode">
+                        <translate>Vollbild einschalten</translate>
+                    </button>
+                </li>
+                <li v-if="canEdit" class="cw-action-widget-edit">
+                    <button @click="editElement">
+                        <translate>Seite bearbeiten</translate>
+                    </button>
+                </li>
+                <li v-if="canEdit" class="cw-action-widget-sort">
+                    <button @click="sortContainers">
+                        <translate>Abschnitte sortieren</translate>
+                    </button>
+                </li>
+                <li v-if="canEdit" class="cw-action-widget-add">
+                    <button @click="addElement">
+                        <translate>Seite hinzufügen</translate>
+                    </button>
+                </li>
+                <li class="cw-action-widget-info">
+                    <button @click="showElementInfo">
+                        <translate>Informationen anzeigen</translate>
+                    </button>
+                </li>
+                <li class="cw-action-widget-star">
+                    <button @click="createBookmark">
+                        <translate>Lesezeichen setzen</translate>
+                    </button>
+                </li>
+                <li v-if="context.type === 'users'" class="cw-action-widget-link">
+                    <button @click="linkElement">
+                        <translate>Öffentlichen Link erzeugen</translate>
+                    </button>
+                </li>
+                <li v-if="!isOwner" class="cw-action-widget-oer">
+                    <button @click="suggestOER">
+                        <translate>Material für %{oerTitle} vorschlagen</translate>
+                    </button>
+                </li>
+                <li v-if="!isRoot && canEdit" class="cw-action-widget-trash">
+                    <button @click="deleteElement">
+                        <translate>Seite löschen</translate>
+                    </button>
+                </li>
+            </ul>
+        </template>
+    </sidebar-widget>
 </template>
 
 <script>
 import StudipIcon from './../StudipIcon.vue';
+import SidebarWidget from '../SidebarWidget.vue';
 import CoursewareExport from '@/vue/mixins/courseware/export.js';
 import { mapActions, mapGetters } from 'vuex';
 
@@ -63,6 +68,7 @@ export default {
     props: ['structuralElement', 'canVisit'],
     components: {
         StudipIcon,
+        SidebarWidget,
     },
     mixins: [CoursewareExport],
     computed: {

resources/vue/components/courseware/CoursewareExportWidget.vue

 <template>
-    <ul class="widget-list widget-links cw-export-widget" v-if="structuralElement">
-        <li v-if="showExportArchiv" class="cw-export-widget-export">
-            <button @click="exportElement">
-                <translate>Seite exportieren</translate>
-            </button>
-        </li>
-        <li v-if="showExportPdf" class="cw-export-widget-export-pdf">
-            <button @click="pdfElement">
-                <translate>Seite als pdf-Dokument exportieren</translate>
-            </button>
-        </li>
-        <li v-if="showOer" class="cw-export-widget-oer">
-            <button @click="oerElement">
-                <translate>Seite auf %{oerTitle} veröffentlichen</translate>
-            </button>
-        </li>
-        <li v-if="!showExportArchiv && !showExportPdf && !showOer">
-            <translate>Keine Exportoptionen verfügbar</translate>
-        </li>
-    </ul>
+    <sidebar-widget :title="$gettext('Export')" v-if="structuralElement">
+        <template #content>
+            <ul class="widget-list widget-links cw-export-widget" v-if="structuralElement">
+                <li v-if="showExportArchiv" class="cw-export-widget-export">
+                    <button @click="exportElement">
+                        <translate>Seite exportieren</translate>
+                    </button>
+                </li>
+                <li v-if="showExportPdf" class="cw-export-widget-export-pdf">
+                    <button @click="pdfElement">
+                        <translate>Seite als pdf-Dokument exportieren</translate>
+                    </button>
+                </li>
+                <li v-if="showOer" class="cw-export-widget-oer">
+                    <button @click="oerElement">
+                        <translate>Seite auf %{oerTitle} veröffentlichen</translate>
+                    </button>
+                </li>
+                <li v-if="!showExportArchiv && !showExportPdf && !showOer">
+                    <translate>Keine Exportoptionen verfügbar</translate>
+                </li>
+            </ul>
+        </template>
+    </sidebar-widget>
 </template>
 
 <script>
+import SidebarWidget from '../SidebarWidget.vue';
 import CoursewareExport from '@/vue/mixins/courseware/export.js';
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
     name: 'courseware-export-widget',
     props: ['structuralElement', 'canVisit'],
+    components: {
+        SidebarWidget
+    },
     mixins: [CoursewareExport],
     computed: {
         ...mapGetters({

resources/vue/components/courseware/CoursewareRibbon.vue

@@ -15,12 +15,14 @@
             </div>
             <div class="cw-ribbon-wrapper-right">
                 <button
+                    v-if="showToolbarButton"
                     class="cw-ribbon-button cw-ribbon-button-menu"
                     :title="textRibbon.toolbar"
                     @click.prevent="activeToolbar"
                 >
                 </button>
                 <button
+                    v-if="showModeSwitchButton"
                     ref="consumeModeSwitch"
                     class="cw-ribbon-button"
                     :class="[consumeMode ? 'cw-ribbon-button-zoom-out' : 'cw-ribbon-button-zoom']"

resources/vue/components/courseware/CoursewareViewWidget.vue

 <template>
-    <ul class="widget-list widget-links sidebar-views cw-view-widget">
-        <li :class="{ active: readView }">
-            <button @click="setReadView">
-                <translate>Lesen</translate>
-            </button>
-        </li>
-        <li
-            v-if="canEdit"
-            :class="{ active: editView }"
-        >
-            <button @click="setEditView">
-                <translate>Bearbeiten</translate>
-            </button>
-        </li>
-        <li 
-            v-if="context.type === 'courses' && canVisit"
-            :class="{ active: discussView }"
-        >
-            <button @click="setDiscussView">
-                <translate>Kommentieren</translate>
-            </button>
-        </li>
-    </ul>
+    <sidebar-widget :title="$gettext('Ansichten')" v-if="structuralElement">
+        <template #content>
+            <ul class="widget-list widget-links sidebar-views cw-view-widget">
+                <li :class="{ active: readView }">
+                    <button @click="setReadView">
+                        <translate>Lesen</translate>
+                    </button>
+                </li>
+                <li
+                    v-if="canEdit"
+                    :class="{ active: editView }"
+                >
+                    <button @click="setEditView">
+                        <translate>Bearbeiten</translate>
+                    </button>
+                </li>
+                <li
+                    v-if="context.type === 'courses' && canVisit"
+                    :class="{ active: discussView }"
+                >
+                    <button @click="setDiscussView">
+                        <translate>Kommentieren</translate>
+                    </button>
+                </li>
+            </ul>
+        </template>
+    </sidebar-widget>
 </template>
 
 <script>
+import SidebarWidget from '../SidebarWidget.vue';
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
     name: 'courseware-view-widget',
     props: ['structuralElement', 'canVisit'],
+    components: {
+        SidebarWidget
+    },
     computed: {
         ...mapGetters({
             viewMode: 'viewMode',

resources/vue/components/courseware/IndexApp.vue

@@ -10,16 +10,16 @@
                 @select="selectStructuralElement"
             ></courseware-structural-element>
             <MountingPortal mountTo="#courseware-action-widget" name="sidebar-actions">
-                <courseware-action-widget :structural-element="selected" :canVisit="canVisit"></courseware-action-widget>
+                <courseware-action-widget :structural-element="selected" :canVisit="canVisit" v-if="!showSearchResults"></courseware-action-widget>
             </MountingPortal>
             <MountingPortal mountTo="#courseware-search-widget" name="sidebar-search">
                 <courseware-search-widget></courseware-search-widget>
             </MountingPortal>
             <MountingPortal mountTo="#courseware-view-widget" name="sidebar-views">
-                <courseware-view-widget :structural-element="selected" :canVisit="canVisit"></courseware-view-widget>
+                <courseware-view-widget :structural-element="selected" :canVisit="canVisit" v-if="!showSearchResults"></courseware-view-widget>
             </MountingPortal>
             <MountingPortal mountTo="#courseware-export-widget" name="sidebar-export">
-                <courseware-export-widget :structural-element="selected" :canVisit="canVisit"></courseware-export-widget>
+                <courseware-export-widget :structural-element="selected" :canVisit="canVisit" v-if="!showSearchResults"></courseware-export-widget>
             </MountingPortal>
         </div>
         <studip-progress-indicator

templates/widgets/vue-widget.php

+<div id="<?= htmlReady($id) ?>"></div>