WIP MMCM

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

@@ -1,24 +1,36 @@
 <template>
   <div class="card">
-    <div class="card-header">Date</div>
+    <div class="card-header"><h4>Date de livraison des médicaments :</h4></div>
     <div class="card-body">
-      <Datepicker v-model="dateDelivery" :minDate="tomorrow" :enableTimePicker="false" :disabledWeekDays="[6, 0]" locale="fr-FR"/>
-      <p class="mt-4"><button class="btn btn-primary" @click="$router.push({path: '/delivery-option-summary'});">Valider</button></p>
+
+      <div class="input-group has-validation">
+        <Datepicker v-model="dateDelivery" autoApply @update:modelValue="isError = false"  model-type="timestamp" select-text="Choisir" cancel-text="Annuler"
+                    monthNameFormat="long" format="dd MMMM yyyy" :minDate="tomorrow" :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="isError" class="invalid-feedback d-block text-start">
+          Merci de renseigner la date
+        </div>
+      </div>
     </div>
   </div>
+
 </template>
 
 <script>
-import { storeToRefs } from 'pinia'
+import {storeToRefs} from 'pinia'
 import {useMMCMStore} from '../stores/mmcm.js'
 import {ref} 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 isError = ref(false);
 
-    const { dateDelivery } = storeToRefs(store)
+    const {dateDelivery} = storeToRefs(store)
 
     const tomorrow =
         add(new Date(), {
@@ -38,6 +50,8 @@ export default {
     ]);
 
     return {
+      fr,
+      isError,
       tomorrow,
       dateDelivery,
       presetRanges,
@@ -45,7 +59,19 @@ export default {
     }
   },
   name: "delivery-option-step-3",
-  methods: {}
+  methods: {
+    gotToNextStep: function () {
+
+      if (this.dateDelivery !== null) {
+        this.isError = false
+        this.$router.push({path: '/delivery-option-summary'});
+      } else {
+        this.isError = true
+      }
+
+    }
+
+  }
 }
 </script>