add SidebarWidget vue componentbiest-1171-vue-widget

7 files changed, 102 insertions, 60 deletions

diff --git a/app/controllers/course/courseware.php b/app/controllers/course/courseware.php
index 7c41756..bc87332 100644
--- a/app/controllers/course/courseware.php
+++ b/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'),
diff --git a/lib/classes/sidebar/VueWidget.php b/lib/classes/sidebar/VueWidget.php
new file mode 100644
index 0000000..f4f0583
--- /dev/null
+++ b/lib/classes/sidebar/VueWidget.php
@@ -0,0 +1,20 @@
+<?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;
+    }
+}
diff --git a/resources/vue/base-components.js b/resources/vue/base-components.js
index 526687b..97231d2 100644
--- a/resources/vue/base-components.js
+++ b/resources/vue/base-components.js
@@ -1,6 +1,7 @@
 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,
diff --git a/resources/vue/components/SidebarWidget.vue b/resources/vue/components/SidebarWidget.vue
new file mode 100644
index 0000000..34d935d
--- /dev/null
+++ b/resources/vue/components/SidebarWidget.vue
@@ -0,0 +1,19 @@
+<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>
diff --git a/resources/vue/components/courseware/CoursewareActionWidget.vue b/resources/vue/components/courseware/CoursewareActionWidget.vue
index 572a94e..cc1738d 100644
--- a/resources/vue/components/courseware/CoursewareActionWidget.vue
+++ b/resources/vue/components/courseware/CoursewareActionWidget.vue
@@ -1,60 +1,65 @@
 <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: {
diff --git a/resources/vue/components/courseware/IndexApp.vue b/resources/vue/components/courseware/IndexApp.vue
index 10f7caf..2dece35 100644
--- a/resources/vue/components/courseware/IndexApp.vue
+++ b/resources/vue/components/courseware/IndexApp.vue
@@ -10,7 +10,7 @@
                 @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>
@@ -145,11 +145,9 @@ export default {
         },
         showSearchResults(newState) {
             if (newState) {
-                document.querySelector('.courseware-action-widget').classList.add('hideMenus');
                 document.querySelector('.courseware-view-widget').classList.add('hideMenus');
                 document.querySelector('.courseware-export-widget').classList.add('hideMenus');
             } else {
-                document.querySelector('.courseware-action-widget').classList.remove('hideMenus');
                 document.querySelector('.courseware-view-widget').classList.remove('hideMenus');
                 document.querySelector('.courseware-export-widget').classList.remove('hideMenus');
             }
diff --git a/templates/widgets/vue-widget.php b/templates/widgets/vue-widget.php
new file mode 100644
index 0000000..6c37661
--- /dev/null
+++ b/templates/widgets/vue-widget.php
@@ -0,0 +1 @@
+<div id="<?= htmlReady($id) ?>"></div>