adding options to custom button, and improve stepWithModal options

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

@@ -4,11 +4,6 @@
       class="alert alert-danger my-2">
       {{ error }}
    </div>
-
-   <pre v-if="addAddress.result">
-      {{ addAddress.result.address_id }}
-   </pre>
-
    <add-address
       v-bind:key="addAddress.type"
       v-bind:context="context"
@@ -39,13 +34,21 @@ export default {
                /// Options override default
 
                /// First button text if create or edit address (trans chain, see i18n)
-               //textButton: { create: 'bim', edit: 'bam' },
+               button: {
+                  //text:  { create: 'bim', edit: 'bam' },
+                  type: 'btn-update',
+                  size: 'btn-sm',
+                  display: false
+               },
 
                /// Modal title text if create or edit address (trans chain, see i18n)
                //title: { create: 'boum', edit: 'pan' },
 
                /// Display each step in page or Modal
-               //bindModal: { step1: false, step2: false } //TODO true-false must not be possible
+               bindModal: {
+                  step1: false,
+                  step2: false
+               }
             },
             type: 'person',
             result: null // <== returned from addAddress component

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

@@ -2,10 +2,12 @@
 
    <button v-if="step1WithModal"
       @click="openShowPane"
-      class="btn btn-create mt-4" type="button" name="button">
-      {{ $t(getTextButton) }}
+      class="btn mt-4" :class="getClassButton"
+      type="button" name="button" :title="$t(getTextButton)">
+      <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
    </button>
 
+   <!-- step 1 -->
    <teleport to="body" v-if="step1WithModal">
       <modal v-if="flag.showPane"
          modalDialogClass="modal-dialog-scrollable modal-xl"
@@ -58,6 +60,7 @@
       </show-address>
    </div>
 
+   <!-- step 2 -->
    <teleport to="body" v-if="step2WithModal">
       <modal v-if="flag.editPane"
          modalDialogClass="modal-dialog-scrollable modal-xl"
@@ -139,7 +142,11 @@ export default {
             success: false
          },
          default: {
-            textButton: { create: 'add_an_address_title', edit: 'edit_address' },
+            button: {
+               text: { create: 'add_an_address_title', edit: 'edit_address' },
+               type: 'btn-create',
+               display: true
+            },
             title: { create: 'add_an_address_title', edit: 'edit_address' },
             bindModal: {
                step1: true,
@@ -182,28 +189,42 @@ export default {
       }
    },
    computed: {
-
-      // TODO improve: props options must override data default
       step1WithModal() {
-         return (this.options.bindModal) ? this.options.bindModal.step1 : this.default.bindModal.step1;
+         return (this.options.bindModal && typeof this.options.bindModal.step1 !== 'undefined') ?
+            this.options.bindModal.step1 : this.default.bindModal.step1;
       },
       step2WithModal() {
-         return (this.options.bindModal) ? this.options.bindModal.step2 : this.default.bindModal.step2;
+         let step2 = (this.options.bindModal && typeof this.options.bindModal.step2 !== 'undefined') ?
+            this.options.bindModal.step2 : this.default.bindModal.step2;
+
+         if (step2 === false && this.step1WithModal === true) {
+            console.log("step2 must open in a Modal");
+            return true;
+         }
+         return step2;
       },
 
-      getTextButton() {
-         if (this.options.textButton) {
-            return (this.context.edit) ? this.options.textButton.edit : this.options.textButton.create;
-         }
-         return (this.context.edit) ? this.default.textButton.edit : this.default.textButton.create;
-      },
       getTextTitle() {
          if (this.options.title) {
             return (this.context.edit) ? this.options.title.edit : this.options.title.create;
          }
          return (this.context.edit) ? this.default.title.edit : this.default.title.create;
+      },
+      getTextButton() {
+         if (this.options.button && this.options.button.text) {
+            return (this.context.edit) ? this.options.button.text.edit : this.options.button.text.create;
+         }
+         return (this.context.edit) ? this.default.button.text.edit : this.default.button.text.create;
+      },
+      getClassButton() {
+         let size = (this.options.button && this.options.button.size) ? this.options.button.size : '';
+         let type = (this.options.button && this.options.button.type) ? this.options.button.type : this.default.button.type;
+         return size ? size + ' ' + type : type;
+      },
+      displayTextButton() {
+         return (typeof this.options.button !== 'undefined' && typeof this.options.button.display !== 'undefined') ?
+            this.options.button.display : this.default.button.display;
       }
-
    },
    mounted() {
       if (!this.step1WithModal) {

src/Bundle/ChillPersonBundle/translations/messages.fr.yml

@@ -208,6 +208,7 @@ The address has been successfully updated: L'adresse a été mise à jour avec s
 Update address for %name%: Mettre à jour une adresse pour %name%
 Modify address for %name%: Modifier une adresse pour %name%
 Edit an address: Modifier une adresse
+Edit address: Modifier l'adresse
 Addresses history for %name%: Historique des adresses de %name%
 Addresses history: Historique des adresses
 New address : Nouvelle adresse