github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/components/equipiers/FormEquipier.vue (about) 1 <template> 2 <v-card @paste="onPaste"> 3 <v-card-title> 4 <slot name="title" :tmpEquipier="tmpEquipier"> 5 <span class="headline"> 6 Modifier la fiche de {{ tmpEquipier.prenom }} {{ tmpEquipier.nom }} 7 <span v-if="tmpEquipier.is_temporaire"> 8 <i>(Profil temporaire)</i> 9 </span> 10 </span> 11 </slot> 12 13 <v-spacer v-if="withButtons"></v-spacer> 14 <v-btn v-if="withButtons" @click="reset"> 15 <v-icon>{{ $icons["mdi-undo"] }}</v-icon 16 >Réinitialiser 17 </v-btn> 18 </v-card-title> 19 <v-card-text class="pt-1 pb-1"> 20 <v-container grid-list-md fluid class="pa-1"> 21 <v-row> 22 <v-col sm="6" md="3"> 23 <v-text-field v-model="tmpEquipier.nom" label="Nom"></v-text-field> 24 </v-col> 25 <v-col sm="5" md="2"> 26 <v-text-field 27 v-model="tmpEquipier.prenom" 28 label="Prénom" 29 ></v-text-field> 30 </v-col> 31 <v-col sm="6" md="2"> 32 <v-select 33 v-model="tmpEquipier.sexe" 34 :items="edit.sexe" 35 label="Sexe" 36 ></v-select> 37 </v-col> 38 <v-col sm="6" md="2"> 39 <date-field 40 v-model="tmpEquipier.date_naissance" 41 label="Date de naissance" 42 ></date-field> 43 </v-col> 44 <v-col sm="6" md="3"> 45 <v-text-field 46 v-model="tmpEquipier.mail" 47 label="Mail" 48 :rules="[isEmailValid]" 49 ></v-text-field> 50 </v-col> 51 </v-row> 52 53 <template v-if="withDetails"> 54 <v-row> 55 <v-col xs="12" sm="6" md="4"> 56 <v-combobox 57 small-chips 58 deletable-chips 59 multiple 60 v-model="tmpEquipier.tels" 61 label="Téléphones" 62 ></v-combobox> 63 </v-col> 64 <v-col xs="12" sm="6" md="2"> 65 <v-text-field 66 v-model="tmpEquipier.nom_jeune_fille" 67 label="Nom de jeune fille" 68 ></v-text-field> 69 </v-col> 70 <v-col xs="12" sm="6" md="3"> 71 <v-text-field 72 v-model="tmpEquipier.ville_naissance" 73 label="Ville de naissance" 74 ></v-text-field> 75 </v-col> 76 <v-col xs="12" sm="6" md="3"> 77 <v-combobox 78 v-model="tmpEquipier.departement_naissance" 79 :items="edit.departement" 80 label="Département de naissance" 81 hint="Indiquez le pays de naissance si hors de France." 82 :persistent-hint="true" 83 ></v-combobox> 84 </v-col> 85 </v-row> 86 <v-row class="my-1"> 87 <v-col xs="12" sm="6" md="5"> 88 <v-textarea 89 v-model="tmpEquipier.adresse" 90 label="Adresse" 91 height="50" 92 ></v-textarea> 93 </v-col> 94 <v-col xs="12" sm="6" md="3"> 95 <v-text-field 96 v-model="tmpEquipier.code_postal" 97 label="Code postal" 98 ></v-text-field> 99 </v-col> 100 <v-col xs="12" sm="6" md="4"> 101 <v-text-field 102 v-model="tmpEquipier.ville" 103 label="Ville" 104 ></v-text-field> 105 </v-col> 106 </v-row> 107 <v-row class="my-1"> 108 <v-col xs="12" sm="6" md="4"> 109 <v-text-field 110 v-model="tmpEquipier.securite_sociale" 111 label="Sécurité sociale" 112 ></v-text-field> 113 </v-col> 114 <v-col xs="12" sm="6" md="4"> 115 <v-text-field 116 v-model="tmpEquipier.profession" 117 label="Profession" 118 ></v-text-field> 119 </v-col> 120 <v-col xs="12" sm="6" md="2"> 121 <v-switch 122 v-model="tmpEquipier.etudiant" 123 label="Etudiant" 124 ></v-switch> 125 </v-col> 126 <v-col xs="12" sm="6" md="2"> 127 <v-switch 128 v-model="tmpEquipier.fonctionnaire" 129 label="Fonctionnaire" 130 ></v-switch> 131 </v-col> 132 </v-row> 133 <v-row> 134 <v-col xs="12" sm="6" md="4"> 135 <roles-field v-model="tmpEquipier.roles"></roles-field> 136 </v-col> 137 <v-col xs="12" sm="6" md="4"> 138 <v-select 139 v-model="tmpEquipier.diplome" 140 :items="edit.diplome" 141 label="Diplôme" 142 :background-color="colorDiplome" 143 @input="$set(approxMatched, 'diplome', false)" 144 ></v-select> 145 </v-col> 146 <v-col xs="12" sm="6" md="4"> 147 <v-select 148 v-model="tmpEquipier.appro" 149 :items="edit.appro" 150 label="Approfondissement" 151 :background-color="colorAppro" 152 @input="approxMatched.appro = false" 153 ></v-select> 154 </v-col> 155 </v-row> 156 <v-row> 157 <v-col> 158 <v-switch 159 v-model="tmpEquipier.presence.active" 160 label="Dates de présence personnalisées" 161 > 162 </v-switch> 163 </v-col> 164 <v-col> 165 <date-field 166 v-model="tmpEquipier.presence.from" 167 label="Date d'arrivée" 168 :disabled="!tmpEquipier.presence.active" 169 ></date-field> 170 </v-col> 171 <v-col> 172 <date-field 173 v-model="tmpEquipier.presence.to" 174 label="Date de départ" 175 :disabled="!tmpEquipier.presence.active" 176 ></date-field> 177 </v-col> 178 </v-row> 179 </template> 180 <template v-if="withButtons"> 181 <v-layout row justify-space-between> 182 <v-col xs="4" md="3"> 183 <v-btn @click="$emit('reject')">Retour</v-btn> 184 </v-col> 185 <v-col xs="4" md="6"></v-col> 186 <v-col xs="4" md="3"> 187 <div class="text-right"> 188 <v-btn class="green--text" @click="$emit('accept', tmpEquipier)" 189 >Sauvegarder</v-btn 190 > 191 </div> 192 </v-col> 193 </v-layout> 194 </template> 195 </v-container> 196 </v-card-text> 197 </v-card> 198 </template> 199 200 <script lang="ts"> 201 import Vue from "vue"; 202 import Component from "vue-class-component"; 203 import DateField from "../DateField.vue"; 204 import RolesField from "./RolesField.vue"; 205 206 import { processClipboard } from "@/logic/parse_equipier"; 207 import { EquipierDirecteur } from "../../logic/types"; 208 import { EditFields, isEmailValid } from "@/logic/formatter"; 209 import { Watch } from "vue-property-decorator"; 210 211 const FormEquipierProps = Vue.extend({ 212 props: { 213 equipier: Object as () => EquipierDirecteur, 214 withDetails: Boolean, 215 withButtons: Boolean 216 } 217 }); 218 219 @Component({ 220 components: { DateField, RolesField } 221 }) 222 export default class FormEquipier extends FormEquipierProps { 223 approxMatched = { diplome: false, appro: false }; 224 225 tmpEquipier: EquipierDirecteur = this.duplique(); 226 227 edit = EditFields; 228 isEmailValid = isEmailValid; 229 230 private duplique() { 231 return JSON.parse(JSON.stringify(this.equipier || {})); 232 } 233 234 @Watch("equipier") 235 e() { 236 this.tmpEquipier = this.duplique(); 237 } 238 239 @Watch("tmpEquipier", { deep: true }) 240 t() { 241 this.$emit("dataChanged", this.tmpEquipier); 242 } 243 244 get colorAppro() { 245 return this.approxMatched.appro ? "warning" : ""; 246 } 247 get colorDiplome() { 248 return this.approxMatched.diplome ? "warning" : ""; 249 } 250 251 onPaste(event: ClipboardEvent) { 252 processClipboard(event, this.tmpEquipier, this.approxMatched); 253 } 254 255 reset() { 256 this.tmpEquipier = this.duplique(); 257 this.approxMatched = { diplome: false, appro: false }; 258 } 259 } 260 </script> 261 262 <style scoped></style>