Merge branch 'main' into issue-3911issue-3911

9 files changed, 123 insertions, 19 deletions

diff --git a/resources/vue/components/tree/StudipTree.vue b/resources/vue/components/tree/StudipTree.vue
index 136fc95..fc6dc41 100644
--- a/resources/vue/components/tree/StudipTree.vue
+++ b/resources/vue/components/tree/StudipTree.vue
@@ -33,14 +33,21 @@
         <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>
 
 <script>
 import axios from 'axios';
 import { TreeMixin } from '../../mixins/TreeMixin';
+import PageLayout from '../../../assets/javascripts/lib/page_layout';
 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 +56,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 +176,21 @@ export default {
             isLoading: false,
             showStructuralNavigation: false,
             searchConfig: {},
-            isSearching: false
+            isSearching: false,
+            viewConfig: null,
+            pageTitle: document.title
         }
     },
     methods: {
         changeCurrentNode(node) {
             this.currentNode = node;
+            this.viewConfig = {
+                view: this.viewType,
+                node: this.currentNode,
+                semester: this.semester,
+                semClass: this.semClass
+            };
+            this.setPageTitle(this.currentNode.attributes.name);
             this.$nextTick(() => {
                 document.getElementById('tree-breadcrumb-' + node.attributes.id)?.focus();
             });
@@ -187,6 +209,10 @@ export default {
                 form.appendChild(input);
             }
             input.setAttribute('value', searchterm);
+        },
+        setPageTitle(nodeTitle) {
+            const title = this.pageTitle.split('-');
+            PageLayout.title = title.slice(0, -1).join('-') + '/ ' + nodeTitle + ' -' + title[title.length - 1];
         }
     },
     mounted() {
@@ -206,6 +232,13 @@ 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
+            };
+            this.setPageTitle(this.currentNode.attributes.name);
         });
 
         axios.interceptors.request.eject(loadingIndicator);
diff --git a/resources/vue/components/tree/StudipTreeList.vue b/resources/vue/components/tree/StudipTreeList.vue
index 4ba08bc..6214234 100644
--- a/resources/vue/components/tree/StudipTreeList.vue
+++ b/resources/vue/components/tree/StudipTreeList.vue
@@ -15,7 +15,7 @@
                 <a v-if="editable && currentNode.attributes.id !== 'root'"
                    :href="editUrl + '/' + currentNode.attributes.id"
                    @click.prevent="editNode(editUrl, currentNode.id)" data-dialog="size=medium"
-                   :title="$gettextInterpolate($gettext('%{name} bearbeiten'), {name: currentNode.attributes.name})">
+                   :title="$gettextInterpolate($gettext('%{name} bearbeiten'), {name: currentNode.attributes.name}, true)">
                     <studip-icon shape="edit" :size="20"></studip-icon>
                 </a>
 
@@ -36,7 +36,7 @@
                 <li v-for="(child, index) in children" :key="index" class="studip-tree-child">
                     <a v-if="editable && children.length > 1" class="drag-link"
                        tabindex="0"
-                       :title="$gettextInterpolate($gettext('Sortierelement für Element %{node}. Drücken Sie die Tasten Pfeil-nach-oben oder Pfeil-nach-unten, um dieses Element in der Liste zu verschieben.'), {node: child.attributes.name})"
+                       :title="$gettextInterpolate($gettext('Sortierelement für Element %{node}. Drücken Sie die Tasten Pfeil-nach-oben oder Pfeil-nach-unten, um dieses Element in der Liste zu verschieben.'), {node: child.attributes.name}, true)"
                        @keydown="keyHandler($event, index)"
                        :ref="'draghandle-' + index">
                         <span class="drag-handle"></span>
@@ -91,9 +91,12 @@
             <tbody>
                 <tr v-for="(course) in courses" :key="course.id" class="studip-tree-child studip-tree-course">
                     <td>
-                        <a :href="courseUrl(course.id)"
-                           :title="$gettextInterpolate($gettext('Zur Veranstaltung %{ course }'),
-                                { course: course.attributes.title })">
+                        <a :href="courseUrl(course.id)" tabindex="0"
+                           :title="$gettextInterpolate(
+                               $gettext('Zur Veranstaltung %{ title }'),
+                               { title: course.attributes.title },
+                               true
+                           )">
                             <studip-icon shape="seminar" :size="26"></studip-icon>
                             <template v-if="course.attributes['course-number']">
                                 {{ course.attributes['course-number'] }}
diff --git a/resources/vue/components/tree/StudipTreeTable.vue b/resources/vue/components/tree/StudipTreeTable.vue
index 03a9d7b..093dd9c 100644
--- a/resources/vue/components/tree/StudipTreeTable.vue
+++ b/resources/vue/components/tree/StudipTreeTable.vue
@@ -79,7 +79,7 @@
                     <td>
                         <a v-if="editable && children.length > 1" class="drag-link" role="option"
                            tabindex="0"
-                           :title="$gettextInterpolate($gettext('Sortierelement für Element %{node}. Drücken Sie die Tasten Pfeil-nach-oben oder Pfeil-nach-unten, um dieses Element in der Liste zu verschieben.'), {node: child.attributes.name})"
+                           :title="$gettextInterpolate($gettext('Sortierelement für Element %{node}. Drücken Sie die Tasten Pfeil-nach-oben oder Pfeil-nach-unten, um dieses Element in der Liste zu verschieben.'), {node: child.attributes.name}, true)"
                            @keydown="keyHandler($event, index)"
                            :ref="'draghandle-' + index">
                             <span class="drag-handle"></span>
@@ -93,7 +93,7 @@
                         <a :href="nodeUrl(child.id, semester !== 'all' ? semester : null)" tabindex="0"
                            @click.prevent="openNode(child)"
                            :title="$gettextInterpolate($gettext('Unterebene %{ node } öffnen'),
-                                { node: node.attributes.name })">
+                                { node: node.attributes.name }, true)">
                             {{ child.attributes.name }}
                         </a>
                     </td>
@@ -112,8 +112,11 @@
                     </td>
                     <td>
                         <a :href="courseUrl(course.id)" tabindex="0"
-                           :title="$gettextInterpolate($gettext('Zur Veranstaltung %{ course }'),
-                                { course: course.attributes.title })">
+                           :title="$gettextInterpolate(
+                               $gettext('Zur Veranstaltung %{ title }'),
+                               { title: course.attributes.title },
+                               true
+                           )">
                             <template v-if="course.attributes['course-number']">
                                 {{ course.attributes['course-number'] }}
                             </template>
diff --git a/resources/vue/components/tree/StudipTreeViewWidget.vue b/resources/vue/components/tree/StudipTreeViewWidget.vue
new file mode 100644
index 0000000..30e2d5c
--- /dev/null
+++ b/resources/vue/components/tree/StudipTreeViewWidget.vue
@@ -0,0 +1,56 @@
+<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>
diff --git a/resources/vue/components/tree/TreeBreadcrumb.vue b/resources/vue/components/tree/TreeBreadcrumb.vue
index 33b04b3..a8c3dd5 100644
--- a/resources/vue/components/tree/TreeBreadcrumb.vue
+++ b/resources/vue/components/tree/TreeBreadcrumb.vue
@@ -10,7 +10,7 @@
                     <a :href="nodeUrl(ancestor.classname + '_' + ancestor.id)" :ref="ancestor.id"
                        @click.prevent="openNode(ancestor.id, ancestor.classname)" tabindex="0"
                        :id="'tree-breadcrumb-' + ancestor.id"
-                       :title="$gettextInterpolate($gettext('%{ node } öffnen'), { node: ancestor.name})">
+                       :title="$gettextInterpolate($gettext('%{ node } öffnen'), { node: ancestor.name}, true)">
                         {{ ancestor.name }}
                     </a>
                     <template v-if="index !== node.attributes.ancestors.length - 1">
diff --git a/resources/vue/components/tree/TreeCourseDetails.vue b/resources/vue/components/tree/TreeCourseDetails.vue
index 609349d..020cc33 100644
--- a/resources/vue/components/tree/TreeCourseDetails.vue
+++ b/resources/vue/components/tree/TreeCourseDetails.vue
@@ -4,14 +4,16 @@
             ({{ details.semester }})
         </div>
         <div class="admission-state" v-if="details.admissionstate">
-            <studip-icon :shape="details.admissionstate.icon" :role="details.admissionstate.role"
-                         :title="details.admissionstate.info"></studip-icon>
+            <studip-icon :shape="details.admissionstate.icon"
+                         :role="details.admissionstate.role"
+                         :alt="details.admissionstate.info"></studip-icon>
         </div>
         <div class="course-lecturers">
             <span v-for="(lecturer, index) in details.lecturers" :key="index">
                 <a :href="profileUrl(lecturer.username)"
                    :title="$gettextInterpolate($gettext('Zum Profil von %{ user }'),
-                        { user: lecturer.name })">
+                        { user: lecturer.name }, true)"
+                   tabindex="0">
                     {{ lecturer.name }}
                 </a><template v-if="details.lecturers.length > 1 && index < details.lecturers.length - 1">, </template>
             </span>
diff --git a/resources/vue/components/tree/TreeNodeCoursePath.vue b/resources/vue/components/tree/TreeNodeCoursePath.vue
index 26ab88e..71f69ea 100644
--- a/resources/vue/components/tree/TreeNodeCoursePath.vue
+++ b/resources/vue/components/tree/TreeNodeCoursePath.vue
@@ -1,6 +1,12 @@
 <template>
     <div>
-        <studip-icon shape="info-circle" @click="togglePathInfo"></studip-icon>
+        <button type="button"
+                @click.prevent="togglePathInfo"
+                :title="showPaths
+                    ? $gettext('Pfad im Verzeichnis ausblenden')
+                    : $gettext('Pfad im Verzeichnis anzeigen')">
+            <studip-icon shape="info-circle"></studip-icon>
+        </button>
         <ul v-if="showPaths" class="studip-tree-course-path">
             <li v-for="(path, pindex) in paths" :key="pindex">
                 <button @click.prevent="openNode(path[path.length - 1].id)">
diff --git a/resources/vue/components/tree/TreeNodeTile.vue b/resources/vue/components/tree/TreeNodeTile.vue
index dab2bdf..698cc25 100644
--- a/resources/vue/components/tree/TreeNodeTile.vue
+++ b/resources/vue/components/tree/TreeNodeTile.vue
@@ -1,6 +1,6 @@
 <template>
     <a :href="url" @click.prevent="openNode" :title="$gettextInterpolate($gettext('Unterebene %{ node } öffnen'),
-                                { node: node.attributes.name })">
+                                { node: node.attributes.name }, true)">
         <p class="studip-tree-child-title">
             {{ node.attributes.name }}
         </p>
diff --git a/resources/vue/components/tree/TreeSearchResult.vue b/resources/vue/components/tree/TreeSearchResult.vue
index e5093eb..9799dae 100644
--- a/resources/vue/components/tree/TreeSearchResult.vue
+++ b/resources/vue/components/tree/TreeSearchResult.vue
@@ -31,13 +31,14 @@
                     </td>
                     <td>
                         <a :href="courseUrl(course.id)"
-                           :title="$gettextInterpolate($gettext('Zur Veranstaltung %{name}'), {name:  + course.attributes.title})">
+                           :title="$gettextInterpolate($gettext('Zur Veranstaltung %{title}'), {title: course.attributes.title}, true)"
+                           tabindex="0">
                             <template v-if="course.attributes['course-number']">
                                 {{ course.attributes['course-number'] }}
                             </template>
                             {{ course.attributes.title }}
-                            <div :id="'course-dates-' + course.id" class="course-dates"></div>
                         </a>
+                        <div :id="'course-dates-' + course.id" class="course-dates"></div>
                         <tree-node-course-path :node-class="searchConfig.classname"
                                                :course-id="course.id"></tree-node-course-path>
                     </td>