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

- added file resource

Browse Source 
- frontend refactoring
This commit is contained in:
Peter Papp
2021-08-26 18:01:57 +02:00
parent f5f2179145
commit 5c6a873b02
37 changed files with 339 additions and 773 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -125,7 +125,7 @@
'clipboard',
]),
isLoadedFolder() {
if (this.sharedDetail && this.sharedDetail.item_id === this.$route.params.id) {
if (this.sharedDetail && this.sharedDetail.data.attributes.item_id === this.$route.params.id) {
return false
}
@@ -143,7 +143,7 @@
},
directoryName() {
if (this.currentFolder) {
return this.currentFolder.name
return this.currentFolder.data.attributes.name
} else {
return {
'RecentUploads': this.$t('Recent'),
@@ -202,7 +202,7 @@
'MySharedItems',
'Files',
]
return this.$isThisRoute(this.$route, routes) && this.clipboard.length === 1 && this.clipboard[0].type === 'folder'
return this.$isThisRoute(this.$route, routes) && this.clipboard.length === 1 && this.clipboard[0].data.type === 'folder'
}
},
data() {

8
resources/js/components/FilesView/DragUI.vue
View File

@@ -33,7 +33,7 @@ export default {
// Title for single item
if ((filesLength < 2 || !hasDraggedItem) && this.draggedItem) {
return this.draggedItem.name
return this.draggedItem.data.attributes.name
}
},
subtitle() {
@@ -48,13 +48,13 @@ export default {
if ((filesLength < 2 || !hasDraggedItem) && this.draggedItem) {
// Subtitle for single folder
if (this.draggedItem.type === 'folder') {
if (this.draggedItem.data.type === 'folder') {
return this.draggedItem.items == 0 ? this.$t('folder.empty') : this.$tc('folder.item_counts', this.draggedItem.items)
}
// Subtitle for single file
if (this.draggedItem !== 'folder' && this.draggedItem.mimetype) {
return '.' + this.draggedItem.mimetype
if (this.draggedItem.data.type !== 'folder' && this.draggedItem.data.attributes.mimetype) {
return '.' + this.draggedItem.data.attributes.mimetype
}
}
}

6
resources/js/components/FilesView/FileActionsMobile.vue
View File

@@ -50,12 +50,12 @@
disableMultiSelectMode() {
this.isSelectMode = false
events.$emit('mobileSelecting:stop')
events.$emit('mobile-select:stop')
},
},
mounted() {
events.$on('mobileSelecting:stop', () => this.isSelectMode = false)
events.$on('mobileSelecting:start', () => this.isSelectMode = true)
events.$on('mobile-select:stop', () => this.isSelectMode = false)
events.$on('mobile-select:start', () => this.isSelectMode = true)
}
}
</script>

24
resources/js/components/FilesView/FileBrowser.vue
View File

@@ -42,9 +42,9 @@
@contextmenu.native.prevent="contextMenu($event, item)"
:item="item"
v-for="item in entries"
:key="item.id"
:key="item.data.id"
class="file-item"
:class="draggedItems.includes(item) ? 'dragged' : '' "
:class="draggedItems.includes(item) ? 'dragged' : ''"
/>
</transition-group>
</div>
@@ -63,7 +63,7 @@
@contextmenu.native.prevent="contextMenu($event, item)"
:item="item"
v-for="item in entries"
:key="item.id"
:key="item.data.id"
class="file-item"
:class="draggedItems.includes(item) ? 'dragged' : '' "
/>
@@ -122,7 +122,6 @@
},
draggedItems() {
//Set opacity for dragged items
if (!this.clipboard.includes(this.draggingId)) {
return [this.draggingId]
}
@@ -153,7 +152,7 @@
},
dropUpload(event) {
// Upload external file
this.$uploadExternalFiles(event, this.currentFolder.id)
this.$uploadExternalFiles(event, this.currentFolder.data.id)
this.isDragging = false
},
@@ -177,7 +176,7 @@
if (event.dataTransfer.items.length == 0) {
// Prevent to drop on file or image
if (data.type !== 'folder' || this.draggingId === data) return
if (data.data.type !== 'folder' || this.draggingId === data) return
//Prevent move selected folder to folder if in beteewn selected folders
if (this.clipboard.find(item => item === data && this.clipboard.length > 1)) return
@@ -197,7 +196,7 @@
} else {
// Get id of current folder
const id = data.type !== 'folder' ? this.currentFolder.id : data.id
const id = data.data.type !== 'folder' ? this.currentFolder.data.id : data.data.id
// Upload external file
this.$uploadExternalFiles(event, id)
@@ -215,13 +214,8 @@
}
},
created() {
events.$on('mobileSelecting:start', () => {
this.isMultiSelect = true
})
events.$on('mobileSelecting:stop', () => {
this.isMultiSelect = false
})
events.$on('mobile-select:start', () => this.isMultiSelect = true)
events.$on('mobile-select:stop', () => this.isMultiSelect = false)
events.$on('drop', () => {
this.isDragging = false
@@ -238,7 +232,7 @@
events.$on('scrollTop', () => {
// Scroll top
var container = document.getElementsByClassName(
let container = document.getElementsByClassName(
'files-container'
)[0]

4
resources/js/components/FilesView/FileItemGrid.vue
View File

@@ -290,12 +290,12 @@ export default {
}
})
events.$on('mobileSelecting:start', () => {
events.$on('mobile-select:start', () => {
this.mobileMultiSelect = true
this.$store.commit('CLIPBOARD_CLEAR')
})
events.$on('mobileSelecting:stop', () => {
events.$on('mobile-select:stop', () => {
this.mobileMultiSelect = false
this.$store.commit('CLIPBOARD_CLEAR')
})

78
resources/js/components/FilesView/FileItemList.vue
View File

@@ -16,15 +16,15 @@
<!--Thumbnail for item-->
<div class="icon-item">
<!--If is file or image, then link item-->
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme dark-text-theme">
{{ item.mimetype | limitCharacters }}
<span v-if="isFile || (isImage && !item.data.attributes.thumbnail)" class="file-icon-text text-theme dark-text-theme">
{{ item.data.attributes.mimetype | limitCharacters }}
</span>
<!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" icon="file" />
<FontAwesomeIcon v-if="isFile || (isImage && !item.data.attributes.thumbnail)" class="file-icon" icon="file" />
<!--Image thumbnail-->
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name" />
<img loading="lazy" v-if="isImage && item.data.attributes.thumbnail" class="image" :src="item.data.attributes.thumbnail" :alt="item.data.attributes.name" />
<!--Else show only folder icon-->
<FolderIcon v-if="isFolder" :item="item" location="file-item-list" class="folder svg-color-theme" />
@@ -32,26 +32,26 @@
<!--Name-->
<div class="item-name">
<b :ref="this.item.id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
<b :ref="item.data.id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
{{ itemName }}
</b>
<div class="item-info">
<!--Shared Icon-->
<div v-if="$checkPermission('master') && item.shared" class="item-shared">
<div v-if="$checkPermission('master') && item.data.relationships.shared" class="item-shared">
<link-icon size="12" class="shared-icon text-theme dark-text-theme"/>
</div>
<!--Participant owner Icon-->
<div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared">
<!-- <div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared">
<user-plus-icon size="12" class="shared-icon text-theme dark-text-theme"/>
</div>
</div>-->
<!--Filesize and timestamp-->
<span v-if="!isFolder" class="item-size">{{ item.filesize }}, {{ timeStamp }}</span>
<span v-if="!isFolder" class="item-size">{{ item.data.attributes.filesize }}, {{ timeStamp }}</span>
<!--Folder item counts-->
<span v-if="isFolder" class="item-length"> {{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }} </span>
<span v-if="isFolder" class="item-length"> {{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }} </span>
</div>
</div>
@@ -95,41 +95,41 @@ export default {
'entries'
]),
isClicked() {
return !this.disableHighlight && this.clipboard.some(element => element.id === this.item.id)
return !this.disableHighlight && this.clipboard.some(element => element.data.id === this.item.data.id)
},
isFolder() {
return this.item.type === 'folder'
return this.item.data.type === 'folder'
},
isFile() {
return this.item.type !== 'folder' && this.item.type !== 'image'
return this.item.data.type === 'file'
},
isImage() {
return this.item.type === 'image'
return this.item.data.type === 'image'
},
isPdf() {
return this.item.mimetype === 'pdf'
return this.item.data.attributes.mimetype === 'pdf'
},
isVideo() {
return this.item.type === 'video'
return this.item.data.type === 'video'
},
isAudio() {
let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
return mimetypes.includes(this.item.mimetype) && this.item.type === 'audio'
return mimetypes.includes(this.item.data.attributes.mimetype) && this.item.data.type === 'audio'
},
canEditName() {
return !this.$isMobile() && !this.$isThisRoute(this.$route, ['Trash']) && !this.$checkPermission('visitor') && !(this.sharedDetail && this.sharedDetail.type === 'file')
return !this.$isMobile() && !this.$isThisRoute(this.$route, ['Trash']) && !this.$checkPermission('visitor') && !(this.sharedDetail && this.sharedDetail.attributes.type === 'file')
},
canDrag() {
return !this.isDeleted && this.$checkPermission(['master', 'editor'])
},
timeStamp() {
return this.item.deleted_at ? this.$t('item_thumbnail.deleted_at', {time: this.item.deleted_at}) : this.item.created_at
return this.item.data.attributes.deleted_at ? this.$t('item_thumbnail.deleted_at', {time: this.item.data.attributes.deleted_at}) : this.item.data.attributes.created_at
},
folderItems() {
return this.item.deleted_at ? this.item.trashed_items : this.item.items
return this.item.data.attributes.deleted_at ? this.item.data.attributes.trashed_items : this.item.data.attributes.items
},
isDeleted() {
return this.item.deleted_at ? true : false
return this.item.data.attributes.deleted_at
}
},
filters: {
@@ -182,7 +182,7 @@ export default {
if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
// Click + Ctrl
if (this.clipboard.some(item => item.id === this.item.id)) {
if (this.clipboard.some(item => item.data.id === this.item.data.id)) {
this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item)
} else {
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
@@ -223,13 +223,13 @@ export default {
let route = this.$router.currentRoute.name
if (route === 'Public') {
this.$router.push({name: 'Public', params: {token: this.$route.params.token, id: this.item.id}})
this.$router.push({name: 'Public', params: {token: this.$route.params.token, id: this.item.data.id}})
} else if (route === 'Trash') {
this.$router.push({name: 'Trash', params: {id: this.item.id}})
this.$router.push({name: 'Trash', params: {id: this.item.data.id}})
} else if (route === 'Files') {
this.$router.push({name: 'Files', params: {id: this.item.id}})
this.$router.push({name: 'Files', params: {id: this.item.data.id}})
} else if (route === 'TeamFolders') {
this.$router.push({name: 'TeamFolders', params: {id: this.item.id}})
this.$router.push({name: 'TeamFolders', params: {id: this.item.data.id}})
}
} else {
@@ -244,7 +244,7 @@ export default {
}
if (this.mobileMultiSelect && this.$isMobile()) {
if (this.clipboard.some(item => item.id === this.item.id)) {
if (this.clipboard.some(item => item.data.id === this.item.data.id)) {
this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item)
} else {
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
@@ -256,7 +256,7 @@ export default {
events.$emit('file-preview:show')
} else if (this.isFile || !this.isFolder && !this.isVideo && !this.isAudio && !this.isImage) {
this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
this.$downloadFile(this.item.data.attributes.file_url, this.item.data.attributes.name + '.' + this.item.data.attributes.mimetype)
} else if (this.isFolder) {
@@ -266,13 +266,13 @@ export default {
let route = this.$router.currentRoute.name
if (route === 'Public') {
this.$router.push({name: 'Public', params: {token: this.$route.params.token, id: this.item.id}})
this.$router.push({name: 'Public', params: {token: this.$route.params.token, id: this.item.data.id}})
} else if (route === 'Trash') {
this.$router.push({name: 'Trash', params: {id: this.item.id}})
this.$router.push({name: 'Trash', params: {id: this.item.data.id}})
} else if (route === 'Files') {
this.$router.push({name: 'Files', params: {id: this.item.id}})
this.$router.push({name: 'Files', params: {id: this.item.data.id}})
} else if (route === 'TeamFolders') {
this.$router.push({name: 'TeamFolders', params: {id: this.item.id}})
this.$router.push({name: 'TeamFolders', params: {id: this.item.data.id}})
}
}
},
@@ -281,37 +281,37 @@ export default {
if (e.target.innerText.trim() === '') return
this.$store.dispatch('renameItem', {
id: this.item.id,
type: this.item.type,
id: this.item.data.id,
type: this.item.data.type,
name: e.target.innerText
})
}, 300)
},
created() {
this.itemName = this.item.name
this.itemName = this.item.data.attributes.name
events.$on('newFolder:focus', (id) => {
if (this.item.id === id && !this.$isMobile()) {
if (this.item.data.id === id && !this.$isMobile()) {
this.$refs[id].focus()
document.execCommand('selectAll')
}
})
events.$on('mobileSelecting:start', () => {
events.$on('mobile-select:start', () => {
this.mobileMultiSelect = true
this.$store.commit('CLIPBOARD_CLEAR')
})
events.$on('mobileSelecting:stop', () => {
events.$on('mobile-select:stop', () => {
this.mobileMultiSelect = false
this.$store.commit('CLIPBOARD_CLEAR')
})
// Change item name
events.$on('change:name', item => {
if (this.item.id === item.id) this.itemName = item.name
if (this.item.data.id === item.data.id) this.itemName = item.data.attributes.name
})
}
}

8
resources/js/components/FilesView/FolderIcon.vue
View File

@@ -7,7 +7,7 @@
/>
<FontAwesomeIcon
v-if="!emoji"
:class="[{'is-deleted':isDeleted},{'is-team':item.team_folder},{'default-color': ! color && ! isDeleted}, 'folder-icon' ]"
:class="[{'is-deleted':isDeleted},{'is-team':item.data.attributes.isTeamFolder},{'default-color': ! color && ! isDeleted}, 'folder-icon' ]"
:style="{fill: color}"
icon="folder"
/>
@@ -29,7 +29,7 @@
},
computed: {
isDeleted() {
return this.item.deleted_at ? true : false
return this.item.data.attributes.deleted_at ? true : false
},
emoji() {
// Return emoji if is changed from rename popup
@@ -37,7 +37,7 @@
return this.folderIcon.emoji ? this.folderIcon.emoji : false
// Return emoji if is already set
return this.item.emoji ? this.item.emoji : false
return this.item.data.attributes.emoji ? this.item.data.attributes.emoji : false
},
color() {
// Return color if is changed from rename popup
@@ -45,7 +45,7 @@
return this.folderIcon.color ? this.folderIcon.color : false
// Return color if is already set
return this.item.color ? this.item.color : false
return this.item.data.attributes.color ? this.item.data.attributes.color : false
}
}
}

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

@@ -89,7 +89,7 @@ export default {
name: 'ImageMetaData',
computed: {
clipboard() {
return this.$store.getters.clipboard[0]
return this.$store.getters.clipboard[0].data.relationships
},
},
methods: {

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

@@ -22,9 +22,9 @@
<FilePreviewDetail />
<TitlePreview
:icon="clipboard[0].type"
:title="clipboard[0].name"
:subtitle="clipboard[0].mimetype"
:icon="clipboard[0].data.type"
:title="clipboard[0].data.attributes.name"
:subtitle="clipboard[0].data.attributes.mimetype"
/>
</div>
@@ -33,22 +33,22 @@
<!--Filesize-->
<ListInfoItem
v-if="singleFile.filesize"
v-if="singleFile.data.attributes.filesize"
:title="$t('file_detail.size')"
:content="singleFile.filesize"
:content="singleFile.data.attributes.filesize"
/>
<!--Participant-->
<ListInfoItem
<!-- <ListInfoItem
v-if="$checkPermission(['master']) && singleFile.author !== 'user'"
:title="$t('file_detail.author')"
:content="$t('file_detail.author_participant')"
/>
/>-->
<!--Created At-->
<ListInfoItem
:title="$t('file_detail.created_at')"
:content="singleFile.created_at"
:content="singleFile.data.attributes.created_at"
/>
<!--Location-->
@@ -64,7 +64,7 @@
<!--Shared-->
<ListInfoItem
v-if="$checkPermission('master') && singleFile.shared"
v-if="$checkPermission('master') && singleFile.data.relationships.shared"
:title="$t('file_detail.shared')"
>
<div @click="openShareOptions" class="action-button">
@@ -130,14 +130,14 @@
return this.clipboard[0]
},
canShowMetaData() {
return this.clipboard[0].metadata && this.clipboard[0].metadata.ExifImageWidth
return this.clipboard[0].data.attributes.metadata && this.clipboard[0].data.attributes.metadata.ExifImageWidth
},
isLocked() {
return this.clipboard[0].shared.is_protected
return this.clipboard[0].data.relationships.shared.protected
},
sharedInfo() {
let title = this.permissionOptions.find(option => {
return option.value === this.clipboard[0].shared.permission
return option.value === this.clipboard[0].data.relationships.shared.permission
})
return title ? this.$t(title.label) : this.$t('shared.can_download')

6
resources/js/components/FilesView/MobileMultiSelectToolbar.vue
View File

@@ -32,12 +32,12 @@ export default {
},
methods: {
closeSelecting() {
events.$emit('mobileSelecting:stop')
events.$emit('mobile-select:stop')
},
},
created() {
events.$on('mobileSelecting:start', () => this.mobileMultiSelect = true)
events.$on('mobileSelecting:stop', () => this.mobileMultiSelect = false)
events.$on('mobile-select:start', () => this.mobileMultiSelect = true)
events.$on('mobile-select:stop', () => this.mobileMultiSelect = false)
}
}
</script>

4
resources/js/components/FilesView/MobileToolbar.vue
View File

@@ -43,7 +43,7 @@
]),
directoryName() {
if (this.currentFolder) {
return this.currentFolder.name
return this.currentFolder.data.attributes.name
} else {
return {
'RecentUploads': this.$t('Recent'),
@@ -61,7 +61,7 @@
methods: {
showMobileNavigation() {
events.$emit('mobile-menu:show', 'user-navigation')
events.$emit('mobileSelecting:stop')
events.$emit('mobile-select:stop')
},
goBack() {
if (this.isLoadedFolder) this.$router.back()