mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-05 18:23:48 +00:00
261 lines
9.5 KiB
Vue
261 lines
9.5 KiB
Vue
<template>
|
|
<div>
|
|
<MobileContextMenu>
|
|
<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>
|
|
</MobileContextMenu>
|
|
|
|
<MobileCreateMenu>
|
|
<OptionGroup :title="$t('Upload')">
|
|
<OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
|
|
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
|
|
</OptionGroup>
|
|
<OptionGroup :title="$t('Create')">
|
|
<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>
|
|
|
|
<ContextMenu v-if="uploadRequest && uploadRequest.data.attributes.status === 'filling'">
|
|
<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>
|
|
<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" />
|
|
</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>
|
|
|
|
<FileActionsMobile v-if="uploadRequest && uploadRequest.data.attributes.status === 'filling'">
|
|
<!--I am Done-->
|
|
<button @click="uploadingDone" class="flex shrink-0 items-center mr-2 rounded-xl bg-theme-200 py-1 px-1 pr-3">
|
|
<MemberAvatar
|
|
:member="uploadRequest.data.relationships.user"
|
|
:size="26"
|
|
/>
|
|
<b class="text-theme ml-2 text-sm">
|
|
{{ $t('Tell {name} you are done!', {name: userName}) }}
|
|
</b>
|
|
</button>
|
|
|
|
<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 v-if="uploadRequest">
|
|
|
|
<div v-if="uploadRequest.data.attributes.status === 'filling'">
|
|
<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>
|
|
</div>
|
|
|
|
<div v-if="['active', 'filled', 'expired'].includes(uploadRequest.data.attributes.status)">
|
|
<div class="relative mx-auto mb-8 w-24 text-center">
|
|
<VueFolderIcon class="inline-block w-28" />
|
|
<MemberAvatar
|
|
v-if="uploadRequest.data.attributes.status !== 'expired'"
|
|
:member="uploadRequest.data.relationships.user"
|
|
class="absolute -bottom-2.5 -right-2"
|
|
:is-border="true"
|
|
:size="32"
|
|
/>
|
|
</div>
|
|
|
|
<h1 class="title">
|
|
{{ emptyPageTitle }}
|
|
</h1>
|
|
|
|
<p class="description max-w-[420px] mx-auto">
|
|
{{ emptyPageDescription }}
|
|
</p>
|
|
|
|
<InfoBox v-if="uploadRequest.data.attributes.notes && uploadRequest.data.attributes.status === 'active'" class="max-w-[420px] mx-auto">
|
|
<b>{{ $t('{name} leave you a message', {name: userName}) }}: </b>
|
|
<p>{{ uploadRequest.data.attributes.notes }}</p>
|
|
</InfoBox>
|
|
|
|
<ButtonUpload v-if="uploadRequest.data.attributes.status === 'active'" button-style="theme">
|
|
{{ $t('empty_page.call_to_action') }}
|
|
</ButtonUpload>
|
|
</div>
|
|
</EmptyFilePage>
|
|
|
|
<FileBrowser />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
|
|
import MobileActionButton from '../../components/FilesView/MobileActionButton'
|
|
import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
|
|
import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
|
|
import VueFolderIcon from '../../components/FilesView/Icons/VueFolderIcon'
|
|
import MobileCreateMenu from '../../components/FilesView/MobileCreateMenu'
|
|
import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
|
|
import ToolbarButton from '../../components/FilesView/ToolbarButton'
|
|
import MemberAvatar from '../../components/FilesView/MemberAvatar'
|
|
import ButtonUpload from '../../components/FilesView/ButtonUpload'
|
|
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 {events} from '../../bus'
|
|
import {mapGetters} from 'vuex'
|
|
import InfoBox from "../../components/Others/Forms/InfoBox";
|
|
|
|
export default {
|
|
name: 'Files',
|
|
components: {
|
|
InfoBox,
|
|
MobileMultiSelectToolbar,
|
|
MobileActionButton,
|
|
FileActionsMobile,
|
|
MobileContextMenu,
|
|
MobileCreateMenu,
|
|
EmptyFilePage,
|
|
VueFolderIcon,
|
|
ToolbarButton,
|
|
MemberAvatar,
|
|
ButtonUpload,
|
|
OptionUpload,
|
|
OptionGroup,
|
|
FileBrowser,
|
|
ContextMenu,
|
|
Option,
|
|
},
|
|
computed: {
|
|
...mapGetters(['fastPreview', 'clipboard', 'config', 'user', 'uploadRequest']),
|
|
isFolder() {
|
|
return this.item && this.item.data.type === 'folder'
|
|
},
|
|
userName() {
|
|
return this.uploadRequest.data.relationships.user.data.attributes.name
|
|
},
|
|
emptyPageTitle() {
|
|
// Todo: add name into translation
|
|
return {
|
|
active: this.$t('{name} Request You for File Upload', {name: this.userName}),
|
|
filled: this.$t('Upload Request for {name} was Fulfilled Successfully', {name: this.userName}),
|
|
expired: this.$t('Upload Request Expired'),
|
|
}[this.uploadRequest.data.attributes.status]
|
|
},
|
|
emptyPageDescription() {
|
|
return {
|
|
active: this.$t('Your files will be uploaded automatically and after that, you can organize your files in folders.'),
|
|
filled: this.$t('This upload request is no longer available for uploading files.'),
|
|
expired: this.$t('This upload request is no longer available for uploading files.'),
|
|
}[this.uploadRequest.data.attributes.status]
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
item: undefined,
|
|
}
|
|
},
|
|
methods: {
|
|
uploadingDone() {
|
|
events.$emit('confirm:open', {
|
|
title: this.$t('Are you sure you uploaded all files you want for {name}?', {name: this.userName}),
|
|
message: this.$t("You won't be able to upload any files here once again."),
|
|
action: {
|
|
id: this.$router.currentRoute.params.token,
|
|
operation: 'close-upload-request',
|
|
},
|
|
})
|
|
},
|
|
createFolder() {
|
|
events.$emit('popup:open', {name: 'create-folder'})
|
|
},
|
|
},
|
|
mounted() {
|
|
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))
|
|
|
|
// Load folder from id in router
|
|
if (this.$route.params.id) {
|
|
this.$store.dispatch('getUploadRequestFolder', this.$route.params.id)
|
|
}
|
|
|
|
// Load root folder for upload request
|
|
if (! this.$route.params.id && this.uploadRequest && this.uploadRequest.data.attributes.status === 'filling') {
|
|
this.$store.dispatch('getUploadRequestFolder')
|
|
}
|
|
},
|
|
}
|
|
</script>
|