fix(graph): fix toolbar (#55)

src/app/components/bread-crump/bread-crump.component.spec.ts

@@ -15,9 +15,8 @@ describe('BreadCrumpComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [BreadCrumpComponent],
-      providers: [ { provide: ActivatedRoute, useValue: mockActivatedRoute },]
-    })
-    .compileComponents();
+      providers: [{ provide: ActivatedRoute, useValue: mockActivatedRoute }],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(BreadCrumpComponent);
     component = fixture.componentInstance;

src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.html

@@ -1,26 +1,24 @@
 <div nz-flex [nzVertical]="true" class="toolbar-container">
-
-  <button nzType="default" title="Negar" type="button" class="toolbar-container__logo">
-    <span nz-icon nzType="node-index" nzTheme="outline"></span>
+  <button nzType="default" title="Negar" type="button" class="toolbar-container__logo" routerLink="/dashboard">
+    <img class="sidebar-logo__title-container__title__logo__img" src="/logo.svg" alt="logo" />
   </button>
 
   <br />
 
   <div nz-flex [nzVertical]="true" class="toolbar-container__btn-container">
-
-      <button
-        nzPopoverTrigger="click"
-        nz-popover
-        nzPopoverTitle="Upload"
-        [nzPopoverContent]="upload"
-        nzPopoverPlacement="right"
-        type="button"
-        class="toolbar-container__btn"
-        [ngClass]="{ active: activeButton === 0 }"
-        (click)="setActiveButton(0)"
-      >
-        <span nz-icon nzType="import" nzTheme="outline"></span>
-      </button>
+    <button
+      nzPopoverTrigger="click"
+      nz-popover
+      nzPopoverTitle="Upload"
+      [nzPopoverContent]="upload"
+      nzPopoverPlacement="right"
+      type="button"
+      class="toolbar-container__btn"
+      [ngClass]="{ active: activeButton === 0 }"
+      (click)="setActiveButton(0)"
+    >
+      <span nz-icon nzType="import" nzTheme="outline"></span>
+    </button>
 
     <button
       nzPopoverTrigger="click"
@@ -51,18 +49,17 @@
     >
       <span nz-icon nzType="setting" nzTheme="outline"></span>
     </button>
-
   </div>
 
   <div class="grow-div"></div>
 
   <div nz-flex [nzVertical]="true" class="toolbar-container__btn-container">
-
     <button nz-tooltip nzTooltipTitle="Github repo" title="info" type="button" class="toolbar-container__btn">
       <a
         href="https://github.com/Star-Academy/Summer1403-Project-Group04-Frontend"
         target="_blank"
         rel="noopener noreferrer"
+        class="toolbar-container__btn__github"
         ><span nz-icon nzType="github" nzTheme="outline"></span>
       </a>
     </button>
@@ -72,11 +69,10 @@
       type="button"
       class="toolbar-container__btn"
       [ngClass]="{ active: activeButton === 3 }"
-      (click)="setActiveButton(3)"
+      routerLink="/dashboard/profile"
     >
       <span nz-icon nzType="user" nzTheme="outline"></span>
     </button>
-
   </div>
 </div>
 

src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.scss

@@ -16,15 +16,16 @@
   &__logo{
     border: none;
     outline: none;
-    border-radius: .375rem 0 0 .375rem;
     padding-block: 1rem;
     background: none;
     display: flex;
     justify-content: center;
     position: relative;
-    font-size: 3.25rem;
     cursor: pointer;
-    color: #1f66a8;
+
+    img {
+      width: 3rem;
+    }
   }
 
   &__btn{
@@ -38,7 +39,11 @@
     font-size: 2.25rem; 
     cursor: pointer;
     position: relative;
-    transition: all 1sec linear ;
+    transition: all 0.2s ease;
+
+    &__github{
+      color: #1f66a8;
+    }
   }
 }
 

src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.spec.ts

@@ -11,16 +11,22 @@ import {
   SyncOutline,
   UserOutline,
   FullscreenOutline,
-  FilterOutline ,
-  SettingOutline ,
-  GithubOutline 
+  FilterOutline,
+  SettingOutline,
+  GithubOutline,
 } from '@ant-design/icons-angular/icons';
-
+import { of } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
 
 describe('GraphToolBarComponent', () => {
   let component: GraphToolBarComponent;
   let fixture: ComponentFixture<GraphToolBarComponent>;
 
+  const mockActivatedRoute = {
+    params: of({ id: 1 }),
+    snapshot: { params: { id: 1 } },
+  };
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [GraphToolBarComponent],
@@ -37,14 +43,14 @@ describe('GraphToolBarComponent', () => {
             SyncOutline,
             UserOutline,
             FullscreenOutline,
-            FilterOutline ,
-            SettingOutline ,
-            GithubOutline 
+            FilterOutline,
+            SettingOutline,
+            GithubOutline,
           ],
         },
+        { provide: ActivatedRoute, useValue: mockActivatedRoute },
       ],
-    })
-    .compileComponents();
+    }).compileComponents();
 
     fixture = TestBed.createComponent(GraphToolBarComponent);
     component = fixture.componentInstance;

src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.ts

@@ -7,13 +7,25 @@ import { NzFlexModule } from 'ng-zorro-antd/flex';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzPopoverModule } from 'ng-zorro-antd/popover';
 import { LayoutsComponent } from '../toolbar-components/layouts/layouts.component';
-import { UploadComponentsComponent } from "../toolbar-components/upload-component/upload-layout/upload-components.component";
+import { UploadComponentsComponent } from '../toolbar-components/upload-component/upload-layout/upload-components.component';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-graph-tool-bar',
   standalone: true,
-  imports: [NzIconModule, NgClass, NzToolTipModule, NzFlexModule, NzButtonModule, NzPopoverModule, LayoutsComponent, UploadComponentsComponent , NzSwitchModule],
+  imports: [
+    RouterLink,
+    NzIconModule,
+    NgClass,
+    NzToolTipModule,
+    NzFlexModule,
+    NzButtonModule,
+    NzPopoverModule,
+    LayoutsComponent,
+    UploadComponentsComponent,
+    NzSwitchModule,
+  ],
   providers: [],
   templateUrl: './graph-tool-bar.component.html',
   styleUrl: './graph-tool-bar.component.scss',

src/app/components/manage-users-components/users-table/users-table.component.ts

@@ -93,7 +93,7 @@ export class UsersTableComponent implements OnInit {
 
   protected deleteUser(user: UserData): void {
     this.userService.deleteUser(user.id).subscribe({
-      next: (response) => {
+      next: () => {
         this.notification.createNotification('success', 'User deleted', `User ${user.username} has been deleted`);
         this.loadDataFromServer(0, 10);
       },

src/app/components/sidebar/sidebar.component.html

@@ -31,6 +31,8 @@ <h1 class="sidebar-logo__title-container__title__text">Negar</h1>
           class="sidebar-logo__profile-container__name__icon"
           src="/logout.svg"
           alt="logout"
+          tabindex="0"
+          role="button"
           (click)="logout()"
           (keydown.enter)="logout()"
           (keydown.space)="logout()"

src/app/page/graph/graph/graph.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { GraphComponent } from './graph.component';
 import { NZ_ICONS, NzIconService } from 'ng-zorro-antd/icon';
+
 import {
   ProjectOutline,
   NodeIndexOutline,
@@ -16,11 +16,18 @@ import {
   SettingOutline,
   GithubOutline,
 } from '@ant-design/icons-angular/icons';
+import { of } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
 
 describe('GraphComponent', () => {
   let component: GraphComponent;
   let fixture: ComponentFixture<GraphComponent>;
 
+  const mockActivatedRoute = {
+    params: of({ id: 1 }),
+    snapshot: { params: { id: 1 } },
+  };
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [GraphComponent],
@@ -43,6 +50,7 @@ describe('GraphComponent', () => {
             GithubOutline,
           ],
         },
+        { provide: ActivatedRoute, useValue: mockActivatedRoute },
       ],
     }).compileComponents();