From 954f0e3361da20005c7a48f63b2f33d57155ebfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Mon, 25 Apr 2022 10:13:10 +0200
Subject: [PATCH] implemented remote upload progress counter

---
 config/language-translations.php              |  5 +-
 public/mix-manifest.json                      | 12 ++---
 resources/js/App.vue                          |  7 ++-
 .../RemoteUpload/RemoteUploadPopup.vue        | 35 +++++++-----
 .../RemoteUpload/RemoteUploadProgress.vue     | 54 +++++++++++++++++++
 resources/js/store/modules/broadcasting.js    | 29 ++++++++--
 resources/js/views/FileView/Files.vue         |  2 -
 .../Actions/GetContentFromExternalSource.php  | 44 ++++++++++++---
 .../Files/Events/NewFileWasStoredEvent.php    |  4 +-
 tests/Domain/Files/FileTest.php               |  2 +-
 10 files changed, 155 insertions(+), 39 deletions(-)
 create mode 100644 resources/js/components/RemoteUpload/RemoteUploadProgress.vue

diff --git a/config/language-translations.php b/config/language-translations.php
index 8d60d7a3..2a22f698 100644
--- a/config/language-translations.php
+++ b/config/language-translations.php
@@ -947,7 +947,8 @@ return [
         'remote_links'                                   => 'Remote Links',
         'remote_links_help'                              => 'For every new line paste one link and we will give a try to download the file.',
         'paste_remote_links_here'                        => 'Paste your links to the files here...',
-        'remote_download_submitted'                      => 'Your links will be downloaded as soon as possible',
-        'remote_download_processed'                      => 'Links was added to the queue and will be downloaded soon',
+        'remote_download_finished'                       => 'Remote upload was successfully finished',
+        'remote_upload_progress'                         => 'Uploading Remotely - {processed} / {total}',
+        'remote_upload_failed_count'                     => 'Failed: {count}',
     ],
 ];
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 6051c791..cdb182db 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,6 +1,6 @@
 {
     "/js/main.js": "/js/main.js",
-    "/chunks/request.js": "/chunks/request.js?id=3904f27eff940fdc",
+    "/chunks/request.js": "/chunks/request.js?id=a3bdfcbe94393de5",
     "/chunks/request-upload.js": "/chunks/request-upload.js?id=3bc3423d2305cd30",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=19a0784e59d768ec",
     "/chunks/status-check.js": "/chunks/status-check.js?id=9239a586761b912d",
@@ -9,13 +9,13 @@
     "/chunks/environment.js": "/chunks/environment.js?id=e4fdb87ff173d48a",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=cbe7bfed06400736",
     "/chunks/admin-account.js": "/chunks/admin-account.js?id=78d257775f5fc485",
-    "/chunks/shared.js": "/chunks/shared.js?id=1d98332d75f89854",
+    "/chunks/shared.js": "/chunks/shared.js?id=06cf22489fae4d66",
     "/chunks/shared/browser.js": "/chunks/shared/browser.js?id=3fd9baddb7333c24",
     "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=a6063bed9be75a09",
     "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=b5519d193bce2339",
     "/chunks/not-found.js": "/chunks/not-found.js?id=d31bd699138cf828",
     "/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=26798085f527d955",
-    "/chunks/admin.js": "/chunks/admin.js?id=70e9dc019ac56c11",
+    "/chunks/admin.js": "/chunks/admin.js?id=6ca770da2ac79bb2",
     "/chunks/dashboard.js": "/chunks/dashboard.js?id=5ab55a12214433c8",
     "/chunks/invoices.js": "/chunks/invoices.js?id=799928609f57ca10",
     "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=a0c4f59d0ec4aee0",
@@ -57,13 +57,13 @@
     "/chunks/sign-up.js": "/chunks/sign-up.js?id=3d7559511768cd0e",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=27cda9364b6593d8",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=2f0401ee2fc148c4",
-    "/chunks/settings.js": "/chunks/settings.js?id=ee47f96c6c7d8a5c",
+    "/chunks/settings.js": "/chunks/settings.js?id=8f946a3099bf6d34",
     "/chunks/profile.js": "/chunks/profile.js?id=3e24bb5e1f52d4bb",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=d00bf503d8126dc4",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=092e324aad54656b",
     "/chunks/billing.js": "/chunks/billing.js?id=115c25478cee576d",
-    "/chunks/platform.js": "/chunks/platform.js?id=79cbc00b09b132d7",
-    "/chunks/files.js": "/chunks/files.js?id=b09c3f8b8b6aabcc",
+    "/chunks/platform.js": "/chunks/platform.js?id=42e33a69f54ac326",
+    "/chunks/files.js": "/chunks/files.js?id=a74bc8acc7ea876a",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=c6ed26eaace65f01",
     "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=6adbb309c700eaf7",
     "/chunks/trash.js": "/chunks/trash.js?id=32b84e2c25561372",
diff --git a/resources/js/App.vue b/resources/js/App.vue
index cfbc83a3..dd21256e 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -4,6 +4,7 @@
         <Alert />
         <ToasterWrapper />
         <CookieDisclaimer />
+		<RemoteUploadProgress />
 
         <!--Show spinner before translations is loaded-->
         <Spinner v-if="!isLoaded" />
@@ -22,8 +23,9 @@
 </template>
 
 <script>
-import ToasterWrapper from './components/Toaster/ToasterNotifications'
 import RestrictionWarningBar from './components/Subscription/RestrictionWarningBar'
+import RemoteUploadProgress from "./components/RemoteUpload/RemoteUploadProgress"
+import ToasterWrapper from './components/Toaster/ToasterNotifications'
 import SidebarNavigation from "./components/Sidebar/SidebarNavigation"
 import CookieDisclaimer from './components/UI/Others/CookieDisclaimer'
 import Spinner from './components/UI/Others/Spinner'
@@ -35,8 +37,9 @@ import { events } from './bus'
 export default {
     name: 'App',
     components: {
-		SidebarNavigation,
         RestrictionWarningBar,
+		RemoteUploadProgress,
+		SidebarNavigation,
         CookieDisclaimer,
         ToasterWrapper,
         Vignette,
diff --git a/resources/js/components/RemoteUpload/RemoteUploadPopup.vue b/resources/js/components/RemoteUpload/RemoteUploadPopup.vue
index 8c827c58..d9705613 100644
--- a/resources/js/components/RemoteUpload/RemoteUploadPopup.vue
+++ b/resources/js/components/RemoteUpload/RemoteUploadPopup.vue
@@ -46,6 +46,7 @@ import AppInputText from '../Forms/Layouts/AppInputText'
 import { required } from 'vee-validate/dist/rules'
 import ButtonBase from '../UI/Buttons/ButtonBase'
 import { events } from '../../bus'
+import i18n from "../../i18n";
 
 export default {
     name: 'RemoteUploadPopup',
@@ -75,6 +76,21 @@ export default {
 
             this.loading = true
 
+			this.urls = this.links
+				.replace(/^(?=\n)$|^\s*|\s*$|\n\n+/gm, "")
+				.split(/\r?\n/)
+
+			// If broadcasting
+			if (this.$store.getters.isBroadcasting) {
+				this.$store.commit('UPDATE_REMOTE_UPLOAD_QUEUE', {
+					progress: {
+						total: this.urls.length,
+						processed: 0,
+						failed: 0,
+					}
+				})
+			}
+
 			// Get route
 			let route = {
 				RequestUpload: `/api/upload-request/${this.$router.currentRoute.params.token}/upload/remote`,
@@ -87,24 +103,19 @@ export default {
 
 			axios
 				.post(route, {
-					urls: this.links
-						.replace(/^(?=\n)$|^\s*|\s*$|\n\n+/gm, "")
-						.split(/\r?\n/),
+					urls: this.urls,
 					parent_id: parentId,
 				})
 				.then(() => {
-					// If broadcasting
-					if (this.$store.getters.isBroadcasting) {
-						events.$emit('toaster', {
-							type: 'success',
-							message: this.$t('remote_download_processed'),
-						})
-					}
-
 					// If broadcasting is not set
 					if (!this.$store.getters.isBroadcasting) {
 						// Reload data
 						this.$getDataByLocation()
+
+						events.$emit('toaster', {
+							type: 'success',
+							message: i18n.t('remote_download_finished'),
+						})
 					}
 
 					events.$emit('popup:close')
@@ -135,8 +146,6 @@ export default {
             this.$nextTick(() => {
 				setTimeout(() => this.$refs.textarea.focus(), 100)
             })
-
-			console.log(this.$store.getters.isBroadcasting);
         })
     },
 }
diff --git a/resources/js/components/RemoteUpload/RemoteUploadProgress.vue b/resources/js/components/RemoteUpload/RemoteUploadProgress.vue
new file mode 100644
index 00000000..9daf7546
--- /dev/null
+++ b/resources/js/components/RemoteUpload/RemoteUploadProgress.vue
@@ -0,0 +1,54 @@
+<template>
+	<transition name="popup">
+		<div v-if="remoteUploadQueue" class="fixed left-0 right-0 bottom-8 text-center select-none pointer-events-none z-10">
+			<div class="relative inline-block rounded-lg overflow-hidden bg-theme shadow-[#ff8200]/40 shadow-lg px-3 py-2">
+				<div class="flex items-center">
+					<RefreshCwIcon size="14" class="vue-feather text-white animate-[spin_2s_linear_infinite] z-10 relative" />
+					<span class="text-xs font-bold text-white z-10 relative ml-2 dark:text-black">
+						{{ this.$t('remote_upload_progress', {processed: remoteUploadQueue.processed, total: remoteUploadQueue.total}) }}{{ remoteUploadQueue.failed > 0 ? ", " + this.$t('remote_upload_failed_count', {count: remoteUploadQueue.failed}) : '' }}
+					</span>
+				</div>
+				<span class="absolute w-full h-full top-0 bottom-0 left-0 right-0 block bg-theme brightness-125 animate-[pulse_3s_ease-in-out_infinite] z-[5]"></span>
+				<span class="absolute w-full h-full top-0 bottom-0 left-0 right-0 block bg-theme z-0"></span>
+			</div>
+		</div>
+	</transition>
+</template>
+<script>
+	import {RefreshCwIcon} from "vue-feather-icons";
+	import {mapGetters} from "vuex";
+
+	export default {
+		name: 'RemoteUploadProgress',
+		components: {
+			RefreshCwIcon,
+		},
+		computed: {
+			...mapGetters([
+				'remoteUploadQueue'
+			]),
+		},
+	}
+</script>
+
+<style lang="scss">
+	.popup-leave-active {
+		animation: popup-slide-in 0.15s ease reverse;
+	}
+
+	.popup-enter-active {
+		animation: popup-slide-in 0.25s 0.1s ease both;
+	}
+
+	@keyframes popup-slide-in {
+		0% {
+			opacity: 0;
+			transform: translateY(100px);
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/resources/js/store/modules/broadcasting.js b/resources/js/store/modules/broadcasting.js
index f691ad3a..720da4fc 100644
--- a/resources/js/store/modules/broadcasting.js
+++ b/resources/js/store/modules/broadcasting.js
@@ -1,6 +1,8 @@
 import { events } from '../../bus'
+import i18n from "../../i18n"
 
 const defaultState = {
+    remoteUploadQueue: undefined,
     isBroadcasting: false,
 }
 
@@ -10,13 +12,23 @@ const actions = {
 
         Echo.private(`App.Users.Models.User.${getters.user.data.id}`)
             .listen('.file.created', (event) => {
+                commit('UPDATE_REMOTE_UPLOAD_QUEUE', event.payload)
+
                 // If user is located in same directory as remote upload was called, then show the files
                 if (
-                    (!getters.currentFolder && !event.file.data.attributes.parent_id) ||
-                    (getters.currentFolder && event.file.data.attributes.parent_id === getters.currentFolder.data.id)
+                    event.payload.file &&
+                    (!getters.currentFolder && !event.payload.file.data.attributes.parent_id) ||
+                    (getters.currentFolder && event.payload.file.data.attributes.parent_id === getters.currentFolder.data.id)
                 ) {
                     // Add received item into view
-                    commit('ADD_NEW_ITEMS', event.file)
+                    commit('ADD_NEW_ITEMS', event.payload.file)
+                }
+
+                if (event.payload.progress.total === event.payload.progress.processed) {
+                    events.$emit('toaster', {
+                        type: 'success',
+                        message: i18n.t('remote_download_finished'),
+                    })
                 }
             })
             .notification((notification) => {
@@ -47,9 +59,20 @@ const mutations = {
     SET_RUNNING_COMMUNICATION(state) {
         state.isBroadcasting = true
     },
+    UPDATE_REMOTE_UPLOAD_QUEUE(state, payload) {
+        if (payload.progress.total !== payload.progress.processed) {
+            state.remoteUploadQueue = {
+                total: payload.progress.total,
+                processed: payload.progress.processed,
+            }
+        } else {
+            state.remoteUploadQueue = undefined
+        }
+    },
 }
 
 const getters = {
+    remoteUploadQueue: (state) => state.remoteUploadQueue,
     isBroadcasting: (state) => state.isBroadcasting,
 }
 
diff --git a/resources/js/views/FileView/Files.vue b/resources/js/views/FileView/Files.vue
index 06bfe741..4294cdfb 100644
--- a/resources/js/views/FileView/Files.vue
+++ b/resources/js/views/FileView/Files.vue
@@ -217,7 +217,6 @@
 <script>
 import EmptyFilePage from '../../components/EntriesView/EmptyFilePage'
 import FileActionsMobile from '../../components/Mobile/FileActionsMobile'
-import MobileActionButtonUpload from '../../components/UI/Buttons/MobileActionButtonUpload'
 import MobileMultiSelectToolbar from '../../components/Layout/Toolbars/MobileMultiSelectToolbar'
 import MobileActionButton from '../../components/UI/Buttons/MobileActionButton'
 import MobileContextMenu from '../../components/Menus/MobileContextMenu'
@@ -237,7 +236,6 @@ export default {
     components: {
         EmptyFilePage,
         FileActionsMobile,
-        MobileActionButtonUpload,
         MobileMultiSelectToolbar,
         MobileActionButton,
         MobileContextMenu,
diff --git a/src/Domain/Files/Actions/GetContentFromExternalSource.php b/src/Domain/Files/Actions/GetContentFromExternalSource.php
index 10dccd5a..f9fdf94c 100644
--- a/src/Domain/Files/Actions/GetContentFromExternalSource.php
+++ b/src/Domain/Files/Actions/GetContentFromExternalSource.php
@@ -1,4 +1,5 @@
 <?php
+
 namespace Domain\Files\Actions;
 
 use Domain\Files\Events\NewFileWasStoredEvent;
@@ -18,18 +19,21 @@ class GetContentFromExternalSource
     use QueueableAction;
 
     public function __construct(
-        public ProcessFileAction $processFile,
-        public StoreFileExifMetadataAction $storeExifMetadata,
-        public MoveFileToFTPStorageAction $moveFileToFTPStorage,
-        public ProcessImageThumbnailAction $createImageThumbnail,
+        public ProcessFileAction               $processFile,
+        public StoreFileExifMetadataAction     $storeExifMetadata,
+        public MoveFileToFTPStorageAction      $moveFileToFTPStorage,
+        public ProcessImageThumbnailAction     $createImageThumbnail,
         public MoveFileToExternalStorageAction $moveFileToExternalStorage,
-    ) {
-    }
+    ) {}
 
     public function __invoke(
         array $payload,
-        User $user,
+        User  $user,
     ) {
+        $total = count($payload['urls']);
+        $processed = 0;
+        $failed = 0;
+
         foreach ($payload['urls'] as $url) {
             try {
                 // Get local disk instance
@@ -83,9 +87,33 @@ class GetContentFromExternalSource
                     default => null
                 };
 
+                // Increment processed items count
+                $processed++;
+
                 // Broadcast new file into the frontend
-                NewFileWasStoredEvent::dispatch(new FileResource($file));
+                NewFileWasStoredEvent::dispatch([
+                    'progress' => [
+                        'total'     => $total,
+                        'processed' => $processed,
+                        'failed'    => $failed,
+                    ],
+                    'file'     => new FileResource($file),
+                ]);
             } catch (ErrorException | Error $e) {
+                // Increment items count
+                $processed++;
+                $failed++;
+
+                // Broadcast new file into the frontend
+                NewFileWasStoredEvent::dispatch([
+                    'progress' => [
+                        'total'     => $total,
+                        'processed' => $processed,
+                        'failed'    => $failed,
+                    ],
+                    'file'     => null,
+                ]);
+
                 Log::error("Remote upload failed as {$e->getMessage()}");
                 Log::error($e->getTraceAsString());
             }
diff --git a/src/Domain/Files/Events/NewFileWasStoredEvent.php b/src/Domain/Files/Events/NewFileWasStoredEvent.php
index e3fc79b9..cfd386c8 100644
--- a/src/Domain/Files/Events/NewFileWasStoredEvent.php
+++ b/src/Domain/Files/Events/NewFileWasStoredEvent.php
@@ -19,7 +19,7 @@ class NewFileWasStoredEvent implements ShouldBroadcastNow
      * @return void
      */
     public function __construct(
-        public FileResource $file,
+        public array $payload,
     ) {}
 
     /**
@@ -35,6 +35,6 @@ class NewFileWasStoredEvent implements ShouldBroadcastNow
      */
     public function broadcastOn(): PrivateChannel
     {
-        return new PrivateChannel("App.Users.Models.User.{$this->file->user_id}");
+        return new PrivateChannel("App.Users.Models.User.{$this->payload['file']->user_id}");
     }
 }
diff --git a/tests/Domain/Files/FileTest.php b/tests/Domain/Files/FileTest.php
index 2b2c48fa..5650c5ca 100644
--- a/tests/Domain/Files/FileTest.php
+++ b/tests/Domain/Files/FileTest.php
@@ -153,7 +153,7 @@ class FileTest extends TestCase
 
         File::all()
             ->each(function ($file) {
-                Event::assertDispatched(fn(NewFileWasStoredEvent $event) => $event->file->id === $file->id);
+                Event::assertDispatched(fn(NewFileWasStoredEvent $event) => $event->payload['file']->id === $file->id);
 
                 Storage::assertExists("files/$file->user_id/$file->basename");
             });