Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 18:36:30 +01:00
Code Issues Packages Projects Releases Activity

refactor(react/collections/calendar): split editing

Browse Source
This commit is contained in:
Elian Doran
2025-09-06 11:06:24 +03:00
parent 0cc8b5def0
commit 69af62cde0
2 changed files with 45 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
apps/client/src/widgets/collections/calendar/index.tsx
View File

@@ -18,6 +18,7 @@ import froca from "../../../services/froca";
import date_notes from "../../../services/date_notes"; import date_notes from "../../../services/date_notes";
import appContext from "../../../components/app_context"; import appContext from "../../../components/app_context";
import { DateClickArg } from "@fullcalendar/interaction"; import { DateClickArg } from "@fullcalendar/interaction";
import FNote from "../../../entities/fnote";
interface CalendarViewData { interface CalendarViewData {
@@ -71,39 +72,8 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
const plugins = usePlugins(isEditable, isCalendarRoot); const plugins = usePlugins(isEditable, isCalendarRoot);
const locale = useLocale(); const locale = useLocale();
const onCalendarSelection = useCallback(async (e: DateSelectArg) => {
const { startDate, endDate } = parseStartEndDateFromEvent(e);
if (!startDate) return;
const { startTime, endTime } = parseStartEndTimeFromEvent(e);
// Ask for the title
const title = await dialog.prompt({ message: t("relation_map.enter_title_of_new_note"), defaultValue: t("relation_map.default_new_note_title") });
if (!title?.trim()) {
return;
}
newEvent(note, { title, startDate, endDate, startTime, endTime });
}, [ note ]);
const onEventChange = useCallback(async (e: EventChangeArg) => {
const { startDate, endDate } = parseStartEndDateFromEvent(e.event);
if (!startDate) return;
const { startTime, endTime } = parseStartEndTimeFromEvent(e.event);
const note = await froca.getNote(e.event.extendedProps.noteId);
if (!note) return;
changeEvent(note, { startDate, endDate, startTime, endTime });
}, []);
// Called upon when clicking the day number in the calendar, opens or creates the day note but only if in a calendar root.
const onDateClick = useCallback(async (e: DateClickArg) => {
const eventNote = await date_notes.getDayNote(e.dateStr);
if (eventNote) {
appContext.triggerCommand("openInPopup", { noteIdOrPath: eventNote.noteId });
}
}, []);
const { eventDidMount } = useEventDisplayCustomization(); const { eventDidMount } = useEventDisplayCustomization();
const editingProps = useEditing(note, isEditable, isCalendarRoot);
return (plugins && return (plugins &&
<div className="calendar-view" ref={containerRef}> <div className="calendar-view" ref={containerRef}>
@@ -124,10 +94,7 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
nowIndicator nowIndicator
handleWindowResize={false} handleWindowResize={false}
locale={locale} locale={locale}
editable={isEditable} selectable={isEditable} {...editingProps}
select={onCalendarSelection}
eventChange={onEventChange}
dateClick={isCalendarRoot ? onDateClick : undefined}
eventDidMount={eventDidMount} eventDidMount={eventDidMount}
viewDidMount={({ view }) => { viewDidMount={({ view }) => {
if (initialView.current !== view.type) { if (initialView.current !== view.type) {
@@ -178,6 +145,48 @@ function useLocale() {
return calendarLocale; return calendarLocale;
} }
function useEditing(note: FNote, isEditable: boolean, isCalendarRoot: boolean) {
const onCalendarSelection = useCallback(async (e: DateSelectArg) => {
const { startDate, endDate } = parseStartEndDateFromEvent(e);
if (!startDate) return;
const { startTime, endTime } = parseStartEndTimeFromEvent(e);
// Ask for the title
const title = await dialog.prompt({ message: t("relation_map.enter_title_of_new_note"), defaultValue: t("relation_map.default_new_note_title") });
if (!title?.trim()) {
return;
}
newEvent(note, { title, startDate, endDate, startTime, endTime });
}, [ note ]);
const onEventChange = useCallback(async (e: EventChangeArg) => {
const { startDate, endDate } = parseStartEndDateFromEvent(e.event);
if (!startDate) return;
const { startTime, endTime } = parseStartEndTimeFromEvent(e.event);
const note = await froca.getNote(e.event.extendedProps.noteId);
if (!note) return;
changeEvent(note, { startDate, endDate, startTime, endTime });
}, []);
// Called upon when clicking the day number in the calendar, opens or creates the day note but only if in a calendar root.
const onDateClick = useCallback(async (e: DateClickArg) => {
const eventNote = await date_notes.getDayNote(e.dateStr);
if (eventNote) {
appContext.triggerCommand("openInPopup", { noteIdOrPath: eventNote.noteId });
}
}, []);
return {
select: onCalendarSelection,
eventChange: onEventChange,
dateClick: isCalendarRoot ? onDateClick : undefined,
editable: isEditable,
selectable: isEditable
};
}
function useEventDisplayCustomization() { function useEventDisplayCustomization() {
const eventDidMount = useCallback((e: EventMountArg) => { const eventDidMount = useCallback((e: EventMountArg) => {
const { iconClass, promotedAttributes } = e.event.extendedProps; const { iconClass, promotedAttributes } = e.event.extendedProps;

8
apps/client/src/widgets/view_widgets/calendar_view.ts
View File

@@ -33,14 +33,6 @@ export default class CalendarView extends ViewMode<{}> {
args.$parent.append(this.$root); args.$parent.append(this.$root);
} }
async renderList(): Promise<JQuery<HTMLElement> | undefined> {
const calendar = new Calendar(this.$calendarContainer[0], {
datesSet: (e) => this.#onDatesSet(e),
});
return this.$root;
}
#onDatesSet(e: DatesSetArg) { #onDatesSet(e: DatesSetArg) {
if (hasTouchBar) { if (hasTouchBar) {
appContext.triggerCommand("refreshTouchBar"); appContext.triggerCommand("refreshTouchBar");