feat: custom date & time

Signed-off-by: Christopher Ng <chrng8@gmail.com>
(cherry picked from commit 597abe0a1eefc4e985de4c4b0c58aa87d7249aff)

diff --git a/apps/files_reminders/src/components/SetReminderActions.vue b/apps/files_reminders/src/components/SetReminderActions.vue
index 38ed9761a5e4bbc94c93d0e65bac28fd3785708e..17e742d125e0c4381e075d6587f5f795b29b9442 100644 (file)
--- a/apps/files_reminders/src/components/SetReminderActions.vue
+++ b/apps/files_reminders/src/components/SetReminderActions.vue
@@ -29,6 +29,7 @@
                        </template>
                        {{ t('files_reminders', 'Back') }}
                </NcActionButton>
+
                <NcActionButton v-if="Boolean(dueDate)"
                        :aria-label="clearAriaLabel"
                        @click="clear">
@@ -37,13 +38,34 @@
                        </template>
                        {{ t('files_reminders', 'Clear reminder') }} — {{ getDateString(dueDate) }}
                </NcActionButton>
+
                <NcActionSeparator />
+
                <NcActionButton v-for="({ label, ariaLabel, dateString, action }) in options"
                        :key="label"
                        :aria-label="ariaLabel"
                        @click="action">
                        {{ label }} — {{ dateString }}
                </NcActionButton>
+
+               <NcActionSeparator />
+
+               <NcActionInput type="datetime-local"
+                       is-native-picker
+                       :min="now"
+                       v-model="customDueDate">
+                       <template #icon>
+                               <CalendarClock :size="20" />
+                       </template>
+               </NcActionInput>
+
+               <NcActionButton :aria-label="customAriaLabel"
+                       @click="setCustom">
+                       <template #icon>
+                               <Check :size="20" />
+                       </template>
+                       {{ t('files_reminders', 'Set custom reminder') }}
+               </NcActionButton>
        </NcActions>
 </template>
 
@@ -53,10 +75,13 @@ import { translate as t } from '@nextcloud/l10n'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
+import CalendarClock from 'vue-material-design-icons/CalendarClock.vue'
+import Check from 'vue-material-design-icons/Check.vue'
 import CloseCircleOutline from 'vue-material-design-icons/CloseCircleOutline.vue'
 
 import { clearReminder, setReminder } from '../services/reminderService.ts'
@@ -64,6 +89,7 @@ import {
        DateTimePreset,
        getDateString,
        getDateTime,
+       getInitialCustomDueDate,
        getVerboseDateString,
 } from '../shared/utils.ts'
 import { logger } from '../shared/logger.ts'
@@ -107,8 +133,11 @@ export default Vue.extend({
 
        components: {
                ArrowLeft,
+               CalendarClock,
+               Check,
                CloseCircleOutline,
                NcActionButton,
+               NcActionInput,
                NcActions,
                NcActionSeparator,
        },
@@ -128,6 +157,8 @@ export default Vue.extend({
        data() {
                return {
                        open: true,
+                       now: new Date(),
+                       customDueDate: getInitialCustomDueDate() as '' | Date,
                }
        },
 
@@ -152,6 +183,13 @@ export default Vue.extend({
                        return `${t('files_reminders', 'Clear reminder')} — ${getVerboseDateString(this.dueDate as Date)}`
                },
 
+               customAriaLabel(): null | string {
+                       if (this.customDueDate === '') {
+                               return null
+                       }
+                       return `${t('files_reminders', 'Set reminder at custom date & time')} — ${getVerboseDateString(this.customDueDate)}`
+               },
+
                options(): ReminderOption[] {
                        const computeOption = (option: ReminderOption) => {
                                const dateTime = getDateTime(option.dateTimePreset)
@@ -187,6 +225,23 @@ export default Vue.extend({
                        }
                },
 
+               async setCustom(): Promise<void> {
+                       // Handle input cleared
+                       if (this.customDueDate === '') {
+                               showError(t('files_reminders', 'Please choose a valid date & time'))
+                               return
+                       }
+
+                       try {
+                               await setReminder(this.fileId, this.customDueDate)
+                               showSuccess(t('files_reminders', 'Reminder set for "{fileName}"', { fileName: this.fileName }))
+                               this.open = false
+                       } catch (error) {
+                               logger.error('Failed to set reminder', { error })
+                               showError(t('files_reminders', 'Failed to set reminder'))
+                       }
+               },
+
                async clear(): Promise<void> {
                        try {
                                await clearReminder(this.fileId)

diff --git a/apps/files_reminders/src/shared/utils.ts b/apps/files_reminders/src/shared/utils.ts
index 85e0b14c017eb9dce6d490095abe21dd414ea4da..f43f8da5a6d43edff03fe6a02257055dc63922e9 100644 (file)
--- a/apps/files_reminders/src/shared/utils.ts
+++ b/apps/files_reminders/src/shared/utils.ts
@@ -88,6 +88,14 @@ export const getDateTime = (dateTime: DateTimePreset): Date => {
        return matchPreset[dateTime]()
 }
 
+export const getInitialCustomDueDate = (): Date => {
+       const hour = moment().get('hour')
+       const dueDate = moment()
+               .startOf('day')
+               .add(hour + 2, 'hour')
+       return dueDate.toDate()
+}
+
 export const getDateString = (dueDate: Date): string => {
        let formatOptions: Intl.DateTimeFormatOptions = {
                hour: 'numeric',