Break out file manager file/directory rows into individual components

resources/assets/scripts/components/server/components/FileManagerFileRow.vue

@@ -0,0 +1,47 @@
+<template>
+    <div>
+        <div class="row" :class="{ clickable: canEdit(file) }">
+            <div class="flex-none icon">
+                <file-text-icon v-if="!file.symlink"/>
+                <link2-icon v-else/>
+            </div>
+            <div class="flex-1">{{file.name}}</div>
+            <div class="flex-1 text-right text-grey-dark">{{readableSize(file.size)}}</div>
+            <div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div>
+            <div class="flex-none w-1/6"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { FileTextIcon, Link2Icon } from 'vue-feather-icons';
+    import * as Helpers from './../../../helpers/index';
+
+    export default {
+        name: 'file-manager-file-row',
+        components: { FileTextIcon, Link2Icon },
+        props: {
+            file: {type: Object, required: true},
+            editable: {type: Array, required: true}
+        },
+
+        mounted: function () {
+
+        },
+
+        methods: {
+            /**
+             * Determine if a file can be edited on the Panel.
+             *
+             * @param {Object} file
+             * @return {Boolean}
+             */
+            canEdit: function (file) {
+                return this.editable.indexOf(file.mime) >= 0;
+            },
+
+            readableSize: Helpers.readableSize,
+            formatDate: Helpers.formatDate,
+        }
+    };
+</script>

resources/assets/scripts/components/server/components/FileManagerFolderRow.vue

@@ -0,0 +1,47 @@
+<template>
+    <div>
+        <router-link class="row clickable"
+                     :to="{ name: 'server-files', params: { path: getClickablePath(directory.name).replace(/^\//, '') }}"
+        >
+            <div class="flex-none icon">
+                <folder-icon/>
+            </div>
+            <div class="flex-1">{{directory.name}}</div>
+            <div class="flex-1 text-right text-grey-dark"></div>
+            <div class="flex-1 text-right text-grey-dark">{{formatDate(directory.modified)}}</div>
+            <div class="flex-none w-1/6"></div>
+        </router-link>
+    </div>
+</template>
+
+<script>
+    import { FolderIcon } from 'vue-feather-icons';
+    import { formatDate } from './../../../helpers/index';
+
+    export default {
+        name: 'file-manager-folder-row',
+        components: { FolderIcon },
+        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.
+             *
+             * @return {String}
+             */
+            getClickablePath (directory) {
+                return `${this.currentDirectory.replace(/\/$/, '')}/${directory}`;
+            },
+
+            formatDate: formatDate,
+        }
+    }
+</script>

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

@@ -30,28 +30,11 @@
                 <p class="text-grey text-sm text-center p-6 pb-4">This directory is empty.</p>
             </div>
             <div v-else>
-                <router-link class="row clickable"
+                <div v-for="directory in directories">
-                             v-for="directory in directories"
+                    <file-manager-folder-row :directory="directory"/>
-                             :to="{ name: 'server-files', params: { path: getClickablePath(directory.name).replace(/^\//, '') }}"
+                </div>
-                             :key="directory.name + directory.modified"
+                <div v-for="file in files">
-                >
+                    <file-manager-file-row :file="file" :editable="editableFiles" />
-                    <div class="flex-none icon">
-                        <folder-icon/>
-                    </div>
-                    <div class="flex-1">{{directory.name}}</div>
-                    <div class="flex-1 text-right text-grey-dark"></div>
-                    <div class="flex-1 text-right text-grey-dark">{{formatDate(directory.modified)}}</div>
-                    <div class="flex-none w-1/6"></div>
-                </router-link>
-                <div class="row" v-for="file in files" :class="{ clickable: canEdit(file) }">
-                    <div class="flex-none icon">
-                        <file-text-icon v-if="!file.symlink"/>
-                        <link2-icon v-else/>
-                    </div>
-                    <div class="flex-1">{{file.name}}</div>
-                    <div class="flex-1 text-right text-grey-dark">{{readableSize(file.size)}}</div>
-                    <div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div>
-                    <div class="flex-none w-1/6"></div>
                 </div>
             </div>
         </div>
@@ -59,16 +42,16 @@
 </template>
 
 <script>
-    import _ from 'lodash';
+    import map from 'lodash/map';
     import filter from 'lodash/filter';
     import isObject from 'lodash/isObject';
-    import format from 'date-fns/format';
     import { mapState } from 'vuex';
-    import { FileTextIcon, FolderIcon, Link2Icon } from 'vue-feather-icons';
+    import FileManagerFileRow from '../components/FileManagerFileRow';
+    import FileManagerFolderRow from '../components/FileManagerFolderRow';
 
     export default {
         name: 'file-manager-page',
-        components: {FileTextIcon, FolderIcon, Link2Icon},
+        components: {FileManagerFolderRow, FileManagerFileRow},
 
         computed: {
             ...mapState('server', ['server', 'credentials']),
@@ -84,7 +67,7 @@
                     return [];
                 }
 
-                return _.map(directories, function (value, key) {
+                return map(directories, function (value, key) {
                     if (key === directories.length - 1) {
                         return {directoryName: value};
                     }
@@ -179,58 +162,6 @@
                         this.loading = false;
                     });
             },
-
-            /**
-             * Determine if a file can be edited on the Panel.
-             *
-             * @param {Object} file
-             * @return {Boolean}
-             */
-            canEdit: function (file) {
-                return this.editableFiles.indexOf(file.mime) >= 0;
-            },
-
-            /**
-             * Return a formatted directory path that is used to switch to a nested directory.
-             *
-             * @return {String}
-             */
-            getClickablePath (directory) {
-                return `${this.currentDirectory.replace(/\/$/, '')}/${directory}`;
-            },
-
-            /**
-             * Return the human readable filesize for a given number of bytes. This
-             * uses 1024 as the base, so the response is denoted accordingly.
-             *
-             * @param {Number} bytes
-             * @return {String}
-             */
-            readableSize: function (bytes) {
-                if (Math.abs(bytes) < 1024) {
-                    return `${bytes} Bytes`;
-                }
-
-                let u = -1;
-                const units = ['KiB', 'MiB', 'GiB', 'TiB'];
-
-                do {
-                    bytes /= 1024;
-                    u++;
-                } while (Math.abs(bytes) >= 1024 && u < units.length - 1);
-
-                return `${bytes.toFixed(1)} ${units[u]}`;
-            },
-
-            /**
-             * Format the given date as a human readable string.
-             *
-             * @param {String} date
-             * @return {String}
-             */
-            formatDate: function (date) {
-                return format(date, 'MMM D, YYYY [at] HH:MM');
-            },
         }
     };
 </script>

resources/assets/scripts/helpers/index.js

@@ -0,0 +1,34 @@
+import format from 'date-fns/format';
+
+/**
+ * Return the human readable filesize for a given number of bytes. This
+ * uses 1024 as the base, so the response is denoted accordingly.
+ *
+ * @param {Number} bytes
+ * @return {String}
+ */
+export function readableSize (bytes) {
+    if (Math.abs(bytes) < 1024) {
+        return `${bytes} Bytes`;
+    }
+
+    let u = -1;
+    const units = ['KiB', 'MiB', 'GiB', 'TiB'];
+
+    do {
+        bytes /= 1024;
+        u++;
+    } while (Math.abs(bytes) >= 1024 && u < units.length - 1);
+
+    return `${bytes.toFixed(1)} ${units[u]}`;
+}
+
+/**
+ * Format the given date as a human readable string.
+ *
+ * @param {String} date
+ * @return {String}
+ */
+export function formatDate (date) {
+    return format(date, 'MMM D, YYYY [at] HH:MM');
+}