Skip to content

Commit

Permalink
Merge pull request #4 from charangirijala/development
Browse files Browse the repository at this point in the history 
Development-GoTo and Search functionality implemented↩︎🔍
  • Loading branch information
@charangirijala
charangirijala authored Dec 23, 2024
2 parents 61e32b8 + 3a035bc commit be90385
Show file tree
Hide file tree
Showing 6 changed files with 193 additions and 106 deletions.
8 changes: 8 additions & 0 deletions src/modules/main/logViewer/logViewer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ a {
overflow: visible;
z-index: 10;
}

.search-res {
background-color: rgb(250, 255, 189);
}

.search-res-focus {
background-color: yellow;
}
:host {
--dxp-s-form-element-text-font-size: 0.75rem;
--dxp-s-button-font-size: 0.8125rem;
Expand Down
42 changes: 15 additions & 27 deletions src/modules/main/logViewer/logViewer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,28 +49,11 @@ <h1>
<div
class="slds-m-left--xx-small search-button"
>
<div
class="slds-button-group actionBarButtonGroup"
role="group"
>
<button
class="slds-button slds-button_neutral action-bar-action-inlineEditReport reportAction report-action-inlineEditReport filtersButton"
type="button"
>
<svg
aria-hidden="true"
class="slds-button__icon slds-button__icon_left"
viewBox="0 0 52 52"
>
<g>
<path
d="M9.5 33.4l8.9 8.9c.4.4 1 .4 1.4 0L42 20c.4-.4.4-1 0-1.4l-8.8-8.8c-.4-.4-1-.4-1.4 0L9.5 32.1c-.4.4-.4 1 0 1.3zM36.1 5.7c-.4.4-.4 1 0 1.4l8.8 8.8c.4.4 1 .4 1.4 0l2.5-2.5c1.6-1.5 1.6-3.9 0-5.5l-4.7-4.7c-1.6-1.6-4.1-1.6-5.7 0l-2.3 2.5zM2.1 48.2c-.2 1 .7 1.9 1.7 1.7l10.9-2.6c.4-.1.7-.3.9-.5l.2-.2c.2-.2.3-.9-.1-1.3l-9-9c-.4-.4-1.1-.3-1.3-.1l-.2.2c-.3.3-.4.6-.5.9L2.1 48.2z"
></path>
</g></svg
>Enable Field
Editing
</button>
</div>
<ui-input
has-label={goTohasLabel}
placeholder={goToPlaceholder}
oninputchange={goToLine}
></ui-input>
</div>
<div
class="slds-m-left--xx-small"
Expand All @@ -87,7 +70,9 @@ <h1>
line-height: 1;
"
>
<div>
<div
class="search-button"
>
<div
role="button"
tabindex="-1"
Expand Down Expand Up @@ -117,7 +102,7 @@ <h1>
<div
class="slds-m-left--xx-small"
>
<div
<!-- <div
class="slds-button-group actionBarButtonGroup"
role="group"
>
Expand All @@ -139,7 +124,7 @@ <h1>
></path></svg
>Add Chart
</button>
</div>
</div> -->
</div>
<div
class="slds-m-left--xx-small"
Expand Down Expand Up @@ -645,8 +630,9 @@ <h1>
<ui-search
onclosesearch={handleSearch}
logtobe-filtered={fileData}
onnextmatch={goToNxtMatch}
onprevmatch={goToPrevMatch}
onmatchchange={goToMatch}
onsearchres={processSearchRes}
onnores={processNoSearchRes}
></ui-search>
</div>
</template>
Expand Down Expand Up @@ -733,6 +719,8 @@ <h1>
>
<tr
key={lineObj.lineNumber}
data-logid={lineObj.lineNumber}
class="log-row"
>
<td
style="
Expand Down
145 changes: 91 additions & 54 deletions src/modules/main/logViewer/logViewer.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
/* eslint-disable inclusive-language/use-inclusive-words */
import { LightningElement, track } from 'lwc';
import { subscribe, publish } from 'services/pubsub';
import { subscribe } from 'services/pubsub';

export default class logViewer extends LightningElement {
goToPlaceholder = 'Go to line';
goTohasLabel = false;
reRenderVal = false;
isLoading = false;
isSearching = false;
callStackToggle = false;
LineNumMap = new Map();
LineNumFocus = null;
fieldValue;
operatorValue;
filterValue = '';
Expand Down Expand Up @@ -163,7 +167,36 @@ export default class logViewer extends LightningElement {
const searchPopover =
this.template.querySelector('.data-search');
if (searchPopover) {
searchPopover.style.left = `${searchButtonRect.right}px`;
searchPopover.style.right = `${window.innerWidth - 24 - searchButtonRect.right}px`;
}
}
const lineElem = this.template.querySelectorAll('.log-row');
if (lineElem.length > 0) {
lineElem.forEach((ele) => {
ele.style.backgroundColor = 'rgba(0, 0, 0, 0)';
});
}
if (this.LineNumMap.size > 0) {
if (this.LineNumMap.has(this.pageNumber)) {
const highEle = this.LineNumMap.get(this.pageNumber);
highEle.forEach((ele) => {
const element = this.template.querySelector(
`[data-logid="${ele}"]`
);

if (element) {
if (this.LineNumFocus !== ele) {
element.style.backgroundColor =
'rgb(250, 255, 189)';
} else {
element.style.backgroundColor = 'yellow';
element.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
});
}
}
}
Expand All @@ -174,52 +207,6 @@ export default class logViewer extends LightningElement {
return this.activeFilters.length > 0;
}

// subscribeToMessageChannel() {
// console.log("Subscribe called");
// if (!this.logChannelSub) {
// this.logChannelSub = subscribe(
// this.messageContext,
// STATE,
// (message) => {
// this.setFileData(message);
// },
// { scope: APPLICATION_SCOPE }
// );
// this.logChannelSub = true;
// }
// }

// setFileData(message) {
// if (message !== null && message !== undefined) {
// // console.log("[LogPreviewer.js] setFileData called", message);
// if (message.fileData !== undefined && message.fileData !== null) {
// this.fileData = message.fileData;
// this.pageNumber = 1;
// this.noOfPages = Math.ceil(
// this.fileData.length / this.linesPerPage
// );
// this.calculations();
// }
// if (
// message.fileMetadata !== undefined &&
// message.fileMetadata !== null
// ) {
// this.fileMetadata = message.fileMetadata;
// }
// if (
// message.eventsPicklistValues !== undefined &&
// message.eventsPicklistValues !== null
// ) {
// if (Array.isArray(message.eventsPicklistValues)) {
// this.filterPickListMaster =
// message.eventsPicklistValues.map((str) => ({
// value: str,
// label: str
// }));
// }
// }
// }
// }
onLinesPerPageChange(event) {
// console.log("Page Change: ", event.target.value);
let input = parseInt(event.target.value, 10);
Expand Down Expand Up @@ -508,15 +495,65 @@ export default class logViewer extends LightningElement {

handleSearch() {
this.isSearching = !this.isSearching;
// const payload = this.fileData;
// publish('searchChannel', payload);
if (this.isSearching === false) {
this.processNoSearchRes();
}
}

processSearchRes(event) {
const lineNumbers = event.detail;
this.LineNumMap = new Map();
//console.log(lineNumbers);
if (Array.isArray(lineNumbers)) {
lineNumbers.forEach((l) => {
if (this.linesPerPage !== 0) {
const pNum = Math.ceil(l / this.linesPerPage);
if (this.LineNumMap.has(pNum)) {
this.LineNumMap.get(pNum).push(l);
} else {
this.LineNumMap.set(pNum, [l]);
}
}
});
}
// console.log('Map: ', this.LineNumMap);
}

goToNxtMatch(event) {
console.log(event.detail);
goToMatch(event) {
const lineNumber = event.detail;
// console.log('lineNumber: ', lineNumber);
this.goToPage(lineNumber);
}

goToPage(lineNumber) {
//calculate the pagenumber
if (this.linesPerPage <= 0 || lineNumber <= 0) return;
this.LineNumFocus = lineNumber;
this.pageNumber = Math.ceil(lineNumber / this.linesPerPage);
this.calculations();
}

processNoSearchRes() {
this.LineNumFocus = null;
if (this.LineNumMap.size > 0) {
if (this.LineNumMap.has(this.pageNumber)) {
const highEle = this.LineNumMap.get(this.pageNumber);
highEle.forEach((ele) => {
const element = this.template.querySelector(
`[data-logid="${ele}"]`
);
if (element) {
element.style.backgroundColor = 'rgba(0, 0, 0, 0)';
}
});
}
}
this.LineNumMap = new Map();
}

goToPrevMatch(event) {
console.log(event.detail);
goToLine(event) {
// console.log('linenumber', event.detail);
const lNum = event.detail;
this.goToPage(lNum);
}
}
31 changes: 22 additions & 9 deletions src/modules/ui/input/input.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,28 @@
<template>
<div class={inputClassList}>
<label class="slds-form-element__label slds-no-flex">{label}</label>
<template lwc:if={hasLabel}>
<label class="slds-form-element__label slds-no-flex">{label}</label>
</template>
<div class="slds-form-element__control slds-grow">
<input
type="text"
minlength={minimumLength}
placeholder={placeholder}
class="slds-input"
value={textValue}
onchange={handleInputChange}
/>
<template lwc:if={textValue}>
<input
type="text"
minlength={minimumLength}
placeholder={placeholder}
class="slds-input"
value={textValue}
onchange={handleInputChange}
/>
</template>
<template lwc:else>
<input
type="text"
minlength={minimumLength}
placeholder={placeholder}
class="slds-input"
oninput={handleOnInput}
/>
</template>
</div>
<template if:true={hasError}>
<div role="alert" class="slds-form-element__help">
Expand Down
15 changes: 14 additions & 1 deletion src/modules/ui/input/input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export default class Input extends LightningElement {
@api minimumLength;
@api placeholder;
@api textValue;
@api hasLabel;
textValueInternal = '';
@api type;
hasError = false;
Expand All @@ -28,7 +29,19 @@ export default class Input extends LightningElement {
);
console.log(this.textValueInternal);
}

handleOnInput(event) {
const lineNum = event.target.value;
if (!isNaN(lineNum) && lineNum !== '') {
clearTimeout(this.timeoutId);
this.timeoutId = setTimeout(() => {
this.dispatchEvent(
new CustomEvent('inputchange', {
detail: parseInt(lineNum, 10)
})
);
}, 500);
}
}
checkMinLength() {
if (this.minimumLength && this.textValueInternal) {
if (
Expand Down
Loading

0 comments on commit be90385

Please sign in to comment.