vuefilemanager/resources/js/views/FileView/Public.vue

<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>

		<MobileCreateMenu>
			<OptionGroup>
				<OptionUpload :title="$t('actions.upload')" 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>

		<ContextMenu>
			<template v-slot:empty-select v-if="$checkPermission('editor')">
				<OptionGroup>
					<OptionUpload :title="$t('actions.upload')" />
				</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: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(item)" :title="$t('context_menu.download')" icon="download" />
				</OptionGroup>
			</template>
		</ContextMenu>

		<FileBrowser>
			<template v-slot:file-actions-mobile>
				<template v-if="$checkPermission('editor')">
					<MobileActionButton @click.native="$openSpotlight" icon="search">
						{{ $t('actions.search') }}
					</MobileActionButton>
					<MobileActionButton @click.native="$createItems" icon="cloud-plus">
						{{ $t('mobile.create') }}
					</MobileActionButton>
					<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
						{{ $t('context_menu.select') }}
					</MobileActionButton>
					<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
						{{ $t('preview_sorting.preview_sorting_button') }}
					</MobileActionButton>
				</template>
				<template v-if="$checkPermission('visitor')">
					<MobileActionButton @click.native="$openSpotlight" icon="search">
						{{ $t('actions.search')}}
					</MobileActionButton>
					 <MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
					   {{ $t('context_menu.select') }}
					</MobileActionButton>
					 <MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
						{{ $t('preview_sorting.preview_sorting_button') }}
					</MobileActionButton>
				</template>
			</template>

			<template v-slot:empty-file-page>
				<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>
			</template>
		</FileBrowser>
	</div>
</template>

<script>
	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
	import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
	import MobileCreateMenu from '/resources/js/components/FilesView/MobileCreateMenu'
	import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
	import OptionUpload from '/resources/js/components/FilesView/OptionUpload'
    import ButtonUpload from '/resources/js/components/FilesView/ButtonUpload'
	import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
	import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
	import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
	import Option from '/resources/js/components/FilesView/Option'
	import {events} from "../../bus"
	import { mapGetters } from 'vuex'

	export default {
		name: 'Files',
		components: {
			MobileMultiSelectToolbar,
			MobileActionButton,
			MobileContextMenu,
			MobileCreateMenu,
			ToolbarButton,
			OptionUpload,
			ButtonUpload,
			OptionGroup,
			FileBrowser,
			ContextMenu,
			Option,
		},
		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)
		}
	}
</script>