refactor: replace JavaScript navigation with links

Assisted-by: Codex:gpt-5
Signed-off-by: Abhinav Ohri <abhinavohri13@gmail.com>

Author: abhinavohri

src/components/AppNavigation/Proposal/ProposalList.vue

@@ -20,8 +20,8 @@
 
 		<template v-if="!userHasEmailAddress">
 			<NcAppNavigationItem
-				:name="t('calendar', 'A configured email address is required to use meeting proposals')"
-				@click="window.open(generateUrl('settings/user'), '_blank').focus()">
+				:href="userSettingsUrl"
+				:name="t('calendar', 'A configured email address is required to use meeting proposals')">
 				<template #icon>
 					<WarningIcon :size="20" class="proposal-list__warning-icon" />
 				</template>
@@ -97,7 +97,7 @@ import type { Proposal } from '@/models/proposals/proposals'
 
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
-import { generateUrl } from '@nextcloud/router'
+import { generateUrl, getBaseUrl } from '@nextcloud/router'
 import { computed, onMounted, ref, watch } from 'vue'
 // icons
 import WarningIcon from 'vue-material-design-icons/AlertCircleOutline'
@@ -127,6 +127,7 @@ const showDeleteDialog = ref(false)
 const pendingDeleteProposal = ref<Proposal | null>(null)
 
 const userHasEmailAddress = computed(() => (principalStore?.getCurrentUserPrincipal?.emailAddress?.length ?? 0) > 0)
+const userSettingsUrl = generateUrl('settings/user', {}, { baseURL: getBaseUrl() })
 
 const deleteDialogMessage = computed(() => {
 	const title = pendingDeleteProposal.value?.title ?? t('calendar', 'No title')

src/components/AppointmentConfigModal/NoEmailAddressWarning.vue

@@ -5,22 +5,18 @@
 
 <script setup lang="ts">
 import { t } from '@nextcloud/l10n'
-import { generateUrl } from '@nextcloud/router'
+import { generateUrl, getBaseUrl } from '@nextcloud/router'
 import { NcAppNavigationItem } from '@nextcloud/vue'
 import AlertCircleIcon from 'vue-material-design-icons/AlertCircle.vue'
 
 const title = t('calendar', 'To configure appointments, add your email address in personal settings.')
-
-function openUserSettings(): void {
-	const url = generateUrl('settings/user')
-	window.open(url, '_blank')?.focus()
-}
+const userSettingsUrl = generateUrl('settings/user', {}, { baseURL: getBaseUrl() })
 </script>
 
 <template>
 	<NcAppNavigationItem
-		:name="title"
-		@click="openUserSettings">
+		:href="userSettingsUrl"
+		:name="title">
 		<template #icon>
 			<AlertCircleIcon :size="20" class="no-email-warning__icon" />
 		</template>

src/components/Editor/Attachments/AttachmentsList.vue

@@ -70,11 +70,22 @@
 		<NcDialog
 			v-if="showOpenConfirmation"
 			v-model:open="showOpenConfirmation"
-			:name="t('calendar', 'Confirmation')"
-			:buttons="openConfirmationButtons">
+			:name="t('calendar', 'Confirmation')">
 			<p class="external-link-message">
 				{{ openConfirmationMessage }}
 			</p>
+			<template #actions>
+				<NcButton @click="showOpenConfirmation = false">
+					{{ t('calendar', 'Cancel') }}
+				</NcButton>
+				<NcButton
+					:href="openConfirmationUrl"
+					target="_blank"
+					rel="noopener noreferrer"
+					variant="primary">
+					{{ t('calendar', 'Proceed') }}
+				</NcButton>
+			</template>
 		</NcDialog>
 	</div>
 </template>
@@ -85,6 +96,7 @@ import { generateUrl, getBaseUrl } from '@nextcloud/router'
 import {
 	NcActionButton,
 	NcActions,
+	NcButton,
 	NcDialog,
 	NcListItem,
 } from '@nextcloud/vue'
@@ -110,6 +122,7 @@ export default {
 		NcListItem,
 		NcActions,
 		NcActionButton,
+		NcButton,
 		Upload,
 		Close,
 		Folder,
@@ -130,7 +143,7 @@ export default {
 			uploading: false,
 			showOpenConfirmation: false,
 			openConfirmationMessage: '',
-			openConfirmationButtons: [],
+			openConfirmationUrl: '',
 		}
 	},
 
@@ -276,21 +289,7 @@ export default {
 		 */
 		showConfirmationDialog(message, url) {
 			this.openConfirmationMessage = message
-			this.openConfirmationButtons = [
-				{
-					label: t('calendar', 'Cancel'),
-					callback: () => {
-						this.showOpenConfirmation = false
-					},
-				},
-				{
-					label: t('calendar', 'Proceed'),
-					type: 'primary',
-					callback: () => {
-						window.open(url.href, '_blank', 'noopener noreferrer')
-					},
-				},
-			]
+			this.openConfirmationUrl = url.href
 			this.showOpenConfirmation = true
 		},
 	},

src/fullcalendar/eventSources/eventSourceFunction.js

@@ -11,6 +11,7 @@ import {
 	getHexForColorName,
 } from '@/utils/color.js'
 import logger from '@/utils/logger.js'
+import { generateTaskUrl } from '@/utils/url.ts'
 /**
  * convert an array of calendar-objects to events
  *
@@ -197,6 +198,10 @@ export function eventSourceFunction(calendarObjects, calendar, start, end, timez
 				},
 			}
 
+			if (object.name === 'VTODO' && settingsStore.tasksEnabled) {
+				fcEvent.url = generateTaskUrl(calendarObject.dav.url)
+			}
+
 			if (object.color) {
 				const customColor = getHexForColorName(object.color)
 				if (customColor) {

src/fullcalendar/interaction/eventClick.js

@@ -5,7 +5,6 @@
 import { showInfo } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
-import { generateUrl } from '@nextcloud/router'
 import { errorCatchAsync } from '@/fullcalendar/utils/errors.js'
 import useSettingsStore from '@/store/settings.js'
 import useWidgetStore from '@/store/widget.js'
@@ -28,7 +27,7 @@ import {
  */
 export default function(router, route, window, isWidget = false, ref = undefined) {
 	const widgetStore = useWidgetStore()
-	return errorCatchAsync(function({ event }) {
+	return errorCatchAsync(function({ event, jsEvent }) {
 		if (isWidget) {
 			widgetStore.setWidgetRef({ widgetRef: ref.fullCalendar.$el })
 		}
@@ -38,7 +37,7 @@ export default function(router, route, window, isWidget = false, ref = undefined
 				break
 
 			case 'VTODO':
-				handleToDoClick(event, route, window, isWidget)
+				handleToDoClick(event, route, jsEvent, isWidget)
 				break
 		}
 	}, 'eventClick')
@@ -94,13 +93,14 @@ function handleEventClick(event, router, route, window, isWidget = false) {
  *
  * @param {EventDef} event FullCalendar event
  * @param {object} route The current Vue route
- * @param {Window} window The window object
+ * @param {MouseEvent} jsEvent The native click event
  * @param {boolean} isWidget Whether the calendar is embedded as a widget
  */
-function handleToDoClick(event, route, window, isWidget = false) {
+function handleToDoClick(event, route, jsEvent, isWidget = false) {
 	const settingsStore = useSettingsStore()
 
 	if (getViewMode(route.name, isWidget) !== ViewMode.USER) {
+		jsEvent?.preventDefault()
 		return
 	}
 
@@ -111,9 +111,8 @@ function handleToDoClick(event, route, window, isWidget = false) {
 	emit('calendar:handle-todo-click', { calendarId, taskId })
 
 	if (!settingsStore.tasksEnabled) {
+		jsEvent?.preventDefault()
 		showInfo(t('calendar', 'Please ask your administrator to enable the Tasks App.'))
 		return
 	}
-	const url = `apps/tasks/calendars/${encodeURIComponent(calendarId)}/tasks/${encodeURIComponent(taskId)}`
-	window.open(generateUrl(url), '_blank')
 }

src/fullcalendar/rendering/eventDidMount.js

@@ -133,6 +133,13 @@ function buildAriaLabel(event) {
 export default errorCatch(function({ event, el }) {
 	// Set aria-label for screen reader accessibility
 	el.setAttribute('aria-label', buildAriaLabel(event))
+
+	if (event.extendedProps.objectType === 'VTODO' && event.url) {
+		const link = el.matches('a') ? el : el.querySelector('a[href]')
+		link?.setAttribute('target', '_blank')
+		link?.setAttribute('rel', 'noopener noreferrer')
+		el.classList.remove('fc-event-forced-url')
+	}
 	if (el.classList.contains('fc-event-nc-alarms')) {
 		const notificationIcon = document.createElement('span')
 		notificationIcon.classList.add('icon-event-reminder')

src/utils/url.ts

@@ -2,6 +2,21 @@
  * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+import { generateUrl } from '@nextcloud/router'
+
+/**
+ * Generate the Tasks app URL for a calendar task.
+ *
+ * @param davUrl - The task's DAV URL
+ * @return The task URL
+ */
+export function generateTaskUrl(davUrl: string): string {
+	const davUrlParts = davUrl.split('/')
+	const taskId = davUrlParts.pop()!
+	const calendarId = davUrlParts.pop()!
+
+	return generateUrl(`apps/tasks/calendars/${encodeURIComponent(calendarId)}/tasks/${encodeURIComponent(taskId)}`)
+}
 
 /**
  * Works like urldecode() from php