Introduce the table view (#6097)

Author: eliandoran

apps/client/package.json

@@ -54,6 +54,7 @@
     "preact": "10.26.9",
     "split.js": "1.6.5",
     "svg-pan-zoom": "3.6.2",
+    "tabulator-tables": "6.3.1",
     "vanilla-js-wheel-zoom": "9.0.4"
   },
   "devDependencies": {
@@ -63,6 +64,7 @@
     "@types/leaflet": "1.9.19",
     "@types/leaflet-gpx": "1.3.7",
     "@types/mark.js": "8.11.12",
+    "@types/tabulator-tables": "6.2.6",
     "copy-webpack-plugin": "13.0.0",
     "happy-dom": "18.0.1",
     "script-loader": "0.7.2",

apps/client/src/components/component.ts

@@ -93,11 +93,7 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
 
         if (fun) {
             return this.callMethod(fun, data);
-        } else {
-            if (!this.parent) {
-                throw new Error(`Component "${this.componentId}" does not have a parent attached to propagate a command.`);
-            }
-
+        } else if (this.parent) {
             return this.parent.triggerCommand(name, data);
         }
     }

apps/client/src/components/note_context.ts

@@ -315,14 +315,38 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
     }
 
     hasNoteList() {
-        return (
-            this.note &&
-            ["default", "contextual-help"].includes(this.viewScope?.viewMode ?? "") &&
-            (this.note.hasChildren() || this.note.getLabelValue("viewType") === "calendar") &&
-            ["book", "text", "code"].includes(this.note.type) &&
-            this.note.mime !== "text/x-sqlite;schema=trilium" &&
-            !this.note.isLabelTruthy("hideChildrenOverview")
-        );
+        const note = this.note;
+
+        if (!note) {
+            return false;
+        }
+
+        if (!["default", "contextual-help"].includes(this.viewScope?.viewMode ?? "")) {
+            return false;
+        }
+
+        // Some book types must always display a note list, even if no children.
+        if (["calendar", "table"].includes(note.getLabelValue("viewType") ?? "")) {
+            return true;
+        }
+
+        if (!note.hasChildren()) {
+            return false;
+        }
+
+        if (!["book", "text", "code"].includes(note.type)) {
+            return false;
+        }
+
+        if (note.mime === "text/x-sqlite;schema=trilium") {
+            return false;
+        }
+
+        if (note.isLabelTruthy("hideChildrenOverview")) {
+            return false;
+        }
+
+        return true;
     }
 
     async getTextEditor(callback?: GetTextEditorCallback) {

apps/client/src/menus/context_menu.ts

@@ -2,7 +2,7 @@ import keyboardActionService from "../services/keyboard_actions.js";
 import note_tooltip from "../services/note_tooltip.js";
 import utils from "../services/utils.js";
 
-interface ContextMenuOptions<T> {
+export interface ContextMenuOptions<T> {
     x: number;
     y: number;
     orientation?: "left";
@@ -28,6 +28,7 @@ export interface MenuCommandItem<T> {
     items?: MenuItem<T>[] | null;
     shortcut?: string;
     spellingSuggestion?: string;
+    checked?: boolean;
 }
 
 export type MenuItem<T> = MenuCommandItem<T> | MenuSeparatorItem;
@@ -146,10 +147,13 @@ class ContextMenu {
             } else {
                 const $icon = $("<span>");
 
-                if ("uiIcon" in item && item.uiIcon) {
-                    $icon.addClass(item.uiIcon);
-                } else {
-                    $icon.append("&nbsp;");
+                if ("uiIcon" in item || "checked" in item) {
+                    const icon = (item.checked ? "bx bx-check" : item.uiIcon);
+                    if (icon) {
+                        $icon.addClass(icon);
+                    } else {
+                        $icon.append("&nbsp;");
+                    }
                 }
 
                 const $link = $("<span>")

apps/client/src/services/attributes.ts

@@ -3,15 +3,16 @@ import froca from "./froca.js";
 import type FNote from "../entities/fnote.js";
 import type { AttributeRow } from "./load_results.js";
 
-async function addLabel(noteId: string, name: string, value: string = "") {
+async function addLabel(noteId: string, name: string, value: string = "", isInheritable = false) {
     await server.put(`notes/${noteId}/attribute`, {
         type: "label",
         name: name,
-        value: value
+        value: value,
+        isInheritable
     });
 }
 
-async function setLabel(noteId: string, name: string, value: string = "") {
+export async function setLabel(noteId: string, name: string, value: string = "") {
     await server.put(`notes/${noteId}/set-attribute`, {
         type: "label",
         name: name,
@@ -49,7 +50,7 @@ function removeOwnedLabelByName(note: FNote, labelName: string) {
  * @param name the name of the attribute to set.
  * @param value the value of the attribute to set.
  */
-async function setAttribute(note: FNote, type: "label" | "relation", name: string, value: string | null | undefined) {
+export async function setAttribute(note: FNote, type: "label" | "relation", name: string, value: string | null | undefined) {
     if (value) {
         // Create or update the attribute.
         await server.put(`notes/${note.noteId}/set-attribute`, { type, name, value });

apps/client/src/services/content_renderer.ts

@@ -118,8 +118,17 @@ async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HT
 async function renderCode(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>) {
     const blob = await note.getBlob();
 
+    let content = blob?.content || "";
+    if (note.mime === "application/json") {
+        try {
+            content = JSON.stringify(JSON.parse(content), null, 4);
+        } catch (e) {
+            // Ignore JSON parsing errors.
+        }
+    }
+
     const $codeBlock = $("<code>");
-    $codeBlock.text(blob?.content || "");
+    $codeBlock.text(content);
     $renderedContent.append($("<pre>").append($codeBlock));
     await applySingleBlockSyntaxHighlight($codeBlock, normalizeMimeTypeForCKEditor(note.mime));
 }
@@ -301,7 +310,7 @@ function getRenderingType(entity: FNote | FAttachment) {
 
     if (type === "file" && mime === "application/pdf") {
         type = "pdf";
-    } else if (type === "file" && mime && CODE_MIME_TYPES.has(mime)) {
+    } else if ((type === "file" || type === "viewConfig") && mime && CODE_MIME_TYPES.has(mime)) {
         type = "code";
     } else if (type === "file" && mime && mime.startsWith("audio/")) {
         type = "audio";

apps/client/src/services/link.ts

@@ -384,7 +384,7 @@ function linkContextMenu(e: PointerEvent) {
     linkContextMenuService.openContextMenu(notePath, e, viewScope, null);
 }
 
-async function loadReferenceLinkTitle($el: JQuery<HTMLElement>, href: string | null | undefined = null) {
+export async function loadReferenceLinkTitle($el: JQuery<HTMLElement>, href: string | null | undefined = null) {
     const $link = $el[0].tagName === "A" ? $el : $el.find("a");
 
     href = href || $link.attr("href");

apps/client/src/services/note_list_renderer.ts

@@ -1,38 +1,40 @@
 import type FNote from "../entities/fnote.js";
 import CalendarView from "../widgets/view_widgets/calendar_view.js";
 import ListOrGridView from "../widgets/view_widgets/list_or_grid_view.js";
+import TableView from "../widgets/view_widgets/table_view/index.js";
 import type { ViewModeArgs } from "../widgets/view_widgets/view_mode.js";
 import type ViewMode from "../widgets/view_widgets/view_mode.js";
 
-export type ViewTypeOptions = "list" | "grid" | "calendar";
+export type ViewTypeOptions = "list" | "grid" | "calendar" | "table";
 
 export default class NoteListRenderer {
 
     private viewType: ViewTypeOptions;
-    public viewMode: ViewMode | null;
-
-    constructor($parent: JQuery<HTMLElement>, parentNote: FNote, noteIds: string[], showNotePath: boolean = false) {
-        this.viewType = this.#getViewType(parentNote);
-        const args: ViewModeArgs = {
-            $parent,
-            parentNote,
-            noteIds,
-            showNotePath
-        };
-
-        if (this.viewType === "list" || this.viewType === "grid") {
-            this.viewMode = new ListOrGridView(this.viewType, args);
-        } else if (this.viewType === "calendar") {
-            this.viewMode = new CalendarView(args);
-        } else {
-            this.viewMode = null;
+    public viewMode: ViewMode<any> | null;
+
+    constructor(args: ViewModeArgs) {
+        this.viewType = this.#getViewType(args.parentNote);
+
+        switch (this.viewType) {
+            case "list":
+            case "grid":
+                this.viewMode = new ListOrGridView(this.viewType, args);
+                break;
+            case "calendar":
+                this.viewMode = new CalendarView(args);
+                break;
+            case "table":
+                this.viewMode = new TableView(args);
+                break;
+            default:
+                this.viewMode = null;
         }
     }
 
     #getViewType(parentNote: FNote): ViewTypeOptions {
         const viewType = parentNote.getLabelValue("viewType");
 
-        if (!["list", "grid", "calendar"].includes(viewType || "")) {
+        if (!["list", "grid", "calendar", "table"].includes(viewType || "")) {
             // when not explicitly set, decide based on the note type
             return parentNote.type === "search" ? "list" : "grid";
         } else {

apps/client/src/services/note_tooltip.ts

@@ -14,6 +14,7 @@ let dismissTimer: ReturnType<typeof setTimeout>;
 
 function setupGlobalTooltip() {
     $(document).on("mouseenter", "a", mouseEnterHandler);
+    $(document).on("mouseenter", "[data-href]", mouseEnterHandler);
 
     // close any note tooltip after click, this fixes the problem that sometimes tooltips remained on the screen
     $(document).on("click", (e) => {

apps/client/src/services/promoted_attribute_definition_parser.ts

@@ -1,4 +1,4 @@
-type LabelType = "text" | "number" | "boolean" | "date" | "datetime" | "time" | "url";
+export type LabelType = "text" | "number" | "boolean" | "date" | "datetime" | "time" | "url";
 type Multiplicity = "single" | "multi";
 
 export interface DefinitionObject {