feat: Implement collapsing nested subentries (#50)

* feat: Implement collapsing nested subentries

* fix: Change tooltip based on collapse state

* fix: Avoid hardcoded CSS constants

* fix: Retain old formatting when editing row

* fix: Change collapsed field from number to boolean

* fix: Remove unneeded wrapper code
This commit is contained in:
James Tan 2024-08-09 11:26:15 -05:00 committed by GitHub
parent 9b718d2cae
commit 1ddefa51f4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -11,6 +11,7 @@ export interface Entry {
startTime: string; startTime: string;
endTime: string; endTime: string;
subEntries: Entry[]; subEntries: Entry[];
collapsed?: boolean;
} }
export async function saveTracker(tracker: Tracker, fileName: string, section: MarkdownSectionInformation): Promise<void> { export async function saveTracker(tracker: Tracker, fileName: string, section: MarkdownSectionInformation): Promise<void> {
@ -345,6 +346,22 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
renderNameAsMarkdown(nameField.label, getFile, component); renderNameAsMarkdown(nameField.label, getFile, component);
let expandButton = new ButtonComponent(nameField.label)
.setClass("clickable-icon")
.setClass("simple-time-tracker-expand-button")
.setIcon(`chevron-${entry.collapsed ? 'right' : 'down'}`)
.setTooltip(entry.collapsed ? "Expand" : "Collapse")
.onClick(async () => {
if (entry.collapsed) {
delete entry.collapsed;
} else {
entry.collapsed = true;
}
await saveTracker(tracker, this.app, getFile(), getSectionInfo());
});
if (!entry.subEntries?.length) expandButton.buttonEl.style.visibility = 'hidden';
nameField.cell.insertBefore(expandButton.buttonEl, nameField.label);
let entryButtons = row.createEl("td"); let entryButtons = row.createEl("td");
entryButtons.addClass("simple-time-tracker-table-buttons"); entryButtons.addClass("simple-time-tracker-table-buttons");
new ButtonComponent(entryButtons) new ButtonComponent(entryButtons)
@ -363,6 +380,7 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
.onClick(async () => { .onClick(async () => {
if (nameField.editing()) { if (nameField.editing()) {
entry.name = nameField.endEdit(); entry.name = nameField.endEdit();
expandButton.buttonEl.style.display = null;
startField.endEdit(); startField.endEdit();
entry.startTime = startField.getTimestamp(); entry.startTime = startField.getTimestamp();
if (!entryRunning) { if (!entryRunning) {
@ -375,6 +393,7 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
renderNameAsMarkdown(nameField.label, getFile, component); renderNameAsMarkdown(nameField.label, getFile, component);
} else { } else {
nameField.beginEdit(entry.name); nameField.beginEdit(entry.name);
expandButton.buttonEl.style.display = 'none';
// only allow editing start and end times if we don't have sub entries // only allow editing start and end times if we don't have sub entries
if (!entry.subEntries) { if (!entry.subEntries) {
startField.beginEdit(entry.startTime); startField.beginEdit(entry.startTime);
@ -401,7 +420,7 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
await saveTracker(tracker, getFile(), getSectionInfo()); await saveTracker(tracker, getFile(), getSectionInfo());
}); });
if (entry.subEntries) { if (entry.subEntries && !entry.collapsed) {
for (let sub of orderedEntries(entry.subEntries, settings)) for (let sub of orderedEntries(entry.subEntries, settings))
addEditableTableRow(tracker, sub, table, newSegmentNameBox, trackerRunning, getFile, getSectionInfo, settings, indent + 1, component); addEditableTableRow(tracker, sub, table, newSegmentNameBox, trackerRunning, getFile, getSectionInfo, settings, indent + 1, component);
} }