improve addAddress

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue

@@ -27,7 +27,7 @@ export default {
       },
       key() {
          return (this.context.edit) ? 'address_' + this.context.addressId
-            : this.context.entity.name + '_' + this.context.entity.id ;
+            : this.context.target.name + '_' + this.context.target.id ;
       }
    },
    mounted() {
@@ -45,9 +45,7 @@ export default {
          if (this.context.edit) {
 
             // address is already linked, just finish !
-            if (this.options.forceRedirect === true) {
+            this.$refs.addAddress.lastPaneAction();
-               window.location.assign(this.context.backUrl);
-            }
 
          // New created address
          } else {
@@ -85,15 +83,18 @@ export default {
       *  Post new created address to targetEntity
       */
       postAddressTo(payload) {
-         console.log('postAddressTo', payload.entity);
+         console.log('postAddressTo', payload.target);
-         switch (payload.entity) {
+         switch (payload.target) {
             case 'household':
-               postAddressToHousehold(payload.entityId, payload.addressId)
+               postAddressToHousehold(payload.targetId, payload.addressId)
                   .then(household => new Promise((resolve, reject) => {
                      console.log('..toHousehold', household);
                      this.$refs.addAddress.flag.loading = false;
                      this.$refs.addAddress.flag.success = true;
-                     window.location.assign(this.context.backUrl);
+
+                     // finish
+                     this.$refs.addAddress.lastPaneAction();
+
                      resolve();
                   }))
                   .catch((error) => {
@@ -103,12 +104,15 @@ export default {
                ;
                break;
             case 'person':
-               postAddressToPerson(payload.entityId, payload.addressId)
+               postAddressToPerson(payload.targetId, payload.addressId)
                   .then(person => new Promise((resolve, reject) => {
                      console.log('..toPerson', person);
                      this.$refs.addAddress.flag.loading = false;
                      this.$refs.addAddress.flag.success = true;
-                     window.location.assign(this.context.backUrl);
+
+                     // finish
+                     this.$refs.addAddress.lastPaneAction();
+
                      resolve();
                   }))
                   .catch((error) => {

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/api.js

@@ -109,7 +109,7 @@ const patchAddress = (id, body) => {
 * method POST, post Postal Code Object
 * @returns {Promise}
 */
-const postPostalCode = (postalCode) => {
+const postPostalCode = (postalCode) => { //<--
    const url = `/api/1.0/main/postal-code.json?`;
    const body = postalCode;
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue

@@ -243,7 +243,7 @@ export default {
                validTo: false
             },
             forceRedirect: false,
-            onlyButton: false
+            hideAddress: false
          },
          entity: {
             address: {}, // <== loaded and returned
@@ -300,7 +300,6 @@ export default {
          return true;
       },
       displaySuggestions() {
-         console.log('displaySuggestions');
          return !this.context.edit && this.hasSuggestions;
       },
       getTextTitle() {
@@ -314,7 +313,6 @@ export default {
       },
       bypassFirstStep() {
          // exception: passing step0 if new address and pane are not in modal
-         console.log('bypassFirstStep');
          return !this.context.edit && !this.inModal;
       }
    },
@@ -325,9 +323,13 @@ export default {
       //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('useDatePane', this.useDatePane);
+      //console.log('useDatePane', this.useDatePane);
 
       console.log('Mounted now !');
+      if (this.context.edit) {
+         console.log('getInitialAddress');
+         this.getInitialAddress(this.context.addressId);
+      }
       this.openShowPane();
 
    },
@@ -337,11 +339,8 @@ export default {
       *  Opening and closing Panes when interacting with buttons
       */
       openShowPane() {
-         if (this.context.edit) {
-            console.log('getInitialAddress');
-            this.getInitialAddress(this.context.addressId);
-         }
          if (this.flag.editPane === false && this.bypassFirstStep) {
+            console.log('bypassFirstStep');
             this.closeShowPane();
             this.openEditPane();
          } else {
@@ -366,6 +365,7 @@ export default {
       },
       openEditPane() {
          if (this.flag.suggestPane === false && this.displaySuggestions) {
+            console.log('displaySuggestions');
             this.openSuggestPane();
          } else {
             if (this.flag.suggestPane === true) {
@@ -396,11 +396,21 @@ export default {
          console.log('step3: close the Date Panel');
       },
       resetPane() {
+         console.log('resetPane');
          this.flag.suggestPane = false;
          this.flag.editPane = false;
          this.flag.datePane = false;
          this.openShowPane();
       },
+      lastPaneAction() {
+         if (this.options.forceRedirect === true) {
+            console.log("redirect to backUrl");
+            window.location.assign(this.context.backUrl);
+         } else {
+            console.log("don't redirect");
+            this.resetPane();
+         }
+      },
 
       /*
       *  Async Fetch datas
@@ -492,6 +502,7 @@ export default {
 
          this.entity.selected.writeNew.address = this.context.edit;
          this.entity.selected.writeNew.postcode = this.context.edit;
+         console.log('!! just set writeNew.postcode to', this.entity.selected.writeNew.postcode);
       },
 
       /*
@@ -501,6 +512,8 @@ export default {
       */
       applyChanges()
       {
+         console.log('apply changes');
+
          let newAddress = {
             'isNoAddress': this.entity.selected.isNoAddress,
             'street': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.street,
@@ -525,22 +538,22 @@ export default {
             newPostcode = Object.assign(newPostcode, {
                'country': {'id': this.entity.selected.country.id },
             });
+            console.log('writeNew postcode is true! newPostcode: ', newPostcode);
             newAddress = Object.assign(newAddress, {
                'newPostcode': newPostcode
             });
          }
 
-         console.log('apply changes');
+         if (!this.context.edit) {
-         if (this.context.edit) {
+            this.addNewAddress(newAddress)
+               .then(payload => this.closePaneAndCallbackSubmit(payload));
+
+         } else {
             this.updateAddress({
                addressId: this.context.addressId,
                newAddress: newAddress
             })
             .then(payload => this.closePaneAndCallbackSubmit(payload));
-
-         } else {
-            this.addNewAddress(newAddress)
-            .then(payload => this.closePaneAndCallbackSubmit(payload));
          }
       },
 
@@ -556,7 +569,7 @@ export default {
          if ('newPostcode' in payload) {
 
             let postcodeBody = payload.newPostcode;
-            if (this.context.entity.name === 'person') {
+            if (this.context.target.name === 'person') { // !!! maintain here ?
                postcodeBody = Object.assign(postcodeBody, {'origin': 3});
             }
             return postPostalCode(postcodeBody)
@@ -578,8 +591,8 @@ export default {
                this.flag.loading = false;
                this.flag.success = true;
                resolve({
-                  entity: this.context.entity.name,
+                  target: this.context.target.name,
-                  entityId: this.context.entity.id,
+                  targetId: this.context.target.id,
                   addressId: this.entity.address.address_id
                   }
                );
@@ -599,14 +612,16 @@ export default {
          this.flag.loading = true;
 
          // TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
-
+         // BUG réécrit un postcode à chaque édition !
          if ('newPostcode' in payload.newAddress) {
+
             let postcodeBody = payload.newAddress.newPostcode;
             postcodeBody = Object.assign(postcodeBody, {'origin': 3});
 
+            console.log('juste before post new postcode', postcodeBody);
             return postPostalCode(postcodeBody)
                .then(postalCode => {
-                  console.log('create new postcode', postalCode.id);
+                  console.log('new postcode created', postalCode.id);
                   payload.newAddress.postcode = {'id': postalCode.id };
                   return this.patchExistingAddress(payload);
                });
@@ -624,8 +639,8 @@ export default {
                   this.flag.loading = false;
                   this.flag.success = true;
                   return resolve({
-                     entity: this.context.entity.name,
+                     target: this.context.target.name,
-                     entityId: this.context.entity.id,
+                     targetId: this.context.target.id,
                      addressId: this.entity.address.address_id
                   });
                })
@@ -642,10 +657,11 @@ export default {
       */
       closePaneAndCallbackSubmit(payload)
       {
-         console.log('close pane and call parent callback method', payload);
 
-         //this.initForm();
+         this.initForm();
-         this.flag.showPane = false;
+         this.resetPane();
+
+         console.log('will call parent callback method', payload);
 
          // callback props method from parent
          this.addressChangedCallback(payload);
@@ -662,4 +678,7 @@ div.entity-address {
       right: 0; top: -55px;
    }
 }
+h4.h3 {
+   font-weight: bold;
+}
 </style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="my-1">
-      <label class="col-form-label" for="citySelector">{{ $t('city') }}</label>
+      <label class="col-form-label">{{ $t('city') }}</label>
       <VueMultiselect
          id="citySelector"
          v-model="value"
@@ -25,7 +25,7 @@
          <div class="form-floating">
             <input class="form-control"
                type="text"
-               name="code"
+               id="code"
                :placeholder="$t('postalCode_code')"
                v-model="code"/>
             <label for="code">{{ $t('postalCode_code') }}</label>
@@ -35,7 +35,7 @@
          <div class="form-floating">
             <input class="form-control"
                type="text"
-               name="name"
+               id="name"
                :placeholder="$t('postalCode_name')"
                v-model="name"/>
             <label for="name">{{ $t('postalCode_name') }}</label>
@@ -87,6 +87,9 @@ export default {
          }
       },
    },
+   mounted() {
+      console.log('writeNew.postcode', this.entity.selected.writeNew.postcode, 'in mounted');
+   },
    methods: {
       transName(value) {
          return (value.code && value.name) ? `${value.code}-${value.name}` : '';
@@ -96,6 +99,7 @@ export default {
          this.entity.selected.postcode.name = value.name;
          this.entity.selected.postcode.code = value.code;
          this.entity.selected.writeNew.postcode = false;
+         console.log('writeNew.postcode false, in selectCity');
          this.$emit('getReferenceAddresses', value);
          this.focusOnAddress();
       },
@@ -110,6 +114,7 @@ export default {
             this.entity.selected.postcode.name = city.name;
             this.entity.selected.postcode.code = city.code;
             this.entity.selected.writeNew.postcode = true;
+            console.log('writeNew.postcode true, in listenInputSearch');
          }
       },
       splitCity(city) {
@@ -142,6 +147,7 @@ export default {
       addPostcode() {
          console.log('addPostcode: pass here ?? never, it seems');
          this.entity.selected.writeNew.postcode = true;
+         console.log('writeNew.postcode true, in addPostcode');
       }
    }
 };

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue

@@ -96,7 +96,7 @@ export default {
          }
       },
       getValidFromDateText() {
-         return (this.context.entity.name === 'household') ? 'move_date' : 'validFrom';
+         return (this.context.target.name === 'household') ? 'move_date' : 'validFrom';
       },
       getValidToDateText() {
          return 'validTo';

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue

@@ -145,11 +145,7 @@ export default {
 </script>
 
 <style lang="scss">
-
 div.address-form {
-   h4.h3 {
-      font-weight: bold;
-   }
    div#address_map {
       height: 400px;
       width: 100%;

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue

@@ -11,7 +11,13 @@
       {{ $t(getSuccessText) }}
    </div>
 
-   <address-render-box v-if="!onlyButton" :address="address"></address-render-box>
+   <div v-if="noAddressWithStickyActions" class="mt-5">
+      <p class="chill-no-data-statement">
+         {{ $t('not_yet_address') }}
+      </p>
+   </div>
+
+   <address-render-box v-if="!hideAddress" :address="address"></address-render-box>
 
    <action-buttons
       :options="this.options"
@@ -72,7 +78,7 @@ export default {
          return (this.context.edit) ? this.defaultz.button.text.edit : this.defaultz.button.text.create;
       },
       getSuccessText() {
-         switch (this.context.entity.name) {
+         switch (this.context.target.name) {
             /*
             case 'household':
                return (this.context.edit) ? 'household_address_edit_success' : 'household_address_move_success';
@@ -83,9 +89,12 @@ export default {
                return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
          }
       },
-      onlyButton() {
+      hideAddress() {
-         return (typeof this.options.onlyButton !== 'undefined') ?
+         return (typeof this.options.hideAddress !== 'undefined') ?
-            this.options.onlyButton : this.defaultz.onlyButton;
+            this.options.hideAddress : this.defaultz.hideAddress;
+      },
+      noAddressWithStickyActions() {
+         return !this.context.edit && !this.address.id && this.options.stickyActions;
       }
    }
 };

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue

@@ -9,7 +9,33 @@
 
    <div v-if="flag.success" class="alert alert-success">{{ $t(getSuccessText) }}</div>
 
-   <h3>{{ $t('address_suggestions') }}</h3>
+   <h4 class="h3">{{ $t('address_suggestions') }}</h4>
+
+   <div class="flex-table AddressSuggestionList">
+      <div class="item-bloc">
+         <div class="float-button bottom">
+            <div class="box">
+               <div class="action">
+                  <ul class="record_actions">
+                     <li>
+                        <button class="btn btn-sm btn-choose">
+                           {{ $t('use_this_address') }}
+                        </button>
+                     </li>
+                  </ul>
+               </div>
+               <ul class="list-content fa-ul">
+                  <li>
+                     <i class="fa fa-li fa-map-marker"></i>
+                     <!--
+                     <address-render-box></address-render-box>
+                     -->
+                  </li>
+               </ul>
+            </div>
+         </div>
+      </div>
+   </div>
 
    <action-buttons v-if="insideModal === false"
       :options="this.options"

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/i18n.js

@@ -36,6 +36,8 @@ const addressMessages = {
         address_suggestions: "Suggestion d'adresses",
         address_new_success: 'La nouvelle adresse est enregistrée',
         address_edit_success: 'L\'adresse a été mise à jour',
+        not_yet_address: "Il n'y a pas encore d'adresse. Cliquez sur '+ Créer une adresse'",
+        use_this_address: "Utiliser cette adresse",
 
         // person specific
         add_an_address_to_person: 'Ajouter l\'adresse à la personne',

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js

@@ -14,9 +14,9 @@ containers.forEach((container) => {
             return {
                 addAddress: {
                     context: {
-                        entity: {
+                        target: {
-                            name: container.dataset.targetEntityName,
+                            name: container.dataset.targetName,
-                            id: container.dataset.targetEntityId
+                            id: container.dataset.targetId
                         },
                         edit: container.dataset.mode === 'edit',  //boolean
                         addressId: container.dataset.addressId || null,
@@ -50,7 +50,7 @@ containers.forEach((container) => {
                         /// Force redirection after last step (cfr. backUrl)
                         forceRedirect: container.dataset.forceRedirect === 'true',  //boolean, default: false
                         /// Don't display show renderbox Address
-                        onlyButton: container.dataset.onlyButton === 'true'         //boolean, default: false
+                        //hideAddress: false         //boolean, default: false
                     }
                 }
             }

src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig

@@ -22,8 +22,8 @@
 #}
 <div class="address-container"
 
-     data-target-entity-name="{{ targetEntity.name|e('html_attr') }}"
+     data-target-name="{{ targetEntity.name|e('html_attr') }}"
-     data-target-entity-id="{{ targetEntity.id|e('html_attr') }}"
+     data-target-id="{{ targetEntity.id|e('html_attr') }}"
 
     {% if 'edit' in app.request.get('_route') %}
         data-mode="edit"

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ButtonLocation.vue

@@ -54,8 +54,8 @@ export default {
       assignAddress() {
         //console.log('assignAddress id', this.person.current_household_address);
          let payload = {
-            entity: this.context.entity.name,
+            target: this.context.target.name,
-            entityId: this.context.entity.id,
+            targetId: this.context.target.id,
             locationStatusTo: 'person',
             personId: this.person.id
          };

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue

@@ -94,7 +94,7 @@ export default {
                useDate: {
                   validFrom: true
                },
-               onlyButton: true
+               hideAddress: true
             }
          }
       }
@@ -120,7 +120,7 @@ export default {
    methods: {
       initAddressContext() {
          let context = {
-            entity: {
+            target: {
                name: this.accompanyingCourse.type,
                id: this.accompanyingCourse.id
             },
@@ -136,8 +136,8 @@ export default {
       removeAddress() {
         //console.log('remove address');
          let payload = {
-            entity: this.context.entity.name,
+            target: this.context.target.name,
-            entityId: this.context.entity.id,
+            targetId: this.context.target.id,
             locationStatusTo: 'none'
          };
          this.$store.dispatch('updateLocation', payload);

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js

@@ -261,7 +261,7 @@ let initPromise = getAccompanyingCourse(id)
             },
             updateLocation({ commit }, payload) {
               //console.log('## action: updateLocation', payload.locationStatusTo);
-               let body = { 'type': payload.entity, 'id': payload.entityId };
+               let body = { 'type': payload.target, 'id': payload.targetId };
                let location = {};
                if (payload.locationStatusTo === 'person') { // patch for person address (don't remove addressLocation)
                   location = { 'personLocation': { 'type': 'person', 'id': payload.personId }};
@@ -273,7 +273,7 @@ let initPromise = getAccompanyingCourse(id)
                   location = { 'personLocation': null };
                }
                Object.assign(body, location);
-               patchAccompanyingCourse(payload.entityId, body)
+               patchAccompanyingCourse(payload.targetId, body)
                   .then(accompanyingCourse => new Promise((resolve, reject) => {
                      commit('updateLocation', {
                         location: accompanyingCourse.location,

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue

@@ -186,8 +186,8 @@ export default {
     return {
       addAddress: {
         context: {
-          entity: {
+          target: {
-            type: 'household_create',
+            name: 'household_create',
             id: 0
           },
           edit: false,

src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig

@@ -9,10 +9,10 @@
         {# include vue_address component #}
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'household', id: household.id },
-            backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
+            stickyActions: true
         } %}
         {#
-            stickyActions: true
+            backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
             openPanesInModal: false,
         #}
     </div>

src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig

@@ -10,9 +10,11 @@
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'household', id: household.id },
             backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
-            openPanesInModal: false,
+            stickyActions: true,
-            stickyActions: true
         } %}
+        {#
+            openPanesInModal: false,
+        #}
     </div>
 
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig

@@ -18,13 +18,15 @@
                 {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
                     targetEntity: { name: 'household', id: household.id },
                     backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
-                    forceRedirect: true,
                     mode: 'new',
                     useValidFrom: true,
                     buttonSize: 'btn-lg',
                     buttonText: 'Move household',
                     modalTitle: 'Move household',
+                    forceRedirect: true,
                 } %}
+                {#
+                #}
 
             </li>
         </ul>