@hitsoft/e-donusum 1.0.8 → 1.0.9

package/_metronic/layout/components/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">
+      <app-keenicon name="element-11" class="fs-2 text-primary"></app-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">
+      <app-keenicon name="abstract-14" class="fs-2 text-gray400"></app-keenicon>
+    </button>
+  </div>
+  <!--end::Actions-->
+</div>
+<!--end::Wrapper-->

package/_metronic/layout/components/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/_metronic/layout/components/toolbar/reports/reports.component.ts

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

package/_metronic/layout/components/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">
+      <app-keenicon name="files" class="fs-2x"></app-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">
+      <app-keenicon name="add-files" class="fs-2x"></app-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">
+      <app-keenicon name="search-list" class="fs-2x"></app-keenicon>
+    </a>
+    <!--end::Action-->
+  </div>
+  <!--end::Actions-->
+</div>
+<!--end::Action wrapper-->

package/_metronic/layout/components/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/_metronic/layout/components/toolbar/saas/saas.component.ts

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

package/_metronic/layout/components/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()">
+    <app-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}">
+    </app-page-title>
+  </ng-container>
+
+  <ng-container *ngIf="appToolbarLayout === 'classic'">
+    <app-classic class="d-flex align-items-center gap-2 gap-lg-3"></app-classic>
+  </ng-container>
+  <ng-container *ngIf="appToolbarLayout === 'accounting'">
+    <app-accounting class="d-flex align-items-center me-5"></app-accounting>
+  </ng-container>
+  <ng-container *ngIf="appToolbarLayout === 'extended'">
+    <app-extended class="d-flex align-items-center flex-shrink-0 me-5"></app-extended>
+  </ng-container>
+  <ng-container *ngIf="appToolbarLayout === 'reports'">
+    <app-reports class="d-flex align-items-center overflow-auto" [appPageTitleDisplay]="appPageTitleDisplay">
+    </app-reports>
+  </ng-container>
+  <ng-container *ngIf="appToolbarLayout === 'saas'">
+    <app-saas class="d-flex align-items-center gap-2" [appPageTitleDisplay]="appPageTitleDisplay"></app-saas>
+  </ng-container>
+</div>
+<!--end::Toolbar container-->

package/_metronic/layout/components/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/_metronic/layout/components/toolbar/toolbar.component.ts

@@ -0,0 +1,126 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ILayout, LayoutType } from '../../core/configs/config';
+import { LayoutService } from '../../core/layout.service';
+
+@Component({
+  selector: 'app-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');
+    document.body.setAttribute('data-kt-app-header-minimize', 'on');
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+
+  showPageTitle() {
+    const viewsWithPageTitles = ['classic', 'reports', 'saas'];
+    return (
+      this.appPageTitleDisplay &&
+      viewsWithPageTitles.some((t) => t === this.appToolbarLayout)
+    );
+  }
+}

package/_metronic/layout/components/topbar/topbar.component.html

@@ -0,0 +1,90 @@
+<!-- Search toolbar -->
+<div class="d-flex align-items-center" [ngClass]="toolbarButtonMarginClass">
+  <div class="btn btn-icon btn-active-light-primary position-relative" [ngClass]="toolbarButtonHeightClass"
+    data-kt-menu-trigger="click" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end"
+    data-kt-menu-flip="bottom">
+    <app-keenicon name="magnifier" class="" [ngClass]="toolbarButtonIconSizeClass"></app-keenicon>
+  </div>
+  <app-search-result-inner></app-search-result-inner>
+</div>
+
+<!-- Activities -->
+<div class="d-flex align-items-center" [ngClass]="toolbarButtonMarginClass">
+  <!-- begin::Drawer toggle -->
+  <div class="btn btn-icon btn-active-light-primary" [ngClass]="toolbarButtonHeightClass" id="kt_activities_toggle">
+    <app-keenicon name="chart-simple" class="" [ngClass]="toolbarButtonIconSizeClass"></app-keenicon>
+  </div>
+  <!-- end::Drawer toggle -->
+</div>
+
+<!-- NOTIFICATIONS -->
+<div class="d-flex align-items-center" [ngClass]="toolbarButtonMarginClass">
+  <div class="btn btn-icon btn-active-light-primary position-relative" [ngClass]="toolbarButtonHeightClass"
+    data-kt-menu-trigger="click" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end"
+    data-kt-menu-flip="bottom">
+    <app-keenicon name="element-plus" class="" [ngClass]="toolbarButtonIconSizeClass"></app-keenicon>
+  </div>
+  <app-notifications-inner></app-notifications-inner>
+</div>
+
+<!-- CHAT -->
+<div class="d-flex align-items-center" [ngClass]="toolbarButtonMarginClass">
+  <!-- begin::Menu wrapper -->
+  <div class="btn btn-icon btn-active-light-primary position-relative" [ngClass]="toolbarButtonHeightClass"
+    id="kt_drawer_chat_toggle">
+    <app-keenicon name="message-text-2" class="" [ngClass]="toolbarButtonIconSizeClass"></app-keenicon>
+    <span class="
+        bullet bullet-dot
+        bg-success
+        h-6px
+        w-6px
+        position-absolute
+        translate-middle
+        top-0
+        start-50
+        animation-blink
+      "></span>
+  </div>
+  <!-- end::Menu wrapper -->
+</div>
+
+<!-- Quick links -->
+<div class="d-flex align-items-center" [ngClass]="toolbarButtonMarginClass">
+  <div class="btn btn-icon btn-active-light-primary" [ngClass]="toolbarButtonHeightClass" data-kt-menu-trigger="click"
+    data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end" data-kt-menu-flip="bottom">
+    <app-keenicon name="element-11" class="" [ngClass]="toolbarButtonIconSizeClass"></app-keenicon>
+  </div>
+  <app-quick-links-inner></app-quick-links-inner>
+</div>
+
+<!-- begin::Theme mode -->
+<app-theme-mode-switcher class="d-flex align-items-center" [ngClass]="toolbarButtonMarginClass"
+  toggleBtnClass="{`btn-active-light-primary btn-custom ${toolbarButtonHeightClass}`}">
+</app-theme-mode-switcher>
+<!-- end::Theme mode -->
+
+<!-- begin::User -->
+<div class="d-flex align-items-center" [ngClass]="toolbarButtonMarginClass" id="kt_header_user_menu_toggle">
+  <!-- begin::Toggle -->
+  <div class="cursor-pointer symbol" [ngClass]="toolbarUserAvatarHeightClass" data-kt-menu-trigger="click"
+    data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end" data-kt-menu-flip="bottom">
+    <img src="./assets/media/avatars/300-1.jpg" alt="metronic" />
+  </div>
+  <!-- end::Toggle  -->
+  <app-user-inner></app-user-inner>
+</div>
+<!-- end::User -->
+
+<ng-container *ngIf="headerLeft === 'menu'">
+  <div class="d-flex align-items-center d-lg-none ms-2 me-n3" title="Show header menu">
+    <div class="
+        btn btn-icon btn-active-light-primary
+        w-30px
+        h-30px
+        w-md-40px
+        h-md-40px
+      " id="kt_header_menu_mobile_toggle">
+      <app-keenicon name="text-align-left" class="fs-1"></app-keenicon>
+    </div>
+  </div>
+</ng-container>

package/_metronic/layout/components/topbar/topbar.component.spec.ts

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

package/_metronic/layout/components/topbar/topbar.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { LayoutService } from '../../core/layout.service';
+
+@Component({
+  selector: 'app-topbar',
+  templateUrl: './topbar.component.html',
+  styleUrls: ['./topbar.component.scss'],
+})
+export class TopbarComponent implements OnInit {
+  toolbarButtonMarginClass = 'ms-1 ms-lg-3';
+  toolbarButtonHeightClass = 'w-30px h-30px w-md-40px h-md-40px';
+  toolbarUserAvatarHeightClass = 'symbol-30px symbol-md-40px';
+  toolbarButtonIconSizeClass = 'svg-icon-1';
+  headerLeft: string = 'menu';
+
+  constructor(private layout: LayoutService) {}
+
+  ngOnInit(): void {
+    this.headerLeft = this.layout.getProp('header.left') as string;
+  }
+}