nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 02:50:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

frontend/backend update

Browse Source
This commit is contained in:
carodej
2020-04-23 12:40:22 +02:00
parent 8740cc7685
commit 8cbc58f775
46 changed files with 1838 additions and 861 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/VueFileManagerComponents/FilesView/ContextMenu.vue
+31 -7
View File
@@ -7,7 +7,7 @@
ref="contextmenu"
>
<!--ContextMenu for trash location-->
<ul v-if="$isTrashLocation() && $checkPermission('master')" class="menu-options" ref="list">
<ul v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="menu-options" ref="list">
<li class="menu-option" @click="removeItem" v-if="item">
{{ $t('context_menu.delete') }}
</li>
@@ -26,7 +26,26 @@
</ul>
<!--ContextMenu for Base location with MASTER permission-->
<ul v-if="$isBaseLocation() && $checkPermission('master')" class="menu-options" ref="list">
<ul v-if="$isThisLocation(['shared']) && $checkPermission('master')" class="menu-options" ref="list">
<li class="menu-option" @click="addToFavourites" v-if="item && isFolder">
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
</li>
<li class="menu-option" @click="removeItem" v-if="item">
{{ $t('context_menu.delete') }}
</li>
<li class="menu-option" @click="shareItem" v-if="item">
{{ item.shared ? 'Edit Sharing' : $t('context_menu.share') }}
</li>
<li class="menu-option" @click="ItemDetail" v-if="item">
{{ $t('context_menu.detail') }}
</li>
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
{{ $t('context_menu.download') }}
</li>
</ul>
<!--ContextMenu for Base location with MASTER permission-->
<ul v-if="$isThisLocation(['base']) && $checkPermission('master')" class="menu-options" ref="list">
<li class="menu-option" @click="addToFavourites" v-if="item && isFolder">
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
</li>
@@ -40,7 +59,7 @@
{{ $t('context_menu.move') }}
</li>
<li class="menu-option" @click="shareItem" v-if="item">
{{ $t('context_menu.share') }}
{{ item.shared ? 'Edit Sharing' : $t('context_menu.share') }}
</li>
<li class="menu-option" @click="ItemDetail" v-if="item">
{{ $t('context_menu.detail') }}
@@ -51,7 +70,7 @@
</ul>
<!--ContextMenu for Base location with EDITOR permission-->
<ul v-if="$isBaseLocation() && $checkPermission('editor')" class="menu-options" ref="list">
<ul v-if="$isThisLocation(['base']) && $checkPermission('editor')" class="menu-options" ref="list">
<li class="menu-option" @click="createFolder">
{{ $t('context_menu.create_folder') }}
</li>
@@ -70,7 +89,7 @@
</ul>
<!--ContextMenu for Base location with VISITOR permission-->
<ul v-if="$isBaseLocation() && $checkPermission('visitor')" class="menu-options" ref="list">
<ul v-if="$isThisLocation(['base']) && $checkPermission('visitor')" class="menu-options" ref="list">
<li class="menu-option" @click="ItemDetail" v-if="item">
{{ $t('context_menu.detail') }}
</li>
@@ -116,8 +135,13 @@
events.$emit('popup:open', {name: 'move', item: this.item})
},
shareItem() {
// Open share item popup
events.$emit('popup:open', {name: 'share-create', item: this.item})
if (this.item.shared) {
// Open share item popup
events.$emit('popup:open', {name: 'share-edit', item: this.item})
} else {
// Open share item popup
events.$emit('popup:open', {name: 'share-create', item: this.item})
}
},
addToFavourites() {
// Check if folder is in favourites and then add/remove from favourites
resources/js/components/VueFileManagerComponents/FilesView/DesktopToolbar.vue
+6 -2
View File
@@ -118,7 +118,12 @@
this.$store.commit('FLUSH_BROWSER_HISTORY')
} else {
this.$store.dispatch('goToFolder', [this.previousFolder, true])
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.previousFolder, true])
} else {
this.$store.dispatch('goToFolder', [this.previousFolder, true])
}
}
},
deleteItems() {
@@ -149,7 +154,6 @@
z-index: 2;
> div {
width: 100%;
flex-grow: 1;
align-self: center;
white-space: nowrap;
resources/js/components/VueFileManagerComponents/FilesView/EmptyPage.vue
+19 -10
View File
@@ -1,20 +1,32 @@
<template>
<div class="empty-page" v-if="isLoading || isEmpty">
<div class="empty-state">
<div class="text-content" v-if="isEmpty && !isLoading">
<!--Shared empty message-->
<div class="text-content" v-if="$isThisLocation(['shared']) && ! isLoading">
<h1 class="title">You Haven't Shared Anything Yet</h1>
</div>
<!--Trash empty message-->
<div class="text-content" v-if="$isThisLocation(['trash', 'trash-root']) && ! isLoading">
<h1 class="title">{{ $t('empty_page.title') }}</h1>
<p v-if="! isTrash" class="description">
{{ $t('empty_page.description') }}
</p>
</div>
<!--Base file browser empty message-->
<div class="text-content" v-if="$isThisLocation(['base', 'public']) && !isLoading">
<h1 class="title">{{ $t('empty_page.title') }}</h1>
<p v-if="$checkPermission(['master', 'editor'])" class="description">{{ $t('empty_page.description') }}</p>
<ButtonUpload
v-if="! isTrash"
v-if="$checkPermission(['master', 'editor'])"
@input.native="$uploadFiles(files)"
v-model="files"
button-style="theme"
>{{ $t('empty_page.call_to_action') }}
</ButtonUpload
>
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</div>
<!--Spinner-->
<div class="text-content" v-if="isLoading">
<Spinner/>
</div>
@@ -38,9 +50,6 @@
...mapGetters(['data', 'isLoading', 'currentFolder']),
isEmpty() {
return this.data.length == 0
},
isTrash() {
return this.currentFolder.location === 'trash' || this.currentFolder.location === 'trash-root'
}
},
data() {
resources/js/components/VueFileManagerComponents/FilesView/FileBrowser.vue
+1 -1
View File
@@ -61,7 +61,7 @@
</div>
<!--Show empty page if folder is empty-->
<EmptyPage v-if="!isSearching"/>
<EmptyPage v-if="! isSearching"/>
<!--Show empty page if no search results-->
<EmptyMessage
resources/js/components/VueFileManagerComponents/FilesView/FileInfoPanel.vue
+29 -10
View File
@@ -43,13 +43,13 @@
</li>
<!--Parent-->
<li v-if="$checkPermission('master')" class="list-info-item">
<li v-if="$checkPermission('master') && fileInfoDetail.shared" class="list-info-item">
<b>Shared</b>
<div class="action-button" @click="shareItemOptions">
<FontAwesomeIcon class="icon" icon="user-edit" />
<span>Can edit and upload files</span>
<FontAwesomeIcon class="icon" :icon="sharedIcon" />
<span>{{ sharedInfo }}</span>
</div>
<CopyInput class="copy-sharelink" size="small" :value="shareLink" />
<CopyInput class="copy-sharelink" size="small" :value="fileInfoDetail.shared.link" />
</li>
</ul>
</div>
@@ -87,12 +87,31 @@
return 'file-audio'
break;
}
}
},
data() {
return {
shareLink: 'http://192.168.1.131:8000/shared?token=3ZlQLIoCR8izoc0PemekHNq3UIMj6OrC0aQ2zowclfjFYa8P6go8fMKPnXTJomvz'
}
},
sharedInfo() {
switch (this.fileInfoDetail.shared.permission) {
case 'editor':
return 'Can edit and upload files'
break
case 'visitor':
return 'Can only view and download'
break
default:
return 'Can download file'
}
},
sharedIcon() {
switch (this.fileInfoDetail.shared.permission) {
case 'editor':
return 'user-edit'
break
case 'visitor':
return 'user'
break
default:
return 'download'
}
},
},
methods: {
shareItemOptions() {
resources/js/components/VueFileManagerComponents/FilesView/FileItemGrid.vue
+12 -4
View File
@@ -50,7 +50,7 @@
<div class="item-info">
<!--Shared Icon-->
<div v-if="$checkPermission('master')" class="item-shared">
<div v-if="$checkPermission('master') && data.shared" class="item-shared">
<FontAwesomeIcon class="shared-icon" icon="user-friends"/>
</div>
@@ -91,7 +91,7 @@
return this.data.type === 'image'
},
canEditName() {
return ! this.$isMobile() && ! this.$isTrashLocation() && ! this.$checkPermission('visitor')
return ! this.$isMobile() && ! this.$isThisLocation(['trash', 'trash-root']) && ! this.$checkPermission('visitor')
},
timeStamp() {
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', this.data.deleted_at) : this.data.created_at
@@ -136,7 +136,11 @@
if (this.$isMobile() && this.isFolder) {
// Go to folder
this.$store.dispatch('goToFolder', [this.data, false])
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.data, false])
} else {
this.$store.dispatch('goToFolder', [this.data, false])
}
}
// Load file info detail
@@ -166,7 +170,11 @@
if (this.isFolder) {
// Go to folder
this.$store.dispatch('goToFolder', [this.data, false])
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.data, false])
} else {
this.$store.dispatch('goToFolder', [this.data, false])
}
}
},
changeItemName: debounce(function (e) {
resources/js/components/VueFileManagerComponents/FilesView/FileItemList.vue
+13 -5
View File
@@ -49,7 +49,7 @@
<div class="item-info">
<!--Shared Icon-->
<div v-if="$checkPermission('master')" class="item-shared">
<div v-if="$checkPermission('master') && data.shared" class="item-shared">
<FontAwesomeIcon class="shared-icon" icon="user-friends"/>
</div>
@@ -93,7 +93,7 @@
return this.data.type === 'image'
},
canEditName() {
return ! this.$isMobile() && ! this.$isTrashLocation() && ! this.$checkPermission('visitor')
return ! this.$isMobile() && ! this.$isThisLocation(['trash', 'trash-root']) && ! this.$checkPermission('visitor')
},
timeStamp() {
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', {time: this.data.deleted_at}) : this.data.created_at
@@ -151,7 +151,11 @@
if (this.$isMobile() && this.isFolder) {
// Go to folder
this.$store.dispatch('goToFolder', [this.data, false])
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.data, false])
} else {
this.$store.dispatch('goToFolder', [this.data, false])
}
}
// Load file info detail
@@ -180,8 +184,12 @@
}
if (this.isFolder) {
// Go to folder
this.$store.dispatch('goToFolder', [this.data, false])
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.data, false])
} else {
this.$store.dispatch('goToFolder', [this.data, false])
}
}
},
changeItemName: debounce(function (e) {
resources/js/components/VueFileManagerComponents/FilesView/MobileActions.vue
+3 -3
View File
@@ -2,7 +2,7 @@
<div id="mobile-actions-wrapper" v-if="$isMinimalScale()">
<!--Actions for trash location with MASTER permission--->
<div v-if="$isTrashLocation() && $checkPermission('master')" class="mobile-actions">
<div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="mobile-actions">
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
{{ previewText }}
</MobileActionButton>
@@ -12,7 +12,7 @@
</div>
<!--ContextMenu for Base location with MASTER permission-->
<div v-if="$isBaseLocation() && $checkPermission(['master', 'editor'])" class="mobile-actions">
<div v-if="$isThisLocation(['base', 'shared']) && $checkPermission(['master', 'editor'])" class="mobile-actions">
<MobileActionButton @click.native="createFolder" icon="folder-plus">
{{ $t('context_menu.add_folder') }}
</MobileActionButton>
@@ -25,7 +25,7 @@
</div>
<!--ContextMenu for Base location with VISITOR permission-->
<div v-if="$isBaseLocation() && $checkPermission('visitor')" class="mobile-actions">
<div v-if="$isThisLocation(['base', 'shared']) && $checkPermission('visitor')" class="mobile-actions">
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
{{ previewText }}
</MobileActionButton>
resources/js/components/VueFileManagerComponents/FilesView/MobileMenu.vue
+31 -8
View File
@@ -10,7 +10,7 @@
<div class="menu-wrapper">
<!--Mobile for trash location-->
<ul v-if="$isTrashLocation() && $checkPermission('master')" class="menu-options">
<ul v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="menu-options">
<li class="menu-option" @click="$store.dispatch('restoreItem', fileInfoDetail)" v-if="fileInfoDetail">
{{ $t('context_menu.restore') }}
</li>
@@ -23,7 +23,26 @@
</ul>
<!--Mobile for Base location-->
<ul v-if="$isBaseLocation() && $checkPermission('master')" class="menu-options">
<ul v-if="$isThisLocation(['shared']) && $checkPermission('master')" class="menu-options">
<li class="menu-option" @click="addToFavourites" v-if="fileInfoDetail && isFolder">
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
</li>
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
{{ $t('context_menu.rename') }}
</li>
<li class="menu-option" @click="shareItem" v-if="fileInfoDetail">
{{ fileInfoDetail.shared ? 'Edit Sharing' : $t('context_menu.share') }}
</li>
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
{{ $t('context_menu.download') }}
</li>
<li class="menu-option delete" @click="removeItem" v-if="fileInfoDetail">
{{ $t('context_menu.delete') }}
</li>
</ul>
<!--Mobile for Base location-->
<ul v-if="$isThisLocation(['base']) && $checkPermission('master')" class="menu-options">
<li class="menu-option" @click="addToFavourites" v-if="fileInfoDetail && isFolder">
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
</li>
@@ -34,7 +53,7 @@
{{ $t('context_menu.move') }}
</li>
<li class="menu-option" @click="shareItem" v-if="fileInfoDetail">
{{ $t('context_menu.share') }}
{{ fileInfoDetail.shared ? 'Edit Sharing' : $t('context_menu.share') }}
</li>
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
{{ $t('context_menu.download') }}
@@ -45,7 +64,7 @@
</ul>
<!--Mobile for Base location with EDITOR permission-->
<ul v-if="$isBaseLocation() && $checkPermission('editor')" class="menu-options">
<ul v-if="$isThisLocation(['base']) && $checkPermission('editor')" class="menu-options">
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
{{ $t('context_menu.rename') }}
</li>
@@ -58,7 +77,7 @@
</ul>
<!--Mobile for Base location with VISITOR permission-->
<ul v-if="$isBaseLocation() && $checkPermission('visitor')" class="menu-options">
<ul v-if="$isThisLocation(['base']) && $checkPermission('visitor')" class="menu-options">
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
{{ $t('context_menu.download') }}
</li>
@@ -104,9 +123,13 @@
events.$emit('popup:open', {name: 'move', item: this.fileInfoDetail})
},
shareItem() {
// Open share item popup
events.$emit('popup:open', {name: 'share-create', item: this.fileInfoDetail})
if (this.fileInfoDetail.shared) {
// Open share item popup
events.$emit('popup:open', {name: 'share-edit', item: this.fileInfoDetail})
} else {
// Open share item popup
events.$emit('popup:open', {name: 'share-create', item: this.fileInfoDetail})
}
},
addToFavourites() {
if (this.app.favourites && !this.app.favourites.find(el => el.unique_id == this.fileInfoDetail.unique_id)) {
resources/js/components/VueFileManagerComponents/FilesView/MobileToolbar.vue
+5 -1
View File
@@ -75,7 +75,11 @@
this.$store.commit('FLUSH_BROWSER_HISTORY')
} else {
this.$store.dispatch('goToFolder', [this.previousFolder, true])
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.previousFolder, false])
} else {
this.$store.dispatch('goToFolder', [this.previousFolder, false])
}
}
},
},
resources/js/components/VueFileManagerComponents/FilesView/SearchBar.vue
+6 -4
View File
@@ -49,11 +49,13 @@
this.$store.dispatch('getSearchResult', value)
} else if (typeof value !== 'undefined') {
if (this.currentFolder) {
// Get back after delete query to previosly folder
this.$store.dispatch('goToFolder', [
this.currentFolder,
true
])
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.currentFolder, true])
} else {
this.$store.dispatch('goToFolder', [this.currentFolder, true])
}
}
this.$store.commit('CHANGE_SEARCHING_STATE', false)
resources/js/components/VueFileManagerComponents/FilesView/ToolbarButtonUpload.vue
+1 -1
View File
@@ -8,7 +8,7 @@
type="file"
name="files[]"
multiple
:disabled="$isTrashLocation() ? true : false"
:disabled="$isThisLocation(['trash', 'trash-root'])"
/>
</label>
</template>
resources/js/components/VueFileManagerComponents/Others/ShareCreate.vue
+11 -14
View File
@@ -97,7 +97,7 @@
required,
},
computed: {
...mapGetters(['app']),
...mapGetters(['app', 'permissionOptions']),
itemTypeTitle() {
return this.pickedItem && this.pickedItem.type === 'folder' ? 'Folder' : 'File'
},
@@ -114,19 +114,9 @@
isPassword: false,
password: undefined,
permission: undefined,
type: undefined,
unique_id: undefined,
},
permissionOptions: [
{
label: 'Can edit and upload files',
value: 'editor',
icon: 'user-edit',
},
{
label: 'Can only view and download',
value: 'visitor',
icon: 'user',
},
],
pickedItem: undefined,
shareLink: undefined,
isGeneratedShared: false,
@@ -158,8 +148,10 @@
// End loading
this.isLoading = false
this.shareLink = response.data
this.shareLink = response.data.link
this.isGeneratedShared = true
this.$store.commit('UPDATE_SHARED_ITEM', response.data)
})
.catch(error => {
@@ -179,6 +171,9 @@
// Store picked item
this.pickedItem = args.item
this.shareOptions.type = args.item.type
this.shareOptions.unique_id = args.item.unique_id
})
// Close popup
@@ -192,6 +187,8 @@
permission: undefined,
password: undefined,
isPassword: false,
type: undefined,
unique_id: undefined,
}
}, 150)
})
resources/js/components/VueFileManagerComponents/Others/ShareEdit.vue
+72 -49
View File
@@ -4,7 +4,7 @@
<PopupHeader title="Update sharing options" />
<!--Content-->
<PopupContent>
<PopupContent v-if="pickedItem && pickedItem.shared">
<!--Item Thumbnail-->
<ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata"/>
@@ -15,13 +15,13 @@
<!--Share link-->
<div class="input-wrapper">
<label class="input-label">Share url:</label>
<CopyInput size="small" :value="shareLink" />
<CopyInput size="small" :value="pickedItem.shared.link" />
</div>
<!--Permision Select-->
<ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
<label class="input-label">Permission:</label>
<SelectInput v-model="shareOptions.permission" :options="permissionOptions" default="visitor" :isError="errors[0]"/>
<SelectInput v-model="shareOptions.permission" :options="permissionOptions" :default="shareOptions.permission" :isError="errors[0]"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -29,13 +29,13 @@
<div class="input-wrapper">
<div class="inline-wrapper">
<label class="input-label">Password Protected:</label>
<SwitchInput v-model="shareOptions.isPassword" class="switch" :state="0"/>
<SwitchInput v-model="shareOptions.isProtected" :state="shareOptions.isProtected" class="switch"/>
</div>
<ActionButton @click.native="changePassword" v-if="isPasswordChangeButton" icon="pencil-alt">Change Password</ActionButton>
<ActionButton v-if="(pickedItem.shared.protected && canChangePassword) && shareOptions.isProtected" @click.native="changePassword" icon="pencil-alt">Change Password</ActionButton>
</div>
<!--Set password-->
<ValidationProvider v-if="isPasswordInput || shareOptions.isPassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
<ValidationProvider v-if="shareOptions.isProtected && ! canChangePassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
<input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" placeholder="Type your password">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -50,15 +50,17 @@
class="popup-button"
@click.native="destroySharing"
:button-style="destroyButtonStyle"
:loading="isDeleting"
:disabled="isDeleting"
>{{ destroyButtonText }}
</ButtonBase>
<ButtonBase
class="popup-button"
@click.native="submitShareOptions"
@click.native="updateShareOptions"
button-style="theme"
:loading="isLoading"
:disabled="isLoading"
>Save Changes
>Ok
</ButtonBase>
</PopupActions>
</PopupWrapper>
@@ -99,7 +101,7 @@
required,
},
computed: {
...mapGetters(['app']),
...mapGetters(['app', 'permissionOptions', 'currentFolder']),
isFolder() {
return this.pickedItem && this.pickedItem.type === 'folder'
},
@@ -108,58 +110,72 @@
},
destroyButtonStyle() {
return this.isConfirmedDestroy ? 'danger-solid' : 'secondary'
}
},
isSharedLocation() {
return this.currentFolder && this.currentFolder.location === 'shared'
},
},
data() {
return {
shareOptions: {
isPassword: false,
password: undefined,
permission: undefined,
},
permissionOptions: [
{
label: 'Can edit and upload files',
value: 'editor',
icon: 'user-edit',
},
{
label: 'Can only view and download',
value: 'visitor',
icon: 'user',
},
],
shareOptions: undefined,
pickedItem: undefined,
isLoading: false,
isPasswordInput: false,
isPasswordChangeButton: true,
isDeleting: false,
canChangePassword: false,
isConfirmedDestroy: false,
shareLink: 'http://192.168.1.131:8000/shared?token=3ZlQLIoCR8izoc0PemekHNq3UIMj6OrC0aQ2zowclfjFYa8P6go8fMKPnXTJomvz'
}
},
methods: {
changePassword() {
this.isPasswordInput = true
this.isPasswordChangeButton = false
this.canChangePassword = false
},
destroySharing() {
// Set confirm button
if (! this.isConfirmedDestroy) {
this.isConfirmedDestroy = true
return
this.isConfirmedDestroy = true
} else {
this.$closePopup()
// Start deleting spinner button
this.isDeleting = true
// Send delete request
axios
.delete('/api/share/remove', {
params: {
token: this.pickedItem.shared.token
}
})
.then(() => {
// Remove item from file browser
if ( this.isSharedLocation ) {
this.$store.commit('REMOVE_ITEM', this.pickedItem.unique_id)
}
// Flush shared data
this.$store.commit('FLUSH_SHARED', this.pickedItem.unique_id)
// End deleting spinner button
this.isDeleting = false
this.$closePopup()
})
.catch(() => {
// End deleting spinner button
this.isDeleting = false
})
}
},
async submitShareOptions() {
async updateShareOptions() {
// If shared was generated, then close popup
if (this.isGeneratedShared) {
events.$emit('popup:close')
return;
events.$emit('popup:close')
return
}
// Validate fields
@@ -171,14 +187,16 @@
// Send request to get share link
axios
.post('/api/share/generate', this.shareOptions)
.post('/api/share/update', this.shareOptions)
.then(response => {
// End loading
this.isLoading = false
this.shareLink = response.data
this.isGeneratedShared = true
// Update shared data
this.$store.commit('UPDATE_SHARED_ITEM', response.data)
events.$emit('popup:close')
})
.catch(error => {
@@ -198,6 +216,16 @@
// Store picked item
this.pickedItem = args.item
// Store shared options
this.shareOptions = {
token: args.item.shared.token,
isProtected: args.item.shared.protected,
permission: args.item.shared.permission,
password: undefined,
}
this.canChangePassword = args.item.shared.protected
})
// Close popup
@@ -206,14 +234,9 @@
// Restore data
setTimeout(() => {
this.isConfirmedDestroy = false
this.isPasswordInput = false
this.isPasswordChangeButton = true
//this.shareLink = undefined
this.shareOptions = {
permission: undefined,
password: undefined,
isPassword: false,
}
this.canChangePassword = false
this.pickedItem = undefined
this.shareOptions = undefined
}, 150)
})
}
resources/js/helpers.js
Vendored
+11 -5
View File
@@ -213,12 +213,18 @@ const Helpers = {
events.$emit('popup:close')
}
Vue.prototype.$isTrashLocation = function() {
return store.getters.currentFolder && store.getters.currentFolder.location === 'trash' || store.getters.currentFolder && store.getters.currentFolder.location === 'trash-root' ? true : false
}
Vue.prototype.$isThisLocation = function(location) {
Vue.prototype.$isBaseLocation = function() {
return store.getters.currentFolder && store.getters.currentFolder.location === 'base' ? true : false
// Get current location
let currentLocation = store.getters.currentFolder && store.getters.currentFolder.location ? store.getters.currentFolder.location : undefined
// Check if type is object
if (typeof location === 'Object' || location instanceof Object) {
return includes(location, currentLocation)
} else {
return currentLocation === location
}
}
Vue.prototype.$checkPermission = function(type) {
resources/js/main.js
Vendored
+2
View File
@@ -9,6 +9,7 @@ import Helpers from './helpers'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import {
faDownload,
faUserFriends,
faCheck,
faLink,
@@ -43,6 +44,7 @@ import {
} from '@fortawesome/free-solid-svg-icons'
library.add(
faDownload,
faUserFriends,
faCheck,
faLink,
resources/js/router.js
Vendored
+1 -9
View File
@@ -51,20 +51,12 @@ const router = new Router({
},
{
name: 'SharedContent',
path: '/shared',
path: '/shared/:token',
component: SharedContent,
meta: {
requiresAuth: false
},
},
{
name: 'VerifyByPassword',
path: '/protected',
component: VerifyByPassword,
meta: {
requiresAuth: false
},
},
{
name: 'Files',
path: '/files',
resources/js/store/index.js
Vendored
+3 -2
View File
@@ -1,14 +1,15 @@
import Vuex from 'vuex'
import Vue from 'vue'
import filesView from './modules/filesView'
import fileBrowser from './modules/fileBrowser'
import userAuth from './modules/userAuth'
import sharing from './modules/sharing'
import app from './modules/app'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
filesView, userAuth, app,
fileBrowser, userAuth, app, sharing,
}
})
resources/js/store/modules/filesView.js → resources/js/store/modules/fileBrowser.js
Vendored
+20 -10
View File
@@ -2,7 +2,7 @@ import axios from 'axios'
import {events} from '@/bus'
import router from '@/router'
import { includes } from 'lodash'
import i18n from '@/i18n/index.js'
import i18n from '@/i18n/index'
const defaultState = {
fileInfoPanelVisible: localStorage.getItem('file_info_visibility') == 'true' || false,
@@ -90,7 +90,7 @@ const actions = {
}
axios
.get(context.getters.api + '/shared')
.get(context.getters.api + '/shared-all')
.then(response => {
context.commit('GET_DATA', response.data)
context.commit('LOADING_STATE', false)
@@ -215,10 +215,10 @@ const actions = {
// Remove file
commit('REMOVE_ITEM', data.unique_id)
if (data.type === 'file' || data.type === 'image')
commit('REMOVE_ITEM_FROM_RECENT_UPLOAD', data.unique_id)
if (data.type === 'folder')
commit('REMOVE_ITEM_FROM_FAVOURITES', data)
else
commit('REMOVE_ITEM_FROM_RECENT_UPLOAD', data.unique_id)
// Remove file preview
commit('CLEAR_FILEINFO_DETAIL')
@@ -356,7 +356,12 @@ const actions = {
dispatch('getTrash')
} else {
dispatch('goToFolder', [state.currentFolder, false, true])
if ( this.$isThisLocation('public') ) {
dispatch('browseShared', [this.currentFolder(), false, true])
} else {
dispatch('goToFolder', [state.currentFolder, false, true])
}
}
},
fileInfoToggle: (context, visibility = undefined) => {
@@ -419,6 +424,11 @@ const mutations = {
FLUSH_BROWSER_HISTORY(state) {
state.browseHistory = []
},
FLUSH_SHARED(state, unique_id) {
state.data.find(item => {
if (item.unique_id == unique_id) item.shared = undefined
})
},
ADD_BROWSER_HISTORY(state, folder) {
state.browseHistory.push(folder)
},
@@ -465,6 +475,11 @@ const mutations = {
UPDATE_FILE_COUNT_PROGRESS(state, data) {
state.uploadingFilesCount = data
},
UPDATE_SHARED_ITEM(state, data) {
state.data.find(item => {
if (item.unique_id == data.item_id) item.shared = data
})
},
FLUSH_DATA(state) {
state.data = []
},
@@ -477,11 +492,6 @@ const mutations = {
ADD_NEW_ITEMS(state, items) {
state.data = state.data.concat(items)
},
REMOVE_ITEMS(state, ids) {
state.data = state.data.filter(
el => -1 == ids.indexOf(el.unique_id)
)
},
REMOVE_ITEM(state, unique_id) {
state.data = state.data.filter(el => el.unique_id !== unique_id)
},
resources/js/store/modules/sharing.js
Vendored
+106
View File
@@ -0,0 +1,106 @@
import i18n from '@/i18n/index'
import router from '@/router'
import {events} from '@/bus'
import axios from 'axios'
const defaultState = {
permissionOptions: [
{
label: 'Can edit and upload files',
value: 'editor',
icon: 'user-edit',
},
{
label: 'Can only view and download',
value: 'visitor',
icon: 'user',
},
],
sharedDetail: undefined,
sharedFile: undefined,
}
const actions = {
browseShared: ({commit, state, getters}, [folder, back = false, init = false]) => {
commit('LOADING_STATE', true)
commit('FLUSH_DATA')
// Clear search
if (getters.isSearching) {
commit('CHANGE_SEARCHING_STATE', false)
events.$emit('clear-query')
}
// Create current folder for history
let currentFolder = {
name: folder.name,
unique_id: folder.unique_id,
location: 'public'
}
let route = state.sharedDetail.protected ? '/api/browse-private/' : '/api/browse-public/'
return new Promise((resolve, reject) => {
axios
.get(route + currentFolder.unique_id, {
params: {
token: router.currentRoute.params.token
}
})
.then(response => {
commit('LOADING_STATE', false)
commit('GET_DATA', response.data)
commit('STORE_CURRENT_FOLDER', currentFolder)
events.$emit('scrollTop')
if (back) {
commit('REMOVE_BROWSER_HISTORY')
} else {
if (!init)
commit('ADD_BROWSER_HISTORY', currentFolder)
}
resolve(response)
})
.catch((error) => {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
reject(error)
})
})
},
getSingleFile: ({commit, state}) => {
let route = state.sharedDetail.protected ? '/api/file-private/' : '/api/file-public/'
axios.get(route + router.currentRoute.params.token)
.then(response => {
commit('STORE_SHARED_FILE', response.data)
})
},
}
const mutations = {
SET_SHARED_DETAIL(state, data) {
state.sharedDetail = data
},
STORE_SHARED_FILE(state, data) {
state.sharedFile = data
}
}
const getters = {
permissionOptions: state => state.permissionOptions,
sharedDetail: state => state.sharedDetail,
sharedFile: state => state.sharedFile,
}
export default {
state: defaultState,
getters,
actions,
mutations
}
resources/js/store/modules/userAuth.js
Vendored
+3
View File
@@ -97,6 +97,9 @@ const mutations = {
UPDATE_FOLDER_TREE(state, tree) {
state.app.folders = tree
},
SET_PERMISSION(state, role) {
state.permission = role
},
SET_AUTHORIZED(state, data) {
state.authorized = data
},
resources/js/views/Shared/SharedContent.vue
+163 -60
View File
@@ -1,94 +1,155 @@
<template>
<div id="shared-content">
<div id="single-file">
<div v-if="false" class="single-file-wrapper">
<FileItemGrid :data="item"/>
<div id="shared">
<ButtonBase @click.native="download" class="download-button" button-style="theme">
Download File
</ButtonBase>
</div>
<!--Loading Spinenr-->
<Spinner v-if="isPageLoading"/>
<!--Password verification-->
<div v-if="currentPage === 'page-password'" id="password-view">
<!--Verify share link by password-->
<AuthContent class="center" name="password" :visible="true">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>Your Share Link is Protected</h1>
<h2>Please type the password to get shared content:</h2>
<ValidationObserver @submit.prevent="authenticateProtected" ref="authenticateProtected" v-slot="{ invalid }" tag="form" class="form inline-form">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Password" rules="required" v-slot="{ errors }">
<input v-model="password" placeholder="Type password" type="password" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<AuthButton icon="chevron-right" text="Submit" :loading="isLoading" :disabled="isLoading" />
</ValidationObserver>
</AuthContent>
</div>
<div
@contextmenu.prevent.capture="contextMenu($event, undefined)"
:class="filesViewWidth"
@click="fileViewClick"
id="files-view"
v-if="true"
>
<!--Move item window-->
<MoveItem/>
<!--Mobile Menu-->
<MobileMenu/>
<!--File browser-->
<div v-if="currentPage === 'page-files'" id="files-view" :class="filesViewWidth">
<div id="single-file" v-if="sharedDetail.type === 'file'">
<div class="single-file-wrapper">
<FileItemGrid v-if="sharedFile" :data="sharedFile"/>
<!--Background vignette-->
<Vignette/>
<ButtonBase @click.native="download" class="download-button" button-style="theme">
Download File
</ButtonBase>
</div>
</div>
<div v-if="sharedDetail.type === 'folder'" @contextmenu.prevent.capture="contextMenu($event, undefined)" @click="fileViewClick">
<!--Move item window-->
<MoveItem/>
<!--Context menu-->
<ContextMenu/>
<!--Mobile Menu-->
<MobileMenu/>
<!--Desktop Toolbar-->
<DesktopToolbar/>
<!--Background vignette-->
<Vignette/>
<!--File browser-->
<FileBrowser/>
<!--Context menu-->
<ContextMenu/>
<!--Desktop Toolbar-->
<DesktopToolbar/>
<!--File browser-->
<FileBrowser/>
</div>
</div>
</div>
</template>
<script>
import DesktopToolbar from '@/components/VueFileManagerComponents/FilesView/DesktopToolbar'
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import FileItemGrid from '@/components/VueFileManagerComponents/FilesView/FileItemGrid'
import FileBrowser from '@/components/VueFileManagerComponents/FilesView/FileBrowser'
import ContextMenu from '@/components/VueFileManagerComponents/FilesView/ContextMenu'
import ButtonBase from '@/components/VueFileManagerComponents/FilesView/ButtonBase'
import MobileMenu from '@/components/VueFileManagerComponents/FilesView/MobileMenu'
import AuthContent from '@/components/VueFileManagerComponents/Auth/AuthContent'
import AuthButton from '@/components/VueFileManagerComponents/Auth/AuthButton'
import Spinner from '@/components/VueFileManagerComponents/FilesView/Spinner'
import Vignette from '@/components/VueFileManagerComponents/Others/Vignette'
import MoveItem from '@/components/VueFileManagerComponents/Others/MoveItem'
import {required} from 'vee-validate/dist/rules'
import {ResizeSensor} from 'css-element-queries'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
import axios from 'axios'
export default {
name: 'SharedContent',
components: {
ValidationProvider,
ValidationObserver,
DesktopToolbar,
FileItemGrid,
AuthContent,
FileBrowser,
ContextMenu,
AuthButton,
MobileMenu,
ButtonBase,
required,
Vignette,
MoveItem,
Spinner,
},
computed: {
...mapGetters(['config', 'filesViewWidth']),
...mapGetters(['config', 'filesViewWidth', 'sharedDetail', 'sharedFile']),
},
data() {
return {
item: {
"id": 339,
"user_id": 3,
"unique_id": 421,
"folder_id": 0,
"thumbnail": null,
"name": "VueFileManager-0.0.1-mac",
"basename": "gF5GiO16GNgmkr7K-VueFileManager-0.0.1-mac.zip",
"mimetype": "zip",
"filesize": "95.78MB",
"type": "file",
"deleted_at": null,
"created_at": "11. April. 2020 at 17:11",
"updated_at": "2020-04-11 17:11:49",
"file_url": "https://vuefilemanager.hi5ve.digital/api/file/gF5GiO16GNgmkr7K-VueFileManager-0.0.1-mac.zip",
"parent": null
}
checkedAccount: undefined,
password: 'tvojpenis',
isLoading: false,
isPageLoading: true,
currentPage: undefined
}
},
methods: {
async authenticateProtected() {
// Validate fields
const isValid = await this.$refs.authenticateProtected.validate();
if (!isValid) return;
// Start loading
this.isLoading = true
// Send request to get verify account
axios
.post('/api/shared/authenticate/' + this.$route.params.token, {
password: this.password
}).then(response => {
// End loading
this.isLoading = false
// Redirect to file browser page
this.currentPage = 'page-files'
// Get protected files
this.getFiles();
})
/*.catch((error) => {
/!*if (error.response.status == 401) {
this.$refs.authenticateProtected.setErrors({
'Password': [error.response.data.message]
});
}*!/
// End loading
this.isLoading = false
})*/
},
download() {
console.log('penis');
this.$downloadFile(
this.item.file_url,
this.item.name + '.' + this.item.mimetype
@@ -112,35 +173,77 @@
else if (filesView >= 960)
this.$store.commit('SET_FILES_VIEW_SIZE', 'full-scale')
},
},
mounted() {
getFiles() {
var filesView = document.getElementById('files-view');
new ResizeSensor(filesView, this.handleContentResize);
// Show folder
if (this.sharedDetail.type === 'folder') {
let homeDirectory = {
unique_id: 0,
name: 'Home',
location: 'base',
let homeDirectory = {
unique_id: this.sharedDetail.item_id,
name: 'Home',
}
// Set start directory
this.$store.commit('SET_START_DIRECTORY', homeDirectory)
// Load folder
this.$store.dispatch('browseShared', [homeDirectory, false, true])
.then(() => {
var filesView = document.getElementById('files-view')
new ResizeSensor(filesView, this.handleContentResize)
})
}
// Get file
if (this.sharedDetail.type === 'file') {
this.$store.dispatch('getSingleFile')
}
}
},
created() {
// Set start directory
this.$store.commit('SET_START_DIRECTORY', homeDirectory)
axios
.get('/api/shared/' + this.$route.params.token, )
.then(response => {
// Load folder
this.$store.dispatch('goToFolder', [homeDirectory, false, true])
// Commit shared item options
this.$store.commit('SET_SHARED_DETAIL', response.data)
this.$store.commit('SET_PERMISSION', response.data.permission)
// Hide page spinner
this.isPageLoading = false
// Show password page
if (response.data.protected) {
this.currentPage = 'page-password'
} else {
this.currentPage = 'page-files'
this.getFiles()
}
})
}
}
</script>
<style lang="scss">
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_forms';
@import '@assets/vue-file-manager/_auth';
#shared-content {
width: 100%;
#shared {
height: 100%;
}
#password-view {
display: grid;
height: inherit;
.center {
margin: auto;
}
}
#single-file {
position: absolute;
bottom: 0;
resources/js/views/Shared/VerifyByPassword.vue
+14 -18
View File
@@ -3,19 +3,7 @@
<!--Verify share link by password-->
<AuthContent name="password" :visible="true">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>Your Share Link is Protected</h1>
<h2>Please type the password to get shared content:</h2>
<ValidationObserver @submit.prevent="sharedProtected" ref="sharedProtected" v-slot="{ invalid }" tag="form" class="form inline-form">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required" v-slot="{ errors }">
<input v-model="password" placeholder="Type password" type="password" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<AuthButton icon="chevron-right" text="Submit" :loading="isLoading" :disabled="isLoading" />
</ValidationObserver>
</AuthContent>
</AuthContentWrapper>
</template>
@@ -45,8 +33,8 @@
data() {
return {
checkedAccount: undefined,
password: 'tvojpenis',
isLoading: false,
password: '',
}
},
methods: {
@@ -62,20 +50,28 @@
// Send request to get verify account
axios
.post('/api/share/check', {
password: this.password,
token: this.$route.query.token
.post('/api/shared/authenticate/' + this.$route.params.token, {
password: this.password
})
.then(response => {
// End loading
this.isLoading = false
console.log(response.data);
// Commit shared item options
this.$store.commit('SET_PERMISSION', response.data.permission)
// Redirect to file browser page
this.$router.push({name: 'SharedContent', params: {token: this.$route.params.token}})
})
.catch(error => {
// todo: catch error
if (error.response.status == 401) {
this.$refs.sharedProtected.setErrors({
'Password': [error.response.data.message]
});
}
// End loading
this.isLoading = false