Skip to content

Commit 09b8dd2

Browse files
RubenHalmanRubenHalman
committed
add seach bar
1 parent 3c530bc commit 09b8dd2

File tree

5 files changed

+150
-21
lines changed

5 files changed

+150
-21
lines changed

‎force-app/main/default/lwc/flowOverview/flowOverview.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
:host {
2+
display: block;
3+
padding: 1.5rem;
4+
background-color: #f4f6f9;
5+
}
6+
7+
lightning-card {
8+
background-color: #ffffff;
9+
border-radius: 0.5rem;
10+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
11+
}
12+
13+
.search-bar {
14+
padding: 1rem;
15+
background-color: #ffffff;
16+
border-bottom: 1px solid #ddd;
17+
}
18+
19+
.search-bar lightning-input {
20+
max-width: 400px;
21+
--slds-c-input-color-border: #003087; /* Dark blue border */
22+
}
23+
24+
lightning-datatable {
25+
margin: 0 1rem;
26+
}
27+
28+
lightning-button {
29+
--slds-c-button-brand-color-background: #003087;
30+
--slds-c-button-brand-color-background-hover: #00205b;
31+
--slds-c-button-text-color: #ffffff;
32+
}
33+
34+
.slds-p-horizontal_small {
35+
padding-left: 1rem;
36+
padding-right: 1rem;
37+
}

‎force-app/main/default/lwc/flowOverview/flowOverview.html‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,37 @@
11
<template>
22
<lightning-card title="Flows" icon-name="custom:custom19">
3+
<div class="search-bar">
4+
<lightning-input
5+
type="search"
6+
label="Search Flows"
7+
placeholder="Search by Name or Label..."
8+
onchange={handleSearchInput}
9+
class="slds-m-bottom_small"
10+
></lightning-input>
11+
</div>
312
<template if:true={err}>
4-
<p>Error fetching records: {err}</p>
13+
<p class="slds-p-horizontal_small">Error fetching records: {err}</p>
514
</template>
615
<template if:false={records.length}>
7-
<p>No flows available to scan</p>
16+
<p class="slds-p-horizontal_small">No flows available to scan</p>
817
</template>
918
<template if:true={records.length}>
1019
<lightning-datatable
1120
key-field="id"
1221
data={records}
1322
columns={columns}
1423
hide-checkbox-column="true"
15-
onrowaction={handleRowAction}>
16-
</lightning-datatable>
24+
onrowaction={handleRowAction}
25+
></lightning-datatable>
26+
</template>
27+
<template if:true={hasMoreRecords}>
28+
<div slot="footer" class="slds-p-horizontal_small">
29+
<lightning-button
30+
label="Load More"
31+
variant="brand"
32+
onclick={handleLoadMore}
33+
></lightning-button>
34+
</div>
1735
</template>
1836
</lightning-card>
1937
</template>

‎force-app/main/default/lwc/flowOverview/flowOverview.js‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { NavigationMixin } from 'lightning/navigation';
33

44
export default class FlowOverview extends NavigationMixin(LightningElement) {
55
@api records = [];
6+
@api hasMoreRecords;
67
@track err;
78
@track columns = [
89
{ label: 'Label', fieldName: 'masterLabel', type: 'text' },
@@ -32,12 +33,20 @@ export default class FlowOverview extends NavigationMixin(LightningElement) {
3233
const actionName = event.detail.action.name;
3334
const row = event.detail.row;
3435
if (actionName === 'scan') {
35-
const scanEvent = new CustomEvent('scanflow', {
36-
detail: {
37-
flowId: row.id
38-
}
39-
});
40-
this.dispatchEvent(scanEvent);
36+
this.dispatchEvent(new CustomEvent('scanflow', {
37+
detail: { flowId: row.id }
38+
}));
4139
}
4240
}
41+
42+
handleSearchInput(event) {
43+
const searchTerm = event.target.value;
44+
this.dispatchEvent(new CustomEvent('search', {
45+
detail: { searchTerm }
46+
}));
47+
}
48+
49+
handleLoadMore() {
50+
this.dispatchEvent(new CustomEvent('loadmore'));
51+
}
4352
}

‎force-app/main/default/lwc/lightningFlowScannerApp/lightningFlowScannerApp.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,21 @@
55
<a class="slds-tabs_default__link {FlowsClass}" href="javascript:void(0);" role="tab" tabindex="0" data-tab="1" onclick={handleTabClick}>Flows</a>
66
</li>
77
<li class="slds-tabs_default__item" title="Analysis" role="presentation">
8-
<a class="slds-tabs_default__link {AnalysisClass}" href="javascript:void(0);" role="tab" tabindex="-1" data-tab="2" onclick={handleTabClick}>Details</a>
8+
<a class="slds-tabs_default__link {AnalysisClass}" href="javascript:void(0);" role="tab" tabindex="-1" data-tab="2" onclick={handleTabClick}>Analysis</a>
99
</li>
1010
<li class="slds-tabs_default__item" title="Configuration" role="presentation">
1111
<a class="slds-tabs_default__link {ConfigClass}" href="javascript:void(0);" role="tab" tabindex="-1" data-tab="3" onclick={handleTabClick}>Configuration</a>
1212
</li>
1313
</ul>
1414
<div class="slds-tabs_default__content">
1515
<template if:true={isTab1Active}>
16-
<c-flow-overview records={records} onscanflow={handleScanFlow}></c-flow-overview>
16+
<c-flow-overview
17+
records={records}
18+
has-more-records={hasMoreRecords}
19+
onscanflow={handleScanFlow}
20+
onsearch={handleSearch}
21+
onloadmore={handleLoadMore}
22+
></c-flow-overview>
1723
</template>
1824
<template if:true={isTab2Active}>
1925
<c-lightning-flow-scanner

‎force-app/main/default/lwc/lightningFlowScannerApp/lightningFlowScannerApp.js‎

Lines changed: 68 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ export default class lightningFlowScannerApp extends LightningElement {
1616
@track rules = [];
1717
@track rulesConfig = null;
1818
@track isLoading = false;
19-
@track currentFlowIndex = 0; // Track the index of the selected flow
19+
@track currentFlowIndex = 0;
20+
@track nextRecordsUrl;
21+
@track hasMoreRecords = false;
2022
conn;
2123
scriptLoaded = false;
2224

@@ -52,7 +54,6 @@ export default class lightningFlowScannerApp extends LightningElement {
5254
]);
5355
this.scriptLoaded = true;
5456

55-
// Fetch rules for Configuration tab, default all to active
5657
this.rules = lightningflowscanner.getRules().map((rule, index) => ({
5758
id: `rule-${index}`,
5859
name: rule.name,
@@ -62,7 +63,6 @@ export default class lightningFlowScannerApp extends LightningElement {
6263
isActive: true
6364
}));
6465

65-
// Initialize rulesConfig with all rules
6666
this.rulesConfig = {
6767
rules: this.rules.reduce((acc, rule) => {
6868
acc[rule.name] = { severity: rule.severity };
@@ -78,9 +78,27 @@ export default class lightningFlowScannerApp extends LightningElement {
7878
maxRequest: '10000'
7979
});
8080

81-
const res = await this.conn.tooling.query(`SELECT Id, DeveloperName, ActiveVersionId, LatestVersionId, ActiveVersion.Status, ActiveVersion.MasterLabel, ActiveVersion.ProcessType, LatestVersion.Status, LatestVersion.MasterLabel, LatestVersion.ProcessType FROM FlowDefinition`);
81+
await this.fetchFlows();
82+
} catch (error) {
83+
this.err = error.message;
84+
console.error('Error in connectedCallback:', error);
85+
}
86+
}
87+
88+
async fetchFlows(searchTerm = '') {
89+
try {
90+
this.isLoading = true;
91+
let query = `SELECT Id, DeveloperName, ActiveVersionId, LatestVersionId, ActiveVersion.Status, ActiveVersion.MasterLabel, ActiveVersion.ProcessType, LatestVersion.Status, LatestVersion.MasterLabel, LatestVersion.ProcessType FROM FlowDefinition`;
92+
93+
if (searchTerm) {
94+
const escapedSearchTerm = searchTerm.replace(/'/g, "\\'");
95+
query += ` WHERE DeveloperName LIKE '%${escapedSearchTerm}%' OR MasterLabel LIKE '%${escapedSearchTerm}%'`;
96+
}
97+
query += ' LIMIT 50';
98+
99+
const res = await this.conn.tooling.query(query);
82100
if (res && res.records) {
83-
this.records = res.records.map(record => ({
101+
const newRecords = res.records.map(record => ({
84102
id: record.Id,
85103
developerName: record.DeveloperName,
86104
developerNameUrl: `/${record.Id}`,
@@ -90,18 +108,59 @@ export default class lightningFlowScannerApp extends LightningElement {
90108
versionId: record.ActiveVersionId ? record.ActiveVersionId : record.LatestVersionId
91109
}));
92110

93-
if (this.records.length > 0) {
111+
this.records = searchTerm ? newRecords : [...this.records, ...newRecords];
112+
this.nextRecordsUrl = res.nextRecordsUrl;
113+
this.hasMoreRecords = !!res.nextRecordsUrl;
114+
115+
if (this.records.length > 0 && !searchTerm) {
94116
this.selectedFlowRecord = this.records[0];
95-
this.currentFlowIndex = 0; // Set initial index
117+
this.currentFlowIndex = 0;
96118
await this.loadFlowMetadata(this.selectedFlowRecord);
97119
}
98120
}
99121
} catch (error) {
100122
this.err = error.message;
101-
console.error('Error in connectedCallback:', error);
123+
console.error('Error in fetchFlows:', error);
124+
} finally {
125+
this.isLoading = false;
102126
}
103127
}
104128

129+
async loadMoreFlows() {
130+
if (!this.nextRecordsUrl || !this.hasMoreRecords) return;
131+
try {
132+
this.isLoading = true;
133+
const res = await this.conn.tooling.queryMore(this.nextRecordsUrl);
134+
if (res && res.records) {
135+
const newRecords = res.records.map(record => ({
136+
id: record.Id,
137+
developerName: record.DeveloperName,
138+
developerNameUrl: `/${record.Id}`,
139+
isActive: !!record.ActiveVersionId,
140+
masterLabel: record.ActiveVersionId ? record.ActiveVersion.MasterLabel : record.LatestVersion.MasterLabel,
141+
processType: record.ActiveVersionId ? record.ActiveVersion.ProcessType : record.LatestVersion.ProcessType,
142+
versionId: record.ActiveVersionId ? record.ActiveVersionId : record.LatestVersionId
143+
}));
144+
this.records = [...this.records, ...newRecords];
145+
this.nextRecordsUrl = res.nextRecordsUrl;
146+
this.hasMoreRecords = !!res.nextRecordsUrl;
147+
}
148+
} catch (error) {
149+
this.err = error.message;
150+
console.error('Error in loadMoreFlows:', error);
151+
} finally {
152+
this.isLoading = false;
153+
}
154+
}
155+
156+
async handleSearch(event) {
157+
const searchTerm = event.detail.searchTerm;
158+
this.records = [];
159+
this.nextRecordsUrl = null;
160+
this.hasMoreRecords = false;
161+
await this.fetchFlows(searchTerm);
162+
}
163+
105164
async loadFlowMetadata(record) {
106165
try {
107166
this.isLoading = true;
@@ -186,7 +245,7 @@ export default class lightningFlowScannerApp extends LightningElement {
186245
if (record) {
187246
this.isLoading = true;
188247
this.selectedFlowRecord = record;
189-
this.currentFlowIndex = this.records.findIndex(rec => rec.id === flowId); // Update index
248+
this.currentFlowIndex = this.records.findIndex(rec => rec.id === flowId);
190249
try {
191250
await this.loadFlowMetadata(record);
192251
this.activeTab = 2;

0 commit comments

Comments
 (0)