Files
mmcm/src/views/delivery-option-step-3.vue
Jonathan Chevalier e934f93f33 WIP MMCM
2022-10-17 17:45:39 +02:00

86 lines
2.3 KiB
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="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>
<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} = 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.needPrescriptionDateCollect) ? store.minDateForDelivery : store.minDateForCollect,
}))
return {
dateDelivery,
dateCollect,
fr,
pickerList,
store,
}
},
name: "delivery-option-step-3",
methods: {
gotToNextStep: function () {
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'});
}
}
}
}
</script>
<style scoped>
</style>