From 03cbe45b06a1550f4e579b9e8dc842c8ee3d63ef Mon Sep 17 00:00:00 2001
From: Robert Baillie <robert.baillie@ortooapps.com>
Date: Tue, 14 Dec 2021 16:09:11 +0000
Subject: [PATCH] Hide the empty footer on the modal version of the view form

---
 .../__tests__/viewAndEditForm.test.js               | 13 ++++++++++---
 .../lwc/viewAndEditForm/viewAndEditForm-modal.html  |  3 +--
 .../default/lwc/viewAndEditForm/viewAndEditForm.js  |  9 +++++++++
 3 files changed, 20 insertions(+), 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
index ad85efb1524..5cb08c9282a 100644
--- 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
index b42f4d447ec..aa2d5a76026 100644
--- 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
index 96603a7f988..b99cf6ac3e8 100644
--- 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 );
+    }
 }
\ No newline at end of file