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

<template>

  <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="pickerUpdate(picker)" 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 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">
          <label class="form-check-label" :for="'method'+picker.id">
            {{ 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">
          <label class="form-check-label" :for="'method'+picker.id">
            {{ picker.methodLabel }} en boîte aux lettres <span class="text-danger">*</span>
          </label>
        </div>
      </div>


    </div>


    <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" 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.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">
    <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>
  <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/>
      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>
  </div>
</template>

<script>
import {storeToRefs} from 'pinia'
import {useMMCMStore} from '../stores/mmcm.js'
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 {dateDelivery, dateCollect, methodDelivery, methodCollect, timeSlot} = storeToRefs(store)

    let pickerList = []
    if (store.needPrescriptionDateCollect) {
      pickerList.push(reactive({
        id: 1,
        title: 'Date de collecte de l\'ordonnance :',
        vModel: dateCollect,
        method: methodCollect,
        methodLabel: 'Collecte des documents de santé',
        error: false,
        minDate: store.minDateForCollect,
      }))
    }

    pickerList.push(reactive({
      id: 2,
      title: 'Date de livraison des médicaments :',
      vModel: dateDelivery,
      error: false,
      method: methodDelivery,
      methodLabel: 'Livraison',
      minDate: (store.needPrescriptionDateCollect) ? store.minDateForDelivery : store.minDateForCollect,
    }))


    const timeSlotError = ref(false)

    return {
      timeSlot,
      timeSlotError,
      dateDelivery,
      dateCollect,
      fr,
      pickerList,
      store,
    }
  },
  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 () {

      this.pickerList.forEach(p => {
        p.error = p.vModel === null;
      })

      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) {

        const minDateTs = picker.vModel + 24 * 60 * 60 * 1000

        if (minDateTs > this.pickerList[1].vModel) {
          this.pickerList[1].vModel = null
        }

        this.pickerList[1].minDate = new Date(minDateTs)
      }

    }
  }
}
</script>

<style scoped>

</style>