Hide the empty footer on the modal version of the view form

OrtooApps · Dec 14, 2021 · 03cbe45 · 03cbe45
1 parent 9c285b0
commit 03cbe45
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/framework/default/ortoo-core/default/lwc/viewAndEditForm/__tests__/viewAndEditForm.test.js b/framework/default/ortoo-core/default/lwc/viewAndEditForm/__tests__/viewAndEditForm.test.js
@@ -87,8 +87,8 @@ describe('c-view-and-edit-form', () => {
         expect( editForm ).toBe( null );
     });
 
-// TODO: clicking the buttons...
-
+    // TODO: clicking the buttons...
+    // TODO: clicking the modal cancel...
 
     it('When visible modal and inEditMode, has a save and cancel button, but no edit', () => {
         const element = createElement('c-view-and-edit-form', {
@@ -113,9 +113,13 @@ describe('c-view-and-edit-form', () => {
 
         const additionalEditButtons = element.shadowRoot.querySelector( 'slot[name="additionalEditButtons"' );
         expect( additionalEditButtons ).not.toBe( null );
+
+        const modalFooter = element.shadowRoot.querySelector( '[slot="footer"]' );
+        expect( modalFooter ).not.toBe( null );
+
     });
 
-    it('When visible modal and not inEditMode, has an edit button, but no  save or cancel', () => {
+    it('When visible modal and not inEditMode, has an edit button, but no save or cancel', () => {
         const element = createElement('c-view-and-edit-form', {
             is: ViewAndEditForm
         });
@@ -138,6 +142,9 @@ describe('c-view-and-edit-form', () => {
 
         const additionalEditButtons = element.shadowRoot.querySelector( 'slot[name="additionalEditButtons"' );
         expect( additionalEditButtons ).toBe( null );
+
+        const modalFooter = element.shadowRoot.querySelector( '[slot="footer"]' );
+        expect( modalFooter ).toBe( null );
     });
 
     it('When visible modal and inEditMode, has an editForm slot but no viewForm slot', () => {

diff --git a/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm-modal.html b/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm-modal.html
@@ -3,8 +3,8 @@
     <c-modal
         visible={visible}
         oncancel={handleCancelModalClick}
+        hide-footer={hideModalFooter}
     >
-    <!-- TODO - new event for Cancel Modal Click-->
 
         <div slot="title">
             <slot name="title"></slot>
@@ -28,7 +28,6 @@
                     ></lightning-button>
                 </lightning-button-group>
 
-
                 <slot name="viewForm"></slot>
 
             </template>

diff --git a/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm.js b/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm.js
@@ -27,6 +27,10 @@ export default class ViewAndEditForm extends LightningElement {
 
     @api displayDensity;
 
+    get hideModalFooter() {
+        return ! this.inEditMode;
+    }
+
     render() {
         return templates[ this.mode ];
     }
@@ -45,4 +49,9 @@ export default class ViewAndEditForm extends LightningElement {
         const newEvent = new CustomEvent( 'cancel' );
         this.dispatchEvent( newEvent );
     }
+
+    handleCancelModalClick( event ) {
+        const newEvent = new CustomEvent( 'cancelModal' );
+        this.dispatchEvent( newEvent );
+    }
 }