Combine logic so we aren't constantly duplicating it
This commit is contained in:
Dane Everitt
parent
25621f4c1c
commit
d6630341b4
3 changed files with 40 additions and 62 deletions
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="row" :class="{ clickable: canEdit(file), 'active-selection': contextMenuVisible }" v-on:contextmenu="showContextMenu">
|
||||
<div v-on:contextmenu="showContextMenu">
|
||||
<div class="row" :class="{ clickable: canEdit(file), 'active-selection': contextMenuVisible }" v-if="!file.directory">
|
||||
<div class="flex-none icon">
|
||||
<Icon name="file-text" v-if="!file.symlink"/>
|
||||
<Icon name="link2" v-else/>
|
||||
|
|
@ -10,6 +11,21 @@
|
|||
<div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div>
|
||||
<div class="flex-none w-1/6"></div>
|
||||
</div>
|
||||
<router-link class="row clickable"
|
||||
:class="{ 'active-selection': contextMenuVisible }"
|
||||
:to="{ name: 'server-files', params: { path: getClickablePath(file.name) }}"
|
||||
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"
|
||||
:object="file"
|
||||
|
|
@ -41,13 +57,15 @@
|
|||
required: true,
|
||||
},
|
||||
editable: {
|
||||
type: Array,
|
||||
required: true,
|
||||
type: Array as () => Array<string>,
|
||||
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 {
|
||||
return this.editable.indexOf(file.mime) >= 0;
|
||||
canEdit: function (file: DirectoryContentObject): boolean {
|
||||
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,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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) }});
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue