Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filters logic implemented 🚀 #16

Merged
merged 1 commit into from
Jan 11, 2025
Merged

Filters logic implemented 🚀 #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/modules/main/logViewer/logViewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ a {
color: #ba0517;
}

.filter-help {
align-items: center;
}
.log-errors-no-err-text {
color: #396547;
}
Expand Down
23 changes: 16 additions & 7 deletions src/modules/main/logViewer/logViewer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
44 changes: 37 additions & 7 deletions src/modules/main/logViewer/logViewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -50,6 +51,7 @@ export default class logViewer extends LightningElement {
pageNumber = 0;
linesPerPage = 100;
@track displayedData = [];
dataInUse = [];
fileData = [];
// @wire(MessageContext)
// messageContext;
Expand All @@ -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();
}
Expand Down Expand Up @@ -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
);
Expand Down Expand Up @@ -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';
}
Expand All @@ -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
Expand All @@ -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() {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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) {
Expand Down
36 changes: 36 additions & 0 deletions src/modules/services/filters/filters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
);
});
}
13 changes: 9 additions & 4 deletions src/modules/ui/filValueInputCombobox/filValueInputCombobox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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;
Expand Down
45 changes: 45 additions & 0 deletions src/modules/ui/helpText/helpText.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 */
}
22 changes: 22 additions & 0 deletions src/modules/ui/helpText/helpText.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
5 changes: 5 additions & 0 deletions src/modules/ui/helpText/helpText.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { LightningElement, api } from 'lwc';

export default class HelpText extends LightningElement {
@api content; // Text for the help tooltip
}