web/satellite/vuetify-poc: improve upload snackbar

This change adds a close button to the upload snackbar and displays it on all pages instead of only the file browser. Issue: #6586 Change-Id: I4f1216b77d7f85ad4b315a6f5a468ae627fd9b28
storj · Dec 12, 2023 · bfaaaf4 · bfaaaf4
1 parent d8aabf6
commit bfaaaf4
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 22 deletions.
diff --git a/web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue
@@ -155,7 +155,6 @@
         :file="fileToShare || undefined"
         @content-removed="fileToShare = null"
     />
-    <browser-snackbar-component v-model="isObjectsUploadModal" @file-click="onFileClick" />
 </template>
 
 <script setup lang="ts">
@@ -187,16 +186,13 @@ import { useNotify } from '@/utils/hooks';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { useBucketsStore } from '@/store/modules/bucketsStore';
 import { useConfigStore } from '@/store/modules/configStore';
-import { LocalData } from '@/utils/localData';
-import { useAppStore } from '@/store/modules/appStore';
 import { BrowserObjectTypeInfo, BrowserObjectWrapper, EXTENSION_INFOS, FILE_INFO, FOLDER_INFO } from '@/types/browser';
 import { useLinksharing } from '@/composables/useLinksharing';
 import { tableSizeOptions } from '@/types/common';
 
 import FilePreviewDialog from '@poc/components/dialogs/FilePreviewDialog.vue';
 import DeleteFileDialog from '@poc/components/dialogs/DeleteFileDialog.vue';
 import ShareDialog from '@poc/components/dialogs/ShareDialog.vue';
-import BrowserSnackbarComponent from '@poc/components/BrowserSnackbarComponent.vue';
 import FileCard from '@poc/components/FileCard.vue';
 
 type SortKey = 'name' | 'type' | 'size' | 'date';
@@ -214,7 +210,6 @@ const config = useConfigStore();
 const obStore = useObjectBrowserStore();
 const projectsStore = useProjectsStore();
 const bucketsStore = useBucketsStore();
-const appStore = useAppStore();
 
 const notify = useNotify();
 const router = useRouter();
@@ -253,11 +248,6 @@ const bucketName = computed<string>(() => bucketsStore.state.fileComponentBucket
  */
 const filePath = computed<string>(() => bucketsStore.state.fileComponentPath);
 
-/**
- * Indicates whether objects upload modal should be shown.
- */
-const isObjectsUploadModal = computed<boolean>(() => appStore.state.isUploadingModal);
-
 /**
  * Returns total object count from store.
  */
@@ -425,7 +415,6 @@ function onFileClick(file: BrowserObject): void {
 
     obStore.setObjectPathForModal(file.path + file.Key);
     previewDialog.value = true;
-    LocalData.setFileGuideHidden();
 }
 
 /**

diff --git a/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue
@@ -3,6 +3,7 @@
 
 <template>
     <v-snackbar
+        v-model="isObjectsUploadModal"
         vertical
         :timeout="4000"
         color="default"
@@ -21,6 +22,9 @@
                     >
                         <v-expansion-panel-title color="">
                             <span>{{ statusLabel }}</span>
+                            <template v-if="isClosable" #actions>
+                                <v-icon icon="mdi-close" @click="v1AppStore.setUploadingModal(false)" />
+                            </template>
                         </v-expansion-panel-title>
                         <v-progress-linear
                             v-if="!isClosable"
@@ -56,7 +60,7 @@
                                     v-for="item in uploading"
                                     :key="item.Key"
                                     :item="item"
-                                    @click="item.status === UploadingStatus.Finished && emit('fileClick', item)"
+                                    @click="item.status === UploadingStatus.Finished && onFileClick(item)"
                                 />
                             </div>
                         </v-expand-transition>
@@ -65,6 +69,8 @@
             </v-col>
         </v-row>
     </v-snackbar>
+
+    <file-preview-dialog v-model="previewDialog" />
 </template>
 
 <script setup lang="ts">
@@ -83,24 +89,37 @@ import {
     VDivider,
     VExpandTransition,
 } from 'vuetify/components';
+import { useRouter } from 'vue-router';
 
 import { BrowserObject, UploadingBrowserObject, UploadingStatus, useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { Duration } from '@/utils/time';
 import { useNotify } from '@/utils/hooks';
+import { useAppStore as useV1AppStore } from '@/store/modules/appStore';
+import { useBucketsStore } from '@/store/modules/bucketsStore';
+import { useProjectsStore } from '@/store/modules/projectsStore';
 
 import UploadItem from '@poc/components/UploadItem.vue';
+import FilePreviewDialog from '@poc/components/dialogs/FilePreviewDialog.vue';
 
+const v1AppStore = useV1AppStore();
 const obStore = useObjectBrowserStore();
+const bucketsStore = useBucketsStore();
+const projectsStore = useProjectsStore();
+
+const router = useRouter();
+
 const remainingTimeString = ref<string>('');
 const interval = ref<NodeJS.Timer>();
 const notify = useNotify();
 const startDate = ref<number>(Date.now());
 const isExpanded = ref<boolean>(false);
+const previewDialog = ref<boolean>(false);
 
-const emit = defineEmits<{
-    'fileClick': [file: BrowserObject],
-}>();
+/**
+ * Indicates whether objects upload modal should be shown.
+ */
+const isObjectsUploadModal = computed<boolean>(() => v1AppStore.state.isUploadingModal);
 
 /**
  * Returns header's status label.
@@ -152,6 +171,16 @@ const uploading = computed((): UploadingBrowserObject[] => {
     return obStore.state.uploading;
 });
 
+/**
+ * Returns the current path within the selected bucket.
+ */
+const filePath = computed<string>(() => bucketsStore.state.fileComponentPath);
+
+/**
+ * Returns the name of the selected bucket.
+ */
+const bucketName = computed<string>(() => bucketsStore.state.fileComponentBucketName);
+
 /**
  * Calculates remaining seconds.
  */
@@ -174,6 +203,26 @@ function calculateRemainingTime(): void {
     remainingTimeString.value = new Duration(remainingNanoseconds).remainingFormatted;
 }
 
+/**
+ * Handles file click.
+ */
+function onFileClick(file: BrowserObject): void {
+    if (!file.type) return;
+
+    if (file.type === 'folder') {
+        const uriParts = [file.Key];
+        if (filePath.value) {
+            uriParts.unshift(...filePath.value.split('/'));
+        }
+        const pathAndKey = uriParts.map(part => encodeURIComponent(part)).join('/');
+        router.push(`/projects/${projectsStore.state.selectedProject.urlId}/buckets/${bucketName.value}/${pathAndKey}`);
+        return;
+    }
+
+    obStore.setObjectPathForModal((file.path ?? '') + file.Key);
+    previewDialog.value = true;
+}
+
 /**
  * Cancels all uploads in progress.
  */

diff --git a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
@@ -106,7 +106,6 @@
         :file="fileToShare || undefined"
         @content-removed="fileToShare = null"
     />
-    <browser-snackbar-component v-model="isObjectsUploadModal" @file-click="onFileClick" />
 </template>
 
 <script setup lang="ts">
@@ -143,7 +142,6 @@ import BrowserRowActions from '@poc/components/BrowserRowActions.vue';
 import FilePreviewDialog from '@poc/components/dialogs/FilePreviewDialog.vue';
 import DeleteFileDialog from '@poc/components/dialogs/DeleteFileDialog.vue';
 import ShareDialog from '@poc/components/dialogs/ShareDialog.vue';
-import BrowserSnackbarComponent from '@poc/components/BrowserSnackbarComponent.vue';
 
 type SortKey = 'name' | 'type' | 'size' | 'date';
 
@@ -223,11 +221,6 @@ const totalObjectCount = computed<number>(() => obStore.state.totalObjectCount);
  */
 const cursor = computed<ObjectBrowserCursor>(() => obStore.state.cursor);
 
-/**
- * Indicates whether objects upload modal should be shown.
- */
-const isObjectsUploadModal = computed<boolean>(() => appStore.state.isUploadingModal);
-
 /**
  * Returns every file under the current path.
  */

diff --git a/web/satellite/vuetify-poc/src/layouts/default/Account.vue b/web/satellite/vuetify-poc/src/layouts/default/Account.vue
@@ -9,6 +9,7 @@
             <default-view />
 
             <UpgradeAccountDialog v-model="appStore.state.isUpgradeFlowDialogShown" />
+            <browser-snackbar-component />
         </session-wrapper>
     </v-app>
 </template>
@@ -28,6 +29,7 @@ import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames
 
 import SessionWrapper from '@poc/components/utils/SessionWrapper.vue';
 import UpgradeAccountDialog from '@poc/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue';
+import BrowserSnackbarComponent from '@poc/components/BrowserSnackbarComponent.vue';
 
 const appStore = useAppStore();
 const usersStore = useUsersStore();

diff --git a/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue b/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue
@@ -8,6 +8,7 @@
             <default-view />
 
             <UpgradeAccountDialog v-model="appStore.state.isUpgradeFlowDialogShown" />
+            <browser-snackbar-component />
         </session-wrapper>
     </v-app>
 </template>
@@ -26,6 +27,7 @@ import { useNotify } from '@/utils/hooks';
 
 import SessionWrapper from '@poc/components/utils/SessionWrapper.vue';
 import UpgradeAccountDialog from '@poc/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue';
+import BrowserSnackbarComponent from '@poc/components/BrowserSnackbarComponent.vue';
 
 const appStore = useAppStore();
 const usersStore = useUsersStore();

diff --git a/web/satellite/vuetify-poc/src/layouts/default/Default.vue b/web/satellite/vuetify-poc/src/layouts/default/Default.vue
@@ -12,6 +12,7 @@
             <default-view />
 
             <UpgradeAccountDialog v-model="appStore.state.isUpgradeFlowDialogShown" />
+            <browser-snackbar-component />
         </session-wrapper>
     </v-app>
 </template>
@@ -40,6 +41,7 @@ import { useConfigStore } from '@/store/modules/configStore';
 
 import SessionWrapper from '@poc/components/utils/SessionWrapper.vue';
 import UpgradeAccountDialog from '@poc/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue';
+import BrowserSnackbarComponent from '@poc/components/BrowserSnackbarComponent.vue';
 
 const router = useRouter();
 const route = useRoute();