Select root folder for timeline

lib/Controller/PageController.php

@@ -86,7 +86,10 @@ public function index(): TemplateResponse {
 		$this->initialStateService->provideInitialState($this->appName, 'image-mimes', Application::IMAGE_MIMES);
 		$this->initialStateService->provideInitialState($this->appName, 'video-mimes', Application::VIDEO_MIMES);
 		$this->initialStateService->provideInitialState($this->appName, 'maps', $this->appManager->isEnabledForUser('maps') === true);
+
+		// User Settings
 		$this->initialStateService->provideInitialState($this->appName, 'croppedLayout', $this->config->getUserValue($user->getUid(), Application::APP_ID, 'croppedLayout', 'false'));
+		$this->initialStateService->provideInitialState($this->appName, 'timelineRootFolder', $this->config->getUserValue($user->getUid(), Application::APP_ID, 'timelineRootFolder', '/'));
 
 		Util::addScript(Application::APP_ID, 'photos-main');
 		Util::addStyle(Application::APP_ID, 'icons');

package.json

@@ -34,6 +34,7 @@
 		"@essentials/request-timeout": "^1.3.0",
 		"@nextcloud/auth": "^1.3.0",
 		"@nextcloud/axios": "^1.4.0",
+		"@nextcloud/dialogs": "^3.0.0",
 		"@nextcloud/event-bus": "^1.2.0",
 		"@nextcloud/initial-state": "^1.2.0",
 		"@nextcloud/l10n": "^1.4.1",

src/Photos.vue

@@ -41,6 +41,7 @@
 			</template>
 			<template #footer>
 				<AppNavigationSettings :title="t('photos', 'Settings')">
+					<TimelineSettings />
 					<CroppedLayoutSettings />
 				</AppNavigationSettings>
 			</template>
@@ -70,6 +71,7 @@ import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings'
 
 import CroppedLayoutSettings from './components/Settings/CroppedLayoutSettings'
+import TimelineSettings from './components/Settings/TimelineSettings'
 import svgplaceholder from './assets/file-placeholder.svg'
 import imgplaceholder from './assets/image.svg'
 import videoplaceholder from './assets/video.svg'
@@ -80,6 +82,7 @@ export default {
 	components: {
 		Content,
 		CroppedLayoutSettings,
+		TimelineSettings,
 		AppContent,
 		AppNavigation,
 		AppNavigationItem,

src/components/Settings/CroppedLayoutSettings.vue

@@ -46,3 +46,10 @@ export default {
 	],
 }
 </script>
+
+<style scoped>
+.section {
+	padding: 10px;
+	margin-bottom: 5px;
+}
+</style>

src/components/Settings/TimelineSettings.vue

@@ -0,0 +1,73 @@
+<!--
+ - @copyright Copyright (c) 2020 Corentin Mors
+ -
+ - @license GNU AGPL version 3 or any later version
+ -
+ - @author Corentin Mors <[email protected]>
+ -
+ - 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 class="section">
+		<h2>{{ t('photos', 'Timeline') }}</h2>
+
+		<p>{{ t('photos', 'Folder for the timeline') }} : {{ timelineRootFolder }}/</p>
+		<button
+			@click="pickRootFolder">
+			{{ t('photos', 'Choose folder') }}
+		</button>
+	</div>
+</template>
+
+<script>
+import { getFilePickerBuilder } from '@nextcloud/dialogs'
+import UserConfig from '../../mixins/UserConfig'
+
+export default {
+	name: 'TimelineSettings',
+
+	mixins: [
+		UserConfig,
+	],
+
+	methods: {
+		pickRootFolder() {
+			const picker = getFilePickerBuilder(t('photos', 'Choose a folder to display in the timeline'))
+				.setMultiSelect(false)
+				.addMimeTypeFilter('httpd/unix-directory')
+				.setModal(true)
+				.setType(1)
+				.allowDirectories(true)
+				.build()
+
+			return picker
+				.pick()
+				.then((dest) => {
+					this.timelineRootFolder = dest
+					this.updateSetting('timelineRootFolder')
+					location.reload()
+				})
+		},
+	},
+}
+</script>
+
+<style scoped>
+.section {
+	padding: 10px;
+	margin-bottom: 5px;
+}
+</style>

src/mixins/UserConfig.js

@@ -30,7 +30,9 @@ const eventName = 'photos:user-config-changed'
 export default {
 	data() {
 		const croppedLayoutLocalStorage = localStorage.getItem('photos:croppedLayout')
+		const timelineRootFolderLocalStorage = localStorage.getItem('photos:timelineRootFolder')
 		return {
+			timelineRootFolder: timelineRootFolderLocalStorage || loadState('photos', 'timelineRootFolder'),
 			croppedLayout: croppedLayoutLocalStorage !== null
 				? croppedLayoutLocalStorage === 'true'
 				: loadState('photos', 'croppedLayout') === 'true',

src/services/PhotoSearch.js

@@ -44,9 +44,11 @@ export default async function(onlyFavorites = false, options = {}) {
 		page: 0, // start at the first page
 		perPage: sizes.max.count * 10, // ten rows of the max width
 		mimesType: allMimes, // all mimes types
+		rootFolder: '',
 	}, options)
 
-	const prefixPath = `/files/${getCurrentUser().uid}`
+	const davPath = `/files/${getCurrentUser().uid}`
+	const prefixPath = `${davPath}${options.rootFolder}`
 
 	// generating the search or condition
 	// based on the allowed mimetypes
@@ -68,6 +70,15 @@ export default async function(onlyFavorites = false, options = {}) {
 			</d:eq>`
 		: ''
 
+	const eqOwner = options.rootFolder === ''
+		? `<d:eq>
+				<d:prop>
+					<oc:owner-id/>
+				</d:prop>
+				<d:literal>${getCurrentUser().uid}</d:literal>
+			</d:eq>`
+		: ''
+
 	options = Object.assign({
 		method: 'SEARCH',
 		headers: {
@@ -97,12 +108,7 @@ export default async function(onlyFavorites = false, options = {}) {
 								${orMime}
 							</d:or>
 							${eqFavorites}
-							<d:eq>
-								<d:prop>
-									<oc:owner-id/>
-								</d:prop>
-								<d:literal>${getCurrentUser().uid}</d:literal>
-							</d:eq>
+							${eqOwner}
 						</d:and>
 					</d:where>
 					<d:orderby>
@@ -126,6 +132,6 @@ export default async function(onlyFavorites = false, options = {}) {
 	return response.data
 		.map(data => genFileInfo(data))
 		// remove prefix path from full file path
-		.map(data => Object.assign({}, data, { filename: data.filename.replace(prefixPath, '') }))
+		.map(data => Object.assign({}, data, { filename: data.filename.replace(davPath, '') }))
 
 }

src/views/Timeline.vue

@@ -71,6 +71,7 @@ import Loader from '../components/Loader'
 
 import cancelableRequest from '../utils/CancelableRequest'
 import GridConfigMixin from '../mixins/GridConfig'
+import UserConfig from '../mixins/UserConfig'
 import { allMimes } from '../services/AllowedMimes'
 
 export default {
@@ -80,7 +81,7 @@ export default {
 		VirtualGrid,
 		Navigation,
 	},
-	mixins: [GridConfigMixin],
+	mixins: [GridConfigMixin, UserConfig],
 	props: {
 		loading: {
 			type: Boolean,
@@ -237,6 +238,7 @@ export default {
 					page: this.page,
 					perPage: numberOfImagesPerBatch,
 					mimesType: this.mimesType,
+					rootFolder: this.timelineRootFolder,
 				})
 
 				// If we get less files than requested that means we got to the end