github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/inscription/complet/tabs/DetailsParticipant.vue (about) 1 <template> 2 <b-card border-variant="secondary"> 3 <b-form-row> 4 <b-col md="6"> 5 <string-field 6 v-model="participant.nom" 7 required 8 label="Nom" 9 invalidFeedback="Merci de préciser votre nom." 10 ></string-field> 11 </b-col> 12 <b-col md="6"> 13 <string-field 14 v-model="participant.prenom" 15 required 16 label="Prénom" 17 invalidFeedback="Merci de préciser votre prénom." 18 ></string-field> 19 </b-col> 20 </b-form-row> 21 <b-form-row> 22 <b-col md="4"> 23 <required-sexe 24 v-model="participant.sexe" 25 invalidFeedback="Nous avons besoin du sexe des participants pour constituer des groupes." 26 ></required-sexe> 27 </b-col> 28 <b-col md="8"> 29 <date-field 30 v-model="participant.date_naissance" 31 label="Date de naissance" 32 invalidFeedback="Nous avons besoin de l'âge des participants pour constituer des groupes." 33 :validated="validated" 34 required 35 > 36 </date-field> 37 </b-col> 38 </b-form-row> 39 <b-alert 40 variant="warning" 41 :show="avertissementAge != null" 42 v-if="camp != null" 43 > 44 {{ participant.prenom }} aura <b>{{ avertissementAge }} ans</b> au début 45 du camp, dont l'âge requis est entre 46 <i>{{ camp.age_min ? camp.age_min : "-" }}</i> et 47 <i>{{ camp.age_max ? camp.age_max : "-" }}</i> ans <br /> 48 En cas de forte affluence, 49 {{ participant.sexe == "F" ? "elle" : "il" }} sera placé{{ 50 participant.sexe == "F" ? "e" : "" 51 }} 52 en liste d'attente. 53 </b-alert> 54 <b-form-row> 55 <b-col> 56 <b-form-group 57 label="Séjour" 58 invalid-feedback="Merci de choisir un séjour" 59 > 60 <b-select 61 v-model.number="participant.id_camp" 62 :options="choixCamps" 63 required 64 > 65 </b-select> 66 <template v-slot:description v-if="camp != null"> 67 <b-row> 68 <b-col cols="3"> 69 Prix : <b>{{ camp.prix }} €</b> 70 </b-col> 71 <b-col class="text-right" v-html="camp.description"> </b-col> 72 </b-row> 73 <b-row> 74 <b-col> 75 Dates : du <b> {{ formatDate(camp.date_debut) }}</b> au 76 <b>{{ formatDate(camp.date_fin) }}</b> 77 </b-col> 78 </b-row> 79 </template> 80 </b-form-group> 81 </b-col> 82 </b-form-row> 83 <b-alert 84 v-if="camp !== null" 85 :show="camp !== null && camp.infos.trim() != ''" 86 > 87 <multi-line :message="camp.infos"></multi-line> 88 </b-alert> 89 <b-card 90 v-if="camp != null && camp.option_prix && camp.option_prix.active" 91 no-body 92 class="py-2 px-3" 93 > 94 <b-row> 95 <b-col> 96 <option-prix-camp-field 97 :option="camp.option_prix" 98 ></option-prix-camp-field> 99 </b-col> 100 </b-row> 101 <b-row> 102 <b-col> 103 <option-prix-participant-field 104 :option="camp.option_prix" 105 v-model="participant.options_prix" 106 :dateDebutCamp="camp.date_debut" 107 ></option-prix-participant-field> 108 </b-col> 109 </b-row> 110 </b-card> 111 <b-form-row v-if="camp != null && showBus"> 112 <b-col> 113 <bus-participant 114 v-model="participant.options.bus" 115 :infoBus="camp.options.bus" 116 ></bus-participant> 117 </b-col> 118 </b-form-row> 119 <b-form-row v-if="camp != null && showMaterielSki"> 120 <b-col> 121 <materiel-ski-participant 122 v-model="participant.options.materiel_ski" 123 :infoMaterielSki="camp.options.materiel_ski" 124 ></materiel-ski-participant> 125 </b-col> 126 </b-form-row> 127 <b-row class="mt-2"> 128 <b-col> 129 <b-button block variant="outline-danger" @click="$emit('delete')"> 130 <b-icon-trash></b-icon-trash> 131 Enlever ce participant 132 </b-button> 133 </b-col> 134 </b-row> 135 </b-card> 136 </template> 137 138 <script lang="ts"> 139 import Vue from "vue"; 140 import Component from "vue-class-component"; 141 142 import StringField from "../../../../shared/fields/StringField.vue"; 143 import DateField from "../../../../shared/fields/DateField.vue"; 144 import RequiredSexe from "../../../../shared/fields/RequiredSexe.vue"; 145 import OptionPrixCampField from "../../../../shared/fields/OptionPrixCampField.vue"; 146 import OptionPrixParticipantField from "../../../../shared/fields/OptionPrixParticipantField.vue"; 147 import BusParticipant from "../../../../shared/fields/BusParticipant.vue"; 148 import MaterielSkiParticipant from "../../../../shared/fields/MaterielSkiParticipant.vue"; 149 150 import { 151 ParticipantInscription, 152 OptionPrixCamp, 153 Camp 154 } from "@/shared/logic/types"; 155 import { C } from "../controller"; 156 import { 157 hasBus, 158 hasMaterielSki, 159 age, 160 formatDate 161 } from "../../../../shared/logic/utils"; 162 import MultiLine from "@/shared/fields/MultiLine.vue"; 163 164 const DetailsParticipantProps = Vue.extend({ 165 props: { 166 participant: Object as () => ParticipantInscription, 167 validated: Boolean 168 }, 169 model: { 170 prop: "participant", 171 event: "change" 172 } 173 }); 174 175 @Component({ 176 components: { 177 StringField, 178 DateField, 179 RequiredSexe, 180 OptionPrixCampField, 181 OptionPrixParticipantField, 182 BusParticipant, 183 MaterielSkiParticipant, 184 MultiLine 185 } 186 }) 187 export default class DetailsParticipant extends DetailsParticipantProps { 188 formatDate = formatDate; 189 get camp(): Camp | null { 190 return C.getCamp(this.participant.id_camp); 191 } 192 193 get choixCamps() { 194 if (C.data == null) return []; 195 return (C.data.camps || []).map(camp => { 196 return { value: camp.id, text: camp.label }; 197 }); 198 } 199 200 get showBus() { 201 return hasBus(this.camp); 202 } 203 204 get showMaterielSki() { 205 return hasMaterielSki(this.camp); 206 } 207 208 // renvoie l'âge en début de camp s'il est invalid, null sinon 209 get avertissementAge(): number | null { 210 const camp = this.camp; 211 if (camp == null || this.participant.date_naissance == "") return null; 212 const ageDebut = age( 213 new Date(camp.date_debut), 214 this.participant.date_naissance 215 ); 216 if (ageDebut == null) return null; 217 const isInvalid = 218 (camp.age_min && ageDebut < camp.age_min) || 219 (camp.age_max && ageDebut > camp.age_max); 220 if (isInvalid) return ageDebut; 221 return null; 222 } 223 } 224 </script> 225 226 <style scoped></style>