@progressive-development/pd-spa-helper 0.1.172 → 0.2.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent pd-spa-helper following open-wc recommendations",
   "license": "MIT",
   "author": "pd-spa-helper",
-  "version": "0.1.172",
+  "version": "0.2.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {

package/src/PdSpaHelper.ts

@@ -2,17 +2,24 @@ import { html, LitElement, css, CSSResultGroup, TemplateResult, unsafeCSS } from
 import { router, navigator } from 'lit-element-router';
 import { property } from 'lit/decorators.js';
 
+import { Subscription } from 'rxjs';
+
 import { FirebaseApp } from 'firebase/app';
 
 import '@progressive-development/pd-page/pd-menu.js';
 import '@progressive-development/pd-page/pd-footer.js';
 
 import { ServiceCallController } from './service-call-controller2.js';
-import { initializeStore } from './store/mini-rx.store.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, FunctionResult, 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 } from './store/spa-app-actions.js';
+
 import './router/AppMain.js';
 import './defaultpage/default-login.js';
 import './tmpown/pd-panel-viewer.js';
@@ -134,6 +141,8 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
 
   protected functionsController = new ServiceCallController(this);
 
+  protected abstract _appConfiguration: any;
+
   // not used at the moment
   @property({ type: String }) 
   title = 'Hey there';
@@ -148,12 +157,7 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
   _profile: any | undefined;
 
   @property({ type: Object, state: true }) 
-  _loadingState?: {
-    isLoading: boolean,
-    smallBackground?: boolean,
-    modal?: boolean,
-    loadingTxt?: string
-  };
+  _loadingState?: LoadingState;
  
   /**
    * Properties needed for the router.
@@ -180,7 +184,9 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
   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
@@ -264,6 +270,8 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
 
     super();    
 
+    setRouteElement(this);
+
     const doSomething = (scrollPos:number) => {
       if (scrollPos <= 50) {
         this._teaserClosed = false;
@@ -295,7 +303,32 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
 
     // For common toast messages (not for callfunction toasts => handelt by own controller)
     this.addEventListener("toast-event", this._createTemporaryToast);
-    this.addEventListener("route-event", this._handleMenuRouteEvent);    
+    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._appConfiguration
+      };
+    }    
   }
 
   /**
@@ -332,6 +365,7 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
       console.log("My callback user:", user);
       this._user = user;
       if (this._user) {
+        pdStore().dispatch(loginSucess());
         this._loginSuccess(new CustomEvent("login-success"));
       }
     };

package/src/index.ts

@@ -3,7 +3,8 @@ export {
   startInit,              
 } from './PdSpaHelper.js';
 
-export * as pdSpaModel from './service-provider/service-provider-model.js'
+export * as pdSpaModel from './service-provider/service-provider-model.js';
+export * as pdSpaModel2 from './model/spa-model.js';
 
 export {isBlank, isEmpty} from './helper/helper-utils.js';
 
@@ -37,6 +38,9 @@ export {
 } from './service-provider/service-provider-impl.js'
 
 export { pdStore } from './store/mini-rx.store.js';
+export * as pdAction from './store/spa-app-actions.js';
+export * as pdSelector from './store/spa-app-selector.js';
+
 export * as pdDB from './store/indexDB.js'
 
 export { templates as beTemplaes} from './generated/locale-wrapper/be-wrapper.js'

package/src/model/spa-model.ts

@@ -0,0 +1,8 @@
+export const APP_CONF_EVENT = "get-app-conf";
+
+export interface LoadingState {
+  isLoading: boolean,
+  modal?: boolean,
+  smallBackground?: boolean,
+  loadingTxt?: string
+}

package/src/store/indexDB.ts

@@ -1,5 +1,8 @@
 // use version import to initialize modul
 
+import { pdStore } from "./mini-rx.store";
+import { initIndexDBSucess } from "./spa-app-actions.js";
+
 const {indexedDB} = window;
 let db:any;
 
@@ -188,9 +191,7 @@ export const initDB = (
         keyPath?: string
       }
     }[]
-  }, 
-  successCallback: Function
-) => {
+  }) => {
   if (!indexedDB) {
     window.alert("Your browser doesn't support a stable version of IndexedDB.");
   } else {
@@ -203,7 +204,7 @@ export const initDB = (
     request.onsuccess = () => {
       db = request.result;
       console.log(`db init success: ${db}`);
-      successCallback();
+      pdStore().dispatch(initIndexDBSucess());
     };
 
     request.onupgradeneeded = (event: any) => {

package/src/store/mini-rx.store.ts

@@ -2,6 +2,9 @@ import { configureStore, Store, LoggerExtension, ReduxDevtoolsExtension, Immutab
 
 import { StoreConfig } from '../service-provider/service-provider-model.js';
 
+import { spaAppReducer } from '../store/spa-app-reducer.js';
+import { appRouteEffect } from '../store/spa-app-effects.js';
+
 
 let store: Store;
 
@@ -12,7 +15,12 @@ export const initializeStore = (param: StoreConfig) => {
   // create store
   if (!store) {
     store = configureStore({  
-      reducers: param.reducer,
+      reducers: param.reducer ? {
+        spaApp: spaAppReducer,
+        ...param.reducer
+      } : {
+        spaApp: spaAppReducer        
+      },
       extensions: [
         new LoggerExtension(),
         new ReduxDevtoolsExtension({
@@ -22,7 +30,10 @@ export const initializeStore = (param: StoreConfig) => {
       ],
     });
 
-    // register effects
+    // register default effects
+    store.effect(appRouteEffect);
+
+    // register configured effects
     param.effects.forEach(effect => store.effect(effect));
   }
 }

package/src/store/spa-app-actions.ts

@@ -0,0 +1,11 @@
+import { action, payload } from 'ts-action';
+import { LoadingState } from '../model/spa-model.js';
+
+export const initIndexDBSucess = action('SPA_INIT_INDEX_DB_SUCCESS');
+export const loginSucess = action('SPA_LOGIN_SUCCESS');
+
+export const routeAction = action('SPA_APP_ROUTE', payload<string>());
+
+export const updateInternetOffline = action('SPA_APP_UPDATE_INTERNET_OFFLINE', payload<boolean>());
+
+export const loadingStateChange = action('SPA_APP_LOADING_STATE_CHANGE', payload<LoadingState>());

package/src/store/spa-app-effects.ts

@@ -0,0 +1,33 @@
+import { actions$, createEffect } from 'mini-rx-store';
+
+import { tap } from 'rxjs/operators';
+
+import { ofType } from 'ts-action-operators';
+
+import { routeAction } from './spa-app-actions.js';
+
+
+let routeElement: HTMLElement;
+
+export const setRouteElement = (param: HTMLElement) => {
+  routeElement = param;
+}
+
+export const appRouteEffect = createEffect(
+  actions$.pipe(
+    ofType(routeAction),
+    tap((action) => {
+      if (!routeElement) {
+        console.error("No route element set for appRouteEffect");
+      } else {        
+        routeElement.dispatchEvent(new CustomEvent('route-event', {
+          detail: {route: action.payload},
+          bubbles: true,
+          composed: true
+        }));        
+      }
+    })
+  ), {
+    dispatch: false
+  }
+);

package/src/store/spa-app-reducer.ts

@@ -0,0 +1,64 @@
+import { on, reducer } from 'ts-action';
+
+import { initIndexDBSucess, loadingStateChange, loginSucess, routeAction, updateInternetOffline } from './spa-app-actions.js';
+import { LoadingState } from '../model/spa-model.js';
+
+export interface SpaAppState {
+  offline?: boolean,
+  loadingState?: LoadingState;
+  lastRoutes?: any[];
+  initIndexDB?: boolean;
+  userLogin?: boolean;
+}
+
+const initialState: SpaAppState = {  
+  
+};
+
+export const spaAppReducer = reducer(
+  initialState,
+
+  on (updateInternetOffline, (state, {payload}) =>  (
+    {
+      ...state,
+      offline: payload
+    }
+  )),  
+    
+  on(loadingStateChange, (state, {payload}) => (
+    {
+      ...state,
+      loadingState: payload ? {
+        isLoading: payload.isLoading,
+        smallBackground: payload.smallBackground,
+        modal: payload.modal,
+        txt: payload.loadingTxt,
+      } : undefined
+    }
+  )),
+
+  on(routeAction, (state, {payload}) => (
+    {
+      ...state,
+      lastRoutes: [
+        ...(state.lastRoutes || []),
+        payload
+      ]
+    }
+  )),
+
+  on(initIndexDBSucess, (state) => (
+    {
+      ...state,
+      initIndexDB: true,
+    }
+  )),
+
+  on(loginSucess, (state) => (
+    {
+      ...state,
+      userLogin: true,
+    }
+  )),
+
+);

package/src/store/spa-app-selector.ts

@@ -0,0 +1,23 @@
+import { createFeatureStateSelector, createSelector } from "mini-rx-store";
+
+import { SpaAppState } from "./spa-app-reducer.js";
+
+const getSpaAppFeatureState = createFeatureStateSelector<SpaAppState>('spaApp');
+
+export const getLoadingSelector = createSelector(
+  getSpaAppFeatureState,
+  state => state.loadingState
+);
+
+export const getOfflineSelector = createSelector(
+  getSpaAppFeatureState,
+  state => state.offline === true
+);
+
+export const getInitStatusSelector = createSelector(
+  getSpaAppFeatureState,
+  state => ({
+    login: state.userLogin,
+    indexedDB: state.initIndexDB
+  })
+);

package/src/tmpown/pd-loading-state.ts

@@ -3,17 +3,14 @@ import { customElement, property } from 'lit/decorators.js';
 import { msg } from '@lit/localize';
 import { classMap } from 'lit/directives/class-map.js';
 
+import {LoadingState} from '../model/spa-model.js';
+
 
 @customElement('pd-loading-state')
 export class PdLoadingState extends LitElement {
 
   @property({ type: Object}) 
-  loadingState: {
-    isLoading: boolean,
-    modal?: boolean,
-    smallBackground?: boolean,
-    loadingTxt?: string
-  } = {
+  loadingState: LoadingState = {
     isLoading: false
   };