feat(arc-lib): created component zoombar and scrollbar

created component zoombar and scrollbar

GH-58

Author: Deepika516

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

@@ -0,0 +1,12 @@
+<div class="w-100 p-3 mt-1 display-flex flex-direction-row">
+  <nb-icon
+    icon="chevron-left"
+    class="gantt-scroll-icon cursor-pointer"
+    (click)="scrollBack()"
+  ></nb-icon>
+  <nb-icon
+    icon="chevron-right"
+    class="gantt-scroll-icon cursor-pointer"
+    (click)="scrollForward()"
+  ></nb-icon>
+</div>

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

@@ -0,0 +1,4 @@
+.gantt-scroll-icon {
+  height: 2rem;
+  width: 2rem;
+}

projects/arc-lib/src/lib/components/gantt/components/gantt-scroll/gantt-scroll.component.spec.ts

@@ -0,0 +1,22 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {GanttScrollComponent} from './gantt-scroll.component';
+
+describe('GanttScrollComponent', () => {
+  let component: GanttScrollComponent;
+  let fixture: ComponentFixture<GanttScrollComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [GanttScrollComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GanttScrollComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,28 @@
+import {Component, Inject} from '@angular/core';
+import {AnyObject} from '@project-lib/core/api';
+import {GANTT_SCALES} from '../../const';
+import {GanttService} from '../../services';
+import {GanttScaleService} from '../../types';
+
+@Component({
+  selector: 'arc-gantt-scroll',
+  templateUrl: './gantt-scroll.component.html',
+  styleUrls: ['./gantt-scroll.component.scss'],
+})
+export class GanttScrollComponent<T extends AnyObject> {
+  constructor(
+    private ganttService: GanttService<T>,
+    @Inject(GANTT_SCALES)
+    private readonly scales: GanttScaleService<T>[],
+  ) {}
+  scrollBack() {
+    const selectedScale = this.ganttService.selectedScale;
+    const scale = this.scales.find(s => s.scale === selectedScale);
+    scale?.scroll(false, this.ganttService);
+  }
+  scrollForward() {
+    const selectedScale = this.ganttService.selectedScale;
+    const scale = this.scales.find(s => s.scale === selectedScale);
+    scale?.scroll(true, this.ganttService);
+  }
+}

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

@@ -0,0 +1,11 @@
+<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>

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

@@ -0,0 +1,8 @@
+.icon-wrapper {
+  display: flex;
+  gap: 16px;
+}
+
+.icon {
+  cursor: pointer;
+}

projects/arc-lib/src/lib/components/gantt/components/gantt-zoombar/gantt-zoombar.component.spec.ts

@@ -0,0 +1,42 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {GanttZoomBarComponent} from './gantt-zoombar.component';
+import {AnyObject} from '@project-lib/core/api';
+import {CoreModule} from '@project-lib/core/core.module';
+import {LocalizationModule} from '@project-lib/core/localization';
+import {IconPacksManagerService} from '@project-lib/theme/services';
+import {ThemeModule} from '@project-lib/theme/theme.module';
+import {GanttProviders, GANTT_SCALES} from '../../const';
+
+describe('GanttZoomBarComponent', () => {
+  let component: GanttZoomBarComponent<AnyObject>;
+  let fixture: ComponentFixture<GanttZoomBarComponent<AnyObject>>;
+  let service: IconPacksManagerService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [GanttZoomBarComponent],
+      providers: [
+        GanttProviders,
+        {
+          provide: GANTT_SCALES,
+          useValue: [],
+        },
+      ],
+      imports: [ThemeModule.forRoot('arc'), LocalizationModule, CoreModule],
+    }).compileComponents();
+    service = TestBed.inject(IconPacksManagerService);
+    service.registerFontAwesome();
+    service.registerSvgs();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GanttZoomBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,34 @@
+import {Component} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+import {TranslationService} from '@project-lib/core/localization';
+import {GanttService} from '../../services';
+import {AnyObject} from '@project-lib/core/api';
+import {TimelineArray} from '../../types';
+
+@Component({
+  selector: 'arc-gantt-zoombar',
+  templateUrl: './gantt-zoombar.component.html',
+  styleUrls: ['./gantt-zoombar.component.scss'],
+})
+export class GanttZoomBarComponent<T extends AnyObject> {
+  translate: TranslateService;
+  constructor(
+    private ganttService: GanttService<T>,
+    private readonly translationService: TranslationService,
+  ) {
+    this.translate = this.translationService.translate;
+    console.log(TimelineArray);
+  }
+
+  zoomIn() {
+    this.ganttService.zoomIn();
+  }
+
+  zoomOut() {
+    this.ganttService.zoomOut();
+  }
+
+  fitToScreen() {
+    this.ganttService.fitToScreen();
+  }
+}

projects/arc-lib/src/lib/components/gantt/enum.ts

@@ -1,11 +1,14 @@
-export enum GanttEventTypes {
+export enum GanttEventValues {
   Kebab = 'kebab',
   Expand = 'expand',
   Name = 'name',
   Sort = 'sort',
+  SubAllocation = 'sub-allocation',
   Bar = 'bar',
   Tooltip = 'tooltip',
   Unknown = 'unknown',
+  OpenedTooltip = 'opened-tooltip',
+  ExpandBar = 'expand-bar',
 }
 
 export enum GanttScaleUnits {
@@ -15,3 +18,8 @@ export enum GanttScaleUnits {
   Year = 'year',
   Quarter = 'quarter',
 }
+
+export enum GanttEventTypes {
+  Click = 'click',
+  Hover = 'hover',
+}

projects/arc-lib/src/lib/components/gantt/gantt.module.ts

@@ -2,19 +2,13 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
 import {ThemeModule} from '@project-lib/theme/theme.module';
-import {GANTT, GANTT_SCALES} from './const';
+import {GANTT, GANTT_SCALES, GanttProviders} from './const';
 import {MonthlyScaleService} from './services/timeline-scales/monthly-scale.service';
 import {QuarterlyScaleService} from './services/timeline-scales/quarterly-scale.service';
 import {WeeklyScaleService} from './services/timeline-scales/weekly-scale.service';
 import {GanttRoutingModule} from './gantt-routing.module';
-import {GanttService} from './services';
 import {gantt} from 'dhtmlx-gantt';
-import {
-  CustomGanttAdapter,
-  GanttAdapter,
-  GanttLib,
-  GanttScaleService,
-} from './types';
+import {CustomGanttAdapter, GanttAdapter} from './types';
 
 import {
   GanttBarsComponent,
@@ -23,23 +17,31 @@ import {
   GanttTooltipComponent,
 } from './components';
 import {NbInputModule} from '@nebular/theme/components/input/input.module';
+import {GanttZoomBarComponent} from './components/gantt-zoombar/gantt-zoombar.component';
+import {GanttScrollComponent} from './components/gantt-scroll/gantt-scroll.component';
+import {DateOperationService} from './services/date-operation.service';
 
 @NgModule({
   declarations: [
     GanttBarsComponent,
     GanttColumnComponent,
     GanttHeaderComponent,
     GanttTooltipComponent,
+    GanttZoomBarComponent,
+    GanttScrollComponent,
   ],
   imports: [CommonModule, ReactiveFormsModule, ThemeModule, GanttRoutingModule],
   exports: [
     GanttBarsComponent,
     GanttColumnComponent,
     GanttHeaderComponent,
     GanttTooltipComponent,
+    GanttZoomBarComponent,
+    GanttScrollComponent,
   ],
   providers: [
-    GanttService,
+    GanttProviders,
+    DateOperationService,
     {
       provide: GANTT,
       useValue: gantt,

projects/arc-lib/src/lib/components/gantt/services/date-operation.service.ts

@@ -0,0 +1,45 @@
+import {Injectable} from '@angular/core';
+import * as moment from 'moment';
+
+@Injectable()
+export class DateOperationService {
+  convertToMoment(date: moment.MomentInput) {
+    return moment(date);
+  }
+
+  getTotalMonths(startDate: moment.Moment, endDate: moment.Moment) {
+    let months = 0;
+    const date = startDate.clone().startOf('month');
+    const end = endDate.clone().endOf('month');
+    while (date < end) {
+      months++;
+      date.add(1, 'month');
+    }
+    return months;
+  }
+
+  calculateWeeksBetweenDates(startDate: Date | string, endDate: Date | string) {
+    const startMoment = moment(startDate);
+    const endMoment = moment(endDate);
+    const totalWeeks = endMoment.diff(startMoment, 'weeks') + 1;
+    return totalWeeks;
+  }
+
+  getNumberOfDaysBetweenDates(date1: Date, date2: Date): number {
+    const momentDate1 = moment(date1);
+    const momentDate2 = moment(date2);
+
+    const daysDifference = momentDate2.diff(momentDate1, 'days');
+
+    return daysDifference;
+  }
+
+  getNumberOfMonthsBetweenDates(date1: Date, date2: Date): number {
+    const momentDate1 = moment(date1);
+    const momentDate2 = moment(date2);
+
+    const monthsDifference = momentDate2.diff(momentDate1, 'months') + 1;
+
+    return monthsDifference;
+  }
+}

projects/arc-lib/src/lib/components/gantt/services/timeline-scales/monthly-scale.service.ts

@@ -1,6 +1,9 @@
 import {Injectable} from '@angular/core';
 import {GanttScaleUnits} from '../../enum';
 import {GanttScaleService, Timelines} from '../../types';
+import {AnyObject} from '@project-lib/core/api';
+import {DIGITS} from '@project-lib/core/constants';
+import {GanttService} from '../gantt.service';
 
 @Injectable()
 export class MonthlyScaleService implements GanttScaleService {
@@ -21,4 +24,29 @@ export class MonthlyScaleService implements GanttScaleService {
       },
     ];
   }
+
+  scroll(forward: boolean, ganttService: GanttService<AnyObject>): void {
+    const currentScrollState: number = ganttService.gantt.getScrollState().x;
+    const currentScrollDate: Date =
+      ganttService.gantt.dateFromPos(currentScrollState);
+    const newScrollDate: Date = ganttService.gantt.date.add(
+      currentScrollDate,
+      forward ? +DIGITS.ONE : -DIGITS.ONE,
+      'month',
+    );
+    const newScrollState: number =
+      ganttService.gantt.posFromDate(newScrollDate);
+    ganttService.gantt.scrollTo(newScrollState, null);
+  }
+  moveToToday(ganttService: GanttService<AnyObject>): void {
+    const dateToday: Date = new Date();
+    const newScrollDate: Date = ganttService.gantt.date.add(
+      dateToday,
+      -DIGITS.ONE,
+      'month',
+    );
+    const newScrollState: number =
+      ganttService.gantt.posFromDate(newScrollDate);
+    ganttService.gantt.scrollTo(newScrollState, null);
+  }
 }

projects/arc-lib/src/lib/components/gantt/services/timeline-scales/quarterly-scale.service.ts

@@ -2,6 +2,9 @@ import {Injectable} from '@angular/core';
 import {MONTHS_IN_QUARTER} from '../../const';
 import {GanttScaleUnits} from '../../enum';
 import {GanttScaleService, Timelines} from '../../types';
+import {AnyObject} from '@project-lib/core/api';
+import {DIGITS} from '@project-lib/core/constants';
+import {GanttService} from '../gantt.service';
 
 @Injectable()
 export class QuarterlyScaleService implements GanttScaleService {
@@ -21,6 +24,30 @@ export class QuarterlyScaleService implements GanttScaleService {
       },
     ];
   }
+  scroll(forward: boolean, ganttService: GanttService<AnyObject>): void {
+    const currentScrollState: number = ganttService.gantt.getScrollState().x;
+    const currentScrollDate: Date =
+      ganttService.gantt.dateFromPos(currentScrollState);
+    const newScrollDate: Date = ganttService.gantt.date.add(
+      currentScrollDate,
+      forward ? +DIGITS.FOUR : -DIGITS.FOUR,
+      'month',
+    );
+    const newScrollState: number =
+      ganttService.gantt.posFromDate(newScrollDate);
+    ganttService.gantt.scrollTo(newScrollState, null);
+  }
+  moveToToday(ganttService: GanttService<AnyObject>): void {
+    const dateToday: Date = new Date();
+    const newScrollDate: Date = ganttService.gantt.date.add(
+      dateToday,
+      -DIGITS.FOUR,
+      'month',
+    );
+    const newScrollState: number =
+      ganttService.gantt.posFromDate(newScrollDate);
+    ganttService.gantt.scrollTo(newScrollState, null);
+  }
 
   private _formatQuarterScale(date: Date) {
     const month = date.getMonth();