feat: add search notifier field (#312)

OsmosysSoftware · Sep 9, 2024 · 2e05661 · 2e05661
1 parent 10e9d4f
commit 2e05661
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git a/apps/portal/src/app/views/notifications/notifications.component.html b/apps/portal/src/app/views/notifications/notifications.component.html
@@ -4,7 +4,7 @@ <h2 class="p-col-12">Notifications</h2>
   <p-toast key="tst"></p-toast>
 
   <div class="p-grid">
-    <div class="p-col-12 p-md-3">
+    <div class="p-col-12 p-md-3 filter-row">
       <p-dropdown
         [options]="channelTypes"
         [(ngModel)]="selectedChannelType"
@@ -56,6 +56,30 @@ <h2 class="p-col-12">Notifications</h2>
         *ngIf="allApplicationsList.length !== 0"
       ></p-dropdown>
     </div>
+    <div class="p-col-12 p-md-3 filter-row">
+      <input
+        type="email"
+        pInputText
+        [(ngModel)]="searchValue"
+        placeholder="Search Notifier Email"
+        class="grid-input"
+        pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
+        #searchInput="ngModel"
+      />
+      <p-button
+        (onClick)="loadNotificationsLazy({ first: 0, rows: this.pageSize })"
+        label="Search"
+        class="grid-button"
+        [disabled]="searchInput.invalid || !searchInput.value"
+      />
+      <p-button
+        (onClick)="onSearchClear(); loadNotificationsLazy({ first: 0, rows: this.pageSize })"
+        label="Clear"
+        class="grid-button"
+        severity="danger"
+        [disabled]="!searchValue"
+      />
+    </div>
   </div>
 
   <div class="p-grid table-container">

diff --git a/apps/portal/src/app/views/notifications/notifications.component.scss b/apps/portal/src/app/views/notifications/notifications.component.scss
@@ -20,10 +20,16 @@ h2 {
   width: 100%;
 }
 
-.grid-dropdown {
+.grid-dropdown,
+.grid-input,
+.grid-button {
   margin-right: 1%;
 }
 
+.filter-row {
+  margin-bottom: 1%;
+}
+
 ::ng-deep .p-calendar .p-calendar-clear-icon {
   margin-right: 1.5rem;
   margin-top: 0;

diff --git a/apps/portal/src/app/views/notifications/notifications.component.ts b/apps/portal/src/app/views/notifications/notifications.component.ts
@@ -59,6 +59,8 @@ export class NotificationsComponent implements OnInit {
 
   selectedToDate = null;
 
+  searchValue = null;
+
   mapApplicationAndKeys = null;
 
   pageSizeOptions: number[] = [5, 10, 25, 50];
@@ -137,6 +139,10 @@ export class NotificationsComponent implements OnInit {
     this.maxDateFrom = new Date();
   }
 
+  onSearchClear() {
+    this.searchValue = null;
+  }
+
   setTokenForSelectedApplication() {
     if (this.allApplicationsList.length === 0) {
       return JSON.parse(localStorage.getItem('osmoXUserData'))?.token;
@@ -206,6 +212,14 @@ export class NotificationsComponent implements OnInit {
       });
     }
 
+    if (this.searchValue) {
+      variables.filters.push({
+        field: 'data',
+        operator: 'contains',
+        value: this.searchValue,
+      });
+    }
+
     // set the token based on selected application
     const tokenForSelectedApplication = this.setTokenForSelectedApplication();