Merge pull request #1701 from nextcloud/feature/1576/reminder_new_dropdown

Replace New Reminder button with Multiselect to allow easier selection of alarm

css/app-sidebar.scss

@@ -302,6 +302,10 @@
 		}
 	}
 
+	.property-alarm-new {
+		width: 100%;
+	}
+
 	.property-alarm-item {
 		display: flex;
 		align-items: center;

src/components/Editor/Alarm/AlarmList.vue

@@ -31,6 +31,7 @@
 			@removeAlarm="removeAlarm" />
 		<AlarmListNew
 			v-if="!isReadOnly"
+			:is-all-day="calendarObjectInstance.isAllDay"
 			@addAlarm="addAlarm" />
 		<NoAlarmView
 			v-if="isListEmpty" />
@@ -41,7 +42,6 @@
 import AlarmListNew from './AlarmListNew'
 import AlarmListItem from './AlarmListItem'
 import NoAlarmView from './NoAlarmView.vue'
-import getDefaultAlarms from '../../../defaults/defaultAlarmProvider.js'
 
 export default {
 	name: 'AlarmList',
@@ -64,11 +64,6 @@ export default {
 		alarms() {
 			return this.calendarObjectInstance.alarms
 		},
-		alarmTriggerList() {
-			return this.calendarObjectInstance.alarms.map(alarm => {
-				return alarm.relativeTrigger
-			})
-		},
 		isListEmpty() {
 			return this.alarms.length === 0
 		},
@@ -76,28 +71,14 @@ export default {
 	methods: {
 		/**
 		 * Adds another of the default alarms to the event
+		 *
+		 * @param {Number} totalSeconds Amount of seconds for the alarm
 		 */
-		addAlarm() {
-			const defaultAlarms = getDefaultAlarms(this.calendarObjectInstance.isAllDay)
-
-			for (const totalSeconds of defaultAlarms) {
-				if (this.alarmTriggerList.includes(totalSeconds)) {
-					continue
-				}
-
-				this.$store.commit('addAlarmToCalendarObjectInstance', {
-					calendarObjectInstance: this.calendarObjectInstance,
-					type: 'DISPLAY',
-					totalSeconds,
-				})
-				return
-			}
-
-			// Just use the last value as fallback
+		addAlarm(totalSeconds) {
 			this.$store.commit('addAlarmToCalendarObjectInstance', {
 				calendarObjectInstance: this.calendarObjectInstance,
 				type: 'DISPLAY',
-				totalSeconds: defaultAlarms[defaultAlarms.length - 1],
+				totalSeconds,
 			})
 		},
 		/**

src/components/Editor/Alarm/AlarmListNew.vue

@@ -21,22 +21,85 @@
   -->
 
 <template>
-	<button
-		class="editor-reminders-list-new-button icon-add"
-		@click="addReminder">
-		{{ $t('calendar', 'Add reminder') }}
-	</button>
+	<Multiselect
+		class="property-alarm-new"
+		track-by="value"
+		label="label"
+		:placeholder="$t('calendar', '+ Add reminder')"
+		:options="options"
+		:searchable="false"
+		@select="addReminderFromSelect" />
 </template>
 
 <script>
+import { Multiselect } from '@nextcloud/vue'
+import { mapState } from 'vuex'
+import getDefaultAlarms from '../../../defaults/defaultAlarmProvider.js'
+import {
+	getAmountAndUnitForTimedEvents,
+	getAmountHoursMinutesAndUnitForAllDayEvents,
+} from '../../../utils/alarms.js'
+import alarmFormat from '../../../filters/alarmFormat.js'
+
 export default {
 	name: 'AlarmListNew',
+	components: {
+		Multiselect,
+	},
+	props: {
+		isAllDay: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	computed: {
+		...mapState({
+			locale: (state) => state.settings.momentLocale,
+		}),
+		currentUserTimezone() {
+			return this.$store.getters.getResolvedTimezone
+		},
+		options() {
+			return getDefaultAlarms(this.isAllDay).map((defaultAlarm) => {
+				const alarmObject = this.getAlarmObjectFromTriggerTime(defaultAlarm)
+
+				return {
+					value: defaultAlarm,
+					label: alarmFormat(alarmObject, this.isAllDay, this.currentUserTimezone, this.locale),
+				}
+			})
+		},
+	},
 	methods: {
 		/**
 		 * This emits the add alarm event
 		 */
-		addReminder() {
-			this.$emit('addAlarm')
+		addReminderFromSelect({ value }) {
+			this.$emit('addAlarm', value)
+		},
+		/**
+		 *
+		 * @param {Number} time Total amount of seconds for the trigger
+		 * @returns {Object} The alarm object
+		 */
+		getAlarmObjectFromTriggerTime(time) {
+			const timedData = getAmountAndUnitForTimedEvents(time)
+			const allDayData = getAmountHoursMinutesAndUnitForAllDayEvents(time)
+
+			return {
+				isRelative: true,
+				absoluteDate: null,
+				absoluteTimezoneId: null,
+				relativeIsBefore: time < 0,
+				relativeIsRelatedToStart: true,
+				relativeUnitTimed: timedData.unit,
+				relativeAmountTimed: timedData.amount,
+				relativeUnitAllDay: allDayData.unit,
+				relativeAmountAllDay: allDayData.amount,
+				relativeHoursAllDay: allDayData.hours,
+				relativeMinutesAllDay: allDayData.minutes,
+				relativeTrigger: time,
+			}
 		},
 	},
 }