feat(book/table): create new view type

apps/client/src/services/note_list_renderer.ts

@@ -1,10 +1,11 @@
 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.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 {
 
@@ -20,19 +21,26 @@ export default class NoteListRenderer {
             showNotePath
         };
 
-        if (this.viewType === "list" || this.viewType === "grid") {
+        switch (this.viewType) {
-            this.viewMode = new ListOrGridView(this.viewType, args);
+            case "list":
-        } else if (this.viewType === "calendar") {
+            case "grid":
-            this.viewMode = new CalendarView(args);
+                this.viewMode = new ListOrGridView(this.viewType, args);
-        } else {
+                break;
-            this.viewMode = null;
+            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/translations/en/translation.json

@@ -760,7 +760,8 @@
     "expand": "Expand",
     "book_properties": "Book Properties",
     "invalid_view_type": "Invalid view type '{{type}}'",
-    "calendar": "Calendar"
+    "calendar": "Calendar",
+    "table": "Table"
   },
   "edited_notes": {
     "no_edited_notes_found": "No edited notes on this day yet...",

apps/client/src/widgets/ribbon_widgets/book_properties.ts

@@ -24,6 +24,7 @@ const TPL = /*html*/`
             <option value="grid">${t("book_properties.grid")}</option>
             <option value="list">${t("book_properties.list")}</option>
             <option value="calendar">${t("book_properties.calendar")}</option>
+            <option value="table">${t("book_properties.table")}</option>
         </select>
     </div>
 
@@ -126,7 +127,7 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
             return;
         }
 
-        if (!["list", "grid", "calendar"].includes(type)) {
+        if (!["list", "grid", "calendar", "table"].includes(type)) {
             throw new Error(t("book_properties.invalid_view_type", { type }));
         }
 

apps/client/src/widgets/view_widgets/table_view.ts

@@ -0,0 +1,24 @@
+import ViewMode, { ViewModeArgs } from "./view_mode";
+
+const TPL = /*html*/`
+<div class="table-view">
+    <p>Table view goes here.</p>
+</div>
+`;
+
+export default class TableView extends ViewMode {
+
+    private $root: JQuery<HTMLElement>;
+
+    constructor(args: ViewModeArgs) {
+        super(args);
+
+        this.$root = $(TPL);
+        args.$parent.append(this.$root);
+    }
+
+    async renderList() {
+        return this.$root;
+    }
+
+}