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

package/src/lib/util/component/header/header.component.scss

@@ -0,0 +1,265 @@
+@import "../../../../../assets/css/mat-palettes";
+
+.header-icon {
+  color: $blue-primary;
+  cursor: pointer;
+  text-align: center;
+  margin: 0 4px;
+}
+
+.header-separator {
+  display: inline-block;
+  height: 25%;
+}
+
+.global-search-separator {
+  display: inline-block;
+  height: 70%;
+  border-right: 2px solid $gray-strong;
+}
+
+:host-context(.dark-theme) {
+  background-color: $background-lvl2;
+
+  .global-search {
+    background: $background-lvl1;
+  }
+
+  .global-search-input {
+    background: $background-lvl1;
+  }
+
+  .global-search-separator {
+    border-right: 2px solid $dark-background-color;
+  }
+
+  .header-separator {
+    border-right: 2px solid $background-lvl5;
+  }
+
+}
+
+::ng-deep .dark-theme {
+  .mat-autocomplete-global-search {
+    background: $background-lvl2 !important;
+  }
+
+  .mat-mdc-option.mat-option-global-search:focus:not(.mat-option-disabled) {
+    background: $background-lvl3 !important;
+    color: white !important;
+  }
+
+  .mat-mdc-option.mat-option-global-search,
+  .mat-mdc-option.mat-option-global-search {
+    color: white !important;
+  }
+  .global-search-input::placeholder {
+    color: $gray-light !important;
+  }
+}
+
+:host-context(.light-theme) {
+  background-color: white;
+
+  .global-search {
+    background: #EFF3F6;
+  }
+
+  .global-search-input {
+    background: #EFF3F6;
+  }
+
+  .global-search-separator {
+    border-right: 2px solid $gray-strong;
+  }
+
+  .header-separator {
+    border-right: 2px solid $gray-strong;
+  }
+  .global-search-input::placeholder {
+    color: $black-bluish !important;
+  }
+
+  .mat-toolbar {
+    background-color: white;
+  }
+}
+
+::ng-deep .light-theme .mat-mdc-option.mat-option-global-search:hover:not(.mdc-list-item--disabled) {
+  background: $gray-strong !important;
+}
+
+.logo-unity {
+  height: 48px;
+  width: 48px;
+}
+
+.global-search .header-icon {
+  margin: 0 10px;
+}
+
+.global-search {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  background: #EFF3F6;
+  margin-left: 5px;
+  border-radius: 8px;
+  flex: 1 1 0;
+  width: auto;
+  min-width: 0;
+}
+
+.global-search-input {
+  background: $gray-background-lightest;
+  border: none;
+  margin-left: 10px;
+  font-size: 14px !important;
+
+  :focus {
+    outline: none;
+  }
+}
+
+.rapid-search-type-icon {
+  font-size: 1.4em;
+  vertical-align: middle;
+}
+
+.advanced-button {
+  background: $purple-primary !important;
+  color: white !important;
+  width: 90px;
+  min-width: 90px !important;
+  height: 24px !important;
+  box-shadow: 0px 2px 6px rgba(68, 93, 123, 0.16), inset 0px 2px 6px rgba(255, 255, 255, 0.08), inset 0px -2px 4px rgba(68, 93, 123, 0.06);
+  margin-right: 5px;
+  padding: 0;
+
+  .mat-icon {
+    color: white !important;
+    font-size: 14px !important;
+    height: unset;
+    width: unset;
+    margin-right: 0;
+  }
+}
+
+.connected-as {
+  font-size: 12px;
+}
+
+.user-thumb {
+  margin-right: 16px;
+  width: 40px;
+  height: 40px;
+}
+
+#env-dev, #env-uat, #env-sbx {
+  background-color: #809ec1;
+  color: white;
+}
+
+.env {
+  color: #fff;
+  font-size: 10px;
+  border-radius: 1px;
+  padding: 0px 5px;
+  line-height: 16px;
+  height: 16px;
+}
+
+.global-search-input::placeholder {
+  font-style: italic !important;
+  font-weight: bold !important;
+}
+
+.mat-option-global-search {
+  height: 30px !important;
+  line-height: 15px !important;
+  padding: 0 8px;
+}
+
+.auto-complete-label {
+  font-size: 8px;
+}
+
+::ng-deep .global-search {
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none !important;
+  }
+
+  .mat-mdc-form-field .mat-mdc-text-field-wrapper {
+    background-color: transparent !important;
+  }
+  .mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-form-field-focus-overlay {
+    opacity: 0 !important;
+  }
+  .mdc-line-ripple {
+    display: none !important;
+  }
+
+  .mat-mdc-form-field-infix {
+    min-height: 40px !important;
+    padding-top: 8px !important;
+    padding-bottom: 8px !important;
+  }
+}
+
+@for $i from 0 through 20 {
+  $step: $i * 5;
+  $width: $i * 5%;
+
+  .max-width-#{$step} {
+    flex: 1 1 $width;
+    max-width: $width;
+  }
+
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+.toolbar-header {
+  height: 64px;
+  position: absolute;
+  padding: 0 16px !important;
+  z-index: 999;
+}
+
+.menu-header {
+  max-width: 70%;
+  overflow: hidden;
+  max-height: 60px;
+}
+
+::ng-deep .settings-menu.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon {
+  height: 24px;
+  width: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 15px;
+  font-size: 18px;
+}
+
+::ng-deep .settings-menu.mat-mdc-menu-panel .img-btn {
+   .mat-mdc-menu-item-text {
+      display: flex;
+      justify-content: start;
+      align-items: center;
+  }
+
+  img {
+    height: 12px !important;
+    width: auto !important;
+    display: block !important;
+    padding-left: 3px;
+    margin-right: 17px !important;
+  }
+}
+
+.theme-icon {
+  font-size: 24px !important;
+}

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

@@ -0,0 +1,245 @@
+import {Component, EventEmitter, HostListener, Inject, OnInit, Output} from '@angular/core';
+import {Router} from '@angular/router';
+import {CookieService} from 'ngx-cookie-service';
+import {TranslateService} from '@ngx-translate/core';
+import {OverlayContainer} from '@angular/cdk/overlay';
+import {PermissionsInterface} from "../../interfaces/permissions.interface";
+import {Theme} from "../../decorators/theme.decorator";
+import {User} from "../../decorators/user.decorator";
+import {AuthUserModel} from "../../models";
+import {LocalStorageEventsService} from "../../event/storage/local-storage-events.service";
+import {LocalStorageService} from "../../services/storage/local-storage.service";
+import {ToasterEventsService} from "../../toaster/toaster-events.service";
+import {CommonApiService} from "../../services/api/common-api.service";
+import {SessionStorageService} from "../../services/storage/session-storage.service";
+import {PermissionsService} from "../../permissions/permissions.service";
+import {Config, WEB_CONFIG} from "../../config";
+import {LangService} from "../../services/translate-language/lang.service";
+import {ElasticsearchService} from "../../services/elasticsearch/elasticsearch.service";
+import {PurchaseOrderRapidSearchModel} from "../../models/expenditure-commitment/purchase-order-rapid-search.model";
+import {ProductRapidSearchModel} from "../../models/video/product-rapid-search.model";
+import {RapidSearchItemType} from "../../enums/rapid-search-item-type.enum"
+import {FormControl} from '@angular/forms';
+import {WorkVersionRapidSearchModel} from "../../models/referential/work-version-rapid-search.model";
+import {debounceTime, map, switchMap} from 'rxjs/operators';
+import {Observable, of} from 'rxjs';
+import {MatOptionSelectionChange} from '@angular/material/core';
+import {DealRapidSearchModel} from '../../models/commercial/deal-rapid-search-model';
+import {ThirdPartyRapidSearchModel} from "../../models/referential/third-party-rapid-search.model";
+import {WorkRecordRapidSearchModel} from "../../models/commercial/work-record-rapid-search-model";
+import {ContractRapidSearchModel} from "../../models/legal/contract-rapid-search-model";
+import {InvoiceRapidSearchModel} from "../../models/commercial/invoice-rapid-search-model";
+
+
+@Component({
+  selector: 'sc-header',
+  styleUrls: ['./header.component.scss'],
+  templateUrl: './header.component.html'
+})
+export class HeaderComponent implements OnInit, PermissionsInterface {
+  @Theme() public theme: string;
+  @User() public user: AuthUserModel;
+
+  @Output() toogleMenuEvent = new EventEmitter();
+
+  restrictions = ['CANAL_PLUS_INTERNATIONAL_RESTRICTION'];
+
+  public lang: string;
+  public labelLang = 'labelFr';
+  public isHide = false;
+  public currentScroll = 0;
+  public env: string;
+  public historyList = [];
+  private readonly apiUrl: string;
+  public activeButton: string = '';
+  public RapidSearchItemType = RapidSearchItemType;
+  public formControlSearch: FormControl<string>;
+  public documents$: Observable<(PurchaseOrderRapidSearchModel
+    | ProductRapidSearchModel
+    | WorkVersionRapidSearchModel
+    | DealRapidSearchModel
+    | WorkRecordRapidSearchModel
+    | ThirdPartyRapidSearchModel
+    | ContractRapidSearchModel
+    | InvoiceRapidSearchModel)[]>;
+
+  constructor(
+    private readonly router: Router,
+    private readonly localStorageEvents: LocalStorageEventsService,
+    private readonly localStorage: LocalStorageService,
+    private readonly toasterService: ToasterEventsService,
+    private readonly translate: TranslateService,
+    private readonly commonApiService: CommonApiService,
+    private readonly sessionStorageService: SessionStorageService,
+    private readonly permissionsService: PermissionsService,
+    private readonly overlayContainer: OverlayContainer,
+    private readonly cookieService: CookieService,
+    private readonly langService: LangService,
+    private readonly elasticsearchService: ElasticsearchService,
+    @Inject(WEB_CONFIG) private readonly config: Config
+  ) {
+    this.apiUrl = this.config.api_url;
+  }
+
+
+  public ngOnInit() {
+    this.formControlSearch = new FormControl<string>(null);
+
+    this.initPermissionsService();
+    this.lang = this.localStorage.get('lang') || 'fr';
+    this.updateLabelLang(this.lang);
+    this.env = this.config.env.toLowerCase();
+    this.localStorageEvents.localStorageEvent.subscribe(() => {
+      this.lang = this.localStorage.get('lang');
+      this.updateLabelLang(this.lang);
+    });
+
+    this.documents$ = this.formControlSearch.valueChanges.pipe(
+      debounceTime(500),
+      switchMap(term => {
+        if (!term) {
+          return of([]);
+        }
+        return this.elasticsearchService
+          .getSearchResponse(term, this.user)
+          .pipe(
+            map(searchResponse => {
+              return this.elasticsearchService.getDocuments(searchResponse);
+            })
+          );
+      })
+    );
+  }
+
+  @HostListener('window:scroll', [])
+  public onWindowScroll() {
+    const numberVar = document.documentElement.scrollTop;
+    if (numberVar > this.currentScroll) {
+      this.isHide = true;
+    }
+    if (numberVar < this.currentScroll) {
+      this.isHide = false;
+    }
+    this.currentScroll = numberVar;
+  }
+
+
+  public initPermissionsService(): void {
+    this.permissionsService.init();
+  }
+
+  public switchTheme() {
+    if (this.theme === 'dark') {
+      this.localStorage.post('newTheme', 'light');
+      this.overlayContainer
+        .getContainerElement()
+        .classList.remove('dark-theme');
+      this.overlayContainer.getContainerElement().classList.add('light-theme');
+    } else {
+      this.localStorage.post('newTheme', 'dark');
+      this.overlayContainer
+        .getContainerElement()
+        .classList.remove('light-theme');
+      this.overlayContainer.getContainerElement().classList.add('dark-theme');
+    }
+  }
+
+  stopIdentityTheft() {
+    sessionStorage.removeItem('authTokenSecondary');
+  }
+
+  public navigate(module = '', route: string, queryParamString?: string | null) {
+    if (!route.startsWith('/')) {
+      route = '/' + route;
+    }
+
+    const url = this.config.api_url + (module ? `/${module}` : '') + route;
+    let queryParams = null;
+    if(queryParamString != null) {
+      queryParams = JSON.parse(queryParamString);
+    }
+
+    if (window.location.href === url && queryParams == null) {
+        window.location.reload();
+    } else if (window.location.pathname.startsWith(`/${module}`)) {
+      this.router
+        .navigateByUrl('/', { skipLocationChange: true })
+        .then(() => this.router.navigate([route], queryParams ? {queryParams} : {}));
+    } else {
+        window.location.href = url;
+    }
+  }
+
+  public redirect(route: string) {
+    window.location.href = route;
+  }
+
+  public getHistory() {
+    this.historyList = [];
+    if (this.localStorage.exist('history')) {
+      this.historyList = this.localStorage.get('history');
+    }
+
+    if (this.historyList.length === 0) {
+      this.historyList.push({type: 'NO_HISTORY_AVAILABLE', id: null, ref: null});
+    }
+  }
+
+  public switchLang(lang) {
+    this.localStorage.post('lang', lang);
+    this.translate.use(lang);
+    this.langService.switchLang();
+  }
+
+  private updateLabelLang(lang: string) {
+    if ('en' === lang) {
+      this.labelLang = 'labelEn';
+    } else if ('de' === lang) {
+      this.labelLang = 'labelDe';
+    } else {
+      this.labelLang = 'labelFr';
+    }
+  }
+
+  public getContractType(type) {
+    return type === 'Sale' ? 'cess' : type ==='Acquisition' ? 'acq' : 'auth';
+  }
+
+  onSelectSearch($event: MatOptionSelectionChange, doc: any) {
+    switch (doc.docType) {
+      case RapidSearchItemType.PURCHASE_ORDER:
+        this.navigate('expenditure-commitment', '/purchase-orders/' + doc.poId);
+        break;
+      case RapidSearchItemType.PRODUCT:
+        this.navigate('video', '/product/consult/' + doc.productId);
+        break;
+      case RapidSearchItemType.WORK_VERSION:
+        this.navigate(null, '/work-summary/' + doc.id + '/info');
+        break;
+      case RapidSearchItemType.DEAL:
+        this.navigate(null, '/commercial/deal/consult/' + doc.id);
+        break;
+      case RapidSearchItemType.THIRD_PARTY:
+        this.navigate(null, '/referential/third-party/' + doc.id);
+        break;
+      case RapidSearchItemType.WORK_RECORD:
+        this.navigate(null, '/commercial/work-record/consult/' + doc.id + '/general');
+        break;
+      case RapidSearchItemType.CONTRACT:
+        this.navigate(null, '/legal/contracts-details/' + this.getContractType(doc.type.labelEn) + '/'+ doc.contractId);
+        break;
+      case RapidSearchItemType.INVOICE:
+        if (doc.right) {
+          this.navigate(null, '/commercial/invoice/right-payment-consult?idEcheance=' + doc.invoiceId);
+        } else {
+          this.navigate(null, '/commercial/invoice/material-payment-consult?idEcheance=' + doc.invoiceId);
+        }
+        break;
+      case RapidSearchItemType.ROYALTY_CONTRACT:
+        this.navigate(null, '/royalty/contract/consult/' + doc.id);
+        break;
+    }
+  }
+
+
+}

package/src/lib/util/component/header/menu/menu.component.html

@@ -0,0 +1,52 @@
+<div class="d-flex justify-content-start">
+  <ng-container *ngFor="let menuCurrent of menuButtons" class="menu-panel-container">
+    <ng-container *ngxPermissionsExcept="menuCurrent.restrictions">
+      <mat-toolbar class="toolbar-padding">
+        <div
+          [attr.aria-label]="menuCurrent.label + '-btn'"
+          class="button-wrapper"
+          [ngClass]="{ active: activeMenu === menuCurrent.label }"
+          *ngxPermissionsOnly="menuCurrent.permissions"
+          (click)="openMenu(menuTrigger, menuCurrent.label)"
+        >
+          <button class="menu-button primary-color" [matMenuTriggerFor]="i" #menuTrigger="matMenuTrigger"
+                  style="z-index: 99999">
+            <div class="text-menu-button">
+              <span>{{ menuCurrent.label | commonTranslate : lang }}</span>
+              <div class="indicator">
+                <div class="line primary"></div>
+              </div>
+            </div>
+            <mat-icon class="primary-color icon-more" [ngClass]="{ rotated: activeMenu === menuCurrent.label }">
+              expand_more
+            </mat-icon>
+          </button>
+          <div class="indicator"></div>
+        </div>
+      </mat-toolbar>
+
+      <mat-menu #i="matMenu" [aria-label]="menuCurrent.label + '-menu'" class="custom-menu custom-menu-panel"
+                [hasBackdrop]="false">
+        <div class="menu-container d-flex" (click)="$event.stopPropagation()">
+          <ng-container *ngFor="let section of menuCurrent.sections">
+            <ng-container *ngxPermissionsOnly="section.permissions">
+              <ng-container *ngxPermissionsExcept="section.restrictions">
+                <div class="menu-section">
+                  <h3 class="primary-color">{{ section.label | commonTranslate : lang }}</h3>
+                  <ng-container *ngFor="let link of section.links">
+                    <ng-container *ngxPermissionsOnly="link.permissions">
+                      <button (click)="performAction(link)" *ngxPermissionsExcept="link.restrictions" mat-menu-item
+                              class="custom-menu-item">
+                        {{ link.label | commonTranslate : lang }}
+                      </button>
+                    </ng-container>
+                  </ng-container>
+                </div>
+              </ng-container>
+            </ng-container>
+          </ng-container>
+        </div>
+      </mat-menu>
+    </ng-container>
+  </ng-container>
+</div>

package/src/lib/util/component/header/menu/menu.component.scss

@@ -0,0 +1,127 @@
+@import "../../../../../../assets/css/mat-palettes";
+
+::ng-deep .light-theme {
+  .mat-toolbar {
+    background-color: white;
+  }
+}
+
+::ng-deep .dark-theme {
+  .mat-toolbar {
+    background-color: $background-lvl2;
+  }
+}
+
+.mat-icon {
+  overflow: visible;
+}
+
+.menu-section {
+  display: flex;
+  flex-direction: column;
+  margin-right: 10px;
+}
+
+.menu-section h3 {
+  margin: 0 0 10px 10px;
+  font-size: 16px;
+  font-weight: normal;
+}
+
+.mat-menu-item {
+  padding: 5px 0;
+  text-align: left;
+}
+
+.mat-menu-item:hover {
+  font-weight: normal;
+  color: #3f51b5;
+}
+
+.menu-container {
+  padding-left: 10px;
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+}
+
+.button-wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  top: 15px;
+  margin-right: 0.5vw;
+}
+
+.toolbar-padding {
+  align-items: start;
+  padding: 0 0 0 0 !important;
+}
+
+.indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 0;
+}
+
+.text-menu-button {
+  display: flex;
+  flex-direction: column;
+  font-size: min(1.2vw, 16px);
+}
+
+.line {
+  width: 0;
+  height: 2px;
+  transition: all 0.5s ease-in-out;
+  display: block;
+  opacity: 0;
+}
+
+.button-wrapper.active .line {
+  width: 100%;
+  opacity: 1;
+}
+
+.icon {
+  margin-top: -8px;
+  display: none;
+}
+
+.menu-button {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  background-color: transparent !important;
+  font-weight: bold !important;
+  max-width: fit-content !important;
+  font-size: 16px;
+  padding-bottom: 10px;
+}
+
+.menu-button mat-icon {
+  vertical-align: middle;
+}
+
+.custom-menu-item {
+  padding-left: 10px !important;
+}
+
+::ng-deep .mat-mdc-menu-panel.custom-menu-panel {
+  max-width: fit-content !important;
+  overflow: visible !important;
+}
+
+.icon-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.5s ease-in-out;
+  font-size: min(1.5vw, 24px) !important;
+}
+
+.icon-more.rotated {
+  transform: rotate(180deg);
+}

package/src/lib/util/component/header/menu/menu.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuComponent } from './menu.component';
+
+xdescribe('MenuComponent', () => {
+  let component: MenuComponent;
+  let fixture: ComponentFixture<MenuComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MenuComponent]
+    });
+    fixture = TestBed.createComponent(MenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});