feat: Use places in the store to render places filter

Take the opportunity to create use functions and share logic between the input and the display

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

src/components/PhotosFilters/PlacesFilterDisplay.vue

@@ -5,7 +5,7 @@
 <template>
 	<div>
 		<MapMarker /> <b>{{ t('photos', 'Places') }}: </b>
-		<span v-for="place in selectedOptions" :key="place.label">
+		<span v-for="place in selectedPlaces" :key="place.label">
 			<NcChip no-close>
 				<template #icon>
 					<img :src="place.previewUrl" class="place__preview">
@@ -18,43 +18,23 @@
 	</div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue'
 import MapMarker from 'vue-material-design-icons/MapMarker.vue'
 
-import { generateUrl } from '@nextcloud/router'
 import { t } from '@nextcloud/l10n'
 import NcChip from '@nextcloud/vue/components/NcChip'
 
-import type { PlacesValueType } from '../../services/PhotosFilters/placesFilter.ts'
-import { fetchCollections } from '../../services/collectionFetcher.ts'
-import { placesPrefix } from '../../store/places.ts'
-
-type NcSelectPlaceOption = {
-	label: string
-	previewUrl?: string
-}
+import usePlaceFilter from './usePlaceFilter.ts'
+import type { PlacesValueType } from '../../services/PhotosFilters/placesFilter.ts';
 
 const props = defineProps<{
 	value: PlacesValueType
 }>()
 
-const loading = ref(true)
-const availableOptions = ref<NcSelectPlaceOption[]>([])
-const selectedOptions = ref<NcSelectPlaceOption[]>((props.value ?? []).map(place => ({ label: place })))
-
-fetchCollections(placesPrefix)
-	.then(places => {
-		availableOptions.value = places.map(place => ({
-			label: place.basename,
-			previewUrl: generateUrl(`/apps/photos/api/v1/preview/${place.attributes['last-photo']}?x=${64}&y=${64}`),
-		}))
-
-		selectedOptions.value = (props.value ?? [])
-			.map(place => availableOptions.value.find(option => option.label === place))
-			.filter(place => place !== undefined)
+const emit = defineEmits<{
+	(event: 'update:value', value: PlacesValueType): void
+}>()
 
-		loading.value = false
-	})
+const { selectedPlaces } = usePlaceFilter(props, emit)
 </script>
 <style lang="scss" scoped>
 .place__preview {

src/components/PhotosFilters/PlacesFilterInput.vue

@@ -3,36 +3,38 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcSelect v-model="selectedOptions"
+	<NcSelect v-model="selectedPlaces"
 		class="places-select"
-		:options="availableOptions"
+		:options="availablePlacesWithoutSelections"
 		:aria-label-combobox="t('photos', 'Select places')"
 		:placeholder="t('photos', 'Select places')"
-		:loading="loading"
+		:loading="loadingCollections"
 		:multiple="true">
 		<template #option="option">
 			<NcListItemIcon :name="option.label"
 				:is-no-user="true"
 				:url="option.previewUrl" />
 		</template>
+		<template #selected-option="option">
+			<NcChip no-close>
+				<template #icon>
+					<img :src="option.previewUrl" class="place__preview">
+				</template>
+				<template #default>
+					{{ option.label }}
+				</template>
+			</NcChip>
+		</template>
 	</NcSelect>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
-
 import NcSelect from '@nextcloud/vue/components/NcSelect'
+import NcChip from '@nextcloud/vue/components/NcChip'
 import NcListItemIcon from '@nextcloud/vue/components/NcListItemIcon'
-import { generateUrl } from '@nextcloud/router'
 import { t } from '@nextcloud/l10n'
 
-import type { PlacesValueType } from '../../services/PhotosFilters/placesFilter.ts'
-import { fetchCollections } from '../../services/collectionFetcher.ts'
-import { placesPrefix } from '../../store/places.ts'
-
-type NcSelectPlaceOption = {
-	label: string
-	previewUrl: string
-}
+import usePlaceFilter from './usePlaceFilter.ts'
+import type { PlacesValueType } from '../../services/PhotosFilters/placesFilter.ts';
 
 const props = defineProps<{
 	value: PlacesValueType
@@ -42,34 +44,16 @@ const emit = defineEmits<{
 	(event: 'update:value', value: PlacesValueType): void
 }>()
 
-const loading = ref(true)
-const availableOptions = ref<NcSelectPlaceOption[]>([])
-const selectedOptions = ref<NcSelectPlaceOption[]>([])
-
-watch(selectedOptions, (newSelectedOptionValue) => {
-	if (newSelectedOptionValue.length === 0) {
-		emit('update:value', undefined)
-	} else {
-		emit('update:value', newSelectedOptionValue.map(place => place.label))
-	}
-})
-
-fetchCollections(placesPrefix)
-	.then(places => {
-		availableOptions.value = places.map(place => ({
-			label: place.basename,
-			previewUrl: generateUrl(`/apps/photos/api/v1/preview/${place.attributes['last-photo']}?x=${64}&y=${64}`),
-		}))
-
-		selectedOptions.value = (props.value ?? [])
-			.map(place => availableOptions.value.find(option => option.label === place))
-			.filter(place => place !== undefined)
-
-		loading.value = false
-	})
+const { availablePlacesWithoutSelections, loadingCollections, selectedPlaces } = usePlaceFilter(props, emit)
 </script>
 <style lang="scss" scoped>
 .places-select {
 	margin-bottom: 0 !important;
 }
+
+.place__preview {
+	width: 20px;
+	height: 20px;
+	border-radius: 100%;
+}
 </style>

src/components/PhotosFilters/usePlaceFilter.ts

@@ -0,0 +1,69 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { computed, ref, watch } from 'vue'
+
+import { generateUrl } from '@nextcloud/router'
+
+import { placesPrefix } from '../../store/places.ts'
+import useFetchCollections from '../../mixins/useFetchCollections.ts'
+import store from '../../store/index.ts'
+import type { PlacesValueType } from '../../services/PhotosFilters/placesFilter.ts'
+
+type NcSelectPlaceOption = {
+	label: string
+	previewUrl?: string
+}
+
+export default function(props: Readonly<{ value: PlacesValueType }>, emit: (event: 'update:value', args: PlacesValueType) => void,) {
+	const { fetchCollections, loadingCollections } = useFetchCollections()
+
+	const availablePlaces = ref<NcSelectPlaceOption[]>([])
+
+	const selectedPlaces = computed<NcSelectPlaceOption[]>({
+		get() {
+			return (props.value ?? []).map(placeId => {
+				const place = store.getters.getPlace(placeId)
+
+				return {
+					label: place?.displayname ?? placeId,
+					previewUrl: place ? generateUrl(`/apps/photos/api/v1/preview/${place.attributes['last-photo']}?x=${64}&y=${64}`) : undefined,
+				}
+			})
+		},
+		set(newSelectedPlacesValue) {
+			if (newSelectedPlacesValue.length === 0) {
+				emit('update:value', undefined)
+			} else {
+				emit('update:value', newSelectedPlacesValue.map(place => place.label))
+			}
+		}
+	})
+
+	const availablePlacesWithoutSelections = computed(() => availablePlaces.value.filter((option) => !selectedPlaces.value.includes(option)))
+
+	watch(
+		() => store.getters.places,
+		(value) => {
+			availablePlaces.value = Object.values(value).map((place) => {
+				return {
+					label: place.displayname,
+					previewUrl: generateUrl(`/apps/photos/api/v1/preview/${place.attributes['last-photo']}?x=${64}&y=${64}`),
+				}
+			})
+		},
+		{ immediate: true },
+	)
+
+	if (Object.values(store.getters.places).length === 0) {
+		fetchCollections(placesPrefix)
+	}
+
+	return {
+		availablePlacesWithoutSelections,
+		selectedPlaces,
+		loadingCollections,
+	}
+}

src/mixins/useAbortController.ts

@@ -0,0 +1,33 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { computed, onUnmounted, ref } from 'vue'
+
+import router from '../router'
+
+export default function() {
+	const abortController = ref(new AbortController())
+
+	const abortSignal = computed(() => abortController.value.signal)
+
+	function abortPendingRequest() {
+		abortController.value.abort()
+		abortController.value = new AbortController()
+	}
+
+	onUnmounted(() => {
+		abortController.value.abort()
+	})
+
+	router.beforeEach((from, to, next) => {
+		abortPendingRequest()
+		next()
+	})
+
+	return {
+		abortSignal,
+		abortPendingRequest,
+	}
+}

src/mixins/useFetchCollections.ts

@@ -0,0 +1,49 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { WebDAVClient } from 'webdav'
+import { ref } from 'vue'
+
+import { fetchCollections, type Collection } from '../services/collectionFetcher.js'
+import logger from '../services/logger.js'
+import store from '../store'
+import { davClient } from '../services/DavClient.ts'
+import useAbortController from './useAbortController.ts'
+
+export default function() {
+	const errorFetchingCollections = ref(null as null|number|Error|unknown)
+	const loadingCollections = ref(false)
+	const { abortSignal } = useAbortController()
+
+	async function _fetchCollections(collectionHome: string, extraProps: string[] = [], client: WebDAVClient = davClient): Promise<Collection[]> {
+		if (loadingCollections.value) {
+			return []
+		}
+
+		try {
+			loadingCollections.value = true
+			errorFetchingCollections.value = null
+
+			const collections = await fetchCollections(collectionHome, { signal: abortSignal.value }, extraProps, client)
+
+			store.dispatch('addCollections', { collections })
+
+			return collections
+		} catch (error) {
+			if (error.response?.status === 404) {
+				errorFetchingCollections.value = 404
+			} else {
+				errorFetchingCollections.value = error
+			}
+			logger.error('Error fetching collections:', { error })
+		} finally {
+			loadingCollections.value = false
+		}
+
+		return []
+	}
+
+	return { fetchCollections: _fetchCollections, errorFetchingCollections, loadingCollections }
+}

src/store/index.ts

@@ -46,6 +46,9 @@ export type PhotosStore = {
 		getPublicAlbumName(publicAlbumName: string): string,
 		getSharedAlbum(sharedAlbumName: string): Album
 		getSharedAlbumFiles(sharedAlbumName: string): string[]
+		getPlaceName(sharedAlbumName: string): string,
+		getPlace(sharedAlbumName: string): Collection|undefined
+		getPlaceFiles(sharedAlbumName: string): string[]
 		getSharedAlbumName(sharedAlbumName: string): string,
 		tagId(name: string): string,
 	}
@@ -93,6 +96,6 @@ const photosStore = new Store({
 	],
 
 	strict: process.env.NODE_ENV !== 'production',
-})
+}) as PhotosStore
 
 export default photosStore