WIP MMCM

2022-11-25 17:40:02 +01:00
parent bb0f6cb030
commit df00483087
3 changed files with 83 additions and 25 deletions
--- a/src/stores/mmcm.js
+++ b/src/stores/mmcm.js
@@ -19,7 +19,6 @@ let date = {collectExpress: null, deliveryExpress: null, collectFacteur: null, d
 const currentDay = format(today, 'e')
 //const isWeekEnd = (currentDay === '7' || currentDay === '8')

-
 if (format(today, 'HH') > 16) {
    date.collectExpress = date.deliveryExpress = tomorrow
 } else {
@@ -43,7 +42,7 @@ if (currentDay === '5') // jeudi
        days: 4
    })

-    if (format(today, 'HH') > 17) {
+    if (format(today, 'HH') > 16) {
        date.collectExpress = date.deliveryExpress = add(today, {
            days: 3
        })
@@ -66,7 +65,6 @@ if (currentDay === '5') // jeudi
    date.collectExpress = date.deliveryExpress = tomorrow
 }

-
 const timestampConverter = (digit13) => digit13 / 1000

 export const useMMCMStore = defineStore('counter', {
@@ -82,7 +80,7 @@ export const useMMCMStore = defineStore('counter', {
        dateCollect: null,
        methodDelivery: 'Main propre',
        methodCollect: 'Main propre',
-        timeSlot : '09h30-11h00',
+        timeSlot : null,
    }),
    getters: {
        fullAddress: (state) => (state.street !== null) ? state.street + ' ' + state.zipCode + ' ' + state.city : null,
@@ -90,7 +88,7 @@ export const useMMCMStore = defineStore('counter', {
        deliveryMethodCode: (state) => state.productList.filter(p => p.id === state.idProduct)[0].ref,
        dateDeliveryString: (state) => new Date(state.dateDelivery).toLocaleDateString("fr-FR"),
        dateCollectString: (state) => new Date(state.dateCollect).toLocaleDateString("fr-FR"),
-        displayTimeSlot: (state) => (state.productList.filter(p => p.id === state.idProduct)[0].ref === 'MMCM_EXPRESS') ? 'entre ' +state.timeSlot : 'entre 09h00-17h00',
+        displayTimeSlot: (state) => (state.productList.filter(p => p.id === state.idProduct)[0].ref === 'MMCM_EXPRESS') ? state.timeSlot : '09h00-17h00',
        minDateForDelivery: (state) => (state.productList.filter(p => p.id === state.idProduct)[0].ref === 'MMCM_EXPRESS') ? date.deliveryExpress : date.deliveryFacteur,
        minDateForCollect: (state) => (state.productList.filter(p => p.id === state.idProduct)[0].ref === 'MMCM_EXPRESS') ? date.collectExpress : date.collectFacteur,
        needPrescriptionDateCollect: (state) => !!(state.productList.filter(p => p.id === state.idProduct)[0].ref === 'MMCM_FACTEUR' && state.withPrescription),
@@ -157,6 +155,9 @@ export const useMMCMStore = defineStore('counter', {
        },
        setTimeSlot(timeSlot) {
            this.timeSlot = timeSlot
+        },
+        setDateCollect(dateCollect){
+            this.dateCollect = dateCollect
        }
    },
 })
--- a/src/views/delivery-option-step-3.vue
+++ b/src/views/delivery-option-step-3.vue
@@ -18,15 +18,17 @@

      <div v-if="store.deliveryMethodCode === 'MMCM_FACTEUR'">
        <div class="form-check mt-4">
-          <input v-model="picker.method" class="form-check-input" type="radio" value="Main propre" :name="'method'+picker.id" :id="'method'+picker.id">
+          <input v-model="picker.method" class="form-check-input" type="radio" value="Main propre"
+                 :name="'method'+picker.id" :id="'method'+picker.id">
          <label class="form-check-label" :for="'method'+picker.id">
-            {{picker.methodLabel}} en main propre
+            {{ picker.methodLabel }} en main propre
          </label>
        </div>
        <div class="form-check">
-          <input v-model="picker.method" class="form-check-input" type="radio" value="Boites aux lettres" :name="'method'+picker.id" :id="'method'+picker.id">
+          <input v-model="picker.method" class="form-check-input" type="radio" value="Boites aux lettres"
+                 :name="'method'+picker.id" :id="'method'+picker.id">
          <label class="form-check-label" :for="'method'+picker.id">
-           {{picker.methodLabel}} en boîte aux lettres <span class="text-danger">*</span>
+            {{ picker.methodLabel }} en boîte aux lettres <span class="text-danger">*</span>
          </label>
        </div>
      </div>
@@ -35,19 +37,26 @@
    </div>


-    <div class="col-lg-6"  v-if="store.deliveryMethodCode === 'MMCM_EXPRESS'">
+    <div class="col-lg-6" v-if="store.deliveryMethodCode === 'MMCM_EXPRESS'">
      <div class="step_title">Créneau horaire :</div>

-      <div class="form-check mt-4" v-for="(slot, i) in timeSlotList">
-        <input v-model="timeSlot" class="form-check-input" type="radio" :value="slot" name="time-slot" :id="'time-slot'+i" required>
+      <div class="form-check mt-4" v-for="(slot, i) in timeSlotList" v-if="timeSlotList.length >0">
+        <input v-model="timeSlot" @click="timeSlotError = false" class="form-check-input" type="radio" :value="slot.label"
+               name="time-slot" :id="'time-slot'+i" required>
        <label class="form-check-label" :for="'time-slot'+i">
-          {{slot}}
+          {{ slot.label }}
        </label>
      </div>
+      <div v-else class="alert alert-warning">Nous sommes désolé il n'y a plus de créneau disponible pour cette date</div>

-
+      <div v-if="timeSlotError" class="invalid-feedback d-block text-start">
+        Merci de renseigner la creneau horaire
      </div>

+
+
+    </div>
+
  </div>

  <div class="row">
@@ -58,7 +67,8 @@
  </div>
  <div v-if="store.deliveryMethodCode === 'MMCM_FACTEUR'">
    <small>
-      <br/><br/><span class="text-danger">*</span> L'utilisation d'une boîte aux lettres normalisée est idéale pour ce service.<br/>
+      <br/><br/><span class="text-danger">*</span> L'utilisation d'une boîte aux lettres normalisée est idéale pour ce
+      service.<br/>
      Dimensions d'une boîte aux lettres normalisée : hauteur : 26 cm, largeur : 26 cm, profondeur : 34 cm.<br/>
      Si vous avez déjà reçu un colis dans votre boîte aux lettres, c'est sûr, le facteur pourra l'utiliser.
    </small>
@@ -84,8 +94,8 @@ export default {
        id: 1,
        title: 'Date de collecte de l\'ordonnance :',
        vModel: dateCollect,
-        method : methodCollect,
-        methodLabel : 'Collecte des documents de santé',
+        method: methodCollect,
+        methodLabel: 'Collecte des documents de santé',
        error: false,
        minDate: store.minDateForCollect,
      }))
@@ -96,16 +106,17 @@ export default {
      title: 'Date de livraison des médicaments :',
      vModel: dateDelivery,
      error: false,
-      method : methodDelivery,
-      methodLabel : 'Livraison',
+      method: methodDelivery,
+      methodLabel: 'Livraison',
      minDate: (store.needPrescriptionDateCollect) ? store.minDateForDelivery : store.minDateForCollect,
    }))

-    const timeSlotList = ['09h30-11h00', '11h00-12h30', ' 15h30-17h00', '17h00-18h30']
+
+    const timeSlotError = ref(false)

    return {
-      timeSlotList,
      timeSlot,
+      timeSlotError,
      dateDelivery,
      dateCollect,
      fr,
@@ -114,6 +125,42 @@ export default {
    }
  },
  name: "delivery-option-step-3",
+  computed: {
+    timeSlotList: function () {
+
+      const today = new Date();
+
+      let checkDate
+
+      if (this.dateDelivery === null) {
+        checkDate = new Date(this.store.minDateForDelivery)
+      }
+      else{
+        checkDate = new Date(this.dateDelivery)
+      }
+
+      const timeLimit = [{
+        label: '09h30-11h00',
+        start: new Date(checkDate.getFullYear(), checkDate.getMonth(), checkDate.getDate(), 9, 30, 0),
+      },
+        {
+          label: '11h00-12h30',
+          start:  new Date(checkDate.getFullYear(), checkDate.getMonth(), checkDate.getDate(), 11, 0, 0),
+        },
+        {
+          label: '15h30-17h00',
+          start:  new Date(checkDate.getFullYear(), checkDate.getMonth(), checkDate.getDate(), 15, 30, 0),
+        },
+        {
+          label: '17h00-18h30',
+          start:  new Date(checkDate.getFullYear(), checkDate.getMonth(), checkDate.getDate(), 17, 0, 0),
+        },
+      ]
+
+      return timeLimit.filter(d=>d.start.getTime() > today.getTime())
+
+    }
+  },
  methods: {
    gotToNextStep: function () {

@@ -121,12 +168,21 @@ export default {
        p.error = p.vModel === null;
      })

-      if (this.pickerList.filter(p => p.error).length === 0) {
+      if (this.store.deliveryMethodCode === 'MMCM_EXPRESS') {
+        this.timeSlotError = this.timeSlot === null;
+        this.store.setDateCollect(null)
+      } else {
+        this.timeSlotError = false;
+        this.store.setTimeSlot(null)
+      }
+
+      if (this.pickerList.filter(p => p.error).length === 0 && this.timeSlotError === false) {
        this.$router.push({path: '/delivery-option-summary'});
      }
    },
    pickerUpdate(picker) {
      picker.error = false
+      this.timeSlot = null

      if (this.pickerList.length > 1 && picker.id === 1) {

--- a/src/views/delivery-option-summary.vue
+++ b/src/views/delivery-option-summary.vue
@@ -30,10 +30,10 @@
    <div class="mb-4" v-if="store.withPrescription">
      <i class="fa-solid fa-calendar-days fa-fw text-primary me-2"></i><strong>Date de collecte
      de l'ordonnance
-      : </strong>{{ (store.dateCollect) ? store.dateCollectString : store.dateDeliveryString }} {{store.displayTimeSlot}}
+      : </strong>{{ (store.dateCollect) ? store.dateCollectString : store.dateDeliveryString }} entre {{store.displayTimeSlot}}
    </div>
    <div class="mb-4"><i class="fa-solid fa-calendar-days fa-fw text-primary me-2"></i><strong>Date de livraison des
-      medicaments : </strong>{{ store.dateDeliveryString }}  {{store.displayTimeSlot}}
+      medicaments : </strong>{{ store.dateDeliveryString }} entre {{store.displayTimeSlot}}
    </div>

  </div>
@@ -66,6 +66,7 @@ export default {
          + '&with_prescription=' + this.store.withPrescription
          + '&date_delivery=' + this.store.dateDeliveryTimestampInSecond
          + '&method_delivery=' + this.store.methodDelivery
+          + '&time_slot=' + this.store.displayTimeSlot
          + '&street=' + encodeURI(this.store.street)
          + '&zip_code=' + this.store.zipCode
          + '&city=' + this.store.city
@@ -78,7 +79,7 @@ export default {
      }

      if (import.meta.env.DEV) {
-        urlApi += '&ID_SESSION=5GGl6BtF';
+        urlApi += '&ID_SESSION=YN2nLi3m';
        console.log(urlApi)
      }