Add initial support for tracking current FM directory for creating a folder (and other stuff eventually)

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

@@ -33,7 +33,7 @@
                 </div>
                 <div class="action">New File</div>
             </div>
-            <div class="context-row">
+            <div class="context-row" v-on:click="openFolderModal">
                 <div class="icon">
                     <Icon name="folder-plus" class="h-4"/>
                 </div>
@@ -58,5 +58,12 @@
     export default Vue.extend({
         name: 'FileContextMenu',
         components: {Icon},
+
+        methods: {
+            openFolderModal: function () {
+                window.events.$emit('server:files:open-directory-modal');
+                this.$emit('close');
+            }
+        }
     });
 </script>

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

@@ -10,7 +10,12 @@
             <div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div>
             <div class="flex-none w-1/6"></div>
         </div>
-        <FileContextMenu class="context-menu" v-show="contextMenuVisible" ref="contextMenu"/>
+        <FileContextMenu
+            class="context-menu"
+            v-show="contextMenuVisible"
+            v-on:close="contextMenuVisible = false"
+            ref="contextMenu"
+        />
     </div>
 </template>
 

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

@@ -0,0 +1,34 @@
+<template>
+    <Modal :show="visible" v-on:close="visible = false">
+        <div>
+            <h2 class="font-medium text-neutral-900 mb-6">{{ fm.currentDirectory }}</h2>
+        </div>
+    </Modal>
+</template>
+
+<script lang="ts">
+    import Vue from 'vue';
+    import Modal from '@/components/core/Modal.vue';
+    import {mapState} from "vuex";
+
+    export default Vue.extend({
+        name: 'CreateFolderModal',
+        components: {Modal},
+
+        computed: {
+            ...mapState('server', ['fm']),
+        },
+
+        data: function () {
+            return {
+                visible: false,
+            };
+        },
+
+        mounted: function () {
+            window.events.$on('server:files:open-directory-modal', () => {
+                this.visible = true;
+            });
+        },
+    });
+</script>

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

@@ -42,12 +42,13 @@
         <div class="flex mt-6" v-if="!loading && !errorMessage">
             <div class="flex-1"></div>
             <div class="mr-4">
-                <a href="#" class="block btn btn-secondary btn-sm">New Folder</a>
+                <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>
             </div>
         </div>
+        <CreateFolderModal/>
     </div>
 </template>
 
@@ -58,6 +59,7 @@
     import getDirectoryContents from "@/api/server/getDirectoryContents";
     import FileRow from "@/components/server/components/filemanager/FileRow.vue";
     import FolderRow from "@/components/server/components/filemanager/FolderRow.vue";
+    import CreateFolderModal from '../components/filemanager/modals/CreateFolderModal.vue';
 
     type DataStructure = {
         loading: boolean,
@@ -70,7 +72,7 @@
 
     export default Vue.extend({
         name: 'FileManager',
-        components: {FileRow, FolderRow},
+        components: {CreateFolderModal, FileRow, FolderRow},
         computed: {
             ...mapState('server', ['server', 'credentials']),
             ...mapState('socket', ['connected']),
@@ -110,6 +112,8 @@
              * Watch the current directory setting and when it changes update the file listing.
              */
             currentDirectory: function () {
+                this.$store.dispatch('server/updateCurrentDirectory', this.currentDirectory);
+
                 this.listDirectory();
             },
 
@@ -167,6 +171,10 @@
                         this.loading = false;
                     });
             },
+
+            openNewFolderModal: function () {
+                window.events.$emit('server:files:open-directory-modal');
+            }
         },
     });
 </script>

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

@@ -1,8 +1,8 @@
 // @ts-ignore
 import route from '../../../../../vendor/tightenco/ziggy/src/js/route';
 import {ActionContext} from "vuex";
-import {ServerData} from "../../models/server";
+import {ServerData} from "@/models/server";
-import {ServerApplicationCredentials, ServerState} from "../types";
+import {FileManagerState, ServerApplicationCredentials, ServerState} from "../types";
 
 export default {
     namespaced: true,
@@ -10,6 +10,9 @@ export default {
         server: {},
         credentials: {node: '', key: ''},
         console: [],
+        fm: {
+            currentDirectory: '/',
+        },
     },
     getters: {},
     actions: {
@@ -63,8 +66,20 @@ export default {
                     .catch(reject);
             });
         },
+
+        /**
+         * Update the last viewed directory for the server the user is currently viewing. This allows
+         * us to quickly navigate back to that directory, as well as ensure that actions taken are
+         * performed aganist the correct directory without having to pass that mess everywhere.
+         */
+        updateCurrentDirectory: ({commit}: ActionContext<ServerState, any>, directory: string) => {
+            commit('SET_CURRENT_DIRECTORY', directory);
+        },
     },
     mutations: {
+        SET_CURRENT_DIRECTORY: function (state: ServerState, directory: string) {
+            state.fm.currentDirectory = directory;
+        },
         SERVER_DATA: function (state: ServerState, data: ServerData) {
             state.server = data;
         },

resources/assets/scripts/store/types.ts

@@ -19,10 +19,15 @@ export type ServerApplicationCredentials = {
     key: string,
 };
 
+export type  FileManagerState = {
+    currentDirectory: string,
+}
+
 export type ServerState = {
     server: ServerData,
     credentials: ServerApplicationCredentials,
     console: Array<string>,
+    fm: FileManagerState,
 };
 
 export type DashboardState = {