From 5ee991ac64cde58b4382e62b7a3d3e7136aa6962 Mon Sep 17 00:00:00 2001 From: Vitalii Date: Mon, 5 Jun 2023 15:47:53 +0300 Subject: [PATCH] web/satellite: delete and share modals for gallery view Added share and delete modals for object browser gallery view. Issue: https://github.com/storj/storj/issues/5824 Change-Id: Icdfb14d20155e3de2ce0cb885621435fd16ad855 --- .../src/components/browser/FileEntry.vue | 6 +- .../browser/galleryView/GalleryView.vue | 56 +++++- .../browser/galleryView/modals/Delete.vue | 101 +++++++++++ .../galleryView/modals/Distribution.vue | 4 +- .../browser/galleryView/modals/Share.vue | 162 ++++++++++++++++++ .../utils/constants/analyticsEventNames.ts | 2 + .../browser/galleryView/modals/delete.svg | 4 + .../browser/galleryView/modals/details.svg | 4 +- .../browser/galleryView/modals/globe.svg | 4 + .../browser/galleryView/modals/share.svg | 4 + 10 files changed, 334 insertions(+), 13 deletions(-) create mode 100644 web/satellite/src/components/browser/galleryView/modals/Delete.vue create mode 100644 web/satellite/src/components/browser/galleryView/modals/Share.vue create mode 100644 web/satellite/static/images/browser/galleryView/modals/delete.svg create mode 100644 web/satellite/static/images/browser/galleryView/modals/globe.svg create mode 100644 web/satellite/static/images/browser/galleryView/modals/share.svg diff --git a/web/satellite/src/components/browser/FileEntry.vue b/web/satellite/src/components/browser/FileEntry.vue index eb597ddcb..677eba134 100644 --- a/web/satellite/src/components/browser/FileEntry.vue +++ b/web/satellite/src/components/browser/FileEntry.vue @@ -118,11 +118,12 @@ import { useRouter } from 'vue-router'; import prettyBytes from 'pretty-bytes'; import { useNotify } from '@/utils/hooks'; -import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; +import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { MODALS } from '@/utils/constants/appStatePopUps'; import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrowserStore'; import { useAppStore } from '@/store/modules/appStore'; import { useConfigStore } from '@/store/modules/configStore'; +import { AnalyticsHttpApi } from '@/api/analytics'; import TableItem from '@/components/common/TableItem.vue'; @@ -139,6 +140,8 @@ const config = useConfigStore(); const notify = useNotify(); const router = useRouter(); +const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); + const props = defineProps<{ path: string, file: BrowserObject, @@ -257,6 +260,7 @@ function openModal(): void { if (config.state.config.galleryViewEnabled) { appStore.setGalleryView(true); + analytics.eventTriggered(AnalyticsEvent.GALLERY_VIEW_CLICKED); } else { appStore.updateActiveModal(MODALS.objectDetails); } diff --git a/web/satellite/src/components/browser/galleryView/GalleryView.vue b/web/satellite/src/components/browser/galleryView/GalleryView.vue index 8ea4ec9eb..3c52cd845 100644 --- a/web/satellite/src/components/browser/galleryView/GalleryView.vue +++ b/web/satellite/src/components/browser/galleryView/GalleryView.vue @@ -11,7 +11,7 @@ -

{{ file.Key }}

+

{{ file?.Key || '' }}

- +
@@ -59,11 +59,11 @@ aria-roledescription="audio-preview" />
-

{{ file.Key }}

+

{{ file?.Key || '' }}

No preview available

@@ -103,6 +104,8 @@ import { RouteConfig } from '@/router'; import ButtonIcon from '@/components/browser/galleryView/ButtonIcon.vue'; import OptionsDropdown from '@/components/browser/galleryView/OptionsDropdown.vue'; +import DeleteModal from '@/components/browser/galleryView/modals/Delete.vue'; +import ShareModal from '@/components/browser/galleryView/modals/Share.vue'; import DetailsModal from '@/components/browser/galleryView/modals/Details.vue'; import DistributionModal from '@/components/browser/galleryView/modals/Distribution.vue'; import VLoader from '@/components/common/VLoader.vue'; @@ -219,6 +222,13 @@ const placeHolderDisplayable = computed((): boolean => { ].every((value) => !value); }); +/** + * Returns current path without object key. + */ +const currentPath = computed((): string => { + return route.path.replace(RouteConfig.Buckets.with(RouteConfig.UploadFile).path, ''); +}); + /** * Get the object map url for the file being displayed. */ @@ -238,6 +248,34 @@ async function fetchPreviewAndMapUrl(): Promise { isLoading.value = false; } +/** + * Deletes active object. + */ +async function onDelete(): Promise { + try { + const objectsCount = obStore.sortedFiles.length; + let newFile: BrowserObject | undefined = obStore.sortedFiles[fileIndex.value + 1]; + if (!newFile || newFile.type === folderType) { + newFile = obStore.sortedFiles.find(f => f.type !== folderType && f.Key !== file.value.Key); + } + + await obStore.deleteObject( + currentPath.value, + file.value, + ); + setActiveModal(undefined); + + if (!newFile) { + closeModal(); + return; + } + + setNewObjectPath(newFile.Key); + } catch (error) { + notify.error(error.message, AnalyticsErrorEventSource.GALLERY_VIEW); + } +} + /** * Download the current opened file. */ @@ -320,9 +358,7 @@ function onNext(): void { * Sets new object path. */ function setNewObjectPath(objectKey: string): void { - obStore.setObjectPathForModal( - `${route.path.replace(RouteConfig.Buckets.with(RouteConfig.UploadFile).path, '')}${objectKey}`, - ); + obStore.setObjectPathForModal(`${currentPath.value}${objectKey}`); } /** @@ -340,6 +376,8 @@ onMounted((): void => { * Watch for changes on the filepath and call `fetchObjectMapUrl` the moment it updates. */ watch(filePath, () => { + if (!filePath.value) return; + fetchPreviewAndMapUrl(); }); diff --git a/web/satellite/src/components/browser/galleryView/modals/Delete.vue b/web/satellite/src/components/browser/galleryView/modals/Delete.vue new file mode 100644 index 000000000..ceadbea5a --- /dev/null +++ b/web/satellite/src/components/browser/galleryView/modals/Delete.vue @@ -0,0 +1,101 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + + diff --git a/web/satellite/src/components/browser/galleryView/modals/Distribution.vue b/web/satellite/src/components/browser/galleryView/modals/Distribution.vue index 7bcf3ba49..1fdcc6293 100644 --- a/web/satellite/src/components/browser/galleryView/modals/Distribution.vue +++ b/web/satellite/src/components/browser/galleryView/modals/Distribution.vue @@ -6,7 +6,7 @@