Add support for actually creating that folder on the daemon

Author: DaneEveritt

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

@@ -0,0 +1,27 @@
+import {ServerApplicationCredentials} from "@/store/types";
+import http from "@/api/http";
+import {AxiosError, AxiosRequestConfig} from "axios";
+import {ServerData} from "@/models/server";
+
+/**
+ * Connects to the remote daemon and creates a new folder on the server.
+ */
+export function createFolder(server: ServerData, credentials: ServerApplicationCredentials, path: string): Promise<void> {
+    const config: AxiosRequestConfig = {
+        baseURL: credentials.node,
+        headers: {
+            'X-Access-Server': server.uuid,
+            'X-Access-Token': credentials.key,
+        },
+    };
+
+    return new Promise((resolve, reject) => {
+        http.post('/v1/server/file/folder', { path }, config)
+            .then(() => {
+                resolve();
+            })
+            .catch((error: AxiosError) => {
+                reject(error);
+            });
+    });
+}

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

@@ -1,5 +1,5 @@
 <template>
-    <Modal :show="visible" v-on:close="onModalClose" :showCloseIcon="false">
+    <Modal :show="visible" v-on:close="onModalClose" :showCloseIcon="false" :dismissable="!isLoading">
         <div class="flex items-end">
             <div class="flex-1">
                 <label class="input-label">
@@ -16,8 +16,15 @@
                 />
             </div>
             <div class="ml-4">
-                <button class="btn btn-primary btn-sm" type="submit" v-on:submit.prevent="submit">
-                    Create
+                <button type="submit"
+                        class="btn btn-primary btn-sm"
+                        v-on:click.prevent="submit"
+                        :disabled="errors.any() || isLoading"
+                >
+                    <span class="spinner white" v-bind:class="{ hidden: !isLoading }">&nbsp;</span>
+                    <span :class="{ hidden: isLoading }">
+                        Create
+                    </span>
                 </button>
             </div>
         </div>
@@ -31,17 +38,19 @@
     import Vue from 'vue';
     import Modal from '@/components/core/Modal.vue';
     import {mapState} from "vuex";
+    import {createFolder} from "@/api/server/files/createFolder";
 
     export default Vue.extend({
         name: 'CreateFolderModal',
         components: {Modal},
 
         computed: {
-            ...mapState('server', ['fm']),
+            ...mapState('server', ['server', 'credentials', 'fm']),
         },
 
         data: function () {
             return {
+                isLoading: false,
                 visible: false,
                 folderName: '',
             };
@@ -55,19 +64,35 @@
             window.events.$on('server:files:open-directory-modal', () => {
                 this.visible = true;
                 this.$nextTick(() => {
-                    (this.$refs.folderNameField as HTMLInputElement).focus();
+                    if (this.$refs.folderNameField) {
+                        (this.$refs.folderNameField as HTMLInputElement).focus();
+                    }
                 });
             });
         },
 
+        beforeDestroy: function () {
+            window.events.$off('server:files:open-directory-modal');
+        },
+
         methods: {
             submit: function () {
                 this.$validator.validate().then((result) => {
                     if (!result) {
                         return;
                     }
 
-                    this.onModalClose();
+                    this.isLoading = true;
+
+                    console.log(`${this.fm.currentDirectory}/${this.folderName.replace(/^\//, '')}`);
+
+                    createFolder(this.server, this.credentials, `${this.fm.currentDirectory}/${this.folderName.replace(/^\//, '')}`)
+                        .then(() => {
+                            this.$emit('close');
+                            this.onModalClose();
+                        })
+                        .catch(console.error.bind(this))
+                        .then(() => this.isLoading = false)
                 });
             },
 

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

@@ -48,7 +48,7 @@
                 <a href="#" class="block btn btn-primary btn-sm">New File</a>
             </div>
         </div>
-        <CreateFolderModal/>
+        <CreateFolderModal v-on:close="listDirectory"/>
     </div>
 </template>
 
@@ -112,8 +112,6 @@
              * Watch the current directory setting and when it changes update the file listing.
              */
             currentDirectory: function () {
-                this.$store.dispatch('server/updateCurrentDirectory', this.currentDirectory);
-
                 this.listDirectory();
             },
 
@@ -152,6 +150,8 @@
                 this.loading = true;
 
                 const directory = encodeURI(this.currentDirectory.replace(/^\/|\/$/, ''));
+                this.$store.dispatch('server/updateCurrentDirectory', `/${directory}`);
+
                 getDirectoryContents(this.$route.params.id, directory)
                     .then((response) => {
                         this.files = response.files;

resources/assets/scripts/store/modules/server.ts

@@ -2,7 +2,7 @@
 import route from '../../../../../vendor/tightenco/ziggy/src/js/route';
 import {ActionContext} from "vuex";
 import {ServerData} from "@/models/server";
-import {FileManagerState, ServerApplicationCredentials, ServerState} from "../types";
+import {ServerApplicationCredentials, ServerState} from "../types";
 
 export default {
     namespaced: true,