diff --git a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
index b12312053a4a..690747429594 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
@@ -63,112 +63,7 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Image.jpg
-
-
-
-
-
- Download
-
-
-
-
-
- Share
-
-
-
-
-
- Geographic Distribution
-
-
-
-
-
- More
-
-
-
-
-
- Close
-
-
-
-
-
-
-
-
-
+
@@ -178,13 +73,7 @@ import { useRouter } from 'vue-router';
import {
VCard,
VTextField,
- VDialog,
- VCarousel,
VBtn,
- VToolbar,
- VToolbarTitle,
- VTooltip,
- VCarouselItem,
} from 'vuetify/components';
import { VDataTableServer } from 'vuetify/labs/components';
@@ -196,8 +85,8 @@ import { Size } from '@/utils/bytesSize';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useBucketsStore } from '@/store/modules/bucketsStore';
-import IconShare from '@poc/components/icons/IconShare.vue';
import BrowserRowActions from '@poc/components/BrowserRowActions.vue';
+import FilePreviewDialog from '@poc/components/dialogs/FilePreviewDialog.vue';
import folderIcon from '@poc/assets/icon-folder-tonal.svg';
import pdfIcon from '@poc/assets/icon-pdf-tonal.svg';
@@ -255,12 +144,6 @@ const selected = ref([]);
const previewDialog = ref(false);
const options = ref();
-const items = [
- { src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg' },
- { src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg' },
- { src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg' },
- { src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg' },
-];
const sortBy = [{ key: 'name', order: 'asc' }];
const headers = [
{
@@ -413,8 +296,7 @@ function onFileClick(file: BrowserObject): void {
return;
}
- // Implement logic to fetch the file content for preview or generate a URL for preview
- // Then, open the preview dialog
+ obStore.setObjectPathForModal(obStore.state.path + file.Key);
previewDialog.value = true;
}
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue
new file mode 100644
index 000000000000..f42c428faee8
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue
@@ -0,0 +1,256 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ fileName }}
+
+
+
+
+
+ Download
+
+
+
+
+
+ Share
+
+
+
+
+
+ Geographic Distribution
+
+
+
+
+
+ More
+
+
+
+
+
+ Close
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/FilePreviewItem.vue b/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/FilePreviewItem.vue
new file mode 100644
index 000000000000..39ec5acdd4cb
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/FilePreviewItem.vue
@@ -0,0 +1,227 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ file?.Key || '' }}
+ No preview available
+ emits('download')"
+ >
+
+
+
+ {{ `Download (${prettyBytes(file?.Size || 0)})` }}
+
+
+
+
+