fix(arc-lib): change in design

change in design

GH-58

Author: Deepika516

projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.html

@@ -16,6 +16,8 @@
       class="bar actual-bar"
       [class.with-suballocations]="hasSubAllocation(item)"
       [class.closed-won]="item.payload?.['dealStage'] === 'closedwon'"
+      [attr.gantt-tooltip-data]="'abc'"
+      gantt-hover="tooltip"
       [ngClass]="item.classes ?? []"
       data-gantt-click="bar"
     >
@@ -32,7 +34,9 @@
         {{ formatter(item.payload?.['billingRate']) }}
       </div>
       <div *ngIf="hasSubAllocation(item)" class="bar-container">
-        <ng-container *ngFor="let allocationBar of item.subAllocations">
+        <ng-container
+          *ngFor="let allocationBar of item.subAllocations; let i = index"
+        >
           <div
             class="suballocation-bars"
             [attr.gantt-bar-data]="stringify(allocationBar)"
@@ -41,7 +45,15 @@
             [ngStyle]="{width: allocationBar.percent + '%'}"
             [class.empty]="!allocationBar.allocation"
             [class.over-allocated]="allocationBar.allocation > allocationBase"
+            (mouseover)="showTooltip = i"
+            (mouseout)="showTooltip = -1"
           >
+            <div class="showTooltip-wrapper">
+              <arc-gantt-tooltip
+                *ngIf="i == showTooltip"
+                [itemData]="allocationBar"
+              ></arc-gantt-tooltip>
+            </div>
             <div class="actual-hours">
               {{
                 formatAllocation(

projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.scss

@@ -12,12 +12,22 @@
   margin-right: 0.75rem;
 }
 
+.bar {
+  position: relative;
+  .showTooltip-wrapper {
+    position: absolute;
+    top: 2rem;
+  }
+}
+
 .bar-container {
   display: flex;
   flex-grow: 1;
   background: white;
 }
-
+.showTooltip-wrapper {
+  position: absolute;
+}
 .bar {
   font-family: var(--font-family-primary);
   font-weight: map.get($font-weight, bold);

projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.ts

@@ -10,6 +10,7 @@ export class GanttBarsComponent {
   @Input() item: Item;
   @Input() allocationTypes: any;
   @Input() allocationBase: number;
+  showTooltip = -1;
 
   formatAllocation(value: number): string {
     return `${value} hours`;

projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.html

@@ -1,11 +1,16 @@
 <div class="header-wrapper">
-  <h2 class="project-title">{{ name }}</h2>
+  <div class="title-wrapper">
+    <h2 class="project-title">{{ name }}</h2>
+    <div class="desc-wrapper" *ngIf="desc">
+      <p>Description is enabled.</p>
+    </div>
+  </div>
+
   <nb-card>
     <nb-card-body>
       <div class="search-wrapper" *ngIf="showSearch">
         <input
           nbInput
-          fullWidth
           fieldSize="medium"
           type="text"
           status="basic"
@@ -14,8 +19,4 @@ <h2 class="project-title">{{ name }}</h2>
       </div>
     </nb-card-body>
   </nb-card>
-
-  <div *ngIf="desc">
-    <p>Description is enabled.</p>
-  </div>
 </div>

projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.scss

@@ -51,15 +51,23 @@
   nb-form-field nb-icon {
     color: map.get($color, icon);
   }
-
-
 }
+
 .header-wrapper {
   display: flex;
-  align-items: center;
-  gap: 20px;
+  justify-content: space-between;
+  width: calc(100vw - 1rem);
 }
 
-.project-title{
+.project-title {
   font-size: x-large;
-}
+  margin-bottom: -2px;
+}
+
+.desc-wrapper {
+  margin-top: -8px;
+}
+
+.search-wrapper {
+  margin-top: 32px;
+}

projects/arc/src/app/app.module.ts

@@ -38,7 +38,6 @@ import {GanttDemoComponent} from './components/gantt-demo/gantt-demo.component';
     ThemeModule.forRoot('default'),
     OverlayModule,
     SelectModule,
-
     GanttModule,
     BrowserAnimationsModule,
     HeaderComponent,
@@ -52,7 +51,6 @@ import {GanttDemoComponent} from './components/gantt-demo/gantt-demo.component';
     SystemStoreFacadeService,
     EnvAdapterService,
     ApiService,
-    GanttService,
     {
       provide: APP_CONFIG,
       useValue: environment,

projects/arc/src/app/components/gantt-demo/gantt-demo.component.html

@@ -22,17 +22,18 @@
     </div>
   </nb-sidebar>
   <nb-layout-column>
-    <nb-card>
-      <nb-card-header> </nb-card-header>
+    <nb-card class="bar-wrapper">
       <nb-card-body>
         <arc-gantt-bars
           [item]="item"
           [allocationTypes]="allocationTypes"
           [allocationBase]="allocationBase"
+          showTooltip="true"
         ></arc-gantt-bars>
       </nb-card-body>
     </nb-card>
   </nb-layout-column>
-
-  <arc-gantt-tooltip [item]="selectedItem"></arc-gantt-tooltip>
 </nb-layout>
+
+<arc-gantt-tooltip [itemData]="itemData" [allocationMap]="allocationMap">
+</arc-gantt-tooltip>

projects/arc/src/app/components/gantt-demo/gantt-demo.component.scss

@@ -0,0 +1,3 @@
+.bar-wrapper {
+  height: calc(100% - 1rem);
+}

projects/arc/src/app/components/gantt-demo/gantt-demo.component.spec.ts

@@ -1,16 +1,15 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { GanttDemoComponent } from './gantt-demo.component';
+import {GanttDemoComponent} from './gantt-demo.component';
 
 describe('GanttDemoComponent', () => {
   let component: GanttDemoComponent;
   let fixture: ComponentFixture<GanttDemoComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ GanttDemoComponent ]
-    })
-    .compileComponents();
+      declarations: [GanttDemoComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(GanttDemoComponent);
     component = fixture.componentInstance;