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,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>
|
||||
|
||||
Reference in New Issue
Block a user