move view filter into table, add combined filter widget, fixes #3421

Closes #3421

Merge request studip/studip!2374

4 files changed, 29 insertions, 7 deletions

diff --git a/resources/assets/javascripts/lib/admin-courses.js b/resources/assets/javascripts/lib/admin-courses.js
index e6a3523..23cf6dd 100644
--- a/resources/assets/javascripts/lib/admin-courses.js
+++ b/resources/assets/javascripts/lib/admin-courses.js
@@ -6,14 +6,14 @@ const AdminCourses = {
         $.get(
             STUDIP.URLHelper.getURL('dispatch.php/admin/courses/get_stdgangteil_selector/' + institut_id)
         ).done((widget) => {
-            $('select[name=stgteil_select]').closest('.sidebar-widget').replaceWith(widget);
+            $('select[name=stgteil_select]').closest('label').replaceWith(widget);
         });
 
         //change Dozenten-Filter
         $.get(
             STUDIP.URLHelper.getURL('dispatch.php/admin/courses/get_teacher_selector/' + institut_id)
         ).done((widget) => {
-            $('select[name=teacher_filter]').closest('.sidebar-widget').replaceWith(widget);
+            $('select[name=teacher_filter]').closest('label').replaceWith(widget);
         });
     }
 };
diff --git a/resources/assets/stylesheets/scss/admin-courses.scss b/resources/assets/stylesheets/scss/admin-courses.scss
index bbc06b0..8b8b736 100644
--- a/resources/assets/stylesheets/scss/admin-courses.scss
+++ b/resources/assets/stylesheets/scss/admin-courses.scss
@@ -28,3 +28,7 @@
         content: url("#{$image-path}/icons/white/file.svg");
     }
 }
+
+#admin-filter-widget .label-text {
+    display: block;
+}
diff --git a/resources/vue/components/AdminCourses.vue b/resources/vue/components/AdminCourses.vue
index 0f79cf7..b27e6f6 100644
--- a/resources/vue/components/AdminCourses.vue
+++ b/resources/vue/components/AdminCourses.vue
@@ -38,8 +38,9 @@
                         {{ fields[activeField] }}
                     </template>
                 </th>
-                <th class="actions" style="text-align: center;">
+                <th class="actions">
                     {{ $gettext('Aktion') }}
+                    <studip-action-menu :title="$gettext('Darstellungsfilter')" :items="availableFields" @toggleActiveField="toggleActiveField"></studip-action-menu>
                 </th>
             </tr>
             <tr v-if="buttons.top">
@@ -176,6 +177,17 @@ export default {
         sortedActivatedFields() {
             return Object.keys(this.fields).filter(f => this.activatedFields.includes(f));
         },
+        availableFields() {
+            return Object.keys(this.fields).map(f => {
+                let state = this.activatedFields.includes(f);
+                return {
+                    label: this.fields[f],
+                    icon: state ? 'checkbox-checked' : 'checkbox-unchecked',
+                    emit: 'toggleActiveField',
+                    emitArguments: f,
+                }
+            });
+        },
         loadingIndicator() {
             return STUDIP.ASSETS_URL + 'images/loading-indicator.svg';
         }
diff --git a/resources/vue/components/StudipActionMenu.vue b/resources/vue/components/StudipActionMenu.vue
index 014a1ca..c70d8ed 100644
--- a/resources/vue/components/StudipActionMenu.vue
+++ b/resources/vue/components/StudipActionMenu.vue
@@ -1,13 +1,13 @@
 <template>
     <div v-if="shouldCollapse" class="action-menu">
-        <button class="action-menu-icon" :title="title" aria-expanded="false">
+        <button class="action-menu-icon" :title="tooltip" aria-expanded="false">
             <span></span>
             <span></span>
             <span></span>
         </button>
         <div class="action-menu-content">
             <div class="action-menu-title">
-                {{ $gettext('Aktionen') }}
+                {{ title }}
             </div>
             <ul class="action-menu-list">
                 <li v-for="item in navigationItems" :key="item.id" class="action-menu-item">
@@ -50,6 +50,12 @@ export default {
         context: {
             type: String,
             default: ''
+        },
+        title: {
+            type: String,
+            default() {
+                return this.$gettext('Aktionen');
+            }
         }
     },
     data () {
@@ -122,8 +128,8 @@ export default {
             }
             return Number.parseInt(collapseAt) <= this.items.filter((item) => item.type !== 'separator').length;
         },
-        title () {
-            return this.context ? this.$gettextInterpolate(this.$gettext('Aktionsmenü für %{context}'), {context: this.context}) : this.$gettext('Aktionsmenü');
+        tooltip () {
+            return this.context ? this.$gettextInterpolate(this.$gettext('%{title} für %{context}'), {title: this.title, context: this.context}) : this.title;
         }
     }
 }