Adding logic to batch destroy files

Modules/Media/Assets/js/components/MediaList.vue

@@ -25,7 +25,10 @@
                                 <upload-button :parent-id="folderId"></upload-button>
                                 <el-button-group>
                                     <el-button type="primary" :disabled="selectedMedia.length === 0">Move</el-button>
-                                    <el-button type="danger" :disabled="selectedMedia.length === 0">Delete</el-button>
+                                    <el-button type="danger" :disabled="selectedMedia.length === 0"
+                                        @click.preent="batchDelete" :loading="filesAreDeleting">
+                                        Delete
+                                    </el-button>
                                 </el-button-group>
                             </div>
                             <div class="search el-col el-col-5">
@@ -148,6 +151,7 @@
                 folderBreadcrumb: [
                     {id: 0, name: 'Home'},
                 ],
+                filesAreDeleting: false,
             }
         },
         methods: {
@@ -226,9 +230,6 @@
             handleSelectionChange(selectedMedia) {
                 this.selectedMedia = selectedMedia;
             },
-            getEditMediaUrl(scope) {
-                return route('admin.media.media.edit', {media: scope.row.id});
-            },
             loadEditForm(scope) {
                 console.log('clicked edit to' + scope.row.id);
                 this.$router.push({name: 'admin.media.media.edit', params: {mediaId: scope.row.id}})
@@ -248,6 +249,34 @@
 
                 this.fetchFolderBreadcrumb(folderId);
             },
+            batchDelete() {
+                this.$confirm(this.trans('core.modal.confirmation-message'), this.trans('core.modal.title'), {
+                    confirmButtonText: this.trans('core.button.delete'),
+                    cancelButtonText: this.trans('core.button.cancel'),
+                    type: 'warning'
+                })
+                    .then(() => {
+                        this.filesAreDeleting = true;
+                        axios.post(route('api.media.media.batch-destroy'), {
+                            files: this.selectedMedia
+                        })
+                            .then(response => {
+                                this.$message({
+                                    type: 'success',
+                                    message: response.data.message
+                                });
+                                this.filesAreDeleting = false;
+                                this.$refs.mediaTable.clearSelection();
+                                this.queryServer();
+                            });
+                    })
+                    .catch(() => {
+                        this.$message({
+                            type: 'info',
+                            message: this.trans('core.delete cancelled')
+                        });
+                    });
+            },
         },
         mounted() {
             this.selectedMedia.length = 0;

Modules/Media/Http/Controllers/Api/BatchDestroyController.php

+<?php
+
+namespace Modules\Media\Http\Controllers\Api;
+
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+use Modules\Media\Entities\File;
+use Modules\Media\Image\Imagy;
+use Modules\Media\Repositories\FileRepository;
+use Modules\Media\Repositories\FolderRepository;
+
+class BatchDestroyController extends Controller
+{
+    /**
+     * @var FileRepository
+     */
+    private $file;
+    /**
+     * @var FolderRepository
+     */
+    private $folder;
+    /**
+     * @var Imagy
+     */
+    private $imagy;
+
+    public function __construct(FileRepository $file, FolderRepository $folder, Imagy $imagy)
+    {
+        $this->file = $file;
+        $this->folder = $folder;
+        $this->imagy = $imagy;
+    }
+
+    public function __invoke(Request $request)
+    {
+        foreach ($request->get('files') as $file) {
+            if ($file['is_folder'] === true) {
+                $this->deleteFolder($file['id']);
+                continue;
+            }
+            $this->deleteFile($file['id']);
+        }
+
+        return response()->json([
+            'errors' => false,
+            'message' => trans('media::messages.selected items deleted'),
+        ]);
+    }
+
+    private function deleteFile($fileId)
+    {
+        $file = $this->file->find($fileId);
+
+        if ($file === null) {
+            return;
+        }
+
+        $this->imagy->deleteAllFor($file);
+        $this->file->destroy($file);
+    }
+
+    private function deleteFolder($folderId)
+    {
+        $folder = $this->folder->findFolder($folderId);
+
+        if ($folder === null) {
+            return;
+        }
+
+        $this->folder->destroy($folder);
+    }
+}

Modules/Media/Http/apiRoutes.php

@@ -70,4 +70,10 @@ $router->group(['middleware' => 'api.token'], function (Router $router) {
         'as' => 'api.media.media.destroy',
         'middleware' => 'token-can:media.medias.destroy',
     ]);
+
+    $router->post('batch-destroy', [
+        'uses' => 'BatchDestroyController',
+        'as' => 'api.media.media.batch-destroy',
+        'middleware' => 'token-can:media.medias.destroy',
+    ]);
 });

Modules/Translation/Resources/lang/media/en/messages.php

@@ -5,4 +5,5 @@ return [
     'file deleted' => 'File deleted',
     'folder updated' => 'Folder updated',
     'folder deleted' => 'Folder deleted',
+    'selected items deleted' => 'The selected item(s) were deleted',
 ];

public/js/app.js

@@ -93961,6 +93961,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 //
 //
 //
+//
+//
+//
 
 exports.default = {
     components: {
@@ -93987,7 +93990,8 @@ exports.default = {
             searchQuery: '',
             folderId: 0,
             selectedMedia: {},
-            folderBreadcrumb: [{ id: 0, name: 'Home' }]
+            folderBreadcrumb: [{ id: 0, name: 'Home' }],
+            filesAreDeleting: false
         };
     },
 
@@ -94067,9 +94071,6 @@ exports.default = {
         handleSelectionChange: function handleSelectionChange(selectedMedia) {
             this.selectedMedia = selectedMedia;
         },
-        getEditMediaUrl: function getEditMediaUrl(scope) {
-            return route('admin.media.media.edit', { media: scope.row.id });
-        },
         loadEditForm: function loadEditForm(scope) {
             console.log('clicked edit to' + scope.row.id);
             this.$router.push({ name: 'admin.media.media.edit', params: { mediaId: scope.row.id } });
@@ -94088,24 +94089,51 @@ exports.default = {
             }
 
             this.fetchFolderBreadcrumb(folderId);
+        },
+        batchDelete: function batchDelete() {
+            var _this3 = this;
+
+            this.$confirm(this.trans('core.modal.confirmation-message'), this.trans('core.modal.title'), {
+                confirmButtonText: this.trans('core.button.delete'),
+                cancelButtonText: this.trans('core.button.cancel'),
+                type: 'warning'
+            }).then(function () {
+                _this3.filesAreDeleting = true;
+                _axios2.default.post(route('api.media.media.batch-destroy'), {
+                    files: _this3.selectedMedia
+                }).then(function (response) {
+                    _this3.$message({
+                        type: 'success',
+                        message: response.data.message
+                    });
+                    _this3.filesAreDeleting = false;
+                    _this3.$refs.mediaTable.clearSelection();
+                    _this3.queryServer();
+                });
+            }).catch(function () {
+                _this3.$message({
+                    type: 'info',
+                    message: _this3.trans('core.delete cancelled')
+                });
+            });
         }
     },
     mounted: function mounted() {
-        var _this3 = this;
+        var _this4 = this;
 
         this.selectedMedia.length = 0;
         this.fetchMediaData();
         this.$events.listen('fileWasUploaded', function (eventData) {
-            _this3.tableIsLoading = true;
-            _this3.queryServer({ folder_id: eventData.data.folder_id });
+            _this4.tableIsLoading = true;
+            _this4.queryServer({ folder_id: eventData.data.folder_id });
         });
         this.$events.listen('folderWasCreated', function (eventData) {
-            _this3.tableIsLoading = true;
-            _this3.queryServer({ folder_id: eventData.data.folder_id });
+            _this4.tableIsLoading = true;
+            _this4.queryServer({ folder_id: eventData.data.folder_id });
         });
         this.$events.listen('folderWasUpdated', function (eventData) {
-            _this3.tableIsLoading = true;
-            _this3.queryServer({ folder_id: eventData.data.folder_id });
+            _this4.tableIsLoading = true;
+            _this4.queryServer({ folder_id: eventData.data.folder_id });
         });
     }
 };
@@ -95066,10 +95094,26 @@ var render = function() {
                               {
                                 attrs: {
                                   type: "danger",
-                                  disabled: _vm.selectedMedia.length === 0
+                                  disabled: _vm.selectedMedia.length === 0,
+                                  loading: _vm.filesAreDeleting
+                                },
+                                on: {
+                                  click: function($event) {
+                                    if (
+                                      !("button" in $event) &&
+                                      _vm._k($event.keyCode, "preent")
+                                    ) {
+                                      return null
+                                    }
+                                    _vm.batchDelete($event)
+                                  }
                                 }
                               },
-                              [_vm._v("Delete")]
+                              [
+                                _vm._v(
+                                  "\n                                    Delete\n                                "
+                                )
+                              ]
                             )
                           ],
                           1
@@ -96494,7 +96538,7 @@ exports.default = {
                 }).catch(function (error) {
                     vm.$message({
                         type: 'error',
-                        message: response.data.message
+                        message: error.data.message
                     });
                 });
             }).catch(function () {