sf-i-events 1.0.734 → 1.0.737

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sf-i-events",
   "private": false,
-  "version": "1.0.734",
+  "version": "1.0.737",
   "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

@@ -3528,9 +3528,9 @@ let SfIEvents = class SfIEvents extends LitElement {
             //console.log('rangeperiod', period)
             var html = this.renderEvents(firstDay, endDay, 1, lastDay, true, 0, (firstDate.getMonth()), period, firstDate, "From " + firstDay.toLocaleDateString('en-IN') + " To " + endDay.toLocaleDateString('en-IN'));
             eventsContainer.querySelector('.calendar-right-data').innerHTML = html;
-            let innerhtml = eventsContainer.innerHTML;
-            innerhtml += this.renderSelectAllButtons();
-            eventsContainer.innerHTML = innerhtml;
+            if (eventsContainer.innerHTML.indexOf('button-select-all') < 0) {
+                eventsContainer.insertAdjacentHTML('beforeend', this.renderSelectAllButtons());
+            }
             this.renderButtonRefresh(eventsContainer);
             this.attachTimelineFilterHandlers(eventsContainer);
             const radioExpander = eventsContainer.querySelector('#graph-radios-expander');
@@ -3573,80 +3573,82 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
             const streamEventsContainer = eventsContainer.querySelectorAll('.stream-events-container');
             const buttonSelect = eventsContainer.querySelectorAll('.button-select');
-            let selectAllArr = this.attachSelectAllListeners(eventsContainer, buttonSelect);
-            const buttonSelectAll = selectAllArr[0];
-            const buttonUnselectAll = selectAllArr[1];
-            for (i = 0; i < buttonSelect.length; i++) {
-                buttonSelect[i].addEventListener('click', (ev) => {
-                    //console.log('eventscontainer', streamEventsContainer.length, buttonSelect.length);
-                    const id = ev.target.id;
-                    const idArr = id.split("-");
-                    const mmdd = idArr[2] + "/" + idArr[3];
-                    const j = idArr[4];
-                    // const makercheckers = idArr[5];
-                    const docs = idArr[6];
-                    if (ev.target.checked) {
-                        this.selectedItemIds.push(id);
-                    }
-                    else {
-                        this.selectedItemIds.splice(this.selectedItemIds.indexOf(id), 1);
-                        let listReportingContainer = eventsContainer.querySelector('#list-reporting-container-' + mmdd.replace(/\//g, '-') + '-' + j);
-                        listReportingContainer.style.display = 'none';
-                        listReportingContainer.innerHTML = '';
-                        let buttonListReporting = eventsContainer.querySelector('#button-list-reporting-' + mmdd.replace(/\//g, '-') + '-' + j);
-                        buttonListReporting.setAttribute('part', 'button-list-reporting');
-                        let streamEventTitle = eventsContainer.querySelector('#stream-event-title-' + mmdd.replace(/\//g, '-') + '-' + j);
-                        streamEventTitle.removeAttribute('part');
-                    }
-                    if (this.selectedItemIds.length === 0) {
-                        for (var k = 0; k < buttonSelect.length; k++) {
-                            buttonSelect[k].style.display = 'block';
-                            streamEventsContainer[k].style.display = 'block';
+            if (eventsContainer.innerHTML.indexOf('button-select-all') >= 0) {
+                let selectAllArr = this.attachSelectAllListeners(eventsContainer, buttonSelect);
+                const buttonSelectAll = selectAllArr[0];
+                const buttonUnselectAll = selectAllArr[1];
+                for (i = 0; i < buttonSelect.length; i++) {
+                    buttonSelect[i].addEventListener('click', (ev) => {
+                        //console.log('eventscontainer', streamEventsContainer.length, buttonSelect.length);
+                        const id = ev.target.id;
+                        const idArr = id.split("-");
+                        const mmdd = idArr[2] + "/" + idArr[3];
+                        const j = idArr[4];
+                        // const makercheckers = idArr[5];
+                        const docs = idArr[6];
+                        if (ev.target.checked) {
+                            this.selectedItemIds.push(id);
                         }
-                        let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label');
-                        for (let bulkUploadLable of bulkUploadLables) {
-                            bulkUploadLable.innerHTML = '';
-                        }
-                        buttonSelectAll.style.display = 'none';
-                        buttonUnselectAll.style.display = 'none';
-                    }
-                    else {
-                        if (this.selectedItemIds.length === 1) {
-                            const id1 = id;
-                            const idArr1 = id1.split("-");
-                            const status = idArr1[13].replace(/_/g, '-');
-                            this.selectedStatus = status;
+                        else {
+                            this.selectedItemIds.splice(this.selectedItemIds.indexOf(id), 1);
+                            let listReportingContainer = eventsContainer.querySelector('#list-reporting-container-' + mmdd.replace(/\//g, '-') + '-' + j);
+                            listReportingContainer.style.display = 'none';
+                            listReportingContainer.innerHTML = '';
+                            let buttonListReporting = eventsContainer.querySelector('#button-list-reporting-' + mmdd.replace(/\//g, '-') + '-' + j);
+                            buttonListReporting.setAttribute('part', 'button-list-reporting');
+                            let streamEventTitle = eventsContainer.querySelector('#stream-event-title-' + mmdd.replace(/\//g, '-') + '-' + j);
+                            streamEventTitle.removeAttribute('part');
                         }
-                        let totalVisibleCount = 0;
-                        for (var k = 0; k < buttonSelect.length; k++) {
-                            const id1 = buttonSelect[k].id;
-                            const idArr1 = id1.split("-");
-                            const docs1 = idArr1[6];
-                            const status = idArr1[13].replace(/_/g, '-');
-                            if (docs == docs1 && status == this.selectedStatus) {
-                                totalVisibleCount++;
+                        if (this.selectedItemIds.length === 0) {
+                            for (var k = 0; k < buttonSelect.length; k++) {
+                                buttonSelect[k].style.display = 'block';
+                                streamEventsContainer[k].style.display = 'block';
                             }
-                            else {
-                                buttonSelect[k].style.display = 'none';
-                                streamEventsContainer[k].style.display = 'none';
+                            let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label');
+                            for (let bulkUploadLable of bulkUploadLables) {
+                                bulkUploadLable.innerHTML = '';
                             }
-                        }
-                        let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label');
-                        for (let bulkUploadLable of bulkUploadLables) {
-                            bulkUploadLable.innerHTML = `${this.selectedItemIds.length - 1} other ` + ((this.selectedItemIds.length - 1) === 1 ? `item` : `items`) + ` also selected`;
-                        }
-                        if (this.selectedItemIds.length >= parseInt(this.selectallblock) || this.selectedItemIds.length >= totalVisibleCount) {
                             buttonSelectAll.style.display = 'none';
-                            buttonUnselectAll.style.display = 'flex';
+                            buttonUnselectAll.style.display = 'none';
                         }
                         else {
-                            buttonSelectAll.style.display = 'flex';
-                            buttonUnselectAll.style.display = 'none';
+                            if (this.selectedItemIds.length === 1) {
+                                const id1 = id;
+                                const idArr1 = id1.split("-");
+                                const status = idArr1[13].replace(/_/g, '-');
+                                this.selectedStatus = status;
+                            }
+                            let totalVisibleCount = 0;
+                            for (var k = 0; k < buttonSelect.length; k++) {
+                                const id1 = buttonSelect[k].id;
+                                const idArr1 = id1.split("-");
+                                const docs1 = idArr1[6];
+                                const status = idArr1[13].replace(/_/g, '-');
+                                if (docs == docs1 && status == this.selectedStatus) {
+                                    totalVisibleCount++;
+                                }
+                                else {
+                                    buttonSelect[k].style.display = 'none';
+                                    streamEventsContainer[k].style.display = 'none';
+                                }
+                            }
+                            let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label');
+                            for (let bulkUploadLable of bulkUploadLables) {
+                                bulkUploadLable.innerHTML = `${this.selectedItemIds.length - 1} other ` + ((this.selectedItemIds.length - 1) === 1 ? `item` : `items`) + ` also selected`;
+                            }
+                            if (this.selectedItemIds.length >= parseInt(this.selectallblock) || this.selectedItemIds.length >= totalVisibleCount) {
+                                buttonSelectAll.style.display = 'none';
+                                buttonUnselectAll.style.display = 'flex';
+                            }
+                            else {
+                                buttonSelectAll.style.display = 'flex';
+                                buttonUnselectAll.style.display = 'none';
+                            }
                         }
-                    }
-                    // (this._SfDetailContainer as HTMLDivElement).style.display = 'block'
-                    // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + ((new Date()).getFullYear() + ""));
-                });
+                        // (this._SfDetailContainer as HTMLDivElement).style.display = 'block'
+                        // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + ((new Date()).getFullYear() + ""));
+                    });
+                }
             }
             // this.clearGraphData();
             // //console.log('rendering range', firstDate, count);
@@ -4098,22 +4100,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 +4131,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 +4156,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">';
@@ -4485,9 +4473,6 @@ let SfIEvents = class SfIEvents extends LitElement {
                 const tsEnd = new Date(valueEnd);
                 tsStart.setDate(tsStart.getDate() - 2);
                 tsEnd.setDate(tsEnd.getDate() + 2);
-                //console.log('tsstart', tsStart);
-                //console.log('tsend', tsEnd);
-                // await this.fetchUserCalendar_2(tsStart.getMonth() + "/" + tsStart.getDate() + "/" + tsStart.getFullYear(), valueEnd.split('-')[1] + "/" + valueEnd.split('-')[2] + "/" + valueEnd.split('-')[0]);
                 await this.fetchAndYearlyRenderUserCalendar_2((tsStart.getMonth() + 1) + "/" + tsStart.getDate() + "/" + tsStart.getFullYear(), (tsEnd.getMonth() + 1) + "/" + tsEnd.getDate() + "/" + tsEnd.getFullYear());
                 this.renderRangeEvents(new Date(valueStart), ((new Date(valueEnd).getTime() + 24 * 60 * 60 * 1000) - new Date(valueStart).getTime()) / (1000 * 60 * 60 * 24), this._SfCustomContainer);
             }
@@ -6226,7 +6211,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 +6245,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,12 +6263,12 @@ 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 += '<select id="select-filter-criteria" class="mr-10"></select>';
+            html += '<label part="input-label-filter-criteria" id="input-label-filter" class="mr-10">Filter Criteria</label>';
+            html += '<select part="input-select-calendar-filter" 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 += '<select id="select-filter-values" class="mr-10"></select>';
+            html += '<label part="input-label-filter-value" id="input-label-criteria" class="mr-10"></label>';
+            html += '<select part="input-select-calendar-filter" id="select-filter-values" class="mr-10"></select>';
             html += '</div>';
             html += '</div>';
             html += '<div class="calendar-right-data flex-grow">';
@@ -6392,10 +6377,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 +6390,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 +12893,9 @@ let SfIEvents = class SfIEvents extends LitElement {
                                     }
                                 }
                             }
-                            this.chart4Base64 = this.chart4.toBase64Image();
+                            if (this.chart4 != null) {
+                                this.chart4Base64 = this.chart4.toBase64Image();
+                            }
                         }
                     },
                     scales: {
@@ -13085,7 +13071,9 @@ let SfIEvents = class SfIEvents extends LitElement {
                                     }
                                 }
                             }
-                            this.chart3Base64 = this.chart3.toBase64Image();
+                            if (this.chart3 != null) {
+                                this.chart3Base64 = this.chart3.toBase64Image();
+                            }
                         }
                     },
                     scales: {
@@ -13251,7 +13239,9 @@ let SfIEvents = class SfIEvents extends LitElement {
                                     }
                                 }
                             }
-                            this.chart2Base64 = this.chart2.toBase64Image();
+                            if (this.chart2 != null) {
+                                this.chart2Base64 = this.chart2.toBase64Image();
+                            }
                         }
                     },
                     scales: {
@@ -13458,8 +13448,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 +14108,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();
                 }
@@ -16439,10 +16431,12 @@ let SfIEvents = class SfIEvents extends LitElement {
                         let eventid = sortidArr[3];
                         let mmdd = mmddyyyy.split('/')[0] + '/' + mmddyyyy.split('/')[1];
                         console.log('mmdd', mmdd, Object.keys(this.events));
-                        for (let i = 0; i < this.events[mmdd].length; i++) {
-                            if (this.events[mmdd][i].entityid == entityid && this.events[mmdd][i].locationid == locationid && this.events[mmdd][i].id == eventid) {
-                                this.events[mmdd][i].isbulk = true;
-                                break;
+                        if (this.events[mmdd] != null) {
+                            for (let i = 0; i < this.events[mmdd].length; i++) {
+                                if (this.events[mmdd][i].entityid == entityid && this.events[mmdd][i].locationid == locationid && this.events[mmdd][i].id == eventid) {
+                                    this.events[mmdd][i].isbulk = true;
+                                    break;
+                                }
                             }
                         }
                     }

package/src/sf-i-events.ts

@@ -5881,10 +5881,9 @@ export class SfIEvents extends LitElement {
     var html = this.renderEvents(firstDay, endDay, 1, lastDay, true, 0, (firstDate.getMonth()), period, firstDate,"From " + firstDay.toLocaleDateString('en-IN') + " To " + endDay.toLocaleDateString('en-IN'));
 
     eventsContainer.querySelector('.calendar-right-data')!.innerHTML = html;
-    
-    let innerhtml = eventsContainer.innerHTML;
-    innerhtml += this.renderSelectAllButtons();
-    eventsContainer.innerHTML = innerhtml
+    if(eventsContainer.innerHTML.indexOf('button-select-all') < 0){
+      eventsContainer.insertAdjacentHTML( 'beforeend', this.renderSelectAllButtons());
+    }
     this.renderButtonRefresh(eventsContainer);
     this.attachTimelineFilterHandlers(eventsContainer);
 
@@ -5942,102 +5941,104 @@ export class SfIEvents extends LitElement {
 
     const streamEventsContainer = eventsContainer.querySelectorAll('.stream-events-container') as NodeListOf<HTMLDivElement>;
     const buttonSelect = eventsContainer.querySelectorAll('.button-select') as NodeListOf<HTMLButtonElement>;
-    let selectAllArr = this.attachSelectAllListeners(eventsContainer,buttonSelect)
-    const buttonSelectAll = selectAllArr[0]
-    const buttonUnselectAll = selectAllArr[1]
-    for(i = 0; i < buttonSelect.length; i++) {
+    if(eventsContainer.innerHTML.indexOf('button-select-all') >= 0){
+      let selectAllArr = this.attachSelectAllListeners(eventsContainer,buttonSelect)
+      const buttonSelectAll = selectAllArr[0]
+      const buttonUnselectAll = selectAllArr[1]
+      for(i = 0; i < buttonSelect.length; i++) {
 
-      buttonSelect[i].addEventListener('click', (ev: any) => {
+        buttonSelect[i].addEventListener('click', (ev: any) => {
 
-        //console.log('eventscontainer', streamEventsContainer.length, buttonSelect.length);
+          //console.log('eventscontainer', streamEventsContainer.length, buttonSelect.length);
 
-        const id = ev.target.id;
-        const idArr = id.split("-")
-        const mmdd = idArr[2] + "/" + idArr[3];
-        const j = idArr[4];
-        // const makercheckers = idArr[5];
-        const docs = idArr[6];
+          const id = ev.target.id;
+          const idArr = id.split("-")
+          const mmdd = idArr[2] + "/" + idArr[3];
+          const j = idArr[4];
+          // const makercheckers = idArr[5];
+          const docs = idArr[6];
 
-        if((ev.target as HTMLInputElement).checked) {
-          this.selectedItemIds.push(id);
-        } else {
-          this.selectedItemIds.splice(this.selectedItemIds.indexOf(id), 1);
-          let listReportingContainer = eventsContainer.querySelector('#list-reporting-container-' + mmdd.replace(/\//g,'-') + '-' + j) as HTMLDivElement
-          listReportingContainer.style.display = 'none';
-          listReportingContainer.innerHTML = '';
-          let buttonListReporting = eventsContainer.querySelector('#button-list-reporting-' + mmdd.replace(/\//g,'-') + '-' + j) as HTMLButtonElement
-          buttonListReporting.setAttribute('part','button-list-reporting')    
-          let streamEventTitle = eventsContainer.querySelector('#stream-event-title-' + mmdd.replace(/\//g,'-') + '-' + j) as SfIElasticText
-          streamEventTitle.removeAttribute('part')
-        }
+          if((ev.target as HTMLInputElement).checked) {
+            this.selectedItemIds.push(id);
+          } else {
+            this.selectedItemIds.splice(this.selectedItemIds.indexOf(id), 1);
+            let listReportingContainer = eventsContainer.querySelector('#list-reporting-container-' + mmdd.replace(/\//g,'-') + '-' + j) as HTMLDivElement
+            listReportingContainer.style.display = 'none';
+            listReportingContainer.innerHTML = '';
+            let buttonListReporting = eventsContainer.querySelector('#button-list-reporting-' + mmdd.replace(/\//g,'-') + '-' + j) as HTMLButtonElement
+            buttonListReporting.setAttribute('part','button-list-reporting')    
+            let streamEventTitle = eventsContainer.querySelector('#stream-event-title-' + mmdd.replace(/\//g,'-') + '-' + j) as SfIElasticText
+            streamEventTitle.removeAttribute('part')
+          }
 
-        if(this.selectedItemIds.length === 0) {
+          if(this.selectedItemIds.length === 0) {
 
-          for(var k = 0; k < buttonSelect.length; k++) {
+            for(var k = 0; k < buttonSelect.length; k++) {
 
-            (buttonSelect[k] as HTMLInputElement).style.display = 'block';
-            (streamEventsContainer[k] as HTMLDivElement).style.display = 'block';
-  
-          }
+              (buttonSelect[k] as HTMLInputElement).style.display = 'block';
+              (streamEventsContainer[k] as HTMLDivElement).style.display = 'block';
+    
+            }
 
-          let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label') as NodeListOf<HTMLHeadingElement>
-          for(let bulkUploadLable of bulkUploadLables){
-            bulkUploadLable.innerHTML = ''
-          }
-          
-          buttonSelectAll.style.display = 'none';
-          buttonUnselectAll.style.display = 'none';
+            let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label') as NodeListOf<HTMLHeadingElement>
+            for(let bulkUploadLable of bulkUploadLables){
+              bulkUploadLable.innerHTML = ''
+            }
+            
+            buttonSelectAll.style.display = 'none';
+            buttonUnselectAll.style.display = 'none';
 
-        } else {
+          } else {
 
-          if(this.selectedItemIds.length === 1) {
+            if(this.selectedItemIds.length === 1) {
 
-            const id1 = id;
-            const idArr1 = id1.split("-")
-            const status = idArr1[13].replace(/_/g, '-');
-            this.selectedStatus = status;
+              const id1 = id;
+              const idArr1 = id1.split("-")
+              const status = idArr1[13].replace(/_/g, '-');
+              this.selectedStatus = status;
 
-          }
+            }
 
-          let totalVisibleCount = 0
-          for(var k = 0; k < buttonSelect.length; k++) {
+            let totalVisibleCount = 0
+            for(var k = 0; k < buttonSelect.length; k++) {
 
-            const id1 = buttonSelect[k].id;
-            const idArr1 = id1.split("-")
-            const docs1 = idArr1[6];
-            const status = idArr1[13].replace(/_/g, '-');
-  
-            if(docs == docs1 && status == this.selectedStatus) {
-              totalVisibleCount++
-            } else {
-              (buttonSelect[k] as HTMLInputElement).style.display = 'none';
-              (streamEventsContainer[k] as HTMLDivElement).style.display = 'none';
+              const id1 = buttonSelect[k].id;
+              const idArr1 = id1.split("-")
+              const docs1 = idArr1[6];
+              const status = idArr1[13].replace(/_/g, '-');
+    
+              if(docs == docs1 && status == this.selectedStatus) {
+                totalVisibleCount++
+              } else {
+                (buttonSelect[k] as HTMLInputElement).style.display = 'none';
+                (streamEventsContainer[k] as HTMLDivElement).style.display = 'none';
+              }
+    
+            }  
+
+            let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label') as NodeListOf<HTMLHeadingElement>
+            for(let bulkUploadLable of bulkUploadLables){
+              bulkUploadLable.innerHTML = `${this.selectedItemIds.length - 1} other ` + ((this.selectedItemIds.length - 1) === 1 ? `item` : `items`) + ` also selected`
             }
-  
-          }  
 
-          let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label') as NodeListOf<HTMLHeadingElement>
-          for(let bulkUploadLable of bulkUploadLables){
-            bulkUploadLable.innerHTML = `${this.selectedItemIds.length - 1} other ` + ((this.selectedItemIds.length - 1) === 1 ? `item` : `items`) + ` also selected`
-          }
+            if(this.selectedItemIds.length >= parseInt(this.selectallblock) || this.selectedItemIds.length >= totalVisibleCount){
+              buttonSelectAll.style.display = 'none';
+              buttonUnselectAll.style.display = 'flex';
+            }else{
+              buttonSelectAll.style.display = 'flex';
+              buttonUnselectAll.style.display = 'none';
+            }
+            
 
-          if(this.selectedItemIds.length >= parseInt(this.selectallblock) || this.selectedItemIds.length >= totalVisibleCount){
-            buttonSelectAll.style.display = 'none';
-            buttonUnselectAll.style.display = 'flex';
-          }else{
-            buttonSelectAll.style.display = 'flex';
-            buttonUnselectAll.style.display = 'none';
           }
-          
 
-        }
+          // (this._SfDetailContainer as HTMLDivElement).style.display = 'block'
 
-        // (this._SfDetailContainer as HTMLDivElement).style.display = 'block'
-
-        // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + ((new Date()).getFullYear() + ""));
-  
-      })
+          // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + ((new Date()).getFullYear() + ""));
+    
+        })
 
+      }
     }
 
     // this.clearGraphData();
@@ -6571,22 +6572,24 @@ 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 +6604,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 +6628,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">';
@@ -7054,10 +7041,6 @@ export class SfIEvents extends LitElement {
       tsStart.setDate(tsStart.getDate() - 2);
       tsEnd.setDate(tsEnd.getDate() + 2);
 
-      //console.log('tsstart', tsStart);
-      //console.log('tsend', tsEnd);
-      
-      // await this.fetchUserCalendar_2(tsStart.getMonth() + "/" + tsStart.getDate() + "/" + tsStart.getFullYear(), valueEnd.split('-')[1] + "/" + valueEnd.split('-')[2] + "/" + valueEnd.split('-')[0]);
       await this.fetchAndYearlyRenderUserCalendar_2((tsStart.getMonth() + 1) + "/" + tsStart.getDate() + "/" + tsStart.getFullYear(), (tsEnd.getMonth() + 1) + "/" + tsEnd.getDate() + "/" + tsEnd.getFullYear());
       this.renderRangeEvents(new Date(valueStart), ((new Date(valueEnd).getTime()+24*60*60*1000) - new Date(valueStart).getTime())/(1000*60*60*24), (this._SfCustomContainer as HTMLDivElement));
     } else if(valueStart != "" && valueEnd == "") {
@@ -9239,12 +9222,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,12 +9240,12 @@ 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 += '<select id="select-filter-criteria" class="mr-10"></select>'
+        html += '<label part="input-label-filter-criteria" id="input-label-filter" class="mr-10">Filter Criteria</label>'
+        html += '<select part="input-select-calendar-filter" 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 += '<select id="select-filter-values" class="mr-10"></select>'
+        html += '<label part="input-label-filter-value" id="input-label-criteria" class="mr-10"></label>'
+        html += '<select part="input-select-calendar-filter" id="select-filter-values" class="mr-10"></select>'
         html += '</div>';
         
 
@@ -9400,10 +9383,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 +9396,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 +17788,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 +17992,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 +18184,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 +18422,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 +19204,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{
@@ -22341,10 +22331,12 @@ export class SfIEvents extends LitElement {
           let eventid = sortidArr[3]
           let mmdd = mmddyyyy.split('/')[0] + '/' + mmddyyyy.split('/')[1]
           console.log('mmdd', mmdd, Object.keys(this.events));
-          for (let i = 0 ; i < this.events[mmdd].length; i ++){
-            if(this.events[mmdd][i].entityid == entityid && this.events[mmdd][i].locationid == locationid && this.events[mmdd][i].id == eventid){
-              this.events[mmdd][i].isbulk = true;
-              break
+          if(this.events[mmdd] != null){
+            for (let i = 0 ; i < this.events[mmdd].length; i ++){
+              if(this.events[mmdd][i].entityid == entityid && this.events[mmdd][i].locationid == locationid && this.events[mmdd][i].id == eventid){
+                this.events[mmdd][i].isbulk = true;
+                break
+              }
             }
           }
         }

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