nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 02:50:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

navigation through public folders

Browse Source
This commit is contained in:
Peter Papp
2021-08-23 09:16:01 +02:00
parent 26e3194f21
commit a926545146
8 changed files with 285 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/views/FileView/NavigationSharePanel.vue
+179
View File
@@ -0,0 +1,179 @@
<template>
<ContentSidebar v-if="navigationTree && navigationTree.length >= 1">
<!--Locations-->
<ContentGroup :title="$t('sidebar.locations_title')">
<div class="menu-list-wrapper vertical">
<a class="menu-list-item link" @click="goHome">
<div class="icon">
<home-icon size="17"/>
</div>
<div class="label">
{{ $t('sidebar.home') }}
</div>
</a>
</div>
</ContentGroup>
<!--Navigator-->
<ContentGroup :title="$t('sidebar.navigator_title')" class="navigator">
<TreeMenuNavigator class="folder-tree" :depth="0" :nodes="folder" v-for="folder in navigationTree" :key="folder.id" />
</ContentGroup>
</ContentSidebar>
</template>
<script>
import {FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon} from "vue-feather-icons";
import UpgradeSidebarBanner from '/resources/js/components/Others/UpgradeSidebarBanner'
import TreeMenuNavigator from '/resources/js/components/Others/TreeMenuNavigator'
import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
import ContentGroup from '/resources/js/components/Sidebar/ContentGroup'
import {events} from "../../bus";
import {mapGetters} from "vuex";
export default {
name: "NavigationSharePanel",
components: {
UpgradeSidebarBanner,
TreeMenuNavigator,
ContentSidebar,
ContentGroup,
UploadCloudIcon,
UserCheckIcon,
FolderIcon,
Trash2Icon,
UsersIcon,
HomeIcon,
LinkIcon,
XIcon,
},
computed: {
...mapGetters([
'sharedDetail',
'navigation',
'clipboard',
'config',
'user',
]),
favourites() {
return this.user.data.relationships.favourites.data.attributes.folders
},
storage() {
return this.$store.getters.user.data.attributes.storage
},
tree() {
return this.user.data.attributes.folders
},
navigationTree() {
return this.navigation ? this.navigation[0].folders : undefined
},
},
data() {
return {
draggedItem: undefined,
area: false,
}
},
methods: {
goHome() {
this.$router.replace({name: 'Public', params: {token: this.$route.params.token, id: this.sharedDetail.item_id}})
},
dragLeave() {
this.area = false
},
dragEnter() {
if (this.draggedItem && this.draggedItem.type !== 'folder') return
if (this.clipboard.length > 0 && this.clipboard.find(item => item.type !== 'folder')) return
this.area = true
},
dragFinish() {
this.area = false
events.$emit('drop')
// Check if dragged item is folder
if (this.draggedItem && this.draggedItem.type !== 'folder') return
// Check if folder exist in favourites
if (this.favourites.find(folder => folder.id === this.draggedItem.id)) return
// Prevent to move folders to self
if (this.clipboard.length > 0 && this.clipboard.find(item => item.type !== 'folder')) return
//Add to favourites non selected folder
if (!this.clipboard.includes(this.draggedItem)) {
this.$store.dispatch('addToFavourites', this.draggedItem)
}
//Add to favourites selected folders
if (this.clipboard.includes(this.draggedItem)) {
this.$store.dispatch('addToFavourites', null)
}
},
},
created() {
// Listen for dragstart folder items
events.$on('dragstart', item => this.draggedItem = item)
// Get folder tree
this.$store.dispatch('getFolderTree')
}
}
</script>
<style lang="scss" scoped>
.empty-note {
&.navigator {
padding: 5px 25px 10px;
}
&.favourites {
padding: 5px 23px 10px;
}
}
.navigator {
width: 100%;
overflow-x: auto;
}
@media only screen and (max-width: 1024px) {
.empty-note {
&.navigator {
padding: 5px 20px 10px;
}
&.favourites {
padding: 5px 18px 10px;
}
}
}
// Transition
.folder-item-move {
transition: transform 300s ease;
}
.folder-item-enter-active {
transition: all 300ms ease;
}
.folder-item-leave-active {
transition: all 300ms;
}
.folder-item-enter, .folder-item-leave-to /* .list-leave-active below version 2.1.8 */
{
opacity: 0;
transform: translateX(30px);
}
.folder-item-leave-active {
position: absolute;
}
</style>
resources/js/views/FileView/Public/Public.vue
+23 -67
View File
@@ -1,25 +1,18 @@
<template>
<div>
<ContextMenu>
<template v-slot:empty-select>
<template v-slot:empty-select v-if="$checkPermission('editor')">
<OptionGroup>
<Option @click.native="$createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
</OptionGroup>
</template>
<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>
<OptionGroup v-if="$checkPermission('editor')">
<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" />
@@ -27,10 +20,7 @@
</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>
<OptionGroup v-if="$checkPermission('editor')">
<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>
@@ -41,7 +31,7 @@
</ContextMenu>
<MobileContextMenu>
<template v-slot:editor v-if="$checkPermission('editor')">
<template v-slot:editor>
<OptionGroup>
<Option v-if="item" @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option v-if="item" @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
@@ -51,7 +41,7 @@
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
<template v-slot:visitor v-if="$checkPermission('visitor')">
<template v-slot:visitor>
<OptionGroup>
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
@@ -59,13 +49,10 @@
</MobileContextMenu>
<FileBrowser>
<template v-if="$checkPermission('editor')" v-slot:file-actions-mobile>
<template v-slot:file-actions-mobile v-if="$checkPermission('editor')">
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search') }}
</MobileActionButton>
<MobileActionButton @click.native="$showLocations" icon="filter">
{{ filterLocationTitle }}
</MobileActionButton>
<MobileActionButton @click.native="$createItems" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
@@ -77,7 +64,7 @@
</MobileActionButton>
</template>
<template v-if="$checkPermission('visitor')" v-slot:file-actions-mobile>
<template v-slot:file-actions-mobile v-if="$checkPermission('visitor')">
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search')}}
</MobileActionButton>
@@ -89,17 +76,23 @@
</MobileActionButton>
</template>
<template v-slot:empty-file-page>
<template v-slot:empty-file-page v-if="$checkPermission('editor')">
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
<p v-if="$checkPermission('editor')" class="description">
<p class="description">
{{ $t('empty_page.description') }}
</p>
<ButtonUpload v-if="$checkPermission('editor')" button-style="theme">
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</template>
<template v-slot:empty-file-page v-if="$checkPermission('visitor')">
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
</template>
</FileBrowser>
<MultiSelectToolbar>
@@ -109,7 +102,7 @@
<template v-slot:editor>
<ToolbarButton @click.native="$moveFileOrFolder(clipboard)" class="action-btn" source="move" :action="$t('actions.move')" :class="{'is-inactive' : clipboard.length < 1}" />
<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive': clipboard.length < 1}" :action="$t('actions.delete')" />
<ToolbarButton @click.native="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
</template>
</MultiSelectToolbar>
@@ -118,27 +111,24 @@
<script>
import MultiSelectToolbar from "/resources/js/components/FilesView/MultiSelectToolbar"
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import ButtonUpload from '/resources/js/components/FilesView/ButtonUpload'
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 {events} from "../../../bus"
import { mapGetters } from 'vuex'
import {events} from "../../../bus";
export default {
name: 'Files',
components: {
MultiSelectToolbar,
ToolbarButton,
MobileActionButtonUpload,
MobileActionButton,
MultiSelectToolbar,
MobileContextMenu,
ToolbarButton,
ButtonUpload,
OptionGroup,
FileBrowser,
@@ -154,23 +144,8 @@
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
},
filterLocationTitle() {
return {
'RecentUploads': this.$t('Recent'),
'MySharedItems': this.$t('Shared'),
'Trash': this.$t('Trash'),
'Public': this.$t('Files'),
'Files': this.$t('Files'),
}[this.$route.name]
}
},
data() {
@@ -179,25 +154,6 @@
}
},
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')
@@ -206,7 +162,7 @@
}
},
},
mounted() {
created() {
this.$store.dispatch('getSharedFolder', this.$route.params.id)
events.$on('context-menu:show', (event, item) => this.item = item)