Add minimum code needed to open new file modal

Author: DaneEveritt

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

@@ -27,7 +27,7 @@
             </div>
         </div>
         <div>
-            <div class="context-row">
+            <div class="context-row" v-on:click="openNewFileModal">
                 <div class="icon">
                     <Icon name="file-plus" class="h-4"/>
                 </div>
@@ -73,6 +73,11 @@
                 this.$emit('close');
             },
 
+            openNewFileModal: function () {
+                window.events.$emit('server:files:open-new-file-modal');
+                this.$emit('close');
+            },
+
             triggerAction: function (action: string) {
                 this.$emit(`action:${action}`);
             }

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

@@ -0,0 +1,43 @@
+<template>
+    <Modal :show="isVisible" v-on:close="isVisible = false" :dismissable="!isLoading">
+        <MessageBox class="alert error mb-8" title="Error" :message="error" v-if="error"/>
+    </Modal>
+</template>
+
+<script lang="ts">
+    import Vue from 'vue';
+    import MessageBox from "@/components/MessageBox.vue";
+    import Modal from "@/components/core/Modal.vue";
+    import {ApplicationState} from '@/store/types';
+    import {mapState} from "vuex";
+
+    export default Vue.extend({
+        name: 'NewFileModal',
+
+        components: {MessageBox, Modal},
+
+        data: function (): { error: string | null, isVisible: boolean, isLoading: boolean } {
+            return {
+                error: null,
+                isVisible: false,
+                isLoading: false,
+            };
+        },
+
+        computed: mapState({
+            fm: (state: ApplicationState) => state.server.fm,
+        }),
+
+        mounted: function () {
+            window.events.$on('server:files:open-new-file-modal', () => {
+                this.isVisible = true;
+            });
+        },
+
+        methods: {
+            submit: function () {
+
+            },
+        }
+    })
+</script>

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

@@ -48,10 +48,11 @@
                 <a href="#" class="block btn btn-secondary btn-sm" v-on:click.prevent="openNewFolderModal">New Folder</a>
             </div>
             <div>
-                <a href="#" class="block btn btn-primary btn-sm">New File</a>
+                <a href="#" class="block btn btn-primary btn-sm" v-on:click.prevent="openNewFileModal">New File</a>
             </div>
         </div>
         <CreateFolderModal v-on:created="directoryCreated"/>
+        <NewFileModal/>
     </div>
 </template>
 
@@ -64,6 +65,7 @@
     import CreateFolderModal from '../components/filemanager/modals/CreateFolderModal.vue';
     import DeleteFileModal from '../components/filemanager/modals/DeleteFileModal.vue';
     import {DirectoryContentObject} from "@/api/server/types";
+    import NewFileModal from "@/components/server/components/filemanager/modals/NewFileModal.vue";
 
     type DataStructure = {
         loading: boolean,
@@ -76,7 +78,7 @@
 
     export default Vue.extend({
         name: 'FileManager',
-        components: {CreateFolderModal, DeleteFileModal, FileRow},
+        components: {CreateFolderModal, DeleteFileModal, FileRow, NewFileModal},
 
         computed: {
             /**
@@ -178,6 +180,10 @@
                 window.events.$emit('server:files:open-directory-modal');
             },
 
+            openNewFileModal: function () {
+                window.events.$emit('server:files:open-new-file-modal');
+            },
+
             fileRowDeleted: function (file: DirectoryContentObject, directory: boolean) {
                 if (directory) {
                     this.directories = this.directories.filter(data => data !== file);