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;
@@ -111,7 +111,7 @@ class FNote {
         this.title = row.title;
         this.isProtected = !!row.isProtected;
         this.type = row.type;
-        
+
         this.mime = row.mime;
 
         this.blobId = row.blobId;
@@ -478,7 +478,7 @@ class FNote {
         return true;
     }
 
-    /**    
+    /**
      * @private
      */
     __filterAttrs(attributes: FAttribute[], type?: AttributeType, name?: string): FAttribute[] {
@@ -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">
@@ -32,7 +33,7 @@ const TPL = `
     .note-list.grid-view .note-book-card {
         max-height: 300px;
     }
-    
+
     .note-list.grid-view .note-book-card img {
         max-height: 220px;
         object-fit: contain;
@@ -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 {
@@ -366,7 +382,7 @@ class NoteListRenderer {
                     separateWordSearch: false,
                     caseSensitive: false
                 });
-            }            
+            }
 
             $content.append($renderedContent);
             $content.addClass(`type-${type}`);

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);
 }
@@ -166,7 +166,7 @@ function isMobile() {
         || (!window.glob?.device && /Mobi/.test(navigator.userAgent));
 }
 
-function isDesktop() {    
+function isDesktop() {
     return window.glob?.device === "desktop"
         // window.glob.device is not available in setup
         || (!window.glob?.device && !/Mobi/.test(navigator.userAgent));
@@ -520,7 +520,7 @@ function createImageSrcUrl(note: { noteId: string; title: string }) {
 
 /**
  * Given a string representation of an SVG, triggers a download of the file on the client device.
- * 
+ *
  * @param nameWithoutExtension the name of the file. The .svg suffix is automatically added to it.
  * @param svgContent the content of the SVG file download.
  */
@@ -544,39 +544,39 @@ function downloadSvg(nameWithoutExtension: string, svgContent: string) {
  *   1  if v1 is greater than v2
  *   0  if v1 is equal to v2
  *   -1 if v1 is less than v2
- * 
+ *
  * @param v1 First version string
  * @param v2 Second version string
- * @returns 
+ * @returns
  */
 function compareVersions(v1: string, v2: string): number {
 
     // Remove 'v' prefix and everything after dash if present
     v1 = v1.replace(/^v/, '').split('-')[0];
     v2 = v2.replace(/^v/, '').split('-')[0];
-    
+
     const v1parts = v1.split('.').map(Number);
     const v2parts = v2.split('.').map(Number);
-    
+
     // Pad shorter version with zeros
     while (v1parts.length < 3) v1parts.push(0);
     while (v2parts.length < 3) v2parts.push(0);
-    
+
     // Compare major version
     if (v1parts[0] !== v2parts[0]) {
         return v1parts[0] > v2parts[0] ? 1 : -1;
     }
-    
+
     // Compare minor version
     if (v1parts[1] !== v2parts[1]) {
         return v1parts[1] > v2parts[1] ? 1 : -1;
     }
-    
+
     // Compare patch version
     if (v1parts[2] !== v2parts[2]) {
         return v1parts[2] > v2parts[2] ? 1 : -1;
     }
-    
+
     return 0;
 }
 

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;