@progressive-development/pd-spa-helper 0.2.4 → 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.4",
+  "version": "0.2.5",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {

package/src/PdSpaHelper.ts

@@ -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;
     });
   }
 

package/src/model/spa-model.ts

@@ -1,9 +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,
-}
+  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');
@@ -9,4 +9,8 @@ export const routeAction = action('SPA_APP_ROUTE', payload<string>());
 export const updateInternetOffline = action('SPA_APP_UPDATE_INTERNET_OFFLINE', payload<boolean>());
 
 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,6 +1,6 @@
 import { on, reducer } from 'ts-action';
 
-import { initIndexDBSucess, addLoadingState, loginSucess, routeAction, updateInternetOffline, removeLoadingState } 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 {
@@ -35,6 +35,23 @@ export const spaAppReducer = reducer(
     }
   )),
 
+  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,

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

@@ -111,3 +111,30 @@ export const ModalWithBackgroundState: Story = {
   },
 };
 
+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';
 
 
@@ -89,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);
@@ -124,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>
     `
   }