chore(client/ts): port services/note_list_renderer

src/public/app/entities/fnote.ts

@@ -89,7 +89,7 @@ class FNote {
 
     // Managed by Froca.
     searchResultsLoaded?: boolean;
-    highlightedTokens?: unknown;
+    highlightedTokens?: string[];
 
     constructor(froca: Froca, row: FNoteRow) {
         this.froca = froca;
@@ -602,7 +602,7 @@ class FNote {
      * @param [name] - relation name to filter
      * @returns all note's relations (attributes with type relation), including inherited ones
      */
-    getRelations(name: string) {
+    getRelations(name?: string) {
         return this.getAttributes(RELATION, name);
     }
 

src/public/app/services/link.ts

@@ -231,14 +231,14 @@ function parseNavigationStateFromUrl(url: string | undefined) {
     };
 }
 
-function goToLink(evt: MouseEvent) {
+function goToLink(evt: MouseEvent | JQuery.ClickEvent) {
     const $link = $(evt.target as any).closest("a,.block-link");
     const hrefLink = $link.attr('href') || $link.attr('data-href');
 
     return goToLinkExt(evt, hrefLink, $link);
 }
 
-function goToLinkExt(evt: MouseEvent, hrefLink: string | undefined, $link: JQuery<HTMLElement>) {
+function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent, hrefLink: string | undefined, $link: JQuery<HTMLElement>) {
     if (hrefLink?.startsWith("data:")) {
         return true;
     }

src/public/app/services/note_list_renderer.ts

@@ -5,6 +5,7 @@ import attributeRenderer from "./attribute_renderer.js";
 import libraryLoader from "./library_loader.js";
 import treeService from "./tree.js";
 import utils from "./utils.js";
+import FNote from "../entities/fnote.js";
 
 const TPL = `
 <div class="note-list">
@@ -157,10 +158,21 @@ const TPL = `
 </div>`;
 
 class NoteListRenderer {
+
+    private $noteList: JQuery<HTMLElement>;
+
+    private parentNote: FNote;
+    private noteIds: string[];
+    private page?: number;
+    private pageSize?: number;
+    private viewType?: string | null;
+    private showNotePath?: boolean;
+    private highlightRegex?: RegExp | null;
+
     /*
      * We're using noteIds so that it's not necessary to load all notes at once when paging
      */
-    constructor($parent, parentNote, noteIds, showNotePath = false) {
+    constructor($parent: JQuery<HTMLElement>, parentNote: FNote, noteIds: string[], showNotePath: boolean = false) {
         this.$noteList = $(TPL);
 
         // note list must be added to the DOM immediately, otherwise some functionality scripting (canvas) won't work
@@ -178,7 +190,7 @@ class NoteListRenderer {
         $parent.append(this.$noteList);
 
         this.page = 1;
-        this.pageSize = parseInt(parentNote.getLabelValue('pageSize'));
+        this.pageSize = parseInt(parentNote.getLabelValue('pageSize') || "");
 
         if (!this.pageSize || this.pageSize < 1) {
             this.pageSize = 20;
@@ -186,7 +198,7 @@ class NoteListRenderer {
 
         this.viewType = parentNote.getLabelValue('viewType');
 
-        if (!['list', 'grid'].includes(this.viewType)) {
+        if (!['list', 'grid'].includes(this.viewType || "")) {
             // when not explicitly set, decide based on the note type
             this.viewType = parentNote.type === 'search' ? 'list' : 'grid';
         }
@@ -207,7 +219,7 @@ class NoteListRenderer {
     }
 
     async renderList() {
-        if (this.noteIds.length === 0) {
+        if (this.noteIds.length === 0 || !this.page || !this.pageSize) {
             this.$noteList.hide();
             return;
         }
@@ -248,6 +260,10 @@ class NoteListRenderer {
 
     renderPager() {
         const $pager = this.$noteList.find('.note-list-pager').empty();
+        if (!this.page || !this.pageSize) {
+            return;
+        }
+
         const pageCount = Math.ceil(this.noteIds.length / this.pageSize);
 
         $pager.toggle(pageCount > 1);
@@ -285,7 +301,7 @@ class NoteListRenderer {
         $pager.append(`<span class="note-list-pager-total-count">(${this.noteIds.length} notes)</span>`);
     }
 
-    async renderNote(note, expand = false) {
+    async renderNote(note: FNote, expand: boolean = false) {
         const $expander = $('<span class="note-expander bx bx-chevron-right"></span>');
 
         const {$renderedAttributes} = await attributeRenderer.renderNormalAttributes(note);
@@ -330,7 +346,7 @@ class NoteListRenderer {
         return $card;
     }
 
-    async toggleContent($card, note, expand) {
+    async toggleContent($card: JQuery<HTMLElement>, note: FNote, expand: boolean) {
         if (this.viewType === 'list' && ((expand && $card.hasClass("expanded")) || (!expand && !$card.hasClass("expanded")))) {
             return;
         }
@@ -351,7 +367,7 @@ class NoteListRenderer {
         }
     }
 
-    async renderNoteContent(note) {
+    async renderNoteContent(note: FNote) {
         const $content = $('<div class="note-book-content">');
 
         try {

src/public/app/services/utils.ts

@@ -98,7 +98,7 @@ function isMac() {
     return navigator.platform.indexOf('Mac') > -1;
 }
 
-function isCtrlKey(evt: KeyboardEvent | MouseEvent) {
+function isCtrlKey(evt: KeyboardEvent | MouseEvent | JQuery.ClickEvent) {
     return (!isMac() && evt.ctrlKey)
         || (isMac() && evt.metaKey);
 }

src/public/app/types.d.ts

@@ -85,6 +85,12 @@ declare global {
         getSelectedExternalLink(this: HTMLElement): string | undefined;
         setSelectedExternalLink(externalLink: string | null | undefined);
         setNote(noteId: string);
+        markRegExp(regex: RegExp, opts: {
+            element: string;
+            className: string;
+            separateWordSearch: boolean;
+            caseSensitive: boolean;
+        })
     }
 
     var logError: (message: string, e?: Error) => void;