mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-20 17:02:16 +00:00
vue components refactoring
This commit is contained in:
Čarodej
150
resources/js/components/UI/Trees/TreeMenu.vue
Normal file
150
resources/js/components/UI/Trees/TreeMenu.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div
|
||||
:class="{
|
||||
'pointer-events-none opacity-50': (disabledById && disabledById.data.id === nodes.id) || !disableId || (isRootDepth && !nodes.folders.length && nodes.location !== 'files'),
|
||||
'mb-2.5': isRootDepth,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
:style="indent"
|
||||
class="relative relative flex cursor-pointer select-none items-center whitespace-nowrap px-1.5 transition-all duration-150"
|
||||
>
|
||||
<!--Arrow icon-->
|
||||
<span @click.stop="showTree" class="-m-2 p-2">
|
||||
<chevron-right-icon
|
||||
:class="{
|
||||
'rotate-90 transform': isVisible,
|
||||
'text-theme dark-text-theme': isSelectedItem,
|
||||
'opacity-100': nodes.folders.length !== 0,
|
||||
}"
|
||||
class="vue-feather mr-2 opacity-0 transition-all duration-300"
|
||||
size="17"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<!--Item icon-->
|
||||
<hard-drive-icon
|
||||
v-if="['public', 'files', 'upload-request'].includes(nodes.location)"
|
||||
size="17"
|
||||
class="icon vue-feather shrink-0"
|
||||
:class="{ 'text-theme dark-text-theme': isSelectedItem }"
|
||||
/>
|
||||
<users-icon
|
||||
v-if="nodes.location === 'team-folders'"
|
||||
size="17"
|
||||
class="icon vue-feather shrink-0"
|
||||
:class="{ 'text-theme dark-text-theme': isSelectedItem }"
|
||||
/>
|
||||
<user-plus-icon
|
||||
v-if="nodes.location === 'shared-with-me'"
|
||||
size="17"
|
||||
class="icon vue-feather shrink-0"
|
||||
:class="{ 'text-theme dark-text-theme': isSelectedItem }"
|
||||
/>
|
||||
<folder-icon
|
||||
v-if="!nodes.location"
|
||||
size="17"
|
||||
class="icon vue-feather shrink-0"
|
||||
:class="{ 'text-theme dark-text-theme': isSelectedItem }"
|
||||
/>
|
||||
|
||||
<!--Item label-->
|
||||
<b
|
||||
@click="getFolder"
|
||||
class="lg:py-2 py-3.5 ml-3 inline-block overflow-x-hidden text-ellipsis whitespace-nowrap text-xs font-bold transition-all duration-150"
|
||||
:class="{'text-theme': isSelectedItem }"
|
||||
>
|
||||
{{ nodes.name }}
|
||||
</b>
|
||||
</div>
|
||||
|
||||
<!--Children-->
|
||||
<tree-node
|
||||
:disabled-by-id="disabledById"
|
||||
:depth="depth + 1"
|
||||
v-if="isVisible"
|
||||
:nodes="item"
|
||||
v-for="item in nodes.folders"
|
||||
:key="item.id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FolderIcon, ChevronRightIcon, HardDriveIcon, UsersIcon, UserPlusIcon } from 'vue-feather-icons'
|
||||
import { events } from '../../../bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'TreeMenu',
|
||||
props: ['disabledById', 'nodes', 'depth'],
|
||||
components: {
|
||||
ChevronRightIcon,
|
||||
HardDriveIcon,
|
||||
UserPlusIcon,
|
||||
FolderIcon,
|
||||
UsersIcon,
|
||||
'tree-node': () => import('./TreeMenu'),
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['clipboard']),
|
||||
indent() {
|
||||
return { paddingLeft: this.depth * 20 + 'px' }
|
||||
},
|
||||
disableId() {
|
||||
let canBeShow = true
|
||||
|
||||
if (this.clipboard.includes(this.disabledById)) {
|
||||
this.clipboard.map((item) => {
|
||||
if (item.data.id === this.nodes.id) {
|
||||
canBeShow = false
|
||||
}
|
||||
})
|
||||
}
|
||||
return canBeShow
|
||||
},
|
||||
isRootDepth() {
|
||||
return this.depth === 1
|
||||
},
|
||||
isSelectedItem() {
|
||||
return (this.isSelected && this.nodes.isMovable) || (this.isSelected && !this.isRootDepth)
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false,
|
||||
isSelected: false,
|
||||
isInactive: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFolder() {
|
||||
if ((this.isRootDepth && this.nodes.isMovable) || !this.isRootDepth) {
|
||||
events.$emit('show-folder-item', this.nodes)
|
||||
events.$emit('pick-folder', this.nodes)
|
||||
}
|
||||
},
|
||||
showTree() {
|
||||
this.isVisible = !this.isVisible
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// Show first location
|
||||
if (this.depth === 1 && this.nodes.isOpen) this.isVisible = true
|
||||
|
||||
// Select clicked folder
|
||||
events.$on('pick-folder', (node) => {
|
||||
this.isSelected = false
|
||||
|
||||
if (this.nodes.id === node.id) this.isSelected = true
|
||||
})
|
||||
|
||||
// Select clicked folder
|
||||
events.$on('show-folder-item', (node) => {
|
||||
this.isSelected = false
|
||||
|
||||
if (this.nodes.id === node.id) this.isSelected = true
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
156
resources/js/components/UI/Trees/TreeMenuNavigator.vue
Normal file
156
resources/js/components/UI/Trees/TreeMenuNavigator.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
@click="goToFolder"
|
||||
class="flex cursor-pointer items-center rounded-lg border-2 border-dashed border-transparent py-2.5"
|
||||
:class="{
|
||||
'border-theme': area,
|
||||
'pointer-events-none opacity-50': disabledFolder || (disabled && draggedItem.length > 0),
|
||||
}"
|
||||
:style="indent"
|
||||
@dragover.prevent="dragEnter"
|
||||
@dragleave="dragLeave"
|
||||
@drop="dragFinish()"
|
||||
>
|
||||
<div @click.stop.prevent="showTree" class="-my-2 -ml-2 cursor-pointer p-2">
|
||||
<chevron-right-icon
|
||||
size="17"
|
||||
class="vue-feather"
|
||||
:class="{
|
||||
'rotate-90 transform': isVisible,
|
||||
'opacity-0': nodes.folders.length === 0,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<folder-icon size="17" class="vue-feather mr-2.5 shrink-0" :class="{ 'text-theme': isSelected }" />
|
||||
<b
|
||||
class="max-w-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs font-bold"
|
||||
:class="{ 'text-theme': isSelected }"
|
||||
>
|
||||
{{ nodes.name }}
|
||||
</b>
|
||||
</div>
|
||||
<tree-node
|
||||
:disabled="disableChildren"
|
||||
:depth="depth + 1"
|
||||
v-if="isVisible"
|
||||
:nodes="item"
|
||||
v-for="item in nodes.folders"
|
||||
:key="item.id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FolderIcon, ChevronRightIcon } from 'vue-feather-icons'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from '../../../bus'
|
||||
|
||||
export default {
|
||||
name: 'TreeMenuNavigator',
|
||||
props: ['disabled', 'nodes', 'depth'],
|
||||
components: {
|
||||
'tree-node': () => import('./TreeMenuNavigator'),
|
||||
ChevronRightIcon,
|
||||
FolderIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['clipboard']),
|
||||
isSelected() {
|
||||
return this.$route.params.id === this.nodes.id
|
||||
},
|
||||
disabledFolder() {
|
||||
let disableFolder = false
|
||||
|
||||
if (this.draggedItem.length > 0) {
|
||||
this.draggedItem.forEach((item) => {
|
||||
//Disable the parent of the folder
|
||||
if (item.type === 'folder' && this.nodes.id === item.parent_id) {
|
||||
disableFolder = true
|
||||
}
|
||||
//Disable the self folder with all children
|
||||
if (this.nodes.id === item.id && item.type === 'folder') {
|
||||
disableFolder = true
|
||||
this.disableChildren = true
|
||||
}
|
||||
if (this.disabled) {
|
||||
this.disableChildren = true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
disableFolder = false
|
||||
this.disableChildren = false
|
||||
}
|
||||
return disableFolder
|
||||
},
|
||||
indent() {
|
||||
let offset = window.innerWidth <= 1024 ? 14 : 18
|
||||
|
||||
return {
|
||||
paddingLeft: this.depth === 0 ? 0 : offset * this.depth + 'px',
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disableChildren: false,
|
||||
isVisible: false,
|
||||
draggedItem: [],
|
||||
area: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToFolder() {
|
||||
this.$goToFileView(this.nodes.id)
|
||||
},
|
||||
dragFinish() {
|
||||
// Move no selected item
|
||||
if (!this.clipboard.includes(this.draggedItem[0])) {
|
||||
this.$store.dispatch('moveItem', {
|
||||
to_item: this.nodes,
|
||||
item: this.draggedItem[0],
|
||||
})
|
||||
}
|
||||
|
||||
// Move all selected items
|
||||
if (this.clipboard.includes(this.draggedItem[0])) {
|
||||
this.$store.dispatch('moveItem', {
|
||||
to_item: this.nodes,
|
||||
item: null,
|
||||
})
|
||||
}
|
||||
|
||||
this.draggedItem = []
|
||||
this.area = false
|
||||
|
||||
events.$emit('drop')
|
||||
},
|
||||
dragEnter() {
|
||||
this.area = true
|
||||
},
|
||||
dragLeave() {
|
||||
this.area = false
|
||||
},
|
||||
showTree() {
|
||||
this.isVisible = !this.isVisible
|
||||
},
|
||||
},
|
||||
created() {
|
||||
events.$on('drop', () => {
|
||||
this.draggedItem = []
|
||||
})
|
||||
|
||||
//Get dragged item
|
||||
events.$on('dragstart', (data) => {
|
||||
//If is dragged item not selected
|
||||
if (!this.clipboard.includes(data)) {
|
||||
this.draggedItem = [data]
|
||||
}
|
||||
//If are the dragged items selected
|
||||
if (this.clipboard.includes(data)) {
|
||||
this.draggedItem = this.clipboard
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user