Add track by functions to tag and file lists

Signed-off-by: trivernis <trivernis@protonmail.com>

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>

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);

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>

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;

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>

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));
     }

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>

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 = [];