chore(files_reminders): upgrade to 28 APIs

Signed-off-by: John Molakvoæ <[email protected]>

apps/files/src/components/FileEntry/FileEntryActions.vue

@@ -51,34 +51,34 @@
 					}"
 					:close-after-click="!isMenu(action.id)"
 					:data-cy-files-list-row-action="action.id"
+					:is-menu="isMenu(action.id)"
 					:title="action.title?.([source], currentView)"
 					@click="onActionClick(action)">
 					<template #icon>
-						<ChevronRightIcon v-if="isMenu(action.id)" />
-						<NcLoadingIcon v-else-if="loading === action.id" :size="18" />
+						<NcLoadingIcon v-if="loading === action.id" :size="18" />
 						<NcIconSvgWrapper v-else :svg="action.iconSvgInline([source], currentView)" />
 					</template>
 					{{ actionDisplayName(action) }}
 				</NcActionButton>
 			</template>
 
 			<!-- Submenu actions list-->
-			<template v-if="openedSubmenu && enabledSubmenuActions[openedSubmenu]">
+			<template v-if="openedSubmenu && enabledSubmenuActions[openedSubmenu?.id]">
 				<!-- Back to top-level button -->
-				<NcActionButton class="files-list__row-action-back" @click="openedSubmenu = ''">
+				<NcActionButton class="files-list__row-action-back" @click="openedSubmenu = null">
 					<template #icon>
 						<ArrowLeftIcon />
 					</template>
-					{{ t('files', 'Back') }}
+					{{ actionDisplayName(openedSubmenu) }}
 				</NcActionButton>
 				<NcActionSeparator />
 
 				<!-- Submenu actions -->
-				<NcActionButton v-for="action in enabledSubmenuActions[openedSubmenu]"
+				<NcActionButton v-for="action in enabledSubmenuActions[openedSubmenu?.id]"
 					:key="action.id"
 					:class="`files-list__row-action-${action.id}`"
 					class="files-list__row-action--submenu"
-					:close-after-click="true"
+					:close-after-click="false /* never close submenu, just go back */"
 					:data-cy-files-list-row-action="action.id"
 					:title="action.title?.([source], currentView)"
 					@click="onActionClick(action)">
@@ -152,7 +152,7 @@ export default Vue.extend({
 
 	data() {
 		return {
-			openedSubmenu: '',
+			openedSubmenu: null as FileAction | null,
 		}
 	},
 
@@ -267,10 +267,10 @@ export default Vue.extend({
 			return action.displayName([this.source], this.currentView)
 		},
 
-		async onActionClick(action) {
+		async onActionClick(action, isSubmenu = false) {
 			// If the action is a submenu, we open it
 			if (this.enabledSubmenuActions[action.id]) {
-				this.openedSubmenu = action.id
+				this.openedSubmenu = action
 				return
 			}
 
@@ -299,6 +299,11 @@ export default Vue.extend({
 				// Reset the loading marker
 				this.$emit('update:loading', '')
 				Vue.set(this.source, 'status', undefined)
+
+				// If that was a submenu, we just go back after the action
+				if (isSubmenu) {
+					this.openedSubmenu = null
+				}
 			}
 		},
 		execDefaultAction(event) {

apps/files/src/components/FileEntry/FileEntryPreview.vue

@@ -37,6 +37,7 @@
 			alt=""
 			class="files-list__row-icon-preview"
 			:class="{'files-list__row-icon-preview--loaded': backgroundFailed === false}"
+			loading="lazy"
 			:src="previewUrl"
 			@error="backgroundFailed = true"
 			@load="backgroundFailed = false">

apps/files/src/init.ts

@@ -63,39 +63,3 @@ registerRecentView()
 
 // Register preview service worker
 registerPreviewServiceWorker()
-
-registerFileAction(new FileAction({
-	id: 'menu',
-	displayName: () => 'Menu',
-	iconSvgInline: () => MenuIcon,
-	exec: async () => true,
-}))
-
-registerFileAction(new FileAction({
-	id: 'submenu1',
-	displayName: () => 'Submenu 1',
-	iconSvgInline: () => MenuIcon,
-	exec: async () => alert('Hello 1'),
-	parent: 'menu',
-}))
-registerFileAction(new FileAction({
-	id: 'submenu2',
-	displayName: () => 'Submenu 2',
-	iconSvgInline: () => MenuIcon,
-	exec: async () => alert('Hello 2'),
-	parent: 'menu',
-}))
-registerFileAction(new FileAction({
-	id: 'submenu3',
-	displayName: () => 'Submenu 3',
-	iconSvgInline: () => MenuIcon,
-	exec: async () => alert('Hello 3'),
-	parent: 'menu',
-}))
-registerFileAction(new FileAction({
-	id: 'submenu4',
-	displayName: () => 'Submenu 4',
-	iconSvgInline: () => MenuIcon,
-	exec: async () => alert('Hello 4'),
-	parent: 'menu',
-}))

apps/files/src/sidebar.js

@@ -36,8 +36,6 @@ if (!window.OCA.Files) {
 Object.assign(window.OCA.Files, { Sidebar: new Sidebar() })
 Object.assign(window.OCA.Files.Sidebar, { Tab })
 
-console.debug('OCA.Files.Sidebar initialized')
-
 window.addEventListener('DOMContentLoaded', function() {
 	const contentElement = document.querySelector('body > .content')
 		|| document.querySelector('body > #content')

apps/files_reminders/lib/Listener/LoadAdditionalScriptsListener.php

@@ -47,6 +47,6 @@ public function handle(Event $event): void {
 			return;
 		}
 
-		Util::addScript(Application::APP_ID, 'main');
+		Util::addInitScript(Application::APP_ID, 'init');
 	}
 }

apps/files_reminders/src/actions/setReminderCustomAction.ts

@@ -0,0 +1,45 @@
+/**
+ * @copyright Copyright (c) 2023 John Molakvoæ <[email protected]>
+ *
+ * @author John Molakvoæ <[email protected]>
+ *
+ * @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,
+})

apps/files_reminders/src/actions/setReminderMenuAction.ts

@@ -0,0 +1,40 @@
+/**
+ * @copyright Copyright (c) 2023 John Molakvoæ <[email protected]>
+ *
+ * @author John Molakvoæ <[email protected]>
+ *
+ * @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,
+})

apps/files_reminders/src/actions/setReminderSuggestionActions.scss

@@ -0,0 +1,38 @@
+/**
+ * @copyright Copyright (c) 2023 John Molakvoæ <[email protected]>
+ *
+ * @author John Molakvoæ <[email protected]>
+ *
+ * @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;
+	}
+}

apps/files_reminders/src/actions/setReminderSuggestionActions.ts

@@ -0,0 +1,106 @@
+/**
+ * @copyright Copyright (c) 2023 John Molakvoæ <[email protected]>
+ *
+ * @author John Molakvoæ <[email protected]>
+ *
+ * @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 { FileAction } from '@nextcloud/files'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { translate as t } from '@nextcloud/l10n'
+
+import { DateTimePreset, getDateString, getDateTime, getVerboseDateString } from '../shared/utils'
+import { logger } from '../shared/logger'
+import { SET_REMINDER_MENU_ID } from './setReminderMenuAction'
+import { setReminder } from '../services/reminderService'
+import './setReminderSuggestionActions.scss'
+
+interface ReminderOption {
+	dateTimePreset: DateTimePreset
+	label: string
+	ariaLabel: string
+	dateString?: string
+	action?: () => Promise<void>
+}
+
+const laterToday: ReminderOption = {
+	dateTimePreset: DateTimePreset.LaterToday,
+	label: t('files_reminders', 'Later today'),
+	ariaLabel: t('files_reminders', 'Set reminder for later today'),
+}
+
+const tomorrow: ReminderOption = {
+	dateTimePreset: DateTimePreset.Tomorrow,
+	label: t('files_reminders', 'Tomorrow'),
+	ariaLabel: t('files_reminders', 'Set reminder for tomorrow'),
+}
+
+const thisWeekend: ReminderOption = {
+	dateTimePreset: DateTimePreset.ThisWeekend,
+	label: t('files_reminders', 'This weekend'),
+	ariaLabel: t('files_reminders', 'Set reminder for this weekend'),
+}
+
+const nextWeek: ReminderOption = {
+	dateTimePreset: DateTimePreset.NextWeek,
+	label: t('files_reminders', 'Next week'),
+	ariaLabel: t('files_reminders', 'Set reminder for next week'),
+}
+
+// Generate the default preset actions
+export const actions = [laterToday, tomorrow, thisWeekend, nextWeek].map((option): FileAction|null => {
+	const dateTime = getDateTime(option.dateTimePreset)
+	if (!dateTime) {
+		return null
+	}
+
+	return new FileAction({
+		id: `set-reminder-${option.dateTimePreset}`,
+		displayName: () => `${option.label} - ${getDateString(dateTime)}`,
+		title: () => `${option.ariaLabel} – ${getVerboseDateString(dateTime)}`,
+
+		// Empty svg to hide the icon
+		iconSvgInline: () => '<svg></svg>',
+
+		enabled: () => true,
+		parent: SET_REMINDER_MENU_ID,
+
+		async exec(node: Node) {
+			// Can't really happen, but just in case™
+			if (!node.fileid) {
+				logger.error('Failed to set reminder, missing file id')
+				showError(t('files_reminders', 'Failed to set reminder'))
+				return null
+			}
+
+			// Set the reminder
+			try {
+				await setReminder(node.fileid, dateTime)
+				showSuccess(t('files_reminders', 'Reminder set for "{fileName}"', { fileName: node.basename }))
+			} catch (error) {
+				logger.error('Failed to set reminder', { error })
+				showError(t('files_reminders', 'Failed to set reminder'))
+			}
+			// Silent success as we display our own notification
+			return null
+		},
+
+		order: 21,
+	})
+}).filter(Boolean) as FileAction[]