Adding validation to the move media request

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

@@ -318,7 +318,7 @@
             });
             this.$events.listen('mediaWasMoved', (eventData) => {
                 this.tableIsLoading = true;
-                this.queryServer({ folder_id: eventData.data.folder_id });
+                this.queryServer({ folder_id: eventData.folder_id });
             });
         },
     };

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

@@ -2,7 +2,7 @@
     <div>
         <el-dialog title="Move Media" :visible.sync="dialogFormVisible" size="tiny" class="move-media-dialog"  @open="fetchFolders">
             <el-form v-loading.body="loading" @submit.native.prevent="onSubmit()">
-                <el-form-item label="To" :class="{'el-form-item is-error': form.errors.has('name') }">
+                <el-form-item label="To" :class="{'el-form-item is-error': form.errors.has('destinationFolder') }">
                     <el-select v-model="destinationFolder" placeholder="Select">
                         <el-option
                                 v-for="(item, id) in options"
@@ -13,8 +13,8 @@
                             <span v-html="item"></span>
                         </el-option>
                     </el-select>
-                    <div class="el-form-item__error" v-if="form.errors.has('name')"
-                         v-text="form.errors.first('name')"></div>
+                    <div class="el-form-item__error" v-if="form.errors.has('destinationFolder')"
+                         v-text="form.errors.first('destinationFolder')"></div>
                 </el-form-item>
             </el-form>
             <span slot="footer" class="dialog-footer">
@@ -46,19 +46,27 @@
         methods: {
             onSubmit() {
                 this.loading = true;
-                axios.post(route('api.media.media.move'), {
+                this.form = new Form({
                     files: this.selectedMedia,
                     destinationFolder: this.destinationFolder,
-                })
+                });
+                this.form.post(route('api.media.media.move'))
                     .then((response) => {
                         console.log(response);
                         this.loading = false;
                         this.$message({
                             type: 'success',
-                            message: response.data.message,
+                            message: response.message,
                         });
                         this.dialogFormVisible = false;
                         this.$events.emit('mediaWasMoved', response);
+                    })
+                    .catch((error) => {
+                        this.loading = false;
+                        this.$notify.error({
+                            title: 'Error',
+                            message: 'There are some errors in the form.',
+                        });
                     });
             },
             closeDialog() {
@@ -69,7 +77,6 @@
                 this.selectIsLoading = true;
                 axios.get(route('api.media.folders.all-nestable'))
                     .then((response) => {
-                        console.log(response);
                         this.options = _.merge(response.data, { 0: 'Root' });
                         this.selectIsLoading = false;
                     });

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

@@ -2,9 +2,9 @@
 
 namespace Modules\Media\Http\Controllers\Api;
 
-use Illuminate\Http\Request;
 use Illuminate\Routing\Controller;
 use Modules\Media\Entities\File;
+use Modules\Media\Http\Requests\MoveMediaRequest;
 use Modules\Media\Repositories\FileRepository;
 use Modules\Media\Repositories\FolderRepository;
 
@@ -25,7 +25,7 @@ public function __construct(FileRepository $file, FolderRepository $folder)
         $this->folder = $folder;
     }
 
-    public function __invoke(Request $request)
+    public function __invoke(MoveMediaRequest $request)
     {
         $destination = $this->folder->findFolder($request->get('destinationFolder'));
         if ($destination === null) {

Modules/Media/Http/Requests/MoveMediaRequest.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace Modules\Media\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class MoveMediaRequest extends FormRequest
+{
+    public function rules()
+    {
+        return [
+            'destinationFolder' => 'required',
+        ];
+    }
+
+    public function authorize()
+    {
+        return true;
+    }
+
+    public function messages()
+    {
+        return [];
+    }
+}

public/js/app.js

@@ -103123,7 +103123,7 @@ exports.default = {
         });
         this.$events.listen('mediaWasMoved', function (eventData) {
             _this4.tableIsLoading = true;
-            _this4.queryServer({ folder_id: eventData.data.folder_id });
+            _this4.queryServer({ folder_id: eventData.folder_id });
         });
     }
 }; //
@@ -104219,18 +104219,25 @@ exports.default = {
             var _this = this;
 
             this.loading = true;
-            _axios2.default.post(route('api.media.media.move'), {
+            this.form = new _formBackendValidation2.default({
                 files: this.selectedMedia,
                 destinationFolder: this.destinationFolder
-            }).then(function (response) {
+            });
+            this.form.post(route('api.media.media.move')).then(function (response) {
                 console.log(response);
                 _this.loading = false;
                 _this.$message({
                     type: 'success',
-                    message: response.data.message
+                    message: response.message
                 });
                 _this.dialogFormVisible = false;
                 _this.$events.emit('mediaWasMoved', response);
+            }).catch(function (error) {
+                _this.loading = false;
+                _this.$notify.error({
+                    title: 'Error',
+                    message: 'There are some errors in the form.'
+                });
             });
         },
         closeDialog: function closeDialog() {
@@ -104242,7 +104249,6 @@ exports.default = {
 
             this.selectIsLoading = true;
             _axios2.default.get(route('api.media.folders.all-nestable')).then(function (response) {
-                console.log(response);
                 _this2.options = _.merge(response.data, { 0: 'Root' });
                 _this2.selectIsLoading = false;
             });
@@ -104310,7 +104316,9 @@ var render = function() {
                 "el-form-item",
                 {
                   class: {
-                    "el-form-item is-error": _vm.form.errors.has("name")
+                    "el-form-item is-error": _vm.form.errors.has(
+                      "destinationFolder"
+                    )
                   },
                   attrs: { label: "To" }
                 },
@@ -104343,11 +104351,13 @@ var render = function() {
                     })
                   ),
                   _vm._v(" "),
-                  _vm.form.errors.has("name")
+                  _vm.form.errors.has("destinationFolder")
                     ? _c("div", {
                         staticClass: "el-form-item__error",
                         domProps: {
-                          textContent: _vm._s(_vm.form.errors.first("name"))
+                          textContent: _vm._s(
+                            _vm.form.errors.first("destinationFolder")
+                          )
                         }
                       })
                     : _vm._e()