WIP MMCM

src/views/delivery-option-step-3.vue

@@ -1,14 +1,26 @@
 <template>
-  <div class="step_title">Date de livraison des médicaments :</div>
-  <div class="input-group has-validation">
-    <Datepicker v-model="dateDelivery" autoApply @update:modelValue="isErrorDelivery = false" model-type="timestamp"
-                select-text="Choisir" cancel-text="Annuler"
-                monthNameFormat="long" format="dd MMMM yyyy" :minDate="store.minDateForDelivery" :enableTimePicker="false"
-                :disabledWeekDays="[6, 0]" :format-locale="fr" locale="fr-FR"/>
-    <button class="btn btn-primary" @click="gotToNextStep"><i class="fa-regular fa-circle-check fa-fw"></i> Valider
-    </button>
-    <div v-if="isErrorDelivery" class="invalid-feedback d-block text-start">
-      Merci de renseigner la date
+
+  <div class="row">
+    <div class="col-lg-6" v-for="picker in pickerList">
+
+      <div class="step_title">{{ picker.title }}</div>
+      <div class="input-group has-validation">
+        <Datepicker v-model="picker.vModel" autoApply @update:modelValue="picker.error = false" model-type="timestamp"
+                    select-text="Choisir" cancel-text="Annuler"
+                    monthNameFormat="long" format="dd MMMM yyyy" :minDate="picker.minDate"
+                    :enableTimePicker="false"
+                    :disabledWeekDays="[6, 0]" :format-locale="fr" locale="fr-FR"/>
+
+        <div v-if="picker.error" class="invalid-feedback d-block text-start">
+          Merci de renseigner la date
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-12 text-center mt-4">
+      <button class="btn btn-primary" @click="gotToNextStep"><i class="fa-regular fa-circle-check fa-fw"></i> Valider
+      </button>
     </div>
   </div>
 </template>
@@ -16,40 +28,54 @@
 <script>
 import {storeToRefs} from 'pinia'
 import {useMMCMStore} from '../stores/mmcm.js'
-import {ref} from 'vue';
+import {ref, computed, reactive} from 'vue';
 import {add, endOfMonth, endOfYear, startOfMonth, startOfYear, subMonths} from 'date-fns';
 import {fr} from 'date-fns/locale';
 
 export default {
   setup() {
     const store = useMMCMStore()
-    const isErrorCollect = ref(false);
-    const isErrorDelivery = ref(false);
 
     const {dateDelivery, dateCollect} = storeToRefs(store)
 
+    let pickerList = []
+    if (store.needPrescriptionDateCollect) {
+      pickerList.push(reactive({
+        title: 'Date de collect de l\'ordonnance :',
+        vModel: dateCollect,
+        error: false,
+        minDate: store.minDateForCollect,
+      }))
+    }
+
+    pickerList.push(reactive({
+      title: 'Date de livraison des médicaments :',
+      vModel: dateDelivery,
+      error: false,
+      minDate: store.minDateForDelivery,
+    }))
+
+
     return {
-      fr,
-      isErrorCollect,
-      isErrorDelivery,
       dateDelivery,
       dateCollect,
-      store
+      fr,
+      pickerList,
+      store,
     }
   },
   name: "delivery-option-step-3",
   methods: {
     gotToNextStep: function () {
 
-      if (this.dateDelivery !== null) {
-        this.isError = false
+      this.pickerList.forEach(p => {
+        p.error = p.vModel === null;
+      })
+
+      if (this.pickerList.filter(p => p.error).length === 0) {
         this.$router.push({path: '/delivery-option-summary'});
-      } else {
-        this.isError = true
       }
-
     }
-
   }
 }
 </script>