feat: add alarms (reminders)

src/components/AppSidebar/Alarm/AlarmDateTimePickerModal.vue

@@ -0,0 +1,112 @@
+<template>
+	<NcModal @close="onClose()">
+		<form class="content" @submit.prevent="onSubmit">
+			<h3 class="content__heading">
+				<template v-if="isNewAlarm">
+					{{ t('tasks', 'Create reminder') }}
+				</template>
+				<template v-else>
+					{{ t('tasks', 'Update reminder') }}
+				</template>
+			</h3>
+			<div class="content__form">
+				<NcDateTimePickerNative id="alarm-date-time-picker"
+					v-model="date"
+					type="datetime-local"
+					required
+					:label="t('tasks', 'Set a reminder at a custom date and time:')" />
+			</div>
+			<div class="content__buttons">
+				<NcButton @click="onClose()">
+					{{ t('tasks', 'Cancel') }}
+				</NcButton>
+				<NcButton type="primary" native-type="submit">
+					<template v-if="isNewAlarm">
+						{{ t('tasks', 'Create reminder') }}
+					</template>
+					<template v-else>
+						{{ t('tasks', 'Update reminder') }}
+					</template>
+				</NcButton>
+			</div>
+		</form>
+	</NcModal>
+</template>
+
+<script>
+import { convertTimeZone, getDefaultAbsoluteAlarms } from '../../../utils/alarms.js'
+import { translate as t } from '@nextcloud/l10n'
+import { NcButton, NcDateTimePickerNative, NcModal } from '@nextcloud/vue'
+
+export default {
+	name: 'AlarmDateTimePickerModal',
+	components: {
+		NcButton,
+		NcDateTimePickerNative,
+		NcModal,
+	},
+	props: {
+		originalDate: {
+			type: Date,
+			default: undefined,
+		},
+	},
+	emits: [
+		'select-date-time',
+		'close',
+	],
+	data() {
+		return {
+			date: (this.originalDate && convertTimeZone(this.originalDate)) || this.defaultAbsoluteAlarm(),
+			isNewAlarm: !this.originalDate,
+		}
+	},
+	methods: {
+		t,
+
+		defaultAbsoluteAlarm() {
+			const timeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'
+			const alarms = getDefaultAbsoluteAlarms(timeZone)
+
+			return alarms[0]
+		},
+
+		onSubmit() {
+			this.$emit('select-date-time', this.date)
+		},
+
+		onClose() {
+			this.$emit('close')
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+	padding: 14px;
+
+	&__heading {
+		margin-top: 0;
+	}
+
+	&__buttons {
+		display: flex;
+		gap: 8px;
+		margin-top: 14px;
+		justify-content: flex-end;
+	}
+
+	&__form {
+		// TODO This should be part of the `NcDateTimePickerNative` component
+		:deep(input) {
+			&:invalid {
+				border-color: var(--color-error) !important; // Override hover border color
+				&:focus-visible {
+					box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
+				}
+			}
+		}
+	}
+}
+</style>

src/components/AppSidebar/Alarm/AlarmList.vue

@@ -0,0 +1,192 @@
+<!--
+  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div class="component">
+		<div class="component__icon">
+			<slot name="icon" />
+		</div>
+		<div class="component__items">
+			<AlarmListItem v-for="(alarm, index) in alarmComponents"
+				:key="index"
+				:index="index"
+				:alarm="alarm"
+				:is-all-day="allDay"
+				:is-read-only="readOnly"
+				@update-alarm="updateAlarm"
+				@remove-alarm="removeAlarm" />
+			<div class="new">
+				<div v-if="alarms.length === 0">
+					<p>
+						{{ t('tasks', 'No reminders') }}
+					</p>
+				</div>
+				<AlarmListNew v-if="!readOnly"
+					:has-start-date="hasStartDate"
+					:has-due-date="hasDueDate"
+					:is-all-day="allDay"
+					@add-alarm="addAlarm" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import AlarmListNew from './AlarmListNew.vue'
+import AlarmListItem from './AlarmListItem.vue'
+import { mapAlarmComponentToAlarmObject } from '../../../models/alarm.js'
+
+import { translate as t } from '@nextcloud/l10n'
+import { AlarmComponent } from '@nextcloud/calendar-js'
+import ICAL from 'ical.js'
+
+export default {
+	name: 'AlarmList',
+	components: {
+		AlarmListItem,
+		AlarmListNew,
+	},
+	props: {
+		hasStartDate: {
+			type: Boolean,
+			required: true,
+		},
+		hasDueDate: {
+			type: Boolean,
+			required: true,
+		},
+		readOnly: {
+			type: Boolean,
+			required: true,
+		},
+		allDay: {
+			type: Boolean,
+			required: true,
+		},
+		alarms: {
+			type: Array,
+			required: true,
+		},
+	},
+	emits: [
+		'add-alarm',
+		'remove-alarm',
+		'update-alarm',
+	],
+	computed: {
+		alarmComponents() {
+			return this.alarms.map((alarm) => {
+				try {
+					return mapAlarmComponentToAlarmObject(AlarmComponent.fromICALJs(alarm))
+				} catch (e) {
+					// Instead of breaking the whole page when parsing an invalid alarm,
+					// we just print a warning on the console.
+					console.warn(e)
+					return false
+				}
+			}).filter(Boolean)
+		},
+	},
+	methods: {
+		t,
+
+		/**
+		 * Generates a valarm from an alarm-event
+		 *
+		 * @param {object} alarm The alarm time or duration
+		 * @param {number|Date} alarm.value Value of the trigger
+		 * @param {object|undefined} alarm.parameter Name and value of the trigger parameter
+		 */
+		generateVAlarm({ value, parameter }) {
+			const valarm = {
+				action: 'DISPLAY',
+				// When the action is "DISPLAY", the alarm MUST also include a "DESCRIPTION" property
+				description: t('tasks', 'This is an event reminder.'),
+				repeat: 1,
+				trigger: { value: undefined, parameter },
+			}
+
+			if (typeof value === 'number') {
+				valarm.trigger.value = ICAL.Duration.fromSeconds(value)
+			} else if (value instanceof Date) {
+				valarm.trigger.value = ICAL.Time.fromJSDate(value, true)
+			}
+
+			return valarm
+		},
+
+		/**
+		 * Adds an alarm to this event
+		 *
+		 * @param {object} alarm The alarm time or duration
+		 */
+		addAlarm(alarm) {
+			this.$emit('add-alarm', this.generateVAlarm(alarm))
+		},
+
+		/**
+		 * Removes an alarm from this event
+		 *
+		 * @param {object} alarm The alarm object
+		 * @param {number} index This index of the updated alarm-item
+		 */
+		updateAlarm(alarm, index) {
+			this.$emit('update-alarm', this.generateVAlarm(alarm), index)
+		},
+
+		/**
+		 * Removes an alarm from this event
+		 *
+		 * @param {number} index The index of the alarm-list
+		 */
+		removeAlarm(index) {
+			this.$emit('remove-alarm', index)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.component {
+	display: flex;
+	border-bottom: 1px solid var(--color-border);
+	width: 100%;
+	color: var(--color-text-lighter);
+
+	.component {
+		&__icon {
+			display: flex;
+			height: 44px;
+			width: 44px;
+			min-width: 44px;
+			justify-content: center;
+
+			.material-design-icon__svg {
+				vertical-align: middle;
+			}
+		}
+
+		&__items {
+			display: flex;
+			flex-direction: column;
+			flex-grow: 1;
+			gap: 4px;
+			padding-inline-end: 4px;
+			padding-block: 4px;
+			overflow: auto;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+
+			.new {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				width: 100%;
+				padding-block: 2px;
+			}
+		}
+	}
+}
+</style>