[stable32] feat(Albums): Allow deleting an album photo from the viewer

lib/Sabre/PropFindPlugin.php

@@ -16,6 +16,7 @@
 use OCA\Photos\Sabre\Place\PlacePhoto;
 use OCA\Photos\Sabre\Place\PlaceRoot;
 use OCP\Files\DavUtil;
+use OCP\Files\IRootFolder;
 use OCP\Files\NotFoundException;
 use OCP\FilesMetadata\IFilesMetadataManager;
 use OCP\IPreview;
@@ -42,13 +43,15 @@ class PropFindPlugin extends ServerPlugin {
 	public const FILTERS_PROPERTYNAME = '{http://nextcloud.org/ns}filters';
 	public const PERMISSIONS_PROPERTYNAME = '{http://owncloud.org/ns}permissions';
 	public const PHOTOS_ALBUM_FILE_ORIGIN_PROPERTYNAME = '{http://nextcloud.org/ns}photos-album-file-origin';
+	public const PHOTOS_COLLECTION_FILE_ORIGINAL_FILENAME_PROPERTYNAME = '{http://nextcloud.org/ns}photos-collection-file-original-filename';
 
 	private ?Tree $tree = null;
 
 	public function __construct(
 		private readonly IPreview $previewManager,
 		private readonly IFilesMetadataManager $filesMetadataManager,
 		private readonly IUserSession $userSession,
+		private readonly IRootFolder $rootFolder,
 	) {
 	}
 
@@ -117,6 +120,19 @@ public function propFind(PropFind $propFind, INode $node): void {
 					return null;
 				}
 			});
+
+			$propFind->handle(self::PHOTOS_COLLECTION_FILE_ORIGINAL_FILENAME_PROPERTYNAME, function () use ($node) {
+				if (!($node instanceof AlbumPhoto)) {
+					return;
+				}
+
+				$currentUser = $this->userSession->getUser();
+				$fileOwner = $node->getFileInfo()->getOwner();
+				if ($currentUser !== null && $currentUser === $fileOwner) {
+					$userFolder = $this->rootFolder->getUserFolder($currentUser->getUID());
+					return $userFolder->getRelativePath($node->getFileInfo()->getPath());
+				}
+			});
 		}
 
 		if ($node instanceof ICollection) {

src/components/Collection/CollectionContent.vue

@@ -46,9 +46,11 @@
 </template>
 
 <script lang='ts'>
+import type { File } from '@nextcloud/files'
 import type { PropType } from 'vue'
-import type { PublicAlbum } from '../../store/publicAlbums.js'
+import type { Collection } from '../../services/collectionFetcher.js'
 
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate } from '@nextcloud/l10n'
 import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 import { defineComponent } from 'vue'
@@ -75,7 +77,7 @@
 
 	props: {
 		collection: {
-			type: Object as PropType<PublicAlbum>,
+			type: Object as PropType<Collection>,
 			default: () => undefined,
 		},
 
@@ -91,7 +93,7 @@
 
 		allowSelection: {
 			type: Boolean,
 			default: true,
 		},
 
 		error: {
@@ -122,6 +124,14 @@
 		},
 	},
 
+	mounted() {
+		subscribe('files:node:deleted', this.handleFileDeleted)
+	},
+
+	destroyed() {
+		unsubscribe('files:node:deleted', this.handleFileDeleted)
+	},
+
 	methods: {
 		openViewer(fileId: string) {
 			window.OCA.Viewer.open({
@@ -130,6 +140,10 @@
 			})
 		},
 
+		handleFileDeleted({ fileid }: File) {
+			this.$store.commit('removeFilesFromCollection', { collectionFileName: this.collection.root + this.collection.path, fileIdsToRemove: [fileid?.toString()] })
+		},
+
 		t: translate,
 	},
 })

src/components/FilesListViewer.vue

@@ -224,10 +224,12 @@ export default {
 
 	mounted() {
 		subscribe('files:node:updated', this.handleFileUpdated)
+		subscribe('files:node:deleted', this.handleFileDeleted)
 	},
 
 	destroyed() {
 		unsubscribe('files:node:updated', this.handleFileUpdated)
+		unsubscribe('files:node:deleted', this.handleFileDeleted)
 	},
 
 	methods: {
@@ -250,6 +252,10 @@ export default {
 			const fetchedFile = await fetchFile(this.files[fileid as number].path)
 			this.$store.dispatch('appendFiles', [fetchedFile])
 		},
+
+		handleFileDeleted({ fileid }: File) {
+			this.$store.commit('deleteFile', fileid)
+		},
 	},
 }
 </script>

src/components/PhotosPicker.vue

@@ -155,7 +155,7 @@
 		 */
 		open: {
 			type: Boolean,
 			default: true,
 		},
 
 		/**
@@ -244,6 +244,7 @@
 
 		emitPickedEvent() {
 			this.$emit('files-picked', this.selectedFileIds)
+			this.resetSelection()
 		},
 
 		/**

src/mixins/FetchCollectionContentMixin.ts

@@ -15,6 +15,7 @@ import {
 	fetchCollection, fetchCollectionFiles,
 } from '../services/collectionFetcher.js'
 import logger from '../services/logger.js'
+import { collectionFilesExtraProps } from '../store/collections.js'
 import SemaphoreWithPriority from '../utils/semaphoreWithPriority.js'
 import AbortControllerMixin from './AbortControllerMixin.js'
 
@@ -62,11 +63,13 @@ export default defineComponent({
 			return null
 		},
 
-		async fetchCollectionFiles(collectionFileName: string, extraProps?: string[], client?: WebDAVClient): Promise<File[]> {
+		async fetchCollectionFiles(collectionFileName: string, extraProps: string[] = [], client?: WebDAVClient): Promise<File[]> {
 			if (this.loadingCollectionFiles) {
 				return []
 			}
 
+			extraProps = [...extraProps, ...collectionFilesExtraProps]
+
 			const fetchSemaphoreSymbol = await this.fetchSemaphore.acquire()
 
 			try {

src/services/collectionFetcher.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @stylistic/no-tabs */
 /**
  * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
@@ -68,7 +69,7 @@ function getCollectionFilesDavRequest(extraProps: string[] = []): string {
 					<oc:favorite />
 					<oc:fileid />
 					<oc:permissions />
-					${extraProps.join('')}
+					${extraProps.join('\n					')}
 				</d:prop>
 			</d:propfind>`
 }

src/store/collections.ts

@@ -12,6 +12,8 @@ import { davClient } from '../services/DavClient.ts'
 import logger from '../services/logger.js'
 import Semaphore from '../utils/semaphoreWithPriority.js'
 
+export const collectionFilesExtraProps = ['<nc:photos-collection-file-original-filename />']
+
 /**
  * Collections are indexed by their `filename`.
  */

src/utils/fileUtils.ts

@@ -5,6 +5,7 @@ import {
 
 	FileType, Permission,
 } from '@nextcloud/files'
+import { getRemoteURL, getRootPath } from '@nextcloud/files/dav'
 /**
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
@@ -93,12 +94,12 @@ export function sortCompareFileInfo(fileInfo1: FoldersNode, fileInfo2: FoldersNo
 }
 
 export type ViewerFileInfo = {
-	fileid: number
+	fileid?: number
 	basename: string
 	filename: string
-	mime: string
-	mtime: Date
-	ownerId: string
+	mime?: string
+	mtime?: Date
+	ownerId: string | null
 	source: string
 	hasPreview: boolean
 	previewUrl: string
@@ -129,14 +130,23 @@ export function toViewerFileInfo(file: Node): ViewerFileInfo {
 		permissions += 'R'
 	}
 
+	let filename = file.root + file.path
+	let source = file.source
+	// Override the filename and source to allow deleting a file from the viewer.
+	// This is needed when the filename and source are related to the albums.
+	if (file.attributes['photos-collection-file-original-filename'] !== undefined) {
+		filename = file.attributes['photos-collection-file-original-filename']
+		source = getRemoteURL() + getRootPath() + filename
+	}
+
 	return {
 		fileid: file.fileid,
 		basename: file.basename,
-		filename: file.root + file.path,
+		filename,
 		mime: file.mime,
 		mtime: file.mtime,
 		ownerId: file.owner,
-		source: file.source,
+		source,
 		hasPreview: file.attributes.hasPreview,
 		previewUrl: file.attributes.previewUrl ?? generateUrl(`/apps/photos/api/v1/preview/${file.fileid}?x=2048&y=2048`),
 		etag: file.attributes.etag,