fix(data-analysis): search now works

* feat(profile): add profile header and image * fix(test): fix new tests * fix(profile): bind user info * fix(test): fix test * feat(test): add tests for manage-account * fix(profile): fix comments * fix(profile): connect to back and fix tests * fix(data-analysis): show node information in graph * fix(manage-user): fixed username , select role on edit by default * fix(test): fixed username Change to userName * fix(assign-file): modal chips are now fixed, loading is now working better, deleted some console.logs * fix(data-analysis): extract search component * fix(info-dialog): fixed styles * fix(data-analysis): search now works * fix(data-analysis): search now have search type * fix(test): fixed search nodes tests --------- Co-authored-by: Zahra Masoumi <[email protected]>
Star-Academy · Sep 8, 2024 · 8e62546 · 8e62546
1 parent 82a3585
commit 8e62546
Show file tree

Hide file tree

Showing 24 changed files with 362 additions and 207 deletions.
diff --git a/api-config/api-url.ts b/api-config/api-url.ts
@@ -1,4 +1,4 @@
 export const environment = {
-  apiUrl: 'https://localhost:44322',
-  // apiUrl: 'http://localhost:8085',
+  // apiUrl: 'https://localhost:44322',
+  apiUrl: 'http://localhost:8085',
 };
diff --git a/src/app/graph/components/add-graph/add-graph.component.ts b/src/app/graph/components/add-graph/add-graph.component.ts
@@ -39,9 +39,7 @@ export class AddGraphComponent {
     private _snackBar: MatSnackBar,
     private addGraphService: AddGraphService,
     private loadingService: LoadingService
-  ) {
-    this.loadingService.setLoading(false);
-  }
+  ) {}
 
   loadCategory() {
     this.addGraphService.getCategories().subscribe({

diff --git a/src/app/graph/components/category/category.component.ts b/src/app/graph/components/category/category.component.ts
@@ -130,7 +130,6 @@ export class CategoryComponent implements OnInit {
   }
 
   saveEditCategory(categoryData: CategoryData) {
-    console.log(categoryData);
     this.loadingService.setLoading(true);
     this.categoryService
       .updateCategory(categoryData.id, this.updateNameValue)

diff --git a/src/app/graph/components/data-analysis/data-analysis.component.html b/src/app/graph/components/data-analysis/data-analysis.component.html
@@ -31,47 +31,10 @@
     <div #menuTrigger [matMenuTriggerFor]="menu"></div>
   </app-card>
   <app-card class="side-bard" [@sidebar-fly]="state">
-    <form class="form">
-      <mat-form-field appearance="outline" class="search-field">
-        <mat-label>Search</mat-label>
-        <input matInput />
-        <mat-icon matSuffix>search</mat-icon>
-      </mat-form-field>
-    </form>
-    <div class="accounts">
-      @for (account of accounts; track $index) {
-      <div class="account-data">
-        {{ account.entityName }}
-        <div class="icons">
-          <button
-            class="material-symbols-outlined"
-            matTooltip="Show node as graph"
-            (click)="showAsGraph(account)"
-          >
-            network_node
-          </button>
-          <mat-icon
-            class="info-icon"
-            matTooltip="Show node information"
-            (click)="getInfo(account.id)"
-          >
-            info
-          </mat-icon>
-        </div>
-      </div>
-      }
-    </div>
-    <mat-paginator
-      class="paginator"
-      [length]="length"
-      [pageIndex]="pageIndex"
-      [pageSize]="10"
-      [hidePageSize]="true"
-      [showFirstLastButtons]="true"
-      aria-label="Select page"
-      (page)="handlePageEvent($event)"
-    >
-    </mat-paginator>
+    <app-search-nodes
+      class="search-component"
+      (showGraph)="showAsGraph($event)"
+    ></app-search-nodes>
   </app-card>
   <mat-menu #menu="matMenu" id="right-click-node-info">
     <button mat-menu-item (click)="getInfo()">Show node information</button>

diff --git a/src/app/graph/components/data-analysis/data-analysis.component.scss b/src/app/graph/components/data-analysis/data-analysis.component.scss
@@ -45,56 +45,13 @@
   }
 
   .side-bard {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
     position: absolute;
     width: 25rem;
-    height: 100%;
     right: 0;
+    height: 100%;
 
-    .form {
-      width: 100%;
-
-      .search-field {
-        width: 100%;
-      }
-    }
-
-    .accounts {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-      height: calc(100% - 4.5rem - 60px);
-      overflow-y: auto;
-      width: 100%;
-      padding-block: 0.1rem;
-
-      .account-data {
-        padding: 0.75rem 1.5rem;
-        border-radius: 10rem;
-        box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.1);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: 1rem;
-
-        .icons {
-          display: flex;
-          gap: 0.5rem;
-
-          .info-icon {
-            color: var(--mdc-filled-button-container-color);
-            cursor: pointer;
-          }
-
-          .material-symbols-outlined {
-            color: var(--mat-optgroup-label-text-color);
-            cursor: pointer;
-          }
-        }
-      }
+    .search-component {
+      height: 100%;
     }
   }
 }
diff --git a/src/app/graph/components/data-analysis/data-analysis.component.spec.ts b/src/app/graph/components/data-analysis/data-analysis.component.spec.ts
@@ -10,14 +10,17 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SharedModule } from '../../../shared/shared.module';
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { SearchNodesComponent } from './search-nodes/search-nodes.component';
+import { MatSelectModule } from '@angular/material/select';
+import { FormsModule } from '@angular/forms';
 
 describe('DataAnalysisComponent', () => {
   let component: DataAnalysisComponent;
   let fixture: ComponentFixture<DataAnalysisComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DataAnalysisComponent],
+      declarations: [DataAnalysisComponent, SearchNodesComponent],
       imports: [
         MatFormFieldModule,
         MatPaginatorModule,
@@ -26,6 +29,8 @@ describe('DataAnalysisComponent', () => {
         MatInputModule,
         BrowserAnimationsModule,
         SharedModule,
+        MatSelectModule,
+        FormsModule,
       ],
       providers: [provideHttpClient(), provideHttpClientTesting()],
     }).compileComponents();

diff --git a/src/app/graph/components/data-analysis/data-analysis.component.ts b/src/app/graph/components/data-analysis/data-analysis.component.ts
@@ -7,7 +7,6 @@ import {
 } from '@angular/core';
 import { Data, DataSet, Edge, Network, Node } from 'vis';
 import { LoadGraphService } from '../../services/load-graph/load-graph.service';
-import { PageEvent } from '@angular/material/paginator';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { ThemeService } from '../../../shared/services/theme.service';
 import { getOptions, getSvg } from './graph-options';
@@ -24,6 +23,7 @@ import { LoadingService } from '../../../shared/services/loading.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { DangerSuccessNotificationComponent } from '../../../shared/components/danger-success-notification/danger-success-notification.component';
 import { ColorPickerDialogComponent } from './color-picker-dialog/color-picker-dialog.component';
+import { Account } from '../../model/graph';
 
 @Component({
   selector: 'app-data-analysis',
@@ -50,10 +50,6 @@ export class DataAnalysisComponent implements AfterViewInit {
   private networkInstance!: Network;
   public state = 'startRound';
 
-  search = '';
-  accounts: { id: number; entityName: string }[] = [];
-  length!: number;
-  pageIndex = 0;
   isDarkMode!: boolean;
   nodeColor!: string;
   selectedNodeColor!: string;
@@ -72,37 +68,13 @@ export class DataAnalysisComponent implements AfterViewInit {
     private loadingService: LoadingService
   ) {}
 
-  handlePageEvent(e: PageEvent) {
-    this.pageIndex = e.pageIndex;
-    this.length = e.length;
-    this.loadGraphService.getAllNodes(e.pageIndex);
-  }
-
   ngAfterViewInit() {
     this.createGraph();
     this.themeService.theme$.subscribe((theme) => {
       this.isDarkMode = theme == 'dark';
       this.nodeColor = this.isDarkMode ? '#b5c4ff' : 'rgb(27, 89, 248)';
       this.selectedNodeColor = this.isDarkMode ? 'rgb(27, 89, 248)' : '#b5c4ff';
     });
-    this.loadGraphService.nodesData$.subscribe({
-      next: (data) => {
-        this.accounts = data.items;
-        this.length = data.totalItems;
-        this.pageIndex = data.pageIndex;
-        this.loadingService.setLoading(false);
-      },
-      error: (error) => {
-        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
-          data: error.error.message,
-          panelClass: ['notification-class-danger'],
-          duration: 2000,
-        });
-        this.loadingService.setLoading(false);
-      },
-    });
-    this.loadGraphService.getAllNodes();
-    this.loadingService.setLoading(false);
   }
 
   private createGraph() {
@@ -208,13 +180,10 @@ export class DataAnalysisComponent implements AfterViewInit {
     console.log('edge click: ', edgeId);
   }
 
-  getInfo(account?: number) {
-    // todo: fix this
-    if (!account) {
-      account = (
-        document.getElementById('right-click-node-info') as HTMLElement
-      ).dataset['nodeid'] as unknown as number;
-    }
+  getInfo() {
+    const account = (
+      document.getElementById('right-click-node-info') as HTMLElement
+    ).dataset['nodeid'] as unknown as number;
 
     this.loadGraphService.getNodeInfo(account).subscribe({
       next: (data) => {
@@ -235,7 +204,7 @@ export class DataAnalysisComponent implements AfterViewInit {
     });
   }
 
-  showAsGraph(account: { id: number; entityName: string }) {
+  showAsGraph(account: Account) {
     this.nodes.add({ id: account.id, label: account.entityName });
   }
 

diff --git a/src/app/graph/components/data-analysis/info-dialog/info-dialog.component.ts b/src/app/graph/components/data-analysis/info-dialog/info-dialog.component.ts
@@ -7,17 +7,14 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
     <hr />
     <mat-dialog-content class="info">
       @for (key of objectKeys(data); track $index) {
-        <div class="info-row">
-          <p class="info-header">{{ key }}</p>
-          <p>{{ data[key] }}</p>
-        </div>
+      <div class="info-row">
+        <p class="info-header">{{ key }}</p>
+        <p class="info-content">{{ data[key] }}</p>
+      </div>
       }
     </mat-dialog-content>
-    <mat-dialog-actions align="end">
+    <mat-dialog-actions>
       <button mat-button mat-dialog-close>Close</button>
-      <button mat-button [mat-dialog-close]="true" cdkFocusInitial>
-        Show As Graph
-      </button>
     </mat-dialog-actions>`,
   styles: [
     `
@@ -34,6 +31,10 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
           width: 40%;
           font-weight: 600;
         }
+
+        .info-content {
+          width: 60%;
+        }
       }
 
       .title {

diff --git a/src/app/graph/components/data-analysis/search-nodes/search-nodes.component.html b/src/app/graph/components/data-analysis/search-nodes/search-nodes.component.html
@@ -0,0 +1,58 @@
+<form class="form">
+  <mat-form-field appearance="outline" class="search-type">
+    <mat-label>Search type</mat-label>
+    <mat-select
+      [(ngModel)]="searchType"
+      name="searchType"
+      (ngModelChange)="searchNodes()"
+    >
+      <mat-option value="startswith">Start With</mat-option>
+      <mat-option value="endswith">End With</mat-option>
+      <mat-option value="contain">Contain</mat-option>
+    </mat-select>
+  </mat-form-field>
+  <mat-form-field appearance="outline" class="search-field">
+    <mat-label>Search</mat-label>
+    <input
+      name="searchInput"
+      matInput
+      [(ngModel)]="searchInput"
+      (ngModelChange)="searchNodes()"
+    />
+    <mat-icon matSuffix>search</mat-icon>
+  </mat-form-field>
+</form>
+<div class="accounts">
+  @for (account of accounts; track $index) {
+  <div class="account-data">
+    {{ account.entityName }}
+    <div class="icons">
+      <button
+        class="material-symbols-outlined"
+        matTooltip="Show node as graph"
+        (click)="showAsGraph(account)"
+      >
+        network_node
+      </button>
+      <mat-icon
+        class="info-icon"
+        matTooltip="Show node information"
+        (click)="getInfo(account.id)"
+      >
+        info
+      </mat-icon>
+    </div>
+  </div>
+  }
+</div>
+<mat-paginator
+  class="paginator"
+  [length]="length"
+  [pageIndex]="pageIndex"
+  [pageSize]="10"
+  [hidePageSize]="true"
+  [showFirstLastButtons]="true"
+  aria-label="Select page"
+  (page)="handlePageEvent($event)"
+>
+</mat-paginator>