Create source directory if it does not exists

Add button to update source directory in timeline

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

2 files changed, 41 insertions, 6 deletions

diff --git a/src/mixins/FetchFilesMixin.js b/src/mixins/FetchFilesMixin.js
index edfa6296..b5803197 100644
--- a/src/mixins/FetchFilesMixin.js
+++ b/src/mixins/FetchFilesMixin.js
@@ -20,10 +20,13 @@
  *
  */
 
+import { davGetClient, davRootPath } from '@nextcloud/files'
+import { joinPaths } from '@nextcloud/paths'
 import logger from '../services/logger.js'
 import getPhotos from '../services/PhotoSearch.js'
 import SemaphoreWithPriority from '../utils/semaphoreWithPriority.js'
 import AbortControllerMixin from './AbortControllerMixin.js'
+import store from '../store/index.js'
 
 export default {
 	name: 'FetchFilesMixin',
@@ -99,6 +102,13 @@ export default {
 			} 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 })
+					}
 				} else if (error.code === 'ERR_CANCELED') {
 					return []
 				} else {
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index c33e9d80..5cf0e6a0 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -24,10 +24,15 @@
 
 <template>
 	<!-- Errors handlers -->
-	<NcEmptyContent v-if="errorFetchingFiles" :name="t('photos', 'An error occurred')">
-		<AlertCircle slot="icon" />
-		<span v-if="errorFetchingFiles === 404" slot="description">{{ t('photos', 'The source folder does not exists') }}</span>
-	</NcEmptyContent>
+	<div v-if="errorFetchingFiles" class="timeline__empty-content">
+		<NcEmptyContent v-if="errorFetchingFiles === 404" :name="t('photos', 'The source folder does not exists')">
+			<FolderAlertOutline slot="icon" />
+			<PhotosSourceLocationsSettings slot="action" class="timeline__update_source_directory" />
+		</NcEmptyContent>
+		<NcEmptyContent v-else :name="t('photos', 'An error occurred')">
+			<AlertCircle slot="icon" />
+		</NcEmptyContent>
+	</div>
 
 	<div v-else class="timeline">
 		<!-- Header -->
@@ -146,6 +151,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
+import FolderAlertOutline from 'vue-material-design-icons/FolderAlertOutline.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import PlusBoxMultiple from 'vue-material-design-icons/PlusBoxMultiple.vue'
@@ -155,6 +161,8 @@ import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 
 import { NcModal, NcActions, NcActionButton, NcButton, NcEmptyContent, isMobile } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
+import { translate } from '@nextcloud/l10n'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 import { allMimes } from '../services/AllowedMimes.js'
 import FetchFilesMixin from '../mixins/FetchFilesMixin.js'
@@ -167,8 +175,7 @@ import AlbumPicker from '../components/Albums/AlbumPicker.vue'
 import ActionFavorite from '../components/Actions/ActionFavorite.vue'
 import ActionDownload from '../components/Actions/ActionDownload.vue'
 import HeaderNavigation from '../components/HeaderNavigation.vue'
-import { translate } from '@nextcloud/l10n'
-import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import PhotosSourceLocationsSettings from '../components/Settings/PhotosSourceLocationsSettings.vue'
 import { configChangedEvent } from '../store/userConfig.js'
 
 export default {
@@ -179,6 +186,7 @@ export default {
 		Download,
 		Close,
 		Plus,
+		FolderAlertOutline,
 		NcEmptyContent,
 		NcModal,
 		NcActions,
@@ -191,6 +199,7 @@ export default {
 		ActionFavorite,
 		ActionDownload,
 		HeaderNavigation,
+		PhotosSourceLocationsSettings,
 		AlertCircle,
 	},
 
@@ -319,6 +328,22 @@ export default {
 	display: flex;
 	flex-direction: column;
 
+	&__empty-content {
+		height: 100%;
+
+		.empty-content {
+			height: 100%;
+		}
+
+		.timeline__update_source_directory {
+			align-items: center;
+
+			:deep(.folder) {
+				min-width: unset;
+			}
+		}
+	}
+
 	&__header {
 		&__left {
 			display: flex;