Combine logic so we aren't constantly duplicating it

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

@@ -1,14 +1,30 @@
 <template>
     <div>
-        <div class="row" :class="{ clickable: canEdit(file), 'active-selection': contextMenuVisible }" v-on:contextmenu="showContextMenu">
+        <div v-on:contextmenu="showContextMenu">
-            <div class="flex-none icon">
+            <div class="row" :class="{ clickable: canEdit(file), 'active-selection': contextMenuVisible }" v-if="!file.directory">
-                <Icon name="file-text" v-if="!file.symlink"/>
+                <div class="flex-none icon">
-                <Icon name="link2" v-else/>
+                    <Icon name="file-text" v-if="!file.symlink"/>
+                    <Icon name="link2" v-else/>
+                </div>
+                <div class="flex-1">{{file.name}}</div>
+                <div class="flex-1 text-right text-neutral-600">{{readableSize(file.size)}}</div>
+                <div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div>
+                <div class="flex-none w-1/6"></div>
             </div>
-            <div class="flex-1">{{file.name}}</div>
+            <router-link class="row clickable"
-            <div class="flex-1 text-right text-neutral-600">{{readableSize(file.size)}}</div>
+                         :class="{ 'active-selection': contextMenuVisible }"
-            <div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div>
+                         :to="{ name: 'server-files', params: { path: getClickablePath(file.name) }}"
-            <div class="flex-none w-1/6"></div>
+                         v-else
+            >
+                <div class="flex-none icon text-primary-700">
+                    <Icon name="folder"/>
+                </div>
+                <div class="flex-1">{{file.name}}</div>
+                <div class="flex-1 text-right text-neutral-600"></div>
+                <div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div>
+                <div class="flex-none w-1/6"></div>
+            </router-link>
+
         </div>
         <FileContextMenu
             class="context-menu"
@@ -41,13 +57,15 @@
                 required: true,
             },
             editable: {
-                type: Array,
+                type: Array as () => Array<string>,
-                required: true,
+                default: () => [],
+                required: false,
             },
         },
 
         data: function () {
             return {
+                currentDirectory: this.$route.params.path || '/',
                 contextMenuVisible: false,
                 deleteModalVisible: false,
             };
@@ -96,8 +114,8 @@
             /**
              * Determine if a file can be edited on the Panel.
              */
-            canEdit: function (file: any): boolean {
+            canEdit: function (file: DirectoryContentObject): boolean {
-                return this.editable.indexOf(file.mime) >= 0;
+                return !file.directory && this.editable.indexOf(file.mime) >= 0;
             },
 
             /**
@@ -114,6 +132,10 @@
                 }
             },
 
+            getClickablePath(directory: string): string {
+                return `${this.currentDirectory.replace(/\/$/, '')}/${directory}`;
+            },
+
             readableSize: readableSize,
             formatDate: formatDate,
         },

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

@@ -1,47 +0,0 @@
-<template>
-    <div>
-        <router-link class="row clickable"
-                     :to="{ name: 'server-files', params: { path: getClickablePath(directory.name) }}"
-        >
-            <div class="flex-none icon text-primary-700">
-                <Icon name="folder"/>
-            </div>
-            <div class="flex-1">{{directory.name}}</div>
-            <div class="flex-1 text-right text-neutral-600"></div>
-            <div class="flex-1 text-right text-neutral-600">{{formatDate(directory.modified)}}</div>
-            <div class="flex-none w-1/6"></div>
-        </router-link>
-    </div>
-</template>
-
-<script lang="ts">
-    import Vue from 'vue';
-    import {formatDate} from "@/helpers";
-    import Icon from "@/components/core/Icon.vue";
-
-    export default Vue.extend({
-        name: 'FolderRow',
-        components: {Icon},
-
-        props: {
-            directory: {type: Object, required: true},
-        },
-
-        data: function () {
-            return {
-                currentDirectory: this.$route.params.path || '/',
-            };
-        },
-
-        methods: {
-            /**
-             * Return a formatted directory path that is used to switch to a nested directory.
-             */
-            getClickablePath(directory: string): string {
-                return `${this.currentDirectory.replace(/\/$/, '')}/${directory}`;
-            },
-
-            formatDate: formatDate,
-        },
-    });
-</script>

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

@@ -32,7 +32,7 @@
                     <div class="flex-none w-1/6">Actions</div>
                 </div>
                 <div v-for="directory in directories">
-                    <FolderRow :directory="directory" :key="directory.name"/>
+                    <FileRow :file="directory" v-on:deleted="folderRowDeleted(directory)" :key="`dir-${directory.name}`"/>
                 </div>
                 <div v-for="file in files">
                     <FileRow :file="file" :editable="editableFiles" v-on:deleted="fileRowDeleted(file)" :key="file.name"/>
@@ -60,7 +60,6 @@
     import {map} from 'lodash';
     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';
     import RenameModal from '../components/filemanager/modals/RenameModal.vue';
     import DeleteFileModal from '../components/filemanager/modals/DeleteFileModal.vue';
@@ -77,7 +76,7 @@
 
     export default Vue.extend({
         name: 'FileManager',
-        components: {CreateFolderModal, DeleteFileModal, FileRow, FolderRow, RenameModal},
+        components: {CreateFolderModal, DeleteFileModal, FileRow, RenameModal},
         computed: {
             ...mapState('server', ['server', 'credentials']),
             ...mapState('socket', ['connected']),
@@ -185,6 +184,10 @@
                 this.files = this.files.filter(data => data !== file);
             },
 
+            folderRowDeleted: function (file: DirectoryContentObject) {
+                this.directories = this.directories.filter(data => data !== file);
+            },
+
             directoryCreated: function (directory: string) {
                 this.$router.push({ name: 'server-files', params: { path: join(this.currentDirectory, directory) }});
             },