fix(arc-lib): testing gantt service

testing gantt service

GH-58

package.json

@@ -40,12 +40,14 @@
     "dotenv": "^16.0.3",
     "eva-icons": "^1.1.3",
     "lodash": "^4.17.21",
+    "moment": "^2.30.1",
     "ngx-logger": "^5.0.12",
     "ngx-permissions": "^15.0.1",
     "ngx-webstorage-service": "^5.0.0",
     "or": "^0.2.0",
     "prettier": "^2.8.7",
     "rxjs": "~7.8.0",
+    "save-dev": "^0.0.1-security",
     "ts-node": "^10.9.1",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"
@@ -67,7 +69,7 @@
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^7.0.0",
     "dhtmlx-gantt": "^7.1.13",
-    "eslint": "^8.33.0",
+    "eslint": "^8.57.0",
     "husky": "^8.0.3",
     "jasmine-core": "~4.5.0",
     "karma": "~6.4.0",

projects/arc-docs/src/app/docs/auth-doc/components/configure-token-doc/configure-token-doc.component.scss

@@ -1,4 +1,4 @@
 a {
-    text-decoration: none;
-    color: #19a5ff;
-  }
+  text-decoration: none;
+  color: #19a5ff;
+}

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-tooltip/gantt-tooltip.component.scss

@@ -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

@@ -0,0 +1,27 @@
+<nb-layout>
+  <nb-layout-header fixed>
+    <div class="icon-wrapper">
+      <nb-icon
+        class="icon"
+        icon="fit_content"
+        pack="svg-bizbook"
+        (click)="fitToScreen()"
+      >
+      </nb-icon>
+      <nb-icon
+        class="icon"
+        icon="zoom_in"
+        pack="svg-bizbook"
+        (click)="zoomIn()"
+      >
+      </nb-icon>
+      <nb-icon
+        class="icon"
+        icon="zoom_out"
+        pack="svg-bizbook"
+        (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 {GanttProviders} from '../../const';
+import {CustomGanttAdapter, GanttAdapter} 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;
+  }
+
+  zoomIn() {
+    this.ganttService.zoomIn();
+  }
+
+  zoomOut() {
+    this.ganttService.zoomOut();
+  }
+
+  fitToScreen() {
+    this.ganttService.fitToScreen();
+  }
+}

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,30 @@ 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,
+    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/gantt.service.spec.ts

@@ -5,7 +5,7 @@ import {GanttModule} from '../gantt.module';
 import {GanttService} from './gantt.service';
 
 describe('GanttService', () => {
-  let service: GanttService<AnyObject, AnyObject>;
+  let service: GanttService<AnyObject>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({