mirror of
				https://github.com/zadam/trilium.git
				synced 2025-10-31 18:36: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