nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-19 16:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

added prettier

Browse Source
This commit is contained in:
Čarodej
2022-02-01 12:21:38 +01:00
parent 5ae875233b
commit b38b532cbe
284 changed files with 25410 additions and 25338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
resources/js/views/FileView/Components/NavigationSharePanel.vue
View File

@@ -1,183 +1,172 @@
<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('Home') }}
</div>
</a>
</div>
</ContentGroup>
<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('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>
<!--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 TreeMenuNavigator from "../../../components/Others/TreeMenuNavigator";
import ContentSidebar from "../../../components/Sidebar/ContentSidebar";
import ContentGroup from "../../../components/Sidebar/ContentGroup";
import {events} from "../../../bus";
import {mapGetters} from "vuex";
import { FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon } from 'vue-feather-icons'
import TreeMenuNavigator from '../../../components/Others/TreeMenuNavigator'
import ContentSidebar from '../../../components/Sidebar/ContentSidebar'
import ContentGroup from '../../../components/Sidebar/ContentGroup'
import { events } from '../../../bus'
import { mapGetters } from 'vuex'
export default {
name: "NavigationSharePanel",
components: {
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.sharedDetail.data.attributes.token,
id: this.sharedDetail.data.attributes.item_id
}
})
},
dragLeave() {
this.area = false
},
dragEnter() {
if (this.draggedItem && this.draggedItem.type !== 'folder') return
name: 'NavigationSharePanel',
components: {
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.sharedDetail.data.attributes.token,
id: this.sharedDetail.data.attributes.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
if (this.clipboard.length > 0 && this.clipboard.find((item) => item.type !== 'folder')) return
this.area = true
},
dragFinish() {
this.area = false
this.area = true
},
dragFinish() {
this.area = false
events.$emit('drop')
events.$emit('drop')
// Check if dragged item is folder
if (this.draggedItem && this.draggedItem.type !== 'folder') return
// 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
// 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
// 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 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)
//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')
}
// Get folder tree
this.$store.dispatch('getFolderTree')
},
}
</script>
<style lang="scss" scoped>
.empty-note {
&.navigator {
padding: 5px 25px 10px;
}
.empty-note {
&.favourites {
padding: 5px 23px 10px;
}
}
&.navigator {
padding: 5px 25px 10px;
}
.navigator {
width: 100%;
overflow-x: auto;
}
&.favourites {
padding: 5px 23px 10px;
}
}
@media only screen and (max-width: 1024px) {
.empty-note {
&.navigator {
padding: 5px 20px 10px;
}
.navigator {
width: 100%;
overflow-x: auto;
}
&.favourites {
padding: 5px 18px 10px;
}
}
}
@media only screen and (max-width: 1024px) {
// Transition
.folder-item-move {
transition: all 300s ease;
}
.empty-note {
.folder-item-enter-active {
transition: all 300ms ease;
}
&.navigator {
padding: 5px 20px 10px;
}
.folder-item-leave-active {
transition: all 300ms;
}
&.favourites {
padding: 5px 18px 10px;
}
}
}
.folder-item-enter, .folder-item-leave-to /* .list-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateX(30px);
}
// Transition
.folder-item-move {
transition: all 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>
.folder-item-leave-active {
position: absolute;
}
</style>

388
resources/js/views/FileView/Components/PanelNavigationFiles.vue
View File

@@ -1,211 +1,219 @@
<template>
<ContentSidebar v-if="isVisibleNavigationBars" class="relative">
<ContentSidebar v-if="isVisibleNavigationBars" class="relative">
<!--Full screen button-->
<div @click="toggleNavigationBars" class="absolute top-2.5 right-0 inline-block cursor-pointer p-3 opacity-0 transition-all duration-200 hover:opacity-70">
<chevrons-left-icon size="18" />
</div>
<!--Full screen button-->
<div @click="toggleNavigationBars" class="inline-block absolute top-2.5 right-0 p-3 cursor-pointer transition-all duration-200 hover:opacity-70 opacity-0">
<chevrons-left-icon size="18"/>
</div>
<!--Locations-->
<ContentGroup v-for="(menu, i) in nav" :key="i" :title="menu.groupTitle" :slug="menu.groupTitle" :can-collapse="menu.groupCollapsable">
<router-link v-for="(item, i) in menu.groupLinks" :key="i" @click.native="resetData" :to="{ name: item.route }" class="flex items-center py-2.5">
<home-icon v-if="item.icon === 'home'" size="17" class="vue-feather icon-active mr-2.5" />
<upload-cloud-icon v-if="item.icon === 'upload-cloud'" size="17" class="vue-feather icon-active mr-2.5" />
<link-icon v-if="item.icon === 'link'" size="17" class="vue-feather icon-active mr-2.5" />
<trash2-icon v-if="item.icon === 'trash'" size="17" class="vue-feather icon-active mr-2.5" />
<users-icon size="17" v-if="item.icon === 'users'" class="vue-feather icon-active mr-2.5" />
<user-check-icon size="17" v-if="item.icon === 'user-check'" class="vue-feather icon-active mr-2.5" />
<!--Locations-->
<ContentGroup v-for="(menu, i) in nav" :key="i" :title="menu.groupTitle" :slug="menu.groupTitle" :can-collapse="menu.groupCollapsable">
<router-link v-for="(item, i) in menu.groupLinks" :key="i" @click.native="resetData" :to="{name: item.route}" class="flex items-center py-2.5">
<home-icon v-if="item.icon === 'home'" size="17" class="mr-2.5 vue-feather icon-active"/>
<upload-cloud-icon v-if="item.icon === 'upload-cloud'" size="17" class="mr-2.5 vue-feather icon-active" />
<link-icon v-if="item.icon === 'link'" size="17" class="mr-2.5 vue-feather icon-active" />
<trash2-icon v-if="item.icon === 'trash'" size="17" class="mr-2.5 vue-feather icon-active" />
<users-icon size="17" v-if="item.icon === 'users'" class="mr-2.5 vue-feather icon-active" />
<user-check-icon size="17" v-if="item.icon === 'user-check'" class="mr-2.5 vue-feather icon-active" />
<b class="text-active text-xs font-bold">
{{ item.title }}
</b>
</router-link>
</ContentGroup>
<b class="font-bold text-xs text-active">
{{ item.title }}
</b>
</router-link>
</ContentGroup>
<!--Navigator-->
<ContentGroup v-if="navigation" :title="$t('sidebar.navigator_title')" slug="navigator" :can-collapse="true">
<small v-if="tree.length === 0" class="text-xs font-bold text-gray-500">
{{ $t("There isn't any folder.") }}
</small>
<TreeMenuNavigator :depth="0" :nodes="folder" v-for="folder in tree" :key="folder.id" />
</ContentGroup>
<!--Navigator-->
<ContentGroup v-if="navigation" :title="$t('sidebar.navigator_title')" slug="navigator" :can-collapse="true">
<small v-if="tree.length === 0" class="text-xs font-bold text-gray-500">
{{ $t("There isn't any folder.") }}
</small>
<TreeMenuNavigator :depth="0" :nodes="folder" v-for="folder in tree" :key="folder.id"/>
</ContentGroup>
<!--Favourites-->
<ContentGroup v-if="user" :title="$t('sidebar.favourites')" slug="favourites" :can-collapse="true">
<div
@dragover.prevent="dragEnter"
@dragleave="dragLeave"
@drop="dragFinish($event)"
:class="{ 'border-theme': area }"
class="border-2 border-dashed border-transparent"
>
<!--Empty message-->
<small v-if="favourites.length === 0" class="favourites text-xs font-bold text-gray-500" :key="0">
{{ $t('sidebar.favourites_empty') }}
</small>
<!--Favourites-->
<ContentGroup v-if="user" :title="$t('sidebar.favourites')" slug="favourites" :can-collapse="true">
<div @dragover.prevent="dragEnter" @dragleave="dragLeave" @drop="dragFinish($event)" :class="{'border-theme': area }" class="border-2 border-transparent border-dashed">
<!--Empty message-->
<small v-if="favourites.length === 0" class="text-xs font-bold text-gray-500 favourites" :key="0">
{{ $t('sidebar.favourites_empty') }}
</small>
<!--Folder item-->
<div @click="goToFolder(folder)" v-for="folder in favourites" :key="folder.data.id" class="group flex items-center justify-between py-2.5 cursor-pointer">
<div class="flex items-center">
<folder-icon size="17" class="mr-2.5 vue-feather" :class="{'text-theme': $route.params.id === folder.data.id}" />
<span class="font-bold text-xs max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" :class="{'text-theme': $route.params.id === folder.data.id}">
{{ folder.data.attributes.name }}
</span>
</div>
<x-icon @click.stop="$removeFavourite(folder)" size="12" class="mr-5 group-hover:opacity-100 opacity-0" />
</div>
</div>
</ContentGroup>
</ContentSidebar>
<!--Folder item-->
<div @click="goToFolder(folder)" v-for="folder in favourites" :key="folder.data.id" class="group flex cursor-pointer items-center justify-between py-2.5">
<div class="flex items-center">
<folder-icon
size="17"
class="vue-feather mr-2.5"
:class="{
'text-theme': $route.params.id === folder.data.id,
}"
/>
<span
class="max-w-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs font-bold"
:class="{
'text-theme': $route.params.id === folder.data.id,
}"
>
{{ folder.data.attributes.name }}
</span>
</div>
<x-icon @click.stop="$removeFavourite(folder)" size="12" class="mr-5 opacity-0 group-hover:opacity-100" />
</div>
</div>
</ContentGroup>
</ContentSidebar>
</template>
<script>
import { ChevronsLeftIcon, FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon} from "vue-feather-icons";
import TreeMenuNavigator from "../../../components/Others/TreeMenuNavigator";
import ContentSidebar from "../../../components/Sidebar/ContentSidebar";
import ContentGroup from "../../../components/Sidebar/ContentGroup";
import {events} from "../../../bus";
import {mapGetters} from "vuex";
import { ChevronsLeftIcon, FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon } from 'vue-feather-icons'
import TreeMenuNavigator from '../../../components/Others/TreeMenuNavigator'
import ContentSidebar from '../../../components/Sidebar/ContentSidebar'
import ContentGroup from '../../../components/Sidebar/ContentGroup'
import { events } from '../../../bus'
import { mapGetters } from 'vuex'
export default {
name: "PanelNavigationFiles",
components: {
TreeMenuNavigator,
ContentSidebar,
ContentGroup,
ChevronsLeftIcon,
UploadCloudIcon,
UserCheckIcon,
FolderIcon,
Trash2Icon,
UsersIcon,
HomeIcon,
LinkIcon,
XIcon,
},
computed: {
...mapGetters([
'isVisibleNavigationBars',
'navigation',
'clipboard',
'config',
'user',
]),
favourites() {
return this.user.data.relationships.favourites.data
},
storage() {
return this.$store.getters.user.data.attributes.storage
},
tree() {
return {
'RecentUploads': this.navigation[0].folders,
'MySharedItems': this.navigation[0].folders,
'Trash': this.navigation[0].folders,
'Public': this.navigation[0].folders,
'Files': this.navigation[0].folders,
'TeamFolders': this.navigation[1].folders,
'SharedWithMe': this.navigation[2].folders,
}[this.$route.name]
},
},
data() {
return {
draggedItem: undefined,
area: false,
nav: [
{
groupCollapsable: false,
groupTitle: this.$t('sidebar.locations_title'),
groupLinks: [
{
icon: 'home',
route: 'Files',
title: this.$t('sidebar.home'),
},
{
icon: 'upload-cloud',
route: 'RecentUploads',
title: this.$t('sidebar.latest'),
},
{
icon: 'link',
route: 'MySharedItems',
title: this.$t('sidebar.my_shared'),
},
{
icon: 'trash',
route: 'Trash',
title: this.$t('locations.trash'),
},
],
},
{
groupCollapsable: true,
groupTitle: this.$t('Collaboration'),
groupLinks: [
{
icon: 'users',
route: 'TeamFolders',
title: this.$t('Team Folders'),
},
{
icon: 'user-check',
route: 'SharedWithMe',
title: this.$t('Shared with Me'),
},
],
},
],
}
},
methods: {
toggleNavigationBars() {
this.$store.dispatch('toggleNavigationBars')
},
resetData() {
this.$store.commit('SET_CURRENT_TEAM_FOLDER', null)
this.$store.commit('CLIPBOARD_CLEAR')
},
goToFolder(folder) {
this.$router.push({name: 'Files', params: {id: folder.data.id}})
},
dragLeave() {
this.area = false
},
dragEnter() {
if (this.draggedItem && this.draggedItem.type !== 'folder') return
name: 'PanelNavigationFiles',
components: {
TreeMenuNavigator,
ContentSidebar,
ContentGroup,
ChevronsLeftIcon,
UploadCloudIcon,
UserCheckIcon,
FolderIcon,
Trash2Icon,
UsersIcon,
HomeIcon,
LinkIcon,
XIcon,
},
computed: {
...mapGetters(['isVisibleNavigationBars', 'navigation', 'clipboard', 'config', 'user']),
favourites() {
return this.user.data.relationships.favourites.data
},
storage() {
return this.$store.getters.user.data.attributes.storage
},
tree() {
return {
RecentUploads: this.navigation[0].folders,
MySharedItems: this.navigation[0].folders,
Trash: this.navigation[0].folders,
Public: this.navigation[0].folders,
Files: this.navigation[0].folders,
TeamFolders: this.navigation[1].folders,
SharedWithMe: this.navigation[2].folders,
}[this.$route.name]
},
},
data() {
return {
draggedItem: undefined,
area: false,
nav: [
{
groupCollapsable: false,
groupTitle: this.$t('sidebar.locations_title'),
groupLinks: [
{
icon: 'home',
route: 'Files',
title: this.$t('sidebar.home'),
},
{
icon: 'upload-cloud',
route: 'RecentUploads',
title: this.$t('sidebar.latest'),
},
{
icon: 'link',
route: 'MySharedItems',
title: this.$t('sidebar.my_shared'),
},
{
icon: 'trash',
route: 'Trash',
title: this.$t('locations.trash'),
},
],
},
{
groupCollapsable: true,
groupTitle: this.$t('Collaboration'),
groupLinks: [
{
icon: 'users',
route: 'TeamFolders',
title: this.$t('Team Folders'),
},
{
icon: 'user-check',
route: 'SharedWithMe',
title: this.$t('Shared with Me'),
},
],
},
],
}
},
methods: {
toggleNavigationBars() {
this.$store.dispatch('toggleNavigationBars')
},
resetData() {
this.$store.commit('SET_CURRENT_TEAM_FOLDER', null)
this.$store.commit('CLIPBOARD_CLEAR')
},
goToFolder(folder) {
this.$router.push({ name: 'Files', params: { id: folder.data.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
if (this.clipboard.length > 0 && this.clipboard.find((item) => item.type !== 'folder')) return
this.area = true
},
dragFinish() {
this.area = false
this.area = true
},
dragFinish() {
this.area = false
events.$emit('drop')
events.$emit('drop')
// Check if dragged item is folder
if (this.draggedItem && this.draggedItem.type !== 'folder') return
// 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
// 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
// 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 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)
//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))
this.$store.dispatch('getFolderTree')
}
this.$store.dispatch('getFolderTree')
},
}
</script>
</script>

405
resources/js/views/FileView/Files.vue
View File

@@ -1,215 +1,238 @@
<template>
<div>
<MobileContextMenu>
<OptionGroup v-if="item && isFolder">
<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
<div>
<MobileContextMenu>
<OptionGroup v-if="item && isFolder">
<Option
@click.native="addToFavourites"
:title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
icon="favourites"
/>
</OptionGroup>
<OptionGroup v-if="item">
<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 v-if="item">
<Option @click.native="$shareFileOrFolder(item)" :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$convertAsTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="users" />
</OptionGroup>
<OptionGroup v-if="item">
<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 v-if="item">
<Option @click.native="$shareFileOrFolder(item)" :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$convertAsTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="users" />
</OptionGroup>
<OptionGroup v-if="item">
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MobileContextMenu>
</MobileContextMenu>
<MobileCreateMenu>
<OptionGroup>
<OptionUpload :class="{'is-inactive': !hasCapacity }" :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" :is-hover-disabled="true" />
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
</OptionGroup>
</MobileCreateMenu>
<MobileCreateMenu>
<OptionGroup>
<OptionUpload :class="{ 'is-inactive': !hasCapacity }" :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" :is-hover-disabled="true" />
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
</OptionGroup>
</MobileCreateMenu>
<MobileMultiSelectToolbar>
<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')" />
<MobileMultiSelectToolbar>
<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="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
</MobileMultiSelectToolbar>
</MobileMultiSelectToolbar>
<ContextMenu>
<template v-slot:empty-select>
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
</OptionGroup>
</template>
<ContextMenu>
<template v-slot:empty-select>
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<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>
<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.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$convertAsTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="user-plus" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</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>
<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.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')"
icon="share"
/>
<Option @click.native="$convertAsTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="user-plus" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :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="$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="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<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="$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="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('create-list')" v-if="$checkPermission(['master', 'editor'])" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('create-list')" v-if="$checkPermission(['master', 'editor'])" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<EmptyFilePage>
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
<p class="description">
{{ $t('empty_page.description') }}
</p>
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</EmptyFilePage>
<EmptyFilePage>
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
<p class="description">
{{ $t('empty_page.description') }}
</p>
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</EmptyFilePage>
<FileBrowser />
</div>
<FileBrowser />
</div>
</template>
<script>
import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileActionButtonUpload from "../../components/FilesView/MobileActionButtonUpload";
import MobileMultiSelectToolbar from "../../components/FilesView/MobileMultiSelectToolbar";
import MobileActionButton from "../../components/FilesView/MobileActionButton";
import MobileContextMenu from "../../components/FilesView/MobileContextMenu";
import MobileCreateMenu from "../../components/FilesView/MobileCreateMenu";
import ButtonUpload from "../../components/FilesView/ButtonUpload";
import ToolbarButton from "../../components/FilesView/ToolbarButton";
import OptionUpload from "../../components/FilesView/OptionUpload";
import FileBrowser from "../../components/FilesView/FileBrowser";
import ContextMenu from "../../components/FilesView/ContextMenu";
import OptionGroup from "../../components/FilesView/OptionGroup";
import Option from "../../components/FilesView/Option";
import { mapGetters } from 'vuex'
import {events} from "../../bus";
import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
import MobileActionButtonUpload from '../../components/FilesView/MobileActionButtonUpload'
import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
import MobileActionButton from '../../components/FilesView/MobileActionButton'
import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
import MobileCreateMenu from '../../components/FilesView/MobileCreateMenu'
import ButtonUpload from '../../components/FilesView/ButtonUpload'
import ToolbarButton from '../../components/FilesView/ToolbarButton'
import OptionUpload from '../../components/FilesView/OptionUpload'
import FileBrowser from '../../components/FilesView/FileBrowser'
import ContextMenu from '../../components/FilesView/ContextMenu'
import OptionGroup from '../../components/FilesView/OptionGroup'
import Option from '../../components/FilesView/Option'
import { mapGetters } from 'vuex'
import { events } from '../../bus'
export default {
name: 'Files',
components: {
EmptyFilePage,
FileActionsMobile,
MobileActionButtonUpload,
MobileMultiSelectToolbar,
MobileActionButton,
MobileContextMenu,
MobileCreateMenu,
ToolbarButton,
ButtonUpload,
OptionUpload,
OptionGroup,
FileBrowser,
ContextMenu,
Option,
},
computed: {
...mapGetters([
'fastPreview',
'clipboard',
'config',
'user',
]),
hasCapacity() {
// Check if storage limitation is set
if (!this.config.storageLimit) return true
export default {
name: 'Files',
components: {
EmptyFilePage,
FileActionsMobile,
MobileActionButtonUpload,
MobileMultiSelectToolbar,
MobileActionButton,
MobileContextMenu,
MobileCreateMenu,
ToolbarButton,
ButtonUpload,
OptionUpload,
OptionGroup,
FileBrowser,
ContextMenu,
Option,
},
computed: {
...mapGetters(['fastPreview', 'clipboard', 'config', 'user']),
hasCapacity() {
// Check if storage limitation is set
if (!this.config.storageLimit) return true
// Check if user has storage
return this.user && this.user.data.attributes.storage.used <= 100
},
isFolder() {
return this.item && this.item.data.type === 'folder'
},
isInFavourites() {
return this.favourites.find((el) => el.id === this.item.data.id)
},
hasFile() {
return this.clipboard.find(item => item.data.type !== 'folder')
},
favourites() {
return this.user.data.relationships.favourites.data
},
},
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.data.id)) {
// Add to favourite folder that is not selected
if (!this.clipboard.includes(this.item)) {
this.$store.dispatch('addToFavourites', this.item)
}
// Check if user has storage
return this.user && this.user.data.attributes.storage.used <= 100
},
isFolder() {
return this.item && this.item.data.type === 'folder'
},
isInFavourites() {
return this.favourites.find((el) => el.id === this.item.data.id)
},
hasFile() {
return this.clipboard.find((item) => item.data.type !== 'folder')
},
favourites() {
return this.user.data.relationships.favourites.data
},
},
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.data.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)
}
},
createFolder() {
events.$emit('popup:open', {name: 'create-folder'})
},
},
created() {
this.$store.dispatch('getFolder', this.$route.params.id)
// Add to favourites all selected folders
if (this.clipboard.includes(this.item)) {
this.$store.dispatch('addToFavourites', null)
}
} else {
this.$store.dispatch('removeFromFavourites', this.item)
}
},
createFolder() {
events.$emit('popup:open', { name: 'create-folder' })
},
},
created() {
this.$store.dispatch('getFolder', this.$route.params.id)
events.$on('context-menu:show', (event, item) => this.item = item)
events.$on('context-menu:current-folder', folder => this.item = folder)
events.$on('mobile-context-menu:show', item => this.item = item)
}
}
events.$on('context-menu:show', (event, item) => (this.item = item))
events.$on('context-menu:current-folder', (folder) => (this.item = folder))
events.$on('mobile-context-menu:show', (item) => (this.item = item))
},
}
</script>

299
resources/js/views/FileView/MySharedItems.vue
View File

@@ -1,157 +1,170 @@
<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.data.relationships.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="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</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.data.relationships.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="$downloadSelection(item)" :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="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<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="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<MobileContextMenu>
<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 && item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MobileContextMenu>
<MobileContextMenu>
<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 && item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MobileContextMenu>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight')}}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<EmptyFilePage>
<h1 class="title">{{ $t('shared.empty_shared') }}</h1>
</EmptyFilePage>
<EmptyFilePage>
<h1 class="title">{{ $t('shared.empty_shared') }}</h1>
</EmptyFilePage>
<FileBrowser />
<FileBrowser />
<MobileMultiSelectToolbar>
<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
<ToolbarButton @click.native="$shareCancel" class="action-btn" source="shared-off" />
</MobileMultiSelectToolbar>
</div>
<MobileMultiSelectToolbar>
<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
<ToolbarButton @click.native="$shareCancel" class="action-btn" source="shared-off" />
</MobileMultiSelectToolbar>
</div>
</template>
<script>
import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileActionButtonUpload from "../../components/FilesView/MobileActionButtonUpload";
import MobileActionButton from "../../components/FilesView/MobileActionButton";
import MobileMultiSelectToolbar from "../../components/FilesView/MobileMultiSelectToolbar";
import MobileContextMenu from "../../components/FilesView/MobileContextMenu";
import ToolbarButton from "../../components/FilesView/ToolbarButton";
import FileBrowser from "../../components/FilesView/FileBrowser";
import ContextMenu from "../../components/FilesView/ContextMenu";
import OptionGroup from "../../components/FilesView/OptionGroup";
import Option from "../../components/FilesView/Option";
import { mapGetters } from 'vuex'
import {events} from "../../bus";
import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
import MobileActionButtonUpload from '../../components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '../../components/FilesView/MobileActionButton'
import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
import ToolbarButton from '../../components/FilesView/ToolbarButton'
import FileBrowser from '../../components/FilesView/FileBrowser'
import ContextMenu from '../../components/FilesView/ContextMenu'
import OptionGroup from '../../components/FilesView/OptionGroup'
import Option from '../../components/FilesView/Option'
import { mapGetters } from 'vuex'
import { events } from '../../bus'
export default {
name: 'MySharedItems',
components: {
MobileActionButtonUpload,
MobileActionButton,
MobileMultiSelectToolbar,
MobileContextMenu,
ToolbarButton,
OptionGroup,
FileBrowser,
ContextMenu,
Option,
FileActionsMobile,
EmptyFilePage,
},
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.data.id)) {
// Add to favourite folder that is not selected
if (!this.clipboard.includes(this.item)) {
this.$store.dispatch('addToFavourites', this.item)
}
export default {
name: 'MySharedItems',
components: {
MobileActionButtonUpload,
MobileActionButton,
MobileMultiSelectToolbar,
MobileContextMenu,
ToolbarButton,
OptionGroup,
FileBrowser,
ContextMenu,
Option,
FileActionsMobile,
EmptyFilePage,
},
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.data.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)
}
},
},
created() {
this.$store.dispatch('getMySharedItems')
// Add to favourites all selected folders
if (this.clipboard.includes(this.item)) {
this.$store.dispatch('addToFavourites', null)
}
} else {
this.$store.dispatch('removeFromFavourites', this.item)
}
},
},
created() {
this.$store.dispatch('getMySharedItems')
events.$on('context-menu:show', (event, item) => this.item = item)
events.$on('mobile-context-menu:show', item => this.item = item)
}
}
events.$on('context-menu:show', (event, item) => (this.item = item))
events.$on('mobile-context-menu:show', (item) => (this.item = item))
},
}
</script>

346
resources/js/views/FileView/Public.vue
View File

@@ -1,183 +1,193 @@
<template>
<div>
<MobileContextMenu>
<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" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
<template v-slot:visitor>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</MobileContextMenu>
<div>
<MobileContextMenu>
<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" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
<template v-slot:visitor>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</MobileContextMenu>
<MobileCreateMenu>
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
</OptionGroup>
</MobileCreateMenu>
<MobileCreateMenu>
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
</OptionGroup>
</MobileCreateMenu>
<MobileMultiSelectToolbar>
<template v-slot:visitor>
<ToolbarButton @click.native="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
</template>
<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="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
</template>
</MobileMultiSelectToolbar>
<MobileMultiSelectToolbar>
<template v-slot:visitor>
<ToolbarButton @click.native="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
</template>
<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="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
</template>
</MobileMultiSelectToolbar>
<ContextMenu>
<template v-slot:empty-select v-if="$checkPermission('editor')">
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
</OptionGroup>
</template>
<ContextMenu>
<template v-slot:empty-select v-if="$checkPermission('editor')">
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<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="$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="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
<template v-slot:single-select v-if="item">
<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="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
<template v-slot:multiple-select v-if="item">
<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>
<OptionGroup>
<Option @click.native="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<template v-slot:multiple-select v-if="item">
<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>
<OptionGroup>
<Option @click.native="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<FileActionsMobile>
<template v-if="$checkPermission('editor')">
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('create-list')" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
<template v-if="$checkPermission('visitor')">
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight')}}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
</FileActionsMobile>
<FileActionsMobile>
<template v-if="$checkPermission('editor')">
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('create-list')" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
<template v-if="$checkPermission('visitor')">
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
</FileActionsMobile>
<EmptyFilePage>
<template v-if="$checkPermission('editor')">
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
<p class="description">
{{ $t('empty_page.description') }}
</p>
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</template>
<template v-if="$checkPermission('visitor')">
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
</template>
</EmptyFilePage>
<EmptyFilePage>
<template v-if="$checkPermission('editor')">
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
<p class="description">
{{ $t('empty_page.description') }}
</p>
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</template>
<template v-if="$checkPermission('visitor')">
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
</template>
</EmptyFilePage>
<FileBrowser />
</div>
<FileBrowser />
</div>
</template>
<script>
import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileMultiSelectToolbar from "../../components/FilesView/MobileMultiSelectToolbar";
import MobileActionButton from "../../components/FilesView/MobileActionButton";
import MobileContextMenu from "../../components/FilesView/MobileContextMenu";
import MobileCreateMenu from "../../components/FilesView/MobileCreateMenu";
import ToolbarButton from "../../components/FilesView/ToolbarButton";
import OptionUpload from "../../components/FilesView/OptionUpload";
import ButtonUpload from "../../components/FilesView/ButtonUpload";
import FileBrowser from "../../components/FilesView/FileBrowser";
import ContextMenu from "../../components/FilesView/ContextMenu";
import OptionGroup from "../../components/FilesView/OptionGroup";
import Option from "../../components/FilesView/Option";
import {events} from "../../bus"
import { mapGetters } from 'vuex'
import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
import MobileActionButton from '../../components/FilesView/MobileActionButton'
import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
import MobileCreateMenu from '../../components/FilesView/MobileCreateMenu'
import ToolbarButton from '../../components/FilesView/ToolbarButton'
import OptionUpload from '../../components/FilesView/OptionUpload'
import ButtonUpload from '../../components/FilesView/ButtonUpload'
import FileBrowser from '../../components/FilesView/FileBrowser'
import ContextMenu from '../../components/FilesView/ContextMenu'
import OptionGroup from '../../components/FilesView/OptionGroup'
import Option from '../../components/FilesView/Option'
import { events } from '../../bus'
import { mapGetters } from 'vuex'
export default {
name: 'Files',
components: {
MobileMultiSelectToolbar,
MobileActionButton,
MobileContextMenu,
MobileCreateMenu,
ToolbarButton,
OptionUpload,
ButtonUpload,
OptionGroup,
FileBrowser,
ContextMenu,
Option,
FileActionsMobile,
EmptyFilePage,
},
computed: {
...mapGetters([
'clipboard',
])
},
data() {
return {
item: undefined,
}
},
methods: {
createFolder() {
events.$emit('popup:open', {name: 'create-folder'})
},
},
created() {
this.$store.dispatch('getSharedFolder', this.$route.params.id)
export default {
name: 'Files',
components: {
MobileMultiSelectToolbar,
MobileActionButton,
MobileContextMenu,
MobileCreateMenu,
ToolbarButton,
OptionUpload,
ButtonUpload,
OptionGroup,
FileBrowser,
ContextMenu,
Option,
FileActionsMobile,
EmptyFilePage,
},
computed: {
...mapGetters(['clipboard']),
},
data() {
return {
item: undefined,
}
},
methods: {
createFolder() {
events.$emit('popup:open', { name: 'create-folder' })
},
},
created() {
this.$store.dispatch('getSharedFolder', this.$route.params.id)
events.$on('context-menu:show', (event, item) => this.item = item)
events.$on('mobile-context-menu:show', item => this.item = item)
}
}
events.$on('context-menu:show', (event, item) => (this.item = item))
events.$on('mobile-context-menu:show', (item) => (this.item = item))
},
}
</script>

243
resources/js/views/FileView/RecentUploads.vue
View File

@@ -1,131 +1,138 @@
<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.data.relationships.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="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</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.data.relationships.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="$downloadSelection(item)" :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="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<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="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<MobileContextMenu>
<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" />
<Option @click.native="$shareFileOrFolder(item)" :title="item && item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MobileContextMenu>
<MobileContextMenu>
<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" />
<Option @click.native="$shareFileOrFolder(item)" :title="item && item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MobileContextMenu>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButtonUpload>
{{ $t('context_menu.upload') }}
</MobileActionButtonUpload>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButtonUpload>
{{ $t('context_menu.upload') }}
</MobileActionButtonUpload>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<EmptyFilePage>
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
<p class="description">
{{ $t('empty_page.description') }}
</p>
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</EmptyFilePage>
<EmptyFilePage>
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
<p class="description">
{{ $t('empty_page.description') }}
</p>
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</EmptyFilePage>
<FileBrowser />
<FileBrowser />
<MobileMultiSelectToolbar>
<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
</MobileMultiSelectToolbar>
</div>
<MobileMultiSelectToolbar>
<ToolbarButton
@click.native="$deleteFileOrFolder(clipboard)"
class="action-btn"
source="trash"
:class="{ 'is-inactive': clipboard.length < 1 }"
:action="$t('actions.delete')"
/>
<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
</MobileMultiSelectToolbar>
</div>
</template>
<script>
import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileActionButtonUpload from "../../components/FilesView/MobileActionButtonUpload";
import MobileActionButton from "../../components/FilesView/MobileActionButton";
import MobileMultiSelectToolbar from "../../components/FilesView/MobileMultiSelectToolbar";
import MobileContextMenu from "../../components/FilesView/MobileContextMenu";
import ToolbarButton from "../../components/FilesView/ToolbarButton";
import ButtonUpload from "../../components/FilesView/ButtonUpload";
import FileBrowser from "../../components/FilesView/FileBrowser";
import ContextMenu from "../../components/FilesView/ContextMenu";
import OptionGroup from "../../components/FilesView/OptionGroup";
import Option from "../../components/FilesView/Option";
import { mapGetters } from 'vuex'
import {events} from "../../bus";
import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
import MobileActionButtonUpload from '../../components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '../../components/FilesView/MobileActionButton'
import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
import ToolbarButton from '../../components/FilesView/ToolbarButton'
import ButtonUpload from '../../components/FilesView/ButtonUpload'
import FileBrowser from '../../components/FilesView/FileBrowser'
import ContextMenu from '../../components/FilesView/ContextMenu'
import OptionGroup from '../../components/FilesView/OptionGroup'
import Option from '../../components/FilesView/Option'
import { mapGetters } from 'vuex'
import { events } from '../../bus'
export default {
name: 'RecentUploads',
components: {
MobileActionButtonUpload,
MobileMultiSelectToolbar,
MobileActionButton,
MobileContextMenu,
ToolbarButton,
ButtonUpload,
OptionGroup,
FileBrowser,
ContextMenu,
Option,
FileActionsMobile,
EmptyFilePage,
},
computed: {
...mapGetters([
'clipboard',
'user',
]),
},
data() {
return {
item: undefined,
}
},
created() {
this.$store.dispatch('getRecentUploads')
export default {
name: 'RecentUploads',
components: {
MobileActionButtonUpload,
MobileMultiSelectToolbar,
MobileActionButton,
MobileContextMenu,
ToolbarButton,
ButtonUpload,
OptionGroup,
FileBrowser,
ContextMenu,
Option,
FileActionsMobile,
EmptyFilePage,
},
computed: {
...mapGetters(['clipboard', 'user']),
},
data() {
return {
item: undefined,
}
},
created() {
this.$store.dispatch('getRecentUploads')
events.$on('context-menu:show', (event, item) => this.item = item)
events.$on('mobile-context-menu:show', item => this.item = item)
}
}
events.$on('context-menu:show', (event, item) => (this.item = item))
events.$on('mobile-context-menu:show', (item) => (this.item = item))
},
}
</script>

432
resources/js/views/FileView/SharedWithMe.vue
View File

@@ -1,240 +1,244 @@
<template>
<div>
<MobileContextMenu>
<OptionGroup v-if="canEdit && item">
<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>
<div>
<MobileContextMenu>
<OptionGroup v-if="canEdit && item">
<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 v-if="item">
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MobileContextMenu>
</MobileContextMenu>
<MobileCreateMenu>
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
</OptionGroup>
</MobileCreateMenu>
<MobileCreateMenu>
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
</OptionGroup>
</MobileCreateMenu>
<MobileTeamContextMenu>
<OptionGroup>
<Option @click.native="$detachMeFromTeamFolder(teamFolder)" :title="$t('Leave the Team Folder')" icon="user-minus" />
</OptionGroup>
</MobileTeamContextMenu>
<MobileTeamContextMenu>
<OptionGroup>
<Option @click.native="$detachMeFromTeamFolder(teamFolder)" :title="$t('Leave the Team Folder')" icon="user-minus" />
</OptionGroup>
</MobileTeamContextMenu>
<MobileMultiSelectToolbar>
<ToolbarButton v-if="canEdit" @click.native="$moveFileOrFolder(clipboard)" class="action-btn" source="move" :action="$t('actions.move')" :class="{'is-inactive' : clipboard.length < 1}" />
<ToolbarButton v-if="canEdit" @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
<MobileMultiSelectToolbar>
<ToolbarButton
v-if="canEdit"
@click.native="$moveFileOrFolder(clipboard)"
class="action-btn"
source="move"
:action="$t('actions.move')"
:class="{ 'is-inactive': clipboard.length < 1 }"
/>
<ToolbarButton
v-if="canEdit"
@click.native="$deleteFileOrFolder(clipboard)"
class="action-btn"
source="trash"
:class="{ 'is-inactive': clipboard.length < 1 }"
:action="$t('actions.delete')"
/>
<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
</MobileMultiSelectToolbar>
</MobileMultiSelectToolbar>
<ContextMenu>
<template v-slot:empty-select v-if="canEdit">
<OptionGroup v-if="! isTeamFolderHomepage">
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup v-if="! isTeamFolderHomepage">
<Option @click.stop.native="$createFolder" :title="$t('actions.create_folder')" icon="folder-plus" />
</OptionGroup>
</template>
<ContextMenu>
<template v-slot:empty-select v-if="canEdit">
<OptionGroup v-if="!isTeamFolderHomepage">
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup v-if="!isTeamFolderHomepage">
<Option @click.stop.native="$createFolder" :title="$t('actions.create_folder')" icon="folder-plus" />
</OptionGroup>
</template>
<template v-slot:single-select v-if="item">
<OptionGroup v-if="canEdit">
<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="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
<template v-slot:single-select v-if="item">
<OptionGroup v-if="canEdit">
<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="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
<template v-slot:multiple-select v-if="item">
<OptionGroup v-if="canEdit">
<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="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<template v-slot:multiple-select v-if="item">
<OptionGroup v-if="canEdit">
<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="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton v-if="canEdit" @click.native="$showMobileMenu('create-list')" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton v-if="canEdit" @click.native="$showMobileMenu('create-list')" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<EmptyFilePage>
<EmptyFilePage>
<!--Homepage-->
<template v-if="isTeamFolderHomepage">
<h1 class="title">
{{ $t('Nothing Shared With You') }}
</h1>
<p class="description">
{{ $t('All items that are shared with you will be visible here.') }}
</p>
</template>
<!--Homepage-->
<template v-if="isTeamFolderHomepage">
<h1 class="title">
{{ $t('Nothing Shared With You') }}
</h1>
<p class="description">
{{ $t('All items that are shared with you will be visible here.') }}
</p>
</template>
<!--Empty folder wit can-edit privileges -->
<template v-if="canEdit && !isTeamFolderHomepage">
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
<p class="description">
{{ $t('empty_page.description') }}
</p>
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</template>
<!--Empty folder wit can-edit privileges -->
<template v-if="canEdit && ! isTeamFolderHomepage">
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
<p class="description">
{{ $t('empty_page.description') }}
</p>
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</template>
<!--Empty folder wit can-view privileges -->
<template v-if="!canEdit && !isTeamFolderHomepage">
<h1 class="title">
{{ $t('There is Nothing Yet') }}
</h1>
</template>
</EmptyFilePage>
<!--Empty folder wit can-view privileges -->
<template v-if="! canEdit && ! isTeamFolderHomepage">
<h1 class="title">
{{ $t('There is Nothing Yet') }}
</h1>
</template>
</EmptyFilePage>
<FileBrowser />
</div>
<FileBrowser />
</div>
</template>
<script>
import MobileTeamContextMenu from "../../components/FilesView/MobileTeamContextMenu";
import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileActionButtonUpload from "../../components/FilesView/MobileActionButtonUpload";
import MobileMultiSelectToolbar from "../../components/FilesView/MobileMultiSelectToolbar";
import MobileActionButton from "../../components/FilesView/MobileActionButton";
import MobileContextMenu from "../../components/FilesView/MobileContextMenu";
import MobileCreateMenu from "../../components/FilesView/MobileCreateMenu";
import ButtonUpload from "../../components/FilesView/ButtonUpload";
import ToolbarButton from "../../components/FilesView/ToolbarButton";
import OptionUpload from "../../components/FilesView/OptionUpload";
import FileBrowser from "../../components/FilesView/FileBrowser";
import ContextMenu from "../../components/FilesView/ContextMenu";
import OptionGroup from "../../components/FilesView/OptionGroup";
import ButtonBase from "../../components/FilesView/ButtonBase";
import Option from "../../components/FilesView/Option";
import { mapGetters } from 'vuex'
import {events} from "../../bus";
import MobileTeamContextMenu from '../../components/FilesView/MobileTeamContextMenu'
import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
import MobileActionButtonUpload from '../../components/FilesView/MobileActionButtonUpload'
import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
import MobileActionButton from '../../components/FilesView/MobileActionButton'
import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
import MobileCreateMenu from '../../components/FilesView/MobileCreateMenu'
import ButtonUpload from '../../components/FilesView/ButtonUpload'
import ToolbarButton from '../../components/FilesView/ToolbarButton'
import OptionUpload from '../../components/FilesView/OptionUpload'
import FileBrowser from '../../components/FilesView/FileBrowser'
import ContextMenu from '../../components/FilesView/ContextMenu'
import OptionGroup from '../../components/FilesView/OptionGroup'
import ButtonBase from '../../components/FilesView/ButtonBase'
import Option from '../../components/FilesView/Option'
import { mapGetters } from 'vuex'
import { events } from '../../bus'
export default {
name: 'SharedWithMe',
components: {
MobileActionButtonUpload,
MobileMultiSelectToolbar,
MobileTeamContextMenu,
MobileActionButton,
MobileContextMenu,
MobileCreateMenu,
ToolbarButton,
ButtonUpload,
OptionUpload,
OptionGroup,
FileBrowser,
ContextMenu,
ButtonBase,
Option,
FileActionsMobile,
EmptyFilePage,
},
computed: {
...mapGetters([
'currentTeamFolder',
'clipboard',
'config',
'user',
]),
teamFolder() {
return this.currentTeamFolder
? this.currentTeamFolder
: this.clipboard[0]
},
canEdit() {
if (this.currentTeamFolder && this.user) {
let member = this.currentTeamFolder.data.relationships.members.data.find(member => member.data.id === this.user.data.id)
export default {
name: 'SharedWithMe',
components: {
MobileActionButtonUpload,
MobileMultiSelectToolbar,
MobileTeamContextMenu,
MobileActionButton,
MobileContextMenu,
MobileCreateMenu,
ToolbarButton,
ButtonUpload,
OptionUpload,
OptionGroup,
FileBrowser,
ContextMenu,
ButtonBase,
Option,
FileActionsMobile,
EmptyFilePage,
},
computed: {
...mapGetters(['currentTeamFolder', 'clipboard', 'config', 'user']),
teamFolder() {
return this.currentTeamFolder ? this.currentTeamFolder : this.clipboard[0]
},
canEdit() {
if (this.currentTeamFolder && this.user) {
let member = this.currentTeamFolder.data.relationships.members.data.find((member) => member.data.id === this.user.data.id)
return member.data.attributes.permission === 'can-edit'
}
return member.data.attributes.permission === 'can-edit'
}
return false
},
isTeamFolderHomepage() {
return this.$isThisRoute(this.$route, ['SharedWithMe'])
&& ! this.$route.params.id
},
isFolder() {
return this.item && this.item.data.type === 'folder'
},
hasFile() {
return this.clipboard.find(item => item.type !== 'folder')
},
},
data() {
return {
item: undefined,
}
},
methods: {
createFolder() {
events.$emit('popup:open', {name: 'create-folder'})
},
},
mounted() {
this.$store.commit('SET_CURRENT_TEAM_FOLDER', undefined)
this.$store.dispatch('getSharedWithMeFolder', this.$route.params.id)
return false
},
isTeamFolderHomepage() {
return this.$isThisRoute(this.$route, ['SharedWithMe']) && !this.$route.params.id
},
isFolder() {
return this.item && this.item.data.type === 'folder'
},
hasFile() {
return this.clipboard.find((item) => item.type !== 'folder')
},
},
data() {
return {
item: undefined,
}
},
methods: {
createFolder() {
events.$emit('popup:open', { name: 'create-folder' })
},
},
mounted() {
this.$store.commit('SET_CURRENT_TEAM_FOLDER', undefined)
this.$store.dispatch('getSharedWithMeFolder', this.$route.params.id)
events.$on('context-menu:show', (event, item) => this.item = item)
events.$on('mobile-context-menu:show', item => this.item = item)
events.$on('context-menu:current-folder', folder => this.item = folder)
events.$on('context-menu:show', (event, item) => (this.item = item))
events.$on('mobile-context-menu:show', (item) => (this.item = item))
events.$on('context-menu:current-folder', (folder) => (this.item = folder))
events.$on('action:confirmed', data => {
events.$on('action:confirmed', (data) => {
// Leave team folder after popup confirmation
if (data.operation === 'leave-team-folder')
axios
.delete(`/api/teams/folders/${data.id}/leave`)
.then(() => {
if (this.$route.params.id) {
this.$router.push({ name: 'SharedWithMe' })
} else {
this.$store.dispatch('getSharedWithMeFolder', undefined)
}
// Leave team folder after popup confirmation
if (data.operation === 'leave-team-folder')
axios.delete(`/api/teams/folders/${data.id}/leave`)
.then(() => {
if (this.$route.params.id) {
this.$router.push({name: 'SharedWithMe'})
} else {
this.$store.dispatch('getSharedWithMeFolder', undefined)
}
events.$emit('toaster', {
type: 'success',
message: this.$t('You have successfully left the team folder'),
})
})
.catch(() => this.$isSomethingWrong())
})
},
destroyed() {
events.$off('action:confirmed')
},
}
events.$emit('toaster', {
type: 'success',
message: this.$t('You have successfully left the team folder'),
})
})
.catch(() => this.$isSomethingWrong())
})
},
destroyed() {
events.$off('action:confirmed')
},
}
</script>

496
resources/js/views/FileView/TeamFolders.vue
View File

@@ -1,265 +1,285 @@
<template>
<div>
<MobileContextMenu>
<OptionGroup v-if="item && isFolder">
<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
<div>
<MobileContextMenu>
<OptionGroup v-if="item && isFolder">
<Option
@click.native="addToFavourites"
:title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
icon="favourites"
/>
</OptionGroup>
<OptionGroup v-if="item">
<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 v-if="item">
<Option @click.native="$shareFileOrFolder(item)" :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Edit Team Members')" icon="users" />
</OptionGroup>
<OptionGroup v-if="item">
<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 v-if="item">
<Option @click.native="$shareFileOrFolder(item)" :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Edit Team Members')" icon="users" />
</OptionGroup>
<OptionGroup v-if="item">
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MobileContextMenu>
</MobileContextMenu>
<MobileCreateMenu>
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" :is-hover-disabled="true" />
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
</OptionGroup>
</MobileCreateMenu>
<MobileCreateMenu>
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" :is-hover-disabled="true" />
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
</OptionGroup>
</MobileCreateMenu>
<MobileTeamContextMenu>
<OptionGroup>
<Option @click.native="$updateTeamFolder(teamFolder)" :title="$t('Edit Members')" icon="rename" />
<Option @click.native="$dissolveTeamFolder(teamFolder)" :title="$t('Dissolve Team')" icon="trash" />
</OptionGroup>
</MobileTeamContextMenu>
<MobileTeamContextMenu>
<OptionGroup>
<Option @click.native="$updateTeamFolder(teamFolder)" :title="$t('Edit Members')" icon="rename" />
<Option @click.native="$dissolveTeamFolder(teamFolder)" :title="$t('Dissolve Team')" icon="trash" />
</OptionGroup>
</MobileTeamContextMenu>
<MobileMultiSelectToolbar>
<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')" />
<MobileMultiSelectToolbar>
<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="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
</MobileMultiSelectToolbar>
</MobileMultiSelectToolbar>
<ContextMenu>
<template v-slot:empty-select>
<OptionGroup v-if="! isTeamFolderHomepage">
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
<Option @click.stop.native="$createFolder" :title="$t('actions.create_folder')" icon="folder-plus" />
</OptionGroup>
<OptionGroup v-if="isTeamFolderHomepage">
<Option @click.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" />
</OptionGroup>
</template>
<ContextMenu>
<template v-slot:empty-select>
<OptionGroup v-if="!isTeamFolderHomepage">
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
<Option @click.stop.native="$createFolder" :title="$t('actions.create_folder')" icon="folder-plus" />
</OptionGroup>
<OptionGroup v-if="isTeamFolderHomepage">
<Option @click.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" />
</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>
<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.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Edit Team Members')" icon="users" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</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>
<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.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')"
icon="share"
/>
<Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Edit Team Members')" icon="users" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :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="$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="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<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="$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="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('create-list')" v-if="$checkPermission(['master', 'editor'])" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('create-list')" v-if="$checkPermission(['master', 'editor'])" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<EmptyFilePage>
<template v-if="isTeamFolderHomepage">
<h1 class="title">
{{ $t('Create your Team Folder') }}
</h1>
<p class="description">
{{ $t('Collaborate on your files with your team easily by creating new team folder.') }}
</p>
<ButtonBase @click.native="$createTeamFolder" button-style="theme" class="m-center">
{{ $t('Create Team Folder') }}
</ButtonBase>
</template>
<EmptyFilePage>
<template v-if="isTeamFolderHomepage">
<h1 class="title">
{{ $t('Create your Team Folder') }}
</h1>
<p class="description">
{{ $t('Collaborate on your files with your team easily by creating new team folder.') }}
</p>
<ButtonBase @click.native="$createTeamFolder" button-style="theme" class="m-center">
{{ $t('Create Team Folder') }}
</ButtonBase>
</template>
<template v-if="! isTeamFolderHomepage">
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
<p class="description">
{{ $t('empty_page.description') }}
</p>
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</template>
</EmptyFilePage>
<template v-if="!isTeamFolderHomepage">
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
<p class="description">
{{ $t('empty_page.description') }}
</p>
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</template>
</EmptyFilePage>
<FileBrowser />
</div>
<FileBrowser />
</div>
</template>
<script>
import MobileTeamContextMenu from "../../components/FilesView/MobileTeamContextMenu";
import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileActionButtonUpload from "../../components/FilesView/MobileActionButtonUpload";
import MobileMultiSelectToolbar from "../../components/FilesView/MobileMultiSelectToolbar";
import MobileActionButton from "../../components/FilesView/MobileActionButton";
import MobileContextMenu from "../../components/FilesView/MobileContextMenu";
import MobileCreateMenu from "../../components/FilesView/MobileCreateMenu";
import ButtonUpload from "../../components/FilesView/ButtonUpload";
import ToolbarButton from "../../components/FilesView/ToolbarButton";
import OptionUpload from "../../components/FilesView/OptionUpload";
import FileBrowser from "../../components/FilesView/FileBrowser";
import ContextMenu from "../../components/FilesView/ContextMenu";
import OptionGroup from "../../components/FilesView/OptionGroup";
import ButtonBase from "../../components/FilesView/ButtonBase";
import Option from "../../components/FilesView/Option";
import { mapGetters } from 'vuex'
import {events} from "../../bus";
import MobileTeamContextMenu from '../../components/FilesView/MobileTeamContextMenu'
import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
import MobileActionButtonUpload from '../../components/FilesView/MobileActionButtonUpload'
import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
import MobileActionButton from '../../components/FilesView/MobileActionButton'
import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
import MobileCreateMenu from '../../components/FilesView/MobileCreateMenu'
import ButtonUpload from '../../components/FilesView/ButtonUpload'
import ToolbarButton from '../../components/FilesView/ToolbarButton'
import OptionUpload from '../../components/FilesView/OptionUpload'
import FileBrowser from '../../components/FilesView/FileBrowser'
import ContextMenu from '../../components/FilesView/ContextMenu'
import OptionGroup from '../../components/FilesView/OptionGroup'
import ButtonBase from '../../components/FilesView/ButtonBase'
import Option from '../../components/FilesView/Option'
import { mapGetters } from 'vuex'
import { events } from '../../bus'
export default {
name: 'TeamFolders',
components: {
MobileActionButtonUpload,
MobileMultiSelectToolbar,
MobileTeamContextMenu,
MobileActionButton,
MobileContextMenu,
MobileCreateMenu,
ToolbarButton,
ButtonUpload,
OptionUpload,
OptionGroup,
FileBrowser,
ContextMenu,
ButtonBase,
Option,
FileActionsMobile,
EmptyFilePage,
},
computed: {
...mapGetters([
'currentTeamFolder',
'clipboard',
'config',
'user',
]),
teamFolder() {
return this.currentTeamFolder
? this.currentTeamFolder
: this.clipboard[0]
},
isTeamFolderHomepage() {
return this.$isThisRoute(this.$route, ['TeamFolders'])
&& ! this.$route.params.id
},
isFolder() {
return this.item && this.item.data.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
},
},
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.data.id)) {
// Add to favourite folder that is not selected
if (!this.clipboard.includes(this.item)) {
this.$store.dispatch('addToFavourites', this.item)
}
export default {
name: 'TeamFolders',
components: {
MobileActionButtonUpload,
MobileMultiSelectToolbar,
MobileTeamContextMenu,
MobileActionButton,
MobileContextMenu,
MobileCreateMenu,
ToolbarButton,
ButtonUpload,
OptionUpload,
OptionGroup,
FileBrowser,
ContextMenu,
ButtonBase,
Option,
FileActionsMobile,
EmptyFilePage,
},
computed: {
...mapGetters(['currentTeamFolder', 'clipboard', 'config', 'user']),
teamFolder() {
return this.currentTeamFolder ? this.currentTeamFolder : this.clipboard[0]
},
isTeamFolderHomepage() {
return this.$isThisRoute(this.$route, ['TeamFolders']) && !this.$route.params.id
},
isFolder() {
return this.item && this.item.data.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
},
},
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.data.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)
}
},
createFolder() {
events.$emit('popup:open', {name: 'create-folder'})
},
},
mounted() {
this.$store.dispatch('getTeamFolder', this.$route.params.id)
// Add to favourites all selected folders
if (this.clipboard.includes(this.item)) {
this.$store.dispatch('addToFavourites', null)
}
} else {
this.$store.dispatch('removeFromFavourites', this.item)
}
},
createFolder() {
events.$emit('popup:open', { name: 'create-folder' })
},
},
mounted() {
this.$store.dispatch('getTeamFolder', this.$route.params.id)
events.$on('context-menu:show', (event, item) => this.item = item)
events.$on('mobile-context-menu:show', item => this.item = item)
events.$on('context-menu:current-folder', folder => this.item = folder)
events.$on('context-menu:show', (event, item) => (this.item = item))
events.$on('mobile-context-menu:show', (item) => (this.item = item))
events.$on('context-menu:current-folder', (folder) => (this.item = folder))
events.$on('action:confirmed', data => {
events.$on('action:confirmed', (data) => {
if (data.operation === 'dissolve-team-folder')
axios
.delete(`/api/teams/folders/${data.id}`)
.then(() => {
if (this.$route.params.id) {
this.$router.push({ name: 'TeamFolders' })
} else {
this.$store.commit('REMOVE_ITEM', data.id)
}
if (data.operation === 'dissolve-team-folder')
axios.delete(`/api/teams/folders/${data.id}`)
.then(() => {
if (this.$route.params.id) {
this.$router.push({name: 'TeamFolders'})
} else {
this.$store.commit('REMOVE_ITEM', data.id)
}
events.$emit('toaster', {
type: 'success',
message: this.$t('Your Team Folder was moved into your files.'),
})
})
.catch(() => this.$isSomethingWrong())
})
},
destroyed() {
events.$off('action:confirmed')
},
}
events.$emit('toaster', {
type: 'success',
message: this.$t('Your Team Folder was moved into your files.'),
})
})
.catch(() => this.$isSomethingWrong())
})
},
destroyed() {
events.$off('action:confirmed')
},
}
</script>

212
resources/js/views/FileView/Trash.vue
View File

@@ -1,123 +1,127 @@
<template>
<div>
<ContextMenu>
<template v-slot:empty-select>
<OptionGroup>
<Option @click.native="$emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
</OptionGroup>
</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="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</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="$downloadSelection(item)" :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="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<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="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<MobileContextMenu>
<OptionGroup v-if="item">
<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" />
<MobileContextMenu>
<OptionGroup v-if="item">
<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" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MobileContextMenu>
</MobileContextMenu>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight')}}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$emptyTrash" icon="trash">
{{ $t('context_menu.empty_trash') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$emptyTrash" icon="trash">
{{ $t('context_menu.empty_trash') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<EmptyFilePage>
<h1 class="title">{{ $t('Your Trash is Empty') }}</h1>
</EmptyFilePage>
<EmptyFilePage>
<h1 class="title">{{ $t('Your Trash is Empty') }}</h1>
</EmptyFilePage>
<FileBrowser />
<FileBrowser />
<MobileMultiSelectToolbar>
<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
</MobileMultiSelectToolbar>
</div>
<MobileMultiSelectToolbar>
<ToolbarButton
@click.native="$deleteFileOrFolder(clipboard)"
class="action-btn"
source="trash"
:class="{ 'is-inactive': clipboard.length < 1 }"
:action="$t('actions.delete')"
/>
<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
</MobileMultiSelectToolbar>
</div>
</template>
<script>
import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileActionButtonUpload from "../../components/FilesView/MobileActionButtonUpload";
import MobileActionButton from "../../components/FilesView/MobileActionButton";
import MobileMultiSelectToolbar from "../../components/FilesView/MobileMultiSelectToolbar";
import MobileContextMenu from "../../components/FilesView/MobileContextMenu";
import ToolbarButton from "../../components/FilesView/ToolbarButton";
import FileBrowser from "../../components/FilesView/FileBrowser";
import ContextMenu from "../../components/FilesView/ContextMenu";
import OptionGroup from "../../components/FilesView/OptionGroup";
import Option from "../../components/FilesView/Option";
import { mapGetters } from 'vuex'
import {events} from "../../bus";
import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
import MobileActionButtonUpload from '../../components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '../../components/FilesView/MobileActionButton'
import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
import ToolbarButton from '../../components/FilesView/ToolbarButton'
import FileBrowser from '../../components/FilesView/FileBrowser'
import ContextMenu from '../../components/FilesView/ContextMenu'
import OptionGroup from '../../components/FilesView/OptionGroup'
import Option from '../../components/FilesView/Option'
import { mapGetters } from 'vuex'
import { events } from '../../bus'
export default {
name: 'Trash',
components: {
MobileActionButtonUpload,
MobileMultiSelectToolbar,
MobileActionButton,
MobileContextMenu,
ToolbarButton,
OptionGroup,
FileBrowser,
ContextMenu,
Option,
FileActionsMobile,
EmptyFilePage,
},
computed: {
...mapGetters([
'clipboard',
]),
},
data() {
return {
item: undefined,
}
},
created() {
this.$store.dispatch('getTrash', this.$route.params.id)
export default {
name: 'Trash',
components: {
MobileActionButtonUpload,
MobileMultiSelectToolbar,
MobileActionButton,
MobileContextMenu,
ToolbarButton,
OptionGroup,
FileBrowser,
ContextMenu,
Option,
FileActionsMobile,
EmptyFilePage,
},
computed: {
...mapGetters(['clipboard']),
},
data() {
return {
item: undefined,
}
},
created() {
this.$store.dispatch('getTrash', this.$route.params.id)
events.$on('context-menu:show', (event, item) => this.item = item)
events.$on('mobile-context-menu:show', item => this.item = item)
}
}
events.$on('context-menu:show', (event, item) => (this.item = item))
events.$on('mobile-context-menu:show', (item) => (this.item = item))
},
}
</script>