sf-i-events 1.0.734 → 1.0.735

package/package.json

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

package/sf-i-events.d.ts

@@ -441,7 +441,7 @@ export declare class SfIEvents extends LitElement {
     getApproverStringFromEvent: (event: any) => string;
     getApproverDetailStringFromEvent: (event: any) => string;
     renderLatestCompliance: (mmddyyyy: string, event: any) => any;
-    getCompletenessStatus: (event: any) => "rejected" | "not-started" | "pending-approval" | "approved";
+    getCompletenessStatus: (event: any) => "not-started" | "pending-approval" | "rejected" | "approved";
     getTimelinessStatus: (mmdd: string, event: any, completeness: string) => "late-executed" | "late-reported" | "late-approved" | "past-due-date" | "in-time";
     getComplianceStatus: (completeness: string, timeliness: string) => "scheduled" | "not-complied" | "partially-complied" | "complied";
     numcalled: number;

package/sf-i-events.js

@@ -4098,22 +4098,24 @@ let SfIEvents = class SfIEvents extends LitElement {
             let inputLabelFilter = eventsContainer.querySelector('#input-label-filter');
             selectFilterCriteria.style.display = 'block';
             inputLabelFilter.style.display = 'block';
-            // let selectedCriteria = ""
             selectFilterCriteria.innerHTML = "";
             let option = new Option();
             option.value = "";
-            option.innerHTML = "All";
+            option.innerHTML = "all";
             selectFilterCriteria.add(option);
             for (let criteria of Object.keys(this.statisticsMeta)) {
-                // if(i == 0){
-                //   selectedCriteria = criteria
-                // }
                 let option = new Option();
                 option.value = criteria;
-                option.innerHTML = Util.titleCase(criteria);
+                if (criteria == "reporter" || criteria == "approver" || criteria == "functionhead") {
+                    option.innerHTML = "user:" + criteria;
+                }
+                else {
+                    option.innerHTML = criteria;
+                }
                 selectFilterCriteria.add(option);
             }
-            selectFilterCriteria.addEventListener('change', (ev) => {
+            let selectFilterCriteriaNew = Util.clearListeners(selectFilterCriteria);
+            selectFilterCriteriaNew.addEventListener('change', (ev) => {
                 let target = ev.target;
                 let inputLabelCriteria = eventsContainer.querySelector('#input-label-criteria');
                 let selectFilterValues = eventsContainer.querySelector('#select-filter-values');
@@ -4127,16 +4129,18 @@ let SfIEvents = class SfIEvents extends LitElement {
                 option.innerHTML = "All";
                 selectFilterValues.add(option);
                 if (this.statisticsMeta[target.value] != null) {
+                    let sortedFilters = Util.alphabeticalSort(this.statisticsMeta[target.value]);
                     selectFilterValues.style.display = 'block';
                     inputLabelCriteria.style.display = 'block';
-                    inputLabelCriteria.innerHTML = Util.titleCase(target.value);
-                    for (let filter of this.statisticsMeta[target.value]) {
+                    inputLabelCriteria.innerHTML = target.value;
+                    for (let filter of sortedFilters) {
                         let option = new Option();
                         option.value = filter.split(';')[1];
-                        option.innerHTML = Util.titleCase(filter.split(';')[0]).replace(/\([^)]*\)/g, "");
+                        option.innerHTML = filter.split(';')[0].replace(/\([^)]*\)/g, "");
                         selectFilterValues.add(option);
                     }
-                    selectFilterValues.addEventListener('change', () => {
+                    let selectFilterValuesNew = Util.clearListeners(selectFilterValues);
+                    selectFilterValuesNew.addEventListener('change', () => {
                         console.log('changed');
                         this.processDateSelectionViewer(eventsContainer);
                     });
@@ -4150,24 +4154,6 @@ let SfIEvents = class SfIEvents extends LitElement {
             let inputLabelCriteria = eventsContainer.querySelector('#input-label-criteria');
             selectFilterValues.style.display = 'none';
             inputLabelCriteria.style.display = 'none';
-            // inputLabelCriteria.innerHTML = selectedCriteria
-            // selectFilterValues.innerHTML = ""
-            // option = new Option()
-            // option.value = "";
-            // option.innerHTML = "All"
-            // selectFilterValues.add(option)
-            // if(this.statisticsMeta[selectedCriteria] != null){
-            //   for(let filter of this.statisticsMeta[selectedCriteria]){
-            //     let option = new Option()
-            //     option.value = filter.split(';')[1];
-            //     option.innerHTML = Util.titleCase(filter.split(';')[0]).replace(/\([^)]*\)/g,"")
-            //     selectFilterValues.add(option)
-            //   }
-            // }
-            // selectFilterValues.addEventListener('change',() => {
-            //   console.log('changed')
-            //   this.processDateSelectionViewer(eventsContainer);
-            // })
         };
         this.renderSelectAllButtons = () => {
             let selectAllHtml = '<div class="d-flex justify-end w-100" style="position: fixed; bottom: 70px; left: 0px;" part="button-select-all-container">';
@@ -6226,7 +6212,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             // }
         };
         this.renderCustomViewer = () => {
-            var _a, _b, _c, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            var _a, _b, _c, _f, _g, _h, _j, _k, _l, _m;
             this.clearGraphData();
             this.clearSelectedGraphParam();
             this.clearSelectedLegend();
@@ -6260,12 +6246,12 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '</div>';
             html += '<div class="d-flex w-100">';
             html += '<div class="calendar-left-col desktop-only flex-col justify-start align-end">';
-            html += '<div class="title-item-date">';
-            html += '<label part="input-label">Start Date</label><br />';
+            html += '<div class="title-item-date d-flex flex-col align-end">';
+            html += '<label part="input-label">Start Date</label>';
             html += '<input id="stream-start-date" part="input" type="date" />';
             html += '</div>';
-            html += '<div class="title-item-date">';
-            html += '<label part="input-label">End Date</label><br />';
+            html += '<div class="title-item-date d-flex flex-col align-end">';
+            html += '<label part="input-label">End Date</label>';
             html += '<input id="stream-end-date" part="input" type="date" />';
             html += '</div>';
             html += '<div class="title-item-date">';
@@ -6278,11 +6264,11 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '<button id="button-this-year" part="button-lg-short-secondary">This Year</button>';
             html += '</div>';
             html += '<div class="title-item-date d-flex flex-col align-end">';
-            html += '<label part="input-label-filter-criteria" id="input-label-filter" class="mr-10">Filter Criteria</label><br />';
+            html += '<label part="input-label-filter-criteria" id="input-label-filter" class="mr-10">Filter Criteria</label>';
             html += '<select id="select-filter-criteria" class="mr-10"></select>';
             html += '</div>';
             html += '<div class="title-item-date d-flex flex-col align-end">';
-            html += '<label part="input-label-filter-value" id="input-label-criteria" class="mr-10"></label><br />';
+            html += '<label part="input-label-filter-value" id="input-label-criteria" class="mr-10"></label>';
             html += '<select id="select-filter-values" class="mr-10"></select>';
             html += '</div>';
             html += '</div>';
@@ -6392,10 +6378,10 @@ let SfIEvents = class SfIEvents extends LitElement {
                 this._SfCustomContainer.querySelector('#stream-end-date-mobile').value = endDate;
                 this.processDateSelectionViewer(this._SfCustomContainer);
             });
-            let selectFileterCriteria = this._SfCustomContainer.querySelector('#select-filter-criteria');
-            selectFileterCriteria.style.display = 'none';
-            let selectFileterValues = this._SfCustomContainer.querySelector('#select-filter-values');
-            selectFileterValues.style.display = 'none';
+            let selectFilterCriteria = this._SfCustomContainer.querySelector('#select-filter-criteria');
+            selectFilterCriteria.style.display = 'none';
+            let selectFilterValues = this._SfCustomContainer.querySelector('#select-filter-values');
+            selectFilterValues.style.display = 'none';
             let inputLabelFilter = this._SfCustomContainer.querySelector('#input-label-filter');
             inputLabelFilter.style.display = 'none';
             // for(var i = 0; i < 3; i++) {
@@ -6405,8 +6391,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             //     this.renderPast(target);
             //   })
             // }
-            (_o = this._SfCustomContainer.querySelector('#button-year-to-date')) === null || _o === void 0 ? void 0 : _o.click();
-            (_p = this._SfCustomContainer.querySelector('#button-year-to-date-mobile')) === null || _p === void 0 ? void 0 : _p.click();
+            this._SfCustomContainer.querySelector('#button-year-to-date').click();
         };
         this.renderThis = (index = 1, showGraph = true) => {
             var _a, _b;
@@ -12909,7 +12894,9 @@ let SfIEvents = class SfIEvents extends LitElement {
                                     }
                                 }
                             }
-                            this.chart4Base64 = this.chart4.toBase64Image();
+                            if (this.chart4 != null) {
+                                this.chart4Base64 = this.chart4.toBase64Image();
+                            }
                         }
                     },
                     scales: {
@@ -13085,7 +13072,9 @@ let SfIEvents = class SfIEvents extends LitElement {
                                     }
                                 }
                             }
-                            this.chart3Base64 = this.chart3.toBase64Image();
+                            if (this.chart3 != null) {
+                                this.chart3Base64 = this.chart3.toBase64Image();
+                            }
                         }
                     },
                     scales: {
@@ -13251,7 +13240,9 @@ let SfIEvents = class SfIEvents extends LitElement {
                                     }
                                 }
                             }
-                            this.chart2Base64 = this.chart2.toBase64Image();
+                            if (this.chart2 != null) {
+                                this.chart2Base64 = this.chart2.toBase64Image();
+                            }
                         }
                     },
                     scales: {
@@ -13458,8 +13449,9 @@ let SfIEvents = class SfIEvents extends LitElement {
                                     }
                                 }
                             }
-                            this.chartBase64 = this.chart.toBase64Image();
-                            console.log('this.chart onAnimationComplete', this.chart, this.chart.toBase64Image());
+                            if (this.chart != null) {
+                                this.chartBase64 = this.chart.toBase64Image();
+                            }
                         }
                     },
                     scales: {
@@ -14117,6 +14109,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             (_g = this._SfTabContainer.querySelector('#calendar-tab-custom')) === null || _g === void 0 ? void 0 : _g.addEventListener('click', () => {
                 this.enableCustom();
                 this.renderTabs(this.TAB_CUSTOM);
+                console.log('stats clicked');
                 if (this.myRole == this.TAB_VIEWER) {
                     this.renderCustomViewer();
                 }

package/src/sf-i-events.ts

@@ -6571,22 +6571,23 @@ export class SfIEvents extends LitElement {
     let inputLabelFilter = eventsContainer.querySelector('#input-label-filter') as HTMLLabelElement
     selectFilterCriteria.style.display = 'block'
     inputLabelFilter.style.display = 'block'
-    // let selectedCriteria = ""
     selectFilterCriteria.innerHTML = ""
     let option = new Option()
     option.value = "";
-    option.innerHTML = "All"
+    option.innerHTML = "all"
     selectFilterCriteria.add(option)
     for(let criteria of Object.keys(this.statisticsMeta)){
-      // if(i == 0){
-      //   selectedCriteria = criteria
-      // }
       let option = new Option()
       option.value = criteria;
-      option.innerHTML = Util.titleCase(criteria)
+      if(criteria == "reporter" || criteria == "approver" || criteria == "functionhead"){
+        option.innerHTML = "user:" + criteria
+      }else{
+        option.innerHTML = criteria
+      }
       selectFilterCriteria.add(option)
     }
-    selectFilterCriteria.addEventListener('change',(ev: any) => {
+    let selectFilterCriteriaNew = Util.clearListeners(selectFilterCriteria)
+    selectFilterCriteriaNew.addEventListener('change',(ev: any) => {
       let target = ev.target as HTMLSelectElement
       let inputLabelCriteria = eventsContainer.querySelector('#input-label-criteria') as HTMLLabelElement
       let selectFilterValues = eventsContainer.querySelector('#select-filter-values') as HTMLSelectElement
@@ -6601,16 +6602,18 @@ export class SfIEvents extends LitElement {
       option.innerHTML = "All";
       selectFilterValues.add(option)
       if(this.statisticsMeta[target.value] != null){
+        let sortedFilters = Util.alphabeticalSort(this.statisticsMeta[target.value])
         selectFilterValues.style.display = 'block'
         inputLabelCriteria.style.display = 'block'
-        inputLabelCriteria.innerHTML = Util.titleCase(target.value)
-        for(let filter of this.statisticsMeta[target.value]){
+        inputLabelCriteria.innerHTML = target.value
+        for(let filter of sortedFilters){
           let option = new Option()
           option.value = filter.split(';')[1];
-          option.innerHTML = Util.titleCase(filter.split(';')[0]).replace(/\([^)]*\)/g,"")
+          option.innerHTML = filter.split(';')[0].replace(/\([^)]*\)/g,"")
           selectFilterValues.add(option)
         }
-        selectFilterValues.addEventListener('change',() => {
+        let selectFilterValuesNew = Util.clearListeners(selectFilterValues)
+        selectFilterValuesNew.addEventListener('change',() => {
           console.log('changed')
           this.processDateSelectionViewer(eventsContainer);
         })
@@ -6623,24 +6626,6 @@ export class SfIEvents extends LitElement {
     let inputLabelCriteria = eventsContainer.querySelector('#input-label-criteria') as HTMLLabelElement
     selectFilterValues.style.display = 'none'
     inputLabelCriteria.style.display = 'none'
-    // inputLabelCriteria.innerHTML = selectedCriteria
-    // selectFilterValues.innerHTML = ""
-    // option = new Option()
-    // option.value = "";
-    // option.innerHTML = "All"
-    // selectFilterValues.add(option)
-    // if(this.statisticsMeta[selectedCriteria] != null){
-    //   for(let filter of this.statisticsMeta[selectedCriteria]){
-    //     let option = new Option()
-    //     option.value = filter.split(';')[1];
-    //     option.innerHTML = Util.titleCase(filter.split(';')[0]).replace(/\([^)]*\)/g,"")
-    //     selectFilterValues.add(option)
-    //   }
-    // }
-    // selectFilterValues.addEventListener('change',() => {
-    //   console.log('changed')
-    //   this.processDateSelectionViewer(eventsContainer);
-    // })
   }
   renderSelectAllButtons = () => {
     let selectAllHtml = '<div class="d-flex justify-end w-100" style="position: fixed; bottom: 70px; left: 0px;" part="button-select-all-container">';
@@ -9239,12 +9224,12 @@ export class SfIEvents extends LitElement {
     html += '<div class="d-flex w-100">';
       html += '<div class="calendar-left-col desktop-only flex-col justify-start align-end">';
 
-        html += '<div class="title-item-date">';
-        html += '<label part="input-label">Start Date</label><br />'
+        html += '<div class="title-item-date d-flex flex-col align-end">';
+        html += '<label part="input-label">Start Date</label>'
         html += '<input id="stream-start-date" part="input" type="date" />'
         html += '</div>';
-        html += '<div class="title-item-date">';
-        html += '<label part="input-label">End Date</label><br />'
+        html += '<div class="title-item-date d-flex flex-col align-end">';
+        html += '<label part="input-label">End Date</label>'
         html += '<input id="stream-end-date" part="input" type="date" />'
         html += '</div>';
         html += '<div class="title-item-date">';
@@ -9257,11 +9242,11 @@ export class SfIEvents extends LitElement {
         html += '<button id="button-this-year" part="button-lg-short-secondary">This Year</button>'
         html += '</div>';
         html += '<div class="title-item-date d-flex flex-col align-end">';
-        html += '<label part="input-label-filter-criteria" id="input-label-filter" class="mr-10">Filter Criteria</label><br />'
+        html += '<label part="input-label-filter-criteria" id="input-label-filter" class="mr-10">Filter Criteria</label>'
         html += '<select id="select-filter-criteria" class="mr-10"></select>'
         html += '</div>';
         html += '<div class="title-item-date d-flex flex-col align-end">';
-        html += '<label part="input-label-filter-value" id="input-label-criteria" class="mr-10"></label><br />'
+        html += '<label part="input-label-filter-value" id="input-label-criteria" class="mr-10"></label>'
         html += '<select id="select-filter-values" class="mr-10"></select>'
         html += '</div>';
         
@@ -9400,10 +9385,10 @@ export class SfIEvents extends LitElement {
       this.processDateSelectionViewer((this._SfCustomContainer as HTMLDivElement));
     });
     
-    let selectFileterCriteria = (this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement
-    selectFileterCriteria.style.display = 'none'
-    let selectFileterValues = (this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-values') as HTMLSelectElement
-    selectFileterValues.style.display = 'none'
+    let selectFilterCriteria = (this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement
+    selectFilterCriteria.style.display = 'none'
+    let selectFilterValues = (this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-values') as HTMLSelectElement
+    selectFilterValues.style.display = 'none'
     let inputLabelFilter = (this._SfCustomContainer as HTMLDivElement).querySelector('#input-label-filter') as HTMLLabelElement
     inputLabelFilter.style.display = 'none';
     // for(var i = 0; i < 3; i++) {
@@ -9413,9 +9398,8 @@ export class SfIEvents extends LitElement {
     //     this.renderPast(target);
     //   })
     // }
-
-    ((this._SfCustomContainer as HTMLDivElement).querySelector('#button-year-to-date') as HTMLButtonElement)?.click();
-    ((this._SfCustomContainer as HTMLDivElement).querySelector('#button-year-to-date-mobile') as HTMLButtonElement)?.click();
+    
+    ((this._SfCustomContainer as HTMLDivElement).querySelector('#button-year-to-date') as HTMLButtonElement).click();
   }
 
   renderThis = (index: number = 1, showGraph: boolean = true) => {
@@ -17806,7 +17790,9 @@ export class SfIEvents extends LitElement {
 
               
             }
-            this.chart4Base64 = (this.chart4 as Chart).toBase64Image()
+            if(this.chart4 != null){
+              this.chart4Base64 = (this.chart4 as Chart).toBase64Image()
+            }
           }
         },
         scales: {
@@ -18008,7 +17994,9 @@ export class SfIEvents extends LitElement {
 
               
             }
-            this.chart3Base64 = (this.chart3 as Chart).toBase64Image();
+            if(this.chart3 != null){
+              this.chart3Base64 = (this.chart3 as Chart).toBase64Image();
+            }
           }
         },
         scales: {
@@ -18198,7 +18186,9 @@ export class SfIEvents extends LitElement {
               }
 
             }
-            this.chart2Base64 = (this.chart2 as Chart).toBase64Image();
+            if(this.chart2 != null){
+              this.chart2Base64 = (this.chart2 as Chart).toBase64Image();
+            }
           }
         },
         scales: {
@@ -18434,8 +18424,9 @@ export class SfIEvents extends LitElement {
               }
 
             }
-            this.chartBase64 = (this.chart as Chart).toBase64Image();
-            console.log('this.chart onAnimationComplete', this.chart, (this.chart as Chart).toBase64Image())
+            if(this.chart != null){
+              this.chartBase64 = (this.chart as Chart).toBase64Image();
+            }
           }
         },
         scales: {
@@ -19215,6 +19206,7 @@ export class SfIEvents extends LitElement {
     (this._SfTabContainer as HTMLDivElement).querySelector('#calendar-tab-custom')?.addEventListener('click', () => {
       this.enableCustom();
       this.renderTabs(this.TAB_CUSTOM);
+      console.log('stats clicked');
       if(this.myRole == this.TAB_VIEWER){
         this.renderCustomViewer()
       }else{

package/src/util.ts

@@ -438,8 +438,15 @@ function titleCase(str: string) {
   return splitStr.join(' '); 
 }
 
+function alphabeticalSort(arr:string[]){
+  let arrSorted = arr.sort((a,b) => {
+    return a.trim().toLowerCase().localeCompare(b.trim().toLowerCase())
+  })
+  return arrSorted
+}
+
 const exportFunctions = {
-  callApiPresignedDelete, callApiPresignedGet, callApiPresigned, jsonObjectToHtml, clearListeners, isInteger, callApi, validateName, readCookie, timeSince, createDiagonalPattern1, createDiagonalPattern2, createDiagonalPattern3, getRandomColor, convertToCSV, parseCsv, titleCase
+  callApiPresignedDelete, callApiPresignedGet, callApiPresigned, jsonObjectToHtml, clearListeners, isInteger, callApi, validateName, readCookie, timeSince, createDiagonalPattern1, createDiagonalPattern2, createDiagonalPattern3, getRandomColor, convertToCSV, parseCsv, titleCase, alphabeticalSort
 };
 
 export default exportFunctions;

package/util.d.ts

@@ -13,6 +13,7 @@ declare function jsonObjectToHtml(json: any): string;
 declare function convertToCSV(arr: any[]): string;
 declare function parseCsv(csv: string): any;
 declare function titleCase(str: string): string;
+declare function alphabeticalSort(arr: string[]): string[];
 declare const exportFunctions: {
     callApiPresignedDelete: typeof callApiPresignedDelete;
     callApiPresignedGet: typeof callApiPresignedGet;
@@ -31,6 +32,7 @@ declare const exportFunctions: {
     convertToCSV: typeof convertToCSV;
     parseCsv: typeof parseCsv;
     titleCase: typeof titleCase;
+    alphabeticalSort: typeof alphabeticalSort;
 };
 export default exportFunctions;
 //# sourceMappingURL=util.d.ts.map

package/util.js

@@ -366,8 +366,14 @@ function titleCase(str) {
     // Directly return the joined string
     return splitStr.join(' ');
 }
+function alphabeticalSort(arr) {
+    let arrSorted = arr.sort((a, b) => {
+        return a.trim().toLowerCase().localeCompare(b.trim().toLowerCase());
+    });
+    return arrSorted;
+}
 const exportFunctions = {
-    callApiPresignedDelete, callApiPresignedGet, callApiPresigned, jsonObjectToHtml, clearListeners, isInteger, callApi, validateName, readCookie, timeSince, createDiagonalPattern1, createDiagonalPattern2, createDiagonalPattern3, getRandomColor, convertToCSV, parseCsv, titleCase
+    callApiPresignedDelete, callApiPresignedGet, callApiPresigned, jsonObjectToHtml, clearListeners, isInteger, callApi, validateName, readCookie, timeSince, createDiagonalPattern1, createDiagonalPattern2, createDiagonalPattern3, getRandomColor, convertToCSV, parseCsv, titleCase, alphabeticalSort
 };
 export default exportFunctions;
 //# sourceMappingURL=util.js.map