Skip to content

Commit 3c530bc

Browse files
RubenHalmanRubenHalman
committed
details nav buttons
1 parent 2045620 commit 3c530bc

File tree

5 files changed

+187
-84
lines changed

5 files changed

+187
-84
lines changed

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

Lines changed: 76 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,119 @@
11
.page {
22
background-color: #f4f6f9;
3-
padding: 20px;
4-
border: 1px solid #ccc; /* Border around all columns */
5-
border-radius: 8px;
3+
padding: 1.5rem;
4+
border-radius: 0.5rem;
5+
max-width: 1600px; /* Increased from 1200px for wider table */
6+
margin: 0 auto;
67
}
78

8-
.main-info {
9+
.navigation {
10+
display: flex;
11+
gap: 1rem;
12+
margin-bottom: 1.5rem;
13+
}
14+
15+
.navigation lightning-button {
16+
--slds-c-button-brand-color-background: #003087; /* Dark blue, Salesforce logo-inspired */
17+
--slds-c-button-brand-color-background-hover: #00205b; /* Darker on hover */
18+
--slds-c-button-text-color: #ffffff;
19+
--slds-c-button-radius-border: 0.25rem;
20+
}
21+
22+
.header {
923
background-color: #ffffff;
10-
padding: 20px;
11-
margin-bottom: 20px;
12-
border-radius: 8px;
24+
padding: 1.5rem;
25+
border-radius: 0.5rem;
1326
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
27+
margin-bottom: 1.5rem;
1428
}
1529

16-
table {
17-
width: 100%;
18-
border-collapse: collapse;
19-
margin-top: 10px;
30+
.flow-container {
31+
display: flex;
32+
gap: 2rem;
33+
flex-wrap: wrap;
2034
}
2135

22-
th, td {
23-
border: 1px solid #ddd;
24-
padding: 8px;
25-
text-align: left;
36+
.flow-column {
37+
flex: 1;
38+
min-width: 200px;
2639
}
2740

28-
th {
29-
background-color: #f2f2f2;
41+
.info-item {
42+
margin-bottom: 0.5rem;
43+
font-size: 0.9rem;
44+
color: #333;
3045
}
3146

32-
.header {
33-
margin-bottom: 20px;
47+
.info-item strong {
48+
color: #003087;
3449
}
3550

36-
.header h1 {
37-
margin-bottom: 10px;
38-
color: #333;
51+
.description {
52+
font-style: italic;
53+
color: #555;
54+
margin-top: 1rem;
55+
font-size: 0.9rem;
3956
}
4057

41-
.flow-container {
42-
display: flex;
43-
justify-content: space-between;
58+
.results {
59+
margin-bottom: 1.5rem;
60+
overflow-x: auto; /* Enable horizontal scrolling for table */
4461
}
4562

46-
.flow-column {
47-
flex-basis: 30%; /* Adjust as needed */
63+
.slds-table {
64+
background-color: #ffffff;
65+
border-radius: 0.25rem;
66+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
67+
min-width: 1400px; /* Ensure table is wide enough for all columns */
4868
}
4969

50-
.empty-column {
51-
flex-basis: 30%; /* Adjust as needed */
70+
.slds-table th {
71+
background-color: #003087;
72+
color: #ffffff;
73+
font-weight: 600;
74+
padding: 0.75rem;
75+
white-space: nowrap; /* Prevent header text wrapping */
5276
}
5377

54-
.info-item {
55-
margin-bottom: 5px;
56-
color: #555;
78+
.slds-table td {
79+
padding: 0.75rem;
80+
color: #333;
81+
max-width: 200px; /* Limit column width */
82+
overflow: hidden;
83+
text-overflow: ellipsis; /* Truncate long text with ellipsis */
84+
white-space: nowrap;
5785
}
5886

59-
.description {
60-
font-weight: italic;
61-
color: #555;
87+
.slds-table tr:nth-child(even) {
88+
background-color: #f9f9f9;
89+
}
90+
91+
.slds-table tr:hover {
92+
background-color: #e6f0ff;
6293
}
6394

6495
.error {
65-
color: red;
96+
color: #c23934;
6697
font-weight: bold;
98+
text-align: center;
99+
margin: 1rem 0;
67100
}
68101

69102
.github-star {
70-
margin-top: 20px;
71103
text-align: center;
72-
font-size: 1.1em;
104+
font-size: 0.9rem;
105+
color: #555;
106+
padding: 1rem 0;
107+
border-top: 1px solid #ddd;
73108
}
74109

75110
.github-star a {
76-
color: #0366d6;
111+
color: #003087;
77112
text-decoration: none;
78-
font-weight: bold;
113+
font-weight: 600;
79114
}
80115

81116
.github-star a:hover {
82117
text-decoration: underline;
118+
color: #00205b;
83119
}

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

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
11
<template>
22
<div class="page">
3-
<template if:true={error}>
4-
<p>Error scanning Flow: {error}</p>
5-
</template>
6-
73
<template if:true={flowName}>
4+
<div class="navigation">
5+
<lightning-button
6+
label="Previous Flow"
7+
variant="brand"
8+
disabled={isFirstFlow}
9+
onclick={handlePreviousFlow}
10+
></lightning-button>
11+
<lightning-button
12+
label="Next Flow"
13+
variant="brand"
14+
disabled={isLastFlow}
15+
onclick={handleNextFlow}
16+
></lightning-button>
17+
</div>
818
<div class="header">
919
<div class="flow-container">
1020
<div class="flow-column">
@@ -23,10 +33,12 @@
2333
<div class="description"><strong>Description:</strong> {metadata.description}</div>
2434
</div>
2535
</template>
26-
36+
<template if:true={error}>
37+
<p class="error">Error scanning Flow: {error}</p>
38+
</template>
2739
<template if:true={hasScanResults}>
2840
<div class="results">
29-
<table>
41+
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
3042
<thead>
3143
<tr>
3244
<th>Rule Name</th>

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ export default class LightningFlowScanner extends LightningElement {
66
@api scanResult;
77
@api numberOfRules;
88
@api error;
9+
@api records;
10+
@api selectedFlowRecord;
911

1012
get hasScanResults() {
1113
return this.scanResult && this.scanResult.ruleResults && this.scanResult.ruleResults.length > 0;
@@ -14,4 +16,26 @@ export default class LightningFlowScanner extends LightningElement {
1416
get flowName() {
1517
return this.name || '';
1618
}
19+
20+
get isFirstFlow() {
21+
if (!this.records || !this.selectedFlowRecord) return true;
22+
return this.records.findIndex(rec => rec.id === this.selectedFlowRecord.id) === 0;
23+
}
24+
25+
get isLastFlow() {
26+
if (!this.records || !this.selectedFlowRecord) return true;
27+
return this.records.findIndex(rec => rec.id === this.selectedFlowRecord.id) === this.records.length - 1;
28+
}
29+
30+
handlePreviousFlow() {
31+
this.dispatchEvent(new CustomEvent('navigateflow', {
32+
detail: { direction: 'previous' }
33+
}));
34+
}
35+
36+
handleNextFlow() {
37+
this.dispatchEvent(new CustomEvent('navigateflow', {
38+
detail: { direction: 'next' }
39+
}));
40+
}
1741
}

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

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,38 @@
11
<template>
2-
<div class="container">
3-
<main>
4-
<ul class="tabs">
5-
<li class={FlowsClass} data-tab="1" onclick={handleTabClick}>Flows</li>
6-
<li class={AnalysisClass} data-tab="2" onclick={handleTabClick}>Results</li>
7-
<li class={ConfigClass} data-tab="3" onclick={handleTabClick}>Configuration</li>
8-
</ul>
9-
<div class="tab-content">
10-
<template if:true={isLoading}>
11-
<lightning-spinner alternative-text="Loading Flow Metadata..." size="medium"></lightning-spinner>
12-
</template>
13-
14-
<template if:true={err}>
15-
<p>Error fetching Flows: {err}</p>
16-
</template>
17-
<template if:true={isTab1Active}>
18-
<c-flow-overview records={records} err={err} onscanflow={handleScanFlow}></c-flow-overview>
19-
</template>
20-
<template if:true={isTab2Active}>
21-
<c-lightning-flow-scanner name={flowName} metadata={flowMetadata} scan-result={scanResult} number-of-rules={numberOfRules} error={err}></c-lightning-flow-scanner>
22-
</template>
23-
<template if:true={isTab3Active}>
24-
<c-scan-configurator rules={rules} onrulechange={handleRuleChange}></c-scan-configurator>
25-
</template>
26-
</div>
27-
</main>
2+
<div class="slds-tabs_default">
3+
<ul class="slds-tabs_default__nav" role="tablist">
4+
<li class="slds-tabs_default__item" title="Flows" role="presentation">
5+
<a class="slds-tabs_default__link {FlowsClass}" href="javascript:void(0);" role="tab" tabindex="0" data-tab="1" onclick={handleTabClick}>Flows</a>
6+
</li>
7+
<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>
9+
</li>
10+
<li class="slds-tabs_default__item" title="Configuration" role="presentation">
11+
<a class="slds-tabs_default__link {ConfigClass}" href="javascript:void(0);" role="tab" tabindex="-1" data-tab="3" onclick={handleTabClick}>Configuration</a>
12+
</li>
13+
</ul>
14+
<div class="slds-tabs_default__content">
15+
<template if:true={isTab1Active}>
16+
<c-flow-overview records={records} onscanflow={handleScanFlow}></c-flow-overview>
17+
</template>
18+
<template if:true={isTab2Active}>
19+
<c-lightning-flow-scanner
20+
name={flowName}
21+
metadata={flowMetadata}
22+
scan-result={scanResult}
23+
number-of-rules={numberOfRules}
24+
error={err}
25+
records={records}
26+
selected-flow-record={selectedFlowRecord}
27+
onnavigateflow={handleNavigateFlow}
28+
></c-lightning-flow-scanner>
29+
</template>
30+
<template if:true={isTab3Active}>
31+
<c-scan-configurator rules={rules} onrulechange={handleRuleChange}></c-scan-configurator>
32+
</template>
33+
</div>
2834
</div>
35+
<template if:true={isLoading}>
36+
<lightning-spinner alternative-text="Loading" size="medium"></lightning-spinner>
37+
</template>
2938
</template>

0 commit comments

Comments
 (0)