File

libs/common/frame/src/services/sidebar.service.ts

Description

Collect and maintain a list of templates candidates marked by the directive [pgrSidebar] somewhere in the application. The templates can be accessed through templateList$.

The application can set the explicit visibility of the sidebar (setVisibility/show/hide) which gets combined with external factors like the channel (expert vs retail) and the current active layout (stacked or not). That combined status is named show and reflects the actual visibility of the sidebar in the sidebar. Accessible through the observable show$.

Index

Methods
Accessors

Constructor

constructor(_talyPageDataService: TalyPageDataService, _frameLayout: TalyFrameLayoutService, _channel: CHANNEL)
Parameters :
Name Type Optional
_talyPageDataService TalyPageDataService No
_frameLayout TalyFrameLayoutService No
_channel CHANNEL No

Methods

hide
hide()
Returns : void
init
init()
Returns : void
registerTemplate
registerTemplate(template: TemplateRef<>)
Parameters :
Name Type Optional
template TemplateRef<> No
Returns : void
setVisibility
setVisibility(value: boolean)
Parameters :
Name Type Optional
value boolean No
Returns : void
show
show()
Returns : void

Accessors

templateList$
gettemplateList$()
show$
getshow$()

combined status of the overall visibility defined by the channel, active layout and the explicitly defined visibility

import { CHANNEL, CHANNEL_TOKEN, TalyPageDataService } from '@allianz/taly-core';
import { Inject, Injectable, TemplateRef } from '@angular/core';
import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
import { distinctUntilChanged, map, skip, tap } from 'rxjs/operators';
import { TalyFrameLayoutService } from './frame-layout.service';

export type SidebarTemplateSet = Set<TemplateRef<unknown>>;

/**
 * Collect and maintain a list of templates candidates marked by the directive `[pgrSidebar]`
 * somewhere in the application. The templates can be accessed through `templateList$`.
 *
 * The application can set the explicit visibility of the sidebar (`setVisibility`/`show`/`hide`) which gets combined
 * with external factors like the channel (`expert` vs `retail`) and the current active layout (`stacked` or not).
 * That combined status is named `show` and reflects the actual visibility of the sidebar in the sidebar.
 * Accessible through the observable `show$`.
 */
@Injectable()
export class TalyFrameSidebarService {
  private _registeredTemplates: SidebarTemplateSet = new Set();
  private _templatesListSubject = new BehaviorSubject<SidebarTemplateSet>(
    this._registeredTemplates
  );
  private _visibility = false;
  private _visibilitySubject = new BehaviorSubject(this._visibility);
  private _showObservable$!: Observable<boolean>;

  constructor(
    private _talyPageDataService: TalyPageDataService,
    private _frameLayout: TalyFrameLayoutService,
    @Inject(CHANNEL_TOKEN) private _channel: CHANNEL
  ) {
    this.init();
  }

  init() {
    this._talyPageDataService.pageData$
      .pipe(
        skip(1), // skip the first as we subscribe to a behavior subject
        tap(() => this._pageChanged())
      )
      .subscribe();

    const isExpert: boolean = this._channel === CHANNEL.EXPERT;
    const isStacked$ = this._frameLayout.isStackedLayoutObservable;
    const isTooNarrow$ = this._frameLayout.hideSidebarBreakpoint$;

    if (!isExpert) {
      this._showObservable$ = new BehaviorSubject(false).asObservable();
      return;
    }

    this._showObservable$ = combineLatest([isStacked$, isTooNarrow$, this._visibilitySubject]).pipe(
      map(([isStacked, isTooNarrow, showSidebar]) => {
        return showSidebar && !isStacked && !isTooNarrow;
      }),
      distinctUntilChanged()
    );
  }

  registerTemplate(template: TemplateRef<unknown>) {
    this._registeredTemplates.add(template);
    this._update();
  }

  get templateList$() {
    return this._templatesListSubject.asObservable();
  }

  /**
   * combined status of the overall visibility defined by the channel,
   * active layout and the explicitly defined visibility
   */
  get show$() {
    return this._showObservable$;
  }

  setVisibility(value: boolean) {
    if (value) {
      this.show();
    } else {
      this.hide();
    }
  }

  hide() {
    if (this._visibility === true) {
      this._visibility = false;
      this._visibilitySubject.next(this._visibility);
    }
  }

  show() {
    if (this._visibility === false) {
      this._visibility = true;
      this._visibilitySubject.next(this._visibility);
    }
  }

  private _pageChanged() {
    this._registeredTemplates.clear();
    this._update();
  }

  private _update() {
    this._templatesListSubject.next(this._registeredTemplates);
  }
}

results matching ""

    No results matching ""