feat: Implemet relatedLogEntries auto refresh

jongpie · Jun 23, 2024 · 08ae2e7 · 08ae2e7
1 parent 4d56ecb
commit 08ae2e7
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 13 deletions.
diff --git a/...EventChannelMembers/ChangeEvents_LogEntry_ChangeEvent.platformEventChannelMember-meta.xml b/...EventChannelMembers/ChangeEvents_LogEntry_ChangeEvent.platformEventChannelMember-meta.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<PlatformEventChannelMember xmlns="http://soap.sforce.com/2006/04/metadata">
+    <eventChannel>ChangeEvents</eventChannel>
+    <selectedEntity>LogEntry__ChangeEvent</selectedEntity>
+</PlatformEventChannelMember>
diff --git a/nebula-logger/core/main/log-management/lwc/relatedLogEntries/relatedLogEntries.html b/nebula-logger/core/main/log-management/lwc/relatedLogEntries/relatedLogEntries.html
@@ -6,19 +6,31 @@
 <template>
     <template if:true={showComponent}>
         <lightning-card title={title} icon-name="custom:custom83" class="log-entry-card">
-            <div slot="actions">
-                <lightning-input data-id="enter-search" placeholder="Search" type="search" value={search} onchange={handleSearchChange}></lightning-input>
+            <div class="slds-grid" slot="actions">
+                <lightning-input
+                    class="slds-m-right_xx-small"
+                    data-id="enter-search"
+                    placeholder="Search"
+                    type="search"
+                    value={search}
+                    onchange={handleSearchChange}
+                    variant="label-hidden"
+                ></lightning-input>
+                <lightning-button-icon icon-name="utility:refresh" onclick={refresh}></lightning-button-icon>
+            </div>
+            <div class="slds-is-relative">
+                <lightning-datatable
+                    key-field="id"
+                    show-row-number-column="true"
+                    data={queryResult.records}
+                    columns={queryResult.fieldSet.fields}
+                    onsort={handleSort}
+                    sorted-by={sortBy}
+                    sorted-direction={sortDirection}
+                    default-sort-direction={sortDirection}
+                ></lightning-datatable>
+                <lightning-spinner if:true={isLoading} size="small"></lightning-spinner>
             </div>
-            <lightning-datatable
-                key-field="id"
-                show-row-number-column="true"
-                data={queryResult.records}
-                columns={queryResult.fieldSet.fields}
-                onsort={handleSort}
-                sorted-by={sortBy}
-                sorted-direction={sortDirection}
-                default-sort-direction={sortDirection}
-            ></lightning-datatable>
         </lightning-card>
     </template>
 </template>
diff --git a/nebula-logger/core/main/log-management/lwc/relatedLogEntries/relatedLogEntries.js b/nebula-logger/core/main/log-management/lwc/relatedLogEntries/relatedLogEntries.js
@@ -4,6 +4,9 @@
  ************************************************************************************************/
 
 import { LightningElement, api, track, wire } from 'lwc';
+import { subscribe, unsubscribe } from 'lightning/empApi';
+import { refreshApex } from '@salesforce/apex';
+
 import getQueryResult from '@salesforce/apex/RelatedLogEntriesController.getQueryResult';
 export default class RelatedLogEntries extends LightningElement {
     /* eslint-disable @lwc/lwc/no-api-reassignments */
@@ -13,10 +16,12 @@ export default class RelatedLogEntries extends LightningElement {
     @api sortDirection = '';
     @api rowLimit;
     @api search = '';
+    @api queryResult;
 
     @track showComponent = false;
     @track title;
-    @api queryResult;
+    @track wiredResult;
+    @track isLoading = true;
 
     @api
     handleSort(event) {
@@ -26,6 +31,7 @@ export default class RelatedLogEntries extends LightningElement {
 
     @api
     handleSearchChange(event) {
+        this.isLoading = true;
         this.search = event.target.value;
     }
 
@@ -38,6 +44,7 @@ export default class RelatedLogEntries extends LightningElement {
         search: '$search'
     })
     wiredLogEntries(result) {
+        this.wiredResult = result;
         if (result.data) {
             let queryResult = this.processResult(result.data);
             this.queryResult = queryResult;
@@ -49,6 +56,39 @@ export default class RelatedLogEntries extends LightningElement {
             /* eslint-disable-next-line no-console */
             console.log(result.error);
         }
+        this.isLoading = false;
+    }
+
+    connectedCallback() {
+        this.handleSubscribe();
+    }
+
+    disconnectedCallback() {
+        this.handleUnsubscribe();
+    }
+
+    channelName = '/data/LogEntry__ChangeEvent';
+    subscription = {};
+
+    async handleSubscribe() {
+        this.subscription = await subscribe(this.channelName, -1, this.messageCallback);
+    }
+
+    async handleUnsubscribe() {
+        await unsubscribe(this.subscription);
+    }
+
+    messageCallback = async response => {
+        const recordId = response.data.payload.RecordId__c;
+        if (this.recordId === recordId) {
+            await this.refresh();
+        }
+    };
+
+    async refresh() {
+        this.isLoading = true;
+        await refreshApex(this.wiredResult);
+        this.isLoading = false;
     }
 
     // Parse the Apex results & add any UI-specific attributes based on field metadata