nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-18 19:25:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

frontend function consolidation part 1

Browse Source
This commit is contained in:
Peter Papp
2021-03-16 08:31:42 +01:00
parent 803cc089bd
commit 1bb59854ea
26 changed files with 1855 additions and 1879 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/ContextMenu.vue
+95 -107
View File
@@ -4,16 +4,16 @@
<!-- File Preview -->
<div class="menu-options" id="menu-list" v-if="showFromPreview">
<OptionGroup class="menu-option-group">
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename"/>
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item"/>
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="shareItem" v-if="$checkPermission('master')" :title="item.shared
? $t('context_menu.share_edit')
: $t('context_menu.share')" icon="share"/>
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" class="menu-option"/>
: $t('context_menu.share')" icon="share" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" class="menu-option" />
</OptionGroup>
<OptionGroup>
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download"/>
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</div>
@@ -21,26 +21,26 @@
<div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
<!-- Single options -->
<OptionGroup v-if="multiSelectContextMenu">
<Option @click.native="restoreItem" v-if="item" :title="$t('context_menu.restore')" icon="restore"/>
<Option @click.native="deleteItem" v-if="item" :title="$t('context_menu.delete')" icon="trash"/>
<Option @click.native="emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash"/>
<OptionGroup v-if="isMultiSelectContextMenu">
<Option @click.native="restoreItem" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
<Option @click.native="deleteItem" v-if="item" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
</OptionGroup>
<OptionGroup v-if="item && multiSelectContextMenu">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail"/>
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download"/>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
<!-- Multi options -->
<OptionGroup v-if="!multiSelectContextMenu">
<Option @click.native="restoreItem" v-if="item" :title="$t('context_menu.restore')" icon="restore"/>
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
<Option @click.native="emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash"/>
<OptionGroup v-if="!isMultiSelectContextMenu">
<Option @click.native="restoreItem" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
</OptionGroup>
<OptionGroup v-if="item && !multiSelectContextMenu && !hasFolder">
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download"/>
<OptionGroup v-if="item && !isMultiSelectContextMenu && !hasFolder">
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</div>
@@ -48,38 +48,38 @@
<div v-if="$isThisLocation(['shared']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
<!-- Single options -->
<OptionGroup class="menu-option-group" v-if="item && isFolder && multiSelectContextMenu">
<Option @click.native="addToFavourites" :title=" isInFavourites
<OptionGroup class="menu-option-group" v-if="item && isFolder && isMultiSelectContextMenu">
<Option @click.native="addToFavourites" :title="isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')" icon="favourites"/>
: $t('context_menu.add_to_favourites')" icon="favourites" />
</OptionGroup>
<OptionGroup v-if="item && multiSelectContextMenu">
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename"/>
<Option @click.native="shareItem" :title=" item.shared ? $t('context_menu.share_edit'): $t('context_menu.share')" icon="share"/>
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="shareItem" :title=" item.shared ? $t('context_menu.share_edit'): $t('context_menu.share')" icon="share" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && multiSelectContextMenu">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail"/>
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download"/>
<Option @click.native="downloadFolder" v-if="isFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder"/>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download" />
<Option @click.native="downloadFolder" v-if="isFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder" />
</OptionGroup>
<!-- Multi options -->
<OptionGroup class="menu-option-group" v-if="item && !hasFile && !multiSelectContextMenu">
<Option @click.native="addToFavourites" :title=" isInFavourites
<OptionGroup class="menu-option-group" v-if="item && !hasFile && !isMultiSelectContextMenu">
<Option @click.native="addToFavourites" :title="isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')" icon="favourites"/>
: $t('context_menu.add_to_favourites')" icon="favourites" />
</OptionGroup>
<OptionGroup v-if="item && !multiSelectContextMenu">
<Option @click.native="shareCancel" :title="$t('context_menu.share_cancel')" icon="share"/>
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
<OptionGroup v-if="item && !isMultiSelectContextMenu">
<Option @click.native="shareCancel" :title="$t('context_menu.share_cancel')" icon="share" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && !multiSelectContextMenu && !hasFolder">
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download"/>
<OptionGroup v-if="item && !isMultiSelectContextMenu && !hasFolder">
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</div>
@@ -87,46 +87,46 @@
<div v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
<!-- No Files options -->
<OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && multiSelectContextMenu && !item">
<Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder"/>
<OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && isMultiSelectContextMenu && !item">
<Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
</OptionGroup>
<!-- Single options -->
<OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && item && multiSelectContextMenu && isFolder">
<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites"/>
<OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && item && isMultiSelectContextMenu && isFolder">
<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
</OptionGroup>
<OptionGroup v-if="item && multiSelectContextMenu">
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename"/>
<Option @click.native="moveItem" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item"/>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="moveItem" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="shareItem" :title="item.shared
? $t('context_menu.share_edit')
: $t('context_menu.share')" icon="share"/>
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
: $t('context_menu.share')" icon="share" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && multiSelectContextMenu ">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail"/>
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download"/>
<Option @click.native="downloadFolder" v-if="isFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder"/>
<OptionGroup v-if="item && isMultiSelectContextMenu ">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download" />
<Option @click.native="downloadFolder" v-if="isFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder" />
</OptionGroup>
<!-- Multi options -->
<OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && !multiSelectContextMenu && item && !hasFile">
<OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && !isMultiSelectContextMenu && item && !hasFile">
<Option @click.native="addToFavourites" :title=" isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')" icon="favourites"/>
: $t('context_menu.add_to_favourites')" icon="favourites" />
</OptionGroup>
<OptionGroup v-if="item && !multiSelectContextMenu">
<Option @click.native="moveItem" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item"/>
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
<OptionGroup v-if="item && !isMultiSelectContextMenu">
<Option @click.native="moveItem" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && !multiSelectContextMenu && !hasFolder">
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download"/>
<OptionGroup v-if="item && !isMultiSelectContextMenu && !hasFolder">
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</div>
@@ -134,33 +134,33 @@
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor') && !showFromPreview " id="menu-list" class="menu-options">
<!-- No Files options -->
<OptionGroup v-if="multiSelectContextMenu && !item">
<Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder"/>
<OptionGroup v-if="isMultiSelectContextMenu && !item">
<Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
</OptionGroup>
<!-- Single options -->
<OptionGroup v-if="item && multiSelectContextMenu">
<Option @click.native="renameItem" :title=" $t('context_menu.rename')" icon="rename"/>
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item"/>
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="renameItem" :title=" $t('context_menu.rename')" icon="rename" />
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && multiSelectContextMenu">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail"/>
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download"/>
<Option @click.native="downloadFolder" v-if="isFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder"/>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download" />
<Option @click.native="downloadFolder" v-if="isFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder" />
</OptionGroup>
<!-- Multi options -->
<OptionGroup v-if="item && !multiSelectContextMenu">
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item"/>
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
<OptionGroup v-if="item && !isMultiSelectContextMenu">
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && !multiSelectContextMenu && !hasFolder">
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download"/>
<OptionGroup v-if="item && !isMultiSelectContextMenu && !hasFolder">
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</div>
@@ -168,16 +168,16 @@
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor') && !showFromPreview" id="menu-list" class="menu-options">
<!-- Single options -->
<OptionGroup v-if="item && multiSelectContextMenu">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail"/>
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download"/>
<Option @click.native="downloadFolder" v-if="isFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder"/>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download" />
<Option @click.native="downloadFolder" v-if="isFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder" />
</OptionGroup>
<!-- Multi options -->
<OptionGroup v-if="!multiSelectContextMenu && item ">
<Option @click.native="downloadItem" v-if="!hasFolder" :title="$t('context_menu.download')" icon="download"/>
<Option v-if="hasFolder" :title="$t('context_menu.no_options')" icon="no-options" class="no-options"/>
<OptionGroup v-if="!isMultiSelectContextMenu && item ">
<Option @click.native="downloadItem" v-if="!hasFolder" :title="$t('context_menu.download')" icon="download" />
<Option v-if="hasFolder" :title="$t('context_menu.no_options')" icon="no-options" class="no-options" />
</OptionGroup>
</div>
@@ -187,8 +187,8 @@
<script>
import OptionGroup from '@/components/FilesView/OptionGroup'
import Option from '@/components/FilesView/Option'
import { mapGetters } from 'vuex'
import { events } from '@/bus'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'ContextMenu',
@@ -199,20 +199,12 @@ export default {
computed: {
...mapGetters(['user', 'fileInfoDetail']),
hasFolder() {
// Check if selected items includes some folder
if (this.fileInfoDetail.find(item => item.type === 'folder'))
return true
return this.fileInfoDetail.find(item => item.type === 'folder')
},
hasFile() {
// Check if selected items includes some files
if (this.fileInfoDetail.find(item => item.type !== 'folder'))
return true
return this.fileInfoDetail.find(item => item.type !== 'folder')
},
multiSelectContextMenu() {
isMultiSelectContextMenu() {
// If is context Menu open on multi selected items open just options for the multi selected items
if (this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.item))
@@ -221,10 +213,9 @@ export default {
// If is context Menu open for the non selected item open options for the single item
if (this.fileInfoDetail.length < 2 || !this.fileInfoDetail.includes(this.item))
return true
},
favourites() {
return this.user.relationships.favourites.data.attributes.folders
return this.user.data.relationships.favourites.data.attributes.folders
},
isFolder() {
return this.item && this.item.type === 'folder'
@@ -241,7 +232,7 @@ export default {
return this.item && this.item.type === 'image'
},
isInFavourites() {
return this.favourites.find((el) => el.unique_id == this.item.unique_id)
return this.favourites.find((el) => el.id === this.item.id)
}
},
data() {
@@ -253,10 +244,9 @@ export default {
positionY: 0
}
},
methods: {
downloadFolder(){
this.$store.dispatch('downloadFolder' , this.item)
downloadFolder() {
this.$store.dispatch('downloadFolder', this.item)
},
emptyTrash() {
this.$store.dispatch('emptyTrash')
@@ -264,36 +254,36 @@ export default {
restoreItem() {
// If is item not in selected items restore just this single item
if(!this.fileInfoDetail.includes(this.item))
if (!this.fileInfoDetail.includes(this.item))
this.$store.dispatch('restoreItem', this.item)
// If is item in selected items restore all items from fileInfoDetail
if(this.fileInfoDetail.includes(this.item))
if (this.fileInfoDetail.includes(this.item))
this.$store.dispatch('restoreItem', null)
},
shareCancel() {
this.$store.dispatch('shareCancel')
},
renameItem() {
events.$emit('popup:open', { name: 'rename-item', item: this.item })
events.$emit('popup:open', {name: 'rename-item', item: this.item})
},
moveItem() {
events.$emit('popup:open', { name: 'move', item: [this.item] })
events.$emit('popup:open', {name: 'move', item: [this.item]})
},
shareItem() {
if (this.item.shared) {
// Open edit share popup
events.$emit('popup:open', { name: 'share-edit', item: this.item })
events.$emit('popup:open', {name: 'share-edit', item: this.item})
} else {
// Open create share popup
events.$emit('popup:open', { name: 'share-create', item: this.item })
events.$emit('popup:open', {name: 'share-create', item: this.item})
}
},
addToFavourites() {
// Check if folder is in favourites and then add/remove from favourites
if (
this.favourites &&
!this.favourites.find(el => el.unique_id == this.item.unique_id)
!this.favourites.find(el => el.id === this.item.id)
) {
// Add to favourite folder that is not selected
if (!this.fileInfoDetail.includes(this.item)) {
@@ -419,10 +409,8 @@ export default {
this.isVisible = false
this.showFromPreview = false
this.item = undefined
})
events.$on('contextMenu:show', (event, item) => {
// Store item
this.item = item
resources/js/components/FilesView/FileItemGrid.vue
+4 -4
View File
@@ -88,16 +88,16 @@ export default {
folderEmojiOrColor() {
// If folder have set some color
if (this.item.icon_color) {
if (this.item.color) {
this.$nextTick(() => {
this.$refs[`folder${this.item.id}`].firstElementChild.style.fill = this.item.icon_color
this.$refs[`folder${this.item.id}`].firstElementChild.style.fill = this.item.color
})
return false
}
// If folder have set some emoji
if (this.item.icon_emoji)
return this.item.icon_emoji
if (this.item.emoji)
return this.item.emoji
},
isClicked() {
resources/js/components/FilesView/FileItemList.vue
+1 -1
View File
@@ -289,7 +289,7 @@ export default {
})
// Change item name
events.$on('change:name', (item) => {
events.$on('change:name', item => {
if (this.item.id === item.id) this.itemName = item.name
})
}
resources/js/components/FilesView/FilePreviewNavigationPanel.vue
+1 -1
View File
@@ -48,7 +48,7 @@ export default {
showingImageIndex() {
let activeIndex = ''
this.filteredFiles.filter((element, index) => {
if (element.unique_id == this.fileInfoDetail[0].unique_id) {
if (element.id === this.fileInfoDetail[0].id) {
activeIndex = index + 1
}
})
resources/js/components/FilesView/FolderIcon.vue
+4 -4
View File
@@ -20,9 +20,9 @@
export default {
name: 'FolderIcon',
props: [
'item',
'folderIcon',
'location'
'location',
'item',
],
components: {
Emoji
@@ -37,7 +37,7 @@
return this.folderIcon.emoji ? this.folderIcon.emoji : false
// Return emoji if is already set
return this.item.icon_emoji ? this.item.icon_emoji : false
return this.item.emoji ? this.item.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.icon_color ? this.item.icon_color : false
return this.item.color ? this.item.color : false
}
}
}
resources/js/components/Others/EmojiPicker.vue
+9 -8
View File
@@ -25,13 +25,14 @@
<!-- Emojis List -->
<transition name="slide-in">
<div v-if="selectOpen">
<!-- Spinner -->
<div v-if="!loadedList" class="emoji-wrapper">
<div v-if="!isLoadedEmojis" class="emoji-wrapper">
<Spinner />
</div>
<!-- List -->
<div v-if="loadedList && emojis" class="emoji-wrapper">
<div v-if="isLoadedEmojis && emojis" class="emoji-wrapper">
<!-- Search input -->
<input @click.stop @input="searchEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')">
@@ -100,7 +101,7 @@ export default {
searchInput: '',
filteredEmojis: [],
selectOpen: false,
loadedList: false,
isLoadedEmojis: false,
filteredEmojisLoaded: true,
groupInView: 'Smileys & Emotion',
}
@@ -150,8 +151,7 @@ export default {
}, 800),
openList() {
this.loadedList = false
this.isLoadedEmojis = false
this.selectOpen = !this.selectOpen
@@ -160,14 +160,15 @@ export default {
axios.get('/assets/emojis.json')
.then(response => {
this.$store.commit('LOAD_EMOJIS_LIST', response.data[0])
this.$store.commit('LOAD_EMOJIS_LIST', response.data)
})
.finally(() => this.isLoadedEmojis = true)
}
// Simulate loading for the emojisList processing
if (this.emojis) {
setTimeout(() => {
this.loadedList = true
this.isLoadedEmojis = true
}, 20);
}
@@ -199,7 +200,7 @@ export default {
this.selectOpen = false
this.loadedList = false
this.isLoadedEmojis = false
})
}
}
resources/js/components/Others/MoveItem.vue
+51 -44
View File
@@ -7,33 +7,33 @@
<PopupContent type="height-limited" v-if="pickedItem">
<!--Show Spinner when loading folders-->
<Spinner v-if="isLoadingTree"/>
<Spinner v-if="isLoadingTree" />
<!--Folder tree-->
<div v-if="! isLoadingTree && navigation">
<ThumbnailItem v-if="fileInfoDetail.length < 2 || noSelectedItem" class="item-thumbnail" :item="pickedItem" info="location"/>
<ThumbnailItem v-if="fileInfoDetail.length < 2 || noSelectedItem" class="item-thumbnail" :item="pickedItem" info="location" />
<MultiSelected class="multiple-selected"
:title="$t('file_detail.selected_multiple')"
:subtitle="this.fileInfoDetail.length + ' ' + $tc('file_detail.items', this.fileInfoDetail.length)"
v-if="fileInfoDetail.length > 1 && !noSelectedItem"/>
<MultiSelected class="multiple-selected"
:title="$t('file_detail.selected_multiple')"
:subtitle="this.fileInfoDetail.length + ' ' + $tc('file_detail.items', this.fileInfoDetail.length)"
v-if="fileInfoDetail.length > 1 && !noSelectedItem" />
<TreeMenu :disabled-by-id="pickedItem" :depth="1" :nodes="items" v-for="items in navigation" :key="items.unique_id"/>
<TreeMenu :disabled-by-id="pickedItem" :depth="1" :nodes="items" v-for="items in navigation" :key="items.id" />
</div>
</PopupContent>
<!--Actions-->
<PopupActions>
<ButtonBase
class="popup-button"
@click.native="$closePopup()"
button-style="secondary"
class="popup-button"
@click.native="$closePopup()"
button-style="secondary"
>{{ $t('popup_move_item.cancel') }}
</ButtonBase>
<ButtonBase
class="popup-button"
@click.native="moveItem"
:button-style="selectedFolder ? 'theme' : 'secondary'"
class="popup-button"
@click.native="moveItem"
:button-style="selectedFolder ? 'theme' : 'secondary'"
>{{ $t('popup_move_item.submit') }}
</ButtonBase>
</PopupActions>
@@ -80,25 +80,25 @@
methods: {
moveItem() {
// Prevent empty submit
if (! this.selectedFolder) return
if (!this.selectedFolder) return
//Prevent to move items to the same parent
if(this.fileInfoDetail.find(item => item.parent_id === this.selectedFolder.unique_id)) return
if (this.fileInfoDetail.find(item => item.parent_id === this.selectedFolder.id)) return
// Move item
if(!this.noSelectedItem){
this.$store.dispatch('moveItem', {to_item:this.selectedFolder ,noSelectedItem: null})
if (!this.noSelectedItem) {
this.$store.dispatch('moveItem', {to_item: this.selectedFolder, noSelectedItem: null})
}
if(this.noSelectedItem){
this.$store.dispatch('moveItem', {to_item:this.selectedFolder ,noSelectedItem:this.pickedItem})
if (this.noSelectedItem) {
this.$store.dispatch('moveItem', {to_item: this.selectedFolder, noSelectedItem: this.pickedItem})
}
// Close popup
events.$emit('popup:close')
// If is mobile, close the selecting mod after done the move action
if(this.$isMobile())
if (this.$isMobile())
events.$emit('mobileSelecting:stop')
},
},
@@ -107,7 +107,7 @@
// Select folder in tree
events.$on('pick-folder', folder => {
if (folder.unique_id === this.pickedItem.unique_id) {
if (folder.id === this.pickedItem.id) {
this.selectedFolder = undefined
} else {
this.selectedFolder = folder
@@ -118,6 +118,7 @@
events.$on('popup:open', args => {
if (args.name !== 'move') return
// Show tree spinner
this.isLoadingTree = true
@@ -127,11 +128,12 @@
})
// Store picked item
if(!this.fileInfoDetail.includes(args.item[0])){
if (!this.fileInfoDetail.includes(args.item[0])) {
this.pickedItem = args.item[0]
this.noSelectedItem = true
}
if(this.fileInfoDetail.includes(args.item[0])){
if (this.fileInfoDetail.includes(args.item[0])) {
this.pickedItem = this.fileInfoDetail[0]
this.noSelectedItem = false
}
@@ -153,37 +155,42 @@
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.item-thumbnail {
margin-bottom: 20px;
}
.multiple-selected {
padding: 0 20px;;
margin-bottom: 20px;
/deep/.text{
.title {
color: $text;
}
.count {
color: $text-muted;
}
.item-thumbnail {
margin-bottom: 20px;
}
.multiple-selected {
padding: 0 20px;;
margin-bottom: 20px;
/deep/ .text {
.title {
color: $text;
}
/deep/.icon-wrapper {
.icon {
stroke: $theme;
}
.count {
color: $text-muted;
}
}
@media (prefers-color-scheme: dark) {
/deep/ .icon-wrapper {
.icon {
stroke: $theme;
}
}
}
@media (prefers-color-scheme: dark) {
.multiple-selected {
/deep/.text {
/deep/ .text {
.title {
color: $dark_mode_text_primary;
}
.count {
color: $dark_mode_text_secondary;
}
}
}
}
}
</style>
resources/js/components/Others/RenameItem.vue
+22 -18
View File
@@ -1,13 +1,13 @@
<template>
<PopupWrapper name="rename-item">
<!--Title-->
<PopupHeader :title="$t('popup_rename.title', {item: itemTypeTitle})" icon="edit"/>
<PopupHeader :title="$t('popup_rename.title', {item: itemTypeTitle})" icon="edit" />
<!--Content-->
<PopupContent>
<!--Item Thumbnail-->
<ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata" :setFolderIcon="setFolderIcon"/>
<ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata" :setFolderIcon="folderIcon" />
<!--Form to set sharing-->
<ValidationObserver @submit.prevent="changeName" ref="renameForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
@@ -18,33 +18,32 @@
<div class="input">
<input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" :placeholder="$t('popup_rename.placeholder')">
<div @click="pickedItem.name = ''" class="close-icon-wrapper">
<x-icon class="close-icon" size="14"/>
<x-icon class="close-icon" size="14" />
</div>
</div>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem"/>
<SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem" />
<ActionButton v-if="pickedItem.type === 'folder'" @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
</ValidationObserver>
</PopupContent>
<!--Actions-->
<PopupActions>
<ButtonBase class="popup-button" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }}
<ButtonBase class="popup-button" @click.native="$closePopup()" button-style="secondary">
{{ $t('popup_move_item.cancel') }}
</ButtonBase>
<ButtonBase class="popup-button" @click.native="changeName" button-style="theme">{{ $t('popup_share_edit.save') }}
<ButtonBase class="popup-button" @click.native="changeName" button-style="theme">
{{ $t('popup_share_edit.save') }}
</ButtonBase>
</PopupActions>
</PopupWrapper>
</template>
<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
import PopupActions from '@/components/Others/Popup/PopupActions'
import PopupContent from '@/components/Others/Popup/PopupContent'
@@ -53,9 +52,9 @@ import SetFolderIcon from '@/components/Others/SetFolderIcon'
import ThumbnailItem from '@/components/Others/ThumbnailItem'
import ActionButton from '@/components/Others/ActionButton'
import ButtonBase from '@/components/FilesView/ButtonBase'
import { XIcon } from 'vue-feather-icons'
import { required } from 'vee-validate/dist/rules'
import { events } from '@/bus'
import {XIcon} from 'vue-feather-icons'
import {required} from 'vee-validate/dist/rules'
import {events} from '@/bus'
export default {
name: 'RenameItem',
@@ -85,7 +84,7 @@ export default {
return {
pickedItem: undefined,
isMoreOptions: false,
setFolderIcon: undefined
folderIcon: undefined
}
},
methods: {
@@ -99,9 +98,14 @@ export default {
id: this.pickedItem.id,
type: this.pickedItem.type,
name: this.pickedItem.name,
icon: this.setFolderIcon ? this.setFolderIcon : null
}
if (this.folderIcon.emoji)
item['emoji'] = this.folderIcon.emoji
if (this.folderIcon.color)
item['color'] = this.folderIcon.color
// Rename item request
this.$store.dispatch('renameItem', item)
@@ -119,20 +123,20 @@ export default {
if (args.name !== 'rename-item') return
if (! this.$isMobile()) {
if (!this.$isMobile()) {
this.$nextTick(() => this.$refs.input.focus())
}
this.isMoreOptions = false
this.setFolderIcon = undefined
this.folderIcon = undefined
// Store picked item
this.pickedItem = args.item
})
events.$on('setFolderIcon', (icon) => {
this.setFolderIcon = icon
this.folderIcon = icon
})
}
}
resources/js/components/Others/SetFolderIcon.vue
+22 -24
View File
@@ -8,7 +8,7 @@
<!-- Colors Picker-->
<TabOption :title="$t('popup_rename.tab_color_title')" icon="folder">
<ColorPicker :picked-color="pickedColor" v-model="selectedColor"/>
<ColorPicker :picked-color="pickedColor" v-model="selectedColor" />
</TabOption>
</TabWrapper>
</template>
@@ -18,11 +18,11 @@ import EmojiPicker from '@/components/Others/EmojiPicker'
import ColorPicker from '@/components/Others/ColorPicker'
import TabWrapper from '@/components/Others/TabWrapper'
import TabOption from '@/components/Others/TabOption'
import { events } from '@/bus'
import {events} from '@/bus'
export default {
name: 'SetFolderIcon',
props: [ 'folderData' ],
props: ['folderData'],
components: {
EmojiPicker,
ColorPicker,
@@ -30,7 +30,7 @@ export default {
TabOption,
},
computed: {
pickedEmoji () {
pickedEmoji() {
// If is color not selected and emoji is selected, push picked emoji to EmojiPicker for the EmojiSelected input
return !this.selectedColor && this.selectedEmoji ? this.selectedEmoji : undefined
},
@@ -46,46 +46,44 @@ export default {
}
},
watch: {
selectedColor () {
selectedColor() {
let color = {'color': this.selectedColor}
if( this.selectedColor ) {
if (this.selectedColor) {
this.selectedEmoji = undefined
events.$emit('setFolderIcon', color )
events.$emit('setFolderIcon', color)
}
},
selectedEmoji () {
selectedEmoji() {
let emoji = { 'emoji': this.selectedEmoji }
let emoji = {'emoji': this.selectedEmoji}
if( this.selectedEmoji ) {
if (this.selectedEmoji) {
this.selectedColor = undefined
events.$emit('setFolderIcon', this.selectedEmoji ==='default' ? 'default' : emoji )
events.$emit('setFolderIcon', this.selectedEmoji === 'default' ? 'default' : emoji)
}
},
},
created() {
if(this.folderData) {
if (this.folderData) {
// If folder have already set some color set this color to selected color
this.folderData.icon_color ? this.selectedColor = this.folderData.icon_color : ''
this.folderData.color ? this.selectedColor = this.folderData.color : ''
// If folder have already set some emojit set this emoji to selected emoji
this.folderData.icon_emoji ? this.selectedEmoji = this.folderData.icon_emoji : ''
this.folderData.emoji ? this.selectedEmoji = this.folderData.emoji : ''
}
},
destroyed () {
if(this.folderData) {
destroyed() {
if (this.folderData) {
// After close SetFolderIcon set the saved folder icon for thumbnail
let color = {'color': this.folderData.icon_color }
let emoji = {'emoji': this.folderData.icon_emoji }
events.$emit('setFolderIcon', this.folderData.icon_emoji ? emoji : color )
let color = {'color': this.folderData.color}
let emoji = {'emoji': this.folderData.emoji}
events.$emit('setFolderIcon', this.folderData.emoji ? emoji : color)
}
}
}
resources/js/components/Others/TreeMenu.vue
+5 -5
View File
@@ -1,6 +1,6 @@
<template>
<!--Folder Icon-->
<div class="folder-item-wrapper" :class="{'is-inactive': disabledById && disabledById.unique_id === nodes.unique_id || !disableId} ">
<div class="folder-item-wrapper" :class="{'is-inactive': disabledById && disabledById.id === nodes.id || !disableId} ">
<div class="folder-item" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent">
<chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
@@ -9,7 +9,7 @@
<span class="label">{{ nodes.name }}</span>
</div>
<TreeMenu :disabled-by-id="disabledById" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.unique_id" />
<TreeMenu :disabled-by-id="disabledById" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id" />
</div>
</template>
@@ -39,7 +39,7 @@
let canBeShow = true
if(this.fileInfoDetail.includes(this.disabledById)){
this.fileInfoDetail.map(item => {
if(item.unique_id === this.nodes.unique_id) {
if(item.id === this.nodes.id) {
canBeShow = false
}
})
@@ -73,7 +73,7 @@
events.$on('pick-folder', node => {
this.isSelected = false
if (this.nodes.unique_id == node.unique_id)
if (this.nodes.id === node.id)
this.isSelected = true
})
@@ -81,7 +81,7 @@
events.$on('show-folder-item', node => {
this.isSelected = false
if (this.nodes.unique_id == node.unique_id)
if (this.nodes.id === node.id)
this.isSelected = true
})
}
resources/js/helpers.js
Vendored
+2 -2
View File
@@ -85,7 +85,7 @@ const Helpers = {
// Push items to file queue
[...files].map(item => {
this.$store.commit('ADD_FILES_TO_QUEUE', {
parent_id: store.getters.currentFolder.id,
folder_id: store.getters.currentFolder.id,
file: item,
})
});
@@ -106,7 +106,7 @@ const Helpers = {
// Push items to file queue
[...event.dataTransfer.items].map(item => {
this.$store.commit('ADD_FILES_TO_QUEUE', {
parent_id: parent_id,
folder_id: parent_id,
file: item.getAsFile(),
})
});
resources/js/store/modules/app.js
Vendored
+1041 -1039
View File
File diff suppressed because it is too large Load Diff
resources/js/store/modules/fileBrowser.js
Vendored
+9 -10
View File
@@ -88,7 +88,6 @@ const actions = {
commit('LOADING_STATE', {loading: true, data: []})
commit('FLUSH_FOLDER_HISTORY')
let currentFolder = {
name: i18n.t('sidebar.my_shared'),
location: 'shared',
@@ -98,7 +97,7 @@ const actions = {
commit('STORE_CURRENT_FOLDER', currentFolder)
axios
.get(getters.api + '/browse/shared-all' + getters.sorting.URI)
.get(getters.api + '/browse/shared' + getters.sorting.URI)
.then(response => {
commit('LOADING_STATE', {loading: false, data: response.data})
commit('STORE_PREVIOUS_FOLDER', currentFolder)
@@ -118,7 +117,7 @@ const actions = {
})
axios
.get(getters.api + '/browse/participant-uploads' + getters.sorting.URI)
.get(getters.api + '/browse/participants' + getters.sorting.URI)
.then(response => {
commit('LOADING_STATE', {loading: false, data: response.data})
@@ -139,7 +138,7 @@ const actions = {
commit('STORE_CURRENT_FOLDER', trash)
axios
.get(getters.api + '/trash' + getters.sorting.URI)
.get(getters.api + '/browse/trash' + getters.sorting.URI)
.then(response => {
commit('LOADING_STATE', {loading: false, data: response.data})
commit('STORE_PREVIOUS_FOLDER', trash)
@@ -156,9 +155,9 @@ const actions = {
let route = undefined
if (getters.sharedDetail && getters.sharedDetail.protected)
route = '/api/search/private'
route = '/api/browse/search/private'
else if (getters.sharedDetail && !getters.sharedDetail.protected)
route = '/api/search/public/' + router.currentRoute.params.token
route = '/api/browse/search/public/' + router.currentRoute.params.token
else
route = '/api/browse/search'
@@ -179,9 +178,9 @@ const actions = {
let route = undefined
if (getters.sharedDetail && getters.sharedDetail.protected)
route = '/api/navigation/private'
route = '/api/browse/navigation/private'
else if (getters.sharedDetail && !getters.sharedDetail.protected)
route = '/api/navigation/public/' + router.currentRoute.params.token
route = '/api/browse/navigation/public/' + router.currentRoute.params.token
else
route = '/api/browse/navigation'
@@ -234,8 +233,8 @@ const mutations = {
state.data.find(item => {
if (item.id === updatedFile.id) {
item.name = updatedFile.name
item.icon_color = updatedFile.icon_color ? updatedFile.icon_color : null
item.icon_emoji = updatedFile.icon_emoji ? updatedFile.icon_emoji : null
item.color = updatedFile.color ? updatedFile.color : null
item.emoji = updatedFile.emoji ? updatedFile.emoji : null
}
})
},
resources/js/store/modules/fileFunctions.js
Vendored
+420 -428
View File
@@ -1,447 +1,439 @@
import i18n from '@/i18n/index'
import router from '@/router'
import { events } from '@/bus'
import { last } from 'lodash'
import {events} from '@/bus'
import {last} from 'lodash'
import axios from 'axios'
import Vue from 'vue'
import store from '../index'
const defaultState = {
processingPopup: undefined,
fileQueue: [],
filesInQueueTotal: 0,
filesInQueueUploaded: 0,
isProcessingFile: false,
uploadingProgress: 0
processingPopup: undefined,
fileQueue: [],
filesInQueueTotal: 0,
filesInQueueUploaded: 0,
isProcessingFile: false,
uploadingProgress: 0
}
const actions = {
downloadFolder: ({ commit, getters }, folder) => {
commit('PROCESSING_POPUP', {
title: i18n.t('popup_zipping.title'),
message: i18n.t('popup_zipping.message')
})
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/zip-folder/' + folder.id + '/public/' + router.currentRoute.params.token
: '/api/zip-folder/' + folder.id
axios.get(route)
.then(response => {
Vue.prototype.$downloadFile(response.data.url, response.data.name)
})
.catch(() => {
Vue.prototype.$isSomethingWrong()
})
.finally(() => {
commit('PROCESSING_POPUP', undefined)
})
},
downloadFiles: ({ commit, getters }) => {
let files = []
// get ids of selected files
getters.fileInfoDetail.forEach(file => files.push(file.id))
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/zip/public/' + router.currentRoute.params.token
: '/api/zip'
commit('PROCESSING_POPUP', {
title: i18n.t('popup_zipping.title'),
message: i18n.t('popup_zipping.message'),
})
axios.post(route, {
files: files
})
.then(response => {
Vue.prototype.$downloadFile(response.data.url, response.data.name)
})
.catch(() => {
Vue.prototype.$isSomethingWrong()
})
.finally(() => {
commit('PROCESSING_POPUP', undefined)
})
},
moveItem: ({ commit, getters, dispatch }, { to_item, noSelectedItem }) => {
let itemsToMove = []
let items = [noSelectedItem]
// If coming no selected item dont get items to move from fileInfoDetail
if (!noSelectedItem)
items = getters.fileInfoDetail
items.forEach(data => itemsToMove.push({
'force_delete': data.deleted_at ? true : false,
'id': data.id,
'type': data.type
}))
// Remove file preview
if (!noSelectedItem)
commit('CLEAR_FILEINFO_DETAIL')
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/move/public/' + router.currentRoute.params.token
: '/api/move'
axios
.post(route, {
_method: 'post',
to_id: to_item.id,
items: itemsToMove
})
.then(() => {
itemsToMove.forEach(item => {
commit('REMOVE_ITEM', item.id)
commit('INCREASE_FOLDER_ITEM', to_item.id)
if (item.type === 'folder')
dispatch('getAppData')
if (getters.currentFolder.location === 'public')
dispatch('getFolderTree')
})
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
createFolder: ({ commit, getters, dispatch }, folder) => {
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/create-folder/public/' + router.currentRoute.params.token
: '/api/create-folder'
axios
.post(route, {
parent_id: getters.currentFolder.id,
name: folder.name,
icon: folder.icon
})
.then(response => {
commit('ADD_NEW_FOLDER', response.data)
events.$emit('scrollTop')
//Set focus on new folder name
setTimeout(() => {
events.$emit('newFolder:focus', response.data.id)
}, 10)
if (getters.currentFolder.location !== 'public')
dispatch('getAppData')
if (getters.currentFolder.location === 'public')
dispatch('getFolderTree')
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
renameItem: ({ commit, getters, dispatch }, data) => {
// Updated name in favourites panel
if (getters.permission === 'master' && data.type === 'folder')
commit('UPDATE_NAME_IN_FAVOURITES', data)
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/rename-item/' + data.id + '/public/' + router.currentRoute.params.token
: '/api/rename-item/' + data.id
axios
.post(route, {
name: data.name,
type: data.type,
icon: data.icon,
_method: 'patch'
})
.then(response => {
commit('CHANGE_ITEM_NAME', response.data)
if (data.type === 'folder' && getters.currentFolder.location !== 'public')
dispatch('getAppData')
if (data.type === 'folder' && getters.currentFolder.location === 'public')
dispatch('getFolderTree')
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
uploadFiles: ({ commit, getters }, { form, fileSize, totalUploadedSize }) => {
return new Promise((resolve, reject) => {
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/upload/public/' + router.currentRoute.params.token
: '/api/upload'
// Create cancel token for axios cancellation
const CancelToken = axios.CancelToken,
source = CancelToken.source()
axios
.post(route, form, {
cancelToken: source.token,
headers: {
'Content-Type': 'application/octet-stream'
},
onUploadProgress: event => {
var percentCompleted = Math.floor(((totalUploadedSize + event.loaded) / fileSize) * 100)
commit('UPLOADING_FILE_PROGRESS', percentCompleted >= 100 ? 100 : percentCompleted)
// Set processing file
if (percentCompleted >= 100)
commit('PROCESSING_FILE', true)
}
})
.then(response => {
resolve(response)
commit('PROCESSING_FILE', false)
// Remove first file from file queue
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) {
// Add uploaded item into view
commit('ADD_NEW_ITEMS', response.data)
// Reset file progress
commit('UPLOADING_FILE_PROGRESS', 0)
// Increase count in files in queue uploaded for 1
commit('INCREASE_FILES_IN_QUEUE_UPLOADED')
}
// Start uploading next file if file queue is not empty
if (getters.fileQueue.length) {
Vue.prototype.$handleUploading(getters.fileQueue[0])
}
// Reset upload process
if (! getters.fileQueue.length)
commit('CLEAR_UPLOAD_PROGRESS')
})
.catch(error => {
reject(error)
let messages = {
'423': {
title: i18n.t('popup_exceed_limit.title'),
message: i18n.t('popup_exceed_limit.message')
},
'415': {
title: i18n.t('popup_mimetypes_blacklist.title'),
message: i18n.t('popup_mimetypes_blacklist.message')
},
'413': {
title: i18n.t('popup_paylod_error.title'),
message: i18n.t('popup_paylod_error.message')
}
}
events.$emit('alert:open', {
emoji: '😬😬😬',
title: messages[error.response.status]['title'],
message: messages[error.response.status]['message']
})
commit('PROCESSING_FILE', false)
commit('CLEAR_UPLOAD_PROGRESS')
})
// Cancel the upload request
events.$on('cancel-upload', () => {
source.cancel()
// Hide upload progress bar
commit('PROCESSING_FILE', false)
commit('CLEAR_UPLOAD_PROGRESS')
})
})
},
restoreItem: ({ commit, getters }, item) => {
let itemToRestore = []
let items = [item]
let restoreToHome = false
// If coming no selected item dont get items to restore from fileInfoDetail
if (!item)
items = getters.fileInfoDetail
// Check if file can be restored to home directory
if (getters.currentFolder.location === 'trash')
restoreToHome = true
items.forEach(data => itemToRestore.push({
type: data.type,
id: data.id
}))
// Remove file preview
commit('CLEAR_FILEINFO_DETAIL')
axios
.post(getters.api + '/trash/restore-items', {
to_home: restoreToHome,
data: itemToRestore
})
.then(
// Remove file
items.forEach(data => commit('REMOVE_ITEM', data.id))
)
.catch(() => Vue.prototype.$isSomethingWrong())
},
deleteItem: ({ commit, getters, dispatch }, noSelectedItem) => {
let itemsToDelete = []
let items = [noSelectedItem]
// If coming no selected item dont get items to move from fileInfoDetail
if (!noSelectedItem)
items = getters.fileInfoDetail
items.forEach(data => {
itemsToDelete.push({
force_delete: data.deleted_at ? true : false,
type: data.type,
id: data.id
})
// Remove file
commit('REMOVE_ITEM', data.id)
// Remove item from sidebar
if (getters.permission === 'master') {
if (data.type === 'folder')
commit('REMOVE_ITEM_FROM_FAVOURITES', data)
}
// Remove file
commit('REMOVE_ITEM', data.id)
// Remove item from sidebar
if (getters.permission === 'master') {
if (data.type === 'folder')
commit('REMOVE_ITEM_FROM_FAVOURITES', data)
}
})
// Remove file preview
if (!noSelectedItem) {
commit('CLEAR_FILEINFO_DETAIL')
}
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/remove-item/public/' + router.currentRoute.params.token
: '/api/remove-item'
axios
.post(route, {
_method: 'post',
data: itemsToDelete
})
.then(() => {
itemsToDelete.forEach(data => {
// If is folder, update app data
if (data.type === 'folder') {
if (data.id === getters.currentFolder.id) {
if (getters.currentFolder.location === 'public') {
dispatch('browseShared', [{ folder: last(getters.browseHistory), back: true, init: false }])
} else {
dispatch('getFolder', [{ folder: last(getters.browseHistory), back: true, init: false }])
}
}
}
})
if (getters.currentFolder.location !== 'public')
dispatch('getAppData')
if (getters.currentFolder.location === 'public')
dispatch('getFolderTree')
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
emptyTrash: ({ commit, getters }) => {
// Clear file browser
commit('LOADING_STATE', { loading: true, data: [] })
axios
.post(getters.api + '/trash/empty-trash', {
_method: 'delete'
})
.then(() => {
commit('LOADING_STATE', { loading: false, data: [] })
events.$emit('scrollTop')
// Remove file preview
commit('CLEAR_FILEINFO_DETAIL')
})
.catch(() => Vue.prototype.$isSomethingWrong())
}
downloadFolder: ({commit, getters}, folder) => {
commit('PROCESSING_POPUP', {
title: i18n.t('popup_zipping.title'),
message: i18n.t('popup_zipping.message')
})
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/zip/folder/' + folder.id + '/public/' + router.currentRoute.params.token
: '/api/zip/folder/' + folder.id
axios.get(route)
.then(response => {
Vue.prototype.$downloadFile(response.data.url, response.data.name)
})
.catch(() => {
Vue.prototype.$isSomethingWrong()
})
.finally(() => {
commit('PROCESSING_POPUP', undefined)
})
},
downloadFiles: ({commit, getters}) => {
let files = []
// get ids of selected files
getters.fileInfoDetail.forEach(file => files.push(file.id))
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/zip/files/public/' + router.currentRoute.params.token
: '/api/zip/files'
commit('PROCESSING_POPUP', {
title: i18n.t('popup_zipping.title'),
message: i18n.t('popup_zipping.message'),
})
axios.post(route, {
files: files
})
.then(response => {
Vue.prototype.$downloadFile(response.data.url, response.data.name)
})
.catch(() => {
Vue.prototype.$isSomethingWrong()
})
.finally(() => {
commit('PROCESSING_POPUP', undefined)
})
},
moveItem: ({commit, getters, dispatch}, {to_item, noSelectedItem}) => {
let itemsToMove = []
let items = [noSelectedItem]
// If coming no selected item dont get items to move from fileInfoDetail
if (!noSelectedItem)
items = getters.fileInfoDetail
items.forEach(data => itemsToMove.push({
'id': data.id,
'type': data.type
}))
// Remove file preview
if (!noSelectedItem)
commit('CLEAR_FILEINFO_DETAIL')
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/editor/move/public/' + router.currentRoute.params.token
: '/api/move'
axios
.post(route, {
to_id: to_item.id,
items: itemsToMove
})
.then(() => {
itemsToMove.forEach(item => {
commit('REMOVE_ITEM', item.id)
commit('INCREASE_FOLDER_ITEM', to_item.id)
if (item.type === 'folder')
dispatch('getAppData')
if (getters.currentFolder.location === 'public')
dispatch('getFolderTree')
})
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
createFolder: ({commit, getters, dispatch}, folder) => {
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/editor/create-folder/public/' + router.currentRoute.params.token
: '/api/create-folder'
axios
.post(route, {
parent_id: getters.currentFolder.id,
name: folder.name,
icon: folder.icon
})
.then(response => {
commit('ADD_NEW_FOLDER', response.data)
events.$emit('scrollTop')
// Set focus on new folder name
setTimeout(() => {
events.$emit('newFolder:focus', response.data.id)
}, 10)
if (getters.currentFolder.location !== 'public')
dispatch('getAppData')
if (getters.currentFolder.location === 'public')
dispatch('getFolderTree')
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
renameItem: ({commit, getters, dispatch}, data) => {
// Updated name in favourites panel
if (getters.permission === 'master' && data.type === 'folder')
commit('UPDATE_NAME_IN_FAVOURITES', data)
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/editor/rename/' + data.id + '/public/' + router.currentRoute.params.token
: '/api/rename/' + data.id
axios
.post(route, {
...data,
_method: 'patch'
})
.then(response => {
commit('CHANGE_ITEM_NAME', response.data)
if (data.type === 'folder' && getters.currentFolder.location !== 'public')
dispatch('getAppData')
if (data.type === 'folder' && getters.currentFolder.location === 'public')
dispatch('getFolderTree')
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
uploadFiles: ({commit, getters}, {form, fileSize, totalUploadedSize}) => {
return new Promise((resolve, reject) => {
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/editor/upload/public/' + router.currentRoute.params.token
: '/api/upload'
// Create cancel token for axios cancellation
const CancelToken = axios.CancelToken,
source = CancelToken.source()
axios
.post(route, form, {
cancelToken: source.token,
headers: {
'Content-Type': 'application/octet-stream'
},
onUploadProgress: event => {
var percentCompleted = Math.floor(((totalUploadedSize + event.loaded) / fileSize) * 100)
commit('UPLOADING_FILE_PROGRESS', percentCompleted >= 100 ? 100 : percentCompleted)
// Set processing file
if (percentCompleted >= 100)
commit('PROCESSING_FILE', true)
}
})
.then(response => {
resolve(response)
commit('PROCESSING_FILE', false)
// Remove first file from file queue
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) {
// Add uploaded item into view
commit('ADD_NEW_ITEMS', response.data)
// Reset file progress
commit('UPLOADING_FILE_PROGRESS', 0)
// Increase count in files in queue uploaded for 1
commit('INCREASE_FILES_IN_QUEUE_UPLOADED')
}
// Start uploading next file if file queue is not empty
if (getters.fileQueue.length) {
Vue.prototype.$handleUploading(getters.fileQueue[0])
}
// Reset upload process
if (!getters.fileQueue.length)
commit('CLEAR_UPLOAD_PROGRESS')
})
.catch(error => {
reject(error)
let messages = {
'423': {
title: i18n.t('popup_exceed_limit.title'),
message: i18n.t('popup_exceed_limit.message')
},
'415': {
title: i18n.t('popup_mimetypes_blacklist.title'),
message: i18n.t('popup_mimetypes_blacklist.message')
},
'413': {
title: i18n.t('popup_paylod_error.title'),
message: i18n.t('popup_paylod_error.message')
}
}
events.$emit('alert:open', {
emoji: '😬😬😬',
title: messages[error.response.status]['title'],
message: messages[error.response.status]['message']
})
commit('PROCESSING_FILE', false)
commit('CLEAR_UPLOAD_PROGRESS')
})
// Cancel the upload request
events.$on('cancel-upload', () => {
source.cancel()
// Hide upload progress bar
commit('PROCESSING_FILE', false)
commit('CLEAR_UPLOAD_PROGRESS')
})
})
},
restoreItem: ({commit, getters}, item) => {
let itemToRestore = []
let items = [item]
let restoreToHome = false
// If coming no selected item dont get items to restore from fileInfoDetail
if (!item)
items = getters.fileInfoDetail
// Check if file can be restored to home directory
if (getters.currentFolder.location === 'trash')
restoreToHome = true
items.forEach(data => itemToRestore.push({
type: data.type,
id: data.id
}))
// Remove file preview
commit('CLEAR_FILEINFO_DETAIL')
axios
.post(getters.api + '/trash/restore', {
to_home: restoreToHome,
items: itemToRestore
})
.then(
// Remove file
items.forEach(data => commit('REMOVE_ITEM', data.id))
)
.catch(() => Vue.prototype.$isSomethingWrong())
},
deleteItem: ({commit, getters, dispatch}, noSelectedItem) => {
let itemsToDelete = []
let items = [noSelectedItem]
// If coming no selected item dont get items to move from fileInfoDetail
if (!noSelectedItem)
items = getters.fileInfoDetail
items.forEach(data => {
itemsToDelete.push({
force_delete: data.deleted_at ? true : false,
type: data.type,
id: data.id
})
// Remove file
commit('REMOVE_ITEM', data.id)
// Remove item from sidebar
if (getters.permission === 'master') {
if (data.type === 'folder')
commit('REMOVE_ITEM_FROM_FAVOURITES', data)
}
// Remove file
commit('REMOVE_ITEM', data.id)
// Remove item from sidebar
if (getters.permission === 'master') {
if (data.type === 'folder')
commit('REMOVE_ITEM_FROM_FAVOURITES', data)
}
})
// Remove file preview
if (!noSelectedItem) {
commit('CLEAR_FILEINFO_DETAIL')
}
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/editor/remove/public/' + router.currentRoute.params.token
: '/api/remove'
axios
.post(route, {
items: itemsToDelete
})
.then(() => {
itemsToDelete.forEach(data => {
// If is folder, update app data
if (data.type === 'folder') {
if (data.id === getters.currentFolder.id) {
if (getters.currentFolder.location === 'public') {
dispatch('browseShared', [{folder: last(getters.browseHistory), back: true, init: false}])
} else {
dispatch('getFolder', [{folder: last(getters.browseHistory), back: true, init: false}])
}
}
}
})
if (getters.currentFolder.location !== 'public')
dispatch('getAppData')
if (getters.currentFolder.location === 'public')
dispatch('getFolderTree')
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
emptyTrash: ({commit, getters}) => {
// Clear file browser
commit('LOADING_STATE', {loading: true, data: []})
axios
.post(getters.api + '/trash/dump', {
_method: 'delete'
})
.then(() => {
commit('LOADING_STATE', {loading: false, data: []})
events.$emit('scrollTop')
commit('CLEAR_FILEINFO_DETAIL')
})
.catch(() => Vue.prototype.$isSomethingWrong())
}
}
const mutations = {
PROCESSING_POPUP(state, status) {
state.processingPopup = status
},
ADD_FILES_TO_QUEUE(state, file) {
state.fileQueue.push(file)
},
SHIFT_FROM_FILE_QUEUE(state) {
state.fileQueue.shift()
},
PROCESSING_FILE(state, status) {
state.isProcessingFile = status
},
UPLOADING_FILE_PROGRESS(state, percentage) {
state.uploadingProgress = percentage
},
INCREASE_FILES_IN_QUEUES_TOTAL(state, count) {
state.filesInQueueTotal += count
},
INCREASE_FILES_IN_QUEUE_UPLOADED(state) {
state.filesInQueueUploaded++
},
CLEAR_UPLOAD_PROGRESS(state) {
state.filesInQueueUploaded = 0
state.filesInQueueTotal = 0
state.fileQueue = []
}
PROCESSING_POPUP(state, status) {
state.processingPopup = status
},
ADD_FILES_TO_QUEUE(state, file) {
state.fileQueue.push(file)
},
SHIFT_FROM_FILE_QUEUE(state) {
state.fileQueue.shift()
},
PROCESSING_FILE(state, status) {
state.isProcessingFile = status
},
UPLOADING_FILE_PROGRESS(state, percentage) {
state.uploadingProgress = percentage
},
INCREASE_FILES_IN_QUEUES_TOTAL(state, count) {
state.filesInQueueTotal += count
},
INCREASE_FILES_IN_QUEUE_UPLOADED(state) {
state.filesInQueueUploaded++
},
CLEAR_UPLOAD_PROGRESS(state) {
state.filesInQueueUploaded = 0
state.filesInQueueTotal = 0
state.fileQueue = []
}
}
const getters = {
filesInQueueUploaded: state => state.filesInQueueUploaded,
filesInQueueTotal: state => state.filesInQueueTotal,
uploadingProgress: state => state.uploadingProgress,
isProcessingFile: state => state.isProcessingFile,
processingPopup: state => state.processingPopup,
fileQueue: state => state.fileQueue
filesInQueueUploaded: state => state.filesInQueueUploaded,
filesInQueueTotal: state => state.filesInQueueTotal,
uploadingProgress: state => state.uploadingProgress,
isProcessingFile: state => state.isProcessingFile,
processingPopup: state => state.processingPopup,
fileQueue: state => state.fileQueue
}
export default {
state: defaultState,
mutations,
actions,
getters
state: defaultState,
mutations,
actions,
getters
}
resources/js/store/modules/sharing.js
Vendored
+4 -5
View File
@@ -81,8 +81,7 @@ const actions = {
})
axios
.post('/api/share/cancel', {
_method: 'post',
.post('/api/share/revoke', {
tokens: tokens
})
.then(() => {
@@ -90,7 +89,7 @@ const actions = {
items.forEach(item => {
// Remove item from file browser
if ( getters.currentFolder , getters.currentFolder.location === 'shared' ) {
if ( getters.currentFolder && getters.currentFolder.location === 'shared' ) {
commit('REMOVE_ITEM', item.id)
}
@@ -112,8 +111,8 @@ const actions = {
getSingleFile: ({commit, state}) => {
let route = state.sharedDetail.protected
? '/api/files/private'
: '/api/files/' + router.currentRoute.params.token + '/public'
? '/api/browse/files/private'
: '/api/browse/files/' + router.currentRoute.params.token + '/public'
axios.get(route)
.then(response => {
resources/js/store/modules/userAuth.js
Vendored
+16 -16
View File
@@ -21,7 +21,7 @@ const actions = {
// Redirect user if is logged
if (router.currentRoute.name === 'SignIn')
router.push({ name: 'Files' })
router.push({name: 'Files'})
commit('RETRIEVE_USER', response.data)
@@ -61,13 +61,13 @@ const actions = {
let items = [folder]
// If dont coming single folder get folders to add to favourites from fileInfoDetail
if(!folder)
if (!folder)
items = context.getters.fileInfoDetail
items.forEach((data) => {
if(data.type === 'folder' ) {
if (data.type === 'folder') {
if(context.getters.user.data.relationships.favourites.data.attributes.folders.find(folder => folder.id === data.id)) return
if (context.getters.user.data.relationships.favourites.data.attributes.folders.find(folder => folder.id === data.id)) return
addFavourites.push({
id: data.id
@@ -76,24 +76,24 @@ const actions = {
})
// If dont coming single folder clear the selected folders in fileInfoDetail
if(!folder) {
if (!folder) {
context.commit('CLEAR_FILEINFO_DETAIL')
}
let pushToFavorites = []
// Check is favorites already don't include some of pushed folders
items.map(data => {
if(!context.getters.user.data.relationships.favourites.data.attributes.folders.find(folder => folder.id === data.id)){
if (!context.getters.user.data.relationships.favourites.data.attributes.folders.find(folder => folder.id === data.id)) {
pushToFavorites.push(data)
}
})
// Add to storage
context.commit('ADD_TO_FAVOURITES', pushToFavorites)
axios
.post(context.getters.api + '/browse/folders/favourites', {
.post(context.getters.api + '/folders/favourites', {
folders: addFavourites
})
.catch(() => {
@@ -127,13 +127,13 @@ const mutations = {
state.app = undefined
},
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,
folder.forEach(item => {
state.user.data.relationships.favourites.data.attributes.folders.push({
id: item.id,
name: item.name,
type: item.type,
})
})
})
},
UPDATE_NAME(state, name) {
state.user.data.relationships.settings.data.attributes.name = name
@@ -155,7 +155,7 @@ const mutations = {
const getters = {
permission: state => state.permission,
isGuest: state => ! state.authorized,
isGuest: state => !state.authorized,
isLogged: state => state.authorized,
user: state => state.user,
}
resources/js/views/Auth/SignIn.vue
+2 -2
View File
@@ -210,10 +210,10 @@
this.$scrollTop()
this.$store.commit('PROCESSING_POPUP', undefined)
if (this.config.isDemo) {
//if (this.config.isDemo) {
this.loginEmail = 'howdy@hi5ve.digital'
this.loginPassword = 'vuefilemanager'
}
//}
}
}
</script>