tango-app-ui-shared 3.0.0

package/src/lib/modules/layout/toolbar/extended/extended.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExtendedComponent } from './extended.component';
+
+describe('ExtendedComponent', () => {
+  let component: ExtendedComponent;
+  let fixture: ComponentFixture<ExtendedComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ExtendedComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ExtendedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-extended',
+  templateUrl: './extended.component.html',
+  styleUrls: ['./extended.component.scss'],
+})
+export class ExtendedComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/lib/modules/layout/toolbar/reports/reports.component.html

@@ -0,0 +1,62 @@
+<!--begin::Wrapper-->
+<div class="d-flex align-items-center flex-shrink-0">
+  <!--begin::Label-->
+  <span class="fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block">Filter By:</span>
+  <!--end::Label-->
+
+  <div class="flex-shrink-0 ">
+    <ul class="nav">
+      <li class="nav-item">
+        <a class="nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light active fw-semibold fs-7 px-4 me-1"
+          data-bs-toggle="tab" href="#">Today</a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4 me-1"
+          data-bs-toggle="tab" href="">Week</a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4"
+          data-bs-toggle="tab" href="#">Day</a>
+      </li>
+    </ul>
+  </div>
+</div>
+<!--end::Wrapper-->
+
+<!--begin::Separartor-->
+<div class="bullet bg-secondary h-35px w-1px mx-5"></div>
+<!--end::Separartor-->
+
+<!--begin::Wrapper-->
+<div class="d-flex align-items-center">
+  <!--begin::Label-->
+  <span class="fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block">Sort By:</span>
+  <!--end::Label-->
+
+  <!--begin::Select-->
+  <select class="form-select form-select-sm w-md-125px form-select-solid" data-control="select2"
+    data-placeholder="Latest" data-hide-search="true">
+    <option value=""></option>
+    <option value="1" selected>Latest</option>
+    <option value="2">In Progress</option>
+    <option value="3">Done</option>
+  </select>
+  <!--end::Select-->
+
+  <!--begin::Actions-->
+  <div class="d-flex align-items-center ms-3">
+    <button type="button" class="btn btn-sm btn-icon btn-light-primary me-3" data-bs-toggle="tooltip"
+      data-bs-placement="top" title="Enable grid view">
+      <lib-keenicon name="element-11" class="fs-2 text-primary"></lib-keenicon>
+    </button>
+
+    <button type="button" class="btn btn-sm btn-icon btn-light" data-bs-toggle="tooltip" data-bs-placement="top"
+      title="Enable row view">
+      <lib-keenicon name="abstract-14" class="fs-2 text-gray400"></lib-keenicon>
+    </button>
+  </div>
+  <!--end::Actions-->
+</div>
+<!--end::Wrapper-->

package/src/lib/modules/layout/toolbar/reports/reports.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReportsComponent } from './reports.component';
+
+describe('ReportsComponent', () => {
+  let component: ReportsComponent;
+  let fixture: ComponentFixture<ReportsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ReportsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ReportsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,14 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-reports',
+  templateUrl: './reports.component.html',
+  styleUrls: ['./reports.component.scss'],
+})
+export class ReportsComponent implements OnInit {
+  @Input() appPageTitleDisplay: boolean;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/lib/modules/layout/toolbar/saas/saas.component.html

@@ -0,0 +1,77 @@
+<!--begin::Action wrapper-->
+<div class="d-flex align-items-center">
+  <!--begin::Label-->
+  <span class="fs-7 fw-bold text-gray-700 pe-4 text-nowrap d-none d-md-block">Sort By:</span>
+  <!--end::Label-->
+
+  <!--begin::Select-->
+  <select class="form-select form-select-sm form-select-solid w-100px w-xxl-125px" data-control="select2"
+    data-placeholder="Latest" data-hide-search="true">
+    <option value=""></option>
+    <option value="1" selected>Latest</option>
+    <option value="2">In Progress</option>
+    <option value="3">Done</option>
+  </select>
+  <!--end::Select-->
+</div>
+<!--end::Action wrapper-->
+
+<!--begin::Action wrapper-->
+<div class="d-flex align-items-center">
+  <!--begin::Separartor-->
+  <div class="bullet bg-secondary h-35px w-1px mx-5"></div>
+  <!--end::Separartor-->
+
+  <!--begin::Label-->
+  <span class="fs-7 text-gray-700 fw-bold">Impact Level:</span>
+  <!--end::Label-->
+
+  <!--begin::NoUiSlider-->
+  <div class="d-flex align-items-center ps-4">
+    <div id="kt_app_toolbar_slider" class="noUi-target noUi-target-success w-75px w-xxl-150px noUi-sm"></div>
+
+    <span id="kt_app_toolbar_slider_value"
+      class="d-flex flex-center bg-light-success rounded-circle w-35px h-35px ms-4 fs-7 fw-bold text-success"
+      data-bs-toggle="tooltip" data-bs-placement="top" title="Set impact level">
+    </span>
+  </div>
+  <!--end::NoUiSlider-->
+
+  <!--begin::Separartor-->
+  <div class="bullet bg-secondary h-35px w-1px mx-5"></div>
+  <!--end::Separartor-->
+</div>
+<!--end::Action wrapper-->
+
+<!--begin::Action wrapper-->
+<div class="d-flex align-items-center">
+  <!--begin::Label-->
+  <span class="fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block">Quick Tools:</span>
+  <!--end::Label-->
+
+  <!--begin::Actions-->
+  <div class="d-flex">
+    <!--begin::Action-->
+    <a href="#" class="btn btn-sm btn-icon btn-icon-muted btn-active-icon-success" data-bs-toggle="tooltip"
+      data-bs-trigger="hover" data-bs-placement="top" title="Add new page">
+      <lib-keenicon name="files" class="fs-2x"></lib-keenicon>
+    </a>
+    <!--end::Action-->
+
+    <!--begin::Action-->
+    <a href="#" class="btn btn-sm btn-icon btn-icon-muted btn-active-icon-success" data-bs-toggle="tooltip"
+      data-bs-trigger="hover" data-bs-placement="top" title="Add new category">
+      <lib-keenicon name="add-files" class="fs-2x"></lib-keenicon>
+    </a>
+    <!--end::Action-->
+
+    <!--begin::Action-->
+    <a href="#" class="btn btn-sm btn-icon btn-icon-muted btn-active-icon-success" data-bs-toggle="tooltip"
+      data-bs-trigger="hover" data-bs-placement="top" title="Add new section">
+      <lib-keenicon name="search-list" class="fs-2x"></lib-keenicon>
+    </a>
+    <!--end::Action-->
+  </div>
+  <!--end::Actions-->
+</div>
+<!--end::Action wrapper-->

package/src/lib/modules/layout/toolbar/saas/saas.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SaasComponent } from './saas.component';
+
+describe('SaasComponent', () => {
+  let component: SaasComponent;
+  let fixture: ComponentFixture<SaasComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SaasComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SaasComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,14 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-saas',
+  templateUrl: './saas.component.html',
+  styleUrls: ['./saas.component.scss'],
+})
+export class SaasComponent implements OnInit {
+  @Input() appPageTitleDisplay: boolean;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/lib/modules/layout/toolbar/toolbar.component.html

@@ -0,0 +1,27 @@
+<!--begin::Toolbar container-->
+<div id="kt_app_toolbar_container" class="app-container" [ngClass]="appToolbarContainerCSSClass">
+  <ng-container *ngIf="showPageTitle()">
+    <lib-page-title [appPageTitleDirection]="appPageTitleDirection" [appPageTitleBreadcrumb]="appPageTitleBreadcrumb"
+      [appPageTitleDescription]="appPageTitleDescription" class="page-title d-flex flex-wrap me-3"
+      [ngClass]="{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}">
+    </lib-page-title>
+  </ng-container>
+
+  <ng-container *ngIf="appToolbarLayout === 'classic'">
+    <lib-classic class="d-flex align-items-center gap-2 gap-lg-3"></lib-classic>
+  </ng-container>
+  <ng-container *ngIf="appToolbarLayout === 'accounting'">
+    <lib-accounting class="d-flex align-items-center me-5"></lib-accounting>
+  </ng-container>
+  <ng-container *ngIf="appToolbarLayout === 'extended'">
+    <lib-extended class="d-flex align-items-center flex-shrink-0 me-5"></lib-extended>
+  </ng-container>
+  <ng-container *ngIf="appToolbarLayout === 'reports'">
+    <lib-reports class="d-flex align-items-center overflow-auto" [appPageTitleDisplay]="appPageTitleDisplay">
+    </lib-reports>
+  </ng-container>
+  <ng-container *ngIf="appToolbarLayout === 'saas'">
+    <lib-saas class="d-flex align-items-center gap-2" [appPageTitleDisplay]="appPageTitleDisplay"></lib-saas>
+  </ng-container>
+</div>
+<!--end::Toolbar container-->

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToolbarComponent } from './toolbar.component';
+
+describe('ToolbarComponent', () => {
+  let component: ToolbarComponent;
+  let fixture: ComponentFixture<ToolbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ToolbarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToolbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,125 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { LayoutService } from 'tango-app-metronics';
+import { ILayout, LayoutType } from 'tango-app-metronics';
+
+@Component({
+  selector: 'lib-toolbar',
+  templateUrl: './toolbar.component.html',
+  styleUrls: ['./toolbar.component.scss'],
+})
+export class ToolbarComponent implements OnInit, OnDestroy {
+  private unsubscribe: Subscription[] = [];
+
+  // Public props
+  @Input() currentLayoutType: LayoutType | null;
+  @Input() appToolbarLayout:
+    | 'classic'
+    | 'accounting'
+    | 'extended'
+    | 'reports'
+    | 'saas';
+
+  // toolbar
+  appToolbarDisplay: boolean;
+  appToolbarContainer: 'fixed' | 'fluid';
+  appToolbarContainerCSSClass: string = '';
+  appToolbarFixedDesktop: boolean;
+  appToolbarFixedMobile: boolean;
+  appPageTitleDisplay: boolean;
+
+  // page title
+  appPageTitleDirection: string = '';
+  appPageTitleCSSClass: string = '';
+  appPageTitleBreadcrumb: boolean;
+  appPageTitleDescription: boolean;
+
+  constructor(private layout: LayoutService) {}
+
+  ngOnInit(): void {
+    const subscr = this.layout.layoutConfigSubject
+      .asObservable()
+      .subscribe((config: ILayout) => {
+        this.updateProps(config);
+      });
+    this.unsubscribe.push(subscr);
+  }
+
+  updateProps(config: ILayout) {
+    this.appToolbarDisplay = this.layout.getProp(
+      'app.toolbar.display',
+      config
+    ) as boolean;
+    if (!this.appToolbarDisplay) {
+      return;
+    }
+
+    this.appPageTitleDisplay = this.layout.getProp(
+      'app.pageTitle.display',
+      config
+    ) as boolean;
+    this.appToolbarContainer = this.layout.getProp(
+      'app.toolbar.container',
+      config
+    ) as 'fluid' | 'fixed';
+    this.appToolbarContainerCSSClass =
+      this.appToolbarContainer === 'fixed'
+        ? 'container-xxl'
+        : 'container-fluid';
+    const containerClass = this.layout.getProp(
+      'app.toolbar.containerClass',
+      config
+    ) as string;
+    if (containerClass) {
+      this.appToolbarContainerCSSClass += ` ${containerClass}`;
+    }
+
+    this.appToolbarFixedDesktop = this.layout.getProp(
+      'app.toolbar.fixed.desktop',
+      config
+    ) as boolean;
+    if (this.appToolbarFixedDesktop) {
+      document.body.setAttribute('data-kt-app-toolbar-fixed', 'true');
+    }
+
+    this.appToolbarFixedMobile = this.layout.getProp(
+      'app.toolbar.fixed.mobile',
+      config
+    ) as boolean;
+    if (this.appToolbarFixedMobile) {
+      document.body.setAttribute('data-kt-app-toolbar-fixed-mobile', 'true');
+    }
+
+    // toolbar
+    this.appPageTitleDirection = this.layout.getProp(
+      'app.pageTitle.direction',
+      config
+    ) as string;
+    this.appPageTitleCSSClass = this.layout.getProp(
+      'app.pageTitle.class',
+      config
+    ) as string;
+    this.appPageTitleBreadcrumb = this.layout.getProp(
+      'app.pageTitle.breadCrumb',
+      config
+    ) as boolean;
+    this.appPageTitleDescription = this.layout.getProp(
+      'app.pageTitle.description',
+      config
+    ) as boolean;
+
+    document.body.setAttribute('data-kt-app-toolbar-enabled', 'true');
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+
+  showPageTitle() {
+    const viewsWithPageTitles = ['classic', 'reports', 'saas'];
+    return (
+      this.appPageTitleDisplay &&
+      viewsWithPageTitles.some((t) => t === this.appToolbarLayout)
+    );
+  }
+}

package/src/lib/routes/route-wraper-modules/manage-wrapper.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { TangoManageModule } from 'projects/tango-manage/src/public-api';
+
+
+@NgModule({
+  declarations: [
+  ],
+  imports: [
+    TangoManageModule
+  ]
+})
+export class ManageWrapperModule { }

package/src/lib/routes/route-wraper-modules/profile-wrapper.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { TangoProfileModule } from 'projects/tango-profile/src/public-api';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    TangoProfileModule
+  ]
+})
+export class ProfileWrapperModule { }

package/src/lib/routes/route-wraper-modules/store-wrapper.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { TangoStoreModule } from 'projects/tango-store/src/public-api';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    TangoStoreModule
+  ]
+})
+export class StoreWrapperModule { }

package/src/lib/routes/routing.ts

@@ -0,0 +1,72 @@
+import { Routes } from '@angular/router';
+
+const Routing: Routes = [
+  {
+    path: 'manage',
+    loadChildren: () => import('./route-wraper-modules/manage-wrapper.module').then((m) => m.ManageWrapperModule),
+  },
+  {
+    path: 'manage/stores/:id',
+    loadChildren: () => import('./route-wraper-modules/store-wrapper.module').then((m) => m.StoreWrapperModule),
+  },
+  {
+    path: 'profile',
+    loadChildren: () => import('./route-wraper-modules/profile-wrapper.module').then((m) => m.ProfileWrapperModule),
+  },
+  // {
+  //   path: 'dashboard',
+  //   loadChildren: () => import('./route-wraper-modules/dashboard-wrapper.module').then((m) => m.DashboardWrapperModule),
+  // },
+  // {
+  //   path: 'builder',
+  //   loadChildren: () => import('./builder/builder.module').then((m) => m.BuilderModule),
+  // },
+  // {
+  //   path: 'crafted/pages/profile',
+  //   loadChildren: () => import('../modules/profile/profile.module').then((m) => m.ProfileModule),
+  //   data: { layout: 'light-sidebar' },
+  // },
+  // {
+  //   path: 'crafted/account',
+  //   loadChildren: () => import('./route-wraper-modules/account-wrapper.module').then((m) => m.AccountWrapperModule),
+  //   // data: { layout: 'dark-header' },
+  // },
+  // {
+  //   path: 'crafted/pages/wizards',
+  //   loadChildren: () => import('../modules/wizards/wizards.module').then((m) => m.WizardsModule),
+  //   data: { layout: 'light-header' },
+  // },
+  // {
+  //   path: 'crafted/widgets',
+  //   loadChildren: () => import('../modules/widgets-examples/widgets-examples.module').then((m) => m.WidgetsExamplesModule),
+  //   data: { layout: 'light-header' },
+  // },
+  // {
+  //   path: 'apps/chat',
+  //   loadChildren: () => import('../modules/apps/chat/chat.module').then((m) => m.ChatModule),
+  //   data: { layout: 'light-sidebar' },
+  // },
+  // {
+  //   path: 'apps/users',
+  //   loadChildren: () => import('./user/user.module').then((m) => m.UserModule),
+  // },
+  // {
+  //   path: 'apps/roles',
+  //   loadChildren: () => import('./role/role.module').then((m) => m.RoleModule),
+  // },
+  // {
+  //   path: 'apps/permissions',
+  //   loadChildren: () => import('./permission/permission.module').then((m) => m.PermissionModule),
+  // },
+  // {
+  //   path: '',
+  //   redirectTo: '/dashboard',
+  //   pathMatch: 'full',
+  // },
+  // {
+  //   path: '**',
+  //   redirectTo: 'error/404',
+  // },
+];
+
+export { Routing };

package/src/lib/services/auth.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+
+  constructor(private router:Router) { }
+
+  logout() {
+    this.router.navigate(['/auth/login'], {
+      queryParams: {},
+    });
+  }
+}

package/src/lib/services/global-state.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { sampleType } from '../interfaces/global-state';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GlobalStateService {
+  userData = new BehaviorSubject<sampleType | null>(null)
+  environment = new BehaviorSubject<any>(null)
+}

package/src/public-api.ts

@@ -0,0 +1,64 @@
+/*
+ * Public API Surface of tango-app-shared
+ */
+
+// Components
+export * from './lib/modules/layout/layout/layout.component';
+export * from './lib/modules/layout/content/content.component';
+export * from './lib/modules/layout/footer/footer.component';
+export * from './lib/modules/layout/header/header.component';
+export * from './lib/modules/layout/header/header-menu/header-menu.component';
+export * from './lib/modules/layout/header/navbar/navbar.component';
+export * from './lib/modules/layout/header/page-title/page-title.component';
+export * from './lib/modules/layout/scripts-init/scripts-init.component';
+export * from './lib/modules/layout/sidebar/sidebar-footer/sidebar-footer.component';
+export * from './lib/modules/layout/sidebar/sidebar-logo/sidebar-logo.component';
+export * from './lib/modules/layout/sidebar/sidebar-menu/sidebar-menu.component';
+export * from './lib/modules/layout/sidebar/sidebar.component';
+export * from './lib/modules/layout/toolbar/accounting/accounting.component';
+export * from './lib/modules/layout/toolbar/classic/classic.component';
+export * from './lib/modules/layout/toolbar/extended/extended.component';
+export * from './lib/modules/layout/toolbar/reports/reports.component';
+export * from './lib/modules/layout/toolbar/saas/saas.component';
+export * from './lib/modules/layout/toolbar/toolbar.component';
+export * from './lib/modules/layout/scroll-top/scroll-top.component';
+
+export * from './lib/modules/errors/errors.component';
+export * from './lib/modules/errors/error404/error404.component';
+export * from './lib/modules/errors/error500/error500.component';
+
+
+// i18n
+export * from './lib/i18n/translation.module';
+export * from './lib/i18n/translation.service';
+export * as enLang from './lib/i18n/vocabs/en';
+export * as chLang from './lib/i18n/vocabs/ch';
+export * as deLang from './lib/i18n/vocabs/de';
+export * as esLang from './lib/i18n/vocabs/es';
+export * as frLang from './lib/i18n/vocabs/fr';
+export * as jpLang from './lib/i18n/vocabs/jp';
+
+// modules
+export * from './lib/modules/layout/layout.module';
+export * from './lib/modules/errors/errors.module';
+
+// guards
+export * from './lib/guards/auth.guard';
+
+// interfaces
+export * from './lib/interfaces/global-state';
+
+
+// services
+export * from './lib/services/global-state.service';
+export * from './lib/services/auth.service';
+
+// interceptors
+export * from './lib/interceptors/http-auth-interceptor';
+
+
+
+
+
+
+

package/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}