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

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