List shared albums in album picker

Signed-off-by: Louis Chemineau <louis@chmn.me>

src/components/Albums/AlbumPicker.vue

@@ -23,16 +23,16 @@
 	<div v-if="!showAlbumCreationForm" class="album-picker">
 		<h2>
 			{{ t('photos', 'Add to Album') }}
-			<NcLoadingIcon v-if="loadingAlbums" class="loading-icon" />
+			<NcLoadingIcon v-if="loadingAlbums || loadingSharedAlbums" class="loading-icon" />
 		</h2>
 
 		<ul class="albums-container">
-			<NcListItem v-for="album in albums"
-				:key="album.basename"
+			<NcListItem v-for="album in allAlbums"
+				:key="album.filename"
 				class="album"
-				:title="album.basename"
+				:title="originalName(album)"
 				:aria-label="t('photos', 'Add selection to album {albumName}', {albumName: album.basename})"
-				@click="pickAlbum(album.basename)">
+				@click="pickAlbum(album)">
 				<template slot="icon">
 					<img v-if="album.lastPhoto !== -1" class="album__image" :src="album.lastPhoto | toCoverUrl">
 					<div v-else class="album__image album__image--placeholder">
@@ -42,8 +42,9 @@
 
 				<template slot="subtitle">
 					{{ n('photos', '%n item', '%n photos and videos', album.nbItems) }}
-					<!-- TODO: finish collaboration -->
-					<!--⸱ {{ n('photos', 'Share with %n user', 'Share with %n users', album.isShared) }}-->
+					<template v-if="isSharedAlbum(album)">
+						⸱ {{ t('photos', 'Shared by') }}&nbsp;<NcUserBubble :display-name="album.collaborators[0].label" :user="album.collaborators[0].id" />
+					</template>
 				</template>
 			</NcListItem>
 		</ul>
@@ -70,10 +71,12 @@
 import Plus from 'vue-material-design-icons/Plus.vue'
 import ImageMultiple from 'vue-material-design-icons/ImageMultiple.vue'
 
-import { NcButton, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
+import { NcButton, NcListItem, NcLoadingIcon, NcUserBubble } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
+import { translate, translatePlural } from '@nextcloud/l10n'
 
 import FetchAlbumsMixin from '../../mixins/FetchAlbumsMixin.js'
+import FetchSharedAlbumsMixin from '../../mixins/FetchSharedAlbumsMixin.js'
 import AlbumForm from './AlbumForm.vue'
 
 export default {
@@ -85,6 +88,7 @@ export default {
 		NcButton,
 		NcListItem,
 		NcLoadingIcon,
+		NcUserBubble,
 		AlbumForm,
 	},
 
@@ -100,6 +104,7 @@ export default {
 
 	mixins: [
 		FetchAlbumsMixin,
+		FetchSharedAlbumsMixin,
 	],
 
 	data() {
@@ -108,15 +113,44 @@ export default {
 		}
 	},
 
+	computed: {
+		/** @return {object[]} */
+		allAlbums() {
+			return [...Object.values(this.albums), ...Object.values(this.sharedAlbums)]
+		},
+	},
+
 	methods: {
 		albumCreatedHandler() {
 			this.showAlbumCreationForm = false
-			this.fetchAlbums()
 		},
 
-		pickAlbum(albumBaseName) {
-			this.$emit('album-picked', albumBaseName)
+		pickAlbum(album) {
+			this.$emit('album-picked', album)
 		},
+
+		/**
+		 * @param {object} album
+		 * @return {boolean}
+		 */
+		isSharedAlbum(album) {
+			return album.filename.match(/^\/photos\/.+\/sharedalbums\//) !== null
+		},
+
+		/**
+		 * @param {object} album The album's full name, including the userid.
+		 * @return {string} The album name without the userId between parentheses.
+		 */
+		originalName(album) {
+			if (this.isSharedAlbum(album)) {
+				return album.basename.replace(new RegExp(`\\(${album.collaborators[0].id}\\)$`), '')
+			} else {
+				return album.basename
+			}
+		},
+
+		t: translate,
+		n: translatePlural,
 	},
 }
 </script>

src/mixins/FetchSharedAlbumsMixin.js

@@ -32,8 +32,8 @@ export default {
 
 	data() {
 		return {
-			errorFetchingAlbums: null,
-			loadingAlbums: false,
+			errorFetchingSharedAlbums: null,
+			loadingSharedAlbums: false,
 		}
 	},
 
@@ -42,7 +42,7 @@ export default {
 	],
 
 	async beforeMount() {
-		this.fetchAlbums()
+		this.fetchSharedAlbums()
 	},
 
 	computed: {
@@ -56,26 +56,26 @@ export default {
 			'addSharedAlbums',
 		]),
 
-		async fetchAlbums() {
-			if (this.loadingAlbums) {
+		async fetchSharedAlbums() {
+			if (this.loadingSharedAlbums) {
 				return
 			}
 
 			try {
-				this.loadingAlbums = true
-				this.errorFetchingAlbums = null
+				this.loadingSharedAlbums = true
+				this.errorFetchingSharedAlbums = null
 
 				const albums = await fetchAlbums(`/photos/${getCurrentUser()?.uid}/sharedalbums`, this.abortController.signal)
 
 				this.addSharedAlbums({ albums })
 			} catch (error) {
 				if (error.response?.status === 404) {
-					this.errorFetchingAlbums = 404
+					this.errorFetchingSharedAlbums = 404
 				} else {
-					this.errorFetchingAlbums = error
+					this.errorFetchingSharedAlbums = error
 				}
 			} finally {
-				this.loadingAlbums = false
+				this.loadingSharedAlbums = false
 			}
 		},
 	},

src/views/SharedAlbumContent.vue

@@ -25,8 +25,8 @@
 			ref="collectionContent"
 			:collection="album"
 			:collection-file-ids="albumFileIds"
-			:loading="loadingAlbums || loadingFiles"
-			:error="errorFetchingAlbums || errorFetchingFiles">
+			:loading="loadingSharedAlbums || loadingFiles"
+			:error="errorFetchingSharedAlbums || errorFetchingFiles">
 			<!-- Header -->
 			<HeaderNavigation key="navigation"
 				slot="header"

src/views/SharedAlbums.vue

@@ -21,15 +21,15 @@
  -->
 <template>
 	<CollectionsList :collections="sharedAlbums"
-		:loading="loadingAlbums"
-		:error="errorFetchingAlbums"
+		:loading="loadingSharedAlbums"
+		:error="errorFetchingSharedAlbums"
 		class="albums-list">
 		<HeaderNavigation key="navigation"
 			slot="header"
-			:loading="loadingAlbums"
+			:loading="loadingSharedAlbums"
 			:title="t('photos', 'Shared albums')"
 			:root-title="t('photos', 'Shared albums')"
-			@refresh="fetchAlbums" />
+			@refresh="fetchSharedAlbums" />
 
 		<CollectionCover :key="collection.basename"
 			slot-scope="{collection}"

src/views/Timeline.vue

@@ -230,7 +230,7 @@ export default {
 	},
 
 	methods: {
-		...mapActions(['deleteFiles', 'addFilesToAlbum']),
+		...mapActions(['deleteFiles', 'addFilesToAlbum', 'addFilesToSharedAlbum']),
 
 		getContent() {
 			this.fetchFiles('', {
@@ -254,9 +254,13 @@ export default {
 			// TODO: finish when implementing upload
 		},
 
-		async addSelectionToAlbum(albumName) {
+		async addSelectionToAlbum(album) {
 			this.showAlbumPicker = false
-			await this.addFilesToAlbum({ albumName, fileIdsToAdd: this.selectedFileIds })
+			if (album.filename.match(/^\/photos\/.+\/sharedalbums\//) !== null) {
+				await this.addFilesToSharedAlbum({ albumName: album.basename, fileIdsToAdd: this.selectedFileIds })
+			} else {
+				await this.addFilesToAlbum({ albumName: album.basename, fileIdsToAdd: this.selectedFileIds })
+			}
 		},
 
 		async deleteSelection() {