sf-i-reporting 1.0.63 → 1.0.65

package/src/sf-i-reporting.ts

@@ -114,6 +114,14 @@ export class SfIReporting extends LitElement {
     .SfIReportingC {
     }
 
+    .SfIReportingCCopy {
+      width: 100%;
+      height: 100%;
+      z-index: 10;
+      display: none;
+      position: absolute;
+    }
+
     .invisible {
       visibility: hidden;
     }
@@ -454,6 +462,9 @@ export class SfIReporting extends LitElement {
   @query('.SfIReportingC')
   _SfIReportingC: any;
 
+  @query('.SfIReportingCCopy')
+  _SfIReportingCCopy: any;
+
   @query('#reporting-container')
   _SfReportingContainer: any;
 
@@ -1016,7 +1027,8 @@ export class SfIReporting extends LitElement {
               formSaveButton.style.visibility = 'hidden';
             }
           })
-          formSaveButton.addEventListener('click', () => {
+          formSaveButton.addEventListener('click', async () => {
+            await this.showLoader();
             formModalContainer.style.display = 'none'
             let formObj = formContainer.querySelector('#' + element.id) as SfIForm
             console.log("selected", formObj, element.id)
@@ -1051,7 +1063,8 @@ export class SfIReporting extends LitElement {
     if(this.flow != 'details'){
       let selectedOptions = (this._SfReportingContainer as HTMLDivElement).querySelectorAll('.selected-option') as NodeListOf<HTMLDivElement>
       for(let selectedOption of selectedOptions){
-        selectedOption?.addEventListener('click',(ev: any) => {
+        selectedOption?.addEventListener('click',async (ev: any) => {
+          await this.showLoader();
           let target = ev.target
           let elementId = target.id
           let id = elementId.split('-')[2]
@@ -1111,6 +1124,7 @@ export class SfIReporting extends LitElement {
     setTimeout(()=>{
       this.evalShowProgress();
       (this._SfReportingContainer.querySelector('.form-container') as HTMLDivElement).scrollTo({top: scrollTopTarget, left:0});
+      this.hideLoader();
     },500)
     
   }
@@ -1298,7 +1312,8 @@ export class SfIReporting extends LitElement {
   initInputListeners = () => {
     let addButtons = (this._SfReportingContainer as HTMLDivElement).querySelectorAll('.add-button') as NodeListOf<HTMLButtonElement>
     for(let addButton of addButtons){
-      addButton.addEventListener('click', (ev: any)=>{
+      addButton.addEventListener('click', async (ev: any)=>{
+        await this.showLoader();
         let target = ev.target;
         for(let [i,element] of this.dataModel.entries()){
           if(isAddButtonObject(element)){
@@ -1328,7 +1343,8 @@ export class SfIReporting extends LitElement {
 
     let removeButtons = (this._SfReportingContainer as HTMLDivElement).querySelectorAll('.remove-child-button') as NodeListOf<HTMLButtonElement>
     for(let removeButton of removeButtons){
-      removeButton.addEventListener('click', (ev: any)=>{
+      removeButton.addEventListener('click', async (ev: any)=>{
+        await this.showLoader();
         let target = ev.target;
         console.log(target)
         let addId = target.id.split("-")[0]
@@ -1665,7 +1681,8 @@ export class SfIReporting extends LitElement {
   initSectionListeners = () => {
     let sectionHeads = (this._SfReportingContainer.querySelectorAll('.section-head')) as NodeListOf<HTMLDivElement>
     for(let sectionHead of sectionHeads){
-      sectionHead.addEventListener('click', () => {
+      sectionHead.addEventListener('click', async () => {
+        await this.showLoader();
         console.log('scroll position',(this._SfReportingContainer.querySelector('.form-container') as HTMLElement).scrollTop)
         for(let dataObj of this.dataModel){
           if(dataObj.id == sectionHead.id){
@@ -2247,6 +2264,21 @@ export class SfIReporting extends LitElement {
 
   }
 
+  showLoader = async () => {
+    if(this._SfIReportingCCopy != null){
+      let loaderContainer = this._SfIReportingCCopy as HTMLDivElement
+      loaderContainer.style.backgroundColor = "#efefef"
+      loaderContainer.style.display = 'flex'
+    }
+  }
+
+  hideLoader = async () => {
+    if(this._SfIReportingCCopy != null){
+      let loaderContainer = this._SfIReportingCCopy as HTMLDivElement
+      loaderContainer.style.display = 'none'
+    }
+  }
+
   protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 
     this.loadMode();
@@ -2311,6 +2343,9 @@ export class SfIReporting extends LitElement {
       return html`
       <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+      <div part="reporting-container-outer-copy" class="SfIReportingCCopy align-center d-flex flex-col justify-center hide">
+        <div class="lds-dual-ring"></div>
+      </div>
       <div part="reporting-container-outer" class="SfIReportingC d-flex flex-col align-center">
         <div id="reporting-container" part="reporting-container" class="w-100-m-0 hide"></div>  
         <div class="loader-element"></div>
@@ -2335,6 +2370,9 @@ export class SfIReporting extends LitElement {
       return html`
       <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+      <div part="reporting-container-outer-copy" class="SfIReportingCCopy align-center d-flex flex-col justify-center hide">
+        <div class="lds-dual-ring"></div>
+      </div>
       <div part="reporting-container-outer" class="SfIReportingC d-flex flex-col align-center">
         <div id="reporting-container" part="reporting-container" class="w-100-m-0 hide"></div>
         <div class="loader-element"></div>
@@ -2359,6 +2397,9 @@ export class SfIReporting extends LitElement {
       return html`
       <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+      <div part="reporting-container-outer-copy" class="SfIReportingCCopy align-center d-flex flex-col justify-center hide">
+        <div class="lds-dual-ring"></div>
+      </div>
       <div part="reporting-container-outer" class="SfIReportingC d-flex flex-col align-center">
         <div id="reporting-container" part="reporting-container" class="w-100-m-0 hide"></div>
         <div class="loader-element"></div>