chore(react/launch_bar): reimplement week notes

This commit is contained in:
Elian Doran 2025-12-05 09:36:21 +02:00
parent d283f5dbb4
commit 20f44cc64f
No known key found for this signature in database
3 changed files with 41 additions and 40 deletions

View File

@ -46,28 +46,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.manageFirstDayOfWeek();
this.initWeekCalculation();
// Week click
this.$dropdownContent.on("click", ".calendar-week-number", async (ev) => {
if (!this.weekNoteEnable) {
return;
}
const week = $(ev.target).closest(".calendar-week-number").attr("data-calendar-week-number");
if (week) {
const note = await dateNoteService.getWeekNote(week);
if (note) {
appContext.tabManager.getActiveContext()?.setNote(note.noteId);
this.dropdown?.hide();
} else {
toastService.showError(t("calendar.cannot_find_week_note"));
}
}
ev.stopPropagation();
});
// Handle click events for the entire calendar widget
this.$dropdownContent.on("click", (e) => {
const $target = $(e.target);
@ -85,16 +63,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
});
}
private async getWeekNoteEnable() {
const noteId = await server.get<string[]>(`search/${encodeURIComponent('#calendarRoot')}`);
if (noteId.length === 0) {
this.weekNoteEnable = false;
return;
}
const noteAttributes = await server.get<AttributeRow[]>(`notes/${noteId}/attributes`);
this.weekNoteEnable = noteAttributes.some(a => a.name === 'enableWeekNote');
}
initWeekCalculation() {
this.weekCalculationOptions = {
firstWeekType: options.getInt("firstWeekOfYear") || 0,
@ -109,11 +77,10 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
}
createWeekNumber(weekNumber: number) {
const weekNoteId = this.date.local().format('YYYY-') + 'W' + String(weekNumber).padStart(2, '0');
let $newWeekNumber;
if (this.weekNoteEnable) {
$newWeekNumber = $("<a>").addClass("calendar-date");
if (this.weekNotes.includes(weekNoteId)) {
$newWeekNumber.addClass("calendar-date-exists").attr("data-href", `#root/${weekNoteId}`);
}

View File

@ -30,6 +30,7 @@ export interface CalendarArgs {
todaysDate: Dayjs;
activeDate: Dayjs | null;
onDateClicked(date: string, e: TargetedMouseEvent<HTMLAnchorElement>): void;
onWeekClicked?: (week: string, e: TargetedMouseEvent<HTMLAnchorElement>) => void;
}
export default function Calendar(args: CalendarArgs) {
@ -76,7 +77,7 @@ function PreviousMonthDays({ date, info: { dates, weekNumbers }, ...args }: { da
return (
<>
<CalendarWeek weekNumber={weekNumbers[0]} />
<CalendarWeek date={date} weekNumber={weekNumbers[0]} onWeekClicked={args.onWeekClicked} />
{dates.map(date => <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" {...args} />)}
</>
)
@ -96,7 +97,7 @@ function CurrentMonthDays({ date, firstDayOfWeekISO, ...args }: { date: Dayjs, f
while (dateCursor.month() === currentMonth) {
const weekNumber = getWeekNumber(dateCursor, firstDayOfWeekISO);
if (dateCursor.isoWeekday() === firstDayOfWeekISO) {
items.push(<CalendarWeek weekNumber={weekNumber} />)
items.push(<CalendarWeek date={dateCursor} weekNumber={weekNumber} onWeekClicked={args.onWeekClicked} />)
}
items.push(<CalendarDay date={dateCursor} dateNotesForMonth={dateNotesForCurMonth} {...args} />)
@ -140,12 +141,20 @@ function CalendarDay({ date, dateNotesForMonth, className, activeDate, todaysDat
);
}
function CalendarWeek({ weekNumber }: { weekNumber: number }) {
function CalendarWeek({ date, weekNumber, onWeekClicked }: { weekNumber: number } & Pick<CalendarArgs, "date" | "onWeekClicked">) {
if (onWeekClicked) {
const weekNoteId = date.local().format('YYYY-') + 'W' + String(weekNumber).padStart(2, '0');
return (
<span className="calendar-week-number calendar-week-number-disabled">{weekNumber}</span>
<a
className="calendar-week-number calendar-date"
onClick={(e) => onWeekClicked(weekNoteId, e)}
>{weekNumber}</a>
)
}
return (<span className="calendar-week-number calendar-week-number-disabled">{weekNumber}</span>);
}
export function getMonthInformation(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number) {
return {
prevMonth: getPrevMonthDays(date, firstDayISO, firstDayOfWeekISO),

View File

@ -12,6 +12,7 @@ import FormTextBox from "../react/FormTextBox";
import toast from "../../services/toast";
import date_notes from "../../services/date_notes";
import { Dropdown } from "bootstrap";
import search from "../../services/search";
const MONTHS = [
t("calendar.january"),
@ -33,6 +34,19 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
const [ calendarArgs, setCalendarArgs ] = useState<Pick<CalendarArgs, "activeDate" | "todaysDate">>();
const [ date, setDate ] = useState<Dayjs>();
const dropdownRef = useRef<Dropdown>(null);
const [ enableWeekNotes, setEnableWeekNotes ] = useState(false);
const calendarRootRef = useRef<FNote>();
async function checkEnableWeekNotes() {
if (!calendarRootRef.current) {
const notes = await search.searchForNotes("#calendarRoot");
if (!notes.length) return;
calendarRootRef.current = notes[0];
}
if (!calendarRootRef.current) return;
setEnableWeekNotes(calendarRootRef.current.hasLabel("enableWeekNote"));
}
return (
<LaunchBarDropdownButton
@ -46,6 +60,7 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
todaysDate,
});
setDate(dayjs(activeDate || todaysDate).startOf('month'));
checkEnableWeekNotes();
}}
dropdownRef={dropdownRef}
dropdownOptions={{
@ -66,6 +81,16 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
}
e.stopPropagation();
}}
onWeekClicked={enableWeekNotes ? async (week, e) => {
const note = await date_notes.getWeekNote(week);
if (note) {
appContext.tabManager.getActiveContext()?.setNote(note.noteId);
dropdownRef.current?.hide();
} else {
toast.showError(t("calendar.cannot_find_week_note"));
}
e.stopPropagation();
} : undefined}
{...calendarArgs}
/>
</div>}