From 6430611e3e2819aece969a32f6fd98c0772601e7 Mon Sep 17 00:00:00 2001 From: 01zulfi <85733202+01zulfi@users.noreply.github.com> Date: Fri, 10 Jan 2025 16:51:27 +0500 Subject: [PATCH] web: reminder dialogs improvements * add note references (if any) in reminder edit dialog * wrap snooze option buttons in reminder preview dialog Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com> --- .../__e2e__/models/note-properties.model.ts | 8 ++++ .../web/__e2e__/models/reminder-item.model.ts | 5 +++ apps/web/__e2e__/reminders.test.ts | 24 +++++++++++ apps/web/src/dialogs/add-reminder-dialog.tsx | 43 ++++++++++++++++++- .../src/dialogs/reminder-preview-dialog.tsx | 3 +- 5 files changed, 81 insertions(+), 2 deletions(-) diff --git a/apps/web/__e2e__/models/note-properties.model.ts b/apps/web/__e2e__/models/note-properties.model.ts index accc00592..1796db50a 100644 --- a/apps/web/__e2e__/models/note-properties.model.ts +++ b/apps/web/__e2e__/models/note-properties.model.ts @@ -27,10 +27,12 @@ import { fillColorDialog, fillNotebookDialog, fillPasswordDialog, + fillReminderDialog, iterateList } from "./utils"; import { SessionHistoryItemModel } from "./session-history-item-model"; import dayjs from "dayjs"; +import { Reminder } from "@notesnook/core"; abstract class BaseProperties { protected readonly page: Page; @@ -388,6 +390,12 @@ export class NoteContextMenuModel extends BaseProperties { await confirmDialog(dialog); } + async addReminder(reminder: Partial) { + await this.open(); + await this.menu.clickOnItem("remind-me"); + await fillReminderDialog(this.page, reminder); + } + async open() { await this.menu.open(this.noteLocator); } diff --git a/apps/web/__e2e__/models/reminder-item.model.ts b/apps/web/__e2e__/models/reminder-item.model.ts index 940c18b2d..a4714e0ce 100644 --- a/apps/web/__e2e__/models/reminder-item.model.ts +++ b/apps/web/__e2e__/models/reminder-item.model.ts @@ -62,4 +62,9 @@ export class ReminderItemModel extends BaseItemModel { await this.contextMenu.open(this.locator); await this.contextMenu.clickOnItem("toggle"); } + + async open() { + await this.contextMenu.open(this.locator); + await this.contextMenu.clickOnItem("edit"); + } } diff --git a/apps/web/__e2e__/reminders.test.ts b/apps/web/__e2e__/reminders.test.ts index 269debcfa..552fb623e 100644 --- a/apps/web/__e2e__/reminders.test.ts +++ b/apps/web/__e2e__/reminders.test.ts @@ -20,6 +20,7 @@ along with this program. If not, see . import { Reminder } from "@notesnook/core"; import { test, expect } from "@playwright/test"; import { AppModel } from "./models/app.model"; +import { getTestId } from "./utils"; const ONE_TIME_REMINDER: Partial = { title: "Test reminder 1", @@ -197,3 +198,26 @@ test("editing a weekly recurring reminder should not revert it to daily", async expect(await reminder?.getRecurringMode()).toBe("Weekly"); expect(await reminder?.getDescription()).toBe("An edited reminder"); }); + +test("adding a reminder via note context menu should show reference in edit dialog", async ({ + page +}) => { + const app = new AppModel(page); + await app.goto(); + const notes = await app.goToNotes(); + const note = await notes.createNote({ + title: "Test note", + content: "I am a note" + }); + + await note?.contextMenu.addReminder(ONE_TIME_REMINDER); + const reminders = await app.goToReminders(); + const reminder = await reminders.findReminder({ + title: ONE_TIME_REMINDER.title + }); + await reminder?.open(); + + const noteReferences = page.locator(getTestId("reminder-note-references")); + await noteReferences.waitFor({ state: "visible" }); + expect(noteReferences.getByText("Test note")).toBeVisible(); +}); diff --git a/apps/web/src/dialogs/add-reminder-dialog.tsx b/apps/web/src/dialogs/add-reminder-dialog.tsx index 5bc02fbde..49888e0a8 100644 --- a/apps/web/src/dialogs/add-reminder-dialog.tsx +++ b/apps/web/src/dialogs/add-reminder-dialog.tsx @@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ +import NoteItem from "../components/note"; import Dialog from "../components/dialog"; import Field from "../components/field"; import { Box, Button, Flex, Label, Radio, Text } from "@theme-ui/components"; @@ -32,13 +33,18 @@ import { usePersistentState } from "../hooks/use-persistent-state"; import { DayPicker } from "../components/day-picker"; import { PopupPresenter } from "@notesnook/ui"; import { useStore as useThemeStore } from "../stores/theme-store"; -import { getFormattedDate, useIsFeatureAvailable } from "@notesnook/common"; +import { + getFormattedDate, + useIsFeatureAvailable, + usePromise +} from "@notesnook/common"; import { MONTHS_FULL, getTimeFormat } from "@notesnook/core"; import { Note, Reminder } from "@notesnook/core"; import { BaseDialogProps, DialogManager } from "../common/dialog-manager"; import { strings } from "@notesnook/intl"; import { checkFeature } from "../common"; import { setTimeOnly, setDateOnly } from "../utils/date-time"; +import Skeleton from "react-loading-skeleton"; dayjs.extend(customParseFormat); @@ -148,6 +154,15 @@ export const AddReminderDialog = DialogManager.register( const theme = useThemeStore((store) => store.colorScheme); const dateInputRef = useRef(null); const repeatModeAvailability = useIsFeatureAvailable("recurringReminders"); + const referencedNotes = usePromise( + () => + reminder?.id + ? db.relations + .to({ id: reminder.id, type: "reminder" }, "note") + .resolve() + : null, + [reminder?.id] + ); const repeatsDaily = (selectedDays.length === 7 && recurringMode === RecurringModes.WEEK) || @@ -512,6 +527,32 @@ export const AddReminderDialog = DialogManager.register( {strings.reminderStarts(date.toString(), date.format(timeFormat()))} )} + + {reminder ? ( + referencedNotes && referencedNotes.status === "fulfilled" ? ( + referencedNotes.value !== null && + referencedNotes.value.length > 0 && ( + + + {strings.note()} {strings.references()}: + + {referencedNotes.value.map((item) => ( + + ))} + + ) + ) : ( + + ) + ) : null} ); }, diff --git a/apps/web/src/dialogs/reminder-preview-dialog.tsx b/apps/web/src/dialogs/reminder-preview-dialog.tsx index bbbe2a17c..42409e72e 100644 --- a/apps/web/src/dialogs/reminder-preview-dialog.tsx +++ b/apps/web/src/dialogs/reminder-preview-dialog.tsx @@ -96,7 +96,8 @@ export const ReminderPreviewDialog = DialogManager.register( sx={{ alignItems: "center", my: 1, - gap: 1 + gap: 1, + flexWrap: "wrap" }} > {SNOOZE_TIMES.map((time) => (