UI-Prototype/src/app/app.component.ts

import { Component, HostListener, OnInit } from '@angular/core';
import { ActivatedRoute, Router, RouterModule, RouterOutlet, RoutesRecognized } from '@angular/router';
import { MatModule } from '../dependencies/angularlib/mat.module';
import { Angularlib } from 'angularlib/angularlib.module';
import { BaseComponent, untilDestroy } from 'angularlib/base.component';
import { Subject, filter, map, repeat, takeUntil, timer } from 'rxjs';
import { Title } from '@angular/platform-browser';
import { LoginService } from 'angularlib/login/login.service';
import { CommonModule, DatePipe } from '@angular/common';
import { ChangeLanguage } from 'angularlib/labels/label.actions';
import { ComponentService } from 'angularlib/component.service';
import { NotificationModule } from 'angularlib/notification/notification.module';
import { NOTIFICATION_STATE_TOKEN, NotificationState } from 'angularlib/notification/notification.state';
import { Notification } from 'angularlib/notification/notification.actions';
import { generateId } from 'angularlib/base.service';
import { Store } from '@ngxs/store';
import config from '../config/config.json';
import { UIAuthActions } from 'angularlib/login/state/login.actions';
import { Platform } from '@angular/cdk/platform';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet, 
    MatModule, 
    RouterModule,
    Angularlib,
    NotificationModule
  ],
  providers:[DatePipe],
  templateUrl: './app.component.html',
  styleUrls: [
    './app.component.scss'
  ]
})
export class AppComponent extends BaseComponent implements OnInit {
  title = 'Financial Information System';

  /**current date */
  protected currentDate = new Date();

  /**session timeout duration in milliseconds*/
  private duration: number = config?.sessionTimeoutDuration;
  private startTimeout$ = new Subject();
  private stopTimeout$ = new Subject();
  private timeout = timer(this.duration).pipe(
      map(() => {
        if(this.loginService.user){
          console.warn('session inactive timeout, logging out...');
          this.store.dispatch(new UIAuthActions.RedirectAfterLogin(this.route.snapshot));
          this.loginService.logout();
        }
      }),
      takeUntil(this.stopTimeout$),
      repeat({delay:() => this.startTimeout$})
  );

  /**current theme of application */
  protected theme;

  /**number of notifications */
  protected notificationCount: number = 0;

  constructor(
    private router: Router,
    private store: Store,
    protected loginService: LoginService,
    /**Platform Browser title */
    protected pbTitle: Title,
    protected cs: ComponentService,
    private route: ActivatedRoute,
    private platform: Platform
  ) {
    super(store,cs);
  }

  @HostListener('window:mousedown')
  private refreshTimeout() {
    this.stopTimeout$.next(null);
    this.startTimeout$.next(null);
  }

  ngOnInit(): void {
    this.router.events.pipe(untilDestroy(this),
    filter((event) => event instanceof RoutesRecognized),
    map((res:any) => {
      const data = res.state.root.firstChild.firstChild || res.state.root.firstChild;
      return data.data?.title;
    })
    ).subscribe(title => {
      if (typeof title === 'string')
        this.title = title;
      else this.title = this.getLabel(title?.key,title?.default);
      this.pbTitle.setTitle(this.title);
    });

    /**subsribe user changes and initiate timeout timer */
    this.loginService.user$.pipe(untilDestroy(this)).subscribe(user => {
      if (user) {
        this.timeout.pipe(untilDestroy(this),takeUntil(this.loginService.loggedOut)).subscribe();
      }
    });

    this.store.select(NOTIFICATION_STATE_TOKEN).pipe(untilDestroy(this)).subscribe({
      next: (state:any) => {
        this.notificationCount = state.notifications.length;
      }
    });

    if (this.platform.ANDROID || this.platform.IOS) this.pwaPrompt();
  }

  /**
   * change application language
   * @param {string} language
   */
  protected changeLanguage(language: string) {
    this.store.dispatch(new ChangeLanguage(language));
  }

  protected addNotification() {
    this.store.dispatch(new Notification.Add({
      message:{title:generateId(),desc:generateId(),timestamp: new Date()}
    }));
  }

  /**prompt to install PWA App */
  private pwaPrompt() {
    let installPrompt = null;
    const installButton = document.querySelector("#installApp");

    const disableInAppInstallPrompt = () =>  {
      installPrompt = null;
      installButton.setAttribute("hidden","");
    }

    window.addEventListener("beforeinstallprompt",(event) => {
      event.preventDefault();
      installPrompt = event;
      installButton.removeAttribute("hidden");
    });

    installButton.addEventListener("click", async () => {
      if (!installPrompt) return;
      const result = await installPrompt.prompt();
      disableInAppInstallPrompt();
    });

    window.addEventListener("appinstalled", () => {
      disableInAppInstallPrompt();
    });
  }
}