From 99926f67382950f9b5d267a3f5aafa74aefd4bd5 Mon Sep 17 00:00:00 2001
From: piszosta <piotr.szostak@nav.no>
Date: Thu, 20 Mar 2025 20:31:32 +0100
Subject: [PATCH] adjustments and new functionality for TAG Related List

---
 .../lwc/tagRelatedList/tagRelatedList.css     | 26 +++++-
 .../lwc/tagRelatedList/tagRelatedList.html    | 32 +++++--
 .../lwc/tagRelatedList/tagRelatedList.js      | 91 +++++++++++++++----
 .../tagRelatedList/tagRelatedList.js-meta.xml |  8 ++
 4 files changed, 129 insertions(+), 28 deletions(-)

diff --git a/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.css b/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.css
index 3f088bc5..93a1d5f8 100644
--- a/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.css
+++ b/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.css
@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.25rem 0.5rem;
+    padding: 0.25rem 1rem;
 }
 
 .chevronIcon {
@@ -36,3 +36,27 @@
     height: 2rem;
     padding: 0 0.5rem;
 }
+
+/* Inactive row styling: light grey background and grey text */
+.inactiveRow {
+    background-color: #f4f6f9 !important;
+    color: #7e7e7e !important;
+}
+
+/* Also force text inside inactive rows to appear grey */
+.inactiveRow .slds-truncate {
+    color: #7e7e7e;
+}
+
+.slds-table thead tr > th:first-child,
+.slds-table tbody tr > td:first-child {
+    padding-left: 1rem !important;
+}
+
+.slds-popover_medium .slds-popover__header {
+    background-color: #f3f2f2; /* Slight grey for the header */
+    border-bottom: 1px solid #dddbda;
+}
+.slds-popover_medium .slds-popover__body {
+    padding: 1rem;
+}
\ No newline at end of file
diff --git a/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.html b/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.html
index 02136241..e2c964cc 100644
--- a/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.html
+++ b/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.html
@@ -42,9 +42,8 @@ <h1 class="headerTitle slds-text-heading_small">{cardTitle}</h1>
                         </thead>
                         <tbody>
                             <template for:each={displayedRecords} for:item="record" for:index="rowIndex">
-                                <!-- For clickable rows, added mouse event handlers for popover -->
                                 <template if:true={clickableRows}>
-                                    <tr key={record.Id} data-record-id={record.Id} data-value={rowIndex} class="slds-hint-parent" onclick={handleRowClick} style="cursor: pointer"
+                                    <tr key={record.Id} data-record-id={record.Id} data-value={rowIndex} class={record.rowClass} onclick={handleRowClick} style="cursor: pointer"
                                         onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave}>
                                         <template for:each={record.recordFields} for:item="field">
                                             <td key={field.label}>
@@ -53,9 +52,8 @@ <h1 class="headerTitle slds-text-heading_small">{cardTitle}</h1>
                                         </template>
                                     </tr>
                                 </template>
-                                <!-- For non-clickable rows, also added mouse event handlers for popover -->
                                 <template if:false={clickableRows}>
-                                    <tr key={record.Id} data-record-id={record.Id} data-value={rowIndex} class="slds-hint-parent"
+                                    <tr key={record.Id} data-record-id={record.Id} data-value={rowIndex} class={record.rowClass}
                                         onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave}>
                                         <template for:each={record.recordFields} for:item="field">
                                             <td key={field.label}>
@@ -70,12 +68,32 @@ <h1 class="headerTitle slds-text-heading_small">{cardTitle}</h1>
             </div>          
         </template>
 
-        <!-- Popover Template for additional record details -->
         <template if:true={showPopover}>
-            <div class="slds-popover slds-nubbin_top" style={popoverStyle} onmouseleave={handleMouseLeave}>
+            <div 
+                class="slds-popover slds-nubbin_top slds-popover_medium" 
+                style={popoverStyle} 
+                role="dialog" 
+                onmouseenter={handlePopoverEnter} 
+                onmouseleave={handleMouseLeave}
+            >
+                <!-- Popover Header -->
+                <div class="slds-popover__header">
+                    <div class="slds-media slds-media_center slds-has-flexi-truncate">
+                        <div class="slds-media__figure">
+                            <lightning-icon icon-name={icon} size="small"></lightning-icon>
+                        </div>
+                        <div class="slds-media__body">
+                            <h2 id="popover-heading" class="slds-text-heading_small slds-hyphenate">
+                                {popoverTitle}
+                            </h2>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Popover Body -->
                 <div class="slds-popover__body">
                     <template for:each={popoverFieldValues} for:item="fieldObj">
-                        <p key={fieldObj.apiName}>
+                        <p key={fieldObj.apiName} class="slds-truncate">
                             <strong>{fieldObj.apiName}:</strong> {fieldObj.value}
                         </p>
                     </template>
diff --git a/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.js b/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.js
index ddec2486..35cc4ced 100644
--- a/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.js
+++ b/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.js
@@ -5,6 +5,10 @@ import { getRecord } from 'lightning/uiRecordApi';
 import { getObjectInfo } from 'lightning/uiObjectInfoApi';
 
 export default class TagRelatedList extends NavigationMixin(LightningElement) {
+    
+    hoverTimer;
+    hideTimer;
+    
     @api recordId;
     @api objectApiName;
     @api listTitle; // Title of the list.
@@ -24,14 +28,13 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
     @api popoverFields; //Popover additional fields (comma separated)
     @api showNewRecordButton;
     @api newRecordButtonLabel; // Button label for New Record button
-
+    @api inactiveRecordFilter; // Example: "Active__c = false"
 
     @track relatedRecords;
     @track isExpanded = false; // Accordion state
 
     @track popoverRecordData; // Holds the record data for the hovered row
     @track showPopover = false; // Flag to conditionally display popover
-    hoverTimer; // Timer for delayed popover display
     @track popoverPosition = { top: 0, left: 0 };
 
     connectedCallback() {
@@ -48,7 +51,6 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
         if (data && this.dynamicUpdate === true) {
             this.getList();
         } else if (error) {
-            // Handle error accordingly
         }
     }
 
@@ -126,6 +128,15 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
     get listRecords() {
         let returnRecords = [];
         if (this.relatedRecords) {
+            // Parse the inactive filter if provided
+            let filterField = null;
+            let filterValue = null;
+            if (this.inactiveRecordFilter && this.inactiveRecordFilter.includes('=')) {
+                let parts = this.inactiveRecordFilter.split('=');
+                filterField = parts[0].trim();
+                filterValue = parts[1].trim().toLowerCase();
+            }
+            
             this.relatedRecords.forEach((dataRecord) => {
                 let recordFields = [];
                 this.displayedFieldList.forEach((key) => {
@@ -136,11 +147,34 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
                         });
                     }
                 });
-                returnRecords.push({ recordFields: recordFields, Id: dataRecord.Id });
+                
+                // Determine if the record is inactive
+                let isInactive = false;
+                if (filterField && filterValue !== null) {
+                    let fieldVal = this.resolve(filterField, dataRecord);
+                    // Convert the field value to string (if boolean, true/false will be 'true'/'false')
+                    if (fieldVal !== null && String(fieldVal).toLowerCase() === filterValue) {
+                        isInactive = true;
+                    }
+                }
+                
+                // Set rowClass based on whether the record is inactive.
+                let rowClass = 'slds-hint-parent';
+                if (isInactive) {
+                    rowClass += ' inactiveRow';
+                }
+                
+                returnRecords.push({
+                    recordFields: recordFields,
+                    Id: dataRecord.Id,
+                    isInactive: isInactive,
+                    rowClass: rowClass
+                });
             });
         }
         return returnRecords;
     }
+    
 
     // Build the card title with record count
     get cardTitle() {
@@ -170,11 +204,10 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
         return labels.map((label, index, arr) => {
              // Base style for every header cell.
              let style = 'vertical-align: middle; text-align: left; padding: 4px 8px;';
-             // Remove extra left padding for the first cell.
+             // Padding for the first cell.
              if (index === 0) {
-                 style += 'padding-left: 5px;';
+                 style += 'padding-left: 1rem;';
              }
-             // Remove extra right padding for the last cell.
              if (index === arr.length - 1) {
                  style += 'padding-right: 0px;';
              }
@@ -185,14 +218,19 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
         });
     }    
 
-    // Parse and combine the displayed fields and popoverFields strings into an array
     get apexFieldList() {
-        // Get displayedFields (if any)
+        // Get fields from displayedFields and popoverFields
         let displayed = this.displayedFields ? this.displayedFields.replace(/\s/g, '').split(',') : [];
-        // Get popoverFields (if any)
         let popover = this.popoverFields ? this.popoverFields.replace(/\s/g, '').split(',') : [];
-        // Combine them and remove duplicates
         let combined = Array.from(new Set([...displayed, ...popover]));
+        
+        // extract the field name and add it to the list if not already present.
+        if (this.inactiveRecordFilter && this.inactiveRecordFilter.includes('=')) {
+            let filterField = this.inactiveRecordFilter.split('=')[0].trim();
+            if (!combined.includes(filterField)) {
+                combined.push(filterField);
+            }
+        }
         return combined;
     }
 
@@ -218,25 +256,29 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
         }, obj || {});
     }
 
-    // Event handler for mouse enter on a record row
     handleMouseEnter(event) {
         const recordId = event.currentTarget.dataset.recordId;
         const rect = event.currentTarget.getBoundingClientRect();
-        // Adjusting the position slightly (you can fine‑tune the offsets)
         this.popoverPosition = {
-            top: rect.top + 10,
-            left: rect.left + 10
+            top: rect.top + 2,
+            left: rect.left + 2
         };
         this.hoverTimer = window.setTimeout(() => {
             this.popoverRecordData = this.relatedRecords.find(rec => rec.Id === recordId);
             this.showPopover = true;
-        }, 1500);
+        }, 1000);
     }
 
-    // Event handler for mouse leave from a record row (or popover)
     handleMouseLeave() {
         window.clearTimeout(this.hoverTimer);
-        this.showPopover = false;
+        this.hideTimer = window.setTimeout(() => {
+            this.showPopover = false;
+        }, 200); // Delay closing popover to allow mouse movement
+    }
+
+    handlePopoverEnter() {
+        // Prevent hiding when entering the popover
+        window.clearTimeout(this.hideTimer);
     }
 
     // Getter to combine displayedFields with additional popoverFields
@@ -246,7 +288,6 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
 
     // Getter to prepare an array of objects with localized field labels and values from the hovered record
     get popoverFieldValues() {
-        // Ensure we have the record data and the object metadata
         if (!this.popoverRecordData || !this.objectInfo.data) {
             return [];
         }
@@ -275,7 +316,17 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
                     top: ${relativeTop + 20}px; 
                     left: ${relativeLeft}px; 
                     z-index: 1000; 
-                    transform: translate(-50%, 0);`;
+                    transform: translate(0, 0);`;
+        }
+        return '';
+    }
+
+    get popoverTitle() {
+        if (this.popoverRecordData && this.displayedFieldList && this.displayedFieldList.length > 0 && this.objectInfo.data) {
+            // Get the first field's API name from the displayedFields array
+            let firstFieldApiName = this.displayedFieldList[0];
+            let fieldValue = this.resolve(firstFieldApiName, this.popoverRecordData);
+            return `${fieldValue}`;
         }
         return '';
     }
diff --git a/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.js-meta.xml b/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.js-meta.xml
index 5edd2099..42cc2982 100644
--- a/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.js-meta.xml
+++ b/force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.js-meta.xml
@@ -106,6 +106,14 @@
                 type="String"
                 default=""
             />
+        <property
+                name="inactiveRecordFilter"
+                label="Inactive Record Filter"
+                description="Enter a SOQL condition (e.g., Active__c = false). Records meeting this condition will be styled as inactive."
+                type="String"
+                default=""
+            />
+
       </targetConfig>
   </targetConfigs>
 </LightningComponentBundle>
\ No newline at end of file