@progressive-development/pd-spa-helper 0.2.2 → 0.2.4

package/package.json

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

package/src/PdSpaHelper.ts

@@ -157,7 +157,7 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
   _profile: any | undefined;
 
   @property({ type: Object, state: true }) 
-  _loadingState?: LoadingState;
+  _loadingState: LoadingState[] = [];
  
   /**
    * Properties needed for the router.
@@ -312,7 +312,7 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
     this._subscription = pdStore().select(getLoadingSelector)
       .subscribe((loadingState) => {
         console.log("Loading State: ", loadingState);
-        this._loadingState = loadingState;
+        this._loadingState = loadingState || [];
     });
   }
 
@@ -384,7 +384,7 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
 
       <main class="${this._getMainClass(hideTeaser, pageConf)}">
 
-        ${this._loadingState ? html`<pd-loading-state .loadingState="${this._loadingState}"></pd-loading-state>` : ''}
+        ${this._loadingState.map(ls => html`<pd-loading-state .loadingState="${ls}"></pd-loading-state>`)}
 
         <app-main active-route=${this.route}
             @init-menu-sections="${this._initMenuSections}"
@@ -408,7 +408,7 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
       </footer>` : ''}
     `;
   }  
-
+  
   // eslint-disable-next-line class-methods-use-this
   private _getMainClass(hideTeaser: boolean, pageConf: NavigationPage): string {
     if (hideTeaser) {      

package/src/model/spa-model.ts

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

package/src/service-provider/mock/auth.ts

@@ -1,3 +1,4 @@
+import { pdStore } from "../../store/mini-rx.store";
 
 /*
  * Only for temporary development:
@@ -44,8 +45,13 @@ export const getAuthUserMock = (): unknown =>
   } : undefined;
 
 
-export const authStateChangedMock = () => {
-  console.log("Not implemented for MOCK");
+let callbackLogin: Function;
+export const authStateChangedMock = (callback: Function) => {
+  callbackLogin = callback;
+  console.log("Not implemented for MOCK, do call once if authenticated");
+  if (isAuthenticatedMock()) {
+    callbackLogin(getAuthUserMock())
+  }
 }
 
 export const loginMock = async (user:string, sec:string): Promise<unknown> => {    
@@ -57,13 +63,16 @@ export const loginMock = async (user:string, sec:string): Promise<unknown> => {
           localStorage.setItem(LOCALSTORE_ITEM_KEY, 'true');
       }
       valid = true;
-      loginAvailable = true;
+      loginAvailable = true;      
   }
 
   if (valid) {
-    return Promise.resolve({
-      uid: "123124"
-    });   
+
+    const userMock = getAuthUserMock();
+    if (callbackLogin) {
+      callbackLogin(userMock)
+    }
+    return Promise.resolve(user);   
   }
 
   const err =  new Error("Invalid login");

package/src/service-provider/service-provider-impl.ts

@@ -98,7 +98,7 @@ export const authStateChangedImpl = (
   if (provider === "firebase") {
     authStateChanged(callback);
   } else if (provider === "mock") {
-    authStateChangedMock();
+    authStateChangedMock(callback);
   } else {
     throwUndefinedProviderError();
   }

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

@@ -8,4 +8,5 @@ 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>());
+export const addLoadingState = action('SPA_APP_ADD_LOADING', payload<LoadingState>());
+export const removeLoadingState = action('SPA_APP_REMOVE_LOADING', payload<string>());

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

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

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

@@ -10,7 +10,17 @@ const meta = {
   render: (args) => html`
     <pd-loading-state
       .loadingState="${args.loadingState}"
-    ></pd-loading-state>
+    ></pd-loading-state>    
+
+    ${args.doubleState ? html`
+      <pd-loading-state
+      .loadingState="${{
+        isLoading: true,
+        modal: true,
+        actionKey: ""
+      }}"
+    ></pd-loading-state>    
+      ` : ''}    
 
     <p>
       Hier steht noch sonst was an text. 
@@ -81,3 +91,23 @@ export const BackgroundState: Story = {
   },
 };
 
+export const ModalBackgroundState: Story = {
+  args: {
+    loadingState: {
+      isLoading: true,
+      smallBackground: true,
+      modal: true,
+    }
+  },
+};
+
+export const ModalWithBackgroundState: Story = {
+  args: {
+    loadingState: {
+      isLoading: true,
+      smallBackground: true,      
+    },
+    doubleState: true
+  },
+};
+

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

@@ -10,10 +10,7 @@ import {LoadingState} from '../model/spa-model.js';
 export class PdLoadingState extends LitElement {
 
   @property({ type: Object}) 
-  loadingState: LoadingState = {
-    isLoading: false
-  };
-
+  loadingState?: LoadingState;
 
   static styles = [        
     css`
@@ -62,7 +59,7 @@ export class PdLoadingState extends LitElement {
         bottom: 0em;   
 
         padding: 1em;        
-        z-index: 101; /* Sit on top */
+        z-index: 600; /* Sit on top */
 
         display: flex;
         gap: 0.5em;
@@ -105,6 +102,9 @@ export class PdLoadingState extends LitElement {
   ] as CSSResultGroup;   
 
   render() {    
+    if (!this.loadingState) {
+      return '';
+    }
     return this.loadingState.modal ? html`
         <div id="modalId" class="modal">
           ${this._renderContent()}
@@ -113,6 +113,9 @@ export class PdLoadingState extends LitElement {
   }
 
   _renderContent() {
+    if (!this.loadingState) {
+      return '';
+    }
     return html`
       <div class="${classMap({
           content: !this.loadingState.smallBackground,