Show course names in playlist select dropdown, ref #794

lib/Models/PlaylistSeminars.php

@@ -217,10 +217,11 @@ public static function getCoursesArray(Array $courses_ids, String $user_id = nul
                 }
 
                 $courses[] = [
-                    'id'        => $course->id,
-                    'name'      => $course->getFullname('number-name'),
-                    'semester'  => $course->getFullname('sem-duration-name'),
-                    'lecturers' => $lecturers,
+                    'id'                    => $course->id,
+                    'name'                  => $course->getFullname('number-name'),
+                    'semester'              => $course->getFullname('sem-duration-name'),
+                    'end_semester_begin'    => $course->end_semester->beginn ?: 0,
+                    'lecturers'             => $lecturers,
                 ];
             }
         }

vueapp/components/UserPlaylistSelectable.vue

@@ -6,14 +6,33 @@
             </legend>
 
             <label>
-                <input type="text" :placeholder="$gettext('In Wiedergabelisten suchen')" v-model="search">
-                <select v-model="currentPlaylist" v-if="filteredPlaylists">
-                    <option v-for="playlist in filteredPlaylists"
-                        :value="playlist" v-bind:key="playlist.token"
-                    >
-                        {{ playlist.title }}
-                    </option>
-                </select>
+                <studip-select :options="playlistsOptions" v-model="selectedPlaylistOption"
+                    label="name"
+                    track-by="token"
+                    :selectable="option => !option.header"
+                    :filterable="false"
+                    @search="updateSearch"
+                    :placeholder="$gettext('Wiedergabeliste auswählen')"
+                >
+                    <template #list-header>
+                        <li style="text-align: center">
+                            <b>{{ $gettext('Wiedergabelisten') }}</b>
+                        </li>
+                    </template>
+                    <template #no-options="{ search, searching, loading }">
+                        {{ $gettext('Keine Wiedergabelisten gefunden!')}}
+                    </template>
+                    <template #selected-option="option">
+                        <span class="vs__option">
+                            {{ option.name }}
+                        </span>
+                    </template>
+                    <template #option="{ name }">
+                        <span class="vs__option">
+                            {{ name }}
+                        </span>
+                    </template>
+                </studip-select>
             </label>
         </fieldset>
         <footer>
@@ -30,12 +49,14 @@
 
 <script>
 import StudipButton from "@studip/StudipButton";
+import StudipSelect from "@studip/StudipSelect";
 
 export default {
     name: 'UserPlaylistSelectable',
 
     components: {
-        StudipButton
+        StudipButton,
+        StudipSelect
     },
 
     props: {
@@ -51,49 +72,107 @@ export default {
 
     data() {
         return {
-            currentPlaylist: null,
+            selectedPlaylistOption: null,
             search: null
         }
     },
 
     computed: {
 
-        filteredPlaylists() {
-            let noPlaylistsFound = {};
-            noPlaylistsFound['0']= {
-                id: 0,
-                title: this.$gettext('Keine weiteren Wiedergabelisten gefunden.')
-            };
-
-            if (this.playlists.length == 0) {
-                this.currentPlaylist = 0;
-                return noPlaylistsFound;
-            }
+        currentPlaylist() {
+            return this.playlists.find(p => p.token === this.selectedPlaylistOption?.token);
+        },
 
+        filteredPlaylists() {
             let search    = this.search ? this.search.toLowerCase() : null;
 
-            let playlists = this.playlists.filter((playlist) => {
+            return this.playlists.filter((playlist) => {
+                let courseSearch = this.search && playlist.courses.findIndex(c => {
+                    let courseName = (c.name + ' (' + c.semester + ')').toLowerCase();
+                    return courseName.includes(search);
+                }) >= 0;
+
                 return (
-                    (!this.search || playlist['title'].toLowerCase().indexOf(search) >= 0)
+                    (courseSearch || !this.search || playlist['title'].toLowerCase().indexOf(search) >= 0)
                     &&
                     (!this.selectedPlaylists || !this.selectedPlaylists.map(p => { return p.token}).includes(playlist.token))
                 );
             });
+        },
 
-            if (playlists.length > 0) {
-                this.currentPlaylist = Object.values(playlists)[0];
-            } else {
-                this.currentPlaylist = 0;
-                return noPlaylistsFound;
+        sortedPlaylistsCourses() {
+            let courses = [];
+
+            // Get distinct courses
+            for (const playlist of this.filteredPlaylists) {
+                for (const course of playlist.courses) {
+                    if (courses.findIndex(c => c.id === course.id) === -1) {
+                        courses.push(course);
+                    }
+                }
             }
 
-            return playlists;
+            // Sort courses by semester end date
+            courses.sort(function (a, b) {
+                return b.end_semester_begin - a.end_semester_begin;
+            });
+
+            return courses
+        },
+
+        playlistsOptions() {
+            let options = [];
+
+            // Playlists without linked courses
+            let unlinkedPlaylists = this.filteredPlaylists.filter(p => !p.courses || p.courses.length === 0);
+
+            if (unlinkedPlaylists.length > 0) {
+                options.push({
+                    name: this.$gettext('Keine Kursverknüpfung'),
+                    header: true,
+                });
+
+                for (const playlist of unlinkedPlaylists) {
+                    // Check if playlist is in course
+                    options.push({
+                        name: playlist.title,
+                        token: playlist.token,
+                        header: false,
+                    });
+                }
+            }
+
+            // Playlists with linked courses
+            for (const course of this.sortedPlaylistsCourses) {
+                options.push({
+                   name: course.name + ' (' + course.semester + ')',
+                   header: true,
+                });
+
+                for (const coursePlaylist of this.filteredPlaylists) {
+                    // Check if playlist is in course
+                    if (coursePlaylist.courses.findIndex(c => c.id === course.id) !== -1) {
+                        options.push({
+                            name: coursePlaylist.title,
+                            token: coursePlaylist.token,
+                            header: false,
+                        });
+                    }
+                }
+            }
+
+            return options;
         },
     },
 
     methods: {
+        updateSearch(search, loading) {
+            this.search = search;
+        },
+
         returnSelectedPlaylist() {
             this.$emit('add', this.currentPlaylist);
+            this.selectedPlaylistOption = null;
         }
     }
 }

vueapp/components/Videos/Actions/VideoLinkToPlaylists.vue

@@ -52,7 +52,7 @@
 
                 <UserPlaylistSelectable
                     @add="addPlaylist"
-                    :playlists="playlists"
+                    :playlists="userPlaylists"
                     :selectedPlaylists="this.event.playlists"
                 />
 
@@ -97,7 +97,7 @@ export default {
     },
 
     computed: {
-    ...mapGetters(['playlists'])
+        ...mapGetters(['userPlaylists']),
     },
 
     methods: {
@@ -154,7 +154,9 @@ export default {
     },
 
     mounted () {
-        this.$store.dispatch('loadPlaylists');
+        this.$store.dispatch('loadUserPlaylists', {
+            limit: -1,
+        });
     },
 }
 </script>

vueapp/store/playlists.module.js

@@ -2,6 +2,7 @@ import ApiService from "@/common/api.service";
 
 const state = {
     playlists: [],
+    userPlaylists: [],
     playlist: null,
     playlistSearch: '',
     addPlaylist: false,
@@ -16,6 +17,10 @@ const getters = {
         return state.playlists
     },
 
+    userPlaylists(state) {
+        return state.userPlaylists;
+    },
+
     playlist(state) {
         return state.playlist
     },
@@ -69,6 +74,25 @@ const actions = {
             });
     },
 
+    async loadUserPlaylists(context, filters) {
+        // Set filters
+        const params = new URLSearchParams();
+
+        for (let key in filters) {
+            if (key === 'filters') {
+                params.append('filters', JSON.stringify(filters.filters));
+            } else {
+                params.append(key, filters[key]);
+            }
+        }
+
+        // Get playlists user has access to
+        return ApiService.get('playlists', { params })
+            .then(({ data }) => {
+                context.commit('setUserPlaylists', data.playlists);
+            });
+    },
+
     async loadPlaylist(context, token) {
         return ApiService.get('playlists/' + token)
             .then(({ data }) => {
@@ -257,6 +281,10 @@ const mutations = {
         state.playlists = playlists;
     },
 
+    setUserPlaylists(state, playlists) {
+        state.userPlaylists = playlists;
+    },
+
     setPlaylist(state, playlist) {
         state.playlist = playlist;
     },