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

- 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

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')
}
},
}