From 8022f2580176d4fd230a04283561b765a942c064 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Tue, 18 Jan 2022 20:51:01 +0100
Subject: [PATCH] Add track by functions to tag and file lists

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 .../file-gallery/file-gallery.component.html              | 2 +-
 .../file-multiview/file-gallery/file-gallery.component.ts | 4 ++++
 .../file-multiview/file-grid/file-grid.component.html     | 4 ++--
 .../file/file-multiview/file-grid/file-grid.component.ts  | 8 ++++++++
 .../shared/sidebar/file-search/file-search.component.html | 2 +-
 .../shared/sidebar/file-search/file-search.component.ts   | 4 ++++
 .../shared/sidebar/tag-edit/tag-edit.component.html       | 2 +-
 .../shared/sidebar/tag-edit/tag-edit.component.ts         | 4 ++++
 8 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html
index d81a443..f718760 100644
--- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html
+++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html
@@ -13,7 +13,7 @@
     <div class="file-scroll-view" fxFlex="20%">
         <cdk-virtual-scroll-viewport #virtualScroll class="file-scroll-viewport" itemSize="260" maxBufferPx="3000"
                                      minBufferPx="1000" orientation="horizontal">
-            <div *cdkVirtualFor="let entry of entries" class="file-item">
+            <div *cdkVirtualFor="let entry of entries; trackBy: trackByFileId" class="file-item">
                 <app-file-card (clickEvent)="onEntrySelect($event.entry)"
                                [entry]="entry"></app-file-card>
             </div>
diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.ts b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.ts
index b91a293..d55f5ef 100644
--- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.ts
+++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.ts
@@ -173,6 +173,10 @@ export class FileGalleryComponent implements OnChanges, OnInit, AfterViewInit {
         }
     }
 
+    public trackByFileId(index: number, item: Selectable<File>) {
+        return item.data.id;
+    }
+
     private scrollToSelection(): void {
         if (this.selectedFile) {
             const selectedIndex = this.entries.indexOf(this.selectedFile);
diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.html b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.html
index 7034cbc..d5678c6 100644
--- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.html
+++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.html
@@ -5,13 +5,13 @@
      class="file-gallery-inner">
     <cdk-virtual-scroll-viewport #virtualScrollGrid class="file-scroll" itemSize="260" maxBufferPx="2000"
                                  minBufferPx="500">
-        <div *cdkVirtualFor="let rowEntry of partitionedGridEntries">
+        <div *cdkVirtualFor="let rowEntry of partitionedGridEntries; trackByFileRowId">
             <div class="file-row">
                 <app-file-card
                     (clickEvent)="setSelectedFile($event.entry)"
                     (contextmenu)="this.selectEntryWhenNotSelected(gridEntry); fileContextMenu.onContextMenu($event, this.getSelectedFiles())"
                     (dblClickEvent)="fileOpen.emit($event.entry.data)"
-                    *ngFor="let gridEntry of rowEntry"
+                    *ngFor="let gridEntry of rowEntry; trackBy: trackByFileId"
                     [entry]="gridEntry"></app-file-card>
             </div>
         </div>
diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.ts b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.ts
index 1ee2d26..f203b2c 100644
--- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.ts
+++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.ts
@@ -169,6 +169,14 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit {
         this.ctrlClicked = event.ctrlKey ? false : this.ctrlClicked;
     }
 
+    public trackByFileRowId(index: number, item: Selectable<File>[]) {
+        return item.map(e => e.data.id).join("-");
+    }
+
+    public trackByFileId(index: number, item: Selectable<File>) {
+        return item.data.id;
+    }
+
     private setPartitionedGridEntries() {
         this.partitionedGridEntries = [];
         let scrollToIndex = -1;
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html
index d52827b..e4de89f 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html
@@ -50,7 +50,7 @@
             <cdk-virtual-scroll-viewport itemSize="50" maxBufferPx="4000" minBufferPx="500">
                 <div (click)="addTagFilter(tag.getNormalizedOutput())"
                      (contextmenu)="contextMenuTag = tag; contextMenu.onContextMenu($event)"
-                     *cdkVirtualFor="let tag of contextTags" class="selectable-tag">
+                     *cdkVirtualFor="let tag of contextTags; trackBy: trackByTagId" class="selectable-tag">
                     <app-tag-item [tag]="tag"></app-tag-item>
                 </div>
             </cdk-virtual-scroll-viewport>
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts
index 159f641..4188f5e 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts
@@ -198,6 +198,10 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
         return deepEqual(tagFilter, filter);
     }
 
+    public trackByTagId(index: number, item: Tag) {
+        return item.id;
+    }
+
     private assignDisplayedFilters() {
         this.displayedFilters = this.filters.getFilters().filter(f => !this.isTagFilter(f));
     }
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.html b/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.html
index 3578731..388fc69 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.html
+++ b/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.html
@@ -5,7 +5,7 @@
     </div>
     <div class="tag-edit-list" fxFlex fxFlexAlign="start" fxFlexFill>
         <cdk-virtual-scroll-viewport #tagScroll itemSize="50" maxBufferPx="2000" minBufferPx="1000">
-            <div *cdkVirtualFor="let tag of tags" class="editable-tag">
+            <div *cdkVirtualFor="let tag of tags; trackBy: trackByTagId" class="editable-tag">
                 <app-tag-item [tag]="tag"></app-tag-item>
                 <button (click)="removeTag(tag)" class="tag-remove-button" mat-icon-button>
                     <ng-icon name="mat-remove"></ng-icon>
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.ts b/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.ts
index ae34b58..d6f61dc 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.ts
+++ b/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.ts
@@ -142,6 +142,10 @@ export class TagEditComponent implements AfterViewInit, OnChanges {
         this.tagEditEvent.emit(this);
     }
 
+    public trackByTagId(index: number, item: Tag) {
+        return item.id;
+    }
+
     private async loadFileTags() {
         await this.wrapAsyncOperation(async () => {
             const promises = [];