From 3f3b7af42b9352f251b029539616c1820213324a Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 17 Sep 2021 13:09:18 +0200
Subject: [PATCH] AddAddress: adjust Open and Close methods for each step

---
 .../Resources/public/vuejs/Address/App.vue    |   4 +-
 .../Address/components/ActionButtons.vue      |  17 ++-
 .../vuejs/Address/components/AddAddress.vue   | 110 +++++++++++++-----
 .../vuejs/Address/components/DatePane.vue     |   5 +-
 .../vuejs/Address/components/EditPane.vue     |  12 +-
 .../vuejs/Address/components/ShowPane.vue     |  20 +++-
 .../vuejs/Address/components/SuggestPane.vue  |   5 +-
 .../Resources/public/vuejs/Address/index.js   |   2 +-
 .../Resources/views/Address/new.html.twig     |   5 +-
 .../views/Household/address_edit.html.twig    |   1 +
 10 files changed, 132 insertions(+), 49 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
index e4d332289..a1496e7d6 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
@@ -33,8 +33,8 @@ export default {
 
    },
    mounted() {
-      console.log('AddAddress: data context', this.context);
-      console.log('AddAddress: data options', this.options);
+      //console.log('AddAddress: data context', this.context);
+      //console.log('AddAddress: data options', this.options);
    },
    methods: {
       displayErrors() {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
index a0bb66f33..afe059da6 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
@@ -2,19 +2,23 @@
    <ul class="record_actions"
       :class="{ 'sticky-form-buttons': isStickyForm }">
 
+      <!--
       <li v-if="isStickyForm" class="cancel">
-         <a class="btn btn-cancel" v-bind:href="context.backUrl">
+         <a class="btn btn-cancel" @click="resetPane">
             {{ $t('back_to_the_list') }}
          </a>
       </li>
+      -->
 
       <slot name="action"></slot>
 
+      <!--
       <li v-if="isStickyForm">
          <a class="btn btn-save">
             {{ $t('action.save')}}
          </a>
       </li>
+      -->
    </ul>
 </template>
 
@@ -24,7 +28,16 @@ export default {
    props: [ 'options', 'default' ],
    computed: {
       isStickyForm() {
-         return (typeof this.options.stickyActions !== 'undefined') ? this.options.stickyActions : this.default.stickyActions;
+         return (typeof this.options.stickyActions !== 'undefined') ?
+            this.options.stickyActions : this.default.stickyActions;
+      },
+   },
+   methods: {
+      resetPane() {
+         this.flag.suggestPane = false;
+         this.flag.editPane = false;
+         this.flag.datePane = false;
+         this.flag.showPane = true;
       }
    }
 }
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
index 1948535dc..259266c92 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
@@ -12,10 +12,10 @@
    </show-pane>
 
    <!-- step 1 -->
-   <teleport to="body" v-if="InModal">
+   <teleport to="body" v-if="inModal">
       <modal v-if="flag.suggestPane"
          modalDialogClass="modal-dialog-scrollable modal-xl"
-         @close="flag.suggestPane = false">
+         @close="resetPane">
 
          <template v-slot:header>
             <h2 class="modal-title">{{ $t(getTextTitle) }}
@@ -42,9 +42,11 @@
                class="btn btn-update">
                {{ $t('action.edit')}}
             </button>
+            <!--
             <button class="btn btn-save">
                {{ $t('action.save')}}
             </button>
+            -->
          </template>
 
       </modal>
@@ -63,10 +65,10 @@
    </div>
 
    <!-- step 2 -->
-   <teleport to="body" v-if="InModal">
+   <teleport to="body" v-if="inModal">
       <modal v-if="flag.editPane"
          modalDialogClass="modal-dialog-scrollable modal-xl"
-         @close="flag.editPane = false">
+         @close="resetPane">
 
          <template v-slot:header>
             <h2 class="modal-title">{{ $t(getTextTitle) }}
@@ -116,10 +118,10 @@
    </div>
 
    <!-- step 3 -->
-   <teleport to="body" v-if="InModal">
+   <teleport to="body" v-if="inModal">
       <modal v-if="flag.datePane"
              modalDialogClass="modal-dialog-scrollable modal-xl"
-             @close="flag.datePane = false">
+             @close="resetPane">
 
          <template v-slot:header>
             <h2 class="modal-title">{{ $t(getTextTitle) }}
@@ -247,10 +249,24 @@ export default {
       }
    },
    computed: {
-      InModal() {
+      inModal() {
          return (typeof this.options.openPanesInModal !== 'undefined') ?
             this.options.openPanesInModal : this.default.openPanesInModal;
       },
+      useDatePane() {
+         let vFrom = (typeof this.options.useDate !== 'undefined'
+            && typeof this.options.useDate.validFrom !== 'undefined') ?
+            this.options.useDate.validFrom : this.default.useDate.validFrom ;
+         let vTo = (typeof this.options.useDate !== 'undefined'
+            && typeof this.options.useDate.validTo !== 'undefined') ?
+            this.options.useDate.validTo : this.default.useDate.validTo ;
+         return (vFrom || vTo) ? true : false;
+      },
+      hasSuggestions() {
+         // TODO
+         //return addressSuggestions.length > 0
+         return true;
+      },
       getTextTitle() {
          if ( typeof this.options.title !== 'undefined'
             && ( this.options.title.edit !== null
@@ -260,22 +276,23 @@ export default {
          }
          return (this.context.edit) ? this.default.title.edit : this.default.title.create;
       },
-      //context() {
-      //   return this.context;
-      //}
+      bypassFirstStep() {
+         // exception: passing step0 if new address and pane are not in modal
+         return !this.context.edit && !this.inModal && this.flag.editPane === false
+      }
    },
    mounted() {
 
       //console.log('options displayText', this.options.button.displayText);
       //console.log('options bindModal.step1', this.options.bindModal.step1);
       //console.log('options bindModal.step2', this.options.bindModal.step2);
-      console.log('options useDate.validFrom', this.options.useDate.validFrom);
-      console.log('options useDate.validTo', this.options.useDate.validTo);
+      //console.log('options useDate.validFrom', this.options.useDate.validFrom);
+      //console.log('options useDate.validTo', this.options.useDate.validTo);
+      console.log('useDatePane', this.useDatePane);
+
+      //console.log('Mounted now !');
+      this.openShowPane();
 
-      if (!this.step1WithModal) {
-         //console.log('Mounted now !');
-         this.openShowPane();
-      }
    },
    methods: {
 
@@ -283,35 +300,72 @@ export default {
       *  Opening and closing Panes when interacting with buttons
       */
       openShowPane() {
-
          if (this.context.edit) {
+            console.log('getInitialAddress');
             this.getInitialAddress(this.context.addressId);
          }
 
-         // when create new address, start first with editPane !!
-         if ( this.context.edit === false
-            && this.flag.editPane === false
-         ) {
+         if (this.bypassFirstStep) {
+            this.closeShowPane();
             this.openEditPane();
-            this.flag.editPane = true;
 
          } else {
             this.flag.showPane = true;
-            console.log('step1: open the Show Panel');
+            console.log('step0: open the Show Panel');
          }
       },
-
+      closeShowPane() {
+         // Show pane can be closed only when openPanesInModal is false
+         if (!this.inModal) {
+            this.flag.showPane = false;
+            console.log('step0: close the Show Panel');
+         }
+      },
+      openSuggestPane() {
+         this.flag.suggestPane = true;
+         console.log('step1: open the Suggestion Panel');
+      },
+      closeSuggestPane() {
+         this.flag.suggestPane = false;
+         console.log('step1: close the Suggestion Panel');
+      },
       openEditPane() {
-         console.log('step2: open the Edit panel');
+         /*
+         if (!this.context.edit && this.hasSuggestions) {
+            this.openSuggestPane();
+         } else {
+         }
+         */
          this.initForm();
          this.getCountries();
+         this.flag.editPane = true;
+         console.log('step2: open the Edit panel');
       },
-
       closeEditPane() {
-         console.log('step2: close the Edit Panel');
          this.applyChanges();
-         this.flag.showPane = true;
          this.flag.editPane = false;
+         console.log('step2: close the Edit Panel');
+         /*
+         if (!this.context.edit && this.useDatePane) {
+            this.openDatePane();
+         } else {
+         }
+         */
+         this.openShowPane()
+      },
+      openDatePane() {
+         this.flag.datePane = true;
+         console.log('step3: open the Date Panel');
+      },
+      closeDatePane() {
+         this.flag.datePane = false;
+         console.log('step3: close the Date Panel');
+      },
+      resetPane() {
+         this.flag.suggestPane = false;
+         this.flag.editPane = false;
+         this.flag.datePane = false;
+         this.flag.showPane = true;
       },
 
       /*
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
index d91bec958..ed461ffb5 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
@@ -39,7 +39,10 @@
       </div>
    </div>
 
-   <action-buttons v-if="insideModal === false">
+   <action-buttons v-if="insideModal === false"
+      :flag="this.flag"
+      :options="this.options"
+      :default="this.default">
       <template v-slot:action>
          <li>
             <a @click.prevent="$emit('openEditPane')"
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
index 0009df622..16fc335c8 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
@@ -54,21 +54,21 @@
          v-bind:entity="entity">
       </address-more>
 
-      <!-- Not display in modal -->
-      <action-buttons v-if="insideModal === false">
+      <action-buttons v-if="insideModal === false"
+         :flag="this.flag"
+         :options="this.options"
+         :default="this.default">
          <template v-slot:action>
             <li>
                <a class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
                   {{ $t('action.cancel') }}
                </a>
             </li>
-            <!--
             <li>
-               <a class="btn btn-update" @click.prevent="$emit('closeEditPane')">
-                  {{ $t('action.valid_and_see')}}
+               <a class="btn btn-save" @click.prevent="$emit('closeEditPane')">
+                  {{ $t('action.save')}}
                </a>
             </li>
-            -->
          </template>
       </action-buttons>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
index f57340bf0..2738f7775 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
@@ -13,21 +13,29 @@
 
    <address-render-box :address="address"></address-render-box>
 
-   <button @click.prevent="$emit('openEditPane')"
-      class="btn" :class="getClassButton"
-      type="button" name="button" :title="$t(getTextButton)">
-      <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
-   </button>
+   <action-buttons :flag="this.flag" :options="this.options" :default="this.default">
+      <template v-slot:action>
+         <li>
+            <button @click.prevent="$emit('openEditPane')"
+               class="btn" :class="getClassButton"
+               type="button" name="button" :title="$t(getTextButton)">
+               <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+            </button>
+         </li>
+      </template>
+   </action-buttons>
 
 </template>
 
 <script>
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+import ActionButtons from './ActionButtons.vue';
 
 export default {
    name: 'ShowPane',
    components: {
-      AddressRenderBox
+      AddressRenderBox,
+      ActionButtons
    },
    props: [
       'context',
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
index f276c3f96..b3abe5128 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
@@ -15,7 +15,10 @@
 
    suggestions
 
-   <action-buttons v-if="insideModal === false">
+   <action-buttons v-if="insideModal === false"
+      :flag="this.flag"
+      :options="this.options"
+      :default="this.default">
       <template v-slot:action>
          <li>
             <a @click.prevent="$emit('openEditPane')"
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
index 7ecf4847a..f54aaa407 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
@@ -56,5 +56,5 @@ containers.forEach((container) => {
     .component('app', App)
     .mount(container);
 
-    console.log('container dataset', container.dataset);
+    //console.log('container dataset', container.dataset);
 });
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
index 235c0c7b4..21e858615 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
@@ -30,11 +30,12 @@
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'person', id: person.id },
             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
+            useValidFrom: true,
             openPanesInModal: false,
             stickyActions: true,
-            useValidFrom: true,
-            useValidTo: false
         } %}
+        {#
+        #}
 
     {% endblock %}
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig
index 2bfedaee7..49dad3619 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig
@@ -11,6 +11,7 @@
             targetEntity: { name: 'household', id: household.id },
             backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
             openPanesInModal: false,
+            stickyActions: true
         } %}
     </div>