mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
Initial commit
This commit is contained in:
MakingCG
488
resources/js/store/modules/filesView.js
vendored
Normal file
488
resources/js/store/modules/filesView.js
vendored
Normal file
@@ -0,0 +1,488 @@
|
||||
import axios from 'axios'
|
||||
import {events} from '@/bus'
|
||||
|
||||
const defaultState = {
|
||||
fileInfoPanelVisible: localStorage.getItem('file_info_visibility') == 'true' || false,
|
||||
preview_type: localStorage.getItem('preview_type') || 'grid',
|
||||
uploadingFilesCount: undefined,
|
||||
fileInfoDetail: undefined,
|
||||
currentFolder: undefined,
|
||||
homeDirectory: undefined,
|
||||
uploadingFileProgress: 0,
|
||||
filesViewWidth: undefined,
|
||||
isSearching: false,
|
||||
browseHistory: [],
|
||||
isLoading: true,
|
||||
data: [],
|
||||
}
|
||||
|
||||
const actions = {
|
||||
goToFolder: (context, [folder, back = false, init = false]) => {
|
||||
events.$emit('show:content')
|
||||
|
||||
// Go to files view
|
||||
if (context.getters.currentView !== 'files') {
|
||||
context.commit('SET_CURRENT_VIEW', 'files')
|
||||
}
|
||||
|
||||
context.commit('LOADING_STATE', true)
|
||||
context.commit('FLUSH_DATA')
|
||||
|
||||
// Clear search
|
||||
if (context.state.isSearching) {
|
||||
context.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: folder.deleted_at || folder.location === 'trash' ? 'trash' : 'base'
|
||||
}
|
||||
|
||||
let url = currentFolder.location === 'trash' ?'/folder/' + currentFolder.unique_id + '?trash=true' : '/folder/' + currentFolder.unique_id
|
||||
|
||||
axios
|
||||
.get(context.getters.api + url)
|
||||
.then(response => {
|
||||
context.commit('LOADING_STATE', false)
|
||||
context.commit('GET_DATA', response.data)
|
||||
context.commit('STORE_CURRENT_FOLDER', currentFolder)
|
||||
|
||||
events.$emit('scrollTop')
|
||||
|
||||
if (back) {
|
||||
context.commit('REMOVE_BROWSER_HISTORY')
|
||||
|
||||
} else {
|
||||
if (!init) context.commit('ADD_BROWSER_HISTORY', currentFolder)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Show error message
|
||||
events.$emit('alert:open', {
|
||||
title: 'Whooops, something went wrong :(',
|
||||
message:
|
||||
"Something went wrong and we can't continue. Please contact us."
|
||||
})
|
||||
})
|
||||
},
|
||||
getTrash: (context, back = false) => {
|
||||
events.$emit('show:content')
|
||||
|
||||
// Go to files view
|
||||
if (context.getters.currentView !== 'files') {
|
||||
context.commit('SET_CURRENT_VIEW', 'files')
|
||||
}
|
||||
|
||||
if (! back) context.commit('FLUSH_BROWSER_HISTORY')
|
||||
context.commit('FLUSH_DATA')
|
||||
context.commit('LOADING_STATE', true)
|
||||
|
||||
// Create trash object for history
|
||||
let trash = {
|
||||
name: 'Trash',
|
||||
unique_id: undefined,
|
||||
location: 'trash-root',
|
||||
}
|
||||
|
||||
axios
|
||||
.get(context.getters.api + '/trash')
|
||||
.then(response => {
|
||||
context.commit('GET_DATA', response.data)
|
||||
context.commit('LOADING_STATE', false)
|
||||
context.commit('STORE_CURRENT_FOLDER', trash)
|
||||
context.commit('ADD_BROWSER_HISTORY', trash)
|
||||
|
||||
events.$emit('scrollTop')
|
||||
})
|
||||
.catch(() => {
|
||||
// Show error message
|
||||
events.$emit('alert:open', {
|
||||
title: 'Whooops, something went wrong :(',
|
||||
message:
|
||||
"Something went wrong and we can't continue. Please contact us."
|
||||
})
|
||||
})
|
||||
},
|
||||
emptyTrash: (context) => {
|
||||
context.commit('FLUSH_DATA')
|
||||
context.commit('LOADING_STATE', true)
|
||||
|
||||
axios
|
||||
.delete(context.getters.api + '/empty-trash')
|
||||
.then(response => {
|
||||
context.commit('LOADING_STATE', false)
|
||||
events.$emit('scrollTop')
|
||||
|
||||
// Remove file preview
|
||||
context.commit('CLEAR_FILEINFO_DETAIL')
|
||||
|
||||
// Show error message
|
||||
events.$emit('success:open', {
|
||||
title: 'Your trash was erased!',
|
||||
message: 'So now, you have clear and empty trash.',
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
// Show error message
|
||||
events.$emit('alert:open', {
|
||||
title: 'Whooops, something went wrong :(',
|
||||
message:
|
||||
"Something went wrong and we can't continue. Please contact us."
|
||||
})
|
||||
})
|
||||
},
|
||||
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: 'Whooops, something went wrong :(',
|
||||
message:
|
||||
"Something went wrong and we can't continue. Please contact us."
|
||||
})
|
||||
})
|
||||
},
|
||||
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: 'Whooops, something went wrong :(',
|
||||
message:
|
||||
"Something went wrong and we can't continue. Please contact us."
|
||||
})
|
||||
})
|
||||
},
|
||||
removeItem: (context, data) => {
|
||||
|
||||
// Remove file
|
||||
context.commit('REMOVE_ITEM', data.unique_id)
|
||||
if (data.type === 'file') context.commit('REMOVE_ITEM_FROM_RECENT_UPLOAD', data.unique_id)
|
||||
if (data.type === 'folder') context.commit('REMOVE_ITEM_FROM_FAVOURITES', data.unique_id)
|
||||
|
||||
// Remove file preview
|
||||
context.commit('CLEAR_FILEINFO_DETAIL')
|
||||
|
||||
axios
|
||||
.post(context.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: 'Whooops, something went wrong :(',
|
||||
message:
|
||||
"Something went wrong and we can't continue. Please contact us."
|
||||
})
|
||||
})
|
||||
},
|
||||
restoreItem: (context, item) => {
|
||||
// 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,
|
||||
})
|
||||
.catch(() => {
|
||||
// Show error message
|
||||
events.$emit('alert:open', {
|
||||
title: 'Whooops, something went wrong :(',
|
||||
message:
|
||||
"Something went wrong and we can't continue. Please contact us."
|
||||
})
|
||||
})
|
||||
},
|
||||
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 => {
|
||||
context.commit('ADD_NEW_ITEMS', response.data)
|
||||
context.commit('UPDATE_RECENT_UPLOAD', response.data)
|
||||
resolve(response)
|
||||
})
|
||||
.catch(error => {
|
||||
reject(error)
|
||||
|
||||
// Show error message
|
||||
events.$emit('alert:open', {
|
||||
title: 'Whooops, something went wrong :(',
|
||||
message:
|
||||
"Something went wrong and we can't continue. Please contact us."
|
||||
})
|
||||
|
||||
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: 'Whooops, something went wrong :(',
|
||||
message:
|
||||
"Something went wrong and we can't continue. Please contact us."
|
||||
})
|
||||
})
|
||||
},
|
||||
getSearchResult: (context, query) => {
|
||||
context.commit('FLUSH_DATA')
|
||||
context.commit('LOADING_STATE', true)
|
||||
context.commit('CHANGE_SEARCHING_STATE', true)
|
||||
|
||||
axios
|
||||
.get(context.getters.api + '/search', {
|
||||
params: {query: query}
|
||||
})
|
||||
.then(response => {
|
||||
context.commit('LOADING_STATE', false)
|
||||
context.commit('GET_DATA', response.data)
|
||||
})
|
||||
.catch(() => {
|
||||
// Show error message
|
||||
events.$emit('alert:open', {
|
||||
title: 'Whooops, something went wrong :(',
|
||||
message:
|
||||
"Something went wrong and we can't continue. Please contact us."
|
||||
})
|
||||
})
|
||||
},
|
||||
changePreviewType: ({commit, dispatch, state}) => {
|
||||
// Get preview type
|
||||
let previewType = localStorage.getItem('preview_type') == 'list' ? 'grid' : 'list'
|
||||
|
||||
// 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 {
|
||||
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) => {
|
||||
axios
|
||||
.get(context.getters.api + '/file-detail/' + file.unique_id)
|
||||
.then(response => {
|
||||
context.commit('LOAD_FILEINFO_DETAIL', response.data)
|
||||
})
|
||||
.catch(() => {
|
||||
// Show error message
|
||||
events.$emit('alert:open', {
|
||||
title: 'Whooops, something went wrong :(',
|
||||
message:
|
||||
"Something went wrong and we can't continue. Please contact us."
|
||||
})
|
||||
})
|
||||
},
|
||||
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: 'Whooops, something went wrong :(',
|
||||
message:
|
||||
"Something went wrong and we can't continue. Please contact us."
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
LOADING_STATE(state, val) {
|
||||
state.isLoading = val
|
||||
},
|
||||
SET_START_DIRECTORY(state, directory) {
|
||||
state.homeDirectory = directory
|
||||
},
|
||||
FLUSH_BROWSER_HISTORY(state) {
|
||||
state.browseHistory = []
|
||||
},
|
||||
ADD_BROWSER_HISTORY(state, folder) {
|
||||
state.browseHistory.push(folder)
|
||||
},
|
||||
REMOVE_BROWSER_HISTORY(state) {
|
||||
state.browseHistory.pop()
|
||||
},
|
||||
CHANGE_ITEM_NAME(state, updatedFile) {
|
||||
// Rename filename in file info detail
|
||||
if (
|
||||
state.fileInfoDetail &&
|
||||
state.fileInfoDetail.unique_id == updatedFile.unique_id
|
||||
) {
|
||||
state.fileInfoDetail = updatedFile
|
||||
}
|
||||
|
||||
// Get file
|
||||
const file = state.data.find(
|
||||
el => el.unique_id == updatedFile.unique_id
|
||||
)
|
||||
|
||||
file.file_url = updatedFile.file_url
|
||||
file.thumbnail = updatedFile.thumbnail
|
||||
|
||||
if (this._vm.$isMobile()) {
|
||||
file.name = updatedFile.name
|
||||
}
|
||||
},
|
||||
CLEAR_FILEINFO_DETAIL(state) {
|
||||
state.fileInfoDetail = undefined
|
||||
},
|
||||
LOAD_FILEINFO_DETAIL(state, item) {
|
||||
state.fileInfoDetail = item
|
||||
},
|
||||
GET_FILEINFO_DETAIL(state, item) {
|
||||
state.fileInfoDetail = state.data.find(
|
||||
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
|
||||
},
|
||||
UPLOADING_FILE_PROGRESS(state, percentage) {
|
||||
state.uploadingFileProgress = percentage
|
||||
},
|
||||
UPDATE_FILE_COUNT_PROGRESS(state, data) {
|
||||
state.uploadingFilesCount = data
|
||||
},
|
||||
FLUSH_DATA(state) {
|
||||
state.data = []
|
||||
},
|
||||
GET_DATA(state, loaded_data) {
|
||||
state.data = loaded_data
|
||||
},
|
||||
ADD_NEW_FOLDER(state, folder) {
|
||||
state.data.unshift(folder)
|
||||
},
|
||||
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)
|
||||
},
|
||||
INCREASE_FOLDER_ITEM(state, unique_id) {
|
||||
state.data.map(el => {
|
||||
if (el.unique_id && el.unique_id == unique_id) el.items++
|
||||
})
|
||||
},
|
||||
STORE_CURRENT_FOLDER(state, folder) {
|
||||
state.currentFolder = folder
|
||||
},
|
||||
SET_FILES_VIEW_SIZE(state, type) {
|
||||
state.filesViewWidth = type
|
||||
},
|
||||
}
|
||||
|
||||
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,
|
||||
}
|
||||
|
||||
export default {
|
||||
state: defaultState,
|
||||
getters,
|
||||
actions,
|
||||
mutations
|
||||
}
|
||||
Reference in New Issue
Block a user