Improve file deletion logic to not require a refresh

Author: DaneEveritt

resources/assets/scripts/components/server/components/filemanager/FileContextMenu.vue

@@ -79,8 +79,7 @@
             },
 
             openDeleteModal: function () {
-                window.events.$emit('server:files:delete', this.object);
-                this.$emit('close');
+                this.$emit('action:delete', this.object);
             }
         }
     });

resources/assets/scripts/components/server/components/filemanager/FileRow.vue

@@ -12,11 +12,13 @@
         </div>
         <FileContextMenu
             class="context-menu"
-            v-bind:object="file"
+            :object="file"
             v-show="contextMenuVisible"
             v-on:close="contextMenuVisible = false"
+            v-on:action:delete="showDeleteFileModal"
             ref="contextMenu"
         />
+        <DeleteFileModal :visible.sync="deleteModalVisible" :object="file" v-on:deleted="$emit('deleted')" v-on:close="deleteModalVisible = false"/>
     </div>
 </template>
 
@@ -27,10 +29,11 @@
     import {formatDate, readableSize} from '../../../../helpers'
     import FileContextMenu from "./FileContextMenu.vue";
     import {DirectoryContentObject} from "@/api/server/types";
+    import DeleteFileModal from "@/components/server/components/filemanager/modals/DeleteFileModal.vue";
 
     export default Vue.extend({
         name: 'FileRow',
-        components: {Icon, FileContextMenu},
+        components: {DeleteFileModal, Icon, FileContextMenu},
 
         props: {
             file: {
@@ -46,6 +49,7 @@
         data: function () {
             return {
                 contextMenuVisible: false,
+                deleteModalVisible: false,
             };
         },
 
@@ -67,6 +71,11 @@
         },
 
         methods: {
+            showDeleteFileModal: function () {
+                this.contextMenuVisible = false;
+                this.deleteModalVisible = true;
+            },
+
             /**
              * Handle a right-click action on a file manager row.
              */

resources/assets/scripts/components/server/components/filemanager/modals/DeleteFileModal.vue

@@ -13,7 +13,10 @@
             </p>
             <div class="mt-8 text-right">
                 <button class="btn btn-secondary btn-sm" v-on:click.prevent="visible = false">Cancel</button>
-                <button class="btn btn-red btn-sm ml-2" v-on:click="deleteItem">Yes, Delete</button>
+                <button class="btn btn-red btn-sm ml-2" v-on:click="deleteItem" :disabled="isLoading">
+                    <span v-if="isLoading" class="spinner white">&nbsp;</span>
+                    <span v-else>Yes, Delete</span>
+                </button>
             </div>
         </div>
     </Modal>
@@ -30,20 +33,27 @@
 
     type DataStructure = {
         isLoading: boolean,
-        object: null | DirectoryContentObject,
-        visible: boolean,
         error: string | null,
     };
 
     export default Vue.extend({
         name: 'DeleteFileModal',
         components: {Modal},
 
+        props: {
+            visible: { type: Boolean, default: false },
+            object: { type: Object as () => DirectoryContentObject, required: true }
+        },
+
+        watch: {
+            visible: function (value: boolean) {
+                this.$emit('update:visible', value);
+            },
+        },
+
         data: function (): DataStructure {
             return {
                 isLoading: false,
-                visible: false,
-                object: null,
                 error: null,
             };
         },
@@ -52,45 +62,20 @@
             ...mapState('server', ['fm', 'server', 'credentials']),
         },
 
-        mounted: function () {
-            window.events.$on('server:files:delete', (object: DirectoryContentObject) => {
-                this.visible = true;
-                this.object = object;
-            });
-        },
-
-        beforeDestroy: function () {
-            window.events.$off('server:files:delete');
-        },
-
         methods: {
             deleteItem: function () {
-                if (!this.object) {
-                    return;
-                }
-
                 this.isLoading = true;
 
                 deleteElement(this.server.uuid, this.credentials, [
                     join(this.fm.currentDirectory, this.object.name)
                 ])
-                    .then(() => {
-                        this.$emit('close');
-                        this.closeModal();
-                    })
+                    .then(() => this.$emit('deleted'))
                     .catch((error: AxiosError) => {
-                        this.error = `There was an error deleting the requested ${(this.object && this.object.directory) ? 'folder' : 'file'}. Response was: ${error.message}`;
-                        console.error('Error at Server::Files::Delete', { error });
+                        this.error = `There was an error deleting the requested ${(this.object.directory) ? 'folder' : 'file'}. Response was: ${error.message}`;
+                        console.error('Error at Server::Files::Delete', {error});
                     })
                     .then(() => this.isLoading = false);
             },
-
-            closeModal: function () {
-                this.object = null;
-                this.isLoading = false;
-                this.visible = false;
-                this.error = null;
-            },
         },
     });
 </script>

resources/assets/scripts/components/server/subpages/FileManager.vue

@@ -32,10 +32,10 @@
                     <div class="flex-none w-1/6">Actions</div>
                 </div>
                 <div v-for="directory in directories">
-                    <FolderRow :directory="directory"/>
+                    <FolderRow :directory="directory" :key="directory.name"/>
                 </div>
                 <div v-for="file in files">
-                    <FileRow :file="file" :editable="editableFiles"/>
+                    <FileRow :file="file" :editable="editableFiles" v-on:deleted="fileRowDeleted(file)" :key="file.name"/>
                 </div>
             </div>
         </div>
@@ -50,7 +50,6 @@
         </div>
         <CreateFolderModal v-on:close="listDirectory"/>
         <RenameModal/>
-        <DeleteFileModal v-on:close="listDirectory"/>
     </div>
 </template>
 
@@ -179,7 +178,11 @@
 
             openNewFolderModal: function () {
                 window.events.$emit('server:files:open-directory-modal');
-            }
+            },
+
+            fileRowDeleted: function (file: DirectoryContentObject) {
+                this.files = this.files.filter(data => data !== file);
+            },
         },
     });
 </script>