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

vuex refactoring

Browse Source
This commit is contained in:
carodej
2020-04-23 17:57:55 +02:00
parent 8cbc58f775
commit c4b26d70b5
18 changed files with 286 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/VueFileManagerComponents/FilesView/ContextMenu.vue
+1 -1
View File
@@ -160,7 +160,7 @@
},
ItemDetail() {
// Dispatch load file info detail
this.$store.dispatch('loadFileInfoDetail', this.item)
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
// Show panel if is not open
this.$store.dispatch('fileInfoToggle', true)
resources/js/components/VueFileManagerComponents/FilesView/DesktopToolbar.vue
+3 -3
View File
@@ -84,7 +84,7 @@
'currentFolder',
'browseHistory',
'homeDirectory',
'preview_type',
'FilePreviewType',
]),
directoryName() {
return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
@@ -95,7 +95,7 @@
return this.browseHistory[length] ? this.browseHistory[length] : this.homeDirectory
},
preview() {
return this.preview_type === 'list' ? 'th' : 'th-list'
return this.FilePreviewType === 'list' ? 'th' : 'th-list'
},
isTrash() {
return this.currentFolder.location === 'trash' || this.currentFolder.location === 'trash-root'
@@ -122,7 +122,7 @@
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.previousFolder, true])
} else {
this.$store.dispatch('goToFolder', [this.previousFolder, true])
this.$store.dispatch('getFolder', [this.previousFolder, true])
}
}
},
resources/js/components/VueFileManagerComponents/FilesView/FileBrowser.vue
+5 -5
View File
@@ -26,7 +26,7 @@
name="file"
tag="section"
class="file-list"
:class="preview_type"
:class="FilePreviewType"
>
<FileItemList
@dragstart="dragStart(item)"
@@ -46,7 +46,7 @@
name="file"
tag="section"
class="file-list"
:class="preview_type"
:class="FilePreviewType"
>
<FileItemGrid
@dragstart="dragStart(item)"
@@ -112,16 +112,16 @@
'fileInfoVisible',
'fileInfoDetail',
'currentFolder',
'preview_type',
'FilePreviewType',
'isSearching',
'isLoading',
'data'
]),
isGrid() {
return this.preview_type === 'grid'
return this.FilePreviewType === 'grid'
},
isList() {
return this.preview_type === 'list'
return this.FilePreviewType === 'list'
},
isEmpty() {
return this.data.length == 0
resources/js/components/VueFileManagerComponents/FilesView/FileItemGrid.vue
+5 -5
View File
@@ -80,7 +80,7 @@
name: 'FileItem',
props: ['data'],
computed: {
...mapGetters(['preview_type']),
...mapGetters(['FilePreviewType']),
isFolder() {
return this.data.type === 'folder'
},
@@ -113,7 +113,7 @@
methods: {
showItemActions() {
// Load file info detail
this.$store.dispatch('loadFileInfoDetail', this.data)
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
events.$emit('mobileMenu:show')
},
@@ -139,12 +139,12 @@
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.data, false])
} else {
this.$store.dispatch('goToFolder', [this.data, false])
this.$store.dispatch('getFolder', [this.data, false])
}
}
// Load file info detail
this.$store.dispatch('loadFileInfoDetail', this.data)
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
// Get target classname
let itemClass = e.target.className
@@ -173,7 +173,7 @@
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.data, false])
} else {
this.$store.dispatch('goToFolder', [this.data, false])
this.$store.dispatch('getFolder', [this.data, false])
}
}
},
resources/js/components/VueFileManagerComponents/FilesView/FileItemList.vue
+5 -5
View File
@@ -82,7 +82,7 @@
name: 'FileItem',
props: ['data'],
computed: {
...mapGetters(['preview_type']),
...mapGetters(['FilePreviewType']),
isFolder() {
return this.data.type === 'folder'
},
@@ -126,7 +126,7 @@
methods: {
showItemActions() {
// Load file info detail
this.$store.dispatch('loadFileInfoDetail', this.data)
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
//this.isClicked = true
@@ -154,12 +154,12 @@
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.data, false])
} else {
this.$store.dispatch('goToFolder', [this.data, false])
this.$store.dispatch('getFolder', [this.data, false])
}
}
// Load file info detail
this.$store.dispatch('loadFileInfoDetail', this.data)
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
// Get target classname
let itemClass = e.target.className
@@ -188,7 +188,7 @@
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.data, false])
} else {
this.$store.dispatch('goToFolder', [this.data, false])
this.$store.dispatch('getFolder', [this.data, false])
}
}
},
resources/js/components/VueFileManagerComponents/FilesView/MobileActions.vue
+3 -3
View File
@@ -52,12 +52,12 @@
UploadProgress,
},
computed: {
...mapGetters(['preview_type']),
...mapGetters(['FilePreviewType']),
previewIcon() {
return this.preview_type === 'list' ? 'th' : 'th-list'
return this.FilePreviewType === 'list' ? 'th' : 'th-list'
},
previewText() {
return this.preview_type === 'list' ? this.$t('preview_type.grid') : this.$t('preview_type.list')
return this.FilePreviewType === 'list' ? this.$t('preview_type.grid') : this.$t('preview_type.list')
}
},
methods: {
resources/js/components/VueFileManagerComponents/FilesView/MobileToolbar.vue
+2 -2
View File
@@ -39,11 +39,11 @@
computed: {
...mapGetters([
'fileInfoVisible',
'FilePreviewType',
'fileInfoDetail',
'currentFolder',
'browseHistory',
'homeDirectory',
'preview_type',
'appSize',
]),
directoryName() {
@@ -78,7 +78,7 @@
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.previousFolder, false])
} else {
this.$store.dispatch('goToFolder', [this.previousFolder, false])
this.$store.dispatch('getFolder', [this.previousFolder, false])
}
}
},
resources/js/components/VueFileManagerComponents/FilesView/SearchBar.vue
+1 -1
View File
@@ -54,7 +54,7 @@
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.currentFolder, true])
} else {
this.$store.dispatch('goToFolder', [this.currentFolder, true])
this.$store.dispatch('getFolder', [this.currentFolder, true])
}
}
resources/js/components/VueFileManagerComponents/Sidebar/Sidebar.vue
+3 -3
View File
@@ -121,12 +121,12 @@
},
goHome() {
this.$store.commit('FLUSH_BROWSER_HISTORY')
this.$store.dispatch('goToFolder', [this.homeDirectory, true])
this.$store.dispatch('getFolder', [this.homeDirectory, true])
},
openFolder(folder) {
// Go to folder
this.$store.dispatch('goToFolder', [folder, false])
this.$store.dispatch('getFolder', [folder, false])
},
downloadFile(file) {
@@ -134,7 +134,7 @@
},
showFileDetail(file) {
// Dispatch load file info detail
this.$store.dispatch('getLatestUploadDetail', file)
this.$store.dispatch('getFileDetail', file)
// Show panel if is not open
this.$store.dispatch('fileInfoToggle', true)
resources/js/store/index.js
Vendored
+6 -1
View File
@@ -1,6 +1,7 @@
import Vuex from 'vuex'
import Vue from 'vue'
import fileFunctions from './modules/fileFunctions'
import fileBrowser from './modules/fileBrowser'
import userAuth from './modules/userAuth'
import sharing from './modules/sharing'
@@ -10,6 +11,10 @@ Vue.use(Vuex)
export default new Vuex.Store({
modules: {
fileBrowser, userAuth, app, sharing,
fileFunctions,
fileBrowser,
userAuth,
sharing,
app,
}
})
resources/js/store/modules/app.js
Vendored
+47 -2
View File
@@ -1,19 +1,64 @@
const defaultState = {
fileInfoPanelVisible: localStorage.getItem('file_info_visibility') == 'true' || false,
FilePreviewType: localStorage.getItem('FilePreviewType') || 'list',
appSize: undefined,
config: undefined,
}
const actions = {
changePreviewType: ({commit, dispatch, state, getters}) => {
// Get preview type
let previewType = state.FilePreviewType == 'grid' ? 'list' : 'grid'
// Store preview type to localStorage
localStorage.setItem('preview_type', previewType)
// Change preview
commit('CHANGE_PREVIEW', previewType)
if (getters.currentFolder.location === 'trash-root') {
dispatch('getTrash')
} else {
if ( this.$isThisLocation('public') ) {
dispatch('browseShared', [this.currentFolder(), false, true])
} else {
dispatch('getFolder', [getters.currentFolder, false, true])
}
}
},
fileInfoToggle: (context, visibility = undefined) => {
if (!visibility) {
if (context.state.fileInfoPanelVisible) {
context.commit('FILE_INFO_TOGGLE', false)
} else {
context.commit('FILE_INFO_TOGGLE', true)
}
} else {
context.commit('FILE_INFO_TOGGLE', visibility)
}
},
}
const mutations = {
SET_CONFIG(state, config) {
state.config = config
FILE_INFO_TOGGLE(state, isVisible) {
state.fileInfoPanelVisible = isVisible
localStorage.setItem('file_info_visibility', isVisible)
},
SET_APP_WIDTH(state, scale) {
state.appSize = scale
},
CHANGE_PREVIEW(state, type) {
state.FilePreviewType = type
},
SET_CONFIG(state, config) {
state.config = config
},
}
const getters = {
fileInfoVisible: state => state.fileInfoPanelVisible,
FilePreviewType: state => state.FilePreviewType,
appSize: state => state.appSize,
api: state => state.config.api,
config: state => state.config,
resources/js/store/modules/fileBrowser.js
Vendored
+2 -247
View File
@@ -5,8 +5,6 @@ import { includes } from 'lodash'
import i18n from '@/i18n/index'
const defaultState = {
fileInfoPanelVisible: localStorage.getItem('file_info_visibility') == 'true' || false,
preview_type: localStorage.getItem('preview_type') || 'list',
uploadingFilesCount: undefined,
fileInfoDetail: undefined,
currentFolder: undefined,
@@ -20,7 +18,7 @@ const defaultState = {
}
const actions = {
goToFolder: (context, [folder, back = false, init = false]) => {
getFolder: (context, [folder, back = false, init = false]) => {
events.$emit('show:content')
// Go to files view
@@ -144,183 +142,6 @@ const actions = {
})
})
},
emptyTrash: (context) => {
context.commit('FLUSH_DATA')
context.commit('LOADING_STATE', true)
axios
.delete(context.getters.api + '/empty-trash')
.then(() => {
context.commit('LOADING_STATE', false)
events.$emit('scrollTop')
// Remove file preview
context.commit('CLEAR_FILEINFO_DETAIL')
// Show error message
events.$emit('success:open', {
title: i18n.t('popup_trashed.title'),
message: i18n.t('popup_trashed.message'),
})
})
.catch(() => {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
})
},
createFolder: (context, folderName) => {
const parent_id = context.state.currentFolder
? context.state.currentFolder.unique_id
: 0
axios
.post(context.getters.api + '/create-folder', {
parent_id: parent_id,
name: folderName
})
.then(response => {
context.commit('ADD_NEW_FOLDER', response.data)
})
.catch(() => {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
})
},
removeItems: (context, [ids, items]) => {
context.commit('REMOVE_ITEMS', ids)
// Remove file preview
context.commit('CLEAR_FILEINFO_DETAIL')
axios
.post(context.getters.api + '/remove-items', {
items: items
})
.catch(() => {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
})
},
removeItem: ({commit, state, getters}, data) => {
// Remove file
commit('REMOVE_ITEM', 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')
axios
.post(getters.api + '/remove-item', {
type: data.type,
unique_id: data.unique_id,
force_delete: data.deleted_at ? true : false
})
.catch(() => {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
})
},
restoreItem: (context, item) => {
let restoreToHome = false
// Check if file can be restored to home directory
if (context.state.currentFolder.location === 'trash') restoreToHome = true
// Remove file
context.commit('REMOVE_ITEM', item.unique_id)
// Remove file preview
context.commit('CLEAR_FILEINFO_DETAIL')
axios
.post(context.getters.api + '/restore-item', {
type: item.type,
unique_id: item.unique_id,
to_home: restoreToHome,
})
.catch(() => {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
})
},
uploadFiles: (context, files) => {
return new Promise((resolve, reject) => {
axios
.post(context.getters.api + '/upload-file', files, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
var percentCompleted = Math.round(
(progressEvent.loaded * 100) /
progressEvent.total
)
context.commit(
'UPLOADING_FILE_PROGRESS',
percentCompleted
)
}
})
.then(response => {
// Check if user is in uploading folder, if yes, than show new file
if (response.data.folder_id == context.state.currentFolder.unique_id)
context.commit('ADD_NEW_ITEMS', response.data)
context.commit('UPDATE_RECENT_UPLOAD', response.data)
context.commit(
'UPLOADING_FILE_PROGRESS',
0
)
resolve(response)
})
.catch(error => {
reject(error)
context.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
})
})
},
changeItemName: (context, data) => {
if (data.type === 'folder') context.commit('UPDATE_NAME_IN_FAVOURITES', data)
axios
.post(context.getters.api + '/rename-item', data)
.then(response => {
context.commit('CHANGE_ITEM_NAME', response.data)
})
.catch(() => {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
})
},
getSearchResult: (context, query) => {
context.commit('FLUSH_DATA')
context.commit('LOADING_STATE', true)
@@ -342,40 +163,7 @@ const actions = {
})
})
},
changePreviewType: ({commit, dispatch, state}) => {
// Get preview type
let previewType = localStorage.getItem('preview_type') == 'grid' ? 'list' : 'grid'
// Store preview type to localStorage
localStorage.setItem('preview_type', previewType)
// Change preview
commit('CHANGE_PREVIEW', previewType)
if (state.currentFolder.location === 'trash-root') {
dispatch('getTrash')
} else {
if ( this.$isThisLocation('public') ) {
dispatch('browseShared', [this.currentFolder(), false, true])
} else {
dispatch('goToFolder', [state.currentFolder, false, true])
}
}
},
fileInfoToggle: (context, visibility = undefined) => {
if (!visibility) {
if (context.state.fileInfoPanelVisible) {
context.commit('FILE_INFO_TOGGLE', false)
} else {
context.commit('FILE_INFO_TOGGLE', true)
}
} else {
context.commit('FILE_INFO_TOGGLE', visibility)
}
},
getLatestUploadDetail: (context, file) => {
getFileDetail: (context, file) => {
axios
.get(context.getters.api + '/file-detail/' + file.unique_id)
.then(response => {
@@ -389,29 +177,6 @@ const actions = {
})
})
},
loadFileInfoDetail: (context, file) => {
context.commit('GET_FILEINFO_DETAIL', file)
},
moveItem: (context, [item_from, to_item]) => {
axios
.post(context.getters.api + '/move-item', {
from_unique_id: item_from.unique_id,
from_type: item_from.type,
to_unique_id: to_item.unique_id
})
.then(() => {
context.commit('REMOVE_ITEM', item_from.unique_id)
context.commit('INCREASE_FOLDER_ITEM', to_item.unique_id)
})
.catch(() => {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
})
}
}
const mutations = {
@@ -458,14 +223,6 @@ const mutations = {
el => el.unique_id == item.unique_id
)
},
FILE_INFO_TOGGLE(state, isVisible) {
state.fileInfoPanelVisible = isVisible
localStorage.setItem('file_info_visibility', isVisible)
},
CHANGE_PREVIEW(state, type) {
state.preview_type = type
},
CHANGE_SEARCHING_STATE(state, searchState) {
state.isSearching = searchState
},
@@ -511,13 +268,11 @@ const mutations = {
const getters = {
uploadingFileProgress: state => state.uploadingFileProgress,
uploadingFilesCount: state => state.uploadingFilesCount,
fileInfoVisible: state => state.fileInfoPanelVisible,
fileInfoDetail: state => state.fileInfoDetail,
filesViewWidth: state => state.filesViewWidth,
homeDirectory: state => state.homeDirectory,
currentFolder: state => state.currentFolder,
browseHistory: state => state.browseHistory,
preview_type: state => state.preview_type,
isSearching: state => state.isSearching,
isLoading: state => state.isLoading,
data: state => state.data,
resources/js/store/modules/fileFunctions.js
Vendored
+154
View File
@@ -0,0 +1,154 @@
import axios from 'axios'
import {events} from '@/bus'
import i18n from '@/i18n/index'
const actions = {
moveItem: ({commit, getters}, [item_from, to_item]) => {
axios
.post(getters.api + '/move-item', {
from_unique_id: item_from.unique_id,
from_type: item_from.type,
to_unique_id: to_item.unique_id
})
.then(() => {
commit('REMOVE_ITEM', item_from.unique_id)
commit('INCREASE_FOLDER_ITEM', to_item.unique_id)
})
.catch(() => isSomethingWrong())
},
createFolder: ({commit, getters}, folderName) => {
const parent_id = getters.currentFolder ? getters.currentFolder.unique_id : 0
axios
.post(getters.api + '/create-folder', {
parent_id: parent_id,
name: folderName
})
.then(response => {
commit('ADD_NEW_FOLDER', response.data)
})
.catch(() => isSomethingWrong())
},
changeItemName: ({commit, getters}, data) => {
// Updated name in favourites panel
if (data.type === 'folder')
commit('UPDATE_NAME_IN_FAVOURITES', data)
axios
.post(getters.api + '/rename-item', data)
.then(response => {
commit('CHANGE_ITEM_NAME', response.data)
})
.catch(() => isSomethingWrong())
},
uploadFiles: ({commit, getters}, files) => {
return new Promise((resolve, reject) => {
axios
.post(getters.api + '/upload-file', files, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
commit('UPLOADING_FILE_PROGRESS', percentCompleted)
}
})
.then(response => {
// Check if user is in uploading folder, if yes, than show new file
if (response.data.folder_id == getters.currentFolder.unique_id)
commit('ADD_NEW_ITEMS', response.data)
commit('UPDATE_RECENT_UPLOAD', response.data)
commit('UPLOADING_FILE_PROGRESS', 0)
resolve(response)
})
.catch(error => {
reject(error)
context.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
})
})
},
restoreItem: ({commit, getters}, item) => {
let restoreToHome = false
// Check if file can be restored to home directory
if (getters.currentFolder.location === 'trash')
restoreToHome = true
// Remove file
commit('REMOVE_ITEM', item.unique_id)
// Remove file preview
commit('CLEAR_FILEINFO_DETAIL')
axios
.post(getters.api + '/restore-item', {
type: item.type,
unique_id: item.unique_id,
to_home: restoreToHome,
})
.catch(() => isSomethingWrong())
},
removeItem: ({commit, getters}, data) => {
// Remove file
commit('REMOVE_ITEM', 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')
axios
.post(getters.api + '/remove-item', {
type: data.type,
unique_id: data.unique_id,
force_delete: data.deleted_at ? true : false
})
.catch(() => isSomethingWrong())
},
emptyTrash: ({commit, getters}) => {
// Clear file browser
commit('FLUSH_DATA')
commit('LOADING_STATE', true)
axios
.delete(getters.api + '/empty-trash')
.then(() => {
commit('LOADING_STATE', false)
events.$emit('scrollTop')
// Remove file preview
commit('CLEAR_FILEINFO_DETAIL')
// Show success message
events.$emit('success:open', {
title: i18n.t('popup_trashed.title'),
message: i18n.t('popup_trashed.message'),
})
})
.catch(() => isSomethingWrong())
},
}
// Show error message
function isSomethingWrong() {
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
}
export default {
actions,
}
resources/js/store/modules/sharing.js
Vendored
+1 -1
View File
@@ -37,7 +37,7 @@ const actions = {
location: 'public'
}
let route = state.sharedDetail.protected ? '/api/browse-private/' : '/api/browse-public/'
let route = getters.sharedDetail.protected ? '/api/browse-private/' : '/api/browse-public/'
return new Promise((resolve, reject) => {
axios
resources/js/views/Files.vue
+2 -2
View File
@@ -53,7 +53,7 @@
this.$store.commit('SET_START_DIRECTORY', this.config.directory)
// Load folder
this.$store.dispatch('goToFolder', [
this.$store.dispatch('getFolder', [
{
unique_id: this.config.directory.unique_id,
name: this.config.directory.name,
@@ -74,7 +74,7 @@
this.$store.commit('SET_START_DIRECTORY', homeDirectory)
// Load folder
this.$store.dispatch('goToFolder', [homeDirectory, false, true])
this.$store.dispatch('getFolder', [homeDirectory, false, true])
}
var filesView = document.getElementById('files-view');