sf-i-events 1.0.750 → 1.0.751

package/src/sf-i-events.ts

@@ -1617,7 +1617,7 @@ export class SfIEvents extends LitElement {
   features: string = "[]"
 
   getFeatures = () => {
-    return JSON.parse(this.features)
+    return ['compliances',...JSON.parse(this.features)]
   }
 
   selectedFeatures: string[] = this.getFeatures()
@@ -2642,6 +2642,14 @@ export class SfIEvents extends LitElement {
       overflow-x: auto;
     }
 
+    .filter-list-container{
+      position: absolute;
+      right: 5px;
+      background-color: white;
+      border: solid 1px #888;
+      border-radius: 5px
+    }
+
     @media (orientation: landscape) {
 
       .lb {
@@ -3769,9 +3777,9 @@ export class SfIEvents extends LitElement {
       } else {
         arrData[name]++;
       }
-      if(name.toLowerCase().indexOf('na - corp sec') >= 0) {
-        console.log('arrData[corpsec]', name, arrData[name]);
-      }
+      // if(name.toLowerCase().indexOf('na - corp sec') >= 0) {
+      //   console.log('arrData[corpsec]', name, arrData[name]);
+      // }
     }
 
     for(var i = 0; i < arr.length; i++) {
@@ -4085,8 +4093,6 @@ export class SfIEvents extends LitElement {
 
   getCompletenessStatus = (event: any) => {
 
-    console.log('completeness status',event);
-
     if(event.comments == null || event.comments.length === 0) {
       return "not-started";
     } else {
@@ -4221,14 +4227,17 @@ export class SfIEvents extends LitElement {
     var html = '';
 
     html += '<div class="mb-20 stream-event-list" part="stream-event-list-charts">';
-      html += '<div class="align-center d-flex flex-wrap align-center justify-between mb-10 w-100-m-0" part="duration-title-container"><h4 part="duration-title">' + parametersTitle + '</h4>'
+      html += '<div class="align-center d-flex flex-wrap align-start justify-between mb-10 w-100-m-0" part="duration-title-container"><h4 part="duration-title" class="m-0">' + parametersTitle + '</h4>'
       if(this.getFeatures().length > 0){
-        // html += '<div class="filter-button-container"><buttton part="button-icon" id="filter-button" class="material-icons">filter_list</button></div>'
-        html += '<div class="filter-button-container">'
+        html += '<div class="filter-button-container"><button part="button-icon" id="filter-button" class="material-icons">filter_list</button>'
+        html += '<div id="filter-list-container" class="filter-list-container hide flex-col justify-center align-start p-10" part="filter-list-container" anchor="filter-button">'
+        html += `<div class="filter-input-container d-flex"><input class="input-select-feature-all" type="checkbox" ${this.selectedFeatures.length >= (this.getFeatures().length) ? 'checked' : ''} id="input-select-feature-all"  part="input-select-feature" name="all"></input><label for="input-select-feature-all" class="input-select-feature-label"  part="input-sellect-feature-label">all</label></div>`
+        // html += `<div class="filter-input-container d-flex"><input class="input-select-feature-compliances" type="checkbox" ${this.selectedFeatures.indexOf('compliances') >= 0 ? 'checked' : ''} id="input-select-feature-compliances"  part="input-select-feature" name="compliances"></input><label for="input-select-feature-compliances" class="input-select-feature-label"  part="input-sellect-feature-label">compliances</label></div>`
         for(let [index,feature] of this.getFeatures().entries()){
-          html += `<input class="ml-10 input-select-feature" type="checkbox" ${this.selectedFeatures.indexOf(feature) >= 0 ? 'checked' : ''} id="input-select-feature-${index}"  part="input-select-feature" name="${feature}"></input><label for="input-select-feature-${index}" class="input-select-feature-label"  part="input-sellect-feature-label">${feature}</label>`
+          console.log('rendering features', feature, this.selectedFeatures);
+          html += `<div class="filter-input-container d-flex"><input class="input-select-feature" type="checkbox" ${this.selectedFeatures.indexOf(feature) >= 0 ? 'checked' : ''} id="input-select-feature-${index}"  part="input-select-feature" name="${feature}"></input><label for="input-select-feature-${index}" class="input-select-feature-label"  part="input-sellect-feature-label">${feature}</label></div>`
         }
-        html += '</div>'
+        html += '</div></div>'
       }
       html += '<button id="button-refresh" part="button-duration-title" class="align-center d-flex justify-center"><h4 part="duration-title">' + parametersTitle + '</h4><span part="duration-title-icon" class="material-icons ml-10">refresh</span></button></div>';
       html += '<div class="align-center d-flex flex-wrap align-center mb-10 w-100-m-0" part="last-update-title-container"><h6 part="last-update-title" class="align-center d-flex"><span class="material-symbols-outlined">update</span>&nbsp;&nbsp;Last Updated on ' + this.lastupdated + '</h6></div>';
@@ -4456,11 +4465,11 @@ export class SfIEvents extends LitElement {
       for(var i = 0; i < arrTriggers.length; i++) {
         const targetDates = arrTriggers[i].targetDates;
         for(var j = 0; j < targetDates.length; j++) {
-          console.log('comparing', targetDates[j], ddmm);
+          // console.log('comparing', targetDates[j], ddmm);
           if(targetDates[j].indexOf(ddmm) >= 0) {
             remarks = arrTriggers[i].remarks;
             occurrenceDate = arrTriggers[i].occurrenceDate;
-            console.log('remarks', mmdd)
+            // console.log('remarks', mmdd)
           }
         }
       }
@@ -6044,25 +6053,49 @@ export class SfIEvents extends LitElement {
     }
     this.renderButtonRefresh(eventsContainer);
     this.attachTimelineFilterHandlers(eventsContainer);
-    const selectFeatures = eventsContainer.querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
-    for(let selectFeature of selectFeatures){
-      selectFeature.addEventListener('click',(ev: any) => {
-        let target = ev.target;
-        let id = target.id;
-        let index = id.split('-')[3];
-        let selectedFeature = this.getFeatures()[index]
-        if(target.checked){
-          if(this.selectedFeatures.indexOf(selectedFeature) < 0){
-            this.selectedFeatures.push(selectedFeature)
-          }
-        }else{
-          if(this.selectedFeatures.indexOf(selectedFeature) >= 0){
-            this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature),1);
+    const filterButton = eventsContainer.querySelector('#filter-button') as HTMLButtonElement
+    filterButton?.addEventListener('click',() => {
+      const filterList = eventsContainer.querySelector('#filter-list-container') as HTMLDivElement
+      filterList.style.display = (filterList.style.display != 'block' ? 'block' : 'none')
+      const selectFeatures = filterList.querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
+      for(let selectFeature of selectFeatures){
+        selectFeature.addEventListener('click',(ev: any) => {
+          let target = ev.target;
+          let id = target.id;
+          let index = id.split('-')[3];
+          let selectedFeature = this.getFeatures()[index]
+          if(target.checked){
+            if(this.selectedFeatures.indexOf(selectedFeature) < 0){
+              this.selectedFeatures.push(selectedFeature)
+            }
+          }else{
+            if(this.selectedFeatures.indexOf(selectedFeature) >= 0){
+              this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature),1);
+            }
           }
-        }
-        this.processDateSelection(eventsContainer)
-      })
-    }
+          this.processDateSelection(eventsContainer)
+        })
+      }
+    })
+    // const selectFeatures = eventsContainer.querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
+    // for(let selectFeature of selectFeatures){
+    //   selectFeature.addEventListener('click',(ev: any) => {
+    //     let target = ev.target;
+    //     let id = target.id;
+    //     let index = id.split('-')[3];
+    //     let selectedFeature = this.getFeatures()[index]
+    //     if(target.checked){
+    //       if(this.selectedFeatures.indexOf(selectedFeature) < 0){
+    //         this.selectedFeatures.push(selectedFeature)
+    //       }
+    //     }else{
+    //       if(this.selectedFeatures.indexOf(selectedFeature) >= 0){
+    //         this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature),1);
+    //       }
+    //     }
+    //     this.processDateSelection(eventsContainer)
+    //   })
+    // }
     const radioExpander = eventsContainer.querySelector('#graph-radios-expander') as HTMLButtonElement;
     radioExpander?.addEventListener('click', (e: any) => {
 
@@ -9720,29 +9753,66 @@ export class SfIEvents extends LitElement {
 
     (this._SfThisContainer as HTMLDivElement).innerHTML = html;
     this.renderButtonRefresh((this._SfThisContainer as HTMLDivElement));
-    const selectFeatures = (this._SfThisContainer as HTMLDivElement).querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
-    for(let selectFeature of selectFeatures){
-      selectFeature.addEventListener('click',async (ev: any) => {
+    const filterButton = (this._SfThisContainer as HTMLDivElement).querySelector('#filter-button') as HTMLButtonElement
+    filterButton?.addEventListener('click',() => {
+      const filterList = (this._SfThisContainer as HTMLDivElement).querySelector('#filter-list-container') as HTMLDivElement
+      filterList.style.display = (filterList.style.display != 'block' ? 'block' : 'none')
+      const selectFeatureAll = filterList.querySelector('.input-select-feature-all') as HTMLInputElement
+      selectFeatureAll.addEventListener('click',async(ev: any) => {
         let target = ev.target;
-        let id = target.id;
-        let i = id.split('-')[3];
-        let selectedFeature = this.getFeatures()[i]
         if(target.checked){
-          if(this.selectedFeatures.indexOf(selectedFeature) < 0){
-            this.selectedFeatures.push(selectedFeature)
+          for(let feature of this.getFeatures()){
+            if(this.selectedFeatures.indexOf(feature) < 0){
+              this.selectedFeatures.push(feature);
+            }
           }
         }else{
-          if(this.selectedFeatures.indexOf(selectedFeature) >= 0){
-            this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature),1);
-          }
+          this.selectedFeatures = []
         }
-        this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+        const selectFeatures = filterList.querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
+        for(let selectFeature of selectFeatures){
+          let id = selectFeature.id;
+          let i = id.split('-')[3];
+          let selectedFeature = this.getFeatures()[parseInt(i)]
+          selectFeature.checked = this.selectedFeatures.indexOf(selectedFeature) >= 0
+        }
+        const dateResult = this.calculateStartAndEndDateOfStream(index);
+        console.log('dateresult', dateResult, index);
+        console.log('selectedfeatures', this.selectedFeatures);
         this.currentColumnIndex = index + "";
-        const dateResult = this.calculateStartAndEndDateOfThis(index);
-        await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate);
-        this.renderThis(index);
+        if(dateResult != null) {
+          await this.renderWithFeatures(dateResult.startDate, dateResult.endDate);
+        }
+        this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+        this.renderStream(index);
       })
-    } 
+      const selectFeatures = filterList.querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
+      for(let selectFeature of selectFeatures){
+        selectFeature.addEventListener('click',async (ev: any) => {
+          let target = ev.target;
+          let id = target.id;
+          let i = id.split('-')[3];
+          let selectedFeature = this.getFeatures()[i]
+          if(target.checked){
+            if(this.selectedFeatures.indexOf(selectedFeature) < 0){
+              this.selectedFeatures.push(selectedFeature)
+            }
+          }else{
+            if(this.selectedFeatures.indexOf(selectedFeature) >= 0){
+              this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature),1);
+            }
+          }
+          const dateResult = this.calculateStartAndEndDateOfStream(index);
+          this.currentColumnIndex = index + "";
+          if(dateResult != null) {
+            await this.renderWithFeatures(dateResult.startDate, dateResult.endDate);
+          }
+          this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+          this.renderStream(index);
+          
+        })
+      }
+    }) 
     const radioExpander = (this._SfThisContainer as HTMLDivElement).querySelector('#graph-radios-expander') as HTMLButtonElement;
     radioExpander?.addEventListener('click', (e: any) => {
 
@@ -10182,36 +10252,71 @@ export class SfIEvents extends LitElement {
     (this._SfStreamContainer as HTMLDivElement).innerHTML = html;
     this.renderButtonRefresh((this._SfStreamContainer as HTMLDivElement));
     this.attachTimelineFilterHandlers((this._SfStreamContainer as HTMLDivElement));
-    
-    const selectFeatures = (this._SfStreamContainer as HTMLDivElement).querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
-    for(let selectFeature of selectFeatures){
-      selectFeature.addEventListener('click',async (ev: any) => {
+    const filterButton = (this._SfStreamContainer as HTMLDivElement).querySelector('#filter-button') as HTMLButtonElement
+    filterButton?.addEventListener('click',() => {
+      const filterList = (this._SfStreamContainer as HTMLDivElement).querySelector('#filter-list-container') as HTMLDivElement
+      filterList.style.display = (filterList.style.display != 'block' ? 'block' : 'none')
+      const selectFeatureAll = filterList.querySelector('.input-select-feature-all') as HTMLInputElement
+      selectFeatureAll.addEventListener('click',async(ev: any) => {
         let target = ev.target;
-        let id = target.id;
-        let i = id.split('-')[3];
-        let selectedFeature = this.getFeatures()[i]
         if(target.checked){
-          if(this.selectedFeatures.indexOf(selectedFeature) < 0){
-            this.selectedFeatures.push(selectedFeature)
+          for(let feature of this.getFeatures()){
+            if(this.selectedFeatures.indexOf(feature) < 0){
+              this.selectedFeatures.push(feature);
+            }
           }
         }else{
-          if(this.selectedFeatures.indexOf(selectedFeature) >= 0){
-            this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature),1);
-          }
+          this.selectedFeatures = []
+        }
+        const selectFeatures = filterList.querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
+        for(let selectFeature of selectFeatures){
+          let id = selectFeature.id;
+          let i = id.split('-')[3];
+          let selectedFeature = this.getFeatures()[parseInt(i)]
+          selectFeature.checked = this.selectedFeatures.indexOf(selectedFeature) >= 0
         }
         const dateResult = this.calculateStartAndEndDateOfStream(index);
         const monthResult = this.calculateMonthFromIndex(index);
         console.log('monthResult', monthResult);
-        console.log('dateresult', dateResult);
+        console.log('dateresult', dateResult, index);
+        console.log('selectedfeatures', this.selectedFeatures);
         this.currentColumnIndex = index + "";
         if(dateResult != null) {
-          await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate,"","yes",("0" + monthResult).slice(-2));
+          await this.renderWithFeatures(dateResult.startDate, dateResult.endDate,"","no",("0" + monthResult).slice(-2));
         }
         this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
         this.renderStream(index);
       })
-    }  
-
+      const selectFeatures = filterList.querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
+      for(let selectFeature of selectFeatures){
+        selectFeature.addEventListener('click',async (ev: any) => {
+          let target = ev.target;
+          let id = target.id;
+          let i = id.split('-')[3];
+          let selectedFeature = this.getFeatures()[i]
+          if(target.checked){
+            if(this.selectedFeatures.indexOf(selectedFeature) < 0){
+              this.selectedFeatures.push(selectedFeature)
+            }
+          }else{
+            if(this.selectedFeatures.indexOf(selectedFeature) >= 0){
+              this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature),1);
+            }
+          }
+          const dateResult = this.calculateStartAndEndDateOfStream(index);
+          const monthResult = this.calculateMonthFromIndex(index);
+          this.currentColumnIndex = index + "";
+          console.log('rendering feature', monthResult, dateResult);
+          if(dateResult != null) {
+            await this.renderWithFeatures(dateResult.startDate, dateResult.endDate,"","no",("0" + monthResult).slice(-2));
+          }
+          this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+          this.renderStream(index);
+          
+        })
+      }
+    })
+    
     const radioExpander = (this._SfStreamContainer as HTMLDivElement).querySelector('#graph-radios-expander') as HTMLButtonElement;
     radioExpander?.addEventListener('click', (e: any) => {
 
@@ -10526,7 +10631,7 @@ export class SfIEvents extends LitElement {
     }
 
     if(showGraph) {
-      
+      console.log('showing graph', showGraph)
       switch (this.flowGraph) {
         case this.FLOW_GRAPH_COMPLETENESS:
           this.renderCompletenessGraph((this._SfStreamContainer as HTMLDivElement));    
@@ -23187,6 +23292,15 @@ export class SfIEvents extends LitElement {
 
   }
 
+  renderWithFeatures = async(startDate: string = "", endDate: string = "", searchString: string = "", list: string = "yes", month: string = "00") => {
+    this.events = []
+    console.log('rendering and fetching', startDate, endDate, searchString, list, month)
+    if(this.selectedFeatures.indexOf('compliances') >= 0){
+      this.fetchAndYearlyRenderUserCalendar_2(startDate, endDate, searchString, list, month)    
+    }else if(this.selectedFeatures.indexOf('notices') >= 0){
+      this.fetchAndRenderNotices(startDate, endDate, searchString, list, month);
+    }
+  }
   fetchAndYearlyRenderUserCalendar_2 = async(startDate: string = "", endDate: string = "", searchString: string = "", list: string = "yes", month: string = "00") => {
 
     let path = "", view = "";
@@ -23239,6 +23353,7 @@ export class SfIEvents extends LitElement {
       this.events = (await this.fetchPresignedUrl(jsonRespose.signedUrlGet));
       await this.fetchPresignedUrlDelete(jsonRespose.signedUrlDelete)
       this.lastupdated = new Date().toLocaleDateString('en-IN') + " - " + new Date().toLocaleTimeString('en-IN')
+      console.log('rendering appropriate string', list);
         this.renderAppropriateStream(startDate, endDate, list == "no");
         this.fetchBulkReportingData();
         if(this.selectedFeatures.indexOf('notices') >= 0){
@@ -24955,7 +25070,7 @@ export class SfIEvents extends LitElement {
       if(tempRole != "") {
         this._SfRoleTabContainer.innerHTML = '';
       }
-
+      this.selectedFeatures = this.getFeatures()
       //console.log('stream received', this.stream, this.TAB_STREAM, this.TAB_YEAR);
 
       if(this.stream == this.TAB_YEAR) {