refactor(dav): remove timezone from AvailabilitiyForm

It is handled in personal settings now.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

apps/dav/src/components/AvailabilityForm.vue

@@ -4,45 +4,36 @@
 -->
 <template>
 	<div>
-		<div class="time-zone">
-			<label :for="`vs${timeZonePickerId}__combobox`" class="time-zone__heading">
-				{{ $t('dav', 'Time zone:') }}
-			</label>
-			<span class="time-zone-text">
-				<NcTimezonePicker v-model="timezone" :uid="timeZonePickerId" />
-			</span>
-		</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 :checked.sync="automated">
-			{{ $t('dav', 'Automatically set user status to "Do not disturb" outside of availability to mute all notifications.') }}
+			: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"
-			type="primary"
+			variant="primary"
 			@click="save">
-			{{ $t('dav', 'Save') }}
+			{{ t('dav', 'Save') }}
 		</NcButton>
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { CalendarAvailability } from '@nextcloud/calendar-availability-vue'
 import { loadState } from '@nextcloud/initial-state'
 import {
@@ -60,77 +51,57 @@ import {
 } from '../service/PreferenceService.js'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
-import NcTimezonePicker from '@nextcloud/vue/components/NcTimezonePicker'
-
-export default {
-	name: 'AvailabilityForm',
-	components: {
-		NcButton,
-		NcCheckboxRadioSwitch,
-		CalendarAvailability,
-		NcTimezonePicker,
-	},
-	data() {
-		// Try to determine the current timezone, and fall back to UTC otherwise
-		const defaultTimezoneId = (new Intl.DateTimeFormat())?.resolvedOptions()?.timeZone ?? 'UTC'
-
-		return {
-			loading: true,
-			saving: false,
-			timezone: defaultTimezoneId,
-			slots: getEmptySlots(),
-			automated: loadState('dav', 'user_status_automation') === 'yes',
+import { getCapabilities } from '@nextcloud/capabilities'
+import { onMounted, ref } from 'vue'
+import logger from '../service/logger.js'
+import { t } from '@nextcloud/l10n'
+
+// @ts-expect-error capabilities is missing the capability to type it...
+const timezone = getCapabilities().core.user?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone
+
+const loading = ref(true)
+const saving = ref(false)
+const slots = ref(getEmptySlots())
+const automated = ref(loadState('dav', 'user_status_automation') === 'yes')
+
+onMounted(async () => {
+	try {
+		const slotData = await findScheduleInboxAvailability()
+		if (!slotData) {
+			logger.debug('no availability is set')
+		} else {
+			slots.value = slotData.slots
+			logger.debug('availability loaded', { slots: slots.value })
 		}
-	},
-	computed: {
-		timeZonePickerId() {
-			return `tz-${(Math.random() + 1).toString(36).substring(7)}`
-		},
-	},
-	async mounted() {
-		try {
-			const slotData = await findScheduleInboxAvailability()
-			if (!slotData) {
-				console.info('no availability is set')
-				this.slots = getEmptySlots()
-			} else {
-				const { slots, timezoneId } = slotData
-				this.slots = slots
-				if (timezoneId) {
-					this.timezone = timezoneId
-				}
-				console.info('availability loaded', this.slots, this.timezoneId)
-			}
-		} catch (e) {
-			console.error('could not load existing availability', e)
-
-			showError(t('dav', 'Failed to load availability'))
-		} finally {
-			this.loading = false
+	} catch (error) {
+		logger.error('could not load existing availability', { error })
+		showError(t('dav', 'Failed to load availability'))
+	} finally {
+		loading.value = false
+	}
+})
+
+/**
+ * Save current slots on the server
+ */
+async function save() {
+	saving.value = true
+	try {
+		await saveScheduleInboxAvailability(slots.value, timezone)
+		if (automated.value) {
+			await enableUserStatusAutomation()
+		} else {
+			await disableUserStatusAutomation()
 		}
-	},
-	methods: {
-		async save() {
-			try {
-				this.saving = true
-
-				await saveScheduleInboxAvailability(this.slots, this.timezone)
-				if (this.automated) {
-					await enableUserStatusAutomation()
-				} else {
-					await disableUserStatusAutomation()
-				}
-
-				showSuccess(t('dav', 'Saved availability'))
-			} catch (e) {
-				console.error('could not save availability', e)
-
-				showError(t('dav', 'Failed to save availability'))
-			} finally {
-				this.saving = false
-			}
-		},
-	},
+
+		showSuccess(t('dav', 'Saved availability'))
+	} catch (e) {
+		console.error('could not save availability', e)
+
+		showError(t('dav', 'Failed to save availability'))
+	} finally {
+		saving.value = false
+	}
 }
 </script>
 
@@ -165,11 +136,6 @@ export default {
 	width: 97px;
 }
 
-:deep(.multiselect) {
-	border: 1px solid var(--color-border-dark);
-	width: 120px;
-}
-
 .time-zone {
 	padding-block: 32px 12px;
 	padding-inline: 0 12px;