From ba315014faa89ad86ad594a60aa621ccd29596c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milo=C5=A1=20Holba?= Date: Sat, 15 Aug 2020 17:41:46 +0200 Subject: [PATCH] split code to components, add arrow functions --- public/mix-manifest.json | 18 +- .../js/components/FilesView/ContextMenu.vue | 663 ++++++++++------- .../FilesView/DesktopMediaPreviewMenu.vue | 142 ---- .../components/FilesView/DesktopToolbar.vue | 701 ++++++++++-------- .../components/FilesView/FileFullPreview.vue | 42 +- .../js/components/FilesView/FileItemList.vue | 7 +- .../FilesView/FilePreviewActions.vue | 73 ++ .../FilesView/FilePreviewNavigationPanel.vue | 327 ++++++++ .../components/FilesView/MediaFullPreview.vue | 262 +------ resources/js/store/modules/fileFunctions.js | 481 ++++++------ resources/js/views/Shared/SharedPage.vue | 503 +++++++------ 11 files changed, 1768 insertions(+), 1451 deletions(-) delete mode 100644 resources/js/components/FilesView/DesktopMediaPreviewMenu.vue create mode 100644 resources/js/components/FilesView/FilePreviewActions.vue create mode 100644 resources/js/components/FilesView/FilePreviewNavigationPanel.vue diff --git a/public/mix-manifest.json b/public/mix-manifest.json index ec838915..450cd139 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,7 +1,19 @@ { "/js/main.js": "/js/main.js", "/css/app.css": "/css/app.css", - "/js/main.f400fdfd9d8614e0b28f.hot-update.js": "/js/main.f400fdfd9d8614e0b28f.hot-update.js", - "/js/main.6f284aa3a72d16ce7184.hot-update.js": "/js/main.6f284aa3a72d16ce7184.hot-update.js", - "/js/main.abf30b7258d473341c31.hot-update.js": "/js/main.abf30b7258d473341c31.hot-update.js" + "/js/main.565d4389ee843a89c58e.hot-update.js": "/js/main.565d4389ee843a89c58e.hot-update.js", + "/js/main.2a7a8c5f338bf56d3c85.hot-update.js": "/js/main.2a7a8c5f338bf56d3c85.hot-update.js", + "/js/main.54c4df5b44d30d2d75cf.hot-update.js": "/js/main.54c4df5b44d30d2d75cf.hot-update.js", + "/js/main.52c12c9d276e65d0ae5f.hot-update.js": "/js/main.52c12c9d276e65d0ae5f.hot-update.js", + "/js/main.2c56df733ffb4dd5dc40.hot-update.js": "/js/main.2c56df733ffb4dd5dc40.hot-update.js", + "/js/main.c71f38e533847d460930.hot-update.js": "/js/main.c71f38e533847d460930.hot-update.js", + "/js/main.f5acca59a222131c3cba.hot-update.js": "/js/main.f5acca59a222131c3cba.hot-update.js", + "/js/main.e3e6195a4b3bb271fe26.hot-update.js": "/js/main.e3e6195a4b3bb271fe26.hot-update.js", + "/js/main.1b03d51b15dfd56be648.hot-update.js": "/js/main.1b03d51b15dfd56be648.hot-update.js", + "/js/main.5505a15e90a8468b452f.hot-update.js": "/js/main.5505a15e90a8468b452f.hot-update.js", + "/js/main.5817ccfe47cf82bfa129.hot-update.js": "/js/main.5817ccfe47cf82bfa129.hot-update.js", + "/js/main.a34679fea419709a4a33.hot-update.js": "/js/main.a34679fea419709a4a33.hot-update.js", + "/js/main.3ad171a864e7c390e890.hot-update.js": "/js/main.3ad171a864e7c390e890.hot-update.js", + "/js/main.51a08b81d7efc66a7215.hot-update.js": "/js/main.51a08b81d7efc66a7215.hot-update.js", + "/js/main.ffff7d5846e119bd9af1.hot-update.js": "/js/main.ffff7d5846e119bd9af1.hot-update.js" } diff --git a/resources/js/components/FilesView/ContextMenu.vue b/resources/js/components/FilesView/ContextMenu.vue index bc9a2eb4..f139e4bb 100644 --- a/resources/js/components/FilesView/ContextMenu.vue +++ b/resources/js/components/FilesView/ContextMenu.vue @@ -1,297 +1,339 @@ @@ -303,6 +345,7 @@ import { FolderPlusIcon, LifeBuoyIcon, Trash2Icon, + Edit2Icon, TrashIcon, StarIcon, LinkIcon, @@ -319,6 +362,7 @@ export default { FolderPlusIcon, LifeBuoyIcon, Trash2Icon, + Edit2Icon, TrashIcon, LinkIcon, StarIcon, @@ -349,13 +393,33 @@ export default { }, data() { return { + showFromPreview: false, item: undefined, isVisible: false, positionX: 0, positionY: 0, }; }, + methods: { + renameItem() { + let itemName = prompt(this.$t("popup_rename.title"), this.item.name); + + if (itemName && itemName !== "") { + let item = { + unique_id: this.item.unique_id, + type: this.item.type, + name: itemName, + }; + + this.$store.dispatch("renameItem", item); + + // Change item name if is mobile device or prompted + if (this.$isMobile()) { + events.$emit("change:name", item); + } + } + }, moveItem() { // Open move item popup events.$emit("popup:open", { name: "move", item: this.item }); @@ -449,8 +513,37 @@ export default { // Show context menu this.isVisible = true; }, + showFilePreviewMenu() { + let container = document.getElementById("fast-preview-menu"); + if (container) { + this.positionX = container.offsetLeft + 16; + this.positionY = container.offsetTop + 51; + } + }, + }, + watch: { + item(newValue, oldValue) { + if (oldValue != undefined && this.showFromPreview) { + this.showFromPreview = false; + } + }, + }, + mounted() { + events.$on("actualShowingImage:ContextMenu", (item) => { + this.item = item; + }); }, created() { + events.$on("showContextMenuPreview:show", (item) => { + if (!this.showFromPreview) { + this.item = item; + this.showFromPreview = !this.showFromPreview; + this.showFilePreviewMenu(); + } else if (this.showFromPreview) { + this.showFromPreview = false; + this.item = undefined; + } + }); events.$on("contextMenu:show", (event, item) => { // Store item this.item = item; @@ -476,6 +569,10 @@ export default { @import "@assets/vue-file-manager/_variables"; @import "@assets/vue-file-manager/_mixins"; +.filePreviewFixed { + position: fixed !important; +} + .menu-option { display: flex; align-items: center; diff --git a/resources/js/components/FilesView/DesktopMediaPreviewMenu.vue b/resources/js/components/FilesView/DesktopMediaPreviewMenu.vue deleted file mode 100644 index 7a5bfea9..00000000 --- a/resources/js/components/FilesView/DesktopMediaPreviewMenu.vue +++ /dev/null @@ -1,142 +0,0 @@ - - - - - \ No newline at end of file diff --git a/resources/js/components/FilesView/DesktopToolbar.vue b/resources/js/components/FilesView/DesktopToolbar.vue index e6ed0aed..921c9414 100644 --- a/resources/js/components/FilesView/DesktopToolbar.vue +++ b/resources/js/components/FilesView/DesktopToolbar.vue @@ -1,366 +1,411 @@ diff --git a/resources/js/components/FilesView/FileFullPreview.vue b/resources/js/components/FilesView/FileFullPreview.vue index dd384aa7..a756c62d 100644 --- a/resources/js/components/FilesView/FileFullPreview.vue +++ b/resources/js/components/FilesView/FileFullPreview.vue @@ -3,8 +3,15 @@ class="file-full-preview-wrapper" v-if="showFullPreview" id="fileFullPreview" + ref="filePreview" + tabindex="-1" + @keydown.esc="showFullPreview = false" + @keydown.right="next" + @keydown.left="prev" > + + @@ -13,21 +20,46 @@ import { events } from "@/bus"; import { mapGetters } from "vuex"; import MediaFullPreview from "@/components/FilesView/MediaFullPreview"; +import FilePreviewActions from "@/components/FilesView/FilePreviewActions"; +import FilePreviewNavigationPanel from "@/components/FilesView/FilePreviewNavigationPanel"; export default { - components: { MediaFullPreview }, + components: { + MediaFullPreview, + FilePreviewNavigationPanel, + FilePreviewActions, + }, data() { return { showFullPreview: false, }; }, + methods: { + next: function () { + events.$emit("filePreviewAction:next"); + }, + prev: function () { + events.$emit("filePreviewAction:prev"); + }, + }, + + updated() { + if (this.showFullPreview) { + this.$refs.filePreview.focus(); + } + }, computed: { ...mapGetters(["fileInfoDetail"]), isMedia() { - return this.fileInfoDetail === "image" || "video"; + return this.fileInfoDetail === "image" || "video" || "audio"; }, }, + mounted() { + if (this.showFullPreview) { + let preview = document.getElementById("file-wrapper-preview"); + preview.addEventListener("click", this.hideMenu); + } events.$on("fileFullPreview:show", () => { this.showFullPreview = true; }); @@ -35,6 +67,12 @@ export default { this.showFullPreview = false; }); }, + methods: { + hideMenu() { + events.$emit("showContextMenuPreview:hide"); + console.log("aaaa"); + }, + }, }; diff --git a/resources/js/components/FilesView/FileItemList.vue b/resources/js/components/FilesView/FileItemList.vue index 17beb832..d2c77f8b 100644 --- a/resources/js/components/FilesView/FileItemList.vue +++ b/resources/js/components/FilesView/FileItemList.vue @@ -136,6 +136,9 @@ export default { isVideo() { return this.data.type === "video"; }, + isAudio() { + return this.data.type === "audio"; + }, canEditName() { return ( !this.$isMobile() && @@ -229,12 +232,12 @@ export default { return; }, goToItem() { - if (this.isImage || this.isVideo) { + if (this.isImage || this.isVideo || this.isAudio) { // this.$openImageOnNewTab(this.data.file_url) events.$emit("fileFullPreview:show"); } - if (this.isFile && !this.isPdf && !this.isVideo) { + if (this.isFile && !this.isPdf && !this.isVideo && !this.isAudio) { this.$downloadFile( this.data.file_url, this.data.name + "." + this.data.mimetype diff --git a/resources/js/components/FilesView/FilePreviewActions.vue b/resources/js/components/FilesView/FilePreviewActions.vue new file mode 100644 index 00000000..6dc42961 --- /dev/null +++ b/resources/js/components/FilesView/FilePreviewActions.vue @@ -0,0 +1,73 @@ + + + + + \ No newline at end of file diff --git a/resources/js/components/FilesView/FilePreviewNavigationPanel.vue b/resources/js/components/FilesView/FilePreviewNavigationPanel.vue new file mode 100644 index 00000000..d87cadcf --- /dev/null +++ b/resources/js/components/FilesView/FilePreviewNavigationPanel.vue @@ -0,0 +1,327 @@ + + + + + \ No newline at end of file diff --git a/resources/js/components/FilesView/MediaFullPreview.vue b/resources/js/components/FilesView/MediaFullPreview.vue index 15b31744..28db698b 100644 --- a/resources/js/components/FilesView/MediaFullPreview.vue +++ b/resources/js/components/FilesView/MediaFullPreview.vue @@ -1,59 +1,20 @@ @@ -80,11 +39,10 @@ import { events } from "@/bus"; import { mapGetters } from "vuex"; import ToolbarButton from "@/components/FilesView/ToolbarButton"; -import DesktopMediaPreviewMenu from "@/components/FilesView/DesktopMediaPreviewMenu"; import Spinner from "@/components/FilesView/Spinner"; export default { - components: { ToolbarButton, DesktopMediaPreviewMenu, Spinner }, + components: { ToolbarButton, Spinner }, data() { return { currentIndex: 1, @@ -92,7 +50,6 @@ export default { loaded: false, sizeWidth: "", sizeHeight: "", - showingFile: "", }; }, computed: { @@ -103,18 +60,6 @@ export default { Math.abs(this.currentIndex) % this.sliderFile.length ]; }, - formatedName() { - let name = this.currentFile.name; - if (name.lastIndexOf(".") > -1) { - return _.truncate(name.substring(0, name.lastIndexOf(".")), { - length: 20, - }); - } else { - return _.truncate(name, { - length: 20, - }); - } - }, canShareInView() { return !this.$isThisLocation([ @@ -126,15 +71,32 @@ export default { ]); }, }, + mounted() { + events.$on("filePreviewAction:next", () => { + this.currentIndex += 1; + if (this.currentIndex > this.sliderFile.length - 1) { + this.currentIndex = 0; + } + }); + events.$on("filePreviewAction:prev", () => { + this.currentIndex -= 1; + if (this.currentIndex < 0) { + this.currentIndex = this.sliderFile.length - 1; + } + }); + }, created() { this.filteredFiles(); this.imageSizing(); }, watch: { currentFile() { + //HANDLE ACUTAL VIEW IMAGE IN FIELINFODETAIL this.$store.commit("GET_FILEINFO_DETAIL", this.currentFile); + events.$emit("actualShowingImage:ContextMenu", this.currentFile); }, fileInfoDetail() { + //FILE DELETE HANDLING if (!this.fileInfoDetail) { if (this.data.length == 0) { events.$emit("fileFullPreview:hide"); @@ -143,11 +105,11 @@ export default { this.$store.commit("GET_FILEINFO_DETAIL", this.currentFile); this.sliderFile = []; this.filteredFiles(); - this.$forceUpdate(); } } }, data(newValue, oldValue) { + //MOVE ITEM HANDLING if (newValue != oldValue) { this.sliderFile = []; this.filteredFiles(); @@ -164,23 +126,10 @@ export default { this.sizeHeight = "100%"; } }, - menuOpen() { - if (this.$isMobile()) { - events.$emit("mobileMenu:show", "showFromMediaPreview"); - } else { - events.$emit("desktopMediaMenu:show"); - } - }, closeFullPreview() { events.$emit("fileFullPreview:hide"); }, - printMethod() { - var tab = document.getElementById("image"); - var win = window.open("", "", "height=700,width=700"); - win.document.write(tab.outerHTML); - win.document.close(); - win.print(); - }, + filteredFiles() { this.data.filter((element) => { if (element.type == this.fileInfoDetail.type) { @@ -199,40 +148,6 @@ export default { } }); }, - downloadItem() { - // Download file - this.$downloadFile( - this.currentFile.file_url, - this.currentFile.name + "." + this.currentFile.mimetype - ); - }, - - next: function () { - this.currentIndex += 1; - if (this.currentIndex > this.sliderFile.length - 1) { - this.currentIndex = 0; - } - }, - prev: function () { - this.currentIndex -= 1; - if (this.currentIndex < 0) { - this.currentIndex = this.sliderFile.length - 1; - } - }, - - shareItem() { - if (this.fileInfoDetail.shared) { - events.$emit("popup:open", { - name: "share-edit", - item: this.currentFile, - }); - } else { - events.$emit("popup:open", { - name: "share-create", - item: this.currentFile, - }); - } - }, }, }; @@ -242,84 +157,10 @@ export default { @import "@assets/vue-file-manager/_mixins"; .media-full-preview { - height: 100%; + height: 93%; position: relative; } -.name-wrapper { - width: 33%; - height: 100%; - display: flex; - align-items: center; - @include font-size(15); - font-weight: 700; - .name { - display: flex; - } - .icon-close { - @include font-size(15); - font-weight: 700; - display: flex; - align-items: center; - margin-right: 10px; - color: $text; - cursor: pointer; - } - .fast-menu { - cursor: pointer; - margin-left: 10px; - p { - margin-top: -10px; - } - p:hover { - color: $theme; - } - } -} - -@media (min-width: 420px) and (max-width: 750px) { - .name-wrapper { - width: 67%; - } -} -@media (max-width: 430px) { - .name-wrapper { - width: 100%; - justify-content: space-between; - } -} - -.created_at-wrapper { - width: 33%; - height: 100%; - display: flex; - text-align: center; - justify-content: center; - p { - display: flex; - align-items: center; - @include font-size(11); - } - @media (max-width: 750px) { - display: none; - } -} - -.navigation-icons { - width: 33%; - height: 100%; - list-style: none; - display: flex; - align-items: center; - justify-content: flex-end; - & > * { - margin-left: 5px; - } - @media (max-width: 430px) { - display: none; - } -} - .navigation-panel { width: 100%; height: 7%; @@ -340,7 +181,7 @@ export default { .file-wrapper-preview { width: 100%; - height: 93%; + height: 100%; padding: 30px 0px; display: flex; overflow: hidden; @@ -360,47 +201,8 @@ export default { } } -.prev, -.next { - cursor: pointer; - position: absolute; - top: 50%; - width: 40px; - height: 40; - display: flex; - justify-content: center; - background-color: white; - padding: 8px; - color: $text; - font-weight: bold; - font-size: 18px; - // border-radius: 0 4px 4px 0; - border-radius: 50%; - text-decoration: none; - user-select: none; -} -.next { - right: 0; -} -.prev { - left: 0; -} -.prev:hover, -.next:hover { - color: $theme; -} - @media (prefers-color-scheme: dark) { - .navigation-panel { - background-color: $dark_mode_foreground; - color: $light-text; - .icon-close { - color: $light-text; - } - } - .prev, - .next { - color: $light-text; + .file-wrapper-preview { background-color: $dark_mode_background; } } diff --git a/resources/js/store/modules/fileFunctions.js b/resources/js/store/modules/fileFunctions.js index 58fda1d9..05f53dc9 100644 --- a/resources/js/store/modules/fileFunctions.js +++ b/resources/js/store/modules/fileFunctions.js @@ -1,245 +1,270 @@ -import i18n from '@/i18n/index' -import router from '@/router' -import {events} from '@/bus' -import {last} from 'lodash' -import axios from 'axios' +import i18n from "@/i18n/index"; +import router from "@/router"; +import { events } from "@/bus"; +import { last } from "lodash"; +import axios from "axios"; const actions = { - moveItem: ({commit, getters, dispatch}, [item_from, to_item]) => { + moveItem: ({ commit, getters, dispatch }, [item_from, to_item]) => { + // Get route + let route = + getters.sharedDetail && !getters.sharedDetail.protected + ? "/api/move/" + + item_from.unique_id + + "/public/" + + router.currentRoute.params.token + : "/api/move/" + item_from.unique_id; - // Get route - let route = getters.sharedDetail && ! getters.sharedDetail.protected - ? '/api/move/' + item_from.unique_id + '/public/' + router.currentRoute.params.token - : '/api/move/' + item_from.unique_id + axios + .patch(route, { + 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); - axios - .patch(route, { - 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) + if ( + item_from.type === "folder" && + getters.currentFolder.location !== "public" + ) + dispatch("getAppData"); + }) + .catch(() => isSomethingWrong()); + }, + createFolder: ({ commit, getters, dispatch }, folderName) => { + // Get route + let route = + getters.sharedDetail && !getters.sharedDetail.protected + ? "/api/create-folder/public/" + router.currentRoute.params.token + : "/api/create-folder"; - if (item_from.type === 'folder' && getters.currentFolder.location !== 'public') - dispatch('getAppData') + axios + .post(route, { + parent_id: getters.currentFolder.unique_id, + name: folderName, + }) + .then((response) => { + commit("ADD_NEW_FOLDER", response.data); - }) - .catch(() => isSomethingWrong()) - }, - createFolder: ({commit, getters, dispatch}, folderName) => { + events.$emit("scrollTop"); - // 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.unique_id, - name: folderName - }) - .then(response => { - commit('ADD_NEW_FOLDER', response.data) - - events.$emit('scrollTop') - - if ( getters.currentFolder.location !== 'public' ) { - dispatch('getAppData') - } - }) - .catch(() => 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.unique_id + '/public/' + router.currentRoute.params.token - : '/api/rename-item/' + data.unique_id - - axios - .patch(route, { - name: data.name, - type: data.type, - }) - .then(response => { - commit('CHANGE_ITEM_NAME', response.data) - - if (data.type === 'folder' && getters.currentFolder.location !== 'public') - dispatch('getAppData') - }) - .catch(() => 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' - - axios - .post(route, form, { - 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) - - if (percentCompleted >= 100) { - commit('PROCESSING_FILE', true) - } - } - }) - .then(response => { - commit('PROCESSING_FILE', false) - - // 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) - - resolve(response) - }) - .catch(error => { - commit('PROCESSING_FILE', false) - - reject(error) - - switch (error.response.status) { - case 423: - events.$emit('alert:open', { - emoji: '😬', - title: i18n.t('popup_exceed_limit.title'), - message: i18n.t('popup_exceed_limit.message') - }) - break; - case 413: - events.$emit('alert:open', { - emoji: '😟', - title: i18n.t('popup_paylod_error.title'), - message: i18n.t('popup_paylod_error.message') - }) - break; - default: - events.$emit('alert:open', { - title: i18n.t('popup_error.title'), - message: i18n.t('popup_error.message'), - }) - break; - } - - // Reset uploader - 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 - .patch(getters.api + '/restore-item/' + item.unique_id, { - type: item.type, - to_home: restoreToHome, - }) - .catch(() => isSomethingWrong()) - }, - deleteItem: ({commit, getters, dispatch}, data) => { - - // Remove file - commit('REMOVE_ITEM', data.unique_id) - - // Remove item from sidebar - if (getters.permission === 'master') { - - if (data.type === 'folder') - commit('REMOVE_ITEM_FROM_FAVOURITES', data) + if (getters.currentFolder.location !== "public") { + dispatch("getAppData"); } + }) + .catch(() => 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.unique_id + + "/public/" + + router.currentRoute.params.token + : "/api/rename-item/" + data.unique_id; + + axios + .patch(route, { + name: data.name, + type: data.type, + }) + .then((response) => { + commit("CHANGE_ITEM_NAME", response.data); + + if ( + data.type === "folder" && + getters.currentFolder.location !== "public" + ) + dispatch("getAppData"); + }) + .catch(() => 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"; + + axios + .post(route, form, { + 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 + ); + + if (percentCompleted >= 100) { + commit("PROCESSING_FILE", true); + } + }, + }) + .then((response) => { + commit("PROCESSING_FILE", false); + + // 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); + + resolve(response); + }) + .catch((error) => { + commit("PROCESSING_FILE", false); + + reject(error); + + switch (error.response.status) { + case 423: + events.$emit("alert:open", { + emoji: "😬", + title: i18n.t("popup_exceed_limit.title"), + message: i18n.t("popup_exceed_limit.message"), + }); + break; + case 413: + events.$emit("alert:open", { + emoji: "😟", + title: i18n.t("popup_paylod_error.title"), + message: i18n.t("popup_paylod_error.message"), + }); + break; + default: + events.$emit("alert:open", { + title: i18n.t("popup_error.title"), + message: i18n.t("popup_error.message"), + }); + break; + } + + // Reset uploader + 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 + .patch(getters.api + "/restore-item/" + item.unique_id, { + type: item.type, + to_home: restoreToHome, + }) + .catch(() => isSomethingWrong()); + }, + deleteItem: ({ commit, getters, dispatch }, data) => { + if (data) { + //ADD BY M + // Remove file + commit("REMOVE_ITEM", data.unique_id); + + // Remove item from sidebar + if (getters.permission === "master") { + if (data.type === "folder") commit("REMOVE_ITEM_FROM_FAVOURITES", data); + } + + // Remove file preview + commit("CLEAR_FILEINFO_DETAIL"); + + // Get route + let route = + getters.sharedDetail && !getters.sharedDetail.protected + ? "/api/remove-item/" + + data.unique_id + + "/public/" + + router.currentRoute.params.token + : "/api/remove-item/" + data.unique_id; + + axios + .delete(route, { + data: { + type: data.type, + force_delete: data.deleted_at ? true : false, + }, + }) + .then(() => { + // If is folder, update app data + if (data.type === "folder") { + if (data.unique_id === getters.currentFolder.unique_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"); + } + }) + .catch(() => isSomethingWrong()); + } + }, + emptyTrash: ({ commit, getters }) => { + // Clear file browser + commit("LOADING_STATE", { loading: true, data: [] }); + + axios + .delete(getters.api + "/empty-trash") + .then(() => { + commit("LOADING_STATE", { loading: false, data: [] }); + events.$emit("scrollTop"); // Remove file preview - commit('CLEAR_FILEINFO_DETAIL') + commit("CLEAR_FILEINFO_DETAIL"); - // Get route - let route = getters.sharedDetail && ! getters.sharedDetail.protected - ? '/api/remove-item/' + data.unique_id + '/public/' + router.currentRoute.params.token - : '/api/remove-item/' + data.unique_id - - axios - .delete(route, { - data: { - type: data.type, - force_delete: data.deleted_at ? true : false - } - }) - .then(() => { - - // If is folder, update app data - if (data.type === 'folder') { - - if (data.unique_id === getters.currentFolder.unique_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') - } - }) - .catch(() => isSomethingWrong()) - }, - emptyTrash: ({commit, getters}) => { - - // Clear file browser - commit('LOADING_STATE', {loading: true, data: []}) - - axios - .delete(getters.api + '/empty-trash') - .then(() => { - commit('LOADING_STATE', {loading: false, data: []}) - 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 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'), - }) + events.$emit("alert:open", { + title: i18n.t("popup_error.title"), + message: i18n.t("popup_error.message"), + }); } export default { - actions, -} + actions, +}; diff --git a/resources/js/views/Shared/SharedPage.vue b/resources/js/views/Shared/SharedPage.vue index 54d89e7a..e214365a 100644 --- a/resources/js/views/Shared/SharedPage.vue +++ b/resources/js/views/Shared/SharedPage.vue @@ -1,272 +1,309 @@