Search by partner name and Lazy load

src/app/dashboard/table/table.component.html

@@ -4,15 +4,14 @@
     </header>
 
     <div class="card">
-
         <div class="shadow" *ngIf="showExportOptions" (click)="showExportOptions = false"></div>
 
         <div class="table-actions">
             <div class="input-holder side-label">
-                <input type="text" placeholder="Partner name, location, PRA user, contact...">
+                <input type="text" placeholder="Partner name" [(ngModel)]="searchText" (input)="getFilteredData()">
                 <label> Search </label>
             </div>
-            <button class="button" (click)="shouldHaveImplementationData = !shouldHaveImplementationData; allData()">
+            <button class="button" (click)="shouldHaveImplementationData = !shouldHaveImplementationData; getFilteredData()">
                 <ng-container *ngIf="!shouldHaveImplementationData">
                     Partners with implmentation data
                 </ng-container>
@@ -28,7 +27,7 @@
             <div class="export-options">
                 <header>
                     <h5> Export as </h5>
-                </header>                
+                </header>
                 <div class="options">                    
                     <button class="button"> CSV </button>
                     <button class="button"> Excel </button>
@@ -47,7 +46,7 @@
                 <div class="col"> Primary Contact </div>
             </header>
             <section class="data">
-                <div class="row" *ngFor="let partner of userData" (click)="showPartnerDetails(partner)">
+                <div class="row" *ngFor="let partner of tempUserData" (click)="showPartnerDetails(partner)">
                     <div class="col"> <input type="checkbox"> </div>
                     <div class="col">
                         {{ partner.organizationBasicInfo.name }}
@@ -68,40 +67,14 @@
                     <div class="col">
                         <div> {{ partner.primaryContact.name }} </div>
                         <a href="mailTo:{{partner.primaryContact.email}}"> {{ partner.primaryContact.email }} </a>
-                        <a href="tel:{{partner.primaryContact.contactNumber}}"> {{ partner.primaryContact.contactNumber
-                            }} </a>
+                        <a href="tel:{{partner.primaryContact.contactNumber}}"> {{ partner.primaryContact.contactNumber }} </a>
                     </div>
-                </div>
+                </div> 
+                <div class="row" *ngIf="userData.length > tempUserData.length">
+                    <button class="button" (click)="loadMore()"> Load More </button>
+                </div>               
             </section>
         </section>
 
-        <section class="page-settings">
-            <div class="input-holder side-label">
-                <input type="number" value="10">
-                <label> Show </label>
-            </div>
-
-            <div class="pagination">
-                <button>
-                    <img src="assets/chevron-left-double.svg" alt="">
-                </button>
-                <button>
-                    <img src="assets/chevron-left.svg" alt="">
-                </button>
-                <div class="input-holder side-label">
-                    <input type="number" value="1">
-                    <label> Page </label>
-                </div>
-                <div class="text">
-                    of 20
-                </div>
-                <button class="right">
-                    <img src="assets/chevron-left.svg" alt="">
-                </button>
-                <button class="right">
-                    <img src="assets/chevron-left-double.svg" alt="">
-                </button>
-            </div>
-        </section>
     </div>
 </div>

src/app/dashboard/table/table.component.scss

@@ -162,60 +162,4 @@
             box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px #00000024, 0 3px 14px 2px #0000001f;
         }
     }
-}
-
-.page-settings {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-
-    .input-holder {
-        input {
-            width: 70px;
-        }
-    }
-
-    .pagination {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        button {
-            background-color: transparent;
-            border: none;
-            cursor: pointer;
-            border-radius: var(--common-border-radius);
-            background-color: transparent;
-            border: 2px solid transparent;
-
-            &:hover {
-                border-color: var(--input-border);
-                background-color: var(--input-background);
-            }
-
-            img {
-                vertical-align: middle;
-                width: 24px;
-                height: 24px;
-                object-fit: contain;
-            }
-
-            &.right {
-                img {
-                    transform: rotate(180deg);
-                }
-            }
-        }
-
-        .text {
-            font-size: 15px;
-            margin-right: 10px;
-            color: var(--secondary-text);
-        }
-
-        .input-holder {
-            margin: 0 10px;
-        }
-    }
 }

src/app/dashboard/table/table.component.ts

@@ -9,8 +9,10 @@ import { Router } from '@angular/router';
 })
 export class TableComponent implements OnInit {
     userData: Array<any> = [];
+    tempUserData: Array<any> = [];
     showExportOptions: boolean = false;
     shouldHaveImplementationData: boolean = false;
+    searchText: string = '';
 
     constructor(
         private partnerProfileService: PartnerProfileService,
@@ -18,10 +20,10 @@ export class TableComponent implements OnInit {
     ) { }
 
     ngOnInit(): void {
-        this.allData();
+        this.getFilteredData();
     }
 
-    allData() {
+    getFilteredData() {
         this.partnerProfileService.getPartnersData().then((data: any) => {
             this.userData = data;            
 
@@ -33,11 +35,27 @@ export class TableComponent implements OnInit {
                 });
             }
 
-            console.log(this.userData);
+            if (this.searchText) {
+                this.userData = this.userData.filter(user => {
+                    return user.organizationBasicInfo.name && user.organizationBasicInfo.name.toLowerCase().trim().includes(this.searchText.toLowerCase().trim());
+                })
+            }
 
+            this.partialLoad(this.userData.slice(0, 10))
+            
+            console.log(this.userData);
         }, (e) => console.log(e));
     }
 
+    partialLoad(data: Array<any>) {
+        this.tempUserData = data;
+        console.log(this.tempUserData);
+    }
+
+    loadMore() {
+        this.partialLoad(this.userData.slice(0, this.tempUserData.length + 10));
+    }
+
     showPartnerDetails(partner: any) {
         this.router.navigate(['dashboard/partners/partner-details'], { queryParams : { data: JSON.stringify(partner) } });
     }