add bulk action for video deletion

elan-ev · Nov 6, 2023 · a560114 · a560114
1 parent dff22f3
commit a560114
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 7 deletions.
diff --git a/assets/css/opencast.scss b/assets/css/opencast.scss
@@ -46,6 +46,10 @@ $action-menu-icon-size: 20px;
     white-space: normal;
 }
 
+.oc--image-button {
+    vertical-align: text-bottom;
+}
+
 /* * * * * * * * * */
 /*   P A G I N G   */
 /* * * * * * * * * */

diff --git a/vueapp/components/Studip/StudipButton.vue b/vueapp/components/Studip/StudipButton.vue
@@ -19,7 +19,7 @@ export default {
         icon: {
             type: String,
             validator(value) {
-                return ['', 'accept', 'cancel', 'edit', 'move-up', 'move-down', 'add', 'download', 'search', 'trash'].includes(value)
+                return ['', 'accept', 'cancel', 'edit', 'move-up', 'move-down', 'add', 'download', 'search', 'trash', 'remove'].includes(value)
             },
             default: ''
         }

diff --git a/vueapp/components/Studip/StudipIcon.vue b/vueapp/components/Studip/StudipIcon.vue
@@ -1,7 +1,7 @@
 <template>
     <input v-if="name" type="image" :name="name" :src="url"
            :width="size" :height="size" v-bind="$attrs">
-    <img v-else :src="url" :width="size" :height="size" v-bind="$attrs">
+    <img v-else class="oc--image-button" :src="url" :width="size" :height="size" v-bind="$attrs">
 </template>
 
 <script>

diff --git a/vueapp/components/Videos/BulkActions/VideoDelete.vue b/vueapp/components/Videos/BulkActions/VideoDelete.vue
@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <StudipDialog
+            :title="$gettext('Aufzeichnung zum Löschen markieren')"
+            :confirmText="$gettext('Löschen')"
+            :confirmClass="'accept'"
+            :closeText="$gettext('Abbrechen')"
+            :closeClass="'cancel'"
+            height="275"
+            @close="decline"
+            @confirm="removeVideo"
+        >
+            <template v-slot:dialogContent>
+                <translate>
+                    Möchten Sie die Aufzeichnungen wirklich zum Löschen markieren?<br/><br/>
+                    Die Aufzeichnungen werden damit in den "Gelöschte Videos" Bereich Ihres Arbeitsplatzes verschoben und werden nach {{simple_config_list.settings.OPENCAST_CLEAR_RECYCLE_BIN_INTERVAL}} Tagen automatisch gelöscht.
+                    Bis zu diesem Zeitpunkt können Sie die Aufzeichnungen wiederherstellen.
+                </translate>
+            </template>
+        </StudipDialog>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+import StudipDialog from '@studip/StudipDialog'
+
+export default {
+    name: 'BulkVideoDelete',
+
+    components: {
+        StudipDialog
+    },
+
+    props: ['event'],
+
+    emits: ['done', 'cancel'],
+
+    computed: {
+        ...mapGetters([
+            'simple_config_list'
+        ]),
+    },
+
+    methods: {
+        async removeVideo() {
+            for (let id in this.event) {
+                await this.$store.dispatch('deleteVideo', this.event[id])
+                .then(({ data }) => {
+                    this.$store.dispatch('addMessage', data.message);
+                    let emit_action = data.message.type == 'success' ? 'refresh' : '';
+                    this.$emit('done', emit_action);
+                }).catch(() => {
+                    this.$emit('cancel');
+                });
+            }
+        },
+
+        decline() {
+            this.$emit('cancel');
+        },
+    },
+}
+</script>
diff --git a/vueapp/components/Videos/VideoRow.vue b/vueapp/components/Videos/VideoRow.vue
@@ -270,9 +270,11 @@ export default {
 
         getAccessText() {
             var txt = '';
-            this.event.perms.forEach(perm => {
-                txt += '<div>' + perm.fullname + ': ' + this.$gettext(this.$filters.permname(perm.perm)) + '</div>'
-            });
+            if (this.event.perms !== undefined) {
+                this.event.perms.forEach(perm => {
+                    txt += '<div>' + perm.fullname + ': ' + this.$gettext(this.$filters.permname(perm.perm)) + '</div>'
+                });
+            }
             return txt;
         },
 

diff --git a/vueapp/components/Videos/VideosTable.vue b/vueapp/components/Videos/VideosTable.vue
@@ -94,7 +94,7 @@
                 </template>
             </draggable>
 
-            <tfoot v-if="playlistForVideos || playlistEdit || (isCourse && playlist && canEdit)">
+            <tfoot v-if="!isCourse || (isCourse && playlist)">
                 <tr>
                     <td :colspan="numberOfColumns">
                         <span class="oc--bulk-actions">
@@ -107,6 +107,19 @@
                             </StudipButton>
                         </span>
 
+                        <span v-if="canEdit || !isCourse">
+                            <StudipButton icon="trash"
+                                @click.prevent="doBulkAction('BulkVideoDelete')"
+                                :class="{
+                                    'disabled': selectedVideos.length == 0
+                                }"
+                                :disabled="selectedVideos.length == 0"
+                            >
+                                {{ $gettext('Zum Löschen markieren') }}
+                            </StudipButton>
+
+                        </span>
+
                         <span v-if="isCourse && playlist && canEdit">
                             <StudipButton class="wrap-button"
                                           v-if="playlist.is_default != '1'"
@@ -168,6 +181,9 @@ import VideoEdit from '@/components/Videos/Actions/VideoEdit.vue';
 import VideoRestore from '@/components/Videos/Actions/VideoRestore.vue';
 import VideoRemoveFromPlaylist from '@/components/Videos/Actions/VideoRemoveFromPlaylist.vue';
 import CaptionUpload from '@/components/Videos/Actions/CaptionUpload.vue';
+
+import BulkVideoDelete from '@/components/Videos/BulkActions/VideoDelete.vue';
+
 import Tag from '@/components/Tag.vue'
 
 import draggable from 'vuedraggable'
@@ -186,6 +202,7 @@ export default {
         VideoDelete,            VideoDeletePermanent,
         VideoAddToSeminar,      VideoRemoveFromPlaylist,
         VideoAddToPlaylist,     CaptionUpload,
+        BulkVideoDelete,
         draggable,
     },
 
@@ -234,7 +251,7 @@ export default {
         },
 
         showCheckbox() {
-            return this.playlistForVideos || this.playlistEdit;
+            return !this.isCourse || this.canEdit || this.playlistForVideos || this.playlistEdit;
         },
 
         isCourse() {
@@ -259,6 +276,7 @@ export default {
 
         videos_list: {
             get() {
+                console.log('videos_list', JSON.parse(JSON.stringify(this.videos)));
                 if (this.videoSortMode === true) {
                     return this.sortedVideos;
                 } else {
@@ -441,6 +459,15 @@ export default {
             }
         },
 
+        doBulkAction(action)
+        {
+            if (Object.keys(this.$options.components).includes(action)) {
+                this.actionComponent = action;
+                this.selectedEvent = this.selectedVideos;
+                this.showActionDialog = true;
+            }
+        },
+
         redirectAction(action) {
             let redirectUrl = window.OpencastPlugin.REDIRECT_URL;
 
@@ -453,6 +480,7 @@ export default {
         async doAfterAction(args) {
             this.clearAction();
             if (args == 'refresh') {
+                this.selectedVideos = [];
                 this.loadVideos();
             }
         },