Merge pull request #16 from charangirijala/filterpanel

Filters logic implemented 🚀

src/modules/main/logViewer/logViewer.css

@@ -13,6 +13,9 @@ a {
     color: #ba0517;
 }
 
+.filter-help {
+    align-items: center;
+}
 .log-errors-no-err-text {
     color: #396547;
 }

src/modules/main/logViewer/logViewer.html

@@ -411,14 +411,23 @@ <h1>
                                                                             <template
                                                                                 if:true={hasActiveFilters}
                                                                             >
-                                                                                <h3
-                                                                                    class="slds-text-body_small slds-m-vertical_x-small"
+                                                                                <div
+                                                                                    class="slds-grid filter-help"
                                                                                 >
-                                                                                    Matching
-                                                                                    all
-                                                                                    these
-                                                                                    filters
-                                                                                </h3>
+                                                                                    <h3
+                                                                                        class="slds-text-body_small slds-m-vertical_x-small slds-var-m-right_xx-small"
+                                                                                    >
+                                                                                        Matching
+                                                                                        all
+                                                                                        these
+                                                                                        filters
+                                                                                    </h3>
+                                                                                    <div>
+                                                                                        <ui-help-text
+                                                                                            content="Apply one filter per operator / field for optimal results. Note that all filters are combined using the AND operation by default."
+                                                                                        ></ui-help-text>
+                                                                                    </div>
+                                                                                </div>
                                                                                 <ol
                                                                                     class="slds-list_vertical slds-list_vertical-space"
                                                                                 >

src/modules/main/logViewer/logViewer.js

@@ -1,5 +1,6 @@
 /* eslint-disable inclusive-language/use-inclusive-words */
 import { LightningElement, track } from 'lwc';
+import filterData from 'services/filters';
 import { publish, subscribe } from 'services/pubsub';
 
 export default class logViewer extends LightningElement {
@@ -50,6 +51,7 @@ export default class logViewer extends LightningElement {
     pageNumber = 0;
     linesPerPage = 100;
     @track displayedData = [];
+    dataInUse = [];
     fileData = [];
     //     @wire(MessageContext)
     //     messageContext;
@@ -60,9 +62,10 @@ export default class logViewer extends LightningElement {
                 if (data) {
                     if (data.fileData) {
                         this.fileData = data.fileData;
+                        this.dataInUse = data.fileData;
                         this.pageNumber = 1;
                         this.noOfPages = Math.ceil(
-                            this.fileData.length / this.linesPerPage
+                            this.dataInUse.length / this.linesPerPage
                         );
                         this.calculations();
                     }
@@ -184,15 +187,23 @@ export default class logViewer extends LightningElement {
             this.linesPerPage = input;
             this.pageNumber = 1;
             this.noOfPages = Math.ceil(
-                this.fileData.length / this.linesPerPage
+                this.dataInUse.length / this.linesPerPage
             );
             this.calculations();
         }
     }
-
+    refreshPages() {
+        this.noOfPages = Math.ceil(this.dataInUse.length / this.linesPerPage);
+        this.pageNumber = this.noOfPages === 0 ? 0 : 1;
+        this.calculations();
+    }
     calculations() {
+        if (this.dataInUse.length === 0) {
+            this.displayedData = [];
+            return;
+        }
         if (this.pageNumber !== 0) {
-            this.displayedData = this.fileData.slice(
+            this.displayedData = this.dataInUse.slice(
                 this.linesPerPage * (this.pageNumber - 1),
                 this.linesPerPage * this.pageNumber
             );
@@ -235,7 +246,7 @@ export default class logViewer extends LightningElement {
             this.previousFilters = JSON.parse(
                 JSON.stringify(this.activeFilters)
             );
-            console.log('openFilter called: ', this.previousFilters);
+            // 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';
         }
@@ -252,7 +263,7 @@ export default class logViewer extends LightningElement {
         const filterIndex = event.target.dataset.filterid;
         this.isFilterPopOverShowing = false;
         let idx = 0;
-        console.log('[LogPreviewer.js] removeFilter called', filterIndex);
+        // console.log('[LogPreviewer.js] removeFilter called', filterIndex);
         if (filterIndex >= 0) {
             // only splice array when item is found
             this.activeFilters.splice(filterIndex, 1); // 2nd parameter means remove one item only
@@ -262,6 +273,8 @@ export default class logViewer extends LightningElement {
         });
         this.currentEditFilterIdx = null;
         this.previousFilters = JSON.parse(JSON.stringify(this.activeFilters));
+        this.dataInUse = filterData(this.activeFilters, this.fileData);
+        this.refreshPages();
     }
 
     addFilter() {
@@ -302,12 +315,14 @@ export default class logViewer extends LightningElement {
         this.handlePopoverClose();
         this.activeFilters = [];
         this.previousFilters = [];
+        this.dataInUse = this.fileData;
+        this.refreshPages();
     }
 
     cancelFilterEdit() {
         this.isFilterEditing = false;
         this.isFilterPopOverShowing = false;
-        console.log('prev filters: ', this.previousFilters);
+        // console.log('prev filters: ', this.previousFilters);
         if (this.previousFilters === null) {
             this.activeFilters = [];
         } else {
@@ -352,6 +367,21 @@ export default class logViewer extends LightningElement {
         });
 
         this.previousFilters = JSON.parse(JSON.stringify(this.activeFilters));
+
+        //call filterData from filters
+        if (
+            this.activeFilters.length > 0 &&
+            this.fileData.length > 0 &&
+            this.fileData !== undefined &&
+            this.fileData !== null
+        ) {
+            this.dataInUse = filterData(this.activeFilters, this.fileData);
+            // console.log('filtered data: ', this.dataInUse);
+            this.refreshPages();
+        } else {
+            this.dataInUse = this.fileData;
+            this.refreshPages();
+        }
     }
 
     closeFilterPopoverOnClick(event) {

src/modules/services/filters/filters.js

@@ -0,0 +1,36 @@
+export default function filterData(filters, fileData) {
+    //condtion check for active filters
+    const activeFilters = filters.filter((filter) => filter.isActive);
+    //     console.log('filters: ', activeFilters, 'fileData: ', fileData);
+    return fileData.filter((record) => {
+        return activeFilters.every(
+            ({ field, operator, value, filterValues }) => {
+                const fieldValue = record[field];
+                switch (operator) {
+                    case 'equals':
+                        if (
+                            Array.isArray(filterValues) &&
+                            filterValues.length > 0
+                        ) {
+                            return value.includes(fieldValue);
+                        } else {
+                            return fieldValue === value;
+                        }
+                    case 'notEqualTo':
+                        if (
+                            Array.isArray(filterValues) &&
+                            filterValues.length > 0
+                        ) {
+                            return !value.includes(fieldValue);
+                        } else {
+                            return fieldValue !== value;
+                        }
+                    case 'contains':
+                        return fieldValue.includes(value);
+                    default:
+                        return true;
+                }
+            }
+        );
+    });
+}

src/modules/ui/filValueInputCombobox/filValueInputCombobox.js

@@ -140,13 +140,18 @@ export default class FilValueInputCombobox extends LightningElement {
         // Gather all values already used in 'event' filters
         const usedValues = new Set(
             this.activeFilters
-                .filter((filter) => filter.field === 'event') // Only consider 'event' filters
+                .filter(
+                    (filter, idx) =>
+                        filter.field === 'event' &&
+                        idx !== this.currentFilterIdx
+                ) // Only consider 'event' filters
                 .flatMap((filter) => filter.filterValues || [])
         );
-
         // Return pickListValues excluding the used ones
         return this.pickListValues.filter(
-            (option) => !usedValues.has(option.value)
+            (option) =>
+                !usedValues.has(option.value) ||
+                this.checkEventSelected(option.value)
         );
     }
     generateOptions() {
@@ -169,7 +174,7 @@ export default class FilValueInputCombobox extends LightningElement {
                 }
             ];
         }
-        //    console.log('picklistVals ops generated', this.options);
+        // console.log('picklistVals ops generated', this.options);
     }
     checkEventSelected(event) {
         if (this.selectedEvents.length === 0) return false;

src/modules/ui/helpText/helpText.css

@@ -0,0 +1,45 @@
+.help-text-container {
+    position: relative;
+    display: inline-block;
+}
+
+.help-text-icon {
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+    user-select: none;
+}
+
+/* Tooltip container */
+.help-text-content {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    font-size: 0.75rem;
+    color: white;
+    transform: translateX(-50%);
+    background-color: #032d60;
+    border: none;
+    border-radius: 5px;
+    padding: 0.5rem 0.75rem;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    white-space: normal; /* Allow wrapping */
+    width: 200px;
+    max-width: 200px; /* Limit the width of the tooltip */
+    visibility: hidden; /* Initially hidden */
+    opacity: 0; /* Fully transparent */
+    transition: opacity 0.2s ease-in-out;
+    z-index: 1000;
+    overflow-wrap: anywhere; /* Prevent overflow for very long words */
+    text-align: left;
+}
+
+/* Show tooltip on hover */
+.help-text-container:hover .help-text-content {
+    visibility: visible;
+    opacity: 1; /* Fully visible */
+}

src/modules/ui/helpText/helpText.html

@@ -0,0 +1,22 @@
+<template>
+    <div class="help-text-container">
+        <span
+            class="help-text-icon"
+            tabindex="0"
+            role="tooltip"
+            aria-label={content}
+        >
+            <svg
+                focusable="false"
+                data-key="info"
+                aria-hidden="true"
+                class="slds-button__icon"
+            >
+                <use
+                    xlink:href="/public/assets/icons/utility-sprite/svg/symbols.svg#info"
+                ></use>
+            </svg>
+        </span>
+        <div class="help-text-content">{content}</div>
+    </div>
+</template>

src/modules/ui/helpText/helpText.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class HelpText extends LightningElement {
+    @api content; // Text for the help tooltip
+}