nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-19 16:32: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

2
resources/js/App.vue
View File

@@ -113,7 +113,7 @@ export default {
})
},
mounted() {
if (this.$isWIndows()) {
if (this.$isWindows()) {
document.body.classList.add('windows')
}

16
resources/js/components/FilePreview/FilePreviewMedia.vue
View File

@@ -63,16 +63,16 @@ export default {
: this.files[Math.abs(this.currentIndex) % this.files.length]
},
isPDF() {
return this.currentFile.mimetype === 'pdf'
return this.currentFile.data.attributes.mimetype === 'pdf'
},
isVideo() {
return this.currentFile.type === 'video'
return this.currentFile.data.type === 'video'
},
isAudio() {
return this.currentFile.type === 'audio'
return this.currentFile.data.type === 'audio'
},
isImage() {
return this.currentFile.type === 'image'
return this.currentFile.data.type === 'image'
}
},
data() {
@@ -113,20 +113,20 @@ export default {
this.entries.map(element => {
if (requestedFile.mimetype === 'pdf') {
if (requestedFile.data.attributes.mimetype === 'pdf') {
if (element.mimetype === 'pdf')
if (element.data.attributes.mimetype === 'pdf')
this.files.push(element)
} else {
if (element.type === requestedFile.type)
if (element.data.type === requestedFile.data.type)
this.files.push(element)
}
})
this.files.forEach((element, index) => {
if (element.id === this.clipboard[0].id) {
if (element.data.id === this.clipboard[0].data.id) {
this.currentIndex = index
}
})

22
resources/js/components/FilePreview/FilePreviewToolbar.vue
View File

@@ -3,7 +3,7 @@
<div class="name-wrapper">
<x-icon @click="closeFullPreview" size="22" class="icon-close hover-text-theme" />
<div class="name-count-wrapper">
<p class="title">{{ currentFile.name }}</p>
<p class="title">{{ currentFile.data.attributes.name }}</p>
<span v-if="! fastPreview" class="file-count"> ({{ showingImageIndex + ' ' + $t('pronouns.of') + ' ' + files.length }}) </span>
</div>
<PopoverWrapper>
@@ -25,7 +25,7 @@
</div>
<div class="created-at-wrapper">
<p>{{ currentFile.filesize }}, {{ currentFile.created_at }}</p>
<p>{{ currentFile.data.attributes.filesize }}, {{ currentFile.data.attributes.created_at }}</p>
</div>
<div class="navigation-icons">
@@ -74,29 +74,29 @@
return this.fastPreview ? this.fastPreview : this.clipboard[0]
},
sharingTitle() {
return this.currentFile.shared
return this.currentFile.data.relationships.shared
? this.$t('context_menu.share_edit')
: this.$t('context_menu.share')
},
isImage() {
return this.currentFile.type === 'image'
return this.currentFile.data.type === 'image'
},
isPdf() {
return this.currentFile.mimetype === 'pdf'
return this.currentFile.data.attributes.mimetype === 'pdf'
},
files() {
let files = []
this.entries.map(element => {
if (this.currentFile.mimetype === 'pdf') {
if (this.currentFile.data.attributes.mimetype === 'pdf') {
if (element.mimetype === 'pdf')
if (element.data.attributes.mimetype === 'pdf')
files.push(element)
} else {
if (element.type === this.currentFile.type)
if (element.data.type === this.currentFile.data.type)
files.push(element)
}
})
@@ -107,7 +107,7 @@
let activeIndex = undefined
this.files.forEach((element, index) => {
if (element.id === this.currentFile.id) {
if (element.data.id === this.currentFile.data.id) {
activeIndex = index + 1
}
})
@@ -142,8 +142,8 @@
},
downloadItem() {
this.$downloadFile(
this.currentFile.file_url,
this.currentFile.name + '.' + this.currentFile.mimetype
this.currentFile.data.attributes.file_url,
this.currentFile.data.attributes.name + '.' + this.currentFile.data.attributes.mimetype
)
},
closeFullPreview() {

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

@@ -2,7 +2,7 @@
<audio
:class="{'file-shadow': ! $isMobile() }"
class="file audio"
:src="file.file_url"
:src="file.data.attributes.file_url"
controls>
</audio>
</template>

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

@@ -3,7 +3,7 @@
id="printable-file"
class="file"
:class="{'file-shadow': ! $isMobile() }"
:src="file.file_url"
:src="file.data.attributes.file_url"
/>
</template>

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

@@ -1,7 +1,7 @@
<template>
<div class="video-wrapper">
<video
:src="file.file_url"
:src="file.data.attributes.file_url"
class="video"
:class="{'file-shadow': !$isMobile() }"
controlsList="nodownload"

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()

4
resources/js/components/Others/Forms/CopyShareLink.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="inline-wrapper icon-append copy-input" :class="size">
<input ref="sel" :value="item.shared.link" id="link-input" type="text" class="input-text" readonly>
<input ref="sel" :value="item.data.relationships.shared.link" id="link-input" type="text" class="input-text" readonly>
<div class="multi-icon">
<div @click="copyUrl" class="icon-item group hover-bg-theme-100">
<link-icon v-if="! isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
@@ -69,7 +69,7 @@ export default {
},
copyIframe() {
// generate iframe
this.iframeCode = `<iframe src="${this.item.shared.link}" width="790" height="400" allowfullscreen frameborder="0"></iframe>`
this.iframeCode = `<iframe src="${this.item.data.relationships.shared.link}" width="790" height="400" allowfullscreen frameborder="0"></iframe>`
let copyText = this.$refs.iframe

8
resources/js/components/Others/MoveItemPopup.vue
View File

@@ -19,7 +19,7 @@
:subtitle="this.clipboard.length + ' ' + $tc('file_detail.items', this.clipboard.length)"
v-if="clipboard.length > 1 && !isSelectedItem" />
<TreeMenu :disabled-by-id="pickedItem" :depth="1" :nodes="items" v-for="items in navigation" :key="items.id" />
<TreeMenu :disabled-by-id="pickedItem" :depth="1" :nodes="items" v-for="items in navigation" :key="items.data.id" />
</div>
</PopupContent>
@@ -88,7 +88,7 @@
if (!this.selectedFolder) return
// Prevent to move items to the same parent
if (isArray(this.selectedFolder) && this.clipboard.find(item => item.parent_id === this.selectedFolder.id)) return
if (isArray(this.selectedFolder) && this.clipboard.find(item => item.parent_id === this.selectedFolder.data.id)) return
// Move item
if (!this.isSelectedItem) {
@@ -104,13 +104,13 @@
// If is mobile, close the selecting mod after done the move action
if (this.$isMobile())
events.$emit('mobileSelecting:stop')
events.$emit('mobile-select:stop')
},
},
mounted() {
events.$on('pick-folder', folder => {
if (folder.id === this.pickedItem.id) {
if (folder.data.id === this.pickedItem.data.id) {
this.selectedFolder = undefined
} else if (!folder.id && folder.location === 'base') {

16
resources/js/components/Others/RenameItemPopup.vue
View File

@@ -16,8 +16,8 @@
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Name" rules="required" v-slot="{ errors }">
<label class="input-label">{{ $t('popup_rename.label') }}:</label>
<div class="input">
<input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" class="focus-border-theme" :placeholder="$t('popup_rename.placeholder')">
<div @click="pickedItem.name = ''" class="close-icon-wrapper">
<input v-model="pickedItem.data.attributes.name" :class="{'is-error': errors[0]}" ref="input" type="text" class="focus-border-theme" :placeholder="$t('popup_rename.placeholder')">
<div @click="pickedItem.data.attributes.name = ''" class="close-icon-wrapper">
<x-icon class="close-icon hover-text-theme" size="14" />
</div>
</div>
@@ -26,7 +26,7 @@
<SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem" />
<ActionButton v-if="pickedItem.type === 'folder'" @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">
<ActionButton v-if="pickedItem.data.type === 'folder'" @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">
{{ moreOptionsTitle }}
</ActionButton>
</ValidationObserver>
@@ -76,7 +76,7 @@ export default {
},
computed: {
itemTypeTitle() {
return this.pickedItem && this.pickedItem.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
return this.pickedItem && this.pickedItem.data.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
},
moreOptionsTitle() {
return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_folder_icon_open')
@@ -94,12 +94,12 @@ export default {
this.isMoreOptions = !this.isMoreOptions
},
changeName() {
if (this.pickedItem.name && this.pickedItem.name !== '') {
if (this.pickedItem.data.attributes.name && this.pickedItem.data.attributes.name !== '') {
let item = {
id: this.pickedItem.id,
type: this.pickedItem.type,
name: this.pickedItem.name,
id: this.pickedItem.data.id,
type: this.pickedItem.data.type,
name: this.pickedItem.data.attributes.name,
}
if (this.folderIcon && this.folderIcon.emoji)

8
resources/js/components/Others/ShareCreatePopup.vue
View File

@@ -149,10 +149,10 @@ export default {
'expirationList'
]),
itemTypeTitle() {
return this.pickedItem && this.pickedItem.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
return this.pickedItem && this.pickedItem.data.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
},
isFolder() {
return this.pickedItem && this.pickedItem.type === 'folder'
return this.pickedItem && this.pickedItem.data.type === 'folder'
},
submitButtonText() {
return this.isGeneratedShared ? this.$t('shared_form.button_done') : this.$t('shared_form.button_generate')
@@ -235,8 +235,8 @@ export default {
// Store picked item
this.pickedItem = args.item
this.shareOptions.type = args.item.type
this.shareOptions.id = args.item.id
this.shareOptions.type = args.item.data.type
this.shareOptions.id = args.item.data.id
})
// Close popup

18
resources/js/components/Others/ShareEditPopup.vue
View File

@@ -4,7 +4,7 @@
<PopupHeader :title="$t('popup_share_edit.title')" icon="share" />
<!--Content-->
<PopupContent v-if="pickedItem && pickedItem.shared">
<PopupContent v-if="pickedItem && pickedItem.data.relationships.shared">
<!--Item Thumbnail-->
<ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata"/>
@@ -44,7 +44,7 @@
</div>
</div>
<ActionButton v-if="(pickedItem.shared.is_protected && canChangePassword) && shareOptions.isProtected" @click.native="changePassword" class="change-password">
<ActionButton v-if="(pickedItem.data.relationships.shared.protected && canChangePassword) && shareOptions.isProtected" @click.native="changePassword" class="change-password">
{{ $t('popup_share_edit.change_pass') }}
</ActionButton>
@@ -147,7 +147,7 @@
'user',
]),
isFolder() {
return this.pickedItem && this.pickedItem.type === 'folder'
return this.pickedItem && this.pickedItem.data.type === 'folder'
},
destroyButtonText() {
if(! this.sendToRecipientsMenu)
@@ -315,11 +315,11 @@
// Store shared options
this.shareOptions = {
id: args.item.shared.id,
token: args.item.shared.token,
expiration: args.item.shared.expire_in,
isProtected: args.item.shared.is_protected,
permission: args.item.shared.permission,
id: args.item.data.relationships.shared.id,
token: args.item.data.relationships.shared.token,
expiration: args.item.data.relationships.shared.expire_in,
isProtected: args.item.data.relationships.shared.protected,
permission: args.item.data.relationships.shared.permission,
password: undefined,
}
@@ -327,7 +327,7 @@
this.sendToRecipientsMenu = true
this.isEmailSended = false
this.canChangePassword = args.item.shared.is_protected
this.canChangePassword = args.item.data.relationships.shared.is_protected
})
events.$on('popup:close', () => {

20
resources/js/components/Others/ThumbnailItem.vue
View File

@@ -5,13 +5,13 @@
<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">{{ item.mimetype }}</span>
<span v-if="isFile || (isImage && !item.data.attributes.thumbnail) " class="file-icon-text text-theme">{{ item.data.attributes.mimetype }}</span>
<!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" :class="{'file-icon-mobile' : $isMobile()}" icon="file"/>
<FontAwesomeIcon v-if="isFile || (isImage && !item.data.attributes.thumbnail)" class="file-icon" :class="{'file-icon-mobile' : $isMobile()}" icon="file"/>
<!--Image thumbnail-->
<img v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
<img 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" :folder-icon="setFolderIcon" location="thumbnail-item" class="folder svg-color-theme" />
@@ -21,17 +21,17 @@
<div class="item-name">
<!--Name-->
<span class="name">{{ item.name }}</span>
<span class="name">{{ item.data.attributes.name }}</span>
<div v-if="info === 'location'">
<span class="subtitle">{{ $t('item_thumbnail.original_location') }}: {{ itemLocation }}</span>
</div>
<div v-if="info === 'metadata'">
<span v-if="! isFolder" class="item-size">{{ item.filesize }}, {{ item.created_at }}</span>
<span v-if="! isFolder" class="item-size">{{ item.data.attributes.filesize }}, {{ item.data.attributes.created_at }}</span>
<span v-if="isFolder" class="item-length">
{{ item.items == 0 ? $t('folder.empty') : $tc('folder.item_counts', item.items) }}, {{ item.created_at }}
{{ item.data.attributes.items === 0 ? $t('folder.empty') : $tc('folder.item_counts', item.data.attributes.items) }}, {{ item.data.attributes.created_at }}
</span>
</div>
@@ -50,16 +50,16 @@
computed: {
...mapGetters(['currentFolder']),
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 !== 'folder' && this.item.data.type !== 'image'
},
isImage() {
return this.item.type === 'image'
return this.item.data.type === 'image'
},
itemLocation() {
return this.item.parent ? this.item.parent.name : this.$t('locations.home')
return this.item.data.attributes.parent ? this.item.data.attributes.parent.name : this.$t('locations.home')
}
},
}

8
resources/js/helpers/functionHelpers.js vendored
View File

@@ -89,14 +89,14 @@ const FunctionHelpers = {
Vue.prototype.$uploadFiles = async function (files) {
if (files.length == 0) return
if (files.length === 0) return
if (!this.$checkFileMimetype(files) || !this.$checkUploadLimit(files)) return
// Push items to file queue
[...files].map(item => {
this.$store.commit('ADD_FILES_TO_QUEUE', {
folder_id: store.getters.currentFolder.id ? store.getters.currentFolder.id : '',
folder_id: store.getters.currentFolder.data.id ? store.getters.currentFolder.data.id : '',
file: item,
})
});
@@ -275,7 +275,7 @@ const FunctionHelpers = {
}
// Detect windows
Vue.prototype.$isWIndows = function () {
Vue.prototype.$isWindows = function () {
return navigator.userAgent.indexOf('Windows') != -1
}
@@ -337,7 +337,7 @@ const FunctionHelpers = {
}
Vue.prototype.$enableMultiSelectMode = function () {
events.$emit('mobileSelecting:start')
events.$emit('mobile-select:start')
}
Vue.prototype.$showViewOptions = function () {

6
resources/js/helpers/itemHelpers.js vendored
View File

@@ -27,10 +27,10 @@ const itemHelpers = {
Vue.prototype.$downloadSelection = function (item) {
let clipboard = this.$store.getters.clipboard
if (clipboard.length > 1 || (clipboard.length === 1 && clipboard[0].type === 'folder'))
if (clipboard.length > 1 || (clipboard.length === 1 && clipboard[0].data.type === 'folder'))
this.$store.dispatch('downloadZip')
else {
Vue.prototype.$downloadFile(item.file_url, item.name + '.' + item.mimetype)
Vue.prototype.$downloadFile(item.data.attributes.file_url, item.data.attributes.name + '.' + item.data.attributes.mimetype)
}
}
@@ -76,7 +76,7 @@ const itemHelpers = {
}
Vue.prototype.$shareFileOrFolder = function (entry) {
let event = entry.shared
let event = entry.data.relationships.shared
? 'share-edit'
: 'share-create'

29
resources/js/store/modules/fileBrowser.js vendored
View File

@@ -20,8 +20,11 @@ const actions = {
axios
.get(`${getters.api}/browse/folders/${id}/${getters.sorting.URI}`)
.then(response => {
commit('LOADING_STATE', {loading: false, data: response.data.content})
commit('SET_CURRENT_FOLDER', response.data.folder)
let folders = response.data.folders.data
let files = response.data.files.data
commit('LOADING_STATE', {loading: false, data: folders.concat(files)})
commit('SET_CURRENT_FOLDER', response.data.root)
events.$emit('scrollTop')
})
@@ -153,28 +156,28 @@ const mutations = {
},
FLUSH_SHARED(state, id) {
state.entries.find(item => {
if (item.id === id) item.shared = undefined
if (item.data.id === id) item.data.relationships.shared = undefined
})
},
CHANGE_ITEM_NAME(state, updatedFile) {
// Rename filename in clipboard
if (state.clipboard && state.clipboard.id === updatedFile.id) {
if (state.clipboard && state.clipboard.data.id === updatedFile.data.id) {
state.clipboard = updatedFile
}
// Rename item name in data view
state.entries.find(item => {
if (item.id === updatedFile.id) {
item.name = updatedFile.name
item.color = updatedFile.color ? updatedFile.color : null
item.emoji = updatedFile.emoji ? updatedFile.emoji : null
if (item.data.id === updatedFile.data.id) {
item.data.attributes.name = updatedFile.data.attributes.name
item.data.attributes.color = updatedFile.data.attributes.color ? updatedFile.data.attributes.color : null
item.data.attributes.emoji = updatedFile.data.attributes.emoji ? updatedFile.data.attributes.emoji : null
}
})
},
UPDATE_SHARED_ITEM(state, data) {
state.entries.find(item => {
if (item.id === data.item_id) item.shared = data
if (item.data.id === data.item_id) item.shared = data
})
},
ADD_NEW_FOLDER(state, folder) {
@@ -184,21 +187,21 @@ const mutations = {
state.entries = state.entries.concat(items)
},
REMOVE_ITEM(state, id) {
state.entries = state.entries.filter(el => el.id !== id)
state.entries = state.entries.filter(el => el.data.id !== id)
},
INCREASE_FOLDER_ITEM(state, id) {
state.entries.map(el => {
if (el.id && el.id === id) el.items++
if (el.data.id && el.data.id === id) el.items++
})
},
REMOVE_ITEM_FROM_CLIPBOARD(state, item) {
state.clipboard = state.clipboard.filter(element => element.id !== item.id)
state.clipboard = state.clipboard.filter(element => element.data.id !== item.data.id)
},
ADD_ALL_ITEMS_TO_CLIPBOARD(state) {
state.clipboard = state.entries
},
ADD_ITEM_TO_CLIPBOARD(state, item) {
let selectedItem = state.entries.find(el => el.id === item.id)
let selectedItem = state.entries.find(el => el.data.id === item.data.id)
if (state.clipboard.includes(selectedItem)) return

41
resources/js/store/modules/fileFunctions.js vendored
View File

@@ -1,7 +1,6 @@
import i18n from '/resources/js/i18n/index'
import router from '/resources/js/router'
import {events} from '/resources/js/bus'
import {last} from 'lodash'
import axios from 'axios'
import Vue from 'vue'
@@ -20,11 +19,11 @@ const actions = {
// get ids of selected files
getters.clipboard.forEach(file => {
let type = file.type === 'folder'
let type = file.data.type === 'folder'
? 'folder'
: 'file'
files.push(file.id + '|' + type)
files.push(file.data.id + '|' + type)
})
let items = files.join(',')
@@ -46,8 +45,8 @@ const actions = {
items = getters.clipboard
items.forEach(data => itemsToMove.push({
'id': data.id,
'type': data.type
'id': data.data.id,
'type': data.data.type
}))
// Remove file preview
@@ -61,7 +60,7 @@ const actions = {
axios
.post(route, {
to_id: to_item.id ? to_item.id : null,
to_id: to_item.data.id ? to_item.data.id : null,
items: itemsToMove
})
.then(() => {
@@ -85,7 +84,7 @@ const actions = {
: '/api/create-folder'
let parent_id = getters.currentFolder
? getters.currentFolder.id
? getters.currentFolder.data.id
: undefined
axios
@@ -178,7 +177,7 @@ const actions = {
commit('SHIFT_FROM_FILE_QUEUE')
// Check if user is in uploading folder, if yes, than show new file
if (response.data.folder_id === getters.currentFolder.id) {
if (response.data.folder_id === getters.currentFolder.data.id) {
// Add uploaded item into view
commit('ADD_NEW_ITEMS', response.data)
@@ -253,8 +252,8 @@ const actions = {
restoreToHome = true
items.forEach(data => itemToRestore.push({
type: data.type,
id: data.id
type: data.data.type,
id: data.data.id
}))
// Remove file preview
@@ -282,28 +281,28 @@ const actions = {
items.forEach(data => {
itemsToDelete.push({
force_delete: !!data.deleted_at,
type: data.type,
id: data.id
force_delete: !!data.data.attributes.deleted_at,
type: data.data.type,
id: data.data.id
})
// Remove file
commit('REMOVE_ITEM', data.id)
commit('REMOVE_ITEM', data.data.id)
// Remove item from sidebar
if (getters.permission === 'master') {
if (data.type === 'folder')
if (data.data.type === 'folder')
commit('REMOVE_ITEM_FROM_FAVOURITES', data)
}
// Remove file
commit('REMOVE_ITEM', data.id)
commit('REMOVE_ITEM', data.data.id)
// Remove item from sidebar
if (getters.permission === 'master') {
if (data.type === 'folder')
if (data.data.type === 'folder')
commit('REMOVE_ITEM_FROM_FAVOURITES', data)
}
})
@@ -324,12 +323,12 @@ const actions = {
})
.then(() => {
/*itemsToDelete.forEach(data => {
itemsToDelete.forEach(data => {
// If is folder, update app data
if (data.type === 'folder') {
if (data.data.type === 'folder') {
if (data.id === getters.currentFolder.id) {
if (data.data.id === getters.currentFolder.data.id) {
if (getters.currentFolder.location === 'public') {
dispatch('browseShared')
@@ -338,7 +337,7 @@ const actions = {
}
}
}
})*/
})
if (Vue.prototype.$isThisRoute(router.currentRoute, ['Public']))
dispatch('getFolderTree')

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

@@ -123,9 +123,9 @@ const mutations = {
ADD_TO_FAVOURITES(state, folder) {
folder.forEach(item => {
state.user.data.relationships.favourites.data.attributes.folders.push({
id: item.id,
name: item.name,
type: item.type,
id: item.data.id,
name: item.data.attributes.name,
type: item.data.type,
})
})
},

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

@@ -159,10 +159,10 @@
return this.item && this.item.type === 'folder'
},
isInFavourites() {
return this.favourites.find((el) => el.id === this.item.id)
return this.favourites.find((el) => el.data.id === this.item.data.id)
},
hasFile() {
return this.clipboard.find(item => item.type !== 'folder')
return this.clipboard.find(item => item.data.type !== 'folder')
},
favourites() {
return this.user.data.relationships.favourites.data.attributes.folders
@@ -187,7 +187,7 @@
// Check if folder is in favourites and then add/remove from favourites
if (
this.favourites &&
!this.favourites.find(el => el.id === this.item.id)
!this.favourites.find(el => el.data.id === this.item.data.id)
) {
// Add to favourite folder that is not selected
if (!this.clipboard.includes(this.item)) {