@progressive-development/pd-spa-helper 0.3.101 → 0.3.103

package/src/PdSpaHelper.ts

@@ -1,619 +0,0 @@
-import { html, LitElement, css, CSSResultGroup, TemplateResult, unsafeCSS } from 'lit';
-import { router, navigator } from 'lit-element-router';
-import { property } from 'lit/decorators.js';
-
-import { Subscription } from 'rxjs';
-
-import '@progressive-development/pd-page/pd-menu.js';
-import '@progressive-development/pd-page/pd-footer.js';
-
-import { initializeStore, pdStore } from './store/mini-rx.store.js';
-
-import { authStateChangedImpl, initAppImpl, isAuthenticatedImpl, setServiceProvider } from './service-provider/service-provider-impl.js';
-import { AppConfiguration, Footer, MenuElement, NavigationConfig, NavigationPage } from './service-provider/service-provider-model.js';
-
-import { getLoadingSelector } from './store/spa-app-selector.js';
-import { setRouteElement } from './store/spa-app-effects.js';
-import { APP_CONF_EVENT, LoadingState } from './model/spa-model.js';
-import { loginSucess, nologin } from './store/spa-app-actions.js';
-
-import './router/AppMain.js';
-import './defaultpage/default-login.js';
-import './tmpown/pd-panel-viewer.js';
-import './tmpown/pd-panel.js';
-// eslint-disable-next-line import/no-duplicates
-import './tmpown/pd-toast.js';
-import './tmpown/pd-loading-state.js';
-
-// TODO: How to solve this import problem?
-// eslint-disable-next-line import/no-duplicates
-import { PdToast } from './tmpown/pd-toast.js';
-
-
-// Footer Text
-const MADE_BY = {
-  txt: "made by PD Progressive Development",
-  email: "info@progressive-development.com"};
-
-// Visible time for time-limited toast
-const TOAST_DURATION = 6000;
-
-
-/**
- * Transformed routes, generated during startInit.
- */
-let transformedRoutes:Array<any>;
-let navigationConfig:NavigationConfig;
-
-/**
- * Internal helper functions to generate route elemets for lit-router. 
- */
-const transformRoutes = () => {
-
-  const transformAuthConfig = (withAuth:boolean) => 
-    withAuth ? 
-    {
-      unauthenticated: {
-        name: 'login',
-      },
-      authenticate: () => new Promise((resolve, reject) => {
-        resolve(isAuthenticatedImpl());
-      }),
-    } : undefined;
-
-  let generatedRoutes:Array<any> = [];
-  navigationConfig.pages.forEach(cfEntry => {
-    const addAraay = cfEntry.pattern.map(routeMapPattern => (
-      {
-        name: cfEntry.name,
-        pattern: routeMapPattern,
-        authentication: transformAuthConfig(cfEntry.auth),
-      }
-    ));    
-    generatedRoutes = generatedRoutes.concat(addAraay);
-  });
-  
-  // add not-found route
-  generatedRoutes.push({
-    name: 'not-found',
-    pattern: '*',
-  });
-
-  return generatedRoutes;
-}
-
-
-/**
- * Init the firebase app and application services like
- * functions and firestore. Generate routes from navigationConfig.
- * 
- * @param navigationConfig
- * @param firebaseConfig
- * @param functionsConfig
- */
-export const startInit = (config: AppConfiguration) => {
-
-  console.log("Start init for config: ", config);
-
-  // set service provider
-  setServiceProvider(config.serviceProvider);
-  
-  // init mini-rx store
-  if (config.storeConfigParam) {
-    initializeStore(config.storeConfigParam);
-  }
-
-  // init app
-  initAppImpl(config);
-
-  // add login route if set in config
-  if (config.navigationConfigParam.includeLogin) {
-    config.navigationConfigParam.pages.push({
-      name: "login",
-      menu: [
-        {key: "login", name: "Login"}
-      ],
-      pattern: ["login"],
-      auth: false
-    });
-  }
-
-  // generate routes from navigation config
-  navigationConfig = config.navigationConfigParam;
-  transformedRoutes = transformRoutes();    
-
-  // init ready, trigger by even (if getAuth is called before, error is thrown)    
-  document.dispatchEvent(new CustomEvent("init-app-event"));
-  console.log("Init done, Event created");
-
-};
-
-const TOP_MENU_HEIGHT = 30;
-
-/**
- * Abstract class for SPAs. Extend within the app main class.
- */
-export abstract class PdSpaHelper extends router(navigator(LitElement)) {
-
-  // not used at the moment
-  @property({ type: String }) 
-  title = 'Hey there';
-
-  /**
-   * Properties needed for login/profile data.
-   */
-  @property({ type: Object, state: true }) 
-  _user: unknown | undefined;
-
-  @property({ type: Object, state: true }) 
-  _profile: any | undefined;
-
-  @property({ type: Object, state: true }) 
-  _loadingState: LoadingState[] = [];
- 
-  /**
-   * Properties needed for the router.
-   */
-  @property({ type: String, reflect: true }) 
-  route = "";
-
-  @property({ type: Object }) 
-  params = {};
-
-  @property({ type: Object }) 
-  query = {};
-
-  /**
-   * Indicates if the teaser should closed (depends on scroll position).
-   */
-  @property({ type: Boolean })
-  _teaserClosed = false;  
-
-
-  @property({ type: String, state: true })
-  abstract _selectedLocale: string;
-
-  abstract _availableLocales: string[];
-
-  protected _singleLocaleMenu: boolean = false;
-
-  // subscription for loading-state selector
-  _subscription?: Subscription; 
-
-  static styles = 
-    // Ref: Additional use classmap to add custom classes in concrete impl
-    css`
-
-    :host {
-      display: flex;
-      flex-flow: column;
-      height: 100%;
-    }
-
-    header {
-      flex-grow: 0;
-    }
-
-    main {
-      flex-grow: 1;
-      flex-basis: max-content;
-    }
-
-    footer {
-      flex-grow: 0;
-    }
-
-    .default-header {
-      width: 100%;
-      position: fixed;
-      top: 0;
-      display: block;
-      z-index: 99;
-    }
-
-    .default-teaser {
-      --pd-panel-overflow: hidden;
-      --pd-panel-height: var(--pd-teaser-height, 380px);
-      --pd-panel-width: 100%;      
-      --pd-panel-border-radius: 0;
-      --pd-panel-bg: var(--pd-default-col);
-      --pd-panel-viewer-bg-col: var(--pd-default-col);
-    }
-
-    .default-menu {      
-      transition: background-color 2s;
-    }
-
-    .default-menu-withteaser {      
-      --pd-menu-bg-col: var(--pd-spa-menu-change-col, #AFC1D2);
-      --pd-menu-font-col: var(--pd-spa-menu-change-font-col, #0A3A48);
-      transition: background-color 2s;
-    }
-
-    .default-top-menu, .default-top-menu-withteaser {      
-      --pd-menu-height: ${unsafeCSS(TOP_MENU_HEIGHT)}px;
-      --pd-menu-font-size: 0.8em;      
-      --pd-menu-shadow: 0;
-    }
-
-    .default-top-menu-withteaser {      
-      --pd-menu-bg-col: var(--pd-teaser-bg-col);
-    }
-
-    /* needed for pd-spa-padding-top, only for pages with teaser, check if refactor possible... */
-    .default-main-padding {
-      padding-top: calc(var(--pd-menu-height) + var(--pd-spa-padding-top, 120px)) ;
-      transition: padding-top 2s;
-    }
-
-    .default-main {
-      padding-top: calc(var(--pd-menu-height));
-      transition: padding-top 2s;
-    }    
-
-    .default-main-withteaser {
-      padding-top: calc(var(--pd-menu-height) + var(--pd-teaser-height, 380px));
-      transition: padding-top 2s;
-    }
-
-  ` as CSSResultGroup;  
-
-  constructor() {
-
-    super();    
-
-    setRouteElement(this);
-
-    const doSomething = (scrollPos:number) => {
-      if (scrollPos <= 50) {
-        this._teaserClosed = false;
-      } else {
-        this._teaserClosed = true;
-      }
-    };
-
-    let ticking = false;
-    document.addEventListener('scroll', () => {
-      const lastKnownScrollPosition = window.scrollY;
-      if (!ticking) {
-        window.requestAnimationFrame(() => {
-          doSomething(lastKnownScrollPosition);
-          ticking = false;
-        });
-        ticking = true;
-      }
-    });
-
-    // add login handler after init => else error is thrown
-    // document.addEventListener("init-app-event", this.activateLoginHandler.bind(this));
-    document.addEventListener("init-app-event", () => {
-      console.log("Init event catched");
-    });
-    if (navigationConfig.includeLogin) {
-      console.log("Login included, activate login handler");
-      this.activateLoginHandler();
-    }
-
-    // For common toast messages (not for callfunction toasts => handelt by own controller)
-    this.addEventListener("toast-event", this._createTemporaryToast);
-    this.addEventListener("route-event", this._handleMenuRouteEvent);
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.addEventListener(APP_CONF_EVENT, this._setConfInDetail);
-    this._subscription = pdStore().select(getLoadingSelector)
-      .subscribe((loadingState) => {
-        console.log("Loading State: ", loadingState);
-        this._loadingState = loadingState;
-    });
-  }
-
-  disconnectedCallback(): void {
-    this.removeEventListener(APP_CONF_EVENT, this._setConfInDetail);
-    this._subscription?.unsubscribe();
-    super.disconnectedCallback();
-  }
-
-  _setConfInDetail(event: Event) {
-    const {detail} = event as CustomEvent;
-    if (detail) {
-      detail.appConf = {
-        ...this._getAppConfiguration()
-      };
-    }    
-  }
-
-  /**
-   * Non reactive private property for the index db class.
-   */
-  // private _indexDBClient?: YoIndexDBClient|null;  
-
-  /**
-   * Needed for the router.
-   * Return all configured routes.
-   */
-  static get routes() {
-    return transformedRoutes;  
-  }
-
-  /**
-   * Needed for the router.
-   * Set route params to internal members.
-   */
-  router(route:string, params:Object, query:Object) {
-    this.route = route;
-    this.params = params;
-    this.query = query;
-  }  
-
-
-  /**
-   * Call to activate onAuthState change with profile request callbacks.
-   * Only implemented for firebase provider.
-   */
-  activateLoginHandler() {
-    console.log("Activate Login Handler");    
-    const callback = (user: unknown) => {
-      console.log("My callback user:", user);
-      this._user = user;
-      if (this._user) {
-        pdStore().dispatch(loginSucess());
-        this._loginSuccess(new CustomEvent("login-success"));
-      } else {
-        pdStore().dispatch(nologin());
-      }
-    };
-    authStateChangedImpl(callback);
-  }
-
-  render() {    
-    const pageConf = navigationConfig.pages.filter(p => p.name === this.route)[0];
-    const hideTeaser = this._teaserClosed || !pageConf?.withTeaser;
-    return html`
-      <header id="headerElementId" class="default-header">
-        ${pageConf?.hideTopMenu ? '' : this._renderTopMenu(pageConf, hideTeaser)}
-        ${hideTeaser ? '' : this._renderTeaser()}
-        ${pageConf?.hideMenu ? '' : this._renderMenu(pageConf, hideTeaser)}
-      </header>      
-
-      <main class="${this._getMainClass(hideTeaser, pageConf)}">
-
-        ${this._loadingState.map(ls => html`<pd-loading-state .loadingState="${ls}"></pd-loading-state>`)}
-
-        <app-main active-route=${this.route}
-            @init-menu-sections="${this._initMenuSections}"
-            @login-success="${this._loginSuccess}">
-          ${this._renderRoutePages()}
-          ${navigationConfig.includeLogin ? html`
-            <default-login ?active="${this.route === "login"}" route="login"></default-login>` : ''}
-        </app-main>
-      </main>      
-
-      ${pageConf?.withFooter ? html`
-      <footer class="default-footer">
-        ${this._renderFooter()}
-      </footer>` : ''}
-    `;
-  }  
-  
-  // eslint-disable-next-line class-methods-use-this
-  private _getMainClass(hideTeaser: boolean, pageConf: NavigationPage): string {
-    if (hideTeaser) {      
-      if (!pageConf) {
-        return "default-main";
-      }
-      // eslint-disable-next-line no-nested-ternary
-      return pageConf.mainClass ? pageConf.mainClass : (pageConf.withTeaser ? "default-main-padding" : "default-main");
-    }
-    return "default-main-withteaser";
-  }
-
-  _renderMenu(pageConfig:NavigationPage, hideTeaser:boolean) {
-    const menuForPage = pageConfig ? (pageConfig.menu || []) : [];
-    return menuForPage ? html`
-      <pd-menu
-        id="pdHelperMenuId"
-        class="${hideTeaser ? "default-menu" : "default-menu-withteaser"}"
-        @locale-change="${this._localeChange}"
-        selectedLocale="${this._selectedLocale}"
-        .locales=${this._singleLocaleMenu ? this._availableLocales : []}
-        .menuItems=${menuForPage}
-        .topMenuItems=${[]}
-        activeRoute="${this.route}"
-        headerSize="${this._getHeaderSize(hideTeaser) + TOP_MENU_HEIGHT}"
-      >
-        ${hideTeaser ? this._getAppLogo() : ''}
-      </pd-menu>
-    ` : '';
-  } 
-
-  _renderTopMenu(pageConfig:NavigationPage, hideTeaser:boolean) {
-    const topMenuForPage = pageConfig ? pageConfig.topMenuItems : undefined;
-    return topMenuForPage ? html`
-      <pd-menu      
-        id="pdHelperTopMenuId"
-        noBurgerMenu
-        @locale-change="${this._localeChange}"
-        class="${hideTeaser ? "default-top-menu" : "default-top-menu-withteaser"}"        
-        .locales=${this._availableLocales}
-        selectedLocale="${this._selectedLocale}"
-        .topMenuItems=${topMenuForPage}
-        activeRoute="${this.route}"
-      >
-      </pd-menu>
-    ` : '';
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  _renderTeaser(): TemplateResult | string {
-    const teaserContent = this._getTeaserContent();
-    if (!teaserContent || teaserContent.length <= 0) {
-      return '';
-    }
-    return html`
-      <pd-panel-viewer class="default-teaser" id="teaserPanelViewerId" deltaCalc="4">
-        ${teaserContent.map(content => html`
-          <pd-panel>
-            ${content}
-          </pd-panel>
-        `)}
-      </pd-panel-viewer>
-      `;
-  }
-
-  _renderFooter() {
-    const footer = this._getFooter();
-    return html`
-      <pd-footer 
-          class="default-footer"
-          .footerLinks="${footer.links}"
-          version="${footer.version}" 
-          copyright="PD Progressive Developent UG" 
-          .madeBy="${MADE_BY}" 
-          @footer-link="${this._handleFooterRouteEvent}">
-      </pd-footer>
-    `;
-  }
-
-  protected abstract _getTeaserContent(): Array<TemplateResult>;
-
-  protected abstract _getFooter(): Footer;
-
-  protected abstract _getAppLogo(): TemplateResult;
-
-  protected abstract _renderRoutePages(): any;  
-
-  protected abstract _loginSuccess(e: CustomEvent): void;
-
-  protected abstract _setLocale(locale:string): void;
-
-  protected abstract _getAppConfiguration(): any;
-
-  protected abstract _getHeaderSize(hideTeaser: boolean): number;
-
-  _localeChange(e: CustomEvent): void {
-    this._setLocale(e.detail)
-    this._selectedLocale = e.detail;    
-  } 
-  
-  // eslint-disable-next-line class-methods-use-this
-  _handleMenuRouteEvent(e:any) {
-    // test with el, to handel jumps also here, not used at the moment, same postion link problems...
-    if (e.detail.el) {
-      this._scrollToContent(e.detail.el);
-    } else {
-      PdSpaHelper._scrollToTop();
-      this.navigate(e.detail.route);
-    }
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  _handleFooterRouteEvent(e: CustomEvent) {    
-    const {linkObj} = e.detail;    
-    if (linkObj.link) {
-      PdSpaHelper._scrollToTop();
-      this.navigate(linkObj.link);    
-    }
-    if (linkObj.action ) {      
-      linkObj.action();
-    }
-  }
-  
-  // eslint-disable-next-line class-methods-use-this
-  _initMenuSections(e:any) {
-    // add link to configuration object
-    const menRefConf = navigationConfig.pages.filter(p => p.name === e.detail.name)[0];
-    if (menRefConf) {      
-      menRefConf.menu = menRefConf.menu?.map((menuElement:MenuElement, index:number) => ({
-        ...menuElement,
-        ref: e.detail.menuRefs[index]
-      }));
-    }
-  }
-
-  _createTemporaryToast(e: any) {
-    
-    // hide existing call function toast (old one still is visible for directly incoming errors)
-    // this.functionsController.clear();
-    
-    const tmpToast = new PdToast();    
-    tmpToast.isError = e.detail.isError;
-    tmpToast.isSuccess = e.detail.isSuccess;
-    const slotContent = document.createTextNode(e.detail.txt);
-    tmpToast.appendChild(slotContent)    
-
-    this.shadowRoot?.appendChild(tmpToast);
-    tmpToast.duration = e.detail.duration || TOAST_DURATION;
-  }
-
-  static _scrollToTop() {
-    window.scrollTo({
-      top: 0,
-      left: 0,
-      behavior: 'smooth',
-    });
-  }
-
-  // Test, not used at the moment, jump/menu problem...
-  // eslint-disable-next-line class-methods-use-this
-  _scrollToContent(el:HTMLElement) {
-    if (el) {
-      const rect = el.getBoundingClientRect();
-      console.log("Rect: ", rect);
-      console.log("Offset Top/Height: ", el.offsetTop, el.offsetHeight);
-      window.scrollBy({
-        top: rect.top - (this._teaserClosed ? 80 : 450),
-        left: 0,
-        behavior: 'smooth',
-      });
-    }
-  }
-
-}
-
-  // Refactor: deactivate functions controller unwanted with new loader
-  /* 
-  protected functionsController = new ServiceCallController(this);
-  
-  // from render
-  ${this.functionsController.render({
-        complete: (result: FunctionResult) => this._renderSuccessResultInfo(result),
-        initial: () => '',
-        pending: () => this._renderPendingInfo(),
-        error: (e: any) => this._renderErrorInfo(e),
-      })}
-        /**
-   * Called when (any) cloud function call was finished.   
-   
-  // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars
-  _renderSuccessResultInfo(result: FunctionResult) {
-    return html`
-    <pd-toast isSuccess duration="${TOAST_DURATION}">
-      ${this.functionsController.callDataPromise?.func.successTxt}
-    </pd-toast>`;
-  }
-
-  /**
-   * Called when (any) cloud function is currently running.   
-   
-  _renderPendingInfo() {
-    return this.functionsController.callDataPromise?.func.fadeWindow ? html`
-    <p>Überblende und lade ${this.functionsController.callDataPromise?.func.name}...</p>` 
-      : html`
-      <pd-toast duration="-1">
-        ${this.functionsController.callDataPromise?.func.pendingTxt}
-      </pd-toast>`;        
-  }
-
-  /**
-   * Called when (any) cloud function stopped with errors.
-   
-   // eslint-disable-next-line class-methods-use-this
-   _renderErrorInfo(error:any) {
-    return html`
-    <pd-toast isError duration="-1">
-      ${error}
-    </pd-toast>`;
-  }
-  */

package/src/defaultpage/default-confirm-popup.ts

@@ -1,78 +0,0 @@
-import { html, LitElement, css, CSSResultGroup, HTMLTemplateResult } from "lit";
-import { property } from "lit/decorators.js";
-
-import '@progressive-development/pd-dialog/pd-popup-dialog.js';
-
-export const KEY_ABORT = "1";
-export const ABORT_EVENT_NAME = "close-popup";
-
-export const KEY_STORE = "2";
-export const STORE_EVENT_NAME = "store";
-
-export type PopupType = "info" | "help" | "warn" | "error";
-
-export abstract class DefaultConfirmPopup extends LitElement {
-
-  abstract _popupTitle: string;
-
-  abstract _type?: PopupType;
-
-  abstract _singleButton: boolean;
-
-  @property({ type: String }) 
-  okButtonText: string = "Ok";
-
-  @property({ type: String }) 
-  cancelButtonText: string = "Cancel"; 
- 
-  
-  static styles = [        
-    css`
-      :host {
-        --pd-popup-max-width: 600px;
-        --pd-popup-header-height: 50px;
-        --pd-popup-header-font-size: 1em;
-        --pd-popup-header-col: var(--app-primary-dark-col);
-
-        --pd-button-width: var(--pd-confirm-popup-button-width, 120px);
-        --pd-button-height: 35px;
-        --pd-button-font-size: 0.8rem;
-      }
-    `
-  ] as CSSResultGroup;
-
-  render() {        
-    const buttons = this._generateButtons();
-    return html`
-      <pd-popup-dialog @submit-button-clicked="${this._handleButtonClick}"
-        title="${this._popupTitle}" .buttons="${buttons}" type="${this._type}">
-                
-        ${this._renderContent()}
-
-      </pd-popup-dialog>
-    `;
-  }
-
-  private _generateButtons() {
-    if (this._singleButton) {
-      return [
-        { key: KEY_STORE, name: this.okButtonText, primary: true },
-      ];
-    }
-    return [
-      { key: KEY_ABORT, name: this.cancelButtonText },
-      { key: KEY_STORE, name: this.okButtonText, primary: true },
-    ];
-  }
-
-  protected _handleButtonClick(e: CustomEvent) {
-    this.dispatchEvent(
-      new CustomEvent(
-        e.detail.button === KEY_STORE ? STORE_EVENT_NAME : ABORT_EVENT_NAME
-      )
-    );
-  }
-
-  abstract _renderContent(): HTMLTemplateResult;  
-
-}