refactor(graph): Move graph to dashboard :) (#62)

Star-Academy · Aug 27, 2024 · f1d4177 · f1d4177
1 parent ad41ba5
commit f1d4177
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 60 deletions.
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -15,7 +15,7 @@ export const routes: Routes = [
     path: 'dashboard',
     component: DashboardComponent,
     children: [
-      {path: '' , component: DashboardContentComponent},
+      { path: '', component: DashboardContentComponent },
       {
         path: 'profile',
         component: ProfileComponent,
@@ -34,8 +34,8 @@ export const routes: Routes = [
         component: EditUserComponent,
         canActivate: [ManageUsersGuardService],
       },
+      { path: 'graph', component: GraphComponent },
     ],
     canActivate: [DashboardGuardService],
   },
-  { path: 'graph', component: GraphComponent },
 ];
diff --git a/src/app/components/graph-components/sigma/sigma/sigma.component.html b/src/app/components/graph-components/sigma/sigma/sigma.component.html
@@ -28,6 +28,6 @@
       <span nz-icon nzType="zoom-out" nzTheme="outline"></span>
     </button>
   </div>
-
+<app-graph-tool-bar></app-graph-tool-bar>
   <div id="sigma-container"></div>
 </div>
diff --git a/src/app/components/graph-components/sigma/sigma/sigma.component.scss b/src/app/components/graph-components/sigma/sigma/sigma.component.scss
@@ -1,7 +1,7 @@
 #sigma-container {
   flex-grow: 1;
   width: calc(100vw - 35rem - 6.4rem);
-  height: 100vh;
+  height: 100%;
   background-color: #f8f6f4;
 }
 

diff --git a/src/app/components/graph-components/sigma/sigma/sigma.component.spec.ts b/src/app/components/graph-components/sigma/sigma/sigma.component.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SigmaComponent } from './sigma.component';
 import { NZ_ICONS, NzIconService } from 'ng-zorro-antd/icon';
-import { FullscreenOutline } from '@ant-design/icons-angular/icons';
+import { CloudDownloadOutline, FilterOutline, FullscreenOutline, ImportOutline, SettingOutline } from '@ant-design/icons-angular/icons';
 
 describe('SigmaComponent', () => {
   let component: SigmaComponent;
@@ -15,7 +15,7 @@ describe('SigmaComponent', () => {
         NzIconService,
         {
           provide: NZ_ICONS,
-          useValue: [FullscreenOutline],
+          useValue: [FullscreenOutline,ImportOutline , FilterOutline , SettingOutline,CloudDownloadOutline],
         },
       ],
     }).compileComponents();

diff --git a/src/app/components/graph-components/sigma/sigma/sigma.component.ts b/src/app/components/graph-components/sigma/sigma/sigma.component.ts
@@ -13,13 +13,14 @@ import { EdgeArrowProgram } from 'sigma/rendering';
 import { EdgeCurvedArrowProgram } from '@sigma/edge-curve';
 import { MockBackService } from '../../../../services/mock-back/mock-back.service';
 import { State } from '../../../../models/graph-state';
+import { GraphToolBarComponent } from "../../toolbarl/graph-tool-bar/graph-tool-bar.component";
 
 // ********** This component can be a bit confusing so I have to use comments to ease the understanding (Sorry if the comments are a bit informal ^.^) **********
 
 @Component({
   selector: 'app-sigma',
   standalone: true,
-  imports: [NzIconModule, NzToolTipModule],
+  imports: [NzIconModule, NzToolTipModule, GraphToolBarComponent],
   templateUrl: './sigma.component.html',
   styleUrl: './sigma.component.scss',
 })

diff --git a/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.html b/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.html
@@ -1,17 +1,13 @@
-<div nz-flex [nzVertical]="true" class="toolbar-container">
-  <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">
+<div nz-flex class="toolbar-container">
+  <div nz-flex class="toolbar-container__btn-container">
     <button
       nzPopoverTrigger="click"
       nz-popover
+      nz-tooltip
+      nzTooltipTitle="Upload"  
       nzPopoverTitle="Upload"
       [nzPopoverContent]="upload"
-      nzPopoverPlacement="right"
+      nzPopoverPlacement="bottom"
       type="button"
       class="toolbar-container__btn"
       [ngClass]="{ active: activeButton === 0 }"
@@ -23,23 +19,27 @@
     <button
       nzPopoverTrigger="click"
       nz-popover
+      nz-tooltip
+      nzTooltipTitle="Get Graph"  
       nzPopoverTitle="Download"
       [nzPopoverContent]="download"
-      nzPopoverPlacement="right"
+      nzPopoverPlacement="bottom"
       type="button"
       class="toolbar-container__btn"
       [ngClass]="{ active: activeButton === 1 }"
       (click)="setActiveButton(1)"
     >
-    <span nz-icon nzType="cloud-download" nzTheme="outline"></span>
+      <span nz-icon nzType="cloud-download" nzTheme="outline"></span>
     </button>
 
     <button
       nzPopoverTrigger="click"
       nz-popover
+      nz-tooltip
+      nzTooltipTitle="Layouts"  
       nzPopoverTitle="Layouts"
       [nzPopoverContent]="layouts"
-      nzPopoverPlacement="right"
+      nzPopoverPlacement="bottom"
       nzTitle="Layouts"
       type="button"
       class="toolbar-container__btn"
@@ -52,9 +52,11 @@
     <button
       nzPopoverTrigger="click"
       nz-popover
+      nz-tooltip
+      nzTooltipTitle="Settings"  
       nzPopoverTitle="Settings"
       [nzPopoverContent]="Options"
-      nzPopoverPlacement="right"
+      nzPopoverPlacement="bottom"
       nzTitle="Layouts"
       type="button"
       class="toolbar-container__btn"
@@ -64,30 +66,6 @@
       <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>
-
-    <button
-      title="user"
-      type="button"
-      class="toolbar-container__btn"
-      [ngClass]="{ active: activeButton === 4}"
-      routerLink="/dashboard/profile"
-    >
-      <span nz-icon nzType="user" nzTheme="outline"></span>
-  </button>
-  </div>
 </div>
 
 <ng-template #layouts>
@@ -110,9 +88,8 @@
   </div>
 </ng-template>
 
-
 <ng-template #download>
   <div>
-    <app-get-graph></app-get-graph> 
+    <app-get-graph></app-get-graph>
   </div>
-</ng-template>
+</ng-template>
diff --git a/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.scss b/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.scss
@@ -1,16 +1,19 @@
 .toolbar-container {
-  inline-size: 6.4rem;
-  height: 100vh;
+  width: 100%;
+  justify-content: center;
   overflow-x: hidden;
-  background: #fff;
   padding-right: 0;
   padding-left: 0;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   padding-block-end: 0.25rem; 
-
+  position: absolute;
+z-index: 999999999999999999999999;
   &__btn-container{
     gap: 2rem !important;
+    padding-inline: 1rem;
+    background-color: #fff;
+    border-radius: 2rem;
   }
 
   &__logo{
@@ -50,6 +53,7 @@
 .active{
     background-color: #1f66a8;
     color: #fff;
+    border-radius: 50%;
 }
 
 ::ng-deep {

diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html
@@ -74,7 +74,7 @@ <h1 class="sidebar-logo__title-container__title__text">Negar</h1>
       nzOpen
       nzTitle="Graph"
       nzIcon="team"
-      routerLink="/graph"
+      routerLink="/dashboard/graph"
       routerLinkActive="ant-menu-item-selected"
       [routerLinkActiveOptions]="{ exact: true }"
     >

diff --git a/src/app/page/dashboard/dashboard.component.scss b/src/app/page/dashboard/dashboard.component.scss
@@ -20,7 +20,7 @@
 
 nz-content {
   padding-block: 2.4rem;
-  inline-size: 125rem;
+  // inline-size: 125rem;
   display: flex;
   flex-direction: column;
   gap: 4rem;
@@ -30,6 +30,6 @@ nz-content {
   } 
 }
 
-.app-layout__content {
-  padding-inline: 5rem;
-}
+// .app-layout__content {
+//   // padding-inline: 5rem;
+// }
diff --git a/src/app/page/graph/graph/graph.component.html b/src/app/page/graph/graph/graph.component.html
@@ -1,6 +1,6 @@
 <div class="graph-page-container">
-  <app-graph-tool-bar></app-graph-tool-bar>
+  <!-- <app-graph-tool-bar></app-graph-tool-bar> -->
 
  <app-sigma></app-sigma>
-  <app-right-panel></app-right-panel>
+  <!-- <app-right-panel></app-right-panel> -->
 </div>
diff --git a/src/app/page/graph/graph/graph.component.scss b/src/app/page/graph/graph/graph.component.scss
@@ -1,6 +1,6 @@
 .graph-page-container {
   width: 100%;
-  height: 100vh;
+  height: 100%;
   display: flex;
   flex-direction: row;