feat: add refresh button and spinner to relatedLogEntries lwc

jongpie · Jun 25, 2024 · 731e795 · 731e795
1 parent 4d56ecb
commit 731e795
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 13 deletions.
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,8 @@
  ************************************************************************************************/
 
 import { LightningElement, api, track, wire } from 'lwc';
+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 +15,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 +30,7 @@ export default class RelatedLogEntries extends LightningElement {
 
     @api
     handleSearchChange(event) {
+        this.isLoading = true;
         this.search = event.target.value;
     }
 
@@ -38,6 +43,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 +55,13 @@ export default class RelatedLogEntries extends LightningElement {
             /* eslint-disable-next-line no-console */
             console.log(result.error);
         }
+        this.isLoading = false;
+    }
+
+    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