feat(arc): gantt module added with demo component which includes demo of all sub component

gantt module added with demo component which includes demo of all sub component

GH-58

Author: Deepika516

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

@@ -87,7 +87,7 @@
   justify-content: space-between;
   align-items: center;
   height: 100%;
-  overflow: hidden;
+
 
   background: repeating-linear-gradient(
     305deg,

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

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
 import {AllocationBar, Item} from '../../model/item.model';
 
 @Component({
@@ -7,7 +7,7 @@ import {AllocationBar, Item} from '../../model/item.model';
   styleUrls: ['./gantt-bars.component.scss'],
 })
 export class GanttBarsComponent {
-  @Input() item: Item;
+  @Input() item: any;
   @Input() allocationTypes: any;
   @Input() allocationBase: number;
   showTooltip = -1;

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

@@ -1,4 +1,8 @@
-<div *ngFor="let item of items" class="employee-list-item">
+<div
+  *ngFor="let item of items"
+  (click)="onItemClick(item)"
+  class="employee-list-item"
+>
   <nb-icon
     *ngIf="item.hasChildren"
     [icon]="item.$open ? 'chevron-up' : 'chevron-down'"

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

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {empData} from '../../model/item.model';
 
 @Component({
@@ -18,4 +18,12 @@ export class GanttColumnComponent {
 
   @Input()
   showOverallocatedIcon: boolean;
+  // for testing
+
+  @Output() itemSelected = new EventEmitter<empData>();
+
+  onItemClick(item: empData): void {
+    this.itemSelected.emit(item);
+    console.log('hi tiny');
+  }
 }

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

@@ -5,18 +5,13 @@ <h2 class="project-title">{{ name }}</h2>
       <p>Description is enabled.</p>
     </div>
   </div>
-
-  <nb-card>
-    <nb-card-body>
-      <div class="search-wrapper" *ngIf="showSearch">
-        <input
-          nbInput
-          fieldSize="medium"
-          type="text"
-          status="basic"
-          [placeholder]="searchPlaceholder"
-        />
-      </div>
-    </nb-card-body>
-  </nb-card>
+  <div class="search-wrapper" *ngIf="showSearch">
+    <input
+      nbInput
+      fieldSize="medium"
+      type="text"
+      status="basic"
+      [placeholder]="searchPlaceholder"
+    />
+  </div>
 </div>

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

@@ -56,18 +56,22 @@
 .header-wrapper {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   width: calc(100vw - 1rem);
 }
 
 .project-title {
   font-size: x-large;
-  margin-bottom: -2px;
+  line-height: 1;
 }
 
 .desc-wrapper {
-  margin-top: -8px;
+  margin-top: 6px;
+  p{
+    margin:0;
+  }
 }
 
-.search-wrapper {
-  margin-top: 32px;
+.project-title{
+  margin:0;
 }

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

@@ -1,4 +1,4 @@
-<div class="w-100 p-3 mt-1 display-flex flex-direction-row">
+<div class="w-100 p-3 mt-1 display-flex flex-direction-row icon-wrapper">
   <nb-icon
     icon="chevron-left"
     class="gantt-scroll-icon cursor-pointer"

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

@@ -2,3 +2,10 @@
   height: 2rem;
   width: 2rem;
 }
+
+.icon-wrapper{
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        margin-top: -24px;
+}

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

@@ -14,7 +14,7 @@
   font-family: var(--font-family-primary);
   font-weight: map.get($font-weight, light);
   font-size: map.get($font-size, default);
-  width: 35rem;
+  width: 25rem;
   max-height: 25rem;
   overflow-y: auto;
 }
@@ -77,7 +77,7 @@ hr {
 
 .deal-name {
   text-decoration: underline;
-  width: 24rem !important;
+  width: 20rem !important;
   color: map.get($color, light) !important;
   font-weight: map.get($font-weight, bold);
   text-overflow: ellipsis;
@@ -87,7 +87,7 @@ hr {
 }
 .deal-key {
   display: flex;
-  gap: 20px;
+  gap: 15px;
   justify-content: end;
 }
 .status-circle {
@@ -96,6 +96,7 @@ hr {
   height: 10px;
   border-radius: 50%;
   margin-right: 10px;
+
   &.active {
     background-color: green;
   }

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

@@ -1,11 +1,17 @@
-<nb-layout>
-  <nb-layout-header fixed>
-    <div class="icon-wrapper">
-      <nb-icon class="icon" icon="fit_content" (click)="fitToScreen()">
-      </nb-icon>
-      <nb-icon class="icon" pack="eva" name="maximize-outline"></nb-icon>
-      <nb-icon class="icon" icon="star" (click)="zoomIn()"> </nb-icon>
-      <nb-icon class="icon" icon="heart-outline" (click)="zoomOut()"> </nb-icon>
-    </div>
-  </nb-layout-header>
-</nb-layout>
+<div class="icon-wrapper">
+  <nb-icon class="icon" icon="fit_content" (click)="fitToScreen()"> </nb-icon>
+  <nb-icon class="icon" pack="eva" name="maximize-outline"></nb-icon>
+  <nb-icon nbPrefix icon="move-outline" pack="eva" (click)="zoomIn()"></nb-icon>
+  <nb-icon
+    nbPrefix
+    icon="maximize-outline"
+    pack="eva"
+    (click)="zoomIn()"
+  ></nb-icon>
+  <nb-icon
+    nbPrefix
+    icon="minimize-outline"
+    pack="eva"
+    (click)="zoomOut()"
+  ></nb-icon>
+</div>