sf-i-events 1.0.714 → 1.0.715

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sf-i-events",
   "private": false,
-  "version": "1.0.714",
+  "version": "1.0.715",
   "description": "Superflows Navigation Component",
   "main": "sf-i-events.js",
   "module": "sf-i-events.js",

package/sf-i-events.d.ts

@@ -465,6 +465,7 @@ export declare class SfIEvents extends LitElement {
     renderEvents: (_firstDay: any, _endDay: any, iInit: number, iLast: number, showGraph: boolean, index: number, month: number, period: string, firstDate: any, parametersTitle: string) => string;
     renderReporting: (event: any, mmddyyyy: any) => string;
     renderListReporting: (listReportingContainer: HTMLDivElement, event: any, mmddyyyy: any, eventsContainer: HTMLDivElement) => void;
+    attachListReportingListeners: (eventsContainer: HTMLDivElement) => void;
     renderStreamEvents: (index: number, month: number, year: number, showGraph?: boolean) => string;
     renderThisEvents: (index: number, startDate: Date, showGraph?: boolean) => string;
     renderRangeEvents: (firstDate: Date, count: number, eventsContainer: HTMLDivElement) => void;

package/sf-i-events.js

@@ -2496,7 +2496,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             let approverStr = this.getApproverStringFromEvent(event);
             let graphParam = this.getGraphParam(event);
             console.log("graphParam", graphParam.split(';')[0]);
-            html += '<div class="d-flex align-center"><div part="badge-filter-name" class="graphparamname graphparamname1 mb-20">' + graphParam.split(';')[0] + '</div>' + reporterStr + approverStr + '<button id="button-list-reporting-' + mmdd.replace('/', '-') + '-' + i + '-' + j + '" part="button-list-reporting" class="material-icons ml-10 mb-20 button-list-reporting">summarize</button></div>';
+            html += '<div class="d-flex align-center"><div part="badge-filter-name" class="graphparamname graphparamname1 mb-20">' + graphParam.split(';')[0] + '</div>' + reporterStr + approverStr + '<button id="button-list-reporting-' + mmdd.replace('/', '-') + '-' + i + '-' + j + '" part="button-list-reporting" class="material-icons ml-10 mb-20 button-list-reporting">edit_note</button></div>';
             return html;
         };
         this.renderEvents = (_firstDay, _endDay, iInit, iLast, showGraph, index, month, period, firstDate = null, parametersTitle) => {
@@ -2655,7 +2655,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                         html += this.renderCalendarRowDivItemDivTableHead(this.events[mmdd][j], partStatus);
                         html += this.renderCalendarRowDivItemDivTableBody(this.events[mmdd][j], partStatus, lateStatus, complianceStatus, mmdd, i, j);
                         html += this.renderCalendarAnnotations(this.events[mmdd][j], mmdd, i, j);
-                        html += '<div class="list-reporting-container d-flex flex-col hide" id="list-reporting-container-' + i + '-' + j + '"></div>';
+                        html += '<div class="list-reporting-container d-flex flex-col hide" part="list-reporting-container" id="list-reporting-container-' + i + '-' + j + '"></div>';
                         html += this.renderCalendarRowDivItemDivEnd();
                     }
                     html += this.renderCalendarRowDivEnd();
@@ -2710,7 +2710,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             let docsOptional = event['docs'] == null ? [] : event['docs'] == null ? [] : event['docs'];
             if (this.myRole == this.TAB_APPROVER || this.myRole == this.TAB_FUNCTION_HEAD) {
                 if (event.comments.length > 0) {
-                    html += '<div class="d-flex justify-between m-20">';
+                    html += '<div class="d-flex justify-between m-20" part="list-report-results-title-container">';
                     html += '<h3 part="results-title" class="m-0"><br />Approve Compliance</h3>';
                     html += '</div>';
                     html += '<div class="m-20" part="report-container">';
@@ -2742,7 +2742,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 }
             }
             if (this.myRole == this.TAB_REPORTER || this.myRole == this.TAB_FUNCTION_HEAD) {
-                html += '<div class="d-flex justify-between m-20">';
+                html += '<div class="d-flex justify-between m-20" part="list-report-results-title-container">';
                 html += '<h3 part="results-title" class="m-0"><br />Report Compliance</h3>';
                 html += '</div>';
                 var showSubmissionSection = true;
@@ -2793,7 +2793,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 }
             }
             if (this.myRole == this.TAB_AUDITOR) {
-                html += '<div class="d-flex justify-between m-20">';
+                html += '<div class="d-flex justify-between m-20" part="list-report-results-title-container">';
                 html += '<h3 part="results-title" class="m-0"><br />Audit Compliance</h3>';
                 html += '</div>';
                 html += '<div class="m-20" part="report-container">';
@@ -2823,7 +2823,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 html += '</div>';
             }
             if (this.myRole == this.TAB_VIEWER) {
-                html += '<div class="d-flex justify-between m-20">';
+                html += '<div class="d-flex justify-between m-20" part="list-report-results-title-container">';
                 html += '<h3 part="results-title" class="m-0"><br />View Compliance</h3>';
                 html += '</div>';
                 html += '<div class="m-20" part="report-container">';
@@ -3149,6 +3149,28 @@ let SfIEvents = class SfIEvents extends LitElement {
                 this.fetchReportFormat(listReportingContainer, reportformatName, (_j = event['reportformatschema']) !== null && _j !== void 0 ? _j : "", (_k = event['reportformatvalues']) !== null && _k !== void 0 ? _k : "");
             }
         };
+        this.attachListReportingListeners = (eventsContainer) => {
+            let buttonListReports = eventsContainer.querySelectorAll('.button-list-reporting');
+            for (let buttonListReport of buttonListReports) {
+                buttonListReport === null || buttonListReport === void 0 ? void 0 : buttonListReport.addEventListener('click', (ev) => {
+                    const id = ev.target.id;
+                    const idArr = id.split("-");
+                    const mmdd = idArr[3] + "/" + idArr[4];
+                    const yyyy = this.getCurrentYear(idArr[3]);
+                    const i = idArr[5];
+                    const j = idArr[6];
+                    let listReportingContainer = eventsContainer.querySelector('#list-reporting-container-' + i + '-' + j);
+                    console.log('mmddyyyy', this.events[mmdd][j], 'display', listReportingContainer.style.display);
+                    if (listReportingContainer.style.display == 'none' || listReportingContainer.style.display == '') {
+                        this.renderListReporting(listReportingContainer, this.events[mmdd][j], mmdd + '/' + yyyy, eventsContainer);
+                    }
+                    else {
+                        listReportingContainer.innerHTML = '';
+                        listReportingContainer.style.display = 'none';
+                    }
+                });
+            }
+        };
         this.renderStreamEvents = (index, month, year, showGraph = true) => {
             //console.log('flowgraph renderStreamEvents', this.flowGraph);
             const lastDay = this.getLastDayOfMonth(month, year);
@@ -3208,26 +3230,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             buttonRefresh.addEventListener('click', async () => {
                 this.processDateSelection(eventsContainer);
             });
-            let buttonListReports = eventsContainer.querySelectorAll('.button-list-reporting');
-            for (let buttonListReport of buttonListReports) {
-                buttonListReport === null || buttonListReport === void 0 ? void 0 : buttonListReport.addEventListener('click', (ev) => {
-                    const id = ev.target.id;
-                    const idArr = id.split("-");
-                    const mmdd = idArr[3] + "/" + idArr[4];
-                    const yyyy = this.getCurrentYear(idArr[3]);
-                    const i = idArr[5];
-                    const j = idArr[6];
-                    let listReportingContainer = eventsContainer.querySelector('#list-reporting-container-' + i + '-' + j);
-                    console.log('mmddyyyy', this.events[mmdd][j], 'display', listReportingContainer.style.display);
-                    if (listReportingContainer.style.display == 'none' || listReportingContainer.style.display == '') {
-                        this.renderListReporting(listReportingContainer, this.events[mmdd][j], mmdd + '/' + yyyy, this._SfStreamContainer);
-                    }
-                    else {
-                        listReportingContainer.innerHTML = '';
-                        listReportingContainer.style.display = 'none';
-                    }
-                });
-            }
+            this.attachListReportingListeners(eventsContainer);
             const buttonArr = eventsContainer.querySelectorAll('.button-expand');
             for (var i = 0; i < buttonArr.length; i++) {
                 buttonArr[i].addEventListener('click', (ev) => {
@@ -5837,26 +5840,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate);
                 this.renderThis(index);
             });
-            let buttonListReports = this._SfThisContainer.querySelectorAll('.button-list-reporting');
-            for (let buttonListReport of buttonListReports) {
-                buttonListReport === null || buttonListReport === void 0 ? void 0 : buttonListReport.addEventListener('click', (ev) => {
-                    const id = ev.target.id;
-                    const idArr = id.split("-");
-                    const mmdd = idArr[3] + "/" + idArr[4];
-                    const yyyy = this.getCurrentYear(idArr[3]);
-                    const i = idArr[5];
-                    const j = idArr[6];
-                    let listReportingContainer = this._SfThisContainer.querySelector('#list-reporting-container-' + i + '-' + j);
-                    console.log('mmddyyyy', this.events[mmdd][j], 'display', listReportingContainer.style.display);
-                    if (listReportingContainer.style.display == 'none' || listReportingContainer.style.display == '') {
-                        this.renderListReporting(listReportingContainer, this.events[mmdd][j], mmdd + '/' + yyyy, this._SfStreamContainer);
-                    }
-                    else {
-                        listReportingContainer.innerHTML = '';
-                        listReportingContainer.style.display = 'none';
-                    }
-                });
-            }
+            this.attachListReportingListeners(this._SfThisContainer);
             const buttonArr = this._SfThisContainer.querySelectorAll('.button-expand');
             for (i = 0; i < buttonArr.length; i++) {
                 buttonArr[i].addEventListener('click', (ev) => {
@@ -6177,26 +6161,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
                 this.renderStream(index);
             });
-            let buttonListReports = this._SfStreamContainer.querySelectorAll('.button-list-reporting');
-            for (let buttonListReport of buttonListReports) {
-                buttonListReport === null || buttonListReport === void 0 ? void 0 : buttonListReport.addEventListener('click', (ev) => {
-                    const id = ev.target.id;
-                    const idArr = id.split("-");
-                    const mmdd = idArr[3] + "/" + idArr[4];
-                    const yyyy = this.getCurrentYear(idArr[3]);
-                    const i = idArr[5];
-                    const j = idArr[6];
-                    let listReportingContainer = this._SfStreamContainer.querySelector('#list-reporting-container-' + i + '-' + j);
-                    console.log('mmddyyyy', this.events[mmdd][j], 'display', listReportingContainer.style.display);
-                    if (listReportingContainer.style.display == 'none' || listReportingContainer.style.display == '') {
-                        this.renderListReporting(listReportingContainer, this.events[mmdd][j], mmdd + '/' + yyyy, this._SfStreamContainer);
-                    }
-                    else {
-                        listReportingContainer.innerHTML = '';
-                        listReportingContainer.style.display = 'none';
-                    }
-                });
-            }
+            this.attachListReportingListeners(this._SfStreamContainer);
             const buttonArr = this._SfStreamContainer.querySelectorAll('.button-expand');
             for (i = 0; i < buttonArr.length; i++) {
                 buttonArr[i].addEventListener('click', (ev) => {

package/src/sf-i-events.ts

@@ -4650,7 +4650,7 @@ export class SfIEvents extends LitElement {
 
     let graphParam = this.getGraphParam(event);
     console.log("graphParam", graphParam.split(';')[0]);
-    html += '<div class="d-flex align-center"><div part="badge-filter-name" class="graphparamname graphparamname1 mb-20">' + graphParam.split(';')[0] + '</div>' + reporterStr + approverStr + '<button id="button-list-reporting-'+mmdd.replace('/', '-')+'-'+ i + '-' + j +'" part="button-list-reporting" class="material-icons ml-10 mb-20 button-list-reporting">summarize</button></div>';
+    html += '<div class="d-flex align-center"><div part="badge-filter-name" class="graphparamname graphparamname1 mb-20">' + graphParam.split(';')[0] + '</div>' + reporterStr + approverStr + '<button id="button-list-reporting-'+mmdd.replace('/', '-')+'-'+ i + '-' + j +'" part="button-list-reporting" class="material-icons ml-10 mb-20 button-list-reporting">edit_note</button></div>';
 
     return html;
 
@@ -4843,7 +4843,7 @@ export class SfIEvents extends LitElement {
           html += this.renderCalendarRowDivItemDivTableHead(this.events[mmdd][j], partStatus);
           html += this.renderCalendarRowDivItemDivTableBody(this.events[mmdd][j], partStatus, lateStatus, complianceStatus, mmdd, i, j);
           html += this.renderCalendarAnnotations(this.events[mmdd][j], mmdd, i, j);
-          html += '<div class="list-reporting-container d-flex flex-col hide" id="list-reporting-container-' + i + '-' + j + '"></div>'
+          html += '<div class="list-reporting-container d-flex flex-col hide" part="list-reporting-container" id="list-reporting-container-' + i + '-' + j + '"></div>'
           html += this.renderCalendarRowDivItemDivEnd();
 
         }
@@ -4919,7 +4919,7 @@ export class SfIEvents extends LitElement {
     if(this.myRole == this.TAB_APPROVER || this.myRole == this.TAB_FUNCTION_HEAD) {
       if(event.comments.length > 0) {
 
-        html += '<div class="d-flex justify-between m-20">';
+        html += '<div class="d-flex justify-between m-20" part="list-report-results-title-container">';
         html += '<h3 part="results-title" class="m-0"><br />Approve Compliance</h3>';
         html += '</div>';
         html += '<div class="m-20" part="report-container">';
@@ -4957,7 +4957,7 @@ export class SfIEvents extends LitElement {
     
     if(this.myRole == this.TAB_REPORTER || this.myRole == this.TAB_FUNCTION_HEAD) {
 
-      html += '<div class="d-flex justify-between m-20">';
+      html += '<div class="d-flex justify-between m-20" part="list-report-results-title-container">';
       html += '<h3 part="results-title" class="m-0"><br />Report Compliance</h3>';
       html += '</div>';
 
@@ -5024,7 +5024,7 @@ export class SfIEvents extends LitElement {
 
     if(this.myRole == this.TAB_AUDITOR) {
 
-      html += '<div class="d-flex justify-between m-20">';
+      html += '<div class="d-flex justify-between m-20" part="list-report-results-title-container">';
       html += '<h3 part="results-title" class="m-0"><br />Audit Compliance</h3>';
       html += '</div>';
       html += '<div class="m-20" part="report-container">';
@@ -5058,7 +5058,7 @@ export class SfIEvents extends LitElement {
     
     if(this.myRole == this.TAB_VIEWER) {
 
-      html += '<div class="d-flex justify-between m-20">';
+      html += '<div class="d-flex justify-between m-20" part="list-report-results-title-container">';
       html += '<h3 part="results-title" class="m-0"><br />View Compliance</h3>';
       html += '</div>';
       html += '<div class="m-20" part="report-container">';
@@ -5433,6 +5433,27 @@ export class SfIEvents extends LitElement {
     }
   }
  
+  attachListReportingListeners = (eventsContainer: HTMLDivElement) => {
+    let buttonListReports = eventsContainer.querySelectorAll('.button-list-reporting') as NodeListOf<HTMLButtonElement>
+    for(let buttonListReport of buttonListReports){
+      buttonListReport?.addEventListener('click',(ev:any) => {
+        const id = ev.target.id;
+        const idArr = id.split("-")
+        const mmdd = idArr[3] + "/" + idArr[4];
+        const yyyy = this.getCurrentYear(idArr[3]);
+        const i = idArr[5];
+        const j = idArr[6];
+        let listReportingContainer = eventsContainer.querySelector('#list-reporting-container-'+i+'-'+j) as HTMLDivElement
+        console.log('mmddyyyy', this.events[mmdd][j], 'display',listReportingContainer.style.display);
+        if(listReportingContainer.style.display == 'none' || listReportingContainer.style.display == ''){
+          this.renderListReporting(listReportingContainer,this.events[mmdd][j], mmdd + '/' + yyyy, eventsContainer)
+        }else{
+          listReportingContainer.innerHTML = '';
+          listReportingContainer.style.display = 'none';
+        }
+      })
+    }
+  }
   renderStreamEvents = (index: number, month: number, year: number, showGraph: boolean = true) => {
  
     //console.log('flowgraph renderStreamEvents', this.flowGraph);
@@ -5523,25 +5544,7 @@ export class SfIEvents extends LitElement {
     buttonRefresh.addEventListener('click',async ()=>{
       this.processDateSelection(eventsContainer)
     })
-    let buttonListReports = eventsContainer.querySelectorAll('.button-list-reporting') as NodeListOf<HTMLButtonElement>
-    for(let buttonListReport of buttonListReports){
-      buttonListReport?.addEventListener('click',(ev:any) => {
-        const id = ev.target.id;
-        const idArr = id.split("-")
-        const mmdd = idArr[3] + "/" + idArr[4];
-        const yyyy = this.getCurrentYear(idArr[3]);
-        const i = idArr[5];
-        const j = idArr[6];
-        let listReportingContainer = eventsContainer.querySelector('#list-reporting-container-'+i+'-'+j) as HTMLDivElement
-        console.log('mmddyyyy', this.events[mmdd][j], 'display',listReportingContainer.style.display);
-        if(listReportingContainer.style.display == 'none' || listReportingContainer.style.display == ''){
-          this.renderListReporting(listReportingContainer,this.events[mmdd][j], mmdd + '/' + yyyy, (this._SfStreamContainer as HTMLDivElement))
-        }else{
-          listReportingContainer.innerHTML = '';
-          listReportingContainer.style.display = 'none';
-        }
-      })
-    }
+    this.attachListReportingListeners(eventsContainer);
     const buttonArr = eventsContainer.querySelectorAll('.button-expand') as NodeListOf<HTMLButtonElement>;
 
     for(var i = 0; i < buttonArr.length; i++) {
@@ -8792,25 +8795,7 @@ export class SfIEvents extends LitElement {
       await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate);
       this.renderThis(index);
     })
-    let buttonListReports = (this._SfThisContainer as HTMLDivElement).querySelectorAll('.button-list-reporting') as NodeListOf<HTMLButtonElement>
-    for(let buttonListReport of buttonListReports){
-      buttonListReport?.addEventListener('click',(ev:any) => {
-        const id = ev.target.id;
-        const idArr = id.split("-")
-        const mmdd = idArr[3] + "/" + idArr[4];
-        const yyyy = this.getCurrentYear(idArr[3]);
-        const i = idArr[5];
-        const j = idArr[6];
-        let listReportingContainer = (this._SfThisContainer as HTMLDivElement).querySelector('#list-reporting-container-'+i+'-'+j) as HTMLDivElement
-        console.log('mmddyyyy', this.events[mmdd][j], 'display',listReportingContainer.style.display);
-        if(listReportingContainer.style.display == 'none' || listReportingContainer.style.display == ''){
-          this.renderListReporting(listReportingContainer,this.events[mmdd][j], mmdd + '/' + yyyy, (this._SfStreamContainer as HTMLDivElement))
-        }else{
-          listReportingContainer.innerHTML = '';
-          listReportingContainer.style.display = 'none';
-        }
-      })
-    }
+    this.attachListReportingListeners(this._SfThisContainer as HTMLDivElement);
     const buttonArr = (this._SfThisContainer as HTMLDivElement).querySelectorAll('.button-expand') as NodeListOf<HTMLButtonElement>;
 
     for(i = 0; i < buttonArr.length; i++) {
@@ -9230,26 +9215,7 @@ export class SfIEvents extends LitElement {
       this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
       this.renderStream(index);
     })
-
-    let buttonListReports = (this._SfStreamContainer as HTMLDivElement).querySelectorAll('.button-list-reporting') as NodeListOf<HTMLButtonElement>
-    for(let buttonListReport of buttonListReports){
-      buttonListReport?.addEventListener('click',(ev:any) => {
-        const id = ev.target.id;
-        const idArr = id.split("-")
-        const mmdd = idArr[3] + "/" + idArr[4];
-        const yyyy = this.getCurrentYear(idArr[3]);
-        const i = idArr[5];
-        const j = idArr[6];
-        let listReportingContainer = (this._SfStreamContainer as HTMLDivElement).querySelector('#list-reporting-container-'+i+'-'+j) as HTMLDivElement
-        console.log('mmddyyyy', this.events[mmdd][j], 'display',listReportingContainer.style.display);
-        if(listReportingContainer.style.display == 'none' || listReportingContainer.style.display == ''){
-          this.renderListReporting(listReportingContainer,this.events[mmdd][j], mmdd + '/' + yyyy, (this._SfStreamContainer as HTMLDivElement))
-        }else{
-          listReportingContainer.innerHTML = '';
-          listReportingContainer.style.display = 'none';
-        }
-      })
-    }
+    this.attachListReportingListeners(this._SfStreamContainer as HTMLDivElement);
     const buttonArr = (this._SfStreamContainer as HTMLDivElement).querySelectorAll('.button-expand') as NodeListOf<HTMLButtonElement>;
 
     for(i = 0; i < buttonArr.length; i++) {