Skip to content

Commit 7bd7aaa

Browse files
piszostapiszosta
authored
Merge branch 'main' into recordListAdj
2 parents 46135a0 + adbcd47 commit 7bd7aaa

File tree

4 files changed

+88
-26
lines changed

4 files changed

+88
-26
lines changed

‎force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.css

+25-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
display: flex;
33
align-items: center;
44
justify-content: space-between;
5-
padding: 0.25rem 0.5rem;
5+
padding: 0.25rem 1rem;
66
}
77

88
.chevronIcon {
@@ -36,3 +36,27 @@
3636
height: 2rem;
3737
padding: 0 0.5rem;
3838
}
39+
40+
/* Inactive row styling: light grey background and grey text */
41+
.inactiveRow {
42+
background-color: #f4f6f9 !important;
43+
color: #7e7e7e !important;
44+
}
45+
46+
/* Also force text inside inactive rows to appear grey */
47+
.inactiveRow .slds-truncate {
48+
color: #7e7e7e;
49+
}
50+
51+
.slds-table thead tr > th:first-child,
52+
.slds-table tbody tr > td:first-child {
53+
padding-left: 1rem !important;
54+
}
55+
56+
.slds-popover_medium .slds-popover__header {
57+
background-color: #f3f2f2; /* Slight grey for the header */
58+
border-bottom: 1px solid #dddbda;
59+
}
60+
.slds-popover_medium .slds-popover__body {
61+
padding: 1rem;
62+
}

‎force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.html

+25-7
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,8 @@ <h1 class="headerTitle slds-text-heading_small">{cardTitle}</h1>
4242
</thead>
4343
<tbody>
4444
<template for:each={displayedRecords} for:item="record" for:index="rowIndex">
45-
<!-- For clickable rows, added mouse event handlers for popover -->
4645
<template if:true={clickableRows}>
47-
<tr key={record.Id} data-record-id={record.Id} data-value={rowIndex} class="slds-hint-parent" onclick={handleRowClick} style="cursor: pointer"
46+
<tr key={record.Id} data-record-id={record.Id} data-value={rowIndex} class={record.rowClass} onclick={handleRowClick} style="cursor: pointer"
4847
onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave}>
4948
<template for:each={record.recordFields} for:item="field">
5049
<td key={field.label} style="max-width: 33%">
@@ -53,9 +52,8 @@ <h1 class="headerTitle slds-text-heading_small">{cardTitle}</h1>
5352
</template>
5453
</tr>
5554
</template>
56-
<!-- For non-clickable rows, also added mouse event handlers for popover -->
5755
<template if:false={clickableRows}>
58-
<tr key={record.Id} data-record-id={record.Id} data-value={rowIndex} class="slds-hint-parent"
56+
<tr key={record.Id} data-record-id={record.Id} data-value={rowIndex} class={record.rowClass}
5957
onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave}>
6058
<template for:each={record.recordFields} for:item="field">
6159
<td key={field.label} style="max-width: 33%">
@@ -70,12 +68,32 @@ <h1 class="headerTitle slds-text-heading_small">{cardTitle}</h1>
7068
</div>
7169
</template>
7270

73-
<!-- Popover Template for additional record details -->
7471
<template if:true={showPopover}>
75-
<div class="slds-popover slds-nubbin_top" style={popoverStyle} onmouseleave={handleMouseLeave}>
72+
<div
73+
class="slds-popover slds-nubbin_top slds-popover_medium"
74+
style={popoverStyle}
75+
role="dialog"
76+
onmouseenter={handlePopoverEnter}
77+
onmouseleave={handleMouseLeave}
78+
>
79+
<!-- Popover Header -->
80+
<div class="slds-popover__header">
81+
<div class="slds-media slds-media_center slds-has-flexi-truncate">
82+
<div class="slds-media__figure">
83+
<lightning-icon icon-name={icon} size="small"></lightning-icon>
84+
</div>
85+
<div class="slds-media__body">
86+
<h2 id="popover-heading" class="slds-text-heading_small slds-hyphenate">
87+
{popoverTitle}
88+
</h2>
89+
</div>
90+
</div>
91+
</div>
92+
93+
<!-- Popover Body -->
7694
<div class="slds-popover__body">
7795
<template for:each={popoverFieldValues} for:item="fieldObj">
78-
<p key={fieldObj.apiName}>
96+
<p key={fieldObj.apiName} class="slds-truncate">
7997
<strong>{fieldObj.apiName}:</strong> {fieldObj.value}
8098
</p>
8199
</template>

‎force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.js

+30-18
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import { getObjectInfo } from 'lightning/uiObjectInfoApi';
66
import { encodeDefaultFieldValues } from 'lightning/pageReferenceUtils';
77

88
export default class TagRelatedList extends NavigationMixin(LightningElement) {
9+
10+
hoverTimer;
11+
hideTimer;
12+
913
@api recordId;
1014
@api objectApiName;
1115
@api listTitle; // Title of the list.
@@ -25,14 +29,13 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
2529
@api popoverFields; //Popover additional fields (comma separated)
2630
@api showNewRecordButton;
2731
@api newRecordButtonLabel; // Button label for New Record button
28-
32+
@api inactiveRecordFilter; // Example: "Active__c = false"
2933

3034
@track relatedRecords;
3135
@track isExpanded = false; // Accordion state
3236

3337
@track popoverRecordData; // Holds the record data for the hovered row
3438
@track showPopover = false; // Flag to conditionally display popover
35-
hoverTimer; // Timer for delayed popover display
3639
@track popoverPosition = { top: 0, left: 0 };
3740

3841
connectedCallback() {
@@ -49,7 +52,6 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
4952
if (data && this.dynamicUpdate === true) {
5053
this.getList();
5154
} else if (error) {
52-
// Handle error accordingly
5355
}
5456
}
5557

@@ -186,6 +188,7 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
186188
}
187189
return returnRecords;
188190
}
191+
189192

190193
// Build the card title with record count
191194
get cardTitle() {
@@ -217,9 +220,8 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
217220
let style = 'vertical-align: middle; text-align: left; padding: 4px 8px; max-width: 33%';
218221
// Padding for the first cell.
219222
if (index === 0) {
220-
style += 'padding-left: 5px;';
223+
style += 'padding-left: 1rem;';
221224
}
222-
// Remove extra right padding for the last cell.
223225
if (index === arr.length - 1) {
224226
style += 'padding-right: 0px;';
225227
}
@@ -230,13 +232,10 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
230232
});
231233
}
232234

233-
// Parse and combine the displayed fields and popoverFields strings into an array
234235
get apexFieldList() {
235-
// Get displayedFields (if any)
236+
// Get fields from displayedFields and popoverFields
236237
let displayed = this.displayedFields ? this.displayedFields.replace(/\s/g, '').split(',') : [];
237-
// Get popoverFields (if any)
238238
let popover = this.popoverFields ? this.popoverFields.replace(/\s/g, '').split(',') : [];
239-
// Combine them and remove duplicates
240239
let combined = Array.from(new Set([...displayed, ...popover]));
241240

242241
// extract the field name and add it to the list if not already present.
@@ -275,25 +274,29 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
275274
}, obj || {});
276275
}
277276

278-
// Event handler for mouse enter on a record row
279277
handleMouseEnter(event) {
280278
const recordId = event.currentTarget.dataset.recordId;
281279
const rect = event.currentTarget.getBoundingClientRect();
282-
// Adjusting the position slightly (you can fine‑tune the offsets)
283280
this.popoverPosition = {
284-
top: rect.top + 10,
285-
left: rect.left + 10
281+
top: rect.top + 2,
282+
left: rect.left + 2
286283
};
287284
this.hoverTimer = window.setTimeout(() => {
288285
this.popoverRecordData = this.relatedRecords.find(rec => rec.Id === recordId);
289286
this.showPopover = true;
290-
}, 1500);
287+
}, 1000);
291288
}
292289

293-
// Event handler for mouse leave from a record row (or popover)
294290
handleMouseLeave() {
295291
window.clearTimeout(this.hoverTimer);
296-
this.showPopover = false;
292+
this.hideTimer = window.setTimeout(() => {
293+
this.showPopover = false;
294+
}, 200); // Delay closing popover to allow mouse movement
295+
}
296+
297+
handlePopoverEnter() {
298+
// Prevent hiding when entering the popover
299+
window.clearTimeout(this.hideTimer);
297300
}
298301

299302
// Getter to combine displayedFields with additional popoverFields
@@ -303,7 +306,6 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
303306

304307
// Getter to prepare an array of objects with localized field labels and values from the hovered record
305308
get popoverFieldValues() {
306-
// Ensure we have the record data and the object metadata
307309
if (!this.popoverRecordData || !this.objectInfo.data) {
308310
return [];
309311
}
@@ -332,7 +334,17 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
332334
top: ${relativeTop + 20}px;
333335
left: ${relativeLeft}px;
334336
z-index: 1000;
335-
transform: translate(-50%, 0);`;
337+
transform: translate(0, 0);`;
338+
}
339+
return '';
340+
}
341+
342+
get popoverTitle() {
343+
if (this.popoverRecordData && this.displayedFieldList && this.displayedFieldList.length > 0 && this.objectInfo.data) {
344+
// Get the first field's API name from the displayedFields array
345+
let firstFieldApiName = this.displayedFieldList[0];
346+
let fieldValue = this.resolve(firstFieldApiName, this.popoverRecordData);
347+
return `${fieldValue}`;
336348
}
337349
return '';
338350
}

‎force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.js-meta.xml

+8
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,14 @@
106106
type="String"
107107
default=""
108108
/>
109+
<property
110+
name="inactiveRecordFilter"
111+
label="Inactive Record Filter"
112+
description="Enter a SOQL condition (e.g., Active__c = false). Records meeting this condition will be styled as inactive."
113+
type="String"
114+
default=""
115+
/>
116+
109117
</targetConfig>
110118
</targetConfigs>
111119
</LightningComponentBundle>

0 commit comments

Comments
 (0)