AddAddress: adding useDate.validFrom/validTo options

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

@@ -29,7 +29,6 @@
                v-bind:options="this.options"
                v-bind:default="this.default"
                v-bind:entity="this.entity"
-               v-bind:valid="this.context.valid"
                v-bind:flag="this.flag"
                ref="showAddress">
             </show-address-pane>
@@ -55,7 +54,6 @@
          v-bind:options="this.options"
          v-bind:default="this.default"
          v-bind:entity="this.entity"
-         v-bind:valid="this.context.valid"
          v-bind:flag="this.flag"
          v-bind:insideModal="false"
          @openEditPane="openEditPane"
@@ -153,6 +151,10 @@ export default {
                step1: true,
                step2: true,
             },
+            useDate: {
+               validFrom: false,
+               validTo: false
+            }
          },
          entity: {
             address: {}, // <== loaded and returned
@@ -173,6 +175,10 @@ export default {
                writeNew: {
                   address: false,
                   postcode: false
+               },
+               valid: {
+                  from: new Date(),
+                  to:  new Date()
                }
             },
             addressMap: {
@@ -187,9 +193,6 @@ export default {
    },
    computed: {
       step1WithModal() {
-         //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);
          return (typeof this.options.bindModal !== 'undefined' && typeof this.options.bindModal.step1 !== 'undefined') ?
             this.options.bindModal.step1 : this.default.bindModal.step1;
       },
@@ -236,6 +239,13 @@ export default {
       }
    },
    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);
+
       if (!this.step1WithModal) {
          //console.log('Mounted now !');
          this.openShowPane();

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

@@ -27,6 +27,18 @@
       </div>
    </div>
 
+   <div v-if="showDateTo" class='address-valid date-until'>
+      <h3>{{ $t(getValidToDateText) }}</h3>
+      <div class="input-group mb-3">
+         <span class="input-group-text" id="validTo"><i class="fa fa-fw fa-calendar"></i></span>
+         <input type="date" class="form-control form-control-lg" name="validTo"
+                v-bind:placeholder="$t(getValidToDateText)"
+                v-model="validTo"
+                aria-describedby="validTo"
+         />
+      </div>
+   </div>
+
    <ul v-if="insideModal == false"
       class="record_actions">
       <!--
@@ -64,7 +76,6 @@ export default {
       'default',
       'flag',
       'entity',
-      'valid',
       'errorMsg',
       'insideModal'
    ],
@@ -75,15 +86,26 @@ export default {
       },
       validFrom: {
          set(value) {
-            this.valid.from = ISOToDate(value);
+            this.entity.selected.valid.from = ISOToDate(value);
          },
          get() {
-            return dateToISO(this.valid.from);
+            return dateToISO(this.entity.selected.valid.from);
+         }
+      },
+      validTo: {
+         set(value) {
+            this.entity.selected.valid.to = ISOToDate(value);
+         },
+         get() {
+            return dateToISO(this.entity.selected.valid.from);
          }
       },
       getValidFromDateText() {
          return (this.context.entity.name === 'household') ? 'move_date' : 'validFrom';
       },
+      getValidToDateText() {
+         return 'validTo';
+      },
       getSuccessText() {
          switch (this.context.entity.name) {
             /*
@@ -97,7 +119,10 @@ export default {
          }
       },
       showDateFrom() {
-         return !this.context.edit && !this.options.hideDateFrom;
+         return !this.context.edit && this.options.useDate.validFrom;
+      },
+      showDateTo() {
+         return !this.context.edit && this.options.useDate.validTo;
       }
    }
 };

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

@@ -30,6 +30,7 @@ const addressMessages = {
         postalCode_code: 'Code postal',
         date: "Date de la nouvelle adresse",
         validFrom: "L'adresse est valable à partir du",
+        validTo: "L'adresse est valable jusqu'au",
         back_to_the_list: 'Retour à la liste',
         loading: 'chargement en cours...',
         address_new_success: 'La nouvelle adresse est enregistrée',

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

@@ -20,10 +20,7 @@ containers.forEach((container) => {
                         },
                         edit: container.dataset.mode === 'edit',  //boolean
                         addressId: container.dataset.addressId || null,
-                        backUrl: container.dataset.backUrl || null,
+                        backUrl: container.dataset.backUrl || null
-                        valid: {
-                            from: new Date()
-                        },
                     },
                     options: {
                         /// Options override default.
@@ -46,8 +43,11 @@ containers.forEach((container) => {
                             step1: container.dataset.bindModalStep1 !== 'false',  //boolean, default: true
                             step2: container.dataset.bindModalStep2 !== 'false'   //boolean, default: true
                         },
-                        // Hide ValidFrom Date fields
+                        // Use Date fields
-                        //hideDateFrom: true
+                        useDate: {
+                            validFrom: container.dataset.useValidFrom === 'true',  //boolean, default: false
+                            validTo: container.dataset.useValidTo === 'true'       //boolean, default: false
+                        }
                     }
                 }
             }

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

@@ -58,6 +58,14 @@
     {% if bindModalStep2 is defined and bindModalStep2 != 1 %}
         data-bind-modal-step2="false"
     {% endif %}
+
+    {% if useValidFrom is defined and useValidFrom == 1 %}
+        data-use-valid-from="true"
+    {% endif %}
+
+    {% if useValidTo is defined and useValidTo == 1 %}
+        data-use-valid-to="true"
+    {% endif %}
 ></div>
 
 {{ encore_entry_script_tags('vue_address') }}

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

@@ -92,7 +92,10 @@ export default {
                bindModal: {
                   //step1: false, step2: false
                },
-               hideDateFrom: true
+               // Use Date fields
+               useDate: {
+                  validFrom: true
+               }
             }
          }
       }

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

@@ -195,9 +195,8 @@ export default {
         },
         key: 'household_new',
         options: {
-          hideDateFrom: true,
+          useDate: {
-          bindModal: {
+             validFrom: true
-
           },
           button: {
             text:  {

src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig

@@ -32,6 +32,8 @@
             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
             bindModalStep1: false,
             bindModalStep2: false,
+            useValidFrom: true,
+            useValidTo: false
         } %}
 
     {% endblock %}