Base delete file view, not actually connected to anything

Author: DaneEveritt

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

@@ -41,7 +41,7 @@
             </div>
         </div>
         <div>
-            <div class="context-row danger">
+            <div class="context-row danger" v-on:click="openDeleteModal">
                 <div class="icon">
                     <Icon name="delete" class="h-4"/>
                 </div>
@@ -77,6 +77,11 @@
                 window.events.$emit('server:files:rename', this.object);
                 this.$emit('close');
             },
+
+            openDeleteModal: function () {
+                window.events.$emit('server:files:delete', this.object);
+                this.$emit('close');
+            }
         }
     });
 </script>

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

@@ -0,0 +1,48 @@
+<template>
+    <Modal :show="visible" v-on:close="visible = false">
+        <div v-if="object">
+            <h3 class="font-medium mb-6">Really delete {{ object.name }}?</h3>
+            <p class="text-sm text-neutral-700">
+                Deletion is a permanent operation: <strong>{{ object.name }}</strong><span v-if="object.folder">, as well as its contents,</span> will be removed immediately.
+            </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">Yes, Delete</button>
+            </div>
+        </div>
+    </Modal>
+</template>
+
+<script lang="ts">
+    import Vue from 'vue';
+    import Modal from '@/components/core/Modal.vue';
+    import {DirectoryContentObject} from "@/api/server/types";
+
+    type DataStructure = {
+        object: null | DirectoryContentObject,
+        visible: boolean,
+    };
+
+    export default Vue.extend({
+        name: 'DeleteFileModal',
+        components: {Modal},
+
+        data: function (): DataStructure {
+            return {
+                visible: false,
+                object: null,
+            };
+        },
+
+        mounted: function () {
+            window.events.$on('server:files:delete', (object: DirectoryContentObject) => {
+                this.visible = true;
+                this.object = object;
+            });
+        },
+
+        beforeDestroy: function () {
+            window.events.$off('server:files:delete');
+        },
+    });
+</script>

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

@@ -49,7 +49,8 @@
             </div>
         </div>
         <CreateFolderModal v-on:close="listDirectory"/>
-        <RenameModal v-on:close="listDirectory"/>
+        <RenameModal/>
+        <DeleteFileModal v-on:close="listDirectory"/>
     </div>
 </template>
 
@@ -62,6 +63,7 @@
     import FolderRow from "@/components/server/components/filemanager/FolderRow.vue";
     import CreateFolderModal from '../components/filemanager/modals/CreateFolderModal.vue';
     import RenameModal from '../components/filemanager/modals/RenameModal.vue';
+    import DeleteFileModal from '../components/filemanager/modals/DeleteFileModal.vue';
     import {DirectoryContentObject} from "@/api/server/types";
 
     type DataStructure = {
@@ -75,7 +77,7 @@
 
     export default Vue.extend({
         name: 'FileManager',
-        components: {CreateFolderModal, FileRow, FolderRow, RenameModal},
+        components: {CreateFolderModal, DeleteFileModal, FileRow, FolderRow, RenameModal},
         computed: {
             ...mapState('server', ['server', 'credentials']),
             ...mapState('socket', ['connected']),