mirror of
https://github.com/zadam/trilium.git
synced 2025-10-26 07:46:30 +01:00
refactor(react/collections/calendar): split editing
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user