aboutsummaryrefslogtreecommitdiffstats
path: root/apps/files_reminders/src/components/SetCustomReminderModal.vue
diff options
context:
space:
mode:
Diffstat (limited to 'apps/files_reminders/src/components/SetCustomReminderModal.vue')
-rw-r--r--apps/files_reminders/src/components/SetCustomReminderModal.vue146
1 files changed, 71 insertions, 75 deletions
diff --git a/apps/files_reminders/src/components/SetCustomReminderModal.vue b/apps/files_reminders/src/components/SetCustomReminderModal.vue
index 4e3c5fb0fca..59c0886a009 100644
--- a/apps/files_reminders/src/components/SetCustomReminderModal.vue
+++ b/apps/files_reminders/src/components/SetCustomReminderModal.vue
@@ -1,35 +1,18 @@
<!--
- - @copyright 2023 Christopher Ng <chrng8@gmail.com>
- -
- - @author Christopher Ng <chrng8@gmail.com>
- -
- - @license AGPL-3.0-or-later
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
+ - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
- <NcModal v-if="opened"
+ <NcDialog v-if="opened"
+ :name="name"
:out-transition="true"
size="small"
- @close="onClose">
- <form class="custom-reminder-modal" @submit.prevent="setCustom">
- <h2 class="custom-reminder-modal__title">
- {{ title }}
- </h2>
-
+ close-on-click-outside
+ @closing="onClose">
+ <form id="set-custom-reminder-form"
+ class="custom-reminder-modal"
+ @submit.prevent="setCustom">
<NcDateTimePickerNative id="set-custom-reminder"
v-model="customDueDate"
:label="label"
@@ -46,38 +29,45 @@
<NcNoteCard v-else type="error">
{{ t('files_reminders', 'Please choose a valid date & time') }}
</NcNoteCard>
-
- <!-- Buttons -->
- <div class="custom-reminder-modal__buttons">
- <!-- Cancel pick -->
- <NcButton @click="onClose">
- {{ t('files_reminders', 'Cancel') }}
- </NcButton>
-
- <!-- Set reminder -->
- <NcButton :disabled="!isValid" native-type="submit" type="primary">
- {{ t('files_reminders', 'Set reminder') }}
- </NcButton>
- </div>
</form>
- </NcModal>
+ <template #actions>
+ <!-- Cancel pick -->
+ <NcButton type="tertiary" @click="onClose">
+ {{ t('files_reminders', 'Cancel') }}
+ </NcButton>
+
+ <!-- Clear reminder -->
+ <NcButton v-if="hasDueDate" @click="clear">
+ {{ t('files_reminders', 'Clear reminder') }}
+ </NcButton>
+
+ <!-- Set reminder -->
+ <NcButton :disabled="!isValid"
+ type="primary"
+ form="set-custom-reminder-form"
+ native-type="submit">
+ {{ t('files_reminders', 'Set reminder') }}
+ </NcButton>
+ </template>
+ </NcDialog>
</template>
<script lang="ts">
+import Vue from 'vue'
import type { Node } from '@nextcloud/files'
+import { emit } from '@nextcloud/event-bus'
import { showError, showSuccess } from '@nextcloud/dialogs'
import { translate as t } from '@nextcloud/l10n'
-import Vue from 'vue'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
-import NcDateTimePickerNative from '@nextcloud/vue/dist/Components/NcDateTimePickerNative.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
-import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDateTime from '@nextcloud/vue/components/NcDateTime'
+import NcDateTimePickerNative from '@nextcloud/vue/components/NcDateTimePickerNative'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
import { getDateString, getInitialCustomDueDate } from '../shared/utils.ts'
import { logger } from '../shared/logger.ts'
-import { setReminder } from '../services/reminderService.ts'
+import { clearReminder, setReminder } from '../services/reminderService.ts'
export default Vue.extend({
name: 'SetCustomReminderModal',
@@ -86,36 +76,37 @@ export default Vue.extend({
NcButton,
NcDateTime,
NcDateTimePickerNative,
- NcModal,
+ NcDialog,
NcNoteCard,
},
data() {
return {
node: undefined as Node | undefined,
+ hasDueDate: false,
opened: false,
isValid: true,
- customDueDate: getInitialCustomDueDate() as '' | Date,
+ customDueDate: null as null | Date,
nowDate: new Date(),
}
},
computed: {
- fileId(): number {
- return this.node.fileid
+ fileId(): number|undefined {
+ return this.node?.fileid
},
- fileName(): string {
- return this.node.basename
+ fileName(): string|undefined {
+ return this.node?.basename
},
- title() {
- return t('files_reminders', 'Set reminder for "{fileName}"', { fileName: this.fileName })
+ name() {
+ return this.fileName ? t('files_reminders', 'Set reminder for "{fileName}"', { fileName: this.fileName }) : ''
},
label(): string {
- return t('files_reminders', 'Set reminder at custom date & time')
+ return t('files_reminders', 'Reminder at custom date & time')
},
clearAriaLabel(): string {
@@ -132,18 +123,23 @@ export default Vue.extend({
* and reset the state.
* @param node The node to set a reminder for
*/
- async open(node: Node): Promise<void> {
+ open(node: Node): void {
+ const dueDate = node.attributes['reminder-due-date'] ? new Date(node.attributes['reminder-due-date']) : null
+
this.node = node
+ this.hasDueDate = Boolean(dueDate)
this.isValid = true
this.opened = true
- this.customDueDate = getInitialCustomDueDate()
+ this.customDueDate = dueDate ?? getInitialCustomDueDate()
this.nowDate = new Date()
// Focus the input and show the picker after the animation
setTimeout(() => {
const input = document.getElementById('set-custom-reminder') as HTMLInputElement
input.focus()
- input.showPicker()
+ if (!this.hasDueDate) {
+ input.showPicker()
+ }
}, 300)
},
@@ -156,6 +152,8 @@ export default Vue.extend({
try {
await setReminder(this.fileId, this.customDueDate)
+ Vue.set(this.node.attributes, 'reminder-due-date', this.customDueDate.toISOString())
+ emit('files:node:updated', this.node)
showSuccess(t('files_reminders', 'Reminder set for "{fileName}"', { fileName: this.fileName }))
this.onClose()
} catch (error) {
@@ -164,6 +162,19 @@ export default Vue.extend({
}
},
+ async clear(): Promise<void> {
+ try {
+ await clearReminder(this.fileId)
+ Vue.set(this.node.attributes, 'reminder-due-date', '')
+ emit('files:node:updated', this.node)
+ showSuccess(t('files_reminders', 'Reminder cleared for "{fileName}"', { fileName: this.fileName }))
+ this.onClose()
+ } catch (error) {
+ logger.error('Failed to clear reminder', { error })
+ showError(t('files_reminders', 'Failed to clear reminder'))
+ }
+ },
+
onClose(): void {
this.opened = false
this.$emit('close')
@@ -179,21 +190,6 @@ export default Vue.extend({
<style lang="scss" scoped>
.custom-reminder-modal {
- margin: 30px;
-
- &__title {
- font-size: 16px;
- line-height: 2em;
- }
-
- &__buttons {
- display: flex;
- justify-content: flex-end;
- margin-top: 30px;
-
- button {
- margin-left: 10px;
- }
- }
+ margin: 0 12px;
}
</style>
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-15 14:15:16 +0000