From d4dcb37c316717e4dce998a336815a3af533f0a4 Mon Sep 17 00:00:00 2001
From: Charan Girijala <82193104+charangirijala@users.noreply.github.com>
Date: Sat, 11 Jan 2025 08:53:24 +0530
Subject: [PATCH] =?UTF-8?q?filterpanel=20UI=20implemented-2=20=E2=9C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/logFileProcessor/logFileProcessor.js |   6 +-
 src/modules/main/logViewer/logViewer.html     |   6 +-
 src/modules/main/logViewer/logViewer.js       |  59 ++++--
 .../filValueInputCombobox.js                  | 181 +++++++++++++-----
 4 files changed, 178 insertions(+), 74 deletions(-)

diff --git a/src/modules/main/logFileProcessor/logFileProcessor.js b/src/modules/main/logFileProcessor/logFileProcessor.js
index bc74e0d..31a90b5 100644
--- a/src/modules/main/logFileProcessor/logFileProcessor.js
+++ b/src/modules/main/logFileProcessor/logFileProcessor.js
@@ -162,7 +162,7 @@ export default class LogFileProcessor extends LightningElement {
                             try {
                                 this.exitCodeUnit(idx + 1, line);
                             } catch (err) {
-                                console.error(e);
+                                console.error(err);
                             }
                         } else if (lineEvent === 'METHOD_ENTRY') {
                             const RegexMap = eventsRegexMain.get(lineEvent);
@@ -177,8 +177,8 @@ export default class LogFileProcessor extends LightningElement {
                             //process methodunit finish logic
                             try {
                                 this.exitMethodUnit(idx + 1, line);
-                            } catch (e) {
-                                console.error(e);
+                            } catch (err) {
+                                console.error(err);
                             }
                         } else {
                             if (lineEvent === 'EXCEPTION_THROWN') {
diff --git a/src/modules/main/logViewer/logViewer.html b/src/modules/main/logViewer/logViewer.html
index dfe66a4..b851dfb 100644
--- a/src/modules/main/logViewer/logViewer.html
+++ b/src/modules/main/logViewer/logViewer.html
@@ -432,11 +432,11 @@ <h1>
                                                                                         >
                                                                                             <div
                                                                                                 class={filter.filterItemClass}
-                                                                                                onclick={onFilterElementClick}
-                                                                                                data-filterid={filter.id}
                                                                                             >
                                                                                                 <button
                                                                                                     class="slds-button_reset slds-grow slds-has-blur-focus"
+                                                                                                    onclick={onFilterElementClick}
+                                                                                                    data-filterid={filter.id}
                                                                                                 >
                                                                                                     <span
                                                                                                         class="slds-show slds-text-body_small"
@@ -465,7 +465,7 @@ <h1>
                                                                                                 <button
                                                                                                     class="slds-button slds-button_icon slds-button_icon slds-button_icon-small"
                                                                                                     title="Remove Filter"
-                                                                                                    data-id={filter.id}
+                                                                                                    data-filterid={filter.id}
                                                                                                     onclick={removeFilter}
                                                                                                 >
                                                                                                     <svg
diff --git a/src/modules/main/logViewer/logViewer.js b/src/modules/main/logViewer/logViewer.js
index 3f6d7a4..21f0a20 100644
--- a/src/modules/main/logViewer/logViewer.js
+++ b/src/modules/main/logViewer/logViewer.js
@@ -18,6 +18,7 @@ export default class logViewer extends LightningElement {
     LineNumMap = new Map();
     LineNumFocus = null;
     filterPickListMaster = [];
+    previousFilters = [];
     logChannelSub = null;
     isFilterEditing = false;
     isFilterPopOverShowing = false;
@@ -79,7 +80,8 @@ export default class logViewer extends LightningElement {
                             this.filterPickListMaster =
                                 data.eventsPicklistValues.map((str) => ({
                                     value: str,
-                                    label: str
+                                    label: str,
+                                    isInUse: false
                                 }));
                             const payload = {
                                 currentFilterIdx: null,
@@ -100,7 +102,7 @@ export default class logViewer extends LightningElement {
         if (!this.filterChannelSub) {
             this.filterChannelSub = subscribe('filterChannel', (data) => {
                 if (data.activeFilters) {
-                    this.activeFilters = this.activeFilters;
+                    this.activeFilters = data.activeFilters;
                 }
             });
         }
@@ -162,7 +164,12 @@ export default class logViewer extends LightningElement {
                 }
             }
         }
-        console.log('Rerendering: ', this.activeFilters);
+        console.log(
+            'Rerendering: activeFilters:',
+            this.activeFilters,
+            ' Prev filters: ',
+            this.previousFilters
+        );
     }
 
     get hasActiveFilters() {
@@ -217,12 +224,21 @@ export default class logViewer extends LightningElement {
     // ################# FILTERS START#########################################################
 
     closeFilter() {
+        this.previousFilters = null;
         this.filterClass =
             'slds-panel slds-size_medium slds-panel_docked slds-panel_docked-right slds-panel_drawer filter-panel slds-hidden';
     }
     openFilter() {
-        this.filterClass =
-            'slds-panel slds-size_medium slds-panel_docked slds-panel_docked-right slds-panel_drawer filter-panel slds-is-open';
+        if (this.filterClass.includes('slds-is-open')) {
+            this.closeFilter();
+        } else {
+            this.previousFilters = JSON.parse(
+                JSON.stringify(this.activeFilters)
+            );
+            console.log('openFilter called: ', this.previousFilters);
+            this.filterClass =
+                'slds-panel slds-size_medium slds-panel_docked slds-panel_docked-right slds-panel_drawer filter-panel slds-is-open';
+        }
     }
 
     get ShowFilterSave() {
@@ -233,7 +249,7 @@ export default class logViewer extends LightningElement {
     }
 
     removeFilter(event) {
-        const filterIndex = event.target.dataset.id;
+        const filterIndex = event.target.dataset.filterid;
         this.isFilterPopOverShowing = false;
         let idx = 0;
         console.log('[LogPreviewer.js] removeFilter called', filterIndex);
@@ -244,7 +260,8 @@ export default class logViewer extends LightningElement {
         this.activeFilters.forEach((filter) => {
             filter.id = idx++;
         });
-        this.currentEditFilterIdx = 0;
+        this.currentEditFilterIdx = null;
+        this.previousFilters = JSON.parse(JSON.stringify(this.activeFilters));
     }
 
     addFilter() {
@@ -284,12 +301,20 @@ export default class logViewer extends LightningElement {
         this.isFilterEditing = false;
         this.handlePopoverClose();
         this.activeFilters = [];
+        this.previousFilters = [];
     }
 
     cancelFilterEdit() {
         this.isFilterEditing = false;
         this.isFilterPopOverShowing = false;
-        this.activeFilters.pop();
+        console.log('prev filters: ', this.previousFilters);
+        if (this.previousFilters === null) {
+            this.activeFilters = [];
+        } else {
+            this.activeFilters = JSON.parse(
+                JSON.stringify(this.previousFilters)
+            );
+        }
     }
 
     saveFilterEdit() {
@@ -326,7 +351,7 @@ export default class logViewer extends LightningElement {
             item.id = idx;
         });
 
-        console.log('filters after save:', typeof this.activeFilters);
+        this.previousFilters = JSON.parse(JSON.stringify(this.activeFilters));
     }
 
     closeFilterPopoverOnClick(event) {
@@ -381,10 +406,10 @@ export default class logViewer extends LightningElement {
                         : false;
                 // console.log('clicked in boundary: ', isInBoundary);
                 if (eventDropdown) {
-                    console.log(
-                        'Dropdown activated: ',
-                        eventDropdown.getBoundingClientRect()
-                    );
+                    // console.log(
+                    //     'Dropdown activated: ',
+                    //     eventDropdown.getBoundingClientRect()
+                    // );
                     const dropdownBoundaries =
                         eventDropdown.getBoundingClientRect();
                     const dropXLeft = dropdownBoundaries.left;
@@ -447,10 +472,10 @@ export default class logViewer extends LightningElement {
             const popover = this.template.querySelector('.popover-section');
             const filterPanel = this.template.querySelector('.filter-panel');
             const filterPanelTop = filterPanel.getBoundingClientRect().top;
-            console.log(
-                'panel boundaries: ',
-                filterPanel.getBoundingClientRect()
-            );
+            // console.log(
+            //     'panel boundaries: ',
+            //     filterPanel.getBoundingClientRect()
+            // );
             if (
                 this.currentEditFilterIdx !== null &&
                 this.currentEditFilterIdx !== undefined
diff --git a/src/modules/ui/filValueInputCombobox/filValueInputCombobox.js b/src/modules/ui/filValueInputCombobox/filValueInputCombobox.js
index b203104..9485037 100644
--- a/src/modules/ui/filValueInputCombobox/filValueInputCombobox.js
+++ b/src/modules/ui/filValueInputCombobox/filValueInputCombobox.js
@@ -17,55 +17,70 @@ export default class FilValueInputCombobox extends LightningElement {
     connectedCallback() {
         if (!this.filterSubscription) {
             this.filterSubscription = subscribe('filterChannel', (data) => {
+                // Update picklist values if provided
+                if (data.eventsPicklistValues) {
+                    this.pickListValues = [...data.eventsPicklistValues];
+                }
+                // Ensure activeFilters is an array and has data
                 if (
                     Array.isArray(data.activeFilters) &&
                     data.activeFilters.length > 0
                 ) {
-                    this.activeFilters = data.activeFilters;
-                    if (data.currentFilterIdx !== null) {
+                    // Create a new reference for activeFilters to ensure immutability
+                    this.activeFilters = [...data.activeFilters];
+
+                    if (
+                        data.currentFilterIdx !== null &&
+                        data.currentFilterIdx < this.activeFilters.length
+                    ) {
                         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;
+
+                        const currentFilter =
+                            this.activeFilters[this.currentFilterIdx];
+                        const { field, value, filterValues } = currentFilter;
+
+                        // Reset or initialize filter properties based on field type
                         if (field === 'New Filter' || field === null) {
                             this.isFilterValuePicklist = false;
-                            this.selectedItemPlaceHolder = 'enter value..';
+                            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;
+                            this.inputValue = value || '';
+                            this.selectedItemPlaceHolder = 'Enter value...';
                         } else if (field === 'event') {
-                            if (filterValues.length === 0) {
-                                this.selectedItemPlaceHolder = 'Select Event';
-                                this.selectedEvents = [];
-                            } else {
+                            this.isFilterValuePicklist = true;
+
+                            if (
+                                Array.isArray(filterValues) &&
+                                filterValues.length > 0
+                            ) {
                                 this.selectedEvents = filterValues;
                                 this.selectedItemPlaceHolder = `${this.selectedEvents.length} events selected`;
+                            } else {
+                                this.selectedItemPlaceHolder = 'Select Event';
+                                this.selectedEvents = [];
                             }
-                            this.isFilterValuePicklist = true;
+
                             this.generateOptions();
                         }
+                    } else {
+                        console.warn(
+                            'Invalid currentFilterIdx received:',
+                            data.currentFilterIdx
+                        );
                     }
+                } else {
+                    console.warn(
+                        'Invalid or empty activeFilters received:',
+                        data.activeFilters
+                    );
                 }
 
+                // Handle dropdown close logic
                 if (data.isValPopOpen === false) {
                     this.closeDropdown();
                 }
-
-                if (
-                    data.eventsPicklistValues !== undefined &&
-                    data.eventsPicklistValues !== null
-                )
-                    this.pickListValues = data.eventsPicklistValues;
             });
         }
     }
@@ -113,44 +128,91 @@ export default class FilValueInputCombobox extends LightningElement {
         this.closeDropdown();
         this.publishToChannel(false, false, false);
     }
-    generateOptions() {
+
+    filterPicklistValues() {
         if (
-            Array.isArray(this.pickListValues) &&
-            this.pickListValues.length > 0
+            !Array.isArray(this.pickListValues) ||
+            !Array.isArray(this.activeFilters)
         ) {
-            this.options = this.pickListValues.map((item) => {
-                return {
-                    label: item.label,
-                    value: item.value,
-                    isSelected: this.checkEventSelected(item.value)
-                };
-            });
+            return [];
+        }
+
+        // Gather all values already used in 'event' filters
+        const usedValues = new Set(
+            this.activeFilters
+                .filter((filter) => filter.field === 'event') // Only consider 'event' filters
+                .flatMap((filter) => filter.filterValues || [])
+        );
+
+        // Return pickListValues excluding the used ones
+        return this.pickListValues.filter(
+            (option) => !usedValues.has(option.value)
+        );
+    }
+    generateOptions() {
+        const availableOptions = this.filterPicklistValues(); // Filter out used values
+
+        if (Array.isArray(availableOptions) && availableOptions.length > 0) {
+            this.options = availableOptions.map((item) => ({
+                label: item.label,
+                value: item.value,
+                isInUse: item.isInUse,
+                isSelected: this.checkEventSelected(item.value)
+            }));
         } else {
             this.options = [
                 {
-                    label: 'Oops!! looks like there are no events!!..',
+                    label: 'Oops!! looks like there are no available events!',
                     value: 'noevents',
                     isSelected: false,
                     isDisabled: true
                 }
             ];
         }
-        console.log('picklistVals ops generated', this.options);
+        //    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 =
+        if (
+            !this.activeFilters ||
+            this.currentFilterIdx === undefined ||
+            this.selectedEvents === undefined
+        ) {
+            console.error('Required properties are not properly initialized.');
+            return;
+        }
+
+        // Update the current active filter
+        const currentFilter = this.activeFilters[this.currentFilterIdx];
+        if (!currentFilter) {
+            console.error(
+                `No active filter found at index ${this.currentFilterIdx}.`
+            );
+            return;
+        }
+
+        currentFilter.filterValues = this.selectedEvents;
+        currentFilter.value = this.selectedEvents.toString();
+        currentFilter.isEdited = true;
+        currentFilter.filterItemClass =
             'slds-filters__item slds-grid slds-grid_vertical-align-center filter-being-edited';
 
+        // Update picklist values
+        if (this.pickListValues) {
+            this.pickListValues = this.pickListValues.map((item) => ({
+                ...item
+            }));
+            //   console.log('Updated picklist values:', this.pickListValues);
+        } else {
+            console.warn('pickListValues is null or undefined.');
+        }
+
+        // Notify other components about the changes
         this.publishToChannel(false, false, true);
     }
 
@@ -160,18 +222,35 @@ export default class FilValueInputCombobox extends LightningElement {
     }
 
     onInputChange(event) {
-        //    console.log('Event val: ', event.target.value);
+        // Capture the input value
         this.inputValue = event.target.value;
+
+        // Ensure currentFilterIdx is valid and activeFilters has content
         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';
+            // Create a new updated filter object
+            const updatedFilter = {
+                ...this.activeFilters[this.currentFilterIdx],
+                isPicklist: false,
+                value: this.inputValue,
+                isEdited: true,
+                filterItemClass:
+                    'slds-filters__item slds-grid slds-grid_vertical-align-center filter-being-edited'
+            };
+
+            // Replace the specific filter in the activeFilters array
+            this.activeFilters = [
+                ...this.activeFilters.slice(0, this.currentFilterIdx),
+                updatedFilter,
+                ...this.activeFilters.slice(this.currentFilterIdx + 1)
+            ];
+
+            //   console.log('Updated activeFilters:', this.activeFilters);
+
+            // Trigger any required event or publish changes
             this.publishToChannel(false, false, false);
         }
     }