From 4694bb401d3f5b2b8202691c6357033947cb13cb Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Wed, 19 May 2021 22:43:16 +0300
Subject: [PATCH] (layout/common) Added trackBy functions to ngFor loops in
 common components

---
 .../layout/common/language/language.component.html    |  2 +-
 src/app/layout/common/language/language.component.ts  | 11 +++++++++++
 .../layout/common/messages/messages.component.html    |  2 +-
 src/app/layout/common/messages/messages.component.ts  | 11 +++++++++++
 .../common/notifications/notifications.component.html |  2 +-
 .../common/notifications/notifications.component.ts   | 11 +++++++++++
 src/app/layout/common/search/search.component.html    |  4 ++--
 src/app/layout/common/search/search.component.ts      | 11 +++++++++++
 .../layout/common/shortcuts/shortcuts.component.html  |  2 +-
 .../layout/common/shortcuts/shortcuts.component.ts    | 11 +++++++++++
 10 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/src/app/layout/common/language/language.component.html b/src/app/layout/common/language/language.component.html
index cbb1a54a..c8907850 100644
--- a/src/app/layout/common/language/language.component.html
+++ b/src/app/layout/common/language/language.component.html
@@ -9,7 +9,7 @@
 <mat-menu
     [xPosition]="'before'"
     #languages="matMenu">
-    <ng-container *ngFor="let lang of availableLangs">
+    <ng-container *ngFor="let lang of availableLangs; trackBy: trackByFn">
         <button
             mat-menu-item
             (click)="setActiveLang(lang.id)">
diff --git a/src/app/layout/common/language/language.component.ts b/src/app/layout/common/language/language.component.ts
index 3edbe2a0..24526937 100644
--- a/src/app/layout/common/language/language.component.ts
+++ b/src/app/layout/common/language/language.component.ts
@@ -78,6 +78,17 @@ export class LanguageComponent implements OnInit, OnDestroy
         this._translocoService.setActiveLang(lang);
     }
 
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------
diff --git a/src/app/layout/common/messages/messages.component.html b/src/app/layout/common/messages/messages.component.html
index 6ee00b47..6442a50d 100644
--- a/src/app/layout/common/messages/messages.component.html
+++ b/src/app/layout/common/messages/messages.component.html
@@ -46,7 +46,7 @@
         <!-- Content -->
         <div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card">
             <!-- Messages -->
-            <ng-container *ngFor="let message of messages">
+            <ng-container *ngFor="let message of messages; trackBy: trackByFn">
                 <div
                     class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
                     [ngClass]="{'unread': !message.read}">
diff --git a/src/app/layout/common/messages/messages.component.ts b/src/app/layout/common/messages/messages.component.ts
index 64609eec..454247b7 100644
--- a/src/app/layout/common/messages/messages.component.ts
+++ b/src/app/layout/common/messages/messages.component.ts
@@ -155,6 +155,17 @@ export class MessagesComponent implements OnInit, OnChanges, OnDestroy
         this._messagesService.delete(message.id).subscribe();
     }
 
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------
diff --git a/src/app/layout/common/notifications/notifications.component.html b/src/app/layout/common/notifications/notifications.component.html
index 4c661567..ad0737b3 100644
--- a/src/app/layout/common/notifications/notifications.component.html
+++ b/src/app/layout/common/notifications/notifications.component.html
@@ -46,7 +46,7 @@
         <!-- Content -->
         <div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card">
             <!-- Notifications -->
-            <ng-container *ngFor="let notification of notifications">
+            <ng-container *ngFor="let notification of notifications; trackBy: trackByFn">
                 <div
                     class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
                     [ngClass]="{'unread': !notification.read}">
diff --git a/src/app/layout/common/notifications/notifications.component.ts b/src/app/layout/common/notifications/notifications.component.ts
index 84fc8a54..6682e0de 100644
--- a/src/app/layout/common/notifications/notifications.component.ts
+++ b/src/app/layout/common/notifications/notifications.component.ts
@@ -155,6 +155,17 @@ export class NotificationsComponent implements OnChanges, OnInit, OnDestroy
         this._notificationsService.delete(notification.id).subscribe();
     }
 
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------
diff --git a/src/app/layout/common/search/search.component.html b/src/app/layout/common/search/search.component.html
index 6c06f6ff..430ede4e 100644
--- a/src/app/layout/common/search/search.component.html
+++ b/src/app/layout/common/search/search.component.html
@@ -31,7 +31,7 @@
                 *ngIf="results && !results.length">
                 No results found!
             </mat-option>
-            <ng-container *ngFor="let result of results">
+            <ng-container *ngFor="let result of results; trackBy: trackByFn">
                 <mat-option
                     class="group relative h-14 px-6 py-0 sm:px-8 text-md"
                     [routerLink]="result.link">
@@ -73,7 +73,7 @@
                 *ngIf="results && !results.length">
                 No results found!
             </mat-option>
-            <ng-container *ngFor="let result of results">
+            <ng-container *ngFor="let result of results; trackBy: trackByFn">
                 <mat-option
                     class="group relative h-14 px-5 py-0 text-md"
                     [routerLink]="result.link">
diff --git a/src/app/layout/common/search/search.component.ts b/src/app/layout/common/search/search.component.ts
index 3ec7f25e..9ea24c6a 100644
--- a/src/app/layout/common/search/search.component.ts
+++ b/src/app/layout/common/search/search.component.ts
@@ -200,4 +200,15 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
         // Close the search
         this.opened = false;
     }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
 }
diff --git a/src/app/layout/common/shortcuts/shortcuts.component.html b/src/app/layout/common/shortcuts/shortcuts.component.html
index 57a474bf..b0106838 100644
--- a/src/app/layout/common/shortcuts/shortcuts.component.html
+++ b/src/app/layout/common/shortcuts/shortcuts.component.html
@@ -94,7 +94,7 @@
                 <!-- Shortcuts -->
                 <div class="grid grid-cols-2 grid-flow-row">
                     <!-- Shortcut -->
-                    <ng-container *ngFor="let shortcut of shortcuts">
+                    <ng-container *ngFor="let shortcut of shortcuts; trackBy: trackByFn">
                         <div class="relative group flex flex-col overflow-hidden bg-card border-r border-b even:border-r-0 hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5">
                             <ng-container *ngIf="mode === 'modify'">
                                 <div
diff --git a/src/app/layout/common/shortcuts/shortcuts.component.ts b/src/app/layout/common/shortcuts/shortcuts.component.ts
index 92d2e8be..20598f1d 100644
--- a/src/app/layout/common/shortcuts/shortcuts.component.ts
+++ b/src/app/layout/common/shortcuts/shortcuts.component.ts
@@ -209,6 +209,17 @@ export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
         this.mode = 'modify';
     }
 
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------