From f523eb2e0f25e934c96c642808f11817f7063752 Mon Sep 17 00:00:00 2001 From: Charan Girijala <82193104+charangirijala@users.noreply.github.com> Date: Wed, 8 Jan 2025 11:46:49 +0530 Subject: [PATCH] =?UTF-8?q?filterpanel=20UI=20implemented=F0=9F=91=A8?= =?UTF-8?q?=E2=80=8D=F0=9F=92=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/example/app/app.css | 10 - src/modules/example/app/app.html | 5 - src/modules/example/app/app.js | 3 - .../main/logFileProcessor/logFileProcessor.js | 209 ++++---- src/modules/main/logViewer/logViewer.css | 15 +- src/modules/main/logViewer/logViewer.html | 108 +---- src/modules/main/logViewer/logViewer.js | 455 +++++++++--------- .../my/appNavigation/appNavigation.html | 5 +- src/modules/services/filters/filters.js | 0 .../ui/filFieldCombobox/filFieldCombobox.html | 89 ++++ .../ui/filFieldCombobox/filFieldCombobox.js | 125 +++++ .../filOperatorCombobox.html | 90 ++++ .../filOperatorCombobox.js | 159 ++++++ .../filValueInputCombobox.html | 119 +++++ .../filValueInputCombobox.js | 210 ++++++++ .../multiSelectCombobox.css | 36 -- .../multiSelectCombobox.html | 77 --- .../multiSelectCombobox.js | 244 ---------- .../multiSelectComboboxItem.css | 3 - .../multiSelectComboboxItem.html | 40 -- .../multiSelectComboboxItem.js | 30 -- src/modules/ui/pasteLog/pasteLog.js | 6 +- src/modules/ui/utilityPanel/utilityPanel.js | 78 +-- 23 files changed, 1197 insertions(+), 919 deletions(-) delete mode 100644 src/modules/example/app/app.css delete mode 100644 src/modules/example/app/app.html delete mode 100644 src/modules/example/app/app.js create mode 100644 src/modules/services/filters/filters.js create mode 100644 src/modules/ui/filFieldCombobox/filFieldCombobox.html create mode 100644 src/modules/ui/filFieldCombobox/filFieldCombobox.js create mode 100644 src/modules/ui/filOperatorCombobox/filOperatorCombobox.html create mode 100644 src/modules/ui/filOperatorCombobox/filOperatorCombobox.js create mode 100644 src/modules/ui/filValueInputCombobox/filValueInputCombobox.html create mode 100644 src/modules/ui/filValueInputCombobox/filValueInputCombobox.js delete mode 100644 src/modules/ui/multiSelectCombobox/multiSelectCombobox.css delete mode 100644 src/modules/ui/multiSelectCombobox/multiSelectCombobox.html delete mode 100644 src/modules/ui/multiSelectCombobox/multiSelectCombobox.js delete mode 100644 src/modules/ui/multiSelectComboboxItem/multiSelectComboboxItem.css delete mode 100644 src/modules/ui/multiSelectComboboxItem/multiSelectComboboxItem.html delete mode 100644 src/modules/ui/multiSelectComboboxItem/multiSelectComboboxItem.js diff --git a/src/modules/example/app/app.css b/src/modules/example/app/app.css deleted file mode 100644 index 58841e5..0000000 --- a/src/modules/example/app/app.css +++ /dev/null @@ -1,10 +0,0 @@ -main { - margin: 30px; - display: flex; - flex-direction: column; - align-items: center; -} - -h1 { - color: #1798c1; -} \ No newline at end of file diff --git a/src/modules/example/app/app.html b/src/modules/example/app/app.html deleted file mode 100644 index 810d40c..0000000 --- a/src/modules/example/app/app.html +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/modules/example/app/app.js b/src/modules/example/app/app.js deleted file mode 100644 index 8096649..0000000 --- a/src/modules/example/app/app.js +++ /dev/null @@ -1,3 +0,0 @@ -import { LightningElement } from 'lwc'; - -export default class HelloWorldApp extends LightningElement {} diff --git a/src/modules/main/logFileProcessor/logFileProcessor.js b/src/modules/main/logFileProcessor/logFileProcessor.js index be211f5..bc74e0d 100644 --- a/src/modules/main/logFileProcessor/logFileProcessor.js +++ b/src/modules/main/logFileProcessor/logFileProcessor.js @@ -123,6 +123,7 @@ export default class LogFileProcessor extends LightningElement { '[fileUploader.js] No.of Lines: ', this.fileData.length ); + this.processLogData(); }; reader.onerror = (e) => { @@ -132,105 +133,129 @@ export default class LogFileProcessor extends LightningElement { } processLogData() { this.resetVars(); - let isSoql = false; - let isDml = false; - this.fileData.forEach((line, idx) => { - if (this.STD_EXP_MATCHER.test(line)) { - this.stdExpCount++; - const lineEvent = line.split('|')[1]; - this.eventsPicklistValues.add(lineEvent); - /* - * If the current line is only codeunit or Methodunit then - * process regex else directly push the line to corresponding * CU / MU - */ - if (lineEvent === 'CODE_UNIT_STARTED') { - const RegexMap = eventsRegexMain.get(lineEvent); - for (let [key, value] of RegexMap) { - if (key.test(line)) { - this.createCodeUnit(line, value, idx + 1); - break; - } - } - } else if (lineEvent === 'CODE_UNIT_FINISHED') { - //process codeunit finish logic - try { - this.exitCodeUnit(idx + 1, line); - } catch (err) { - console.error(e); - } - } else if (lineEvent === 'METHOD_ENTRY') { - const RegexMap = eventsRegexMain.get(lineEvent); - for (let [key, value] of RegexMap) { - if (key.test(line)) { - // console.log(value, "=>", key.test(line), "=>", line); - this.createMethodUnit(line, value, idx + 1); - break; - } - } - } else if (lineEvent === 'METHOD_EXIT') { - //process methodunit finish logic - try { - this.exitMethodUnit(idx + 1, line); - } catch (e) { - console.error(e); - } - } else { - if (lineEvent === 'EXCEPTION_THROWN') { - if (expThrownRegex.test(line)) { - let errStr = line.split('|').pop().trim(); - this.createErrorObject( - idx + 1, - 'EXCEPTION_THROWN', - errStr - ); - // console.log('Exception Thrown: ', errStr); - } - } else if (lineEvent === 'FATAL_ERROR') { - if (fatalErrRegex.test(line)) { - let errStr = line.split('|').pop().trim(); - // console.log('Fatal Error: ', errStr); - this.createErrorObject( - idx + 1, - 'FATAL_ERROR', - errStr + if (this.fileData.length > 0) { + let isSoql = false; + let isDml = false; + this.fileData.forEach((line, idx) => { + let isOrphan = true; + if (this.STD_EXP_MATCHER.test(line)) { + this.stdExpCount++; + const lineEvent = line.split('|')[1]; + // console.log('lineEvent: ', lineEvent, 'line: ', line); + if (lineEvent !== undefined && lineEvent !== null) { + isOrphan = false; + this.eventsPicklistValues.add(lineEvent); + /* + * If the current line is only codeunit or Methodunit then + * process regex else directly push the line to corresponding * CU / MU + */ + if (lineEvent === 'CODE_UNIT_STARTED') { + const RegexMap = eventsRegexMain.get(lineEvent); + for (let [key, value] of RegexMap) { + if (key.test(line)) { + this.createCodeUnit(line, value, idx + 1); + break; + } + } + } else if (lineEvent === 'CODE_UNIT_FINISHED') { + //process codeunit finish logic + try { + this.exitCodeUnit(idx + 1, line); + } catch (err) { + console.error(e); + } + } else if (lineEvent === 'METHOD_ENTRY') { + const RegexMap = eventsRegexMain.get(lineEvent); + for (let [key, value] of RegexMap) { + if (key.test(line)) { + // console.log(value, "=>", key.test(line), "=>", line); + this.createMethodUnit(line, value, idx + 1); + break; + } + } + } else if (lineEvent === 'METHOD_EXIT') { + //process methodunit finish logic + try { + this.exitMethodUnit(idx + 1, line); + } catch (e) { + console.error(e); + } + } else { + if (lineEvent === 'EXCEPTION_THROWN') { + if (expThrownRegex.test(line)) { + let errStr = line.split('|').pop().trim(); + this.createErrorObject( + idx + 1, + 'EXCEPTION_THROWN', + errStr + ); + // console.log('Exception Thrown: ', errStr); + } + } else if (lineEvent === 'FATAL_ERROR') { + if (fatalErrRegex.test(line)) { + let errStr = line.split('|').pop().trim(); + // console.log('Fatal Error: ', errStr); + this.createErrorObject( + idx + 1, + 'FATAL_ERROR', + errStr + ); + } + } else if (lineEvent === 'SOQL_EXECUTE_BEGIN') { + this.soqlCount++; + isSoql = true; + } else if (lineEvent === 'DML_BEGIN') { + this.dmlCount++; + isDml = true; + } + this.addLinetoCUorMU( + line, + lineEvent, + idx, + isSoql, + isDml ); + isDml = false; + isSoql = false; } - } else if (lineEvent === 'SOQL_EXECUTE_BEGIN') { - this.soqlCount++; - isSoql = true; - } else if (lineEvent === 'DML_BEGIN') { - this.dmlCount++; - isDml = true; + + this.addToFileDataPartial(line, lineEvent, idx + 1); } - this.addLinetoCUorMU(line, lineEvent, idx, isSoql, isDml); - isDml = false; - isSoql = false; + } else if (this.EXE_ANONYMOUS_MATCHER.test(line)) { + isOrphan = false; + this.execAnonyCount++; + this.addToFileDataPartial( + line, + 'EXECUTE_ANONYMOUS', + idx + 1 + ); + } + if (isOrphan === true) { + // console.log(' Orphans:', line); + this.addToFileDataPartial(line, 'ORPHAN', idx + 1); } + }); - this.addToFileDataPartial(line, lineEvent, idx + 1); - } else if (this.EXE_ANONYMOUS_MATCHER.test(line)) { - this.execAnonyCount++; - this.addToFileDataPartial(line, 'EXECUTE_ANONYMOUS', idx + 1); - } else { - // console.log("[fileUploader.js] Skipping line: ", line); - this.addToFileDataPartial(line, 'ORPHAN', idx + 1); - } - }); + //publish fileData to MessageChannel + this.publishFileMetadata(); + // parseResultToTree(this.result); - //publish fileData to MessageChannel - this.publishFileMetadata(); - // parseResultToTree(this.result); + //navigate to log viewer - //navigate to log viewer - publish('appChannel', { activeApp: 'Log Viewer' }); - console.log('Total stdExps: ', this.stdExpCount); - console.log('Total exeAnonys: ', this.execAnonyCount); - console.log('Total CodeUnits Count: ', this.codeUnitsCount); - console.log('Total MethodUnits Count: ', this.methodUnitsCount); - console.log('Final Result after processing res: ', this.result); - console.log('codeUnitsStack count: ', this.codeUnitsStack.length); - console.log('methodUnitsStack count: ', this.methodUnitsStack.length); - // console.log('treeNodes: ', this.treeNodes); + publish('appChannel', { activeApp: 'Log Viewer' }); + + console.log('Total stdExps: ', this.stdExpCount); + console.log('Total exeAnonys: ', this.execAnonyCount); + console.log('Total CodeUnits Count: ', this.codeUnitsCount); + console.log('Total MethodUnits Count: ', this.methodUnitsCount); + console.log('Final Result after processing res: ', this.result); + console.log('codeUnitsStack count: ', this.codeUnitsStack.length); + console.log( + 'methodUnitsStack count: ', + this.methodUnitsStack.length + ); + // console.log('treeNodes: ', this.treeNodes); + } } /* diff --git a/src/modules/main/logViewer/logViewer.css b/src/modules/main/logViewer/logViewer.css index fdd7ebf..016dec9 100644 --- a/src/modules/main/logViewer/logViewer.css +++ b/src/modules/main/logViewer/logViewer.css @@ -327,8 +327,8 @@ th { } .filter-panel { - height: auto; overflow: visible; + box-shadow: none; } .slds-button:hover { @@ -371,6 +371,8 @@ th { .widgets { display: flex; flex-direction: row-reverse; + max-height: calc(100vh - 156px); + overflow: auto; } .filter-being-edited { @@ -425,3 +427,14 @@ th { .dashboard-widget { background-color: white; } + +.icon-active-filters { + background-color: #0176d3; + border-color: #0176d3; + color: #fff; +} + +.widget-container { + border-right: 0.1px solid #c9c9c9; + /* border-left: 0.1px solid grey; */ +} diff --git a/src/modules/main/logViewer/logViewer.html b/src/modules/main/logViewer/logViewer.html index b76cad2..dfe66a4 100644 --- a/src/modules/main/logViewer/logViewer.html +++ b/src/modules/main/logViewer/logViewer.html @@ -50,7 +50,6 @@

class="slds-m-left--xx-small search-button" > @@ -99,33 +98,6 @@

-
- -
@@ -149,7 +121,7 @@

aria-pressed="false" aria-controls="filterPanel" aria-expanded="false" - class="action-bar-action-toggleFilter reportAction report-action-toggleFilter filtersButton slds-button slds-not-selected slds-button_icon-border" + class={filterIconStyle} type="button" onclick={openFilter} > @@ -307,7 +279,6 @@

>
- +
@@ -516,11 +432,11 @@

>
@@ -45,7 +43,6 @@ class="slds-context-bar__label-action" onclick={handleNavigationItemClick} data-navitem={item.id} - title={item.label} tabindex="0" draggable="false" aria-current="page" diff --git a/src/modules/services/filters/filters.js b/src/modules/services/filters/filters.js new file mode 100644 index 0000000..e69de29 diff --git a/src/modules/ui/filFieldCombobox/filFieldCombobox.html b/src/modules/ui/filFieldCombobox/filFieldCombobox.html new file mode 100644 index 0000000..e805e78 --- /dev/null +++ b/src/modules/ui/filFieldCombobox/filFieldCombobox.html @@ -0,0 +1,89 @@ + diff --git a/src/modules/ui/filFieldCombobox/filFieldCombobox.js b/src/modules/ui/filFieldCombobox/filFieldCombobox.js new file mode 100644 index 0000000..da12f5f --- /dev/null +++ b/src/modules/ui/filFieldCombobox/filFieldCombobox.js @@ -0,0 +1,125 @@ +import { LightningElement, track } from 'lwc'; +import { publish, subscribe } from 'services/pubsub'; +export default class FilFieldCombobox extends LightningElement { + comboboxClass = + 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click'; + dropDownOpen = false; + activeFilters = []; + currentFilterIdx; + @track options = []; + pickListVals = []; + filterSubscription = null; + selectedItem = 'Select Field'; + connectedCallback() { + if (!this.filterSubscription) { + this.filterSubscription = subscribe('filterChannel', (data) => { + if ( + Array.isArray(data.activeFilters) && + data.activeFilters.length > 0 + ) { + this.activeFilters = data.activeFilters; + if (data.currentFilterIdx !== null) { + this.currentFilterIdx = data.currentFilterIdx; + let field = + data.activeFilters[data.currentFilterIdx].field; + if (field === 'New Filter' || field === null) + this.selectedItem = 'Select Field'; + else if (field === 'line') this.selectedItem = 'Line'; + else if (field === 'event') this.selectedItem = 'Event'; + this.generateOptions(field); + } + } + + if (data.isFieldPopOpen === false) { + this.closeDropdown(); + } + + if ( + data.eventsPicklistValues !== null && + data.eventsPicklistValues !== undefined + ) { + this.pickListVals = data.eventsPicklistValues; + } + }); + } + } + + onComboboxClick() { + this.dropDownOpen = !this.dropDownOpen; + if (this.dropDownOpen) { + this.comboboxClass = this.comboboxClass + ' slds-is-open'; + } else { + this.comboboxClass = this.comboboxClass.replace( + ' slds-is-open', + '' + ); + } + + const payload = { + currentFilterIdx: this.currentFilterIdx, + activeFilters: this.activeFilters, + isFieldPopOpen: this.dropDownOpen, + isOperatorPopOpen: false, + isValPopOpen: false, + eventsPicklistValues: this.pickListVals + }; + + publish('filterChannel', payload); + } + + closeDropdown() { + this.dropDownOpen = false; + this.comboboxClass = this.comboboxClass.replace(' slds-is-open', ''); + } + + onOptionClick(event) { + // console.log('onOptionClick'); + this.closeDropdown(); + const field = event.currentTarget.dataset.fieldvalue; + this.options = this.options.map((item) => { + if (item.value === event.currentTarget.dataset.fieldvalue) { + this.selectedItem = item.label; + return { ...item, isSelected: true }; + } else { + return { ...item, isSelected: false }; + } + }); + this.setFieldOnFilter(field); + } + + generateOptions(field) { + // console.log('field ', field); + this.options = [ + { + label: 'Line', + value: 'line', + isSelected: field === 'line' + }, + { + label: 'Event', + value: 'event', + isSelected: field === 'event' + } + ]; + } + + setFieldOnFilter(field) { + this.activeFilters[this.currentFilterIdx].field = field; + this.activeFilters[this.currentFilterIdx].operatorLabel = ''; + this.activeFilters[this.currentFilterIdx].operator = ''; + this.activeFilters[this.currentFilterIdx].value = ''; + this.activeFilters[this.currentFilterIdx].filterValues = []; + this.activeFilters[this.currentFilterIdx].isEdited = true; + this.activeFilters[this.currentFilterIdx].filterItemClass = + 'slds-filters__item slds-grid slds-grid_vertical-align-center filter-being-edited'; + const payload = { + currentFilterIdx: this.currentFilterIdx, + activeFilters: this.activeFilters, + isFieldPopOpen: false, + isOperatorPopOpen: false, + isValPopOpen: false, + eventsPicklistValues: this.pickListVals + }; + publish('filterChannel', payload); + } +} diff --git a/src/modules/ui/filOperatorCombobox/filOperatorCombobox.html b/src/modules/ui/filOperatorCombobox/filOperatorCombobox.html new file mode 100644 index 0000000..86e8c78 --- /dev/null +++ b/src/modules/ui/filOperatorCombobox/filOperatorCombobox.html @@ -0,0 +1,90 @@ + diff --git a/src/modules/ui/filOperatorCombobox/filOperatorCombobox.js b/src/modules/ui/filOperatorCombobox/filOperatorCombobox.js new file mode 100644 index 0000000..2d42e87 --- /dev/null +++ b/src/modules/ui/filOperatorCombobox/filOperatorCombobox.js @@ -0,0 +1,159 @@ +import { LightningElement, track } from 'lwc'; +import { publish, subscribe } from 'services/pubsub'; + +export default class FilOperatorCombobox extends LightningElement { + comboboxClass = + 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click'; + dropDownOpen = false; + activeFilters = []; + pickListVals = []; + currentFilterIdx; + @track options = []; + filterSubscription = null; + connectedCallback() { + if (!this.filterSubscription) { + this.filterSubscription = subscribe('filterChannel', (data) => { + // console.log('data', data); + if ( + Array.isArray(data.activeFilters) && + data.activeFilters.length > 0 + ) { + this.activeFilters = data.activeFilters; + if (data.currentFilterIdx !== null) { + this.currentFilterIdx = data.currentFilterIdx; + let operator = + data.activeFilters[data.currentFilterIdx].operator; + let operatorLabel = + data.activeFilters[data.currentFilterIdx] + .operatorLabel; + if (operator === '' || operator === null) + this.selectedItem = 'Select Operator'; + else { + if ( + operatorLabel !== null && + operatorLabel !== '' + ) { + this.selectedItem = operatorLabel; + } + } + let field = + data.activeFilters[data.currentFilterIdx].field; + this.generateOptions(field, operator); + } + } + + if (data.isOperatorPopOpen === false) { + this.closeDropdown(); + } + + if ( + data.eventsPicklistValues !== null && + data.eventsPicklistValues !== undefined + ) { + this.pickListVals = data.eventsPicklistValues; + } + }); + } + } + selectedItem = 'Select Operator'; + + onComboboxClick() { + this.dropDownOpen = !this.dropDownOpen; + if (this.dropDownOpen) { + this.comboboxClass = this.comboboxClass + ' slds-is-open'; + } else { + this.comboboxClass = this.comboboxClass.replace( + ' slds-is-open', + '' + ); + } + + const payload = { + currentFilterIdx: this.currentFilterIdx, + activeFilters: this.activeFilters, + isFieldPopOpen: false, + isOperatorPopOpen: this.dropDownOpen, + isValPopOpen: false, + eventsPicklistValues: this.pickListVals + }; + publish('filterChannel', payload); + } + + closeDropdown() { + this.dropDownOpen = false; + this.comboboxClass = this.comboboxClass.replace(' slds-is-open', ''); + } + + onOptionClick(event) { + // console.log('onOptionClick'); + this.closeDropdown(); + + const operator = event.currentTarget.dataset.optionvalue; + this.options = this.options.map((item) => { + if (item.value === event.currentTarget.dataset.optionvalue) { + this.selectedItem = item.label; + return { ...item, isSelected: true }; + } else { + return { ...item, isSelected: false }; + } + }); + + this.setOperatorOnFilter(operator); + } + + generateOptions(field, operator) { + // console.log('op: ', operator); + if (field === 'New Filter' || field === 'event') { + this.options = [ + { + label: 'equals', + value: 'equals', + isSelected: operator === 'equals' + }, + { + label: 'not equal to', + value: 'notEqualTo', + isSelected: operator === 'notEqualTo' + } + ]; + } else if (field === 'line') { + this.options = [ + { + label: 'equals', + value: 'equals', + isSelected: operator === 'equals' + }, + { + label: 'not equal to', + value: 'notEqualTo', + isSelected: operator === 'notEqualTo' + }, + { + label: 'contains', + value: 'contains', + isSelected: operator === 'contains' + } + ]; + } + } + + setOperatorOnFilter(operator) { + this.activeFilters[this.currentFilterIdx].operator = operator; + this.activeFilters[this.currentFilterIdx].operatorLabel = + this.selectedItem; + this.activeFilters[this.currentFilterIdx].value = ''; + this.activeFilters[this.currentFilterIdx].filterValues = []; + this.activeFilters[this.currentFilterIdx].isEdited = true; + this.activeFilters[this.currentFilterIdx].filterItemClass = + 'slds-filters__item slds-grid slds-grid_vertical-align-center filter-being-edited'; + const payload = { + currentFilterIdx: this.currentFilterIdx, + activeFilters: this.activeFilters, + isFieldPopOpen: false, + isOperatorPopOpen: false, + isValPopOpen: false, + eventsPicklistValues: this.pickListVals + }; + publish('filterChannel', payload); + } +} diff --git a/src/modules/ui/filValueInputCombobox/filValueInputCombobox.html b/src/modules/ui/filValueInputCombobox/filValueInputCombobox.html new file mode 100644 index 0000000..2e49530 --- /dev/null +++ b/src/modules/ui/filValueInputCombobox/filValueInputCombobox.html @@ -0,0 +1,119 @@ + diff --git a/src/modules/ui/filValueInputCombobox/filValueInputCombobox.js b/src/modules/ui/filValueInputCombobox/filValueInputCombobox.js new file mode 100644 index 0000000..b203104 --- /dev/null +++ b/src/modules/ui/filValueInputCombobox/filValueInputCombobox.js @@ -0,0 +1,210 @@ +import { LightningElement, track } from 'lwc'; +import { publish, subscribe } from 'services/pubsub'; + +export default class FilValueInputCombobox extends LightningElement { + comboboxClass = + 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click'; + dropDownOpen = false; + isFilterValuePicklist = false; + inputValue = ''; + pickListValues = []; + activeFilters = []; + currentFilterIdx; + @track options = []; + filterSubscription = null; + selectedEvents = []; + selectedItemPlaceHolder = 'enter value..'; + connectedCallback() { + if (!this.filterSubscription) { + this.filterSubscription = subscribe('filterChannel', (data) => { + if ( + Array.isArray(data.activeFilters) && + data.activeFilters.length > 0 + ) { + this.activeFilters = data.activeFilters; + if (data.currentFilterIdx !== null) { + this.currentFilterIdx = data.currentFilterIdx; + let field = + data.activeFilters[data.currentFilterIdx].field; + let value = + data.activeFilters[data.currentFilterIdx].value; + let filterValues = + data.activeFilters[data.currentFilterIdx] + .filterValues; + if (field === 'New Filter' || field === null) { + this.isFilterValuePicklist = false; + this.selectedItemPlaceHolder = 'enter value..'; + this.inputValue = ''; + } else if (field === 'line') { + if (value !== '' && value !== null) { + this.inputValue = value; + } else { + this.selectedItemPlaceHolder = 'enter value..'; + this.inputValue = ''; + } + this.isFilterValuePicklist = false; + } else if (field === 'event') { + if (filterValues.length === 0) { + this.selectedItemPlaceHolder = 'Select Event'; + this.selectedEvents = []; + } else { + this.selectedEvents = filterValues; + this.selectedItemPlaceHolder = `${this.selectedEvents.length} events selected`; + } + this.isFilterValuePicklist = true; + this.generateOptions(); + } + } + } + + if (data.isValPopOpen === false) { + this.closeDropdown(); + } + + if ( + data.eventsPicklistValues !== undefined && + data.eventsPicklistValues !== null + ) + this.pickListValues = data.eventsPicklistValues; + }); + } + } + + onComboboxClick() { + this.dropDownOpen = !this.dropDownOpen; + if (this.dropDownOpen) { + this.comboboxClass = this.comboboxClass + ' slds-is-open'; + } else { + this.comboboxClass = this.comboboxClass.replace( + ' slds-is-open', + '' + ); + } + + this.publishToChannel(false, false, this.dropDownOpen); + } + + closeDropdown() { + this.dropDownOpen = false; + this.comboboxClass = this.comboboxClass.replace(' slds-is-open', ''); + } + + onOptionClick(event) { + // console.log('onOptionClick'); + // this.closeDropdown(); + // const field = event.currentTarget.dataset.eventvalue; + this.options = this.options.map((item) => { + if (item.value === event.currentTarget.dataset.eventvalue) { + this.selectedItemPlaceHolder = item.label; + const temp = + item.isSelected !== undefined && item.isSelected === true + ? false + : true; + this.manageSelectedEvents(item.value, temp); + this.setEventsOnFilter(); + return { ...item, isSelected: temp }; + } else { + return item; + } + }); + // this.setFieldOnFilter(field); + } + handleNoOptions() { + this.closeDropdown(); + this.publishToChannel(false, false, false); + } + generateOptions() { + if ( + Array.isArray(this.pickListValues) && + this.pickListValues.length > 0 + ) { + this.options = this.pickListValues.map((item) => { + return { + label: item.label, + value: item.value, + isSelected: this.checkEventSelected(item.value) + }; + }); + } else { + this.options = [ + { + label: 'Oops!! looks like there are no events!!..', + value: 'noevents', + isSelected: false, + isDisabled: true + } + ]; + } + console.log('picklistVals ops generated', this.options); + } + checkEventSelected(event) { + if (this.selectedEvents.length === 0) return false; + const found = this.selectedEvents.find((item) => item === event); + return found === undefined ? false : true; + } + setEventsOnFilter() { + this.activeFilters[this.currentFilterIdx].filterValues = + this.selectedEvents; + this.activeFilters[this.currentFilterIdx].value = + this.selectedEvents.toString(); + this.activeFilters[this.currentFilterIdx].isEdited = true; + this.activeFilters[this.currentFilterIdx].filterItemClass = + 'slds-filters__item slds-grid slds-grid_vertical-align-center filter-being-edited'; + + this.publishToChannel(false, false, true); + } + + onInputValueFocus() { + // console.log('onInputValueFocus'); + this.publishToChannel(false, false, true); + } + + onInputChange(event) { + // console.log('Event val: ', event.target.value); + this.inputValue = event.target.value; + if ( + this.activeFilters.length > 0 && + this.currentFilterIdx !== undefined && + this.currentFilterIdx !== null + ) { + this.activeFilters[this.currentFilterIdx].isPicklist = false; + this.activeFilters[this.currentFilterIdx].value = this.inputValue; + this.activeFilters[this.currentFilterIdx].isEdited = true; + this.activeFilters[this.currentFilterIdx].filterItemClass = + 'slds-filters__item slds-grid slds-grid_vertical-align-center filter-being-edited'; + this.publishToChannel(false, false, false); + } + } + + publishToChannel(fieldPop, operatorPop, valPop) { + const payload = { + currentFilterIdx: this.currentFilterIdx, + activeFilters: this.activeFilters, + isFieldPopOpen: fieldPop, + isOperatorPopOpen: operatorPop, + isValPopOpen: valPop, + eventsPicklistValues: this.pickListValues + }; + publish('filterChannel', payload); + } + + manageSelectedEvents(event, isSelected) { + if (isSelected) { + this.selectedEvents.push(event); + } else { + this.selectedEvents.forEach((item, idx) => { + if (item === event) { + this.selectedEvents.splice(idx, 1); + } + }); + } + + if (this.selectedEvents.length == 1) { + this.selectedItemPlaceHolder = this.selectedEvents[0]; + } else if (this.selectedEvents.length == 0) { + this.selectedItemPlaceHolder = 'Select Event'; + } else { + this.selectedItemPlaceHolder = `${this.selectedEvents.length} events selected`; + } + } +} diff --git a/src/modules/ui/multiSelectCombobox/multiSelectCombobox.css b/src/modules/ui/multiSelectCombobox/multiSelectCombobox.css deleted file mode 100644 index 62a25ef..0000000 --- a/src/modules/ui/multiSelectCombobox/multiSelectCombobox.css +++ /dev/null @@ -1,36 +0,0 @@ -.multi-select-combobox__dropdown { - max-height: 500px; - overflow-y: auto; -} - -:host { - --dxp-s-form-element-text-font-size: 0.75rem; - --dxp-s-button-font-size: 0.8125rem; - --dxp-s-form-element-label-font-size: 0.75rem; -} -.multi-select-combobox__input { - background-color: #ffffff; - /* border: var(--lwc-borderWidthThin, 1px) solid #dddbda; */ - border-radius: 0.25rem; - width: 100%; - transition: - border 0.1s linear, - background-color 0.1s linear; - display: inline-block; - padding: 0 1rem 0 0.75rem; - line-height: 1.875rem; - min-height: calc(1.875rem + (var(--lwc-borderWidthThin, 1px) * 2)); -} - -.multi-select-combobox__input:disabled { - background-color: #ecebea; - border: var(--lwc-borderWidthThin, 1px) solid #c9c7c5; -} - -.multi-select-combobox__icon { - margin-right: -3px; -} - -.multi-select-combobox__listbox { - width: 100%; -} diff --git a/src/modules/ui/multiSelectCombobox/multiSelectCombobox.html b/src/modules/ui/multiSelectCombobox/multiSelectCombobox.html deleted file mode 100644 index 301f7c9..0000000 --- a/src/modules/ui/multiSelectCombobox/multiSelectCombobox.html +++ /dev/null @@ -1,77 +0,0 @@ - diff --git a/src/modules/ui/multiSelectCombobox/multiSelectCombobox.js b/src/modules/ui/multiSelectCombobox/multiSelectCombobox.js deleted file mode 100644 index 152e127..0000000 --- a/src/modules/ui/multiSelectCombobox/multiSelectCombobox.js +++ /dev/null @@ -1,244 +0,0 @@ -import { api, LightningElement, track } from 'lwc'; - -/** - * Combobox with different configuration options that also supports multi select. - * @alias MultiSelectCombobox - * @extends LightningElement - * @hideconstructor - * - * @example - * - */ -export default class MultiSelectCombobox extends LightningElement { - /** - * If present, the combobox is disabled and users cannot interact with it. - * @type {boolean} - * @default false - */ - @api disabled = false; - - /** - * Text label for the combobox. - * @type {string} - * @default '' - */ - @api label = ''; - - /** - * Specifies the name of the combobox. - * @type {string} - */ - @api name; - - /** - * A list of options that are available for selection. Supported option attributes: label, value, selected. - * @type {Array} - * @example - * options = [ - * { - * label: 'Option 1', - * value: 'option1' - * }, - * { - * label: 'Option 2', - * value: 'option2', - * selected: true - * }, - * ] - */ - _options = []; - /** - * @param {array | any[]} val - */ - @api - set options(val) { - this._options = val; - this.currentOptions = this.options; - this.setSelection(); - } - get options() { - return this._options; - } - - /** - * Text that is displayed before an option is selected, to prompt the user to select an option. - * @type {string} - * @default 'Select an Option' - */ - @api placeholder = 'Select an Option'; - - /** - * If present, the combobox is read-only. A read-only combobox is also disabled. - * @type {boolean} - * @default false - */ - @api readOnly = false; - - /** - * If present, a value must be selected before a form can be submitted. - * @type {boolean} - * @default false - */ - @api required = false; - - /** - * If present, the combobox only allows the selection of a single value. - * @type {boolean} - * @default false - */ - @api singleSelect = false; - - /** - * If present, the combobox will show a pill container with the currently selected options. - * @type {boolean} - * @default false - */ - @api showPills = false; - - @track currentOptions = []; - selectedItems = []; - selectedOptions = []; - isInitialized = false; - isLoaded = false; - isVisible = false; - isDisabled = false; - - connectedCallback() { - this.isDisabled = this.disabled || this.readOnly; - this.hasPillsEnabled = this.showPills && !this.singleSelect; - this.currentOptions = this.options; - } - - renderedCallback() { - if (!this.isInitialized) { - this.template - .querySelector('.multi-select-combobox__input') - .addEventListener('click', (event) => { - this.handleClick(event.target); - event.stopPropagation(); - }); - this.template.addEventListener('click', (event) => { - console.log('template click listener'); - this.handleClick(event.target); - event.stopPropagation(); - }); - document.addEventListener('click', this.close()); - this.isInitialized = true; - this.setSelection(); - } - } - - disconnectedCallback() { - document.removeEventListener('click', this.close()); - } - - handleChange(event) { - this.change(event); - } - - handleRemove(event) { - this.selectedOptions.splice(event.detail.index, 1); - this.change(event); - } - - handleClick(target) { - // initialize picklist options on first click to make them editable - if (target.matches('input')) { - if ( - this.isLoaded === false || - this.currentOptions?.length !== this.options?.length - ) { - this.currentOptions = JSON.parse(JSON.stringify(this.options)); - this.setSelection(); - this.isLoaded = true; - } - - if (this.template.querySelector('.slds-is-open')) { - this.close(); - } else { - this.template - .querySelectorAll('.multi-select-combobox__dropdown') - .forEach((node) => { - node.classList.add('slds-is-open'); - }); - } - } - } - - change(event) { - // Create a new array reference - let updatedOptions = [...this.currentOptions]; - - // For single select, clear previous selections - if (this.singleSelect) { - updatedOptions = updatedOptions.map((item) => ({ - ...item, - selected: false - })); - } - - // Update the selected item - updatedOptions = updatedOptions.map((item) => { - if (item.value === event.detail.item.value) { - return { ...item, selected: event.detail.selected }; - } - return item; - }); - - // Assign the new array reference - this.currentOptions = updatedOptions; - - this.setSelection(); - const selection = this.getSelectedItems(); - this.dispatchEvent( - new CustomEvent('change', { - detail: this.singleSelect ? selection[0] : selection - }) - ); - - if (this.singleSelect) { - this.close(); - } - } - - close() { - this.template - .querySelectorAll('.multi-select-combobox__dropdown') - .forEach((node) => { - node.classList.remove('slds-is-open'); - }); - this.dispatchEvent( - new CustomEvent('close', { detail: this.selectedOptions }) - ); - console.log('close called', this.selectedOptions); - this.selectedOptions = []; - } - - setSelection() { - const selectedItems = this.getSelectedItems(); - let selection = ''; - if (selectedItems.length < 1) { - selection = this.placeholder; - this.selectedOptions = []; - } else if (selectedItems.length > 1) { - selection = `${selectedItems.length} Options Selected`; - this.selectedOptions = this.getSelectedItems(); - } else { - selection = selectedItems - .map((selected) => selected.label) - .join(', '); - this.selectedOptions = this.getSelectedItems(); - } - this.selectedItems = selection; - this.isVisible = - this.selectedOptions && this.selectedOptions.length > 0; - } - - getSelectedItems() { - const selectedItems = this.currentOptions.filter( - (item) => item.selected - ); - // console.log('selected Items in combobox: ', selectedItems); - return selectedItems; - } -} diff --git a/src/modules/ui/multiSelectComboboxItem/multiSelectComboboxItem.css b/src/modules/ui/multiSelectComboboxItem/multiSelectComboboxItem.css deleted file mode 100644 index 50471fc..0000000 --- a/src/modules/ui/multiSelectComboboxItem/multiSelectComboboxItem.css +++ /dev/null @@ -1,3 +0,0 @@ -.list-box-option { - font-size: inherit; -} diff --git a/src/modules/ui/multiSelectComboboxItem/multiSelectComboboxItem.html b/src/modules/ui/multiSelectComboboxItem/multiSelectComboboxItem.html deleted file mode 100644 index 15172ee..0000000 --- a/src/modules/ui/multiSelectComboboxItem/multiSelectComboboxItem.html +++ /dev/null @@ -1,40 +0,0 @@ - diff --git a/src/modules/ui/multiSelectComboboxItem/multiSelectComboboxItem.js b/src/modules/ui/multiSelectComboboxItem/multiSelectComboboxItem.js deleted file mode 100644 index 63aa08d..0000000 --- a/src/modules/ui/multiSelectComboboxItem/multiSelectComboboxItem.js +++ /dev/null @@ -1,30 +0,0 @@ -import { api, LightningElement } from 'lwc'; - -/** - * Component that represents an item within the multi select combobox parent component. - * @alias MultiSelectComboboxItem - * @extends LightningElement - * @hideconstructor - * - * @example - * - */ -export default class MultiSelectComboboxItem extends LightningElement { - /** - * Single selectable item received from the multi select combobox parent component. - * @type {Object} - */ - @api item; - - get itemClass() { - return `slds-listbox__item ${this.item.selected ? 'slds-is-selected' : ''}`; - } - - handleClick() { - this.dispatchEvent( - new CustomEvent('change', { - detail: { item: this.item, selected: !this.item.selected } - }) - ); - } -} diff --git a/src/modules/ui/pasteLog/pasteLog.js b/src/modules/ui/pasteLog/pasteLog.js index beee789..e59a399 100644 --- a/src/modules/ui/pasteLog/pasteLog.js +++ b/src/modules/ui/pasteLog/pasteLog.js @@ -16,7 +16,11 @@ export default class PasteLog extends LightningElement { } analyzeLog() { - if (this.logText !== null && this.logText !== '') { + if ( + this.logText !== null && + this.logText !== '' && + this.logText !== undefined + ) { const logData = this.logText.split(/\r\n|\n/); console.log('paste data length: ', logData.length); publish('logtext', logData); diff --git a/src/modules/ui/utilityPanel/utilityPanel.js b/src/modules/ui/utilityPanel/utilityPanel.js index 0fddf13..484e578 100644 --- a/src/modules/ui/utilityPanel/utilityPanel.js +++ b/src/modules/ui/utilityPanel/utilityPanel.js @@ -259,48 +259,50 @@ export default class UtilityPanel extends LightningElement { } setColWidths() { - const panelWidth = this.template - .querySelector('.utility-panel') - .getBoundingClientRect().width; - const namecol = this.template.querySelectorAll('.col-name'); - const typecol = this.template.querySelectorAll('.col-type'); - const lineDurationcol = - this.template.querySelectorAll('.col-lineDuration'); - const SOQLcountcol = this.template.querySelectorAll('.col-SOQLcount'); - const DMLcountcol = this.template.querySelectorAll('.col-DMLcount'); - const CPUtimecol = this.template.querySelectorAll('.col-CPUtime'); - - if (this.isWidthChanged === false) { - this.nameWidth = panelWidth * 0.48; - this.typeWidth = panelWidth * 0.1; - this.lineDurationWidth = panelWidth * 0.1; - this.SOQLcountWidth = panelWidth * 0.1; - this.DMLcountWidth = panelWidth * 0.1; - this.CPUtimeWidth = panelWidth * 0.1; - this.isWidthChanged = true; - } + const utilitypanel = this.template.querySelector('.utility-panel'); + if (utilitypanel) { + const panelWidth = utilitypanel.getBoundingClientRect().width; + const namecol = this.template.querySelectorAll('.col-name'); + const typecol = this.template.querySelectorAll('.col-type'); + const lineDurationcol = + this.template.querySelectorAll('.col-lineDuration'); + const SOQLcountcol = + this.template.querySelectorAll('.col-SOQLcount'); + const DMLcountcol = this.template.querySelectorAll('.col-DMLcount'); + const CPUtimecol = this.template.querySelectorAll('.col-CPUtime'); + + if (this.isWidthChanged === false) { + this.nameWidth = panelWidth * 0.48; + this.typeWidth = panelWidth * 0.1; + this.lineDurationWidth = panelWidth * 0.1; + this.SOQLcountWidth = panelWidth * 0.1; + this.DMLcountWidth = panelWidth * 0.1; + this.CPUtimeWidth = panelWidth * 0.1; + this.isWidthChanged = true; + } - namecol.forEach((col) => { - col.style.width = this.nameWidth + 'px'; - }); + namecol.forEach((col) => { + col.style.width = this.nameWidth + 'px'; + }); - typecol.forEach((col) => { - col.style.width = this.typeWidth + 'px'; - }); + typecol.forEach((col) => { + col.style.width = this.typeWidth + 'px'; + }); - lineDurationcol.forEach((col) => { - col.style.width = this.lineDurationWidth + 'px'; - }); + lineDurationcol.forEach((col) => { + col.style.width = this.lineDurationWidth + 'px'; + }); - SOQLcountcol.forEach((col) => { - col.style.width = this.SOQLcountWidth + 'px'; - }); - DMLcountcol.forEach((col) => { - col.style.width = this.DMLcountWidth + 'px'; - }); - CPUtimecol.forEach((col) => { - col.style.width = this.CPUtimeWidth + 'px'; - }); + SOQLcountcol.forEach((col) => { + col.style.width = this.SOQLcountWidth + 'px'; + }); + DMLcountcol.forEach((col) => { + col.style.width = this.DMLcountWidth + 'px'; + }); + CPUtimecol.forEach((col) => { + col.style.width = this.CPUtimeWidth + 'px'; + }); + } } setColWidthsChange(colname, width) {