add search for affected population

src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html

@@ -61,9 +61,64 @@
         X
       </button>
     </div>
-    <div class="flex-auto overflow-y-auto relative p-4">
+    <div class="flex-auto overflow-auto relative p-4">
       <!--  -->
       <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+        <div class="pb-4 bg-white dark:bg-gray-900">
+          <label for="table-search" class="sr-only">Search</label>
+          <div class="relative mt-1">
+            <div
+              class="
+                absolute
+                inset-y-0
+                left-0
+                flex
+                items-center
+                pl-3
+                pointer-events-none
+              "
+            >
+              <svg
+                class="w-4 h-4 text-gray-500 dark:text-gray-400"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+                />
+              </svg>
+            </div>
+            <input
+              [(ngModel)]="searchValue"
+              type="search"
+              id="table-search"
+              class="
+                block
+                p-2
+                pl-10
+                text-base text-gray-700
+                border-4 border-blue-200
+                rounded-lg
+                w-120
+                bg-blue-50
+                focus:ring-blue-500 focus:border-blue-500
+                dark:bg-gray-700
+                dark:border-blue-600
+                dark:placeholder-gray-400
+                dark:text-white
+                dark:focus:ring-blue-500
+                dark:focus:border-blue-500
+              "
+              placeholder="Search Location"
+            />
+          </div>
+        </div>
         <table
           class="w-full text-lg text-left text-gray-500 dark:text-gray-400"
         >
@@ -79,6 +134,8 @@
           >
             <tr>
               <th scope="col" class="px-6 py-3">Province</th>
+              <!-- <th scope="col" class="px-6 py-3">Municipality</th>
+            <th scope="col" class="px-6 py-3">Barangay</th> -->
               <th scope="col" class="px-6 py-3">Total Population</th>
               <th scope="col" class="px-6 py-3">Total Affected Population</th>
               <th scope="col" class="px-6 py-3">Exposed to Med-High</th>
@@ -89,7 +146,9 @@
           </thead>
           <tbody>
             <tr
-              *ngFor="let data of affectedData"
+              *ngFor="
+                let data of affectedData | searchRiskAffected: searchValue
+              "
               class="
                 bg-white
                 uppercase
@@ -102,6 +161,12 @@
               <td class="px-6 py-4">
                 {{ data.province }}
               </td>
+              <!-- <td class="px-6 py-4">
+              {{ data.Municipality }}
+            </td>
+            <td class="px-6 py-4">
+              {{ data.Barangay }}
+            </td> -->
               <td class="px-6 py-4">
                 {{ data.total_population }}
               </td>

src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.ts

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { RiskAssessmentService } from '@features/noah-playground/services/risk-assessment.service';
+import {
+  AffectedData,
+  RiskAssessmentService,
+} from '@features/noah-playground/services/risk-assessment.service';
 import { ModalService } from '@features/noah-playground/services/modal.service';
 
 @Component({
@@ -8,8 +11,9 @@ import { ModalService } from '@features/noah-playground/services/modal.service';
   styleUrls: ['./risk-assessment-modal.component.scss'],
 })
 export class RiskAssessmentModalComponent implements OnInit {
-  affectedData: Array<any> = [];
+  affectedData: AffectedData[] = [];
   riskModal = false;
+  searchValue: string;
 
   constructor(
     private riskAssessment: RiskAssessmentService,

src/app/features/noah-playground/services/risk-assessment.service.ts

@@ -2,13 +2,15 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
-// export type AffectedData = {
-//   province: string;
-//   total_population: string;
-//   total_affected: string;
-//   med_high: string;
-//   percentage_med_high: string;
-// };
+export type AffectedData = {
+  province: string;
+  Municipality: string;
+  Barangay: string;
+  total_population: string;
+  total_affected_population: string;
+  medium_high: string;
+  percentage_of_affected_medium_high: string;
+};
 @Injectable({
   providedIn: 'root',
 })

src/app/shared/pipes/search-risk-affected.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { SearchRiskAffectedPipe } from './search-risk-affected.pipe';
+
+describe('SearchRiskAffectedPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SearchRiskAffectedPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/shared/pipes/search-risk-affected.pipe.ts

@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { AffectedData } from '@features/noah-playground/services/risk-assessment.service';
+
+@Pipe({
+  name: 'searchRiskAffected',
+})
+export class SearchRiskAffectedPipe implements PipeTransform {
+  transform(summaryData: AffectedData[], searchValue: string): AffectedData[] {
+    if (!summaryData || !searchValue) {
+      return summaryData;
+    }
+    return summaryData.filter((data) =>
+      // data.province
+      //   .toLocaleLowerCase()
+      //   .includes(searchValue.toLocaleLowerCase()) ||
+      // data.Municipality
+      //   .toLocaleLowerCase()
+      //   .includes(searchValue.toLocaleLowerCase()) ||
+      data.province
+        .toLocaleLowerCase()
+        .includes(searchValue.toLocaleLowerCase())
+    );
+  }
+}

src/app/shared/pipes/sort-risk-affected.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { SortRiskAffectedPipe } from './sort-risk-affected.pipe';
+
+describe('SortRiskAffectedPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SortRiskAffectedPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/shared/pipes/sort-risk-affected.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'sortRiskAffected',
+  pure: true,
+})
+export class SortRiskAffectedPipe implements PipeTransform {
+  transform(list: any[], column: string, direction: string): any[] {
+    if (!list) {
+      return [];
+    }
+    if (direction === 'ascending') {
+      return list.sort((a, b) => (a[column] > b[column] ? -1 : 1));
+    } else {
+      return list.sort((a, b) => (a[column] < b[column] ? -1 : 1));
+    }
+  }
+}

src/app/shared/shared.module.ts

@@ -14,6 +14,8 @@ import { SearchfilterPipe } from './pipes/searchfilter.pipe';
 import { PaginationComponent } from './components/pagination/pagination.component';
 import { AlertComponent } from './components/alert/alert.component';
 import { QcLoginComponent } from './components/qc-login/qc-login.component';
+import { SearchRiskAffectedPipe } from './pipes/search-risk-affected.pipe';
+import { SortRiskAffectedPipe } from './pipes/sort-risk-affected.pipe';
 
 const modules = [CommonModule, FormsModule, ReactiveFormsModule];
 const components = [
@@ -28,7 +30,13 @@ const components = [
   AlertComponent,
 ];
 const directives = [];
-const pipes = [ReplacePipe, SortPipe, SearchfilterPipe];
+const pipes = [
+  ReplacePipe,
+  SortPipe,
+  SearchfilterPipe,
+  SearchRiskAffectedPipe,
+  SortRiskAffectedPipe,
+];
 @NgModule({
   declarations: [...components, ...directives, ...pipes],
   imports: [...modules],