vuefilemanager/resources/js/store/modules/fileFunctions.js

import i18n from '/resources/js/i18n/index'
import router from '/resources/js/router'
import {events} from '/resources/js/bus'
import axios from 'axios'
import Vue from 'vue'

const defaultState = {
    processingPopup: undefined,
    isProcessingFile: false,
    filesInQueueUploaded: 0,
    filesInQueueTotal: 0,
    uploadingProgress: 0,
    fileQueue: [],
}

const actions = {
    downloadZip: ({getters}) => {
        let files = []

        // get ids of selected files
        getters.clipboard.forEach(file => {
            let type = file.data.type === 'folder'
                ? 'folder'
                : 'file'

            files.push(file.data.id + '|' + type)
        })

        let items = files.join(',')

        // Get route
        let route = getters.sharedDetail
            ? `/api/zip/${router.currentRoute.params.token}?items=${items}`
            : `/api/zip?items=${items}`

        Vue.prototype.$downloadFile(route, 'files.zip')
    },
    moveItem: ({commit, getters, dispatch}, {to_item, noSelectedItem}) => {

        let itemsToMove = []
        let items = [noSelectedItem]

        // If coming no selected item dont get items to move from clipboard
        if (!noSelectedItem)
            items = getters.clipboard

        items.forEach(data => itemsToMove.push({
            'id': data.data.id,
            'type': data.data.type
        }))

        // Remove file preview
        if (!noSelectedItem)
            commit('CLIPBOARD_CLEAR')

        // Get route
        let route = getters.sharedDetail
            ? `/api/editor/move/${router.currentRoute.params.token}`
            : '/api/move'

        let moveToId = null

        if (to_item.data)
            moveToId = to_item.data.id
        else if (to_item.id)
            moveToId = to_item.id

        axios
            .post(route, {
                to_id: moveToId,
                items: itemsToMove
            })
            .then(() => {
                itemsToMove.forEach(item => {
                    commit('REMOVE_ITEM', item.id)
                    commit('INCREASE_FOLDER_ITEM', moveToId)

                    if (item.type === 'folder')
                        dispatch('getAppData')

                    if (Vue.prototype.$isThisRoute(router.currentRoute, ['Public']))
                        dispatch('getFolderTree')
                })
            })
            .catch(() => Vue.prototype.$isSomethingWrong())
    },
    createFolder: ({commit, getters, dispatch}, folder) => {

        // Get route
        let route = getters.sharedDetail
            ? `/api/editor/create-folder/${router.currentRoute.params.token}`
            : '/api/create-folder'

        let parent_id = getters.currentFolder
            ? getters.currentFolder.data.id
            : undefined

        axios
            .post(route, {
                parent_id: parent_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.data.id)
                }, 10)

                if (Vue.prototype.$isThisRoute(router.currentRoute, ['Public']))
                    dispatch('getFolderTree')
                else
                    dispatch('getAppData')

            })
            .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
            ? `/api/editor/rename/${data.id}/${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' && ! Vue.prototype.$isThisRoute(router.currentRoute, ['Public']))
                    dispatch('getAppData')
                if (data.type === 'folder' && Vue.prototype.$isThisRoute(router.currentRoute, ['Public']))
                    dispatch('getFolderTree')
            })
            .catch(() => Vue.prototype.$isSomethingWrong())
    },
    uploadFiles: ({commit, getters}, {form, fileSize, totalUploadedSize}) => {
        return new Promise((resolve, reject) => {

            // Get route
            let route = getters.sharedDetail
                ? `/api/editor/upload/${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 => {
                        let 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)

                    // Proceed if was returned database record
                    if (response.data.data.id) {

                        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 ((! getters.currentFolder && !response.data.data.attributes.parent_id) || response.data.data.attributes.parent_id === getters.currentFolder.data.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')
                        },
                        '422': {
                            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')
                        }
                    }

                    console.log(error.response);
                    console.log(error.response.status);

                    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 = Vue.prototype.$isThisRoute(router.currentRoute, ['Trash'])

        // If coming no selected item dont get items to restore from clipboard
        if (!item)
            items = getters.clipboard

        items.forEach(data => itemToRestore.push({
            type: data.data.type,
            id: data.data.id
        }))

        // Remove file preview
        commit('CLIPBOARD_CLEAR')

        axios
            .post(getters.api + '/trash/restore', {
                to_home: restoreToHome,
                items: itemToRestore
            })
            .then(
                items.forEach(item => commit('REMOVE_ITEM', 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 clipboard
        if (!noSelectedItem)
            items = getters.clipboard

            items.forEach(data => {
                itemsToDelete.push({
                    force_delete: !!data.data.attributes.deleted_at,
                    type: data.data.type,
                    id: data.data.id
                })

            // Remove file
            commit('REMOVE_ITEM', data.data.id)

            // Remove item from sidebar
            if (getters.permission === 'master') {

                if (data.data.type === 'folder')
                    commit('REMOVE_ITEM_FROM_FAVOURITES', data)
            }

            // Remove file
            commit('REMOVE_ITEM', data.data.id)

            // Remove item from sidebar
            if (getters.permission === 'master') {

                if (data.data.type === 'folder')
                    commit('REMOVE_ITEM_FROM_FAVOURITES', data)
            }
        })

        // Remove file preview
        if (!noSelectedItem) {
            commit('CLIPBOARD_CLEAR')
        }

        // Get route
        let route = getters.sharedDetail
            ? `/api/editor/remove/${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.data.id) {

                            if (Vue.prototype.$isThisRoute(router.currentRoute, ['Public'])) {
                                dispatch('browseShared')
                            } else {
                                dispatch('getFolder')
                            }
                        }
                    }
                })

                if (Vue.prototype.$isThisRoute(router.currentRoute, ['Public']))
                    dispatch('getFolderTree')
                else
                    dispatch('getAppData')

            })
            //.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('CLIPBOARD_CLEAR')
            })
            .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 = []
    }
}

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
}

export default {
    state: defaultState,
    mutations,
    actions,
    getters
}