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 @@ - + @@ -59,11 +59,11 @@ aria-roledescription="audio-preview" /> @@ -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 @@