Resolve "Umschalten der Ansicht im Veranstaltungsverzeichnis springt wieder an den Anfang zurück"

Closes #3867

Merge request studip/studip!2720

app/controllers/search/courses.php

@@ -110,17 +110,7 @@ class Search_CoursesController extends AuthenticatedController
         }
 
         $sidebar->addWidget(new VueWidget('search-widget'));
+        $sidebar->addWidget(new VueWidget('views-widget'));
         $sidebar->addWidget(new VueWidget('export-widget'));
-
-        $views = new ViewsWidget();
-        $views->addLink(
-            _('Als Liste'),
-            $this->url_for('search/courses', array_merge($params, ['show_as' => 'list']))
-        )->setActive($this->show_as === 'list');
-        $views->addLink(
-            _('Als Tabelle'),
-            $this->url_for('search/courses', array_merge($params, ['show_as' => 'table']))
-        )->setActive($this->show_as === 'table');
-        $sidebar->addWidget($views);
     }
 }

resources/vue/components/tree/StudipTree.vue

@@ -33,6 +33,11 @@
         <MountingPortal v-if="withSearch" mountTo="#search-widget" name="sidebar-search">
             <search-widget v-if="currentNode" :min-length="3" ref="searchWidget"></search-widget>
         </MountingPortal>
+        <MountingPortal v-if="!editable && !isSearching && !isLoading && currentNode"
+                        mountTo="#views-widget"
+                        name="sidebar-views">
+            <studip-tree-view-widget :config="viewConfig" />
+        </MountingPortal>
     </div>
 </template>
 
@@ -41,6 +46,7 @@ import axios from 'axios';
 import { TreeMixin } from '../../mixins/TreeMixin';
 import StudipProgressIndicator from '../StudipProgressIndicator.vue';
 import SearchWidget from '../SearchWidget.vue';
+import StudipTreeViewWidget from './StudipTreeViewWidget.vue';
 import StudipTreeList from './StudipTreeList.vue';
 import StudipTreeTable from './StudipTreeTable.vue';
 import StudipTreeNode from './StudipTreeNode.vue';
@@ -49,7 +55,13 @@ import TreeSearchResult from './TreeSearchResult.vue';
 export default {
     name: 'StudipTree',
     components: {
-        TreeSearchResult, SearchWidget, StudipProgressIndicator, StudipTreeList, StudipTreeTable, StudipTreeNode
+        TreeSearchResult,
+        SearchWidget,
+        StudipTreeViewWidget,
+        StudipProgressIndicator,
+        StudipTreeList,
+        StudipTreeTable,
+        StudipTreeNode
     },
     mixins: [ TreeMixin ],
     props: {
@@ -163,12 +175,19 @@ export default {
             isLoading: false,
             showStructuralNavigation: false,
             searchConfig: {},
-            isSearching: false
+            isSearching: false,
+            viewConfig: null
         }
     },
     methods: {
         changeCurrentNode(node) {
             this.currentNode = node;
+            this.viewConfig = {
+                view: this.viewType,
+                node: this.currentNode,
+                semester: this.semester,
+                semClass: this.semClass
+            };
             this.$nextTick(() => {
                 document.getElementById('tree-breadcrumb-' + node.attributes.id)?.focus();
             });
@@ -206,6 +225,12 @@ export default {
             this.currentNode = this.startNode;
             this.loaded = true;
             this.isLoading = false;
+            this.viewConfig = {
+                view: this.viewType,
+                node: this.currentNode,
+                semester: this.semester,
+                semClass: this.semClass
+            };
         });
 
         axios.interceptors.request.eject(loadingIndicator);

resources/vue/components/tree/StudipTreeViewWidget.vue

+<template>
+    <sidebar-widget id="views-widget" class="sidebar-views" :title="$gettext('Ansicht')">
+        <template #content>
+            <ul class="widget-list widget-links sidebar-views">
+                <li :class="{ active: config.view === 'list' }">
+                    <a :href="getUrl('list')"
+                       :title="$gettext('Verzeichnis als Liste anzeigen')"
+                       tabindex="0">
+                        {{ $gettext('Als Liste anzeigen') }}
+                    </a>
+                </li>
+                <li :class="{ active: config.view === 'table' }">
+                    <a :href="getUrl('table')"
+                       :title="$gettext('Verzeichnis als Tabelle anzeigen')"
+                       tabindex="0">
+                        {{ $gettext('Als Tabelle anzeigen') }}
+                    </a>
+                </li>
+            </ul>
+        </template>
+    </sidebar-widget>
+</template>
+
+<script>
+import SidebarWidget from '../SidebarWidget.vue';
+
+export default {
+    name: 'StudipTreeViewWidget',
+    components: {
+        SidebarWidget
+    },
+    props: {
+        config: {
+            type: Object,
+            required: true
+        }
+    },
+    methods: {
+        getUrl(showAs) {
+            const url = new URL(window.location);
+            url.searchParams.set('show_as', showAs);
+            url.searchParams.set('node_id', this.config.node.id);
+
+            if (this.config.semester !== '') {
+                url.searchParams.set('semester', this.config.semester);
+            }
+
+            if (this.config.semClass !== 0) {
+                url.searchParams.set('semclass', this.config.semClass);
+            }
+
+            return url.toString();
+        }
+    }
+}
+</script>