mirror of https://github.com/nextcloud/server.git
chore(files_reminders): upgrade to 28 APIs
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>pull/41010/head
parent
72ffd4999a
commit
cf6c921376
@ -0,0 +1,45 @@
|
||||
/**
|
||||
* @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
|
||||
*
|
||||
* @author John Molakvoæ <skjnldsv@protonmail.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/>.
|
||||
*
|
||||
*/
|
||||
import { FileAction, Node } from '@nextcloud/files'
|
||||
import { translate as t } from '@nextcloud/l10n'
|
||||
import CalendarClockSvg from '@mdi/svg/svg/calendar-clock.svg?raw'
|
||||
|
||||
import { SET_REMINDER_MENU_ID } from './setReminderMenuAction'
|
||||
import { pickCustomDate } from '../services/customPicker'
|
||||
|
||||
export const action = new FileAction({
|
||||
id: 'set-reminder-custom',
|
||||
displayName: () => t('files', 'Set custom reminder'),
|
||||
title: () => t('files_reminders', 'Set reminder at custom date & time'),
|
||||
iconSvgInline: () => CalendarClockSvg,
|
||||
|
||||
enabled: () => true,
|
||||
parent: SET_REMINDER_MENU_ID,
|
||||
|
||||
async exec(file: Node) {
|
||||
pickCustomDate(file)
|
||||
return null
|
||||
},
|
||||
|
||||
// After presets
|
||||
order: 22,
|
||||
})
|
@ -0,0 +1,40 @@
|
||||
/**
|
||||
* @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
|
||||
*
|
||||
* @author John Molakvoæ <skjnldsv@protonmail.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/>.
|
||||
*
|
||||
*/
|
||||
import { FileAction } from '@nextcloud/files'
|
||||
import { translate as t } from '@nextcloud/l10n'
|
||||
import AlarmSvg from '@mdi/svg/svg/alarm.svg?raw'
|
||||
|
||||
export const SET_REMINDER_MENU_ID = 'set-reminder-menu'
|
||||
|
||||
export const action = new FileAction({
|
||||
id: SET_REMINDER_MENU_ID,
|
||||
displayName: () => t('files', 'Set reminder'),
|
||||
iconSvgInline: () => AlarmSvg,
|
||||
|
||||
enabled: () => true,
|
||||
|
||||
async exec() {
|
||||
return null
|
||||
},
|
||||
|
||||
order: 20,
|
||||
})
|
@ -0,0 +1,38 @@
|
||||
/**
|
||||
* @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
|
||||
*
|
||||
* @author John Molakvoæ <skjnldsv@protonmail.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/>.
|
||||
*
|
||||
*/
|
||||
// TODO: remove when/if the actions API supports a separator
|
||||
// This the last preset action, so we need to add a separator
|
||||
.files-list__row-action-set-reminder-3 {
|
||||
margin-bottom: 13px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
margin: 3px 10px 3px 15px;
|
||||
border-bottom: 1px solid var(--color-border-dark);
|
||||
cursor: default;
|
||||
display: flex;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
@ -0,0 +1,199 @@
|
||||
<!--
|
||||
- @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/>.
|
||||
-
|
||||
-->
|
||||
|
||||
<template>
|
||||
<NcModal v-if="opened"
|
||||
:out-transition="true"
|
||||
size="small"
|
||||
@close="onClose">
|
||||
<form class="custom-reminder-modal" @submit.prevent="setCustom">
|
||||
<h2 class="custom-reminder-modal__title">
|
||||
{{ title }}
|
||||
</h2>
|
||||
|
||||
<NcDateTimePickerNative id="set-custom-reminder"
|
||||
v-model="customDueDate"
|
||||
:label="label"
|
||||
:min="nowDate"
|
||||
:required="true"
|
||||
type="datetime-local"
|
||||
@input="onInput" />
|
||||
|
||||
<NcNoteCard v-if="isValid" type="info">
|
||||
{{ t('files_reminders', 'We will remind you of this file') }}
|
||||
<NcDateTime :timestamp="customDueDate" />
|
||||
</NcNoteCard>
|
||||
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
import type { Node } from '@nextcloud/files'
|
||||
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 { getDateString, getInitialCustomDueDate } from '../shared/utils.ts'
|
||||
import { logger } from '../shared/logger.ts'
|
||||
import { setReminder } from '../services/reminderService.ts'
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'SetCustomReminderModal',
|
||||
|
||||
components: {
|
||||
NcButton,
|
||||
NcDateTime,
|
||||
NcDateTimePickerNative,
|
||||
NcModal,
|
||||
NcNoteCard,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
node: undefined as Node | undefined,
|
||||
opened: false,
|
||||
isValid: true,
|
||||
|
||||
customDueDate: getInitialCustomDueDate() as '' | Date,
|
||||
nowDate: new Date(),
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
fileId(): number {
|
||||
return this.node.fileid
|
||||
},
|
||||
|
||||
fileName(): string {
|
||||
return this.node.basename
|
||||
},
|
||||
|
||||
title() {
|
||||
return t('files_reminders', 'Set reminder for "{fileName}"', { fileName: this.fileName })
|
||||
},
|
||||
|
||||
label(): string {
|
||||
return t('files_reminders', 'Set reminder at custom date & time')
|
||||
},
|
||||
|
||||
clearAriaLabel(): string {
|
||||
return t('files_reminders', 'Clear reminder')
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
t,
|
||||
getDateString,
|
||||
|
||||
/**
|
||||
* Open the modal to set a custom reminder
|
||||
* and reset the state.
|
||||
* @param node The node to set a reminder for
|
||||
*/
|
||||
async open(node: Node): Promise<void> {
|
||||
this.node = node
|
||||
this.isValid = true
|
||||
this.opened = true
|
||||
this.customDueDate = 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()
|
||||
}, 300)
|
||||
},
|
||||
|
||||
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.onClose()
|
||||
} catch (error) {
|
||||
logger.error('Failed to set reminder', { error })
|
||||
showError(t('files_reminders', 'Failed to set reminder'))
|
||||
}
|
||||
},
|
||||
|
||||
onClose(): void {
|
||||
this.opened = false
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
onInput(): void {
|
||||
const input = document.getElementById('set-custom-reminder') as HTMLInputElement
|
||||
this.isValid = input.checkValidity()
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,29 @@
|
||||
/**
|
||||
* @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/>.
|
||||
*
|
||||
*/
|
||||
import { registerFileAction } from '@nextcloud/files'
|
||||
import { action as menuAction } from './actions/setReminderMenuAction'
|
||||
import { actions as suggestionActions } from './actions/setReminderSuggestionActions'
|
||||
import { action as customAction } from './actions/setReminderCustomAction'
|
||||
|
||||
registerFileAction(menuAction)
|
||||
registerFileAction(customAction)
|
||||
suggestionActions.forEach((action) => registerFileAction(action))
|
@ -1,102 +0,0 @@
|
||||
/**
|
||||
* @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/>.
|
||||
*
|
||||
*/
|
||||
|
||||
import Vue, { type ComponentInstance } from 'vue'
|
||||
import { subscribe } from '@nextcloud/event-bus'
|
||||
import { showError } from '@nextcloud/dialogs'
|
||||
import { translate as t } from '@nextcloud/l10n'
|
||||
|
||||
import SetReminderActionsComponent from './components/SetReminderActions.vue'
|
||||
|
||||
import { getReminder } from './services/reminderService.js'
|
||||
import { logger } from './shared/logger.js'
|
||||
|
||||
import type { FileAttributes } from './shared/types.js'
|
||||
|
||||
interface FileContext {
|
||||
[key: string]: any
|
||||
$file: JQuery<HTMLTableRowElement>
|
||||
fileInfoModel: {
|
||||
[key: string]: any
|
||||
attributes: FileAttributes
|
||||
}
|
||||
}
|
||||
|
||||
interface EventPayload {
|
||||
el: HTMLDivElement
|
||||
context: FileContext
|
||||
}
|
||||
|
||||
const handleOpen = async (payload: EventPayload) => {
|
||||
const fileId = payload.context.fileInfoModel.attributes.id
|
||||
const menuEl = payload.context.$file[0].querySelector('.fileactions .action-menu') as HTMLLinkElement
|
||||
const linkEl = payload.el.querySelector('.action-setreminder-container .action-setreminder') as HTMLLinkElement
|
||||
|
||||
let dueDate: null | Date = null
|
||||
let error: null | any = null
|
||||
try {
|
||||
dueDate = (await getReminder(fileId)).dueDate
|
||||
} catch (e) {
|
||||
error = e
|
||||
logger.error(`Failed to load reminder for file with id: ${fileId}`, { error })
|
||||
}
|
||||
|
||||
linkEl.addEventListener('click', (_event) => {
|
||||
if (error) {
|
||||
showError(t('files_reminders', 'Failed to load reminder'))
|
||||
throw Error()
|
||||
}
|
||||
|
||||
const mountPoint = document.createElement('div')
|
||||
const SetReminderActions = Vue.extend(SetReminderActionsComponent)
|
||||
|
||||
const origDisplay = menuEl.style.display
|
||||
menuEl.style.display = 'none'
|
||||
menuEl.insertAdjacentElement('afterend', mountPoint)
|
||||
|
||||
const propsData = {
|
||||
file: payload.context.fileInfoModel.attributes,
|
||||
dueDate,
|
||||
}
|
||||
const actions = (new SetReminderActions({ propsData }) as ComponentInstance)
|
||||
.$mount(mountPoint)
|
||||
|
||||
const cleanUp = () => {
|
||||
actions.$destroy() // destroy popper
|
||||
actions.$el.remove() // remove action menu button
|
||||
menuEl.style.display = origDisplay
|
||||
}
|
||||
|
||||
actions.$once('back', () => {
|
||||
cleanUp()
|
||||
menuEl.click() // reopen original actions menu
|
||||
})
|
||||
|
||||
actions.$once('close', () => {
|
||||
cleanUp()
|
||||
})
|
||||
}, {
|
||||
once: true,
|
||||
})
|
||||
}
|
||||
|
||||
subscribe('files:action-menu:opened', handleOpen)
|
@ -0,0 +1,48 @@
|
||||
/**
|
||||
* @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
|
||||
*
|
||||
* @author John Molakvoæ <skjnldsv@protonmail.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/>.
|
||||
*
|
||||
*/
|
||||
|
||||
import type { Node } from '@nextcloud/files'
|
||||
import Vue from 'vue'
|
||||
|
||||
import SetCustomReminderModal from '../components/SetCustomReminderModal.vue'
|
||||
|
||||
const View = Vue.extend(SetCustomReminderModal)
|
||||
const mount = document.createElement('div')
|
||||
mount.id = 'set-custom-reminder-modal'
|
||||
document.body.appendChild(mount)
|
||||
|
||||
// Create a new Vue instance and mount it to our modal container
|
||||
const CustomReminderModal = new View({
|
||||
name: 'SetCustomReminderModal',
|
||||
el: mount,
|
||||
})
|
||||
|
||||
export const pickCustomDate = async (node: Node): Promise<void> => {
|
||||
console.debug('CustomReminderModal', mount, CustomReminderModal)
|
||||
|
||||
CustomReminderModal.open(node)
|
||||
|
||||
// Wait for the modal to close
|
||||
return new Promise((resolve) => {
|
||||
CustomReminderModal.$on('close', resolve)
|
||||
})
|
||||
}
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue