refactor(react/collections/calendar): split editing

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

View File

@@ -18,6 +18,7 @@ import froca from "../../../services/froca";
import date_notes from "../../../services/date_notes";
import appContext from "../../../components/app_context";
import { DateClickArg } from "@fullcalendar/interaction";
import FNote from "../../../entities/fnote";
interface CalendarViewData {
@@ -71,39 +72,8 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
const plugins = usePlugins(isEditable, isCalendarRoot);
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 editingProps = useEditing(note, isEditable, isCalendarRoot);
return (plugins &&
<div className="calendar-view" ref={containerRef}>
@@ -124,10 +94,7 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
nowIndicator
handleWindowResize={false}
locale={locale}
editable={isEditable} selectable={isEditable}
select={onCalendarSelection}
eventChange={onEventChange}
dateClick={isCalendarRoot ? onDateClick : undefined}
{...editingProps}
eventDidMount={eventDidMount}
viewDidMount={({ view }) => {
if (initialView.current !== view.type) {
@@ -178,6 +145,48 @@ function useLocale() {
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() {
const eventDidMount = useCallback((e: EventMountArg) => {
const { iconClass, promotedAttributes } = e.event.extendedProps;

View File

@@ -33,14 +33,6 @@ export default class CalendarView extends ViewMode<{}> {
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) {
if (hasTouchBar) {
appContext.triggerCommand("refreshTouchBar");