feat: Allow multiple source folders

Signed-off-by: Louis Chemineau <[email protected]>

Signed-off-by: nextcloud-command <[email protected]>

Author: artonge

js/photos-dashboard.js

@@ -0,0 +1,58 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * @copyright Copyright (c) 2024 Louis Chmn <[email protected]>
+ *
+ * @author Louis Chmn <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * 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/>.
+ *
+ */
+
+namespace OCA\Photos\Migration;
+
+use Closure;
+use OCP\DB\ISchemaWrapper;
+use OCP\IDBConnection;
+use OCP\Migration\IOutput;
+use OCP\Migration\SimpleMigrationStep;
+
+/**
+ * Migrate the photosSourceFolder user config to photosSourceFolders
+ */
+class Version3000Date20240417075404 extends SimpleMigrationStep {
+	public function __construct(
+		private IDBConnection $db,
+	) {
+	}
+
+	/**
+	 * @param IOutput $output
+	 * @param Closure(): ISchemaWrapper $schemaClosure
+	 * @param array $options
+	 */
+	public function postSchemaChange(IOutput $output, Closure $schemaClosure, array $options): void {
+		$query = $this->db->getQueryBuilder();
+		$query->update('preferences')
+			->set('configvalue', $query->func()->concat($query->expr()->literal('["'), 'configvalue', $query->expr()->literal('"]')))
+			->set('configkey', $query->expr()->literal('photosSourceFolders'))
+			->where($query->expr()->eq('appid', $query->expr()->literal('photos')))
+			->andWhere($query->expr()->eq('configkey', $query->expr()->literal('photosSourceFolder')))
+			->executeStatement();
+	}
+}

js/photos-dashboard.js.map

@@ -34,7 +34,7 @@ class UserConfigService {
 	public const DEFAULT_CONFIGS = [
 		'croppedLayout' => 'false',
 		'photosLocation' => '/Photos',
-		'photosSourceFolder' => '/Photos',
+		'photosSourceFolders' => '["/Photos"]',
 	];
 
 	private IConfig $config;

js/photos-main.js

@@ -23,24 +23,22 @@
 <template>
 	<div class="photos-locations-container">
 		<div class="photos-locations">
-			<PhotosFolder :path="photosSourceFolder" :root-folder-label="t('photos', 'All folders')" :root-folder-icon="FolderMultiple" />
-			<!-- TODO: uncomment when SEARCH on multiple folders is implemented. -->
-			<!-- <li v-for="(source, index) in photosSourceFolder"
+			<li v-for="(source, index) in photosSourceFolders"
 				:key="index">
 				<PhotosFolder :path="source"
-					:can-delete="photosSourceFolder.length !== 1"
+					:can-delete="photosSourceFolders.length !== 1"
 					:root-folder-label="t('photos', 'All folders')"
+					:root-folder-icon="FolderMultiple"
 					@remove-folder="removeSourceFolder(index)" />
-			</li> -->
+			</li>
 		</div>
 
-		<NcButton :aria-label="t('photos', 'Choose a Photos source for the timelines')"
+		<NcButton :aria-label="t('photos', 'Add a Photos source for the timelines')"
 			@click="debounceAddSourceFolder">
-			<!-- TODO: uncomment when SEARCH on multiple folders is implemented. -->
-			<!-- <template #icon>
+			<template #icon>
 				<Plus :size="20" />
-			</template> -->
-			{{ t('photos', 'Choose a different folder') }}
+			</template>
+			{{ t('photos', 'Add folder') }}
 		</NcButton>
 	</div>
 </template>
@@ -50,6 +48,7 @@ import debounce from 'debounce'
 import { defineComponent } from 'vue'
 
 import FolderMultiple from 'vue-material-design-icons/FolderMultiple.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
 
 import { NcButton } from '@nextcloud/vue'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
@@ -63,6 +62,7 @@ export default defineComponent({
 	components: {
 		NcButton,
 		PhotosFolder,
+		Plus,
 	},
 
 	data() {
@@ -72,9 +72,9 @@ export default defineComponent({
 	},
 
 	computed: {
-		/** @return {string} */
-		photosSourceFolder() {
-			return this.$store.state.userConfig.photosSourceFolder
+		/** @return {string[]} */
+		photosSourceFolders() {
+			return this.$store.state.userConfig.photosSourceFolders
 		},
 	},
 
@@ -97,17 +97,16 @@ export default defineComponent({
 
 		async addSourceFolder() {
 			const pickedFolder = await this.openFilePicker(t('photos', 'Select a source folder for your media'))
-			// TODO: uncomment when SEARCH on multiple folders is implemented.
-			// if (this.photosSourceFolder.includes(pickedFolder)) {
-			//   return
-			// }
-			this.$store.dispatch('updateUserConfig', { key: 'photosSourceFolder', value: pickedFolder })
+			if (this.photosSourceFolders.includes(pickedFolder)) {
+				return
+			}
+			this.$store.dispatch('updateUserConfig', { key: 'photosSourceFolders', value: [...this.photosSourceFolders, pickedFolder] })
 		},
 
 		removeSourceFolder(index) {
-			const folders = [...this.photosSourceFolder]
+			const folders = [...this.photosSourceFolders]
 			folders.splice(index, 1)
-			this.$store.dispatch('updateUserConfig', { key: 'photosSourceFolder', value: folders })
+			this.$store.dispatch('updateUserConfig', { key: 'photosSourceFolders', value: folders })
 		},
 
 		t,
@@ -123,6 +122,10 @@ export default defineComponent({
 
 	.photos-locations {
 		margin-bottom: 16px;
+
+		li {
+			list-style: none;
+		}
 	}
 }
 </style>

js/photos-main.js.map

@@ -7,7 +7,7 @@
 			<CroppedLayoutSettings />
 		</NcAppSettingsSection>
 
-		<NcAppSettingsSection id="source-directories-settings" :name="t('photos', 'Media folder')">
+		<NcAppSettingsSection id="source-directories-settings" :name="t('photos', 'Media folders')">
 			<div class="setting-section-subline">
 				{{ t('photos', 'Choose the folders from where photos and videos are shown.') }}
 			</div>

js/photos-node_modules_blurhash_dist_esm_index_js-node_modules_vue-material-design-icons_PackageVariant-6bf9ec.js

@@ -101,13 +101,20 @@ export default {
 				return fileIds
 			} catch (error) {
 				if (error.response?.status === 404) {
-					this.errorFetchingFiles = 404
-					const source = joinPaths(davRootPath, store.state.userConfig.photosSourceFolder ?? '/Photos') + '/'
-					logger.debug('Photo source does not exist, creating it.')
-					try {
-						await davGetClient().createDirectory(source)
-					} catch (error) {
-						logger.error('Fail to create source directory', { error })
+					const sources = store.state.userConfig.photosSourceFolders
+					for (const source of sources) {
+						if (error.response?.data?.match(`File with name /${source} could not be located`) === null) {
+							continue
+						}
+						logger.debug(`The ${source} folder does not exist, creating it.`)
+						try {
+							await davGetClient().createDirectory(joinPaths(davRootPath, source))
+							this.resetFetchFilesState()
+							return []
+						} catch (error) {
+							this.errorFetchingFiles = 404
+							logger.error('Fail to create source directory', { error })
+						}
 					}
 				} else if (error.code === 'ERR_CANCELED') {
 					return []
@@ -117,7 +124,6 @@ export default {
 
 				// cancelled request, moving on...
 				logger.error('Error fetching files', { error })
-				console.error(error)
 			} finally {
 				this.loadingFiles = false
 				this.fetchSemaphore.release(fetchSemaphoreSymbol)

js/photos-node_modules_blurhash_dist_esm_index_js-node_modules_vue-material-design-icons_PackageVariant-6bf9ec.js.map

@@ -21,12 +21,13 @@
  */
 
 import { genFileInfo } from '../utils/fileUtils.js'
-import { getCurrentUser } from '@nextcloud/auth'
 import { allMimes } from './AllowedMimes.js'
 import client from './DavClient.js'
 import { props } from './DavRequest.js'
 import moment from '@nextcloud/moment'
 import store from '../store/index.js'
+import { davRootPath } from '@nextcloud/files'
+import { joinPaths } from '@nextcloud/paths'
 
 /**
  * List files from a folder and filter out unwanted mimes
@@ -51,8 +52,6 @@ export default async function(options = {}) {
 		...options,
 	}
 
-	const prefixPath = `/files/${getCurrentUser().uid}`
-
 	// generating the search or condition
 	// based on the allowed mimetypes
 	const orMime = options.mimesType.reduce((str, mime) => `${str}
@@ -95,15 +94,14 @@ export default async function(options = {}) {
 			}).join('\n')}</d:or>`
 		: ''
 
-	// TODO: uncomment when SEARCH on multiple folders is implemented.
-	// const sourceFolders = store.state.userConfig.photosSourceFolder
-	// .map(folder => `
-	//   <d:scope>
-	//     <d:href>${davRootPath}/${folder}</d:href>
-	//     <d:depth>infinity</d:depth>
-	//   </d:scope>
-	// `)
-	// .join('\n')
+	const sourceFolders = store.state.userConfig.photosSourceFolders
+		.map(folder => `
+			<d:scope>
+				<d:href>${joinPaths(davRootPath, folder)}</d:href>
+				<d:depth>infinity</d:depth>
+			</d:scope>`
+		)
+		.join('\n')
 
 	options = Object.assign({
 		method: 'SEARCH',
@@ -123,10 +121,7 @@ export default async function(options = {}) {
 						</d:prop>
 					</d:select>
 					<d:from>
-						<d:scope>
-							<d:href>${prefixPath}/${store.state.userConfig.photosSourceFolder ?? '/Photos'}</d:href>
-							<d:depth>infinity</d:depth>
-						</d:scope>
+						${sourceFolders}
 					</d:from>
 					<d:where>
 						<d:and>

js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js

@@ -58,7 +58,7 @@ export async function getFolder(path) {
 /**
  * @typedef {object} UserConfigState
  * @property {boolean} croppedLayout
- * @property {string} photosSourceFolder
+ * @property {string[]} photosSourceFolders
  * @property {string} photosLocation
  * @property {import('@nextcloud/files').Folder} [photosLocationFolder]
  */
@@ -68,7 +68,7 @@ const module = {
 	state() {
 		return {
 			croppedLayout: loadState('photos', 'croppedLayout', 'false') === 'true',
-			photosSourceFolder: loadState('photos', 'photosSourceFolder', ''),
+			photosSourceFolders: JSON.parse(loadState('photos', 'photosSourceFolders', '["/Photos"]')),
 			photosLocation: loadState('photos', 'photosLocation', ''),
 			photosLocationFolder: undefined,
 		}

js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js.map

@@ -25,7 +25,7 @@
 <template>
 	<!-- Errors handlers -->
 	<div v-if="errorFetchingFiles" class="timeline__empty-content">
-		<NcEmptyContent v-if="errorFetchingFiles === 404" :name="t('photos', 'The source folder does not exists')">
+		<NcEmptyContent v-if="errorFetchingFiles === 404" :name="t('photos', 'One of the source folders does not exists')">
 			<FolderAlertOutline slot="icon" />
 			<PhotosSourceLocationsSettings slot="action" class="timeline__update_source_directory" />
 		</NcEmptyContent>
@@ -314,7 +314,7 @@ export default {
 		},
 
 		handleUserConfigChange({ key }) {
-			if (key === 'photosSourceFolder') {
+			if (key === 'photosSourceFolders') {
 				this.resetFetchFilesState()
 			}
 		},