Add initial support for opening a file in the file manager, still needs more work

resources/assets/scripts/api/server/files/getFileContents.ts

@@ -0,0 +1,11 @@
+import http from "@/api/http";
+
+export default (server: string, file: string): Promise<string> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/client/servers/${server}/files/contents`, {
+            params: { file }
+        })
+            .then(response => resolve(response.data))
+            .catch(reject);
+    });
+}

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

@@ -74,7 +74,7 @@
             },
 
             openNewFileModal: function () {
-                window.events.$emit('server:files:open-new-file-modal');
+                window.events.$emit('server:files:open-edit-file-modal');
                 this.$emit('close');
             },
 

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

@@ -1,7 +1,12 @@
 <template>
     <div>
         <div v-on:contextmenu="showContextMenu">
-            <div class="row" :class="{ 'cursor-pointer': canEdit(file), 'active-selection': contextMenuVisible }" v-if="!file.directory">
+            <div
+                class="row"
+                :class="{ 'cursor-pointer': canEdit(file), 'active-selection': contextMenuVisible }"
+                v-if="!file.directory"
+                v-on:click="openFileEditModal(file)"
+            >
                 <div class="flex-none icon">
                     <Icon name="file-text" v-if="!file.symlink"/>
                     <Icon name="link2" v-else/>
@@ -142,6 +147,12 @@
                 });
             },
 
+            openFileEditModal: function (file: DirectoryContentObject) {
+                if (!file.directory && this.canEdit(file)) {
+                    window.events.$emit('server:files:open-edit-file-modal', file);
+                }
+            },
+
             /**
              * Determine if a file can be edited on the Panel.
              */

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

@@ -29,11 +29,17 @@
     import Vue from 'vue';
     import Icon from "@/components/core/Icon.vue";
     import MessageBox from "@/components/MessageBox.vue";
-    import {ApplicationState} from '@/store/types';
+    import {ApplicationState, FileManagerState} from '@/store/types';
     import {mapState} from "vuex";
     import * as Ace from 'brace';
+    import { join } from 'path';
+    import {DirectoryContentObject} from "@/api/server/types";
+    import getFileContents from '@/api/server/files/getFileContents';
 
     interface Data {
+        file?: DirectoryContentObject,
+        serverUuid?: string,
+        fm?: FileManagerState,
         error: string | null,
         editor: Ace.Editor | null,
         isVisible: boolean,
@@ -77,17 +83,20 @@
 
         computed: mapState({
             fm: (state: ApplicationState) => state.server.fm,
+            serverUuid: (state: ApplicationState) => state.server.server.uuid,
         }),
 
         mounted: function () {
-            window.events.$on('server:files:open-new-file-modal', () => {
+            window.events.$on('server:files:open-edit-file-modal', (file?: DirectoryContentObject) => {
+                this.file = file;
                 this.isVisible = true;
 
                 this.$nextTick(() => {
                     this.editor = Ace.edit('editor');
                     this.loadDependencies()
                         .then(() => this.loadLanguages())
-                        .then(() => this.configureEditor());
+                        .then(() => this.configureEditor())
+                        .then(() => this.loadFileContent())
                 });
             });
         },
@@ -97,6 +106,18 @@
 
             },
 
+            loadFileContent: function () {
+                if (!this.file || !this.editor || this.file.directory) {
+                    return;
+                }
+
+                getFileContents(this.serverUuid!, join(this.fm!.currentDirectory, this.file.name))
+                    .then(contents => {
+                        this.editor!.$blockScrolling = Infinity;
+                        this.editor!.setValue(contents, 1);
+                    });
+            },
+
             updateFileLanguage: function (e: MouseEvent) {
                 if (!this.editor) {
                     return;
@@ -154,6 +175,14 @@
 <style>
     #editor {
         @apply .h-full .relative;
+
+        & > .ace_gutter > .ace_layer, & > .ace_scroller {
+            @apply .py-1;
+        }
+
+        & .ace_gutter-active-line {
+            @apply .mt-1;
+        }
     }
 
     .ace_editor {

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

@@ -52,7 +52,7 @@
             </div>
         </div>
         <CreateFolderModal v-on:created="directoryCreated"/>
-        <NewFileModal/>
+        <EditFileModal/>
     </div>
 </template>
 
@@ -65,7 +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";
+    import EditFileModal from "@/components/server/components/filemanager/modals/EditFileModal.vue";
 
     type DataStructure = {
         loading: boolean,
@@ -78,7 +78,7 @@
 
     export default Vue.extend({
         name: 'FileManager',
-        components: {CreateFolderModal, DeleteFileModal, FileRow, NewFileModal},
+        components: {CreateFolderModal, DeleteFileModal, FileRow, EditFileModal},
 
         computed: {
             /**
@@ -181,7 +181,7 @@
             },
 
             openNewFileModal: function () {
-                window.events.$emit('server:files:open-new-file-modal');
+                window.events.$emit('server:files:open-edit-file-modal');
             },
 
             fileRowDeleted: function (file: DirectoryContentObject, directory: boolean) {