From e7c44ab91f0665180ad2366f754b8759c3210116 Mon Sep 17 00:00:00 2001
From: Louis Chemineau <louis@chmn.me>
Date: Thu, 13 Oct 2022 10:50:54 +0200
Subject: [PATCH] Add location grouping views

Signed-off-by: Louis Chemineau <louis@chmn.me>
---
 src/Photos.vue                |   5 +-
 src/router/index.js           |  15 ++
 src/views/LocationContent.vue | 442 ++++++++++++++++++++++++++++++++++
 src/views/Locations.vue       | 113 +++++++++
 4 files changed, 574 insertions(+), 1 deletion(-)
 create mode 100644 src/views/LocationContent.vue
 create mode 100644 src/views/Locations.vue

diff --git a/src/Photos.vue b/src/Photos.vue
index c090d1d7c..66a55c94f 100644
--- a/src/Photos.vue
+++ b/src/Photos.vue
@@ -64,9 +64,12 @@
 					:title="t('photos', 'Tags')">
 					<Tag slot="icon" :size="20" />
 				</NcAppNavigationItem>
+				<NcAppNavigationItem :to="{name: 'locations'}" :title="t('photos', 'Locations')">
+					<MapMarker slot="icon" :size="20" />
+				</NcAppNavigationItem>
 				<NcAppNavigationItem v-if="showLocationMenuEntry"
 					:to="{name: 'maps'}"
-					:title="t('photos', 'Locations')">
+					:title="t('photos', 'Maps')">
 					<MapMarker slot="icon" :size="20" />
 				</NcAppNavigationItem>
 			</template>
diff --git a/src/router/index.js b/src/router/index.js
index 72cd1b5f8..3e1e4c8d2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -36,6 +36,8 @@ const AlbumContent = () => import('../views/AlbumContent')
 const SharedAlbums = () => import('../views/SharedAlbums')
 const SharedAlbumContent = () => import('../views/SharedAlbumContent')
 const PublicAlbumContent = () => import('../views/PublicAlbumContent')
+const Locations = () => import('../views/Locations')
+const LocationContent = () => import('../views/LocationContent')
 const Tags = () => import('../views/Tags')
 const TagContent = () => import('../views/TagContent')
 const Timeline = () => import('../views/Timeline')
@@ -127,6 +129,19 @@ const router = new Router({
 				token: route.params.token,
 			}),
 		},
+		{
+			path: '/locations',
+			component: Locations,
+			name: 'locations',
+		},
+		{
+			path: '/locations/:locationName*',
+			component: LocationContent,
+			name: 'locations',
+			props: route => ({
+				locationName: route.params.locationName,
+			}),
+		},
 		{
 			path: '/folders/:path*',
 			component: Folders,
diff --git a/src/views/LocationContent.vue b/src/views/LocationContent.vue
new file mode 100644
index 000000000..8c5bb1b66
--- /dev/null
+++ b/src/views/LocationContent.vue
@@ -0,0 +1,442 @@
+<!--
+ - @copyright Copyright (c) 2022 Louis Chemineau <louis@chmn.me>
+ -
+ - @author Louis Chemineau <louis@chmn.me>
+ -
+ - @license AGPL-3.0-or-later
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+ -->
+<template>
+	<div>
+		<CollectionContent v-if="true"
+			ref="collectionContent"
+			:collection="album"
+			:collection-file-ids="albumFileIds"
+			:semaphore="semaphore"
+			:loading="loadingAlbums || loadingFiles"
+			:error="errorFetchingAlbums || errorFetchingFiles">
+			<!-- Header -->
+			<HeaderNavigation key="navigation"
+				slot="header"
+				slot-scope="{selectedFileIds}"
+				:loading="loadingFiles"
+				:params="{ albumName }"
+				:path="'/' + albumName"
+				:title="albumName"
+				@refresh="fetchAlbumContent">
+				<div v-if="album.location !== ''" slot="subtitle" class="album__location">
+					<MapMarker />{{ album.location }}
+				</div>
+				<template v-if="album !== undefined"
+					slot="right">
+					<UploadPicker v-if="album.nbItems !== 0"
+						:accept="allowedMimes"
+						:context="uploadContext"
+						:destination="album.basename"
+						:root="uploadContext.root"
+						:multiple="true"
+						@uploaded="onUpload" />
+
+					<NcButton v-if="sharingEnabled"
+						type="tertiary"
+						:aria-label="t('photos', 'Manage collaborators for this album')"
+						@click="showManageCollaboratorView = true">
+						<ShareVariant slot="icon" />
+					</NcButton>
+
+					<NcActions :aria-label="t('photos', 'Open actions menu')">
+						<NcActionButton :close-after-click="true"
+							:aria-label="t('photos', 'Edit album details')"
+							@click="showEditAlbumForm = true">
+							{{ t('photos', 'Edit album details') }}
+							<Pencil slot="icon" />
+						</NcActionButton>
+
+						<ActionDownload v-if="albumFileIds.length > 0"
+							:selected-file-ids="albumFileIds"
+							:title="t('photos', 'Download all files in album')">
+							<DownloadMultiple slot="icon" />
+						</ActionDownload>
+
+						<NcActionButton :close-after-click="true"
+							@click="handleDeleteAlbum">
+							{{ t('photos', 'Delete album') }}
+							<Delete slot="icon" />
+						</NcActionButton>
+
+						<template v-if="selectedFileIds.length > 0">
+							<NcActionSeparator />
+
+							<ActionDownload :selected-file-ids="selectedFileIds" :title="t('photos', 'Download selected files')">
+								<Download slot="icon" />
+							</ActionDownload>
+
+							<ActionFavorite :selected-file-ids="selectedFileIds" />
+
+							<NcActionButton :close-after-click="true"
+								@click="handleRemoveFilesFromAlbum(selectedFileIds)">
+								{{ t('photos', 'Remove selection from album') }}
+								<Close slot="icon" />
+							</NcActionButton>
+						</template>
+					</NcActions>
+				</template>
+			</HeaderNavigation>
+
+			<!-- No content -->
+			<NcEmptyContent v-if="album !== undefined && album.nbItems === 0 && !(loadingFiles || loadingAlbums)"
+				slot="empty-content"
+				:title="t('photos', 'This album does not have any photos or videos yet!')"
+				class="album__empty">
+				<ImagePlus slot="icon" />
+
+				<NcButton slot="action"
+					class="album__empty__button"
+					type="primary"
+					:aria-label="t('photos', 'Add photos to this album')"
+					@click="showAddPhotosModal = true">
+					<Plus slot="icon" />
+					{{ t('photos', "Add") }}
+				</NcButton>
+			</NcEmptyContent>
+		</CollectionContent>
+
+		<NcModal v-if="showAddPhotosModal"
+			size="large"
+			:title="t('photos', 'Add photos to the album')"
+			@close="showAddPhotosModal = false">
+			<FilesPicker :destination="album.basename"
+				:blacklist-ids="albumFileIds"
+				@files-picked="handleFilesPicked" />
+		</NcModal>
+
+		<NcModal v-if="showManageCollaboratorView"
+			:title="t('photos', 'Manage collaborators')"
+			@close="showManageCollaboratorView = false">
+			<CollaboratorsSelectionForm :album-name="album.basename"
+				:collaborators="album.collaborators"
+				:public-link="album.publicLink">
+				<template slot-scope="{collaborators}">
+					<NcButton :aria-label="t('photos', 'Save collaborators for this album.')"
+						type="primary"
+						:disabled="loadingAddCollaborators"
+						@click="handleSetCollaborators(collaborators)">
+						<template #icon>
+							<NcLoadingIcon v-if="loadingAddCollaborators" />
+						</template>
+						{{ t('photos', 'Save') }}
+					</NcButton>
+				</template>
+			</CollaboratorsSelectionForm>
+		</NcModal>
+
+		<NcModal v-if="showEditAlbumForm"
+			:title="t('photos', 'Edit album details')"
+			@close="showEditAlbumForm = false">
+			<AlbumForm :album="album" @done="redirectToNewName" />
+		</NcModal>
+	</div>
+</template>
+
+<script>
+// eslint-disable-next-line node/no-extraneous-import
+import { addNewFileMenuEntry } from '@nextcloud/files'
+import { getCurrentUser } from '@nextcloud/auth'
+import { mapActions, mapGetters } from 'vuex'
+import { NcActions, NcActionButton, NcButton, NcModal, NcEmptyContent, NcActionSeparator, NcLoadingIcon, isMobile } from '@nextcloud/vue'
+import { Upload, UploadPicker } from '@nextcloud/upload'
+import debounce from 'debounce'
+
+import Close from 'vue-material-design-icons/Close'
+import Delete from 'vue-material-design-icons/Delete'
+import Download from 'vue-material-design-icons/Download'
+import DownloadMultiple from 'vue-material-design-icons/DownloadMultiple'
+import ImagePlus from 'vue-material-design-icons/ImagePlus'
+import MapMarker from 'vue-material-design-icons/MapMarker'
+import Pencil from 'vue-material-design-icons/Pencil'
+import Plus from 'vue-material-design-icons/Plus'
+import PlusSvg from '@mdi/svg/svg/plus.svg'
+import ShareVariant from 'vue-material-design-icons/ShareVariant'
+
+import AbortControllerMixin from '../mixins/AbortControllerMixin.js'
+import FetchAlbumsMixin from '../mixins/FetchAlbumsMixin.js'
+import FetchFilesMixin from '../mixins/FetchFilesMixin.js'
+import UserConfig from '../mixins/UserConfig.js'
+
+import ActionDownload from '../components/Actions/ActionDownload.vue'
+import ActionFavorite from '../components/Actions/ActionFavorite.vue'
+import AlbumForm from '../components/Albums/AlbumForm.vue'
+import CollaboratorsSelectionForm from '../components/Albums/CollaboratorsSelectionForm.vue'
+import CollectionContent from '../components/Collection/CollectionContent.vue'
+import FilesPicker from '../components/FilesPicker.vue'
+import HeaderNavigation from '../components/HeaderNavigation.vue'
+
+import { genFileInfo } from '../utils/fileUtils.js'
+import allowedMimes from '../services/AllowedMimes.js'
+import client from '../services/DavClient.js'
+import DavRequest from '../services/DavRequest.js'
+import logger from '../services/logger.js'
+
+export default {
+	name: 'AlbumContent',
+	components: {
+		ActionDownload,
+		ActionFavorite,
+		AlbumForm,
+		Close,
+		CollaboratorsSelectionForm,
+		CollectionContent,
+		Delete,
+		Download,
+		DownloadMultiple,
+		FilesPicker,
+		HeaderNavigation,
+		ImagePlus,
+		MapMarker,
+		NcActionButton,
+		NcActions,
+		NcActionSeparator,
+		NcButton,
+		NcEmptyContent,
+		NcLoadingIcon,
+		NcModal,
+		Pencil,
+		Plus,
+		ShareVariant,
+		UploadPicker,
+	},
+
+	mixins: [
+		AbortControllerMixin,
+		FetchAlbumsMixin,
+		FetchFilesMixin,
+		isMobile,
+		UserConfig,
+	],
+
+	props: {
+		albumName: {
+			type: String,
+			default: '/',
+		},
+	},
+
+	data() {
+		return {
+			allowedMimes,
+
+			showAddPhotosModal: false,
+			showManageCollaboratorView: false,
+			showEditAlbumForm: false,
+
+			loadingAddCollaborators: false,
+		}
+	},
+
+	computed: {
+		...mapGetters([
+			'albumsFiles',
+		]),
+
+		/**
+		 * @return {object} The album information for the current albumName.
+		 */
+		album() {
+			return this.albums[this.albumName] || {}
+		},
+
+		/**
+		 * @return {string[]} The list of files for the current albumName.
+		 */
+		albumFileIds() {
+			return this.albumsFiles[this.albumName] || []
+		},
+
+		/**
+		 * @return {boolean} Whether sharing is enabled.
+		 */
+		sharingEnabled() {
+			return OC.Share !== undefined
+		},
+
+		/**
+		 * The upload picker context
+		 * We're uploading to the album folder, and the backend handle
+		 * the writing to the default location as well as the album update.
+		 * The context is also used for the NewFileMenu.
+		 */
+		uploadContext() {
+			return {
+				...this.album,
+				route: this.$route.name,
+				root: `dav/photos/${getCurrentUser()?.uid}/albums`,
+			}
+		},
+	},
+
+	watch: {
+		album(newAlbum, oldAlbum) {
+			if (newAlbum.filename !== oldAlbum.filename) {
+				this.fetchAlbumContent()
+			}
+		},
+	},
+
+	mounted() {
+		addNewFileMenuEntry({
+			id: 'album-add',
+			displayName: t('photos', 'Add photos to this album'),
+			templateName: '',
+			if: (context) => context.route === this.$route.name,
+			/** Existing icon css class */
+			iconSvgInline: PlusSvg,
+			/** Function to be run after creation */
+			handler: () => { this.showAddPhotosModal = true },
+		})
+	},
+
+	methods: {
+		...mapActions([
+			'appendFiles',
+			'deleteAlbum',
+			'addFilesToAlbum',
+			'removeFilesFromAlbum',
+			'updateAlbum',
+		]),
+
+		async fetchAlbumContent() {
+			if (this.loadingFiles || this.showEditAlbumForm) {
+				return []
+			}
+
+			const semaphoreSymbol = await this.semaphore.acquire(() => 0, 'fetchFiles')
+			const fetchSemaphoreSymbol = await this.fetchSemaphore.acquire()
+
+			try {
+				this.errorFetchingFiles = null
+				this.loadingFiles = true
+				this.semaphoreSymbol = semaphoreSymbol
+
+				const response = await client.getDirectoryContents(
+					`/photos/${getCurrentUser()?.uid}/albums/${this.albumName}`,
+					{
+						data: DavRequest,
+						details: true,
+						signal: this.abortController.signal,
+					}
+				)
+
+				// Gen files info and filtering invalid files
+				const fetchedFiles = response.data
+					.map(file => genFileInfo(file))
+					.filter(file => file.fileid)
+
+				const fileIds = fetchedFiles
+					.map(file => file.fileid.toString())
+
+				this.appendFiles(fetchedFiles)
+
+				if (fetchedFiles.length > 0) {
+					await this.$store.commit('addFilesToAlbum', { albumName: this.albumName, fileIdsToAdd: fileIds })
+				}
+
+				logger.debug(`[AlbumContent] Fetched ${fileIds.length} new files: `, fileIds)
+			} catch (error) {
+				if (error.response?.status === 404) {
+					this.errorFetchingFiles = 404
+				} else if (error.code === 'ERR_CANCELED') {
+					return
+				} else {
+					this.errorFetchingFiles = error
+				}
+
+				logger.error('[AlbumContent] Error fetching album files', { error })
+			} finally {
+				this.loadingFiles = false
+				this.semaphore.release(semaphoreSymbol)
+				this.fetchSemaphore.release(fetchSemaphoreSymbol)
+			}
+
+			return []
+		},
+
+		redirectToNewName({ album }) {
+			this.showEditAlbumForm = false
+
+			if (this.album.basename !== album.basename) {
+				this.$router.push(`/albums/${album.basename}`)
+			}
+		},
+
+		async handleFilesPicked(fileIds) {
+			this.showAddPhotosModal = false
+			await this.addFilesToAlbum({ albumName: this.albumName, fileIdsToAdd: fileIds })
+			// Re-fetch album content to have the proper filenames.
+			await this.fetchAlbumContent()
+		},
+
+		async handleRemoveFilesFromAlbum(fileIds) {
+			this.$refs.collectionContent.onUncheckFiles(fileIds)
+			await this.removeFilesFromAlbum({ albumName: this.albumName, fileIdsToRemove: fileIds })
+		},
+
+		async handleDeleteAlbum() {
+			await this.deleteAlbum({ albumName: this.albumName })
+			this.$router.push('/albums')
+		},
+
+		async handleSetCollaborators(collaborators) {
+			try {
+				this.loadingAddCollaborators = true
+				this.showManageCollaboratorView = false
+				await this.updateAlbum({ albumName: this.albumName, properties: { collaborators } })
+			} catch (error) {
+				logger.error(error)
+			} finally {
+				this.loadingAddCollaborators = false
+			}
+		},
+
+		/**
+		 * A new File has been uploaded, let's add it
+		 *
+		 * @param {Upload[]} uploads
+		 */
+		onUpload: debounce(function() {
+			this.fetchAlbumContent()
+		}, 500),
+	},
+}
+</script>
+<style lang="scss" scoped>
+.album {
+	&__title {
+		width: 100%;
+	}
+
+	&__name {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	&__location {
+		margin-left: -4px;
+		display: flex;
+		color: var(--color-text-lighter);
+	}
+}
+</style>
diff --git a/src/views/Locations.vue b/src/views/Locations.vue
new file mode 100644
index 000000000..9312c4ebf
--- /dev/null
+++ b/src/views/Locations.vue
@@ -0,0 +1,113 @@
+<!--
+ - @copyright Copyright (c) 2022 Louis Chemineau <louis@chmn.me>
+ -
+ - @author Louis Chemineau <louis@chmn.me>
+ -
+ - @license AGPL-3.0-or-later
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+ -->
+<template>
+	<div>
+		<CollectionsList :collections="locations"
+			:loading="loadingLocations"
+			:error="errorFetchingLocations"
+			class="locations-list">
+			<HeaderNavigation key="navigation"
+				slot="header"
+				:loading="loadingLocations"
+				:title="t('photos', 'Locations')"
+				:root-title="t('photos', 'Locations')"
+				@refresh="fetchLocations" />
+
+			<CollectionCover :key="collection.basename"
+				slot-scope="{collection}"
+				:link="`/locations/${collection.basename}`"
+				:alt-img="t('photos', 'Cover photo for location {locationName}', { locationName: collection.basename })"
+				:cover-url="collection.lastPhoto | coverUrl">
+				<h2 class="location__name">
+					{{ collection.basename }}
+				</h2>
+
+				<div slot="subtitle" class="location__details">
+					{{ collection.date }} ⸱ {{ n('photos', '%n item', '%n photos and videos', collection.nbItems,) }}
+				</div>
+			</CollectionCover>
+
+			<NcEmptyContent slot="empty-collections-list" :title="t('photos', 'There is no location yet!')">
+				<FolderMultipleImage slot="icon" />
+			</NcEmptyContent>
+		</CollectionsList>
+	</div>
+</template>
+
+<script>
+import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage'
+
+import { generateUrl } from '@nextcloud/router'
+import { NcEmptyContent } from '@nextcloud/vue'
+
+import FetchLocationsMixin from '../mixins/FetchLocationsMixin.js'
+import CollectionsList from '../components/Collection/CollectionsList.vue'
+import CollectionCover from '../components/Collection/CollectionCover.vue'
+import HeaderNavigation from '../components/HeaderNavigation.vue'
+
+export default {
+	name: 'Locations',
+	components: {
+		FolderMultipleImage,
+		NcEmptyContent,
+		CollectionsList,
+		CollectionCover,
+		HeaderNavigation,
+	},
+
+	filters: {
+		/**
+		 * @param {string} lastPhoto The location's last photos.
+		 */
+		coverUrl(lastPhoto) {
+			if (lastPhoto === -1) {
+				return ''
+			}
+
+			return generateUrl(`/apps/photos/api/v1/preview/${lastPhoto}?x=${512}&y=${512}`)
+		},
+	},
+
+	mixins: [
+		FetchLocationsMixin,
+	],
+
+	data() {
+		return {
+			showAlbumCreationForm: false,
+		}
+	},
+}
+</script>
+<style lang="scss" scoped>
+.locations-list {
+	display: flex;
+	flex-direction: column;
+
+	.location__name {
+		font-weight: normal;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+}
+</style>