fix(search-nodes): node now have filter based on category (#49)

src/app/graph/components/category/category.component.html

@@ -22,6 +22,15 @@
     }
   </div>
   <table mat-table [dataSource]="categoriesData">
+    <tr class="mat-row" *matNoDataRow>
+      <td
+        class="mat-cell"
+        [attr.colspan]="displayedColumns.length"
+        style="padding: 1rem"
+      >
+        No category Found!
+      </td>
+    </tr>
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef>id</th>
       <td mat-cell *matCellDef="let element">{{ element.id }}</td>

src/app/graph/components/data-analysis/search-nodes/search-nodes.component.html

@@ -22,6 +22,19 @@
     <mat-icon matSuffix>search</mat-icon>
   </mat-form-field>
 </form>
+<mat-form-field appearance="outline" class="category">
+  <mat-label>Category</mat-label>
+  <mat-select
+    [(ngModel)]="category"
+    name="category"
+    (ngModelChange)="categoryChanged()"
+  >
+    <mat-option value="">All categories</mat-option>
+    @for (category of allCategories; track category) {
+    <mat-option [value]="category.id">{{ category.name }}</mat-option>
+    }
+  </mat-select>
+</mat-form-field>
 <div class="accounts">
   @for (account of accounts; track $index) {
   <div class="account-data">
@@ -43,7 +56,7 @@
       </mat-icon>
     </div>
   </div>
-  }
+  }@empty { <p class="not-found">No nodes Found!</p> }
 </div>
 <mat-paginator
   class="paginator"

src/app/graph/components/data-analysis/search-nodes/search-nodes.component.scss

@@ -18,6 +18,10 @@
     }
   }
 
+  .category {
+    width: 100%;
+  }
+
   .accounts {
     display: flex;
     flex-direction: column;

src/app/graph/components/data-analysis/search-nodes/search-nodes.component.ts

@@ -8,6 +8,8 @@ import { DangerSuccessNotificationComponent } from '../../../../shared/component
 import { InfoDialogComponent } from '../info-dialog/info-dialog.component';
 import { Account } from '../../../model/graph';
 import { debounceTime, Observable, Subject } from 'rxjs';
+import { CategoryService } from '../../../services/category/category.service';
+import { AllCategories } from '../../../model/Category';
 
 @Component({
   selector: 'app-search-nodes',
@@ -22,15 +24,18 @@ export class SearchNodesComponent implements OnInit {
   accounts: Account[] = [];
   length!: number;
   pageIndex = 0;
+  allCategories: AllCategories[] = [];
 
   private searchText$ = new Subject<string>();
   nodeName$!: Observable<string>;
+  category = '';
 
   constructor(
     private _snackBar: MatSnackBar,
     private loadGraphService: LoadGraphService,
     private dialog: MatDialog,
-    private loadingService: LoadingService
+    private loadingService: LoadingService,
+    private categoryService: CategoryService
   ) {}
 
   ngOnInit(): void {
@@ -73,6 +78,21 @@ export class SearchNodesComponent implements OnInit {
         },
       });
     });
+
+    this.categoryService.getAllCategories().subscribe({
+      next: (data) => {
+        this.allCategories = data;
+        this.loadingService.setLoading(false);
+      },
+      error: (error) => {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
+          data: error.error.message,
+          panelClass: ['notification-class-danger'],
+          duration: 2000,
+        });
+        this.loadingService.setLoading(false);
+      },
+    });
   }
 
   searchNodes() {
@@ -113,4 +133,8 @@ export class SearchNodesComponent implements OnInit {
     this.length = e.length;
     this.loadGraphService.getAllNodes(e.pageIndex);
   }
+
+  categoryChanged() {
+    this.loadGraphService.getAllNodes(0, this.category);
+  }
 }

src/app/graph/model/Category.ts

@@ -9,3 +9,8 @@ export interface GetCategoriesResponse {
   pageIndex: number;
   totalCount: number;
 }
+
+export interface AllCategories {
+  id: number;
+  name: string;
+}

src/app/graph/services/category/category.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../../../../../api-config/api-url';
 import { Subject } from 'rxjs';
-import { GetCategoriesResponse } from '../../model/Category';
+import { AllCategories, GetCategoriesResponse } from '../../model/Category';
 import { LoadingService } from '../../../shared/services/loading.service';
 
 @Injectable({
@@ -66,4 +66,14 @@ export class CategoryService {
       withCredentials: true,
     });
   }
+
+  getAllCategories() {
+    this.loadingService.setLoading(true);
+    return this.httpClient.get<AllCategories[]>(
+      this.apiUrl + `/all-category-without-pagination`,
+      {
+        withCredentials: true,
+      }
+    );
+  }
 }

src/app/user/components/dashboard/assign-file/assign-file.component.html

@@ -1,6 +1,15 @@
 <app-dashboard-header [title]="'Assign Files'"></app-dashboard-header>
 <app-card>
   <table mat-table [dataSource]="filesData">
+    <tr class="mat-row" *matNoDataRow>
+      <td
+        class="mat-cell"
+        [attr.colspan]="displayedColumns.length"
+        style="padding: 1rem"
+      >
+        No file found!
+      </td>
+    </tr>
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef>Name</th>
       <td mat-cell *matCellDef="let element">{{ element.fileName }}</td>

src/app/user/components/dashboard/manage-users/manage-users.component.html

@@ -5,6 +5,15 @@
     <mat-icon>person_add</mat-icon>Add new user
   </button>
   <table mat-table [dataSource]="usersData">
+    <tr class="mat-row" *matNoDataRow>
+      <td
+        class="mat-cell"
+        [attr.colspan]="displayedColumns.length"
+        style="padding: 1rem"
+      >
+        No user found!
+      </td>
+    </tr>
     <ng-container matColumnDef="username">
       <th mat-header-cell *matHeaderCellDef>Username</th>
       <td mat-cell *matCellDef="let element">{{ element.userName }}</td>