vuefilemanager/resources/js/views/FileView/Components/PanelNavigationFiles.vue

<template>
	<ContentSidebar v-if="isVisibleNavigationBars" class="relative">

		<!--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" :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="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>

		<!--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 overflow-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>
</template>

<script>
	import { ChevronsLeftIcon, FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon} from "vue-feather-icons";
	import TreeMenuNavigator from '/resources/js/components/Others/TreeMenuNavigator'
	import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
	import ContentGroup from '/resources/js/components/Sidebar/ContentGroup'
	import {events} from "../../../bus";
	import {mapGetters} from "vuex";

export default {
	name: "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

			this.area = true
		},
		dragFinish() {
			this.area = false

			events.$emit('drop')

			// Check if dragged item is folder
			if (this.draggedItem && this.draggedItem.type !== 'folder') return

			// Check if folder exist in favourites
			if (this.favourites.find(folder => folder.id === this.draggedItem.id)) return

			// Prevent to move folders to self
			if (this.clipboard.length > 0 && this.clipboard.find(item => item.type !== 'folder')) return

			//Add to favourites non selected folder
			if (!this.clipboard.includes(this.draggedItem)) {
				this.$store.dispatch('addToFavourites', this.draggedItem)
			}

			//Add to favourites selected folders
			if (this.clipboard.includes(this.draggedItem)) {
				this.$store.dispatch('addToFavourites', null)
			}
		},
	},
	created() {
		// Listen for dragstart folder items
		events.$on('dragstart', item => this.draggedItem = item)

		this.$store.dispatch('getFolderTree')
	}
}
</script>