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

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

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

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

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

@@ -1,21 +0,0 @@
-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();
-  });
-});

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

@@ -1,94 +0,0 @@
-import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
-import { MatMenuTrigger } from '@angular/material/menu';
-import { CommercialApiService } from '../../../services/api/commercial-api.service';
-import { VideoApiService } from '../../../services/api/video-api.service';
-import { OverlayService } from '../../overlay/overlay.service';
-import { MENU_SECTIONS } from './menu.const';
-import { MenuLink } from './menu.model';
-
-@Component({
-  selector: 'sc-menu',
-  templateUrl: './menu.component.html',
-  styleUrls: ['./menu.component.scss']
-})
-export class MenuComponent {
-  @Input() public lang!: string;
-  @Output() public navigate: EventEmitter<MenuLink> = new EventEmitter<MenuLink>();
-  @Output() public redirect: EventEmitter<MenuLink> = new EventEmitter<MenuLink>();
-
-  public activeMenu: string | null = null;
-  public readonly menuButtons = MENU_SECTIONS;
-  private menuTriggerRef: MatMenuTrigger | null = null;
-
-  @HostListener('document:click', ['$event'])
-  onClickOutside(event: MouseEvent): void {
-    const menuButton = (event.target as HTMLElement).closest('.button-wrapper');
-    const insideMenu = (event.target as HTMLElement).closest('.mat-menu-panel');
-
-    if (!menuButton && !insideMenu) {
-      this.forceCloseMenu();
-    }
-  }
-
-  constructor(
-    private overlayService: OverlayService,
-    private videoApiService: VideoApiService,
-    private commercialApiService: CommercialApiService
-  ) {}
-
-  public openMenu(menuTrigger: MatMenuTrigger, menuLabel: string): void {
-    if (this.activeMenu === menuLabel) {
-      this.forceCloseMenu();
-      return;
-    }
-
-    this.forceCloseMenu();
-    this.activeMenu = menuLabel;
-    this.menuTriggerRef = menuTrigger;
-    menuTrigger.openMenu();
-  }
-
-  public forceCloseMenu(): void {
-    this.activeMenu = null;
-    this.menuTriggerRef?.closeMenu();
-  }
-
-  public extractAllProducts() {
-    this.overlayService.show();
-    this.videoApiService.getProductExtractionXlsx(this.lang).subscribe(res => {
-      const xlsFile = new Blob([res], {
-        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-      });
-      const fileURL = URL.createObjectURL(xlsFile);
-      window.open(fileURL);
-      this.overlayService.hide();
-    });
-  }
-
-  public extractAccountWrittingDownload(): void {
-    this.overlayService.show();
-    this.commercialApiService.getAccountWrittingDownload();
-    this.overlayService.hide();
-  }
-
-  public performAction(link: MenuLink): void {
-    this.forceCloseMenu();
-
-    switch (link.actionType) {
-      case 'navigate':
-        this.navigate.emit(link);
-        break;
-      case 'redirect':
-        this.redirect.emit(link);
-        break;
-      case 'exportAccountWriting':
-        this.extractAccountWrittingDownload();
-        break;
-      case 'extractProduct':
-        this.extractAllProducts();
-        break;
-      default:
-        throw new Error(`performAction error - No action type on menuLink : ${link}`);
-    }
-  }
-}