tango-app-ui-shared 3.7.3-dev6-demo6 → 3.7.3-dev6-demo7

package/src/lib/modules/layout/layout/layout.component.ts

@@ -0,0 +1,425 @@
+import {
+  Component,
+  OnInit,
+  ViewChild,
+  ElementRef,
+  OnDestroy,
+  HostListener,
+} from '@angular/core';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { GlobalStateService, ILayout, LayoutType } from 'tango-app-ui-global';
+import { LayoutInitService, LayoutService } from 'tango-app-ui-global';
+import { AuthService } from '../../../services/auth.service';
+import { ToastService } from '../../../services/toast.service';
+
+@Component({
+  selector: 'lib-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.scss'],
+})
+export class LayoutComponent implements OnInit, OnDestroy {
+  private unsubscribe: Subscription[] = [];
+
+  // Public variables
+  // page
+  pageContainerCSSClasses: string;
+  // header
+  appHeaderDefaultClass: string = '';
+  appHeaderDisplay: boolean;
+  appHeaderDefaultStickyEnabled: boolean;
+  appHeaderDefaultStickyAttributes: { [attrName: string]: string } = {};
+  appHeaderDefaultMinimizeEnabled: boolean;
+  appHeaderDefaultMinimizeAttributes: { [attrName: string]: string } = {};
+  // toolbar
+  appToolbarDisplay: boolean;
+  appToolbarLayout: 'classic' | 'accounting' | 'extended' | 'reports' | 'saas';
+  appToolbarCSSClass: string = '';
+  appToolbarSwapEnabled: boolean;
+  appToolbarSwapAttributes: { [attrName: string]: string } = {};
+  appToolbarStickyEnabled: boolean;
+  appToolbarStickyAttributes: { [attrName: string]: string } = {};
+  appToolbarMinimizeEnabled: boolean;
+  appToolbarMinimizeAttributes: { [attrName: string]: string } = {};
+
+  // content
+  appContentContiner?: 'fixed' | 'fluid';
+  appContentContainerClass: string;
+  contentCSSClasses: string;
+  contentContainerCSSClass: string;
+  // sidebar
+  appSidebarDefaultClass: string;
+  appSidebarDefaultDrawerEnabled: boolean;
+  appSidebarDefaultDrawerAttributes: { [attrName: string]: string } = {};
+  appSidebarDisplay: boolean;
+  appSidebarDefaultStickyEnabled: boolean;
+  appSidebarDefaultStickyAttributes: { [attrName: string]: string } = {};
+  @ViewChild('ktSidebar', { static: true }) ktSidebar: ElementRef;
+  /// sidebar panel
+  appSidebarPanelDisplay: boolean;
+  // footer
+  appFooterDisplay: boolean;
+  appFooterCSSClass: string = '';
+  appFooterContainer: string = '';
+  appFooterContainerCSSClass: string = '';
+  appFooterFixedDesktop: boolean;
+  appFooterFixedMobile: boolean;
+
+  // scrolltop
+  scrolltopDisplay: boolean;
+
+  @ViewChild('ktAside', { static: true }) ktAside: ElementRef;
+  @ViewChild('ktHeaderMobile', { static: true }) ktHeaderMobile: ElementRef;
+  @ViewChild('ktHeader', { static: true }) ktHeader: ElementRef;
+
+  constructor(
+    private initService: LayoutInitService,
+    private layout: LayoutService,
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private authService:AuthService,
+    private toastService:ToastService,
+    private gs:GlobalStateService
+  ) {
+    
+    // define layout type and load layout
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        const currentLayoutType = this.layout.currentLayoutTypeSubject.value;
+
+        const nextLayoutType: LayoutType =
+          this.activatedRoute?.firstChild?.snapshot.data.layout ||
+          this.layout.getBaseLayoutTypeFromLocalStorage();
+
+        if (currentLayoutType !== nextLayoutType || !currentLayoutType) {
+          this.layout.currentLayoutTypeSubject.next(nextLayoutType);
+          this.initService.reInitProps(nextLayoutType);
+        }
+      }
+    });
+  }
+
+  ngOnInit() {
+    const subscr = this.layout.layoutConfigSubject
+      .asObservable()
+      .subscribe((config) => {
+        this.updateProps(config);
+      });
+    this.unsubscribe.push(subscr);
+  }
+
+  updateProps(config: ILayout) {
+    this.scrolltopDisplay = this.layout.getProp(
+      'scrolltop.display',
+      config
+    ) as boolean;
+    this.pageContainerCSSClasses =
+      this.layout.getStringCSSClasses('pageContainer');
+    this.appHeaderDefaultClass = this.layout.getProp(
+      'app.header.default.class',
+      config
+    ) as string;
+    this.appHeaderDisplay = this.layout.getProp(
+      'app.header.display',
+      config
+    ) as boolean;
+    this.appFooterDisplay = this.layout.getProp(
+      'app.footer.display',
+      config
+    ) as boolean;
+    this.appSidebarDisplay = this.layout.getProp(
+      'app.sidebar.display',
+      config
+    ) as boolean;
+    this.appSidebarPanelDisplay = this.layout.getProp(
+      'app.sidebar-panel.display',
+      config
+    ) as boolean;
+    this.appToolbarDisplay = this.layout.getProp(
+      'app.toolbar.display',
+      config
+    ) as boolean;
+    this.contentCSSClasses = this.layout.getStringCSSClasses('content');
+    this.contentContainerCSSClass =
+      this.layout.getStringCSSClasses('contentContainer');
+    this.appContentContiner = this.layout.getProp(
+      'app.content.container',
+      config
+    ) as 'fixed' | 'fluid';
+    this.appContentContainerClass = this.layout.getProp(
+      'app.content.containerClass',
+      config
+    ) as string;
+    // footer
+    if (this.appFooterDisplay) {
+      this.updateFooter(config);
+    }
+    // sidebar
+    if (this.appSidebarDisplay) {
+      this.updateSidebar(config);
+    }
+    // header
+    if (this.appHeaderDisplay) {
+      this.updateHeader(config);
+    }
+    // toolbar
+    if (this.appToolbarDisplay) {
+      this.updateToolbar(config);
+    }
+  }
+
+  updateSidebar(config: ILayout) {
+    this.appSidebarDefaultClass = this.layout.getProp(
+      'app.sidebar.default.class',
+      config
+    ) as string;
+
+    this.appSidebarDefaultDrawerEnabled = this.layout.getProp(
+      'app.sidebar.default.drawer.enabled',
+      config
+    ) as boolean;
+    if (this.appSidebarDefaultDrawerEnabled) {
+      this.appSidebarDefaultDrawerAttributes = this.layout.getProp(
+        'app.sidebar.default.drawer.attributes',
+        config
+      ) as { [attrName: string]: string };
+    }
+
+    this.appSidebarDefaultStickyEnabled = this.layout.getProp(
+      'app.sidebar.default.sticky.enabled',
+      config
+    ) as boolean;
+    if (this.appSidebarDefaultStickyEnabled) {
+      this.appSidebarDefaultStickyAttributes = this.layout.getProp(
+        'app.sidebar.default.sticky.attributes',
+        config
+      ) as { [attrName: string]: string };
+    }
+
+    setTimeout(() => {
+      const sidebarElement = document.getElementById('kt_app_sidebar');
+      // sidebar
+      if (this.appSidebarDisplay && sidebarElement) {
+        const sidebarAttributes = sidebarElement
+          .getAttributeNames()
+          .filter((t) => t.indexOf('data-') > -1);
+        sidebarAttributes.forEach((attr) =>
+          sidebarElement.removeAttribute(attr)
+        );
+
+        if (this.appSidebarDefaultDrawerEnabled) {
+          for (const key in this.appSidebarDefaultDrawerAttributes) {
+            if (this.appSidebarDefaultDrawerAttributes.hasOwnProperty(key)) {
+              sidebarElement.setAttribute(
+                key,
+                this.appSidebarDefaultDrawerAttributes[key]
+              );
+            }
+          }
+        }
+
+        if (this.appSidebarDefaultStickyEnabled) {
+          for (const key in this.appSidebarDefaultStickyAttributes) {
+            if (this.appSidebarDefaultStickyAttributes.hasOwnProperty(key)) {
+              sidebarElement.setAttribute(
+                key,
+                this.appSidebarDefaultStickyAttributes[key]
+              );
+            }
+          }
+        }
+      }
+    }, 0);
+  }
+
+  updateHeader(config: ILayout) {
+    this.appHeaderDefaultStickyEnabled = this.layout.getProp(
+      'app.header.default.sticky.enabled',
+      config
+    ) as boolean;
+    if (this.appHeaderDefaultStickyEnabled) {
+      this.appHeaderDefaultStickyAttributes = this.layout.getProp(
+        'app.header.default.sticky.attributes',
+        config
+      ) as { [attrName: string]: string };
+    }
+
+    this.appHeaderDefaultMinimizeEnabled = this.layout.getProp(
+      'app.header.default.minimize.enabled',
+      config
+    ) as boolean;
+    if (this.appHeaderDefaultMinimizeEnabled) {
+      this.appHeaderDefaultMinimizeAttributes = this.layout.getProp(
+        'app.header.default.minimize.attributes',
+        config
+      ) as { [attrName: string]: string };
+    }
+
+    setTimeout(() => {
+      const headerElement = document.getElementById('kt_app_header');
+      // header
+      if (this.appHeaderDisplay && headerElement) {
+        const headerAttributes = headerElement
+          .getAttributeNames()
+          .filter((t) => t.indexOf('data-') > -1);
+        headerAttributes.forEach((attr) => headerElement.removeAttribute(attr));
+
+        if (this.appHeaderDefaultStickyEnabled) {
+          for (const key in this.appHeaderDefaultStickyAttributes) {
+            if (this.appHeaderDefaultStickyAttributes.hasOwnProperty(key)) {
+              headerElement.setAttribute(
+                key,
+                this.appHeaderDefaultStickyAttributes[key]
+              );
+            }
+          }
+        }
+
+        if (this.appHeaderDefaultMinimizeEnabled) {
+          for (const key in this.appHeaderDefaultMinimizeAttributes) {
+            if (this.appHeaderDefaultMinimizeAttributes.hasOwnProperty(key)) {
+              headerElement.setAttribute(
+                key,
+                this.appHeaderDefaultMinimizeAttributes[key]
+              );
+            }
+          }
+        }
+      }
+    }, 0);
+  }
+
+  updateFooter(config: ILayout) {
+    this.appFooterCSSClass = this.layout.getProp('app.footer.class', config) as string;
+    this.appFooterContainer = this.layout.getProp('app.footer.container', config) as string;
+    this.appFooterContainerCSSClass = this.layout.getProp('app.footer.containerClass', config) as string;
+    if (this.appFooterContainer === 'fixed') {
+      this.appFooterContainerCSSClass += ' container-xxl';
+    } else {
+      if (this.appFooterContainer === 'fluid') {
+        this.appFooterContainerCSSClass += ' container-fluid';
+      }
+    }
+
+    this.appFooterFixedDesktop = this.layout.getProp('app.footer.fixed.desktop', config) as boolean;
+    if (this.appFooterFixedDesktop) {
+      document.body.setAttribute('data-kt-app-footer-fixed', 'true')
+    }
+
+    this.appFooterFixedMobile = this.layout.getProp('app.footer.fixed.mobile') as boolean;
+    if (this.appFooterFixedMobile) {
+      document.body.setAttribute('data-kt-app-footer-fixed-mobile', 'true')
+    }
+  }
+
+  updateToolbar(config: ILayout) {
+    this.appToolbarLayout = this.layout.getProp(
+      'app.toolbar.layout',
+      config
+    ) as 'classic' | 'accounting' | 'extended' | 'reports' | 'saas';
+    this.appToolbarSwapEnabled = this.layout.getProp(
+      'app.toolbar.swap.enabled',
+      config
+    ) as boolean;
+    if (this.appToolbarSwapEnabled) {
+      this.appToolbarSwapAttributes = this.layout.getProp(
+        'app.toolbar.swap.attributes',
+        config
+      ) as { [attrName: string]: string };
+    }
+
+    this.appToolbarStickyEnabled = this.layout.getProp(
+      'app.toolbar.sticky.enabled',
+      config
+    ) as boolean;
+    if (this.appToolbarStickyEnabled) {
+      this.appToolbarStickyAttributes = this.layout.getProp(
+        'app.toolbar.sticky.attributes',
+        config
+      ) as { [attrName: string]: string };
+    }
+
+    this.appToolbarCSSClass =
+      (this.layout.getProp('app.toolbar.class', config) as string) || '';
+    this.appToolbarMinimizeEnabled = this.layout.getProp(
+      'app.toolbar.minimize.enabled',
+      config
+    ) as boolean;
+    if (this.appToolbarMinimizeEnabled) {
+      this.appToolbarMinimizeAttributes = this.layout.getProp(
+        'app.toolbar.minimize.attributes',
+        config
+      ) as { [attrName: string]: string };
+      this.appToolbarCSSClass += ' app-toolbar-minimize';
+    }
+
+    setTimeout(() => {
+      const toolbarElement = document.getElementById('kt_app_toolbar');
+      // toolbar
+      if (this.appToolbarDisplay && toolbarElement) {
+        const toolbarAttributes = toolbarElement
+          .getAttributeNames()
+          .filter((t) => t.indexOf('data-') > -1);
+        toolbarAttributes.forEach((attr) =>
+          toolbarElement.removeAttribute(attr)
+        );
+
+        if (this.appToolbarSwapEnabled) {
+          for (const key in this.appToolbarSwapAttributes) {
+            if (this.appToolbarSwapAttributes.hasOwnProperty(key)) {
+              toolbarElement.setAttribute(
+                key,
+                this.appToolbarSwapAttributes[key]
+              );
+            }
+          }
+        }
+
+        if (this.appToolbarStickyEnabled) {
+          for (const key in this.appToolbarStickyAttributes) {
+            if (this.appToolbarStickyAttributes.hasOwnProperty(key)) {
+              toolbarElement.setAttribute(
+                key,
+                this.appToolbarStickyAttributes[key]
+              );
+            }
+          }
+        }
+
+        if (this.appToolbarMinimizeEnabled) {
+          for (const key in this.appToolbarMinimizeAttributes) {
+            if (this.appToolbarMinimizeAttributes.hasOwnProperty(key)) {
+              toolbarElement.setAttribute(
+                key,
+                this.appToolbarMinimizeAttributes[key]
+              );
+            }
+          }
+        }
+      }
+    }, 0);
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+  previousScroll = 0;
+  // appHeaderDisplay = true; // Initially visible
+  isToolbarFixed = false;
+  @HostListener('window:scroll', [])
+  onScroll(): void {
+    const currentScroll = window.scrollY;
+
+    if (currentScroll > this.previousScroll && currentScroll > 100) {
+      // Hide header on scroll down
+      this.appHeaderDisplay = false;
+      this.isToolbarFixed = true; // Fix toolbar
+    } else {
+      // Show header on scroll up
+      this.appHeaderDisplay = true;
+      this.isToolbarFixed = currentScroll > 100; // Keep toolbar fixed if scrolled beyond 100px
+    }
+
+    this.previousScroll = currentScroll;
+  }
+}

package/src/lib/modules/layout/layout.module.ts

@@ -0,0 +1,129 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InlineSVGModule } from 'ng-inline-svg-2';
+import { RouterModule, Routes } from '@angular/router';
+import {
+  NgbDropdownModule,
+  NgbProgressbarModule,
+  NgbTooltipModule,
+} from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+// import { ExtrasModule } from '../partials/layout/extras/extras.module';
+// import {
+//   DrawersModule,
+//   DropdownMenusModule,
+//   ModalsModule,
+//   EngagesModule,
+// } from '../partials';
+// import { EngagesComponent } from '../partials/layout/engages/engages.component';
+// import { ThemeModeModule } from '../partials/layout/theme-mode-switcher/theme-mode.module';
+import { KeeniconComponent } from './keenicon/keenicon.component';
+import { TranslationModule } from '../../i18n';
+import { LayoutComponent } from './layout/layout.component';
+import { HeaderComponent } from './header/header.component';
+import { ContentComponent } from './content/content.component';
+import { FooterComponent } from './footer/footer.component';
+import { ScriptsInitComponent } from './scripts-init/scripts-init.component';
+import { ToolbarComponent } from './toolbar/toolbar.component';
+import { PageTitleComponent } from './header/page-title/page-title.component';
+import { HeaderMenuComponent } from './header/header-menu/header-menu.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { SidebarLogoComponent } from './sidebar/sidebar-logo/sidebar-logo.component';
+import { SidebarMenuComponent } from './sidebar/sidebar-menu/sidebar-menu.component';
+import { SidebarFooterComponent } from './sidebar/sidebar-footer/sidebar-footer.component';
+import { NavbarComponent } from './header/navbar/navbar.component';
+import { AccountingComponent } from './toolbar/accounting/accounting.component';
+import { ClassicComponent } from './toolbar/classic/classic.component';
+import { ExtendedComponent } from './toolbar/extended/extended.component';
+import { ReportsComponent } from './toolbar/reports/reports.component';
+import { SaasComponent } from './toolbar/saas/saas.component';
+import { Routing } from '../../routes/routing';
+import { LayoutScrollTopComponent } from './scroll-top/scroll-top.component';
+import { CommonSharedModule } from '../common/common-shared.module';
+import { FormsModule } from '@angular/forms';
+import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
+import { ClientSettingsComponent } from './toolbar/client-settings/client-settings.component';
+import { DatepickerComponent } from './toolbar/datepicker/datepicker.component';
+import { DateSingleSelectComponent } from './toolbar/date-single-select/date-single-select.component';
+import { SingleStoreComponent } from './toolbar/single-store/single-store.component';
+import { NotificationsInnerComponent } from './header/notifications-inner/notifications-inner.component';
+import { CsmAssignConfirmationComponent } from './components/csm-assign-confirmation/csm-assign-confirmation.component';
+import { TrafficHeaderComponent } from './toolbar/traffic-header/traffic-header/traffic-header.component';
+import { TraxHeaderComponent } from './toolbar/trax-header/trax-header.component';
+import { SingleStoredateComponent } from './toolbar/single-storedate/single-storedate.component';
+import { StoresingleComponent } from './toolbar/storesingle/storesingle.component';
+import { TraxWithoutdateComponent } from './toolbar/trax-withoutdate/trax-withoutdate.component';
+import { TrafficNobComponent } from './toolbar/traffic-nob/traffic-nob.component';
+import { MetricsHeaderComponent } from './toolbar/metrics-header/metrics-header.component';
+import { SingleClientstoreDateComponent } from './toolbar/single-clientstore-date/single-clientstore-date.component';
+import { ZoneHeaderComponent } from './toolbar/zone-header/zone-header.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LayoutComponent,
+    children: Routing,
+  },
+];
+
+@NgModule({
+  declarations: [
+    LayoutComponent,
+    HeaderComponent,
+    ContentComponent,
+    FooterComponent,
+    ScriptsInitComponent,
+    ToolbarComponent,
+    PageTitleComponent,
+    HeaderMenuComponent,
+    // EngagesComponent,
+    SidebarComponent,
+    SidebarLogoComponent,
+    SidebarMenuComponent,
+    SidebarFooterComponent,
+    NavbarComponent,
+    AccountingComponent,
+    ClassicComponent,
+    ExtendedComponent,
+    ReportsComponent,
+    SaasComponent,
+    KeeniconComponent,
+    LayoutScrollTopComponent,
+    ClientSettingsComponent,
+    DatepickerComponent,
+    DateSingleSelectComponent,
+    SingleStoreComponent,
+    NotificationsInnerComponent,
+    CsmAssignConfirmationComponent,
+    TrafficHeaderComponent,
+    TraxHeaderComponent,
+    SingleStoredateComponent,
+    StoresingleComponent,
+    TraxWithoutdateComponent,
+    TrafficNobComponent,
+    MetricsHeaderComponent,
+    SingleClientstoreDateComponent,
+    ZoneHeaderComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    TranslationModule,
+    InlineSVGModule,
+    NgbDropdownModule,
+    NgbProgressbarModule,
+    // ExtrasModule,
+    // ModalsModule,
+    // DrawersModule,
+    // EngagesModule,
+    // DropdownMenusModule,
+    NgbTooltipModule,
+    TranslateModule,
+    // ThemeModeModule,
+    CommonSharedModule,
+    FormsModule,
+    NgxDaterangepickerMd.forRoot()
+  ],
+  exports: [RouterModule],
+})
+export class LayoutModule {}

package/src/lib/modules/layout/scripts-init/scripts-init.component.ts

@@ -0,0 +1,81 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ResolveEnd, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { Observable, Subscription } from 'rxjs';
+import {
+  ToggleComponent,
+  ScrollTopComponent,
+  DrawerComponent,
+  StickyComponent,
+  MenuComponent,
+  ScrollComponent,
+} from 'tango-app-ui-global';
+import { Title } from '@angular/platform-browser';
+import { LayoutService, PageInfoService } from 'tango-app-ui-global';
+
+@Component({
+  selector: 'lib-scripts-init',
+  templateUrl: './scripts-init.component.html',
+})
+export class ScriptsInitComponent implements OnInit, OnDestroy {
+  private unsubscribe: Subscription[] = [];
+  constructor(
+    private layout: LayoutService,
+    private pageInfo: PageInfoService,
+    private router: Router,
+    private titleService: Title,
+  ) {
+    const initPageInfo = () => {
+      setTimeout(() => {
+        // this.pageInfo.calculateTitle();
+        // this.pageInfo.calculateBreadcrumbs();
+
+        this.pageInfo.title.asObservable().subscribe((title) => {
+          this.titleService.setTitle(title + ' - TangoEye');
+        });
+      }, 10);
+    };
+
+    initPageInfo();
+    // subscribe to router events
+    this.router.events
+      .pipe(filter((event) => event instanceof ResolveEnd))
+      .subscribe(initPageInfo);
+  }
+
+  ngOnInit(): void {
+    this.pluginsInitialization();
+    const layoutUpdateSubscription = this.layout.layoutConfigSubject
+      .asObservable()
+      .subscribe(() => {
+        this.pluginsReInitialization();
+      });
+    this.unsubscribe.push(layoutUpdateSubscription);
+  }
+
+  pluginsInitialization() {
+    setTimeout(() => {
+      ToggleComponent.bootstrap();
+      ScrollTopComponent.bootstrap();
+      DrawerComponent.bootstrap();
+      StickyComponent.bootstrap();
+      MenuComponent.bootstrap();
+      ScrollComponent.bootstrap();
+    }, 200);
+  }
+
+  pluginsReInitialization() {
+    setTimeout(() => {
+      ToggleComponent.reinitialization();
+      ScrollTopComponent.reinitialization();
+      DrawerComponent.reinitialization();
+      StickyComponent.bootstrap();
+      MenuComponent.reinitialization();
+      ScrollComponent.reinitialization();
+    }, 100);
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+}

package/src/lib/modules/layout/scroll-top/scroll-top.component.html

@@ -0,0 +1 @@
+<lib-keenicon name="arrow-up" class="text-white fw-bold"></lib-keenicon>