nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

api resource refactoring part 5

Browse Source
This commit is contained in:
Peter Papp
2021-08-27 13:02:28 +02:00
parent 7984ce3ef1
commit 4304fb1ddb
14 changed files with 123 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/FilePreview/Media/PdfFile.vue
View File

@@ -39,7 +39,7 @@
let self = this;
self.pdfData = pdf.createLoadingTask(this.file.file_url);
self.pdfData = pdf.createLoadingTask(this.file.data.attributes.file_url);
self.pdfData.then(pdf => self.numPages = pdf.numPages);
},

21
resources/js/components/FilesView/ContextMenu.vue
View File

@@ -57,15 +57,6 @@ export default {
// Reset item container
this.item = undefined
},
showFolderActionsMenu() {
let container = document.getElementById('folder-actions')
this.positionX = container.offsetLeft + 16
this.positionY = container.offsetTop + 30
// Show context menu
this.isVisible = true
},
showContextMenu(event) {
let parent = document.getElementById('menu-list')
let nodesSameClass = parent.getElementsByClassName('menu-option')
@@ -107,14 +98,16 @@ export default {
setTimeout(() => this.showContextMenu(event, item), 10)
})
events.$on('folder:actions', (folder) => {
// Store item
events.$on('context-menu:current-folder', folder => {
this.item = folder
this.isVisible = ! this.isVisible
if (this.isVisible) {
this.isVisible = false
} else {
this.showFolderActionsMenu()
let container = document.getElementById('folder-actions')
this.positionX = container.offsetLeft + 16
this.positionY = container.offsetTop + 30
}
})

5
resources/js/components/FilesView/DesktopToolbar.vue
View File

@@ -8,7 +8,7 @@
{{ directoryName }}
</span>
<span v-if="isLoadedFolder" @click.stop="folderActions" class="location-more group" id="folder-actions">
<span v-show="isLoadedFolder" @click.stop="folderActions" class="location-more group" id="folder-actions">
<more-horizontal-icon size="14" class="icon-more group-hover-text-theme" />
</span>
</div>
@@ -228,8 +228,7 @@
events.$emit('popover:open', 'desktop-sorting')
},
folderActions() {
// todo: add current folder
events.$emit('folder:actions', this.currentFolder)
events.$emit('context-menu:current-folder', this.currentFolder)
},
},
}

2
resources/js/components/FilesView/InfoSidebar.vue
View File

@@ -57,7 +57,7 @@
:title="$t('file_detail.where')"
>
<div class="action-button" @click="openMoveOptions">
<span>{{ singleFile.parent ? singleFile.parent.name : $t('locations.home') }}</span>
<span>{{ singleFile.data.relationships.parent ? singleFile.data.relationships.parent.data.attributes.name : $t('locations.home') }}</span>
<edit-2-icon size="10" class="edit-icon" />
</div>
</ListInfoItem>

20
resources/js/store/modules/userAuth.js vendored
View File

@@ -56,11 +56,11 @@ const actions = {
if (!folder)
items = context.getters.clipboard
items.forEach((item) => {
items.forEach(item => {
if (item.data.type === 'folder') {
if (context.getters.user.data.relationships.favourites.data.attributes.folders.find(folder => folder.id === item.data.id)) return
if (context.getters.user.data.relationships.favourites.data.find(folder => folder.id === item.data.id)) return
addFavourites.push({id: item.data.id})
}
@@ -74,9 +74,9 @@ const actions = {
let pushToFavorites = []
// Check is favorites already don't include some of pushed folders
items.map(data => {
if (!context.getters.user.data.relationships.favourites.data.attributes.folders.find(folder => folder.id === data.id)) {
pushToFavorites.push(data)
items.map(item => {
if (!context.getters.user.data.relationships.favourites.data.find(folder => folder.data.id === item.id)) {
pushToFavorites.push(item)
}
})
@@ -121,11 +121,7 @@ const mutations = {
},
ADD_TO_FAVOURITES(state, folder) {
folder.forEach(item => {
state.user.data.relationships.favourites.data.attributes.folders.push({
id: item.data.id,
name: item.data.attributes.name,
type: item.data.type,
})
state.user.data.relationships.favourites.data.push(item)
})
},
UPDATE_NAME(state, name) {
@@ -135,10 +131,10 @@ const mutations = {
state.user.data.relationships.settings.data.attributes.avatar = avatar
},
REMOVE_ITEM_FROM_FAVOURITES(state, item) {
state.user.data.relationships.favourites.data.attributes.folders = state.user.data.relationships.favourites.data.attributes.folders.filter(folder => folder.id !== item.data.id)
state.user.data.relationships.favourites.data = state.user.data.relationships.favourites.data.filter(folder => folder.data.id !== item.data.id)
},
UPDATE_NAME_IN_FAVOURITES(state, data) {
state.user.data.relationships.favourites.data.attributes.folders.find(folder => {
state.user.data.relationships.favourites.data.find(folder => {
if (folder.id === data.id) {
folder.name = data.name
}

2
resources/js/views/FileView/Components/NavigationSharePanel.vue
View File

@@ -156,7 +156,7 @@ export default {
// Transition
.folder-item-move {
transition: transform 300s ease;
transition: all 300s ease;
}
.folder-item-enter-active {

37
resources/js/views/FileView/Components/PanelNavigationFiles.vue
View File

@@ -77,18 +77,18 @@
<ContentGroup v-if="user" :title="$t('sidebar.favourites')" slug="favourites" :can-collapse="true">
<div @dragover.prevent="dragEnter" @dragleave="dragLeave" @drop="dragFinish($event)" :class="{ 'is-dragenter': area }" class="menu-list-wrapper vertical favourites">
<transition-group tag="div" class="menu-list" name="folder-item">
<span class="empty-note favourites" v-if="favourites.length === 0" :key="0">
<transition-group tag="div" class="menu-list" name="folder">
<span v-if="favourites.length === 0" class="empty-note favourites" :key="0">
{{ $t('sidebar.favourites_empty') }}
</span>
<router-link :to="{name: 'Files', params: {id: folder.id}}" v-for="folder in favourites" :key="folder.id" class="menu-list-item">
<div @click="goToFolder(folder)" v-for="folder in favourites" :key="folder.data.id" class="menu-list-item folder-item">
<div class="text-theme">
<folder-icon size="17" class="folder-icon" />
<span class="label text-theme">{{ folder.name }}</span>
<span class="label text-theme">{{ folder.data.attributes.name }}</span>
</div>
<x-icon @click.stop="$removeFavourite(folder)" size="17" class="delete-icon" />
</router-link>
</div>
</transition-group>
</div>
</ContentGroup>
@@ -127,7 +127,7 @@ export default {
'user',
]),
favourites() {
return this.user.data.relationships.favourites.data.attributes.folders
return this.user.data.relationships.favourites.data
},
storage() {
return this.$store.getters.user.data.attributes.storage
@@ -143,6 +143,9 @@ export default {
}
},
methods: {
goToFolder(folder) {
this.$router.push({name: 'Files', params: {id: folder.data.id}})
},
dragLeave() {
this.area = false
},
@@ -217,26 +220,16 @@ export default {
}
}
// Transition
.folder-item-move {
transition: transform 300s ease;
}
.folder-item-enter-active {
transition: all 300ms ease;
}
.folder-item-leave-active {
.folder-item {
transition: all 300ms;
display: inline-block;
margin-right: 10px;
}
.folder-item-enter, .folder-item-leave-to /* .list-leave-active below version 2.1.8 */
{
.folder-enter, .folder-leave-to {
opacity: 0;
transform: translateX(30px);
transform: translateY(-20px);
}
.folder-item-leave-active {
.folder-leave-active {
position: absolute;
}
</style>

3
resources/js/views/FileView/Files.vue
View File

@@ -165,7 +165,7 @@
return this.clipboard.find(item => item.data.type !== 'folder')
},
favourites() {
return this.user.data.relationships.favourites.data.attributes.folders
return this.user.data.relationships.favourites.data
},
filterLocationTitle() {
return {
@@ -208,6 +208,7 @@
events.$on('context-menu:show', (event, item) => this.item = item)
events.$on('mobile-context-menu:show', item => this.item = item)
events.$on('context-menu:current-folder', folder => this.item = folder)
}
}
</script>