mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 02:50:39 +00:00
- added recent uploads
- added my shared items - added trash
This commit is contained in:
Peter Papp
@@ -11,18 +11,15 @@
|
||||
<OptionGroup v-if="isFolder">
|
||||
<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup>
|
||||
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
|
||||
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
|
||||
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup>
|
||||
<Option @click.native="$shareFileOrFolder(item)" :title="item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
|
||||
<Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="users" />
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup>
|
||||
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
|
||||
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
|
||||
@@ -33,12 +30,10 @@
|
||||
<OptionGroup v-if="!hasFile">
|
||||
<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup>
|
||||
<Option @click.native="$moveFileOrFolder(item)" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
|
||||
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
|
||||
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup>
|
||||
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
|
||||
</OptionGroup>
|
||||
@@ -46,7 +41,11 @@
|
||||
</ContextMenu>
|
||||
|
||||
<!--Show files & folders-->
|
||||
<FileBrowser/>
|
||||
<FileBrowser>
|
||||
<template v-slot:file-actions-mobile>
|
||||
<!-- todo: Implement mobile buttons-->
|
||||
</template>
|
||||
</FileBrowser>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -59,7 +58,7 @@
|
||||
import {events} from "../../../bus";
|
||||
|
||||
export default {
|
||||
name: 'FilesView',
|
||||
name: 'Files',
|
||||
components: {
|
||||
OptionGroup,
|
||||
FileBrowser,
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<ContextMenu>
|
||||
<template v-slot:single-select v-if="item">
|
||||
<OptionGroup v-if="isFolder">
|
||||
<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
|
||||
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="$shareFileOrFolder(item)" :title="item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
|
||||
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
|
||||
</OptionGroup>
|
||||
</template>
|
||||
|
||||
<template v-slot:multiple-select v-if="item">
|
||||
<OptionGroup v-if="!hasFile">
|
||||
<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="$shareCancel" :title="$t('context_menu.share_cancel')" icon="share" />
|
||||
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
|
||||
</OptionGroup>
|
||||
</template>
|
||||
</ContextMenu>
|
||||
|
||||
<!--Show files & folders-->
|
||||
<FileBrowser>
|
||||
<template v-slot:file-actions-mobile>
|
||||
<!-- todo: Implement mobile buttons-->
|
||||
</template>
|
||||
</FileBrowser>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
|
||||
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
|
||||
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
|
||||
import Option from '/resources/js/components/FilesView/Option'
|
||||
import { mapGetters } from 'vuex'
|
||||
import {events} from "../../../bus";
|
||||
|
||||
export default {
|
||||
name: 'MySharedItems',
|
||||
components: {
|
||||
OptionGroup,
|
||||
FileBrowser,
|
||||
ContextMenu,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'clipboard',
|
||||
'user',
|
||||
]),
|
||||
isFolder() {
|
||||
return this.item && this.item.type === 'folder'
|
||||
},
|
||||
isInFavourites() {
|
||||
return this.favourites.find((el) => el.id === this.item.id)
|
||||
},
|
||||
hasFile() {
|
||||
return this.clipboard.find(item => item.type !== 'folder')
|
||||
},
|
||||
favourites() {
|
||||
return this.user.data.relationships.favourites.data.attributes.folders
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
item: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addToFavourites() {
|
||||
// Check if folder is in favourites and then add/remove from favourites
|
||||
if (
|
||||
this.favourites &&
|
||||
!this.favourites.find(el => el.id === this.item.id)
|
||||
) {
|
||||
// Add to favourite folder that is not selected
|
||||
if (!this.clipboard.includes(this.item)) {
|
||||
this.$store.dispatch('addToFavourites', this.item)
|
||||
}
|
||||
|
||||
// Add to favourites all selected folders
|
||||
if (this.clipboard.includes(this.item)) {
|
||||
this.$store.dispatch('addToFavourites', null)
|
||||
}
|
||||
} else {
|
||||
this.$store.dispatch('removeFromFavourites', this.item)
|
||||
}
|
||||
},
|
||||
downloadItem() {
|
||||
if (this.clipboard.length > 1 || (this.clipboard.length === 1 && this.clipboard[0].type === 'folder'))
|
||||
this.$store.dispatch('downloadZip')
|
||||
else {
|
||||
this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('getMySharedItems')
|
||||
|
||||
events.$on('contextMenu:show', (event, item) => this.item = item)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -8,66 +8,66 @@
|
||||
<!--Locations-->
|
||||
<ContentGroup :title="$t('sidebar.locations_title')">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<a class="menu-list-item link">
|
||||
<router-link :to="{name: 'Files'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<home-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('sidebar.home') }}
|
||||
</div>
|
||||
</a>
|
||||
<a class="menu-list-item link">
|
||||
</router-link>
|
||||
<router-link :to="{name: 'RecentUploads'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<upload-cloud-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('sidebar.latest') }}
|
||||
</div>
|
||||
</a>
|
||||
<a class="menu-list-item link">
|
||||
</router-link>
|
||||
<router-link :to="{name: 'MySharedItems'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<link-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('sidebar.my_shared') }}
|
||||
</div>
|
||||
</a>
|
||||
<a class="menu-list-item link">
|
||||
</router-link>
|
||||
<router-link :to="{name: 'Trash'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<trash2-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('locations.trash') }}
|
||||
</div>
|
||||
</a>
|
||||
</router-link>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Locations-->
|
||||
<ContentGroup :title="$t('Collaboration')" slug="collaboration" :can-collapse="true">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<a class="menu-list-item link">
|
||||
<router-link class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<users-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('Team Folders') }}
|
||||
</div>
|
||||
</a>
|
||||
<a class="menu-list-item link">
|
||||
</router-link>
|
||||
<router-link class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<user-check-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('Shared with Me') }}
|
||||
</div>
|
||||
</a>
|
||||
</router-link>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Navigator-->
|
||||
<ContentGroup :title="$t('sidebar.navigator_title')" slug="navigator" :can-collapse="true" class="navigator">
|
||||
<span class="empty-note navigator" v-if="tree.length === 0">
|
||||
<span v-if="tree.length === 0" class="empty-note navigator">
|
||||
{{ $t('sidebar.folders_empty') }}
|
||||
</span>
|
||||
<TreeMenuNavigator class="folder-tree" :depth="0" :nodes="folder" v-for="folder in tree" :key="folder.id"/>
|
||||
@@ -82,13 +82,13 @@
|
||||
{{ $t('sidebar.favourites_empty') }}
|
||||
</span>
|
||||
|
||||
<a class="menu-list-item" v-for="folder in favourites" :key="folder.id">
|
||||
<router-link :to="{name: 'Files', params: {id: folder.id}}" v-for="folder in favourites" :key="folder.id" class="menu-list-item">
|
||||
<div class="text-theme">
|
||||
<folder-icon size="17" class="folder-icon text-theme"></folder-icon>
|
||||
<folder-icon size="17" class="folder-icon text-theme" />
|
||||
<span class="label text-theme">{{ folder.name }}</span>
|
||||
</div>
|
||||
<x-icon size="17" @click.stop="$removeFavourite(folder)" class="delete-icon"></x-icon>
|
||||
</a>
|
||||
<x-icon @click.stop="$removeFavourite(folder)" size="17" class="delete-icon" />
|
||||
</router-link>
|
||||
</transition-group>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
@@ -165,8 +165,6 @@ export default {
|
||||
// Prevent to move folders to self
|
||||
if (this.clipboard.length > 0 && this.clipboard.find(item => item.type !== 'folder')) return
|
||||
|
||||
// Store favourites folder
|
||||
|
||||
//Add to favourites non selected folder
|
||||
if (!this.clipboard.includes(this.draggedItem)) {
|
||||
this.$store.dispatch('addToFavourites', this.draggedItem)
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<ContextMenu>
|
||||
<template v-slot:single-select v-if="item">
|
||||
<OptionGroup>
|
||||
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
|
||||
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
|
||||
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="$shareFileOrFolder(item)" :title="item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
|
||||
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
|
||||
</OptionGroup>
|
||||
</template>
|
||||
|
||||
<template v-slot:multiple-select v-if="item">
|
||||
<OptionGroup>
|
||||
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
|
||||
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
|
||||
</OptionGroup>
|
||||
</template>
|
||||
</ContextMenu>
|
||||
|
||||
<!--Show files & folders-->
|
||||
<FileBrowser>
|
||||
<template v-slot:file-actions-mobile>
|
||||
<!-- todo: Implement mobile buttons-->
|
||||
</template>
|
||||
</FileBrowser>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
|
||||
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
|
||||
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
|
||||
import Option from '/resources/js/components/FilesView/Option'
|
||||
import { mapGetters } from 'vuex'
|
||||
import {events} from "../../../bus";
|
||||
|
||||
export default {
|
||||
name: 'RecentUploads',
|
||||
components: {
|
||||
OptionGroup,
|
||||
FileBrowser,
|
||||
ContextMenu,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'clipboard',
|
||||
'user',
|
||||
])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
item: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
downloadItem() {
|
||||
if (this.clipboard.length > 1 || (this.clipboard.length === 1 && this.clipboard[0].type === 'folder'))
|
||||
this.$store.dispatch('downloadZip')
|
||||
else {
|
||||
this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('getRecentUploads')
|
||||
|
||||
events.$on('contextMenu:show', (event, item) => this.item = item)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div>
|
||||
<ContextMenu>
|
||||
<template v-slot:empty-select>
|
||||
<OptionGroup>
|
||||
<Option @click.native="$emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
|
||||
</OptionGroup>
|
||||
</template>
|
||||
|
||||
<template v-slot:single-select v-if="item">
|
||||
<OptionGroup>
|
||||
<Option @click.native="$restoreFileOrFolder(item)" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
|
||||
<Option @click.native="$deleteFileOrFolder(item)" v-if="item" :title="$t('context_menu.delete')" icon="trash" />
|
||||
<Option @click.native="$emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
|
||||
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
|
||||
</OptionGroup>
|
||||
</template>
|
||||
|
||||
<template v-slot:multiple-select v-if="item">
|
||||
<OptionGroup>
|
||||
<Option @click.native="$restoreFileOrFolder(item)" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
|
||||
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
|
||||
<Option @click.native="$emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
|
||||
</OptionGroup>
|
||||
</template>
|
||||
</ContextMenu>
|
||||
|
||||
<!--Show files & folders-->
|
||||
<FileBrowser>
|
||||
<template v-slot:file-actions-mobile>
|
||||
<!-- todo: Implement mobile buttons-->
|
||||
</template>
|
||||
</FileBrowser>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
|
||||
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
|
||||
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
|
||||
import Option from '/resources/js/components/FilesView/Option'
|
||||
import { mapGetters } from 'vuex'
|
||||
import {events} from "../../../bus";
|
||||
|
||||
export default {
|
||||
name: 'Trash',
|
||||
components: {
|
||||
OptionGroup,
|
||||
FileBrowser,
|
||||
ContextMenu,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'clipboard',
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
item: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
downloadItem() {
|
||||
if (this.clipboard.length > 1 || (this.clipboard.length === 1 && this.clipboard[0].type === 'folder'))
|
||||
this.$store.dispatch('downloadZip')
|
||||
else {
|
||||
this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('getTrash', this.$route.params.id)
|
||||
|
||||
events.$on('contextMenu:show', (event, item) => this.item = item)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user