nextcloud/apps/dav/src/views/CalDavSettings.vue

<!--
  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<NcSettingsSection
		:name="$t('dav', 'Calendar server')"
		:doc-url="userSyncCalendarsDocUrl">
		<!-- Can use v-html as:
			- $t passes the translated string through DOMPurify.sanitize,
			- replacement strings are not user-controlled. -->
		<!-- eslint-disable-next-line vue/no-v-html -->
		<p class="settings-hint" v-html="hint" />
		<p>
			<NcCheckboxRadioSwitch
				id="caldavSendInvitations"
				:checked.sync="sendInvitations"
				type="switch">
				{{ $t('dav', 'Send invitations to attendees') }}
			</NcCheckboxRadioSwitch>
			<!-- Can use v-html as:
				- $t passes the translated string through DOMPurify.sanitize,
				- replacement strings are not user-controlled. -->
			<!-- eslint-disable-next-line vue/no-v-html -->
			<em v-html="sendInvitationsHelpText" />
		</p>
		<p>
			<NcCheckboxRadioSwitch
				id="caldavGenerateBirthdayCalendar"
				:checked.sync="generateBirthdayCalendar"
				type="switch"
				class="checkbox">
				{{ $t('dav', 'Automatically generate a birthday calendar') }}
			</NcCheckboxRadioSwitch>
			<em>
				{{ $t('dav', 'Birthday calendars will be generated by a background job.') }}
			</em>
			<br>
			<em>
				{{ $t('dav', 'Hence they will not be available immediately after enabling but will show up after some time.') }}
			</em>
		</p>
		<p>
			<NcCheckboxRadioSwitch
				id="caldavSendEventReminders"
				:checked.sync="sendEventReminders"
				type="switch">
				{{ $t('dav', 'Send notifications for events') }}
			</NcCheckboxRadioSwitch>
			<!-- Can use v-html as:
				- $t passes the translated string through DOMPurify.sanitize,
				- replacement strings are not user-controlled. -->
			<!-- eslint-disable-next-line vue/no-v-html -->
			<em v-html="sendEventRemindersHelpText" />
			<br>
			<em>
				{{ $t('dav', 'Notifications are sent via background jobs, so these must occur often enough.') }}
			</em>
		</p>
		<p class="indented">
			<NcCheckboxRadioSwitch
				id="caldavSendEventRemindersToSharedGroupMembers"
				:checked.sync="sendEventRemindersToSharedUsers"
				type="switch"
				:disabled="!sendEventReminders">
				{{ $t('dav', 'Send reminder notifications to calendar sharees as well') }}
			</NcCheckboxRadioSwitch>
			<em>
				{{ $t('dav', 'Reminders are always sent to organizers and attendees.') }}
			</em>
		</p>
		<p class="indented">
			<NcCheckboxRadioSwitch
				id="caldavSendEventRemindersPush"
				:checked.sync="sendEventRemindersPush"
				type="switch"
				:disabled="!sendEventReminders">
				{{ $t('dav', 'Enable notifications for events via push') }}
			</NcCheckboxRadioSwitch>
		</p>
	</NcSettingsSection>
</template>

<script>
import axios from '@nextcloud/axios'
import { loadState } from '@nextcloud/initial-state'
import { generateUrl } from '@nextcloud/router'
import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'

const userSyncCalendarsDocUrl = loadState('dav', 'userSyncCalendarsDocUrl', '#')

export default {
	name: 'CalDavSettings',
	components: {
		NcCheckboxRadioSwitch,
		NcSettingsSection,
	},

	data() {
		return {
			userSyncCalendarsDocUrl,
		}
	},

	computed: {
		hint() {
			const translated = this.$t(
				'dav',
				'Also install the {calendarappstoreopen}Calendar app{linkclose}, or {calendardocopen}connect your desktop & mobile for syncing ↗{linkclose}.',
			)
			return translated
				.replace('{calendarappstoreopen}', '<a target="_blank" href="../apps/office/calendar">')
				.replace('{calendardocopen}', `<a target="_blank" href="${userSyncCalendarsDocUrl}" rel="noreferrer noopener">`)
				.replace(/\{linkclose\}/g, '</a>')
		},

		sendInvitationsHelpText() {
			const translated = this.$t('dav', 'Please make sure to properly set up {emailopen}the email server{linkclose}.')
			return translated
				.replace('{emailopen}', '<a href="../admin#mail_general_settings">')
				.replace('{linkclose}', '</a>')
		},

		sendEventRemindersHelpText() {
			const translated = this.$t('dav', 'Please make sure to properly set up {emailopen}the email server{linkclose}.')
			return translated
				.replace('{emailopen}', '<a href="../admin#mail_general_settings">')
				.replace('{linkclose}', '</a>')
		},
	},

	watch: {
		generateBirthdayCalendar(value) {
			const baseUrl = value ? '/apps/dav/enableBirthdayCalendar' : '/apps/dav/disableBirthdayCalendar'
			axios.post(generateUrl(baseUrl))
		},

		sendInvitations(value) {
			OCP.AppConfig.setValue(
				'dav',
				'sendInvitations',
				value ? 'yes' : 'no',
			)
		},

		sendEventReminders(value) {
			OCP.AppConfig.setValue('dav', 'sendEventReminders', value ? 'yes' : 'no')
		},

		sendEventRemindersToSharedUsers(value) {
			OCP.AppConfig.setValue(
				'dav',
				'sendEventRemindersToSharedUsers',
				value ? 'yes' : 'no',
			)
		},

		sendEventRemindersPush(value) {
			OCP.AppConfig.setValue('dav', 'sendEventRemindersPush', value ? 'yes' : 'no')
		},
	},
}
</script>

<style scoped>
	.indented {
		padding-inline-start: 28px;
	}
	/** Use deep selector to affect v-html */
	* :deep(a) {
		text-decoration: underline;
	}

	.settings-hint {
		margin-top: -.2em;
		margin-bottom: 1em;
		opacity: .7;
	}
</style>