fix: restore Maps interactions after the Vue 3 migration

appinfo/info.xml

@@ -37,7 +37,7 @@
     <dependencies>
         <php min-version="8.1" max-version="8.5"/>
         <lib>exif</lib>
-        <nextcloud min-version="32" max-version="34"/>
+        <nextcloud min-version="32" max-version="36"/>
     </dependencies>
     <repair-steps>
 		<post-migration>

appinfo/routes.php

@@ -11,7 +11,12 @@
 return [
 	'routes' => [
 		['name' => 'page#index', 'url' => '/', 'verb' => 'GET'],
-		['name' => 'page#indexMyMap', 'url' => '/m/{myMapId}', 'verb' => 'GET'],
+		[
+			'name' => 'page#indexMyMap',
+			'url' => '/m/{myMapId}',
+			'verb' => 'GET',
+			'requirements' => ['myMapId' => '[0-9]+'],
+		],
 		['name' => 'page#do_echo', 'url' => '/echo', 'verb' => 'POST'],
 		['name' => 'page#openGeoLink', 'url' => '/openGeoLink/{url}', 'verb' => 'GET'],
 		['name' => 'public_favorite_page#sharedFavoritesCategory', 'url' => '/s/favorites/{token}', 'verb' => 'GET'],

lib/Controller/PageController.php

@@ -32,7 +32,7 @@ class PageController extends Controller {
 	public function __construct(
 		string $appName,
 		IRequest $request,
-		private string $userId,
+		private ?string $userId,
 		private IEventDispatcher $eventDispatcher,
 		IAppConfig $appConfig,
 		private IInitialState $initialState,
@@ -68,7 +68,12 @@ public function index(): TemplateResponse {
 	#[NoAdminRequired]
 	#[NoCSRFRequired]
 	public function indexMyMap(int $myMapId, MyMapsService $service): TemplateResponse|RedirectResponse {
-		$map = $service->getMyMap($myMapId, $this->userId);
+		$userId = $this->userId;
+		if ($userId === null) {
+			throw new \LogicException('User must be logged in');
+		}
+
+		$map = $service->getMyMap($myMapId, $userId);
 		if ($map !== null && $map['id'] !== $myMapId) {
 			// Instead of the id of the map containing folder the '.index.maps' file id was passed so redirect
 			// this happens if coming from the files app integration
@@ -80,7 +85,7 @@ public function indexMyMap(int $myMapId, MyMapsService $service): TemplateRespon
 		$this->eventDispatcher->dispatchTyped(new LoadSidebar());
 		$this->eventDispatcher->dispatchTyped(new LoadViewer());
 
-		$params = ['user' => $this->userId];
+		$params = ['user' => $userId];
 		$this->initialState->provideInitialState('photos', $this->appConfig->getValueBool('photos', 'enabled'));
 		$response = new TemplateResponse('maps', 'main', $params);
 

lib/Service/MyMapsService.php

@@ -150,6 +150,9 @@ public function getAllMyMaps($userId): array {
 	public function getMyMap(int $id, string $userId): ?array {
 		$userFolder = $this->root->getUserFolder($userId);
 		$node = $userFolder->getFirstNodeById($id);
+		if ($node === null) {
+			return null;
+		}
 		if ($node instanceof Folder) {
 			try {
 				$node = $node->get('.index.maps');

src/components/AppNavigationDeviceItem.vue

@@ -93,6 +93,8 @@ export default {
 		},
 	},
 
+	emits: ['click', 'toggle-history', 'zoom', 'export', 'add-to-map-device', 'delete', 'color'],
+
 	data() {
 		return {
 		}

src/components/AppNavigationFavoritesItem.vue

@@ -81,9 +81,9 @@
 						{{ t('maps', 'Zoom to bounds') }}
 					</NcActionButton>
 					<NcActionCheckbox v-if="enabled && nbFavorites && c.enabled && c.name && c.name !== t('maps', 'Personal') && c.isShareable"
-						:checked="c.token && c.token !== ''"
+						:model-value="Boolean(c.token)"
 						:close-after-click="false"
-						@update:checked="$emit('category-share-change', catid, $event)">
+						@update:model-value="$emit('category-share-change', catid, $event)">
 						{{ c.token ? t('maps', 'Delete share link') : t('maps', 'Create share link') }}
 					</NcActionCheckbox>
 					<NcActionButton v-if="enabled && nbFavorites && c.enabled && c.token"

src/components/AppNavigationMyMapItem.vue

@@ -81,6 +81,8 @@ export default {
 		},
 	},
 
+	emits: ['click', 'rename', 'delete', 'share', 'color'],
+
 	data() {
 		return {
 		}

src/components/AppNavigationMyMapsItem.vue

@@ -66,6 +66,8 @@ export default {
 		},
 	},
 
+	emits: ['add', 'my-map-clicked', 'rename', 'delete', 'share', 'color', 'my-maps-clicked'],
+
 	data() {
 		return {
 			open: optionsController.myMapListShow,

src/components/AppNavigationTrackItem.vue

@@ -80,7 +80,7 @@
 
 <script>
 import { NcAppNavigationItem, NcActionButton, NcActionLink } from '@nextcloud/vue'
-import { isPublic, getToken } from '../utils/common'
+import { isPublic, getToken } from '../utils/common.js'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
@@ -103,6 +103,8 @@ export default {
 		},
 	},
 
+	emits: ['click', 'zoom', 'elevation', 'add-to-map-track', 'color'],
+
 	data() {
 		return {
 		}

src/components/FavoriteEditionForm.vue

@@ -10,7 +10,7 @@
 			<span class="icon icon-category-organization" />
 			<NcSelect v-if="favorite.isUpdateable"
 				ref="select"
-				v-model="selectedCategory"
+				:model-value="selectedCategory"
 				class="category-select"
 				label="label"
 				track-by="multiselectKey"
@@ -21,12 +21,12 @@
 				:clear-on-select="false"
 				:preserve-search="false"
 				:placeholder="categoryPH"
-				inputLabel="label"
+				:aria-label-combobox="categoryPH"
 				:options="formattedCategories"
 				:user-select="false"
-				@input="onCategorySelected"
+				@update:model-value="onCategorySelected"
 				@search="onSearchChange">
-				<template #singleLabel="{ option }">
+				<template #selected-option="option">
 					<div class="single-label">
 						{{ option ? option.catid : '' }}
 					</div>
@@ -169,6 +169,7 @@ export default {
 			}
 		},
 		onCategorySelected(option) {
+			this.selectedCategory = option
 			this.category = option ? option.catid : ''
 		},
 		onOkClick() {

src/components/Map.vue

@@ -85,7 +85,8 @@
 				<PlaceContactPopup v-if="placingContact"
 					:map="map"
 					:lat-lng="placingContactLatLng"
-					@contact-placed="onContactPlaced" />
+					@contact-placed="onContactPlaced"
+					@close="onContactPopupClosed" />
 
 				<TracksLayer
 					v-if="tracksEnabled"
@@ -370,7 +371,7 @@ export default {
 
 			const thereWasAPopup = this.map.contextmenu._visible
 				|| this.placingContact
-				|| (this.map._popup !== undefined && this.map._popup !== null)
+				|| this.map._popup?.isOpen()
 				|| this.leftClickSearching
 
 			const hadSpider = this.$refs.favoritesLayer?.spiderfied
@@ -415,9 +416,13 @@ export default {
 			this.leftClickSearchLatLng = L.latLng(lat, lng)
 			this.leftClickSearching = true
 		},
-		onAddContactAddress(obj) {
+		async onAddContactAddress(obj) {
+			const latLng = L.latLng(obj.latLng.lat, obj.latLng.lng)
 			this.leftClickSearching = false
-			this.placingContactLatLng = L.latLng(obj.latLng.lat, obj.latLng.lng)
+			this.placingContact = false
+			this.map.closePopup()
+			await this.$nextTick()
+			this.placingContactLatLng = latLng
 			this.placingContact = true
 		},
 		initLocControl(map) {
@@ -633,6 +638,9 @@ export default {
 			this.placingContactLatLng = L.latLng(e.latlng.lat, e.latlng.lng)
 			this.placingContact = true
 		},
+		onContactPopupClosed() {
+			this.placingContact = false
+		},
 		onContactPlaced(e) {
 			this.placingContact = false
 			this.$emit('contact-placed', e)

src/components/MapsNavigation.vue

@@ -9,20 +9,19 @@
 			<NcAppNavigationSettings>
 				<div class="maps-settings">
 					<NcCheckboxRadioSwitch
-						:checked="optionValues.trackMe === 'true'"
-						@update:checked="onTrackMeChange">
+						:model-value="optionValues.trackMe === 'true'"
+						@update:model-value="onTrackMeChange">
 						{{ window.t('maps', 'Track my position') }}
 					</NcCheckboxRadioSwitch>
 
-					<NcCheckboxRadioSwitch
-						:checked="false"
-						@update:checked="onGeoLinkChange">
-						{{ window.t('maps', 'Open geo links') }}
-					</NcCheckboxRadioSwitch>
+					<NcButton
+						wide
+						:text="window.t('maps', 'Register Maps to open geo links')"
+						@click="$emit('register-geo-link')" />
 
 					<NcCheckboxRadioSwitch
-						:checked="optionValues.displaySlider === 'true'"
-						@update:checked="onDisplaySliderChange">
+						:model-value="optionValues.displaySlider === 'true'"
+						@update:model-value="onDisplaySliderChange">
 						{{ window.t('maps', 'Display time filter slider') }}
 					</NcCheckboxRadioSwitch>
 
@@ -44,7 +43,7 @@
 </template>
 
 <script>
-import { NcAppNavigation, NcAppNavigationSettings, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcAppNavigation, NcAppNavigationSettings, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import optionsController from '../optionsController.js'
 
 // Native Vue 3 Click-Outside directive
@@ -68,9 +67,10 @@ export default {
 	components: {
 		NcAppNavigation,
 		NcAppNavigationSettings,
+		NcButton,
 		NcCheckboxRadioSwitch,
 	},
-	
+
 	directives: {
 		clickOutside,
 	},
@@ -82,6 +82,12 @@ export default {
 		},
 	},
 
+	emits: [
+		'toggle-trackme',
+		'register-geo-link',
+		'toggle-slider',
+	],
+
 	data() {
 		return {
 			optionValues: optionsController.optionValues,
@@ -102,9 +108,6 @@ export default {
 			optionsController.saveOptionValues({ trackMe: checked ? 'true' : 'false' })
 			this.$emit('toggle-trackme', checked)
 		},
-		onGeoLinkChange(checked) {
-			this.$emit('toggle-geo-link', checked)
-		},
 		onDisplaySliderChange(checked) {
 			this.optionValues.displaySlider = checked ? 'true' : 'false'
 			optionsController.saveOptionValues({ displaySlider: checked ? 'true' : 'false' })
@@ -158,4 +161,4 @@ export default {
 	z-index: 100000;
 	border-radius: var(--border-radius-pill);
 }
-</style>
+</style>

src/components/Sidebar/PhotoSuggestionsSidebarTab.vue

@@ -105,8 +105,8 @@
 		<NcAppNavigationSettings class="footer">
 			{{ t('maps', 'Photos default timezone:') }}
 			<NcTimezonePicker
-				:value="photoSuggestionsTimezone"
-				@input="$emit('change-timezone', $event)" />
+				:model-value="photoSuggestionsTimezone"
+				@update:model-value="$emit('change-timezone', $event)" />
 			{{ t('maps', 'Location sources:') }}
 			<NcAppNavigationItem
 				:icon="'icon-road'"

src/components/map/ClickSearchPopup.vue

@@ -8,18 +8,18 @@
 		<textarea v-else
 			id="clickSearchAddress"
 			v-model="formattedAddress" />
-		<button v-if="favoriteIsCreatable" class="search-add-favorite" @click="onAddFavorite">
+		<button v-if="favoriteIsCreatable" class="search-add-favorite" @click.stop="onAddFavorite">
 			<span class="icon-favorite" />
 			{{ t('maps', 'Add to favorites') }}
 		</button>
-		<button v-if="contactIsCreatable" class="search-place-contact" @click="onPlaceContact">
+		<button v-if="contactIsCreatable" class="search-place-contact" @click.stop="onPlaceContact">
 			<span class="icon-user" />
 			{{ t('maps', 'Add contact address') }}
 		</button>
 		<button v-for="action in mapActions"
 			:key="action.label"
 			:icon="action.icon"
-			@click="actionCallback(action)">
+			@click.stop="actionCallback(action)">
 			<span :class="{ [action.icon]: true }" />
 			<span>{{ action.label }}</span>
 		</button>
@@ -61,8 +61,10 @@ export default {
 			address: null,
 			formattedAddress: '',
 			mapActions: window.OCA && window.OCA.Maps ? window.OCA.Maps.mapActions : [],
-			icon: L.icon({
-				iconUrl: 'noIcon',
+			icon: L.divIcon({
+				className: '',
+				html: '',
+				iconSize: [0, 0],
 			}),
 		}
 	},
@@ -176,4 +178,4 @@ span.icon {
 	width: 100%;
 	height: 75px;
 }
-</style>
+</style>