Adding button to move files

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

@@ -23,13 +23,17 @@
                             <div class="actions el-col el-col-14">
                                 <new-folder :parent-id="folderId"></new-folder>
                                 <upload-button :parent-id="folderId"></upload-button>
-                                <el-button-group>
-                                    <move-button :selected-media="selectedMedia"></move-button>
+                                <el-button-group style="width: 30%">
+                                    <el-button type="warning"
+                                               :disabled="selectedMedia.length === 0"
+                                               @click="showMoveMedia"
+                                               >{{ trans('core.move') }}
+                                    </el-button>
+                                    <el-button type="danger" :disabled="selectedMedia.length === 0"
+                                        @click.prevent="batchDelete" :loading="filesAreDeleting">
+                                        {{ trans('core.button.delete') }}
+                                    </el-button>
                                 </el-button-group>
-                                <el-button type="danger" :disabled="selectedMedia.length === 0"
-                                    @click.prevent="batchDelete" :loading="filesAreDeleting">
-                                    {{ trans('core.button.delete') }}
-                                </el-button>
                             </div>
                             <div class="search el-col el-col-5">
                                 <el-input icon="search" @change="performSearch" v-model="searchQuery">
@@ -124,6 +128,7 @@
             </div>
         </div>
         <rename-folder></rename-folder>
+        <move-dialog></move-dialog>
     </div>
 </template>
 
@@ -132,14 +137,14 @@
     import NewFolder from './NewFolder.vue';
     import UploadButton from './UploadButton.vue';
     import RenameFolder from './RenameFolder.vue';
-    import MoveButton from './MoveMediaButton.vue';
+    import MoveMediaDialog from './MoveMediaDialog.vue';
 
     export default {
         components: {
             'new-folder': NewFolder,
             'upload-button': UploadButton,
             'rename-folder': RenameFolder,
-            'move-button': MoveButton,
+            'move-dialog': MoveMediaDialog,
         },
         props: {
             singleModal: { type: Boolean },
@@ -247,6 +252,9 @@
             showEditFolder(scope) {
                 this.$events.emit('editFolderWasClicked', scope);
             },
+            showMoveMedia() {
+                this.$events.emit('moveMediaWasClicked', this.selectedMedia);
+            },
             changeRoot(folderId) {
                 this.tableIsLoading = true;
                 this.queryServer({ folder_id: folderId });
@@ -308,6 +316,10 @@
                 this.tableIsLoading = true;
                 this.queryServer({ folder_id: eventData.data.folder_id });
             });
+            this.$events.listen('mediaWasUpdated', (eventData) => {
+                this.tableIsLoading = true;
+                this.queryServer();
+            });
         },
     };
 </script>

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

+<template>
+    <div>
+        <el-dialog title="Move Media" :visible.sync="dialogFormVisible" size="tiny" class="move-media-dialog">
+            <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-select v-model="destinationFolder" placeholder="Select">
+                        <el-option
+                                v-for="(item, id) in options"
+                                :key="id"
+                                :label="item"
+                                :value="id">
+                            <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>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="closeDialog">{{ trans('core.button.cancel') }}</el-button>
+                <el-button type="warning" @click="onSubmit()">{{ trans('core.move') }}</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios';
+    import Form from 'form-backend-validation';
+
+    export default {
+        props: {
+        },
+        data() {
+            return {
+                selectedMedia: [],
+                dialogFormVisible: false,
+                form: new Form(),
+                loading: false,
+                options: [],
+                destinationFolder: '',
+            };
+        },
+        methods: {
+            onSubmit() {
+                this.loading = true;
+                axios.post(route('api.media.media.move'), {
+                    files: this.selectedMedia,
+                    destinationFolder: this.destinationFolder,
+                })
+                    .then((response) => {
+                        console.log(response);
+                        this.loading = false;
+                        this.$message({
+                            type: 'success',
+                            message: response.message,
+                        });
+                        this.dialogFormVisible = false;
+                        this.$events.emit('mediaWasUpdated', response);
+                    });
+            },
+            closeDialog() {
+                this.form.clear();
+                this.dialogFormVisible = false;
+            },
+            async fetchFolders() {
+                axios.get(route('api.media.folders.all-nestable'))
+                    .then((response) => {
+                        this.options = _.merge(response.data, {0: 'Root'});
+                    });
+            },
+        },
+        mounted() {
+            this.fetchFolders();
+            this.$events.listen('moveMediaWasClicked', (eventData) => {
+                this.selectedMedia = eventData;
+                this.dialogFormVisible = true;
+            });
+        },
+    };
+</script>
+<style>
+    .move-media-dialog .el-select {
+        width: 100%;
+    }
+</style>