</template>
{{ t('files_reminders', 'Back') }}
</NcActionButton>
+
<NcActionButton v-if="Boolean(dueDate)"
:aria-label="clearAriaLabel"
@click="clear">
</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>
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'
DateTimePreset,
getDateString,
getDateTime,
+ getInitialCustomDueDate,
getVerboseDateString,
} from '../shared/utils.ts'
import { logger } from '../shared/logger.ts'
components: {
ArrowLeft,
+ CalendarClock,
+ Check,
CloseCircleOutline,
NcActionButton,
+ NcActionInput,
NcActions,
NcActionSeparator,
},
data() {
return {
open: true,
+ now: new Date(),
+ customDueDate: getInitialCustomDueDate() as '' | Date,
}
},
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)
}
},
+ 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)