refactor(dav): migrate frontend to Typescript and Vue 3

apps/dav/lib/Settings/AvailabilitySettings.php

@@ -56,6 +56,8 @@ public function getForm(): TemplateResponse {
 			}
 		}
 
+		\OCP\Util::addStyle(Application::APP_ID, 'settings-personal-availability');
+		\OCP\Util::addScript(Application::APP_ID, 'settings-personal-availability');
 		return new TemplateResponse(Application::APP_ID, 'settings-personal-availability');
 	}
 

apps/dav/lib/Settings/CalDAVSettings.php

@@ -44,6 +44,9 @@ public function getForm(): TemplateResponse {
 			$value = $this->config->getAppValue(Application::APP_ID, $key, $default);
 			$this->initialState->provideInitialState($key, $value === 'yes');
 		}
+
+		\OCP\Util::addScript(Application::APP_ID, 'settings-admin-caldav');
+		\OCP\Util::addStyle(Application::APP_ID, 'settings-admin-caldav');
 		return new TemplateResponse(Application::APP_ID, 'settings-admin-caldav');
 	}
 

apps/dav/lib/Settings/ExampleContentSettings.php

@@ -53,7 +53,9 @@ public function getForm(): TemplateResponse {
 			);
 		}
 
-		return new TemplateResponse(Application::APP_ID, 'settings-example-content');
+		\OCP\Util::addStyle(Application::APP_ID, 'settings-admin-example-content');
+		\OCP\Util::addScript(Application::APP_ID, 'settings-admin-example-content');
+		return new TemplateResponse(Application::APP_ID, 'settings-admin-example-content');
 	}
 
 	public function getSection(): ?string {

apps/dav/src/components/AbsenceForm.vue

@@ -9,46 +9,39 @@
 			<NcDateTimePickerNative
 				id="absence-first-day"
 				v-model="firstDay"
-				:label="$t('dav', 'First day')"
+				:label="t('dav', 'First day')"
 				class="absence__dates__picker"
 				:required="true" />
 			<NcDateTimePickerNative
 				id="absence-last-day"
 				v-model="lastDay"
-				:label="$t('dav', 'Last day (inclusive)')"
+				:label="t('dav', 'Last day (inclusive)')"
 				class="absence__dates__picker"
 				:required="true" />
 		</div>
-		<label for="replacement-search-input">{{ $t('dav', 'Out of office replacement (optional)') }}</label>
-		<NcSelect
-			ref="select"
+		<label for="replacement-search-input">{{ t('dav', 'Out of office replacement (optional)') }}</label>
+		<NcSelectUsers
 			v-model="replacementUser"
 			input-id="replacement-search-input"
 			:loading="searchLoading"
-			:placeholder="$t('dav', 'Name of the replacement')"
-			:clear-search-on-blur="() => false"
-			user-select
+			:placeholder="t('dav', 'Name of the replacement')"
 			:options="options"
-			@search="asyncFind">
-			<template #no-options="{ search }">
-				{{ search ? $t('dav', 'No results.') : $t('dav', 'Start typing.') }}
-			</template>
-		</NcSelect>
-		<NcTextField :value.sync="status" :label="$t('dav', 'Short absence status')" :required="true" />
-		<NcTextArea :value.sync="message" :label="$t('dav', 'Long absence Message')" :required="true" />
+			@search="asyncFind" />
+		<NcTextField v-model="status" :label="t('dav', 'Short absence status')" :required="true" />
+		<NcTextArea v-model="message" :label="t('dav', 'Long absence Message')" :required="true" />
 
 		<div class="absence__buttons">
 			<NcButton
 				:disabled="loading || !valid"
 				variant="primary"
 				type="submit">
-				{{ $t('dav', 'Save') }}
+				{{ t('dav', 'Save') }}
 			</NcButton>
 			<NcButton
 				:disabled="loading || !valid"
 				variant="error"
 				@click="clearAbsence">
-				{{ $t('dav', 'Disable absence') }}
+				{{ t('dav', 'Disable absence') }}
 			</NcButton>
 		</div>
 	</form>
@@ -59,26 +52,30 @@ import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
 import { ShareType } from '@nextcloud/sharing'
 import debounce from 'debounce'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDateTimePickerNative from '@nextcloud/vue/components/NcDateTimePickerNative'
-import NcSelect from '@nextcloud/vue/components/NcSelect'
+import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
 import NcTextArea from '@nextcloud/vue/components/NcTextArea'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
-import logger from '../service/logger.js'
-import { formatDateAsYMD } from '../utils/date.js'
+import { logger } from '../service/logger.ts'
+import { formatDateAsYMD } from '../utils/date.ts'
 
-/* eslint @nextcloud/vue/no-deprecated-props: "warn" */
 export default {
 	name: 'AbsenceForm',
 	components: {
 		NcButton,
 		NcTextField,
 		NcTextArea,
 		NcDateTimePickerNative,
-		NcSelect,
+		NcSelectUsers,
+	},
+
+	setup() {
+		return { t }
 	},
 
 	data() {
@@ -228,9 +225,9 @@ export default {
 					message: this.message,
 					replacementUserId: this.replacementUser?.user ?? null,
 				})
-				showSuccess(this.$t('dav', 'Absence saved'))
+				showSuccess(t('dav', 'Absence saved'))
 			} catch (error) {
-				showError(this.$t('dav', 'Failed to save your absence settings'))
+				showError(t('dav', 'Failed to save your absence settings'))
 				logger.error('Could not save absence', { error })
 			} finally {
 				this.loading = false
@@ -242,9 +239,9 @@ export default {
 			try {
 				await axios.delete(generateOcsUrl('/apps/dav/api/v1/outOfOffice/{userId}', { userId: getCurrentUser().uid }))
 				this.resetForm()
-				showSuccess(this.$t('dav', 'Absence cleared'))
+				showSuccess(t('dav', 'Absence cleared'))
 			} catch (error) {
-				showError(this.$t('dav', 'Failed to clear your absence settings'))
+				showError(t('dav', 'Failed to clear your absence settings'))
 				logger.error('Could not clear absence', { error })
 			} finally {
 				this.loading = false

apps/dav/src/components/AvailabilityForm.vue

@@ -2,46 +2,11 @@
   - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
-<template>
-	<div>
-		<CalendarAvailability
-			:slots.sync="slots"
-			:loading="loading"
-			:l10n-to="t('dav', 'to')"
-			:l10n-delete-slot="t('dav', 'Delete slot')"
-			:l10n-empty-day="t('dav', 'No working hours set')"
-			:l10n-add-slot="t('dav', 'Add slot')"
-			:l10n-week-day-list-label="t('dav', 'Weekdays')"
-			:l10n-monday="t('dav', 'Monday')"
-			:l10n-tuesday="t('dav', 'Tuesday')"
-			:l10n-wednesday="t('dav', 'Wednesday')"
-			:l10n-thursday="t('dav', 'Thursday')"
-			:l10n-friday="t('dav', 'Friday')"
-			:l10n-saturday="t('dav', 'Saturday')"
-			:l10n-sunday="t('dav', 'Sunday')"
-			:l10n-start-picker-label="(dayName) => t('dav', 'Pick a start time for {dayName}', { dayName })"
-			:l10n-end-picker-label="(dayName) => t('dav', 'Pick a end time for {dayName}', { dayName })" />
-
-		<NcCheckboxRadioSwitch v-model="automated">
-			{{ t('dav', 'Automatically set user status to "Do not disturb" outside of availability to mute all notifications.') }}
-		</NcCheckboxRadioSwitch>
-
-		<NcButton
-			:disabled="loading || saving"
-			variant="primary"
-			@click="save">
-			{{ t('dav', 'Save') }}
-		</NcButton>
-	</div>
-</template>
 
 <script setup lang="ts">
 import { CalendarAvailability } from '@nextcloud/calendar-availability-vue'
 import { getCapabilities } from '@nextcloud/capabilities'
-import {
-	showError,
-	showSuccess,
-} from '@nextcloud/dialogs'
+import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import { onMounted, ref } from 'vue'
@@ -52,7 +17,7 @@ import {
 	getEmptySlots,
 	saveScheduleInboxAvailability,
 } from '../service/CalendarService.js'
-import logger from '../service/logger.js'
+import { logger } from '../service/logger.ts'
 import {
 	disableUserStatusAutomation,
 	enableUserStatusAutomation,
@@ -106,6 +71,39 @@ async function save() {
 }
 </script>
 
+<template>
+	<div>
+		<CalendarAvailability
+			v-model:slots="slots"
+			:loading="loading"
+			:l10n-to="t('dav', 'to')"
+			:l10n-delete-slot="t('dav', 'Delete slot')"
+			:l10n-empty-day="t('dav', 'No working hours set')"
+			:l10n-add-slot="t('dav', 'Add slot')"
+			:l10n-week-day-list-label="t('dav', 'Weekdays')"
+			:l10n-monday="t('dav', 'Monday')"
+			:l10n-tuesday="t('dav', 'Tuesday')"
+			:l10n-wednesday="t('dav', 'Wednesday')"
+			:l10n-thursday="t('dav', 'Thursday')"
+			:l10n-friday="t('dav', 'Friday')"
+			:l10n-saturday="t('dav', 'Saturday')"
+			:l10n-sunday="t('dav', 'Sunday')"
+			:l10n-start-picker-label="(dayName) => t('dav', 'Pick a start time for {dayName}', { dayName })"
+			:l10n-end-picker-label="(dayName) => t('dav', 'Pick a end time for {dayName}', { dayName })" />
+
+		<NcCheckboxRadioSwitch v-model="automated">
+			{{ t('dav', 'Automatically set user status to "Do not disturb" outside of availability to mute all notifications.') }}
+		</NcCheckboxRadioSwitch>
+
+		<NcButton
+			:disabled="loading || saving"
+			variant="primary"
+			@click="save">
+			{{ t('dav', 'Save') }}
+		</NcButton>
+	</div>
+</template>
+
 <style lang="scss" scoped>
 :deep(.availability-day) {
 	padding: 0 10px 0 10px;

apps/dav/src/components/ExampleContactSettings.vue

@@ -9,7 +9,7 @@
 			:checked="enableDefaultContact"
 			type="switch"
 			@update:model-value="updateEnableDefaultContact">
-			{{ $t('dav', "Add example contact to user's address book when they first log in") }}
+			{{ t('dav', "Add example contact to user's address book when they first log in") }}
 		</NcCheckboxRadioSwitch>
 		<div v-if="enableDefaultContact" class="example-contact-settings__buttons">
 			<ExampleContentDownloadButton :href="downloadUrl">
@@ -24,7 +24,7 @@
 				<template #icon>
 					<IconUpload :size="20" />
 				</template>
-				{{ $t('dav', 'Import contact') }}
+				{{ t('dav', 'Import contact') }}
 			</NcButton>
 			<NcButton
 				v-if="hasCustomDefaultContact"
@@ -33,15 +33,15 @@
 				<template #icon>
 					<IconRestore :size="20" />
 				</template>
-				{{ $t('dav', 'Reset to default') }}
+				{{ t('dav', 'Reset to default') }}
 			</NcButton>
 		</div>
 		<NcDialog
-			:open.sync="isModalOpen"
-			:name="$t('dav', 'Import contacts')"
+			v-model:open="isModalOpen"
+			:name="t('dav', 'Import contacts')"
 			:buttons="buttons">
 			<div>
-				<p>{{ $t('dav', 'Importing a new .vcf file will delete the existing default contact and replace it with the new one. Do you want to continue?') }}</p>
+				<p>{{ t('dav', 'Importing a new .vcf file will delete the existing default contact and replace it with the new one. Do you want to continue?') }}</p>
 			</div>
 		</NcDialog>
 		<input
@@ -61,16 +61,17 @@ import IconCheck from '@mdi/svg/svg/check.svg?raw'
 import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcButton, NcCheckboxRadioSwitch, NcDialog } from '@nextcloud/vue'
 import IconAccount from 'vue-material-design-icons/Account.vue'
 import IconRestore from 'vue-material-design-icons/Restore.vue'
 import IconUpload from 'vue-material-design-icons/TrayArrowUp.vue'
 import ExampleContentDownloadButton from './ExampleContentDownloadButton.vue'
-import logger from '../service/logger.js'
+import { logger } from '../service/logger.ts'
 
-const enableDefaultContact = loadState('dav', 'enableDefaultContact')
-const hasCustomDefaultContact = loadState('dav', 'hasCustomDefaultContact')
+const enableDefaultContact = loadState('dav', 'enableDefaultContact', false)
+const hasCustomDefaultContact = loadState('dav', 'hasCustomDefaultContact', false)
 
 export default {
 	name: 'ExampleContactSettings',
@@ -84,6 +85,10 @@ export default {
 		ExampleContentDownloadButton,
 	},
 
+	setup() {
+		return { t }
+	},
+
 	data() {
 		return {
 			enableDefaultContact,
@@ -92,12 +97,12 @@ export default {
 			loading: false,
 			buttons: [
 				{
-					label: this.$t('dav', 'Cancel'),
+					label: t('dav', 'Cancel'),
 					icon: IconCancel,
 					callback: () => { this.isModalOpen = false },
 				},
 				{
-					label: this.$t('dav', 'Import'),
+					label: t('dav', 'Import'),
 					icon: IconCheck,
 					variant: 'primary',
 					callback: () => { this.clickImportInput() },
@@ -119,7 +124,7 @@ export default {
 			}).then(() => {
 				this.enableDefaultContact = !this.enableDefaultContact
 			}).catch(() => {
-				showError(this.$t('dav', 'Error while saving settings'))
+				showError(t('dav', 'Error while saving settings'))
 			})
 		},
 
@@ -136,11 +141,11 @@ export default {
 			axios.put(generateUrl('/apps/dav/api/defaultcontact/contact'))
 				.then(() => {
 					this.hasCustomDefaultContact = false
-					showSuccess(this.$t('dav', 'Contact reset successfully'))
+					showSuccess(t('dav', 'Contact reset successfully'))
 				})
 				.catch((error) => {
 					logger.error('Error importing contact:', { error })
-					showError(this.$t('dav', 'Error while resetting contact'))
+					showError(t('dav', 'Error while resetting contact'))
 				})
 				.finally(() => {
 					this.loading = false
@@ -158,10 +163,10 @@ export default {
 				try {
 					await axios.put(generateUrl('/apps/dav/api/defaultcontact/contact'), { contactData: reader.result })
 					this.hasCustomDefaultContact = true
-					showSuccess(this.$t('dav', 'Contact imported successfully'))
+					showSuccess(t('dav', 'Contact imported successfully'))
 				} catch (error) {
 					logger.error('Error importing contact:', { error })
-					showError(this.$t('dav', 'Error while importing contact'))
+					showError(t('dav', 'Error while importing contact'))
 				} finally {
 					this.loading = false
 					event.target.value = ''