new-front-common-library 16.1.32-ROY-1 → 16.1.32-ROY-3

package/src/lib/util/component/overlay/overlay.component.ts

@@ -0,0 +1,42 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { OverlayService } from './overlay.service';
+import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+    selector: 'sc-overlay',
+    styleUrls: ['./overlay.component.css'],
+    templateUrl: './overlay.component.html'
+})
+export class OverlayComponent implements OnInit {
+    public message: string;
+    public show = false;
+
+    constructor(
+        private router: Router,
+        private translateService: TranslateService,
+        private overlayService: OverlayService,
+        private cd: ChangeDetectorRef
+    ) {
+    }
+
+    public ngOnInit() {
+        this.router.events.subscribe(() => {
+            this.show = false;
+        });
+
+        this.overlayService.showEvent.subscribe((message?: string) => {
+            this.message = message || this.message;
+            this.show = true;
+            this.cd.detectChanges();
+        });
+
+        this.overlayService.hideEvent.subscribe(() => {
+            this.show = false;
+        });
+
+        this.overlayService.setMessageEvent.subscribe((message: string) => {
+            this.message = message;
+        });
+    }
+}

package/src/lib/util/component/overlay/overlay.service.ts

@@ -0,0 +1,23 @@
+import { EventEmitter, Injectable } from '@angular/core';
+
+@Injectable()
+export class OverlayService {
+    public showEvent: EventEmitter<string> = new EventEmitter<string>();
+    public hideEvent: EventEmitter<any> = new EventEmitter<any>();
+    public setMessageEvent: EventEmitter<string> = new EventEmitter<string>();
+
+    constructor() {
+    }
+
+    public show(message?: string) {
+        this.showEvent.emit(message);
+    }
+
+    public setMessage(message: string) {
+        this.setMessageEvent.emit(message);
+    }
+
+    public hide() {
+        this.hideEvent.emit();
+    }
+}

package/src/lib/util/component/popup/popup-login/popup-login.component.css

@@ -0,0 +1,3 @@
+.w-100 {
+  width: 100%;
+}

package/src/lib/util/component/popup/popup-login/popup-login.component.html

@@ -0,0 +1,29 @@
+<h3 mat-dialog-title>Log in</h3>
+
+<mat-dialog-content>
+  <form (keyup.enter)="onLogin()" [formGroup]="userForm" class="d-flex flex-column">
+    <div class="form-group">
+      <mat-label>{{'CORE.LOGIN.USERNAME' | translate }} <span style="color:#ef5350; font-weight: bold">*</span>
+      </mat-label>
+      <mat-form-field appearance="outline">
+        <input [(ngModel)]="username" formControlName="username" matInput/>
+      </mat-form-field>
+    </div>
+    <div class="form-group">
+      <mat-label>{{'CORE.LOGIN.PASSWORD' | translate }} <span style="color:#ef5350; font-weight: bold">*</span>
+      </mat-label>
+      <mat-form-field appearance="outline">
+        <input [(ngModel)]="password" formControlName="password" matInput type="password"/>
+      </mat-form-field>
+    </div>
+  </form>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+  <button (click)="onLogin()" [disabled]="loading" class="primary w-100" mat-raised-button
+          type="submit">{{ 'CORE.LOGIN.SIGN_IN' | translate }}</button>
+  <mat-spinner *ngIf="loading" [diameter]="30" class="not-so-close-from-button login-spinner"></mat-spinner>
+  <div *ngIf="(errorMessage !== null || errorMessage !== '')" class="errorMessage not-so-close-from-button">
+    {{errorMessage}} </div>
+</mat-dialog-actions>
+

package/src/lib/util/component/popup/popup-login/popup-login.component.ts

@@ -0,0 +1,96 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { AesService } from '../../../services/jwt-security/aes.service';
+import { Config, WEB_CONFIG } from '../../../config';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
+import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
+import { CookieService } from 'ngx-cookie-service';
+import { CommonApiService } from '../../../services/api/common-api.service';
+import {UserFormModel} from "../../../models/referential/user-form.model";
+
+@Component({
+  selector: 'sc-popup-login',
+  templateUrl: './popup-login.component.html',
+  styleUrls: ['./popup-login.component.css']
+})
+export class MyDialogPopupLoginComponent implements OnInit {
+  public username = '';
+  public password = '';
+  public loading = false;
+  public errorMessage = '';
+  public apiUrl = '';
+  public userForm: FormGroup<UserFormModel>;
+
+  constructor(
+    public dialogRef: MatDialogRef<MyDialogPopupLoginComponent>,
+    private aesUtil: AesService,
+    @Inject(WEB_CONFIG) private config: Config,
+    private http: HttpClient,
+    private translateService: TranslateService,
+    private cookieService: CookieService,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private commonApiService: CommonApiService,
+    private formBuilder: FormBuilder
+  ) {
+    this.apiUrl = config.api_url + '/authorization-api';
+  }
+
+  public ngOnInit() {
+    this.buildForm();
+  }
+
+  public onLogin() {
+    if (this.userForm.invalid) {
+      this.errorMessage = this.translateService.instant(
+        'CORE.LOGIN.ACCESS_DENIED'
+      );
+      return;
+    }
+    this.loading = true;
+    this.errorMessage = '';
+
+    this.login(
+      {username: this.username, password: this.password},
+      this.translateService.currentLang
+    ).subscribe(
+      user => {
+        this.loading = false;
+        sessionStorage.setItem('loginFlag', 'true');
+        sessionStorage.removeItem('authToken');
+        sessionStorage.setItem('authToken', user.token);
+        this.cookieService.set('auth-mail', this.commonApiService.getUserDataFromToken().email);
+        this.dialogRef.close(true);
+      },
+      () => {
+        this.loading = false;
+        this.errorMessage = this.translateService.instant(
+          'CORE.LOGIN.ACCESS_DENIED'
+        );
+      }
+    );
+  }
+
+  private login(user: any, language: string): Observable<any> {
+    let url: string = this.apiUrl + '/login/findUser';
+    if (language) {
+      url += '?language=' + language;
+    }
+
+    user.password = this.aesUtil.encrypt(user.password);
+
+    return this.http.post(url, user, {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json'
+      })
+    });
+  }
+
+  private buildForm(): void {
+    this.userForm = this.formBuilder.group({
+      username: new FormControl<string>(null, Validators.required),
+      password: new FormControl<string>(null, Validators.required)
+    });
+  }
+}

package/src/lib/util/component/sub-header/sub-header.component.css

@@ -0,0 +1,136 @@
+/**
+GENERAL
+ */
+#template-header-container {
+    position: relative;
+    background: #3F3F3F;
+}
+
+#template-header {
+    position: fixed;
+    z-index: 300;
+    top: 20px;
+    width: 100%;
+    /*height: 103px;*/
+    padding-top: 30px !important;
+    background: #3F3F3F;
+    color: white;
+    transition: 0.3s;
+}
+
+#left-part {
+    float: left;
+    margin-left: 15px;
+}
+
+#right-part {
+    float: right;
+    margin-right: 230px;
+    height: 100%
+}
+
+a {
+    vertical-align: middle;
+    text-align: center;
+    color: #afafaf;
+}
+
+.header-hide {
+    top: -25px !important;
+    transition: 0.3s;
+}
+
+.title {
+    color: white !important;
+    font-weight: bold !important;
+}
+
+.subtitle {
+    color: #b3b3b3 !important;
+    cursor: pointer;
+}
+
+/**
+  Large screens: min-width 1025px, large screens
+ */
+@media only screen and (min-width: 64.063em) {
+
+    #template-header {
+        /*padding: 10px 0px 5px 55px;*/
+    }
+
+    .title {
+        font-size: 23px;
+    }
+
+    .subtitle {
+        font-size: 16px;
+    }
+
+    .status {
+        color: #65d39b;
+        margin-left: 10px;
+        font-size: 12px;
+    }
+
+    .codeMilo {
+        color: #b3b3b3;
+        font-size: 15px;
+    }
+
+    .dealNumber {
+        color: #b3b3b3;
+        font-weight: bold;
+        font-size: 19px;
+
+    }
+
+}
+
+/**
+  Medium screens: min-width 641px and max-width 1024px
+ */
+@media only screen and (min-width: 40.063em) and (max-width: 64em) {
+
+    .title {
+        font-size: 15px;
+    }
+
+    .subtitle {
+        font-size: 10px;
+    }
+
+    .status {
+        color: #65d39b;
+        margin-left: 10px;
+        font-size: 10px;
+    }
+
+    #template-header {
+        padding: 45px 0 5px 55px;
+    }
+}
+
+/**
+  Small screens - max-width 640px, mobile-only styles,
+ */
+@media only screen and (max-width: 40em) {
+
+    .title {
+        font-size: 10px;
+    }
+
+    .subtitle {
+        font-size: 8px;
+    }
+
+    .status {
+        color: #65d39b;
+        margin-left: 10px;
+        font-size: 8px;
+    }
+
+    #template-header {
+        padding: 45px 0 5px 0;
+    }
+}

package/src/lib/util/component/sub-header/sub-header.component.html

@@ -0,0 +1,20 @@
+<div id="template-header-container">
+  <div [ngClass]="{'header-hide':isHide}" id="template-header">
+
+    <!-- What you want -->
+    <div id="left-part">
+      <ng-content select=[left]></ng-content>
+    </div>
+
+    <!-- What you want -->
+    <div id="middle-part">
+      <ng-content select=[middle]></ng-content>
+    </div>
+
+    <!-- What you want -->
+    <div id="right-part">
+      <ng-content select=[right]></ng-content>
+    </div>
+
+  </div>
+</div>

package/src/lib/util/component/sub-header/sub-header.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SubHeaderComponent } from './sub-header.component';
+import { RouterTestingModule } from '@angular/router/testing';
+
+let comp: SubHeaderComponent;
+let fixture: ComponentFixture<SubHeaderComponent>;
+
+describe('Sub header component(SubHeaderComponent)', () => {
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [RouterTestingModule],
+            declarations: [SubHeaderComponent],
+            providers: []
+        });
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(SubHeaderComponent);
+        comp = fixture.componentInstance;
+    });
+
+    it('should create the component', () => {
+        expect(comp).toBeTruthy();
+    });
+});

package/src/lib/util/component/sub-header/sub-header.component.ts

@@ -0,0 +1,37 @@
+// Angular 2
+import { Component, HostListener, Inject, OnInit } from '@angular/core';
+// Decorators
+import { Theme } from '../../decorators/theme.decorator';
+import { DOCUMENT } from '@angular/common';
+
+// Component configuration
+
+@Component({
+    selector: 'sc-sub-header',
+    templateUrl: './sub-header.component.html',
+    styleUrls: ['./sub-header.component.css']
+})
+export class SubHeaderComponent implements OnInit {
+    @Theme() public theme: string;
+
+    public isHide = false;
+    public currentScroll = 0;
+
+    constructor(@Inject(DOCUMENT) private document: any) {
+    }
+
+    public ngOnInit(): void {
+    }
+
+    @HostListener('window:scroll', [])
+    public onWindowScroll() {
+        const numberVar = this.document.documentElement.scrollTop;
+        if (numberVar > this.currentScroll) {
+            this.isHide = true;
+        }
+        if (numberVar < this.currentScroll) {
+            this.isHide = false;
+        }
+        this.currentScroll = numberVar;
+    }
+}

package/src/lib/util/config.ts

@@ -0,0 +1,15 @@
+import { InjectionToken } from '@angular/core';
+
+export const WEB_CONFIG = new InjectionToken<Config>('WEB_CONFIG');
+
+export interface Config {
+  api_url: string;
+  env: string;
+  elasticsearch_url?: string;
+}
+
+export const DEFAULT_WEB_CONFIG: Config = {
+  api_url: 'http://localhost:8080',
+  env: 'DEV',
+  elasticsearch_url: 'https://vpc-unity-search-dev-nm5ydumospctjfaatstfjvoqey.eu-west-1.es.amazonaws.com'
+};

package/src/lib/util/date/PeriodModel.ts

@@ -0,0 +1,7 @@
+export class PeriodModel {
+
+    constructor(public years: number,
+                public months: number,
+                public days: number) {
+    }
+}

package/src/lib/util/date/date-format-constants.ts

@@ -0,0 +1,12 @@
+export const CUSTOM_DATE_FORMATS = {
+
+    parse: {
+        dateInput: {month: 'short', year: 'numeric', day: 'numeric'},
+    },
+    display: {
+        dateInput: 'input',
+        monthYearLabel: {year: 'numeric', month: 'long'},
+        dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
+        monthYearA11yLabel: {year: 'numeric', month: 'long'},
+    }
+};

package/src/lib/util/date/date.util.ts

@@ -0,0 +1,222 @@
+import { PeriodModel } from './PeriodModel';
+
+/**
+ * Created by dstoian on 27/03/2017.
+ */
+
+export class DateUtil {
+    public static daysPerMonth = new Map<number, number>();
+
+    constructor() {
+    }
+
+    // Format Date to YYYY-MM-DD
+    public static formatDate(date: Date, language) {
+        const mm = date.getMonth() + 1;
+        const dd = date.getDate();
+
+        if (language && 'fr' === language) {
+            return [(dd > 9 ? '' : '0') + dd,
+                (mm > 9 ? '' : '0') + mm,
+                date.getFullYear()
+            ].join('/');
+        }
+
+        return [date.getFullYear(),
+            (mm > 9 ? '' : '0') + mm,
+            (dd > 9 ? '' : '0') + dd
+        ].join('-');
+    }
+
+    // convert a string formatted "YYYY-MM-DD" into a date object
+    public static fromStringToDate(stringdate: string): Date {
+        const parts = stringdate.split('-');
+        const month = parts[1].toString();
+        const yearNumber = Number(parts[0]);
+        let monthNumber = 0;
+        if (month[0] === '0') {
+            monthNumber = +month[1];
+        } else {
+            monthNumber = +parts[1];
+        }
+        const numberOfDays = Number(parts[2]);
+        return new Date(yearNumber, monthNumber - 1, numberOfDays);
+    }
+
+    // convert a string formatted "YYYY-MM-DD" into a date object
+    public static fromStringToDateSecond(stringdate: string): Date {
+        const parts = stringdate.split(',');
+        const month = parts[1].toString();
+        const yearNumber = Number(parts[0]);
+        let monthNumber = 0;
+        if (month[0] === '0') {
+            monthNumber = +month[1];
+        } else {
+            monthNumber = +parts[1];
+        }
+        const numberOfDays = Number(parts[2]);
+        return new Date(yearNumber, monthNumber - 1, numberOfDays);
+    }
+
+    public static periodBetweenDates(startDate: string, endDate: string): PeriodModel {
+        DateUtil.initDaysPerMonths();
+        const a = new Date(startDate);
+        const b = new Date(endDate);
+        let numberOfDays = 0;
+        let numberOfYears = b.getFullYear() - a.getFullYear();
+        let numberOfMonths = (b.getMonth() - a.getMonth() + 12) % 12;
+        if (a.getMonth() === b.getMonth() && a.getTime() > b.getTime()) {
+            numberOfYears--;
+        }
+        if (a.getMonth() > b.getMonth()) {
+            numberOfYears--;
+        }
+        if (a.getDate() > b.getDate()) {
+            numberOfMonths--;
+            if (numberOfMonths < 0) {
+                numberOfMonths = 11;
+            }
+        }
+        if (b.getDate() < a.getDate()) {
+            let numberOfDaysPerMonth = DateUtil.daysPerMonth.get(a.getMonth());
+            if (a.getMonth() === 1 && DateUtil.checkLeapYear(a.getFullYear())) {
+                numberOfDaysPerMonth++;
+            }
+            numberOfDays = numberOfDaysPerMonth - a.getDate() + b.getDate();
+        } else {
+            numberOfDays = b.getDate() - a.getDate();
+        }
+        return new PeriodModel(numberOfYears, numberOfMonths, numberOfDays);
+    }
+
+    public static checkLeapYear(year: number): boolean {
+        if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
+            return true;
+        }
+        return false;
+    }
+
+    public static initDaysPerMonths() {
+        DateUtil.daysPerMonth.set(0, 31);
+        DateUtil.daysPerMonth.set(1, 28);
+        DateUtil.daysPerMonth.set(2, 31);
+        DateUtil.daysPerMonth.set(3, 30);
+        DateUtil.daysPerMonth.set(4, 31);
+        DateUtil.daysPerMonth.set(5, 30);
+        DateUtil.daysPerMonth.set(6, 31);
+        DateUtil.daysPerMonth.set(7, 31);
+        DateUtil.daysPerMonth.set(8, 30);
+        DateUtil.daysPerMonth.set(9, 31);
+        DateUtil.daysPerMonth.set(10, 30);
+        DateUtil.daysPerMonth.set(11, 31);
+    }
+
+    // returns 0 if the 2 dates are equal, 1 if the first date is greater than the second one or -1 when it's the opposite
+    public static compareLocalDates(first: Date, second: Date): number {
+        if (first.getFullYear() > second.getFullYear()) {
+            return 1;
+        } else if (first.getFullYear() < second.getFullYear()) {
+            return -1;
+        } else {
+            if (first.getMonth() > second.getMonth()) {
+                return 1;
+            } else if (first.getMonth() < second.getMonth()) {
+                return -1;
+            } else {
+                if (first.getDate() > second.getDate()) {
+                    return 1;
+                } else if (first.getDate() < second.getDate()) {
+                    return -1;
+                } else {
+                    return 0;
+                }
+            }
+        }
+    }
+
+    /* From moment-precise-range plugin */
+    public static preciseDiff(d1, d2): PeriodModel {
+        //   let m1 = moment(d1);
+        //   let m2 = moment(d2);
+        //
+        //   if (m1.isSame(m2)) {
+        //     return new PeriodModel(0, 0, 0);
+        //   }
+        //   if (m1.isAfter(m2)) {
+        //     const tmp = m1;
+        //     m1 = m2;
+        //     m2 = tmp;
+        //   }
+        //
+        //   let yDiff = m2.year() - m1.year();
+        //   let mDiff = m2.month() - m1.month();
+        //   let dDiff = m2.date() - m1.date();
+        //   let hourDiff = m2.hour() - m1.hour();
+        //   let minDiff = m2.minute() - m1.minute();
+        //   let secDiff = m2.second() - m1.second();
+        //
+        //   if (secDiff < 0) {
+        //     secDiff = 60 + secDiff;
+        //     minDiff--;
+        //   }
+        //   if (minDiff < 0) {
+        //     minDiff = 60 + minDiff;
+        //     hourDiff--;
+        //   }
+        //   if (hourDiff < 0) {
+        //     hourDiff = 24 + hourDiff;
+        //     dDiff--;
+        //   }
+        //   if (dDiff < 0) {
+        //     const daysInLastFullMonth = moment(m2.year() + '-' + (m2.month() + 1), 'YYYY-MM')
+        //       .subtract(1, 'months').daysInMonth();
+        //     if (daysInLastFullMonth < m1.date()) { // 31/01 -> 2/03
+        //       dDiff = daysInLastFullMonth + dDiff + (m1.date() - daysInLastFullMonth);
+        //     } else {
+        //       dDiff = daysInLastFullMonth + dDiff;
+        //     }
+        //     mDiff--;
+        //   }
+        //   if (mDiff < 0) {
+        //     mDiff = 12 + mDiff;
+        //     yDiff--;
+        //   }
+        //
+        //   const result = [];
+        //
+        //   moment.relativeTimeThreshold('s', 60);
+        //   moment.relativeTimeThreshold('m', 60);
+        //   moment.relativeTimeThreshold('h', 23);
+        //   moment.relativeTimeThreshold('dd', 28);
+        //   moment.relativeTimeThreshold('dm', 45);
+        //   moment.relativeTimeThreshold('dy', 365);
+        //
+        //   if (yDiff) {
+        //     result.push(moment.duration(yDiff, 'year').humanize());
+        //   }
+        //   if (mDiff) {
+        //     result.push(moment.duration(mDiff, 'month').humanize());
+        //   }
+        //   if (dDiff) {
+        //     result.push(moment.duration(dDiff, 'day').humanize());
+        //   }
+        //   if (hourDiff) {
+        //     result.push(moment.duration(hourDiff, 'hour').humanize());
+        //   }
+        //   if (minDiff) {
+        //     result.push(moment.duration(minDiff, 'minute').humanize());
+        //   }
+        //   if (secDiff) {
+        //     result.push(moment.duration(secDiff, 'second').humanize());
+        //   }
+        //
+        //   const period = new PeriodModel(0, 0, 0);
+        //   period.years = moment.duration(yDiff, 'year').asYears();
+        //   period.months = moment.duration(mDiff, 'month').asMonths();
+        //   period.days = moment.duration(dDiff, 'day').asDays();
+        //
+        const period = new PeriodModel(0, 0, 0);
+        return period;
+    }
+
+}