@progressive-development/pd-spa-helper 0.2.3 → 0.2.5

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.3",
+  "version": "0.2.5",
   "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.
@@ -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

@@ -1,8 +1,17 @@
 export const APP_CONF_EVENT = "get-app-conf";
 
+export interface LoadingSubTask {
+  actionKey: string
+  completed: boolean,
+  loadingTxt: string,  
+}
+
 export interface LoadingState {
   isLoading: boolean,
+  actionKey: string
   modal?: boolean,
   smallBackground?: boolean,
-  loadingTxt?: string
-}
+  loadingTxt?: string,
+  subTask?: LoadingSubTask[],
+}
+

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

@@ -1,5 +1,5 @@
 import { action, payload } from 'ts-action';
-import { LoadingState } from '../model/spa-model.js';
+import { LoadingState, LoadingSubTask } from '../model/spa-model.js';
 
 export const initIndexDBSucess = action('SPA_INIT_INDEX_DB_SUCCESS');
 export const loginSucess = action('SPA_LOGIN_SUCCESS');
@@ -8,4 +8,9 @@ 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 changeSubTask = action('SPA_APP_CHANGE_SUB_LOADING', payload<{
+  loadingActionId: string,
+  newTaskState: LoadingSubTask
+}>());
+export const removeLoadingState = action('SPA_APP_REMOVE_LOADING', payload<string>());

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

@@ -13,6 +13,9 @@ export const setRouteElement = (param: HTMLElement) => {
   routeElement = param;
 }
 
+// remove loading task if all sub tasks done
+
+
 export const appRouteEffect = createEffect(
   actions$.pipe(
     ofType(routeAction),

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, changeSubTask } 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,37 @@ 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(changeSubTask, (state, {payload}) => (
+    {
+      ...state,
+      loadingState: state.loadingState.map(ls => {
+        if (ls.actionKey === payload.loadingActionId) {
+          // change new sub task in sub task list
+          return {
+            ...ls,
+            subTask: ls.subTask?.map(subLs => subLs.actionKey 
+              === payload.newTaskState.actionKey ? payload.newTaskState : subLs),
+          }
+        }
+        return ls;
+      })
+    }
+  )),
+
+  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,50 @@ 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
+  },
+};
+
+export const ModalStateWithSubTasks: Story = {
+  args: {
+    loadingState: {
+      isLoading: true,
+      modal: true,
+      loadingTxt: "Sammelaufgabe wird erledigt",
+      subTask: [
+        {
+          actionKey: "",
+          completed: true,
+          loadingTxt: "SubTask 1"
+        },
+        {
+          actionKey: "",
+          completed: false,
+          loadingTxt: "SubTask 2"
+        },
+        {
+          actionKey: "",
+          completed: false,
+          loadingTxt: "SubTask 3"
+        },
+      ]
+    }
+  },
+};
+

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

@@ -3,6 +3,8 @@ import { customElement, property } from 'lit/decorators.js';
 import { msg } from '@lit/localize';
 import { classMap } from 'lit/directives/class-map.js';
 
+import '@progressive-development/pd-icon/pd-icon.js';
+
 import {LoadingState} from '../model/spa-model.js';
 
 
@@ -10,10 +12,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 +61,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;
@@ -92,6 +91,34 @@ export class PdLoadingState extends LitElement {
         animation: spin 2s linear infinite;
       }
 
+      .sub-ul {
+        text-align: start;
+      }
+
+      .sub-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-right: 10px;
+      }
+
+      .sub-icon {
+        --pd-icon-size: 1rem;
+        padding: 0;
+        vertical-align: baseline;
+        margin: 0 .25rem 0 0;
+      }
+
+      .completed {
+        --pd-icon-stroke-col-active: green;
+        --pd-icon-col-active: green;
+      }
+
+      .loading {
+        --pd-icon-stroke-col-active: orange;
+        --pd-icon-col-active: orange;
+      }
+
       @keyframes spin {
         0% {
           transform: rotate(0deg);
@@ -105,6 +132,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 +143,9 @@ export class PdLoadingState extends LitElement {
   }
 
   _renderContent() {
+    if (!this.loadingState) {
+      return '';
+    }
     return html`
       <div class="${classMap({
           content: !this.loadingState.smallBackground,
@@ -121,7 +154,21 @@ export class PdLoadingState extends LitElement {
         })}">
         <div class="${this.loadingState.smallBackground ? "background-loader" : "loader"}"></div>
         <p>${this.loadingState.loadingTxt || (this.loadingState.smallBackground ? 
-          msg("Daten werden synchronisiert", {id: "spaH.loadingstate.syncState"}) : msg("Bitte warten, Daten werden geladen", {id: "spaH.loadingstate.pleaseWait"}))}</p>
+          msg("Daten werden synchronisiert", {id: "spaH.loadingstate.syncState"}) : msg("Bitte warten, Daten werden geladen", {id: "spaH.loadingstate.pleaseWait"}))}
+        </p>
+        ${this.loadingState.subTask && this.loadingState.subTask.length > 0 ? html`
+        <ul class="sub-ul">
+            ${this.loadingState.subTask.map(task => html`
+            <li>
+              <div class="sub-row">
+                ${task.loadingTxt}
+                ${task.completed ? html`<pd-icon class="sub-icon completed" icon="checkBox" activeIcon></pd-icon>` 
+                  : html`<pd-icon class="sub-icon loading" icon="syncIcon" activeIcon></pd-icon>`}
+              </div>
+            </li>
+            `)}
+        </ul>
+        ` : ''}
       </div>
     `
   }