refactor(dav): migrate Settings frontend to Vue 3

- migrate deprecated props
- use direct import of t rather than the mixin

Signed-off-by: Ferdinand Thiessen <[email protected]>

Author: susnux

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.ts'
-import { formatDateAsYMD } from '../utils/date.js'
+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/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,6 +61,7 @@ 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'
@@ -69,8 +70,8 @@ import IconUpload from 'vue-material-design-icons/TrayArrowUp.vue'
 import ExampleContentDownloadButton from './ExampleContentDownloadButton.vue'
 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 = ''

apps/dav/src/components/ExampleEventSettings.vue

@@ -41,7 +41,7 @@
 			</NcButton>
 		</div>
 		<NcDialog
-			:open.sync="showImportModal"
+			v-model:open="showImportModal"
 			:name="t('dav', 'Import calendar event')">
 			<div class="import-event-modal">
 				<p>
@@ -73,6 +73,7 @@
 <script>
 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 IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
@@ -94,6 +95,10 @@ export default {
 		ExampleContentDownloadButton,
 	},
 
+	setup() {
+		return { t }
+	},
+
 	data() {
 		return {
 			createExampleEvent: loadState('dav', 'create_example_event', false),

apps/dav/src/settings-example-content.js renamed to apps/dav/src/settings-admin-example-content.ts

@@ -3,17 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { t } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import ExampleContentSettingsSection from './views/ExampleContentSettingsSection.vue'
 
-Vue.mixin({
-	methods: {
-		t,
-		$t: t,
-	},
-})
-
-const View = Vue.extend(ExampleContentSettingsSection);
-
-(new View({})).$mount('#settings-example-content')
+const app = createApp(ExampleContentSettingsSection)
+app.mount('#settings-example-content')

apps/dav/src/settings-admin.ts

@@ -0,0 +1,10 @@
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createApp } from 'vue'
+import CalDavSettings from './views/CalDavSettings.vue'
+
+const app = createApp(CalDavSettings)
+app.mount('#settings-admin-caldav')

apps/dav/src/settings-personal-availability.js

@@ -0,0 +1,10 @@
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createApp } from 'vue'
+import UserAvailability from './views/UserAvailability.vue'
+
+const app = createApp(UserAvailability)
+app.mount('#settings-personal-availability')