import axios from 'axios' import {events} from '@/bus' const defaultState = { fileInfoPanelVisible: localStorage.getItem('file_info_visibility') == 'true' || false, preview_type: localStorage.getItem('preview_type') || 'list', 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: this.$t('popup_error.title'), message: this.$t('popup_error.message'), }) }) }, 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: this.$t('popup_error.title'), message: this.$t('popup_error.message'), }) }) }, 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: this.$t('popup_trashed.title'), message: this.$t('popup_trashed.message'), }) }) .catch(() => { // Show error message events.$emit('alert:open', { title: this.$t('popup_error.title'), message: this.$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: this.$t('popup_error.title'), message: this.$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: this.$t('popup_error.title'), message: this.$t('popup_error.message'), }) }) }, removeItem: ({commit, state, getters}, data) => { // Remove file commit('REMOVE_ITEM', data.unique_id) if (data.type === 'file' || data.type === 'image') commit('REMOVE_ITEM_FROM_RECENT_UPLOAD', data.unique_id) if (data.type === 'folder') commit('REMOVE_ITEM_FROM_FAVOURITES', data) // 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: this.$t('popup_error.title'), message: this.$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: this.$t('popup_error.title'), message: this.$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: this.$t('popup_error.title'), message: this.$t('popup_error.message'), }) }) }, 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: this.$t('popup_error.title'), message: this.$t('popup_error.message'), }) }) }, 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 { 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: this.$t('popup_error.title'), message: this.$t('popup_error.message'), }) }) }, 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: this.$t('popup_error.title'), message: this.$t('popup_error.message'), }) }) } } 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 } // Rename item name in data view state.data.find(item => { if (item.unique_id == updatedFile.unique_id) item.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 }