feat: Allow multiple source folders

Signed-off-by: Louis Chemineau <[email protected]>
nextcloud · Apr 9, 2024 · bc77dc4 · bc77dc4
1 parent 16d6cda
commit bc77dc4
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 42 deletions.
diff --git a/lib/Service/UserConfigService.php b/lib/Service/UserConfigService.php
@@ -34,7 +34,8 @@ class UserConfigService {
 	public const DEFAULT_CONFIGS = [
 		'croppedLayout' => 'false',
 		'photosLocation' => '/Photos',
-		'photosSourceFolder' => '/Photos',
+		// TODO: add migration to retrieve value in photosSourceFolders
+		'photosSourceFolders' => '["/Photos"]',
 	];
 
 	private IConfig $config;

diff --git a/src/components/Settings/PhotosSourceLocationsSettings.vue b/src/components/Settings/PhotosSourceLocationsSettings.vue
@@ -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>
diff --git a/src/components/Settings/SettingsDialog.vue b/src/components/Settings/SettingsDialog.vue
@@ -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>

diff --git a/src/mixins/FetchFilesMixin.js b/src/mixins/FetchFilesMixin.js
@@ -102,7 +102,8 @@ export default {
 			} catch (error) {
 				if (error.response?.status === 404) {
 					this.errorFetchingFiles = 404
-					const source = joinPaths(davRootPath, store.state.userConfig.photosSourceFolder ?? '/Photos') + '/'
+					// TODO improve error handling
+					const source = joinPaths(davRootPath, store.state.userConfig.photosSourceFolders ?? ['/Photos']) + '/'
 					logger.debug('Photo source does not exist, creating it.')
 					try {
 						await davGetClient().createDirectory(source)

diff --git a/src/services/PhotoSearch.js b/src/services/PhotoSearch.js
@@ -21,12 +21,12 @@
  */
 
 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'
 
 /**
  * List files from a folder and filter out unwanted mimes
@@ -51,8 +51,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 +93,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>${davRootPath}/${folder}</d:href>
+				<d:depth>infinity</d:depth>
+			</d:scope>`
+		)
+		.join('\n')
 
 	options = Object.assign({
 		method: 'SEARCH',
@@ -123,10 +120,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>

diff --git a/src/store/userConfig.js b/src/store/userConfig.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', '[]')),
 			photosLocation: loadState('photos', 'photosLocation', ''),
 			photosLocationFolder: undefined,
 		}

diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
@@ -314,7 +314,7 @@ export default {
 		},
 
 		handleUserConfigChange({ key }) {
-			if (key === 'photosSourceFolder') {
+			if (key === 'photosSourceFolders') {
 				this.resetFetchFilesState()
 			}
 		},