Starting to build a modal mode for the view and edit form

OrtooApps · Dec 14, 2021 · 521a494 · 521a494
1 parent b39e23c
commit 521a494
Show file tree

Hide file tree

Showing 5 changed files with 254 additions and 68 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
@@ -9,10 +9,11 @@ describe('c-view-and-edit-form', () => {
         }
     });
 
-    it('When inEditMode, has a save and cancel button, but no edit', () => {
+    it('When visible card and inEditMode, has a save and cancel button, but no edit', () => {
         const element = createElement('c-view-and-edit-form', {
             is: ViewAndEditForm
         });
+        element.visible = true;
         element.inEditMode = true;
         document.body.appendChild(element);
 
@@ -24,12 +25,19 @@ describe('c-view-and-edit-form', () => {
 
         const editButton = element.shadowRoot.querySelector( '[data-name="edit"]' );
         expect( editButton ).toBe( null );
+
+        const additionalViewButtons = element.shadowRoot.querySelector( 'slot[name="additionalViewButtons"' );
+        expect( additionalViewButtons ).toBe( null );
+
+        const additionalEditButtons = element.shadowRoot.querySelector( 'slot[name="additionalEditButtons"' );
+        expect( additionalEditButtons ).not.toBe( null );
     });
 
-    it('When not inEditMode, has an edit button, but no  save or cancel', () => {
+    it('When visible card and not inEditMode, has an edit button, but no  save or cancel', () => {
         const element = createElement('c-view-and-edit-form', {
             is: ViewAndEditForm
         });
+        element.visible = true;
         element.inEditMode = false;
         document.body.appendChild(element);
 
@@ -41,12 +49,19 @@ describe('c-view-and-edit-form', () => {
 
         const editButton = element.shadowRoot.querySelector( '[data-name="edit"]' );
         expect( editButton ).not.toBe( null );
+
+        const additionalViewButtons = element.shadowRoot.querySelector( 'slot[name="additionalViewButtons"' );
+        expect( additionalViewButtons ).not.toBe( null );
+
+        const additionalEditButtons = element.shadowRoot.querySelector( 'slot[name="additionalEditButtons"' );
+        expect( additionalEditButtons ).toBe( null );
     });
 
-    it('When inEditMode, has an editForm slot but no viewForm slot', () => {
+    it('When visible card and inEditMode, has an editForm slot but no viewForm slot', () => {
         const element = createElement('c-view-and-edit-form', {
             is: ViewAndEditForm
         });
+        element.visible = true;
         element.inEditMode = true;
         document.body.appendChild(element);
 
@@ -57,10 +72,11 @@ describe('c-view-and-edit-form', () => {
         expect( editForm ).not.toBe( null );
     });
 
-    it('When not inEditMode, has a viewForm slot but no editForm slot', () => {
+    it('When visible card and not inEditMode, has a viewForm slot but no editForm slot', () => {
         const element = createElement('c-view-and-edit-form', {
             is: ViewAndEditForm
         });
+        element.visible = true;
         element.inEditMode = false;
         document.body.appendChild(element);
 
@@ -70,4 +86,90 @@ describe('c-view-and-edit-form', () => {
         const editForm = element.shadowRoot.querySelector( 'slot[name="editForm"]' );
         expect( editForm ).toBe( null );
     });
+
+// TODO: clicking the buttons...
+
+
+    it('When visible modal and inEditMode, has a save and cancel button, but no edit', () => {
+        const element = createElement('c-view-and-edit-form', {
+            is: ViewAndEditForm
+        });
+        element.visible = true;
+        element.inEditMode = true;
+        element.mode = 'modal';
+        document.body.appendChild(element);
+
+        const saveButton = element.shadowRoot.querySelector( '[data-name="save"]' );
+        expect( saveButton ).not.toBe( null );
+
+        const cancelButton = element.shadowRoot.querySelector( '[data-name="cancel"]' );
+        expect( cancelButton ).not.toBe( null );
+
+        const editButton = element.shadowRoot.querySelector( '[data-name="edit"]' );
+        expect( editButton ).toBe( null );
+
+        const additionalViewButtons = element.shadowRoot.querySelector( 'slot[name="additionalViewButtons"' );
+        expect( additionalViewButtons ).toBe( null );
+
+        const additionalEditButtons = element.shadowRoot.querySelector( 'slot[name="additionalEditButtons"' );
+        expect( additionalEditButtons ).not.toBe( null );
+    });
+
+    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
+        });
+        element.visible = true;
+        element.inEditMode = false;
+        element.mode = 'modal';
+        document.body.appendChild(element);
+
+        const saveButton = element.shadowRoot.querySelector( '[data-name="save"]' );
+        expect( saveButton ).toBe( null );
+
+        const cancelButton = element.shadowRoot.querySelector( '[data-name="cancel"]' );
+        expect( cancelButton ).toBe( null );
+
+        const editButton = element.shadowRoot.querySelector( '[data-name="edit"]' );
+        expect( editButton ).not.toBe( null );
+
+        const additionalViewButtons = element.shadowRoot.querySelector( 'slot[name="additionalViewButtons"' );
+        expect( additionalViewButtons ).not.toBe( null );
+
+        const additionalEditButtons = element.shadowRoot.querySelector( 'slot[name="additionalEditButtons"' );
+        expect( additionalEditButtons ).toBe( null );
+    });
+
+    it('When visible modal and inEditMode, has an editForm slot but no viewForm slot', () => {
+        const element = createElement('c-view-and-edit-form', {
+            is: ViewAndEditForm
+        });
+        element.visible = true;
+        element.inEditMode = true;
+        element.mode = 'modal';
+        document.body.appendChild(element);
+
+        const viewForm = element.shadowRoot.querySelector( 'slot[name="viewForm"]' );
+        expect( viewForm ).toBe( null );
+
+        const editForm = element.shadowRoot.querySelector( 'slot[name="editForm"]' );
+        expect( editForm ).not.toBe( null );
+    });
+
+    it('When visible modal and not inEditMode, has a viewForm slot but no editForm slot', () => {
+        const element = createElement('c-view-and-edit-form', {
+            is: ViewAndEditForm
+        });
+        element.visible = true;
+        element.inEditMode = false;
+        element.mode = 'modal';
+        document.body.appendChild(element);
+
+        const viewForm = element.shadowRoot.querySelector( 'slot[name="viewForm"]' );
+        expect( viewForm ).not.toBe( null );
+
+        const editForm = element.shadowRoot.querySelector( 'slot[name="editForm"]' );
+        expect( editForm ).toBe( null );
+    });
+
 });
diff --git a/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm-card.html b/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm-card.html
@@ -0,0 +1,66 @@
+<template>
+    <template if:true={visible}>
+        <lightning-card if:false={inEditMode}>
+
+            <div slot="title">
+                <slot name="title"></slot>
+            </div>
+
+            <div slot="actions">
+                <lightning-button-group>
+                    <slot name="additionalViewButtons"></slot>
+
+                    <lightning-button
+                        class="slds-m-top_small slds-float_right"
+                        variant="default"
+                        name="edit"
+                        data-name="edit"
+                        label={editButtonLabel}
+                        onclick={handleEditClick}
+                    ></lightning-button>
+                </lightning-button-group>
+            </div>
+
+            <div class="slds-p-around_small">
+                <slot name="viewForm"></slot>
+            </div>
+        </lightning-card>
+
+        <lightning-card if:true={inEditMode}>
+
+            <div slot="title">
+                <slot name="title"></slot>
+            </div>
+
+            <div class="slds-p-around_small">
+                <lightning-messages></lightning-messages>
+
+                <slot name="editForm"></slot>
+            </div>
+
+            <div slot="footer">
+
+                <lightning-button-group>
+
+                    <lightning-button
+                        variant="default"
+                        name="cancel"
+                        data-name="cancel"
+                        label={cancelButtonLabel}
+                        onclick={handleCancelClick}
+                    ></lightning-button>
+
+                    <slot name="additionalEditButtons"></slot>
+
+                    <lightning-button
+                        variant="brand"
+                        name="save"
+                        data-name="save"
+                        label={saveButtonLabel}
+                        onclick={handleSaveClick}
+                    ></lightning-button>
+                </lightning-button-group>
+            </div>
+        </lightning-card>
+    </template>
+</template>
diff --git a/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm-modal.html b/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm-modal.html
@@ -0,0 +1,68 @@
+<template>
+
+    <c-modal
+        visible={visible}
+        oncancel={handleCancelModalClick}
+    >
+    <!-- TODO - new event for Cancel Modal Click-->
+
+        <div slot="title">
+            <slot name="title"></slot>
+        </div>
+
+        <div slot="contents">
+
+            <template if:false={inEditMode}>
+
+                <!-- TODO: where do these go? -->
+                <lightning-button-group>
+                    <slot name="additionalViewButtons"></slot>
+
+                    <lightning-button
+                        class="slds-m-top_small slds-float_right"
+                        variant="default"
+                        name="edit"
+                        data-name="edit"
+                        label={editButtonLabel}
+                        onclick={handleEditClick}
+                    ></lightning-button>
+                </lightning-button-group>
+
+
+                <slot name="viewForm"></slot>
+
+            </template>
+
+            <template if:true={inEditMode}>
+                <slot name="editForm"></slot>
+            </template>
+
+        </div>
+
+        <div slot="footer" if:true={inEditMode}>
+
+            <lightning-button-group>
+
+                <lightning-button
+                    variant="default"
+                    name="cancel"
+                    data-name="cancel"
+                    label={cancelButtonLabel}
+                    onclick={handleCancelClick}
+                ></lightning-button>
+
+                <slot name="additionalEditButtons"></slot>
+
+                <lightning-button
+                    variant="brand"
+                    name="save"
+                    data-name="save"
+                    label={saveButtonLabel}
+                    onclick={handleSaveClick}
+                ></lightning-button>
+            </lightning-button-group>
+        </div>
+
+    </c-modal>
+
+</template>
diff --git a/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm.html b/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm.html