Various fixes in preparation of 30

package.json

@@ -50,7 +50,7 @@
     "@nextcloud/logger": "^2.5.0",
     "@nextcloud/moment": "^1.2.1",
     "@nextcloud/paths": "^2.1.0",
-    "@nextcloud/router": "^3.0.0",
+    "@nextcloud/router": "^3.0.1",
     "@nextcloud/sharing": "^0.1.0",
     "@nextcloud/upload": "^1.0.4",
     "@nextcloud/vue": "^8.8.1",

src/components/Albums/AlbumForm.vue

@@ -84,6 +84,7 @@
 import { NcButton, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import { translate } from '@nextcloud/l10n'
+import { generateRemoteUrl } from '@nextcloud/router'
 
 import CollaboratorsSelectionForm from './CollaboratorsSelectionForm.vue'
 
@@ -158,7 +159,7 @@
 	methods: {
 		...mapActions(['createCollection', 'renameCollection', 'updateCollection']),
 
 		/** @param {import('../../store/albums.js').Collaborator[]} collaborators */
 		submit(collaborators = []) {
 			if (this.albumName === '' || this.loading) {
 				return
@@ -171,7 +172,7 @@
 			}
 		},
 
 		/** @param {import('../../store/albums.js').Collaborator[]} collaborators */
 		async handleCreateAlbum(collaborators = []) {
 			try {
 				this.loading = true
@@ -184,9 +185,14 @@
 						lastPhoto: -1,
 						date: moment().format('MMMM YYYY'),
 						collaborators,
+						source: generateRemoteUrl(`dav/${this.albumFileName}`),
 					},
 				})
 
+				if (album === undefined) {
+					return
+				}
+
 				if (this.albumLocation !== '' || collaborators.length !== 0) {
 					album = await this.updateCollection(
 						{

src/components/Albums/CollaboratorsSelectionForm.vue

@@ -8,12 +8,10 @@
 			{{ t('photos', 'Add collaborators') }}
 		</h2>
 
-		<label class="manage-collaborators__subtitle" for="sharing-search-input">
-			{{ t('photos', 'Add people or groups who can edit your album') }}
-		</label>
 		<form class="manage-collaborators__form" @submit.prevent>
 			<NcSelect v-model="searchText"
 				input-id="sharing-search-input"
+				:input-label="t('photos', 'Add people or groups who can edit your album')"
 				:loading="loadingCollaborators"
 				label="label"
 				:filterable="false"
@@ -117,7 +115,7 @@
 
 /**
  * @typedef {Collaborator} SearchResult
  * @property {string} key
  * @property {string} displayName - The label of the collaborator for display.
  * @property {Element} [iconSvg] - An icon to differentiate the collaborator type.
  */
@@ -249,7 +247,7 @@
 		/**
 		 * Fetch possible collaborators.
 		 *
 		 * @param {string} query
 		 */
 		async searchCollaborators(query) {
 			if (query === undefined) {

src/components/Collection/CollectionContent.vue

@@ -24,7 +24,7 @@
 		<slot v-if="sortedCollectionFileIds.length === 0 && !loading" name="empty-content" />
 
 		<!-- Media list -->
-		<FilesListViewer v-if="collection !== undefined"
+		<FilesListViewer v-if="collection !== undefined && sortedCollectionFileIds.length > 0 "
 			:container-element="appContent"
 			class="collection__media"
 			:file-ids="sortedCollectionFileIds"

src/components/File.vue

@@ -146,26 +146,19 @@ export default {
 	},
 
 	watch: {
-		file() {
+		async file() {
 			this.initialized = false
 			this.loadedSmall = false
 			this.errorSmall = false
 			this.loadedLarge = false
 			this.errorLarge = false
+
+			await this.init()
 		},
 	},
 
 	async mounted() {
-		[this.loadedSmall, this.loadedLarge] = await Promise.all([
-			await isCachedPreview(this.srcSmall),
-			await isCachedPreview(this.srcLarge),
-		])
-
-		this.initialized = true
-
-		await this.$nextTick() // Wait for next tick to have the canvas in the DOM
-
-		this.drawBlurhash()
+		await this.init()
 	},
 
 	beforeDestroy() {
@@ -179,6 +172,19 @@ export default {
 	},
 
 	methods: {
+		async init() {
+			[this.loadedSmall, this.loadedLarge] = await Promise.all([
+				await isCachedPreview(this.srcSmall),
+				await isCachedPreview(this.srcLarge),
+			])
+
+			this.initialized = true
+
+			await this.$nextTick() // Wait for next tick to have the canvas in the DOM
+
+			this.drawBlurhash()
+		},
+
 		emitClick() {
 			this.$emit('click', this.file.fileid)
 		},

src/components/PhotosPicker.vue

@@ -183,6 +183,10 @@ export default defineComponent({
 		...mapGetters([
 			'files',
 		]),
+
+		photosLocationFolder() {
+			return this.$store.state.userConfig.photosLocationFolder
+		},
 	},
 
 	watch: {
@@ -223,9 +227,6 @@ export default defineComponent({
 			}
 			return moment(date, 'YYYYMM').format('MMMM YYYY')
 		},
-		photosLocationFolder() {
-			return this.$store.state.userConfig.photosLocationFolder
-		},
 	},
 })
 </script>

src/router/index.js

@@ -110,7 +110,7 @@ const router = new Router({
 		{
 			path: '/albums/:albumName*',
 			component: AlbumContent,
-			name: 'albums',
+			name: 'albumsContent',
 			props: route => ({
 				albumName: route.params.albumName,
 			}),
@@ -133,7 +133,7 @@ const router = new Router({
 		{
 			path: '/sharedalbums/:albumName*',
 			component: SharedAlbumContent,
-			name: 'sharedAlbums',
+			name: 'sharedAlbumsContent',
 			props: route => ({
 				albumName: route.params.albumName,
 			}),
@@ -164,7 +164,7 @@ const router = new Router({
 		{
 			path: '/places/:placeName*',
 			component: PlaceContent,
-			name: 'places',
+			name: 'placesContent',
 			props: route => ({
 				placeName: route.params.placeName,
 			}),

src/store/collections.js

@@ -136,7 +136,7 @@ const getters = {
 	collectionsFiles: state => state.collectionsFiles,
 	collectionsWithPrefix: state => function(prefix) {
 		return Object.values(state.collections)
-			.filter(collections => collections.filename.startsWith(prefix))
+			.filter(collection => collection.filename.startsWith(prefix))
 			.reduce((collections, collection) => ({ ...collections, [collection.filename]: collection }), {})
 	},
 }