Support saving existing files

resources/assets/scripts/api/http.ts

@@ -1,4 +1,4 @@
-import axios, {AxiosInstance} from 'axios';
+import axios, {AxiosError, AxiosInstance} from 'axios';
 import {ServerApplicationCredentials} from "@/store/types";
 
 // This token is set in the bootstrap.js file at the beginning of the request
@@ -38,3 +38,18 @@ export function withCredentials(server: string, credentials: ServerApplicationCr
 
     return http;
 }
+
+/**
+ * Converts an error into a human readable response. Mostly just a generic helper to
+ * make sure we display the message from the server back to the user if we can.
+ */
+export function httpErrorToHuman(error: any): string {
+    if (error.response && error.response.data) {
+        const { data } = error.response;
+        if (data.errors && data.errors[0] && data.errors[0].detail) {
+            return data.errors[0].detail;
+        }
+    }
+
+    return error.message;
+}

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

@@ -0,0 +1,14 @@
+import http from "@/api/http";
+
+export default (server: string, file: string, content: string): Promise<void> => {
+    return new Promise((resolve, reject) => {
+        http.post(`/api/client/servers/${server}/files/write`, content, {
+            params: { file },
+            headers: {
+                'Content-Type': 'text/plain; charset=utf-8',
+            },
+        })
+            .then(() => resolve())
+            .catch(reject);
+    });
+}

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

@@ -19,7 +19,7 @@
                     <button class="btn btn-secondary btn-sm" v-on:click="closeModal">
                         Cancel
                     </button>
-                    <button class="ml-2 btn btn-primary btn-sm">
+                    <button class="ml-2 btn btn-primary btn-sm" v-on:click="submit">
                         Save
                     </button>
                 </div>
@@ -39,6 +39,8 @@
     import {DirectoryContentObject} from "@/api/server/types";
     import getFileContents from '@/api/server/files/getFileContents';
     import SpinnerModal from "@/components/core/SpinnerModal.vue";
+    import writeFileContents from '@/api/server/files/writeFileContents';
+    import {httpErrorToHuman} from '@/api/http';
 
     interface Data {
         file?: DirectoryContentObject,
@@ -120,7 +122,16 @@
 
         methods: {
             submit: function () {
+                this.isLoading = true;
+                const content = this.editor!.getValue();
 
+                writeFileContents(this.serverUuid!, join(this.fm!.currentDirectory, this.file!.name), content)
+                    .then(() => this.error = null)
+                    .catch(error => {
+                        console.log(error);
+                        this.error = httpErrorToHuman(error);
+                    })
+                    .then(() => this.isLoading = false);
             },
 
             loadFileContent: function (): Promise<void> {