Implements Guests Page

This commit implements the Guest Pages and the GuestPicker, allowing to
invite guests when creating a new event.

Also fixes the Reminder selector not correctly handling the custom
option due event loop race conditions.

Co-authored-by: rih <[email protected]>

src/calendar-app/calendar/gui/CalendarGuiUtils.ts

@@ -80,6 +80,7 @@ import { CalendarEventPreviewViewModel } from "./eventpopup/CalendarEventPreview
 import { createAsyncDropdown } from "../../../common/gui/base/Dropdown.js"
 import { UserController } from "../../../common/api/main/UserController.js"
 import { ClientOnlyCalendarsInfo } from "../../../common/misc/DeviceConfig.js"
+import { SelectOption } from "../../../common/gui/base/Select.js"
 
 export function renderCalendarSwitchLeftButton(label: TranslationKey, click: () => unknown): Child {
 	return m(IconButton, {
@@ -422,23 +423,33 @@ export const createAlarmIntervalItems = (locale: string): SelectorItemList<Alarm
 			name: humanDescriptionForAlarmInterval(value, locale),
 		}
 	})
-export const createAttendingItems = (): SelectorItemList<CalendarAttendeeStatus> => [
+
+export interface AttendingItem extends SelectOption<CalendarAttendeeStatus> {
+	name: string
+	selectable?: boolean
+}
+
+export const createAttendingItems = (): AttendingItem[] => [
 	{
 		name: lang.get("yes_label"),
 		value: CalendarAttendeeStatus.ACCEPTED,
+		ariaValue: lang.get("yes_label"),
 	},
 	{
 		name: lang.get("maybe_label"),
 		value: CalendarAttendeeStatus.TENTATIVE,
+		ariaValue: lang.get("maybe_label"),
 	},
 	{
 		name: lang.get("no_label"),
 		value: CalendarAttendeeStatus.DECLINED,
+		ariaValue: lang.get("no_label"),
 	},
 	{
 		name: lang.get("pending_label"),
 		value: CalendarAttendeeStatus.NEEDS_ACTION,
 		selectable: false,
+		ariaValue: lang.get("pending_label"),
 	},
 ]
 

src/calendar-app/calendar/gui/RemindersEditor.ts

@@ -13,6 +13,7 @@ import { Select, SelectAttributes, SelectOption } from "../../../common/gui/base
 import { Icon, IconSize } from "../../../common/gui/base/Icon.js"
 import { BaseButton } from "../../../common/gui/base/buttons/BaseButton.js"
 import { ButtonColor, getColors } from "../../../common/gui/base/Button.js"
+import stream from "mithril/stream"
 
 export type RemindersEditorAttrs = {
 	addAlarm: (alarm: AlarmInterval) => unknown
@@ -150,17 +151,20 @@ export class RemindersEditor implements Component<RemindersEditorAttrs> {
 				m(Select<RemindersSelectOption, AlarmInterval>, {
 					ariaLabel: lang.get("calendarReminderIntervalValue_label"),
 					selected: defaultSelected,
-					options: alarmOptions,
+					options: stream(alarmOptions),
 					renderOption: (option) => this.renderReminderOptions(option, false, false),
 					renderDisplay: (option) => this.renderReminderOptions(option, alarms.length > 0, true),
-					onChange: (newValue) => {
+					onchange: (newValue) => {
 						if (newValue.value.value === -1) {
-							return this.showCustomReminderIntervalDialog((value, unit) => {
-								addNewAlarm({
-									value,
-									unit,
+							// timeout needed to prevent the custom interval dialog to be closed by the key event triggered inside the select component
+							return setTimeout(() => {
+								this.showCustomReminderIntervalDialog((value, unit) => {
+									addNewAlarm({
+										value,
+										unit,
+									})
 								})
-							})
+							}, 0)
 						}
 						addAlarm(newValue.value)
 					},

src/calendar-app/calendar/gui/eventeditor-model/CalendarEventWhoModel.ts

@@ -347,6 +347,8 @@ export class CalendarEventWhoModel {
 			// if there are other attendees and we have an organizer that's us, we must use that organizer
 			// because changing the organizer address after the attendees were invited is suboptimal.
 			return [this._organizer.address]
+		} else if (this.eventType === EventType.OWN) {
+			return this.ownMailAddresses
 		} else {
 			// something is wrong.
 			throw new ProgrammingError("could not figure out which addresses are a valid organizer for this event.")