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

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.6",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {

package/src/PdSpaHelper.ts

@@ -9,11 +9,10 @@ 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, 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 { 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';
@@ -139,8 +138,6 @@ const TOP_MENU_HEIGHT = 50;
  */
 export abstract class PdSpaHelper extends router(navigator(LitElement)) {
 
-  protected functionsController = new ServiceCallController(this);
-
   protected abstract _appConfiguration: any;
 
   // not used at the moment
@@ -312,7 +309,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;
     });
   }
 
@@ -393,14 +390,7 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
           ${navigationConfig.includeLogin ? html`
             <default-login ?active="${this.route === "login"}" route="login"></default-login>` : ''}
         </app-main>
-      </main>
-
-      ${this.functionsController.render({
-        complete: (result: FunctionResult) => this._renderSuccessResultInfo(result),
-        initial: () => '',
-        pending: () => this._renderPendingInfo(),
-        error: (e: any) => this._renderErrorInfo(e),
-      })}
+      </main>      
 
       ${pageConf?.withFooter ? html`
       <footer class="default-footer">
@@ -488,40 +478,6 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
     `;
   }
 
-  /**
-   * 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>`;
-  }
-
   protected abstract _getTeaserContent(): Array<TemplateResult>;
 
   protected abstract _getFooter(): Footer;
@@ -579,7 +535,7 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
   _createTemporaryToast(e: any) {
     
     // hide existing call function toast (old one still is visible for directly incoming errors)
-    this.functionsController.clear();
+    // this.functionsController.clear();
     
     const tmpToast = new PdToast();    
     tmpToast.isError = e.detail.isError;
@@ -619,4 +575,50 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
     }
   }
 
-}
+}
+
+  // 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/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>
     `
   }