Skip to content

Commit 574bd0a

Browse files
RubenHalmanRubenHalman
committed
add sorting capabilties to result table
1 parent 4e6eb15 commit 574bd0a

File tree

3 files changed

+298
-283
lines changed

3 files changed

+298
-283
lines changed

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,4 +273,29 @@ lightning-datatable {
273273

274274
.all-mode-container lightning-card {
275275
background-color: #003087;
276-
}
276+
}
277+
278+
/* --------------------------
279+
TABLE HEADER SORT INDICATORS
280+
--------------------------- */
281+
.full-width-table th {
282+
position: relative; /* for absolute positioning of indicator */
283+
cursor: pointer;
284+
}
285+
286+
.full-width-table th .sort-indicator {
287+
display: inline-block;
288+
margin-left: 0.25rem;
289+
font-size: 0.75rem;
290+
vertical-align: middle;
291+
color: #ffffff; /* match header text */
292+
}
293+
294+
/* Optional: different color for active sort */
295+
.full-width-table th.sorted-asc .sort-indicator {
296+
color: #ffcc00; /* gold for ascending */
297+
}
298+
299+
.full-width-table th.sorted-desc .sort-indicator {
300+
color: #ffcc00; /* gold for descending */
301+
}

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

Lines changed: 60 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<div class="page">
33
<a class="hidden-csv-link" style="display:none"></a>
4+
45
<!-- SINGLE-FLOW MODE -->
56
<template if:false={isAllMode}>
67
<div class="single-flow-wrapper">
@@ -27,57 +28,58 @@
2728
</div>
2829
</div>
2930
</template>
31+
3032
<!-- Error -->
3133
<template if:true={error}>
3234
<p class="error">Error scanning Flow: {error}</p>
3335
</template>
36+
3437
<!-- Table -->
3538
<template if:true={hasScanResults}>
3639
<div class="custom-datatable">
3740
<table class="slds-table slds-table_cell-buffer slds-table_bordered full-width-table">
3841
<thead>
3942
<tr>
40-
<th>Rule Name</th>
41-
<th>Severity</th>
42-
<th>Violation Name</th>
43-
<th>Type</th>
44-
<th>Meta Type</th>
45-
<th>Data Type</th>
46-
<th>Location X</th>
47-
<th>Location Y</th>
48-
<th>Connects To</th>
49-
<th>Expression</th>
43+
<th data-field="ruleName" onclick={handleSort}>Rule Name {sortIndicators.ruleName}</th>
44+
<th data-field="severity" onclick={handleSort}>Severity {sortIndicators.severity}</th>
45+
<th data-field="name" onclick={handleSort}>Violation Name {sortIndicators.name}</th>
46+
<th data-field="type" onclick={handleSort}>Type {sortIndicators.type}</th>
47+
<th data-field="metaType" onclick={handleSort}>Meta Type {sortIndicators.metaType}</th>
48+
<th data-field="dataType" onclick={handleSort}>Data Type {sortIndicators.dataType}</th>
49+
<th data-field="locationX" onclick={handleSort}>Location X {sortIndicators.locationX}</th>
50+
<th data-field="locationY" onclick={handleSort}>Location Y {sortIndicators.locationY}</th>
51+
<th data-field="connectsTo" onclick={handleSort}>Connects To {sortIndicators.connectsTo}</th>
52+
<th data-field="expression" onclick={handleSort}>Expression {sortIndicators.expression}</th>
5053
</tr>
5154
</thead>
5255
<tbody>
53-
<template for:each={scanResult.ruleResults} for:item="rule">
54-
<template for:each={rule.details} for:item="detail">
55-
<tr key={detail.id}>
56-
<td>{rule.ruleName}</td>
57-
<td>{rule.severity}</td>
58-
<td>{detail.name}</td>
59-
<td>{detail.type}</td>
60-
<td>{detail.metaType}</td>
61-
<td>{detail.details.dataType}</td>
62-
<td>{detail.details.locationX}</td>
63-
<td>{detail.details.locationY}</td>
64-
<td>{detail.connectsTo}</td>
65-
<td class="expression-cell">{detail.details.expression}</td>
66-
</tr>
67-
</template>
56+
<template for:each={filteredViolations} for:item="v">
57+
<tr key={v.id}>
58+
<td>{v.ruleName}</td>
59+
<td>{v.severity}</td>
60+
<td>{v.name}</td>
61+
<td>{v.type}</td>
62+
<td>{v.metaType}</td>
63+
<td>{v.dataType}</td>
64+
<td>{v.locationX}</td>
65+
<td>{v.locationY}</td>
66+
<td>{v.connectsTo}</td>
67+
<td class="expression-cell">{v.expression}</td>
68+
</tr>
6869
</template>
6970
</tbody>
7071
</table>
7172
</div>
7273
</template>
7374
</div>
7475
</template>
76+
7577
<!-- ALL-FLOWS MODE -->
7678
<template if:true={isAllMode}>
7779
<div class="all-mode-container">
7880
<template if:true={allScanResults}>
79-
<div slot="title"
80-
class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread toolbar-row">
81+
<!-- Toolbar -->
82+
<div class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread toolbar-row">
8183
<div class="toolbar-icon">
8284
<lightning-icon icon-name="standard:work_order" size="small"></lightning-icon>
8385
</div>
@@ -103,45 +105,49 @@ <h2 class="slds-text-heading_small slds-truncate">All Results</h2>
103105
variant="brand" class="slds-button slds-button_brand"></lightning-button>
104106
</div>
105107
</div>
108+
109+
<!-- Table Card -->
106110
<lightning-card>
107111
<template if:true={hasFlattenedViolations}>
108112
<div class="custom-datatable">
109113
<table class="slds-table slds-table_cell-buffer full-width-table">
110114
<thead>
111115
<tr>
112-
<th>Flow</th>
113-
<th>Rule Name</th>
114-
<th>Severity</th>
115-
<th>Violation Name</th>
116-
<th>Type</th>
117-
<th>Meta Type</th>
118-
<th>Data Type</th>
119-
<th>Location X</th>
120-
<th>Location Y</th>
121-
<th>Connects To</th>
122-
<th>Expression</th>
116+
<th data-field="flowName" onclick={handleSort}>Flow {sortIndicators.flowName}</th>
117+
<th data-field="ruleName" onclick={handleSort}>Rule Name {sortIndicators.ruleName}</th>
118+
<th data-field="severity" onclick={handleSort}>Severity {sortIndicators.severity}</th>
119+
<th data-field="name" onclick={handleSort}>Violation Name {sortIndicators.name}</th>
120+
<th data-field="type" onclick={handleSort}>Type {sortIndicators.type}</th>
121+
<th data-field="metaType" onclick={handleSort}>Meta Type {sortIndicators.metaType}</th>
122+
<th data-field="dataType" onclick={handleSort}>Data Type {sortIndicators.dataType}</th>
123+
<th data-field="locationX" onclick={handleSort}>Location X {sortIndicators.locationX}</th>
124+
<th data-field="locationY" onclick={handleSort}>Location Y {sortIndicators.locationY}</th>
125+
<th data-field="connectsTo" onclick={handleSort}>Connects To {sortIndicators.connectsTo}</th>
126+
<th data-field="expression" onclick={handleSort}>Expression {sortIndicators.expression}</th>
123127
</tr>
124128
</thead>
125129
<tbody>
126-
<template for:each={filteredViolations} for:item="violation">
127-
<tr key={violation.id}>
128-
<td>{violation.flowName}</td>
129-
<td>{violation.ruleName}</td>
130-
<td>{violation.severity}</td>
131-
<td>{violation.name}</td>
132-
<td>{violation.type}</td>
133-
<td>{violation.metaType}</td>
134-
<td>{violation.dataType}</td>
135-
<td>{violation.locationX}</td>
136-
<td>{violation.locationY}</td>
137-
<td>{violation.connectsTo}</td>
138-
<td class="expression-cell">{violation.expression}</td>
130+
<template for:each={filteredViolations} for:item="v">
131+
<tr key={v.id}>
132+
<td>{v.flowName}</td>
133+
<td>{v.ruleName}</td>
134+
<td>{v.severity}</td>
135+
<td>{v.name}</td>
136+
<td>{v.type}</td>
137+
<td>{v.metaType}</td>
138+
<td>{v.dataType}</td>
139+
<td>{v.locationX}</td>
140+
<td>{v.locationY}</td>
141+
<td>{v.connectsTo}</td>
142+
<td class="expression-cell">{v.expression}</td>
139143
</tr>
140144
</template>
141145
</tbody>
142146
</table>
143147
</div>
144148
</template>
149+
150+
<!-- No violations -->
145151
<template if:false={hasFlattenedViolations}>
146152
<template if:true={totalViolationsCount}>
147153
<p class="slds-p-horizontal_small">
@@ -158,6 +164,7 @@ <h2 class="slds-text-heading_small slds-truncate">All Results</h2>
158164
</template>
159165
</div>
160166
</template>
167+
161168
<!-- Footer -->
162169
<div class="footer">
163170
<div class="github-info">
@@ -168,6 +175,7 @@ <h2 class="slds-text-heading_small slds-truncate">All Results</h2>
168175
<a href="https://github.com/Flow-Scanner/lightning-flow-scanner-core?tab=contributing-ov-file"
169176
target="_blank">Contributing Guidelines</a>.
170177
</div>
178+
171179
<template if:false={isAllMode}>
172180
<div class="navigation-buttons">
173181
<lightning-button label="Previous Flow" variant="brand" disabled={isFirstFlow}
@@ -178,4 +186,4 @@ <h2 class="slds-text-heading_small slds-truncate">All Results</h2>
178186
</template>
179187
</div>
180188
</div>
181-
</template>
189+
</template>

0 commit comments

Comments
 (0)