mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
added prettier
This commit is contained in:
Čarodej
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user