Skip to content

Commit 5aa57e0

Browse files
DaneEverittDaneEveritt
committed
Break out file manager file/directory rows into individual components
1 parent e9f8751 commit 5aa57e0

File tree

4 files changed

+138
-79
lines changed

4 files changed

+138
-79
lines changed

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div>
3+
<div class="row" :class="{ clickable: canEdit(file) }">
4+
<div class="flex-none icon">
5+
<file-text-icon v-if="!file.symlink"/>
6+
<link2-icon v-else/>
7+
</div>
8+
<div class="flex-1">{{file.name}}</div>
9+
<div class="flex-1 text-right text-grey-dark">{{readableSize(file.size)}}</div>
10+
<div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div>
11+
<div class="flex-none w-1/6"></div>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import { FileTextIcon, Link2Icon } from 'vue-feather-icons';
18+
import * as Helpers from './../../../helpers/index';
19+
20+
export default {
21+
name: 'file-manager-file-row',
22+
components: { FileTextIcon, Link2Icon },
23+
props: {
24+
file: {type: Object, required: true},
25+
editable: {type: Array, required: true}
26+
},
27+
28+
mounted: function () {
29+
30+
},
31+
32+
methods: {
33+
/**
34+
* Determine if a file can be edited on the Panel.
35+
*
36+
* @param {Object} file
37+
* @return {Boolean}
38+
*/
39+
canEdit: function (file) {
40+
return this.editable.indexOf(file.mime) >= 0;
41+
},
42+
43+
readableSize: Helpers.readableSize,
44+
formatDate: Helpers.formatDate,
45+
}
46+
};
47+
</script>

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div>
3+
<router-link class="row clickable"
4+
:to="{ name: 'server-files', params: { path: getClickablePath(directory.name).replace(/^\//, '') }}"
5+
>
6+
<div class="flex-none icon">
7+
<folder-icon/>
8+
</div>
9+
<div class="flex-1">{{directory.name}}</div>
10+
<div class="flex-1 text-right text-grey-dark"></div>
11+
<div class="flex-1 text-right text-grey-dark">{{formatDate(directory.modified)}}</div>
12+
<div class="flex-none w-1/6"></div>
13+
</router-link>
14+
</div>
15+
</template>
16+
17+
<script>
18+
import { FolderIcon } from 'vue-feather-icons';
19+
import { formatDate } from './../../../helpers/index';
20+
21+
export default {
22+
name: 'file-manager-folder-row',
23+
components: { FolderIcon },
24+
props: {
25+
directory: {type: Object, required: true},
26+
},
27+
28+
data: function () {
29+
return {
30+
currentDirectory: this.$route.params.path || '/',
31+
};
32+
},
33+
34+
methods: {
35+
/**
36+
* Return a formatted directory path that is used to switch to a nested directory.
37+
*
38+
* @return {String}
39+
*/
40+
getClickablePath (directory) {
41+
return `${this.currentDirectory.replace(/\/$/, '')}/${directory}`;
42+
},
43+
44+
formatDate: formatDate,
45+
}
46+
}
47+
</script>

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

Lines changed: 10 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -30,45 +30,28 @@
3030
<p class="text-grey text-sm text-center p-6 pb-4">This directory is empty.</p>
3131
</div>
3232
<div v-else>
33-
<router-link class="row clickable"
34-
v-for="directory in directories"
35-
:to="{ name: 'server-files', params: { path: getClickablePath(directory.name).replace(/^\//, '') }}"
36-
:key="directory.name + directory.modified"
37-
>
38-
<div class="flex-none icon">
39-
<folder-icon/>
40-
</div>
41-
<div class="flex-1">{{directory.name}}</div>
42-
<div class="flex-1 text-right text-grey-dark"></div>
43-
<div class="flex-1 text-right text-grey-dark">{{formatDate(directory.modified)}}</div>
44-
<div class="flex-none w-1/6"></div>
45-
</router-link>
46-
<div class="row" v-for="file in files" :class="{ clickable: canEdit(file) }">
47-
<div class="flex-none icon">
48-
<file-text-icon v-if="!file.symlink"/>
49-
<link2-icon v-else/>
50-
</div>
51-
<div class="flex-1">{{file.name}}</div>
52-
<div class="flex-1 text-right text-grey-dark">{{readableSize(file.size)}}</div>
53-
<div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div>
54-
<div class="flex-none w-1/6"></div>
33+
<div v-for="directory in directories">
34+
<file-manager-folder-row :directory="directory"/>
35+
</div>
36+
<div v-for="file in files">
37+
<file-manager-file-row :file="file" :editable="editableFiles" />
5538
</div>
5639
</div>
5740
</div>
5841
</div>
5942
</template>
6043

6144
<script>
62-
import _ from 'lodash';
45+
import map from 'lodash/map';
6346
import filter from 'lodash/filter';
6447
import isObject from 'lodash/isObject';
65-
import format from 'date-fns/format';
6648
import { mapState } from 'vuex';
67-
import { FileTextIcon, FolderIcon, Link2Icon } from 'vue-feather-icons';
49+
import FileManagerFileRow from '../components/FileManagerFileRow';
50+
import FileManagerFolderRow from '../components/FileManagerFolderRow';
6851
6952
export default {
7053
name: 'file-manager-page',
71-
components: {FileTextIcon, FolderIcon, Link2Icon},
54+
components: {FileManagerFolderRow, FileManagerFileRow},
7255
7356
computed: {
7457
...mapState('server', ['server', 'credentials']),
@@ -84,7 +67,7 @@
8467
return [];
8568
}
8669
87-
return _.map(directories, function (value, key) {
70+
return map(directories, function (value, key) {
8871
if (key === directories.length - 1) {
8972
return {directoryName: value};
9073
}
@@ -179,58 +162,6 @@
179162
this.loading = false;
180163
});
181164
},
182-
183-
/**
184-
* Determine if a file can be edited on the Panel.
185-
*
186-
* @param {Object} file
187-
* @return {Boolean}
188-
*/
189-
canEdit: function (file) {
190-
return this.editableFiles.indexOf(file.mime) >= 0;
191-
},
192-
193-
/**
194-
* Return a formatted directory path that is used to switch to a nested directory.
195-
*
196-
* @return {String}
197-
*/
198-
getClickablePath (directory) {
199-
return `${this.currentDirectory.replace(/\/$/, '')}/${directory}`;
200-
},
201-
202-
/**
203-
* Return the human readable filesize for a given number of bytes. This
204-
* uses 1024 as the base, so the response is denoted accordingly.
205-
*
206-
* @param {Number} bytes
207-
* @return {String}
208-
*/
209-
readableSize: function (bytes) {
210-
if (Math.abs(bytes) < 1024) {
211-
return `${bytes} Bytes`;
212-
}
213-
214-
let u = -1;
215-
const units = ['KiB', 'MiB', 'GiB', 'TiB'];
216-
217-
do {
218-
bytes /= 1024;
219-
u++;
220-
} while (Math.abs(bytes) >= 1024 && u < units.length - 1);
221-
222-
return `${bytes.toFixed(1)} ${units[u]}`;
223-
},
224-
225-
/**
226-
* Format the given date as a human readable string.
227-
*
228-
* @param {String} date
229-
* @return {String}
230-
*/
231-
formatDate: function (date) {
232-
return format(date, 'MMM D, YYYY [at] HH:MM');
233-
},
234165
}
235166
};
236167
</script>

‎resources/assets/scripts/helpers/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import format from 'date-fns/format';
2+
3+
/**
4+
* Return the human readable filesize for a given number of bytes. This
5+
* uses 1024 as the base, so the response is denoted accordingly.
6+
*
7+
* @param {Number} bytes
8+
* @return {String}
9+
*/
10+
export function readableSize (bytes) {
11+
if (Math.abs(bytes) < 1024) {
12+
return `${bytes} Bytes`;
13+
}
14+
15+
let u = -1;
16+
const units = ['KiB', 'MiB', 'GiB', 'TiB'];
17+
18+
do {
19+
bytes /= 1024;
20+
u++;
21+
} while (Math.abs(bytes) >= 1024 && u < units.length - 1);
22+
23+
return `${bytes.toFixed(1)} ${units[u]}`;
24+
}
25+
26+
/**
27+
* Format the given date as a human readable string.
28+
*
29+
* @param {String} date
30+
* @return {String}
31+
*/
32+
export function formatDate (date) {
33+
return format(date, 'MMM D, YYYY [at] HH:MM');
34+
}

0 commit comments

Comments
 (0)