@hitsoft/e-donusum 1.0.5

package/_metronic/layout/core/configs/light-sidebar.config.ts

@@ -0,0 +1,138 @@
+import { ILayout } from './config';
+
+export const LightSidebarConfig: ILayout = {
+  main: {
+    componentName: 'main',
+    type: 'default',
+    pageBgWhite: false,
+  },
+  app: {
+    general: {
+      componentName: 'general',
+      evolution: true,
+      layoutType: 'default',
+      mode: 'light',
+      rtl: false,
+      primaryColor: '#50CD89',
+      pageBgWhite: false,
+      pageWidth: 'default',
+    },
+    header: {
+      componentName: 'header',
+      display: true,
+      default: {
+        container: 'fluid',
+        containerClass: 'd-flex align-items-stretch justify-content-between',
+        fixed: {
+          desktop: true,
+          mobile: false,
+        },
+        content: 'menu',
+        menu: {
+          display: true,
+          iconType: 'svg',
+        },
+      },
+    },
+    sidebar: {
+      componentName: 'sidebar',
+      display: true,
+      default: {
+        class: 'flex-column',
+        push: {
+          header: true,
+          toolbar: true,
+          footer: true,
+        },
+        drawer: {
+          enabled: true,
+          attributes: {
+            'data-kt-drawer': 'true',
+            'data-kt-drawer-name': 'app-sidebar',
+            'data-kt-drawer-activate': '{default: true, lg: false}',
+            'data-kt-drawer-overlay': 'true',
+            'data-kt-drawer-width': '225px',
+            'data-kt-drawer-direction': 'start',
+            'data-kt-drawer-toggle': '#kt_app_sidebar_mobile_toggle',
+          },
+        },
+        fixed: {
+          desktop: true,
+        },
+        minimize: {
+          desktop: {
+            enabled: true,
+            default: false,
+            hoverable: true,
+          },
+        },
+        menu: {
+          iconType: 'svg',
+        },
+      },
+    },
+    toolbar: {
+      componentName: 'toolbar',
+      display: true,
+      layout: 'classic',
+      class: 'py-3 py-lg-6',
+      container: 'fluid',
+      containerClass: 'd-flex flex-stack',
+      fixed: {
+        desktop: false,
+        mobile: false,
+      },
+      // custom settings,
+      filterButton: true,
+      daterangepickerButton: false,
+      primaryButton: true,
+      primaryButtonLabel: 'Create',
+      primaryButtonModal: 'create-app',
+    },
+    pageTitle: {
+      componentName: 'page-title',
+      display: true,
+      breadCrumb: true,
+      description: false,
+      direction: 'column',
+    },
+    content: {
+      componentName: 'content',
+      container: 'fluid',
+    },
+    footer: {
+      componentName: 'footer',
+      display: true,
+      container: 'fluid',
+      containerClass:
+        'd-flex flex-column flex-md-row flex-center flex-md-stack py-3',
+      fixed: {
+        desktop: false,
+        mobile: false,
+      },
+    },
+    pageLoader: {
+      componentName: 'page-loader',
+      type: 'none',
+      logoImage: 'default.svg',
+      logoClass: 'mh-75px',
+    },
+  },
+  illustrations: {
+    componentName: 'illustrations',
+    set: 'sketchy-1',
+  },
+  scrolltop: {
+    componentName: 'scrolltop',
+    display: true,
+  },
+  engage: {
+    componentName: 'engage',
+    demos: {
+      enabled: true,
+    },
+    purchase: {
+      enabled: false,
+    },
+  },
+};

package/_metronic/layout/core/layout-init.service.ts

@@ -0,0 +1,133 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { ILayout, LayoutType } from './configs/config';
+import { LayoutService } from './layout.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LayoutInitService {
+  private config = new BehaviorSubject<ILayout | null>(null);
+  constructor(private layout: LayoutService) {}
+
+  reInitProps(layoutType?: LayoutType) {
+    this.layout.reInitProps();
+    const currentLayoutType = layoutType
+      ? layoutType
+      : this.layout.getBaseLayoutTypeFromRouteOrLocalStorage();
+    const config = this.layout.getLayoutConfig(currentLayoutType);
+    this.layout.currentLayoutTypeSubject.next(currentLayoutType)
+    this.config.next({ ...config });
+
+    // init base layout
+    this.initLayoutSettings(currentLayoutType, config);
+    this.initToolbarSettings(config);
+    this.initWidthSettings(config);
+    this.layout.layoutConfigSubject.next({ ...this.config.value });
+  }
+
+  setBaseLayoutType(layoutType: LayoutType) {
+    this.layout.setBaseLayoutType(layoutType);
+    this.reInitProps(layoutType);
+  }
+
+  private initLayoutSettings(layoutType: LayoutType, config: ILayout) {
+    // clear body classes
+    const bodyClasses = document.body.classList.value.split(' ');
+    bodyClasses.forEach((cssClass) => document.body.classList.remove(cssClass));
+    // clear body attributes
+    const bodyAttributes = document.body
+      .getAttributeNames()
+      .filter((t) => t.indexOf('data-') > -1);
+    bodyAttributes.forEach((attr) => document.body.removeAttribute(attr));
+    document.body.setAttribute('style', '');
+    document.body.setAttribute('id', 'kt_app_body');
+    document.body.setAttribute('data-kt-app-layout', layoutType);
+    document.body.setAttribute('data-kt-name', 'metronic');
+    document.body.classList.add('app-default');
+
+    const pageWidth = config.app?.general?.pageWidth;
+    if (layoutType === 'light-header' || layoutType === 'dark-header') {
+      if (pageWidth === 'default') {
+        const header = config.app?.header;
+        if (header && header.default && header.default.container) {
+          header.default.container = 'fixed';
+        }
+        const toolbar = config.app?.toolbar;
+        if (toolbar) {
+          toolbar.container = 'fixed';
+        }
+        const content = config.app?.content;
+        if (content) {
+          content.container = 'fixed';
+        }
+        const footer = config.app?.footer;
+        if (footer) {
+          footer.container = 'fixed';
+        }
+
+        const updatedApp = {
+          ...config.app,
+          ...header,
+          ...toolbar,
+          ...content,
+          ...footer,
+        };
+        this.config.next({ ...config, ...updatedApp });
+      }
+    }
+  }
+
+  private initToolbarSettings(config: ILayout) {
+    const appHeaderDefaultContent = config.app?.header?.default?.content;
+    if (appHeaderDefaultContent === 'page-title') {
+      const toolbar = config.app?.toolbar;
+      if (toolbar) {
+        toolbar.display = false;
+        const updatedApp = { ...config.app, ...toolbar };
+        this.config.next({ ...config, ...updatedApp });
+      }
+      return;
+    }
+
+    const pageTitle = this.config.value?.app?.pageTitle;
+    if (pageTitle) {
+      pageTitle.description = false;
+      pageTitle.breadCrumb = true;
+      const updatedApp = { ...config.app, ...pageTitle };
+      this.config.next({ ...config, ...updatedApp });
+    }
+  }
+
+  private initWidthSettings(config: ILayout) {
+    const pageWidth = config.app?.general?.pageWidth;
+    if (!pageWidth || pageWidth === 'default') {
+      return;
+    }
+
+    const header = config.app?.header;
+    if (header && header.default) {
+      header.default.container = pageWidth;
+    }
+    const toolbar = config.app?.toolbar;
+    if (toolbar) {
+      toolbar.container = pageWidth;
+    }
+    const content = config.app?.content;
+    if (content) {
+      content.container = pageWidth;
+    }
+    const footer = config.app?.footer;
+    if (footer) {
+      footer.container = pageWidth;
+    }
+    const updatedApp = {
+      ...config.app,
+      ...header,
+      ...toolbar,
+      ...content,
+      ...footer,
+    };
+    this.config.next({ ...this.config.value, ...updatedApp });
+  }
+}

package/_metronic/layout/core/layout.service.ts

@@ -0,0 +1,227 @@
+import { Injectable } from '@angular/core';
+import { environment } from 'src/environments/environment';
+import { BehaviorSubject } from 'rxjs';
+import * as objectPath from 'object-path';
+import {
+  LayoutType,
+  ILayout,
+  CSSClassesType,
+  HTMLAttributesType,
+} from './configs/config';
+import { DarkHeaderConfig } from './configs/dark-header.config';
+import { DarkSidebarConfig } from './configs/dark-sidebar.config';
+import { LightHeaderConfig } from './configs/light-header.config';
+import { LightSidebarConfig } from './configs/light-sidebar.config';
+import { ActivatedRoute } from '@angular/router';
+
+const LAYOUT_CONFIG_LOCAL_STORAGE_KEY = `${environment.appVersion}-layoutConfig`;
+const BASE_LAYOUT_TYPE_LOCAL_STORAGE_KEY = `${environment.appVersion}-baseLayoutType`;
+const defaultBaseLayoutType: LayoutType = 'dark-sidebar';
+const defaultLayoutConfig: ILayout = DarkSidebarConfig;
+
+export function getEmptyHTMLAttributes(): HTMLAttributesType {
+  return {
+    asideMenu: {},
+    headerMobile: {},
+    headerMenu: {},
+    headerContainer: {},
+    pageTitle: {},
+  };
+}
+
+export function getEmptyCssClasses(): CSSClassesType {
+  return {
+    header: [],
+    headerContainer: [],
+    headerMobile: [],
+    headerMenu: [],
+    aside: [],
+    asideMenu: [],
+    asideToggle: [],
+    toolbar: [],
+    toolbarContainer: [],
+    content: [],
+    contentContainer: [],
+    footerContainer: [],
+    sidebar: [],
+    pageTitle: [],
+    wrapper: [],
+  };
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LayoutService {
+  public currentLayoutTypeSubject = new BehaviorSubject<LayoutType | null>(
+    null
+  );
+
+  public layoutConfigSubject: BehaviorSubject<ILayout> =
+    new BehaviorSubject<ILayout>(
+      this.getLayoutConfig(this.getBaseLayoutTypeFromRouteOrLocalStorage())
+    );
+
+  // scope list of css classes
+  private classes: BehaviorSubject<CSSClassesType> =
+    new BehaviorSubject<CSSClassesType>(getEmptyCssClasses());
+
+  // scope list of html attributes
+  private attrs: BehaviorSubject<HTMLAttributesType> =
+    new BehaviorSubject<HTMLAttributesType>(getEmptyHTMLAttributes());
+
+  constructor(private activatedRoute: ActivatedRoute) {}
+
+  getProp(path: string, config?: ILayout): string | boolean | undefined | Object {
+    if (config) {
+      return objectPath.get(config, path);
+    }
+
+    return objectPath.get(this.layoutConfigSubject.value, path);
+  }
+
+  setCSSClass(path: string, classesInStr: string) {
+    const updatedCssClasses = { ...this.classes.value };
+    const cssClasses = updatedCssClasses[path];
+    if (!cssClasses) {
+      updatedCssClasses[path] = [];
+    }
+
+    classesInStr
+      .split(' ')
+      .forEach((cssClass: string) => updatedCssClasses[path].push(cssClass));
+
+    this.classes.next(updatedCssClasses);
+  }
+
+  getCSSClasses(path: string): string[] {
+    const cssClasses = this.classes.value[path];
+    if (!cssClasses) {
+      return [];
+    }
+
+    return cssClasses;
+  }
+
+  getStringCSSClasses(path: string) {
+    return this.getCSSClasses(path).join(' ');
+  }
+
+  getHTMLAttributes(path: string): {
+    [attrName: string]: string | boolean;
+  } {
+    const attributesObj = this.attrs.value[path];
+    if (!attributesObj) {
+      return {};
+    }
+    return attributesObj;
+  }
+
+  setHTMLAttribute(path: string, attrKey: string, attrValue: string | boolean) {
+    const updatedAttributes = { ...this.attrs.value };
+    const attributesObj = updatedAttributes[path];
+    if (!attributesObj) {
+      updatedAttributes[path] = {};
+    }
+    updatedAttributes[path][attrKey] = attrValue;
+    this.attrs.next(updatedAttributes);
+  }
+
+  getBaseLayoutTypeFromRouteOrLocalStorage(): LayoutType {
+    const routeData = this.activatedRoute?.firstChild?.snapshot?.data;
+    if (routeData && routeData.layout) {
+      return routeData.layout as LayoutType;
+    }
+
+    return this.getBaseLayoutTypeFromLocalStorage();
+  }
+
+  getBaseLayoutTypeFromLocalStorage(): LayoutType {
+    if (localStorage) {
+      const layoutType = localStorage.getItem(
+        BASE_LAYOUT_TYPE_LOCAL_STORAGE_KEY
+      );
+      if (layoutType) {
+        return layoutType as LayoutType;
+      }
+
+      this.setBaseLayoutType(defaultBaseLayoutType);
+    }
+    return defaultBaseLayoutType;
+  }
+
+  getLayoutByType(layoutType: LayoutType | undefined): ILayout {
+    switch (layoutType) {
+      case 'dark-sidebar':
+        return DarkSidebarConfig;
+      case 'light-sidebar':
+        return LightSidebarConfig;
+      case 'dark-header':
+        return DarkHeaderConfig;
+      case 'light-header':
+        return LightHeaderConfig;
+      default:
+        return defaultLayoutConfig;
+    }
+  }
+
+  getLayoutConfig(layoutType: LayoutType): ILayout {
+    const storedLayoutType = this.getBaseLayoutTypeFromLocalStorage();
+    if (layoutType && storedLayoutType) {
+      const configInString = localStorage.getItem(
+        `${layoutType}-${LAYOUT_CONFIG_LOCAL_STORAGE_KEY}`
+      );
+
+      if (configInString) {
+        try {
+          return JSON.parse(configInString) as ILayout;
+        } catch (ex) {
+          console.log('reading config exception', ex);
+        }
+      }
+    }
+
+    return this.getLayoutByType(layoutType);
+  }
+
+  setBaseLayoutType(layoutType: LayoutType) {
+    const config = this.getLayoutByType(layoutType);
+    if (localStorage) {
+      localStorage.setItem(BASE_LAYOUT_TYPE_LOCAL_STORAGE_KEY, layoutType);
+      localStorage.setItem(
+        `${layoutType}-${LAYOUT_CONFIG_LOCAL_STORAGE_KEY}`,
+        JSON.stringify(config)
+      );
+    }
+    // document.location.reload();
+  }
+
+  saveBaseConfig(config: ILayout) {
+    const baseLayoutType = this.getBaseLayoutTypeFromLocalStorage();
+    if (localStorage) {
+      localStorage.setItem(
+        `${baseLayoutType}-${LAYOUT_CONFIG_LOCAL_STORAGE_KEY}`,
+        JSON.stringify(config)
+      );
+    }
+
+    document.location.reload();
+  }
+
+  resetBaseConfig() {
+    const layoutType = this.getBaseLayoutTypeFromLocalStorage;
+
+    if (localStorage) {
+      localStorage.removeItem(
+        `${layoutType}-${LAYOUT_CONFIG_LOCAL_STORAGE_KEY}`
+      );
+    }
+
+    document.location.reload();
+  }
+
+  reInitProps() {
+    this.classes.next(getEmptyCssClasses());
+    this.attrs.next(getEmptyHTMLAttributes());
+  }
+}

package/_metronic/layout/core/page-info.service.ts

@@ -0,0 +1,151 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+export interface PageLink {
+  title: string;
+  path: string;
+  isActive: boolean;
+  isSeparator?: boolean;
+}
+
+export class PageInfo {
+  breadcrumbs: Array<PageLink> = [];
+  title: string = '';
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PageInfoService {
+  public title: BehaviorSubject<string> = new BehaviorSubject<string>(
+    'Dashboard'
+  );
+  public description: BehaviorSubject<string> = new BehaviorSubject<string>('');
+  public breadcrumbs: BehaviorSubject<Array<PageLink>> = new BehaviorSubject<
+    Array<PageLink>
+  >([]);
+
+  constructor() {}
+
+  public setTitle(_title: string) {
+    this.title.next(_title);
+  }
+
+  public updateTitle(_title: string) {
+    setTimeout(() => {
+      this.setTitle(_title);
+    }, 1);
+  }
+
+  public setDescription(_title: string) {
+    this.description.next(_title);
+  }
+
+  public updateDescription(_description: string) {
+    setTimeout(() => {
+      this.setDescription(_description);
+    }, 1);
+  }
+
+  public setBreadcrumbs(_bs: Array<PageLink>) {
+    this.breadcrumbs.next(_bs);
+  }
+
+  public updateBreadcrumbs(_bs: Array<PageLink>) {
+    setTimeout(() => {
+      this.setBreadcrumbs(_bs);
+    }, 20);
+  }
+
+  public calculateTitle() {
+    const asideTitle = this.calculateTitleInMenu('kt_app_sidebar');
+    const headerTitle = this.calculateTitleInMenu('kt_app_header_wrapper');
+    const title = asideTitle || headerTitle || '';
+    this.setTitle(title);
+  }
+
+  public calculateTitleInMenu(menuId: string): string | undefined {
+    const menu = document.getElementById(menuId);
+    if (!menu) {
+      return;
+    }
+
+    const allActiveMenuLinks = Array.from<HTMLLinkElement>(
+      menu.querySelectorAll('a.menu-link')
+    ).filter((link) => link.classList.contains('active'));
+
+    if (!allActiveMenuLinks || allActiveMenuLinks.length === 0) {
+      return;
+    }
+
+    const titleSpan = allActiveMenuLinks[0].querySelector(
+      'span.menu-title'
+    ) as HTMLSpanElement | null;
+    if (!titleSpan) {
+      return;
+    }
+
+    return titleSpan.innerText;
+  }
+
+  public calculateBreadcrumbs() {
+    const asideBc = this.calculateBreadcrumbsInMenu('kt_app_sidebar');
+    const headerBc = this.calculateBreadcrumbsInMenu('kt_app_header_wrapper');
+    const bc = asideBc && asideBc.length > 0 ? asideBc : headerBc;
+
+    if (!bc) {
+      this.setBreadcrumbs([]);
+      return;
+    }
+    this.setBreadcrumbs(bc);
+  }
+
+  public calculateBreadcrumbsInMenu(
+    menuId: string
+  ): Array<PageLink> | undefined {
+    const result: Array<PageLink> = [];
+    const menu = document.getElementById(menuId);
+    if (!menu) {
+      return;
+    }
+
+    const allActiveParents = Array.from<HTMLDivElement>(
+      menu.querySelectorAll('div.menu-item')
+    ).filter((link) => link.classList.contains('here'));
+
+    if (!allActiveParents || allActiveParents.length === 0) {
+      return;
+    }
+
+    allActiveParents.forEach((parent) => {
+      const titleSpan = parent.querySelector(
+        'span.menu-title'
+      ) as HTMLSpanElement | null;
+      if (!titleSpan) {
+        return;
+      }
+
+      const title = titleSpan.innerText;
+      const path = titleSpan.getAttribute('data-link');
+      if (!path) {
+        return;
+      }
+
+      result.push({
+        title,
+        path,
+        isSeparator: false,
+        isActive: false,
+      });
+      // add separator
+      result.push({
+        title: '',
+        path: '',
+        isSeparator: true,
+        isActive: false,
+      });
+    });
+
+    return result;
+  }
+}

package/_metronic/layout/index.ts

@@ -0,0 +1,3 @@
+export * from './layout.module';
+export * from './core/layout.service';
+export * from './core/page-info.service';