Enhancements to the filter and results

Added ability to disable the search button Split slots for the action buttons - not supposed to have 2 slots with the same name Added ability to specify a search type - for future expansion
OrtooApps · Jan 25, 2022 · 103bfdf · 103bfdf
1 parent 89bffc0
commit 103bfdf
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git a/framework/default/ortoo-core/default/lwc/filterAndResults/__tests__/filterAndResults.test.js b/framework/default/ortoo-core/default/lwc/filterAndResults/__tests__/filterAndResults.test.js
@@ -33,7 +33,8 @@ describe( 'c-filter-and-results', () => {
         .then( () => {
             expect( element.shadowRoot.querySelector( 'slot[name="info"]' ) ).not.toBeNull();
             expect( element.shadowRoot.querySelector( 'slot[name="form"]' ) ).not.toBeNull();
-            expect( element.shadowRoot.querySelector( 'slot[name="action-buttons"]' ) ).not.toBeNull();
+            expect( element.shadowRoot.querySelector( 'slot[name="action-buttons-top"]' ) ).not.toBeNull();
+            expect( element.shadowRoot.querySelector( 'slot[name="action-buttons-bottom"]' ) ).not.toBeNull();
             expect( element.shadowRoot.querySelector( 'slot[name="data"]' ) ).not.toBeNull();
         })
     });
@@ -62,6 +63,30 @@ describe( 'c-filter-and-results', () => {
         })
     });
 
+    it( 'when disableSearchButton is set to true, will disable the search button', () => {
+
+        const element = document.body.querySelector( 'c-filter-and-result' );
+
+        element.disableSearchButton = true;
+
+        return Promise.resolve()
+        .then( () => {
+            expect( element.shadowRoot.querySelector( SEARCH_BUTTON_SELECTOR ).disabled ).toBe( true );
+        });
+    });
+
+    it( 'when disableSearchButton is set to false, will enable the search button', () => {
+
+        const element = document.body.querySelector( 'c-filter-and-result' );
+
+        element.disableSearchButton = false;
+
+        return Promise.resolve()
+        .then( () => {
+            expect( element.shadowRoot.querySelector( SEARCH_BUTTON_SELECTOR ).disabled ).toBe( false );
+        });
+    });
+
     it( 'when showPaginationControls flag is set to true will show pagination controls above and below the data', () => {
 
         const element = document.body.querySelector( 'c-filter-and-result' );

diff --git a/framework/default/ortoo-core/default/lwc/filterAndResults/filterAndResults.html b/framework/default/ortoo-core/default/lwc/filterAndResults/filterAndResults.html
@@ -25,6 +25,7 @@
                             variant="brand"
                             label={labels.searchButton}
                             title={labels.searchButtonTitle}
+                            disabled={disableSearchButton}
                             onclick={handleSearchClicked}
                         ></lightning-button>
 
@@ -40,7 +41,7 @@
                 <lightning-layout class="slds-p-bottom_small">
 
                     <lightning-layout-item>
-                        <slot name="action-buttons"></slot>
+                        <slot name="action-buttons-top"></slot>
                     </lightning-layout-item>
 
                     <lightning-layout-item flexibility="grow"></lightning-layout-item>
@@ -63,7 +64,7 @@
                 <lightning-layout class="slds-p-top_small">
 
                     <lightning-layout-item>
-                        <slot name="action-buttons"></slot>
+                        <slot name="action-buttons-bottom"></slot>
                     </lightning-layout-item>
 
                     <lightning-layout-item flexibility="grow"></lightning-layout-item>

diff --git a/framework/default/ortoo-core/default/lwc/filterAndResults/filterAndResults.js b/framework/default/ortoo-core/default/lwc/filterAndResults/filterAndResults.js
@@ -24,11 +24,15 @@ export default class FilterAndResults extends LightningElement {
 
     @api title;
     @api loading;
+    @api disableSearchButton;
     @api showPaginationControls;
     @api numberOfRecords;
     @api offset;
     @api recordsWindowSize;
 
+    @api searchType;
+
+
     connectedCallback() {
         configureElementIdGenerator( this );
     }