github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/inscription/simple/FormInscription.vue (about)

     1  <template>
     2    <b-form novalidate :validated="validated" ref="form">
     3      <b-card title="Renseignements personnels">
     4        <b-form-row>
     5          <b-col md="3" sm="6">
     6            <string-field
     7              v-model="inscription.nom"
     8              label="Nom"
     9              invalidFeedback="Merci de remplir ton nom."
    10              required
    11            ></string-field>
    12          </b-col>
    13          <b-col md="3" sm="6">
    14            <string-field
    15              v-model="inscription.prenom"
    16              label="Prénom"
    17              invalidFeedback="Merci de remplir ton prénom."
    18              required
    19            ></string-field>
    20          </b-col>
    21          <b-col md="2" sm="4">
    22            <required-sexe
    23              v-model="inscription.sexe"
    24              invalidFeedback="Nous avons besoin de ton sexe pour personnaliser nos courriels."
    25            ></required-sexe>
    26          </b-col>
    27          <b-col md="4" sm="8">
    28            <date-field
    29              v-model="inscription.date_naissance"
    30              label="Date de naissance"
    31              required
    32            ></date-field>
    33          </b-col>
    34        </b-form-row>
    35        <b-form-row>
    36          <b-col md="6" sm="12">
    37            <string-field
    38              v-model="inscription.mail"
    39              label="Adresse mail"
    40              invalidFeedback="Une adresse mail est nécessaire pour le suivi de ton inscription."
    41              required
    42            ></string-field>
    43          </b-col>
    44          <b-col md="3" sm="6">
    45            <string-field
    46              v-model="inscription.tel"
    47              label="Téléphone"
    48            ></string-field>
    49          </b-col>
    50        </b-form-row>
    51        <string-field
    52          v-model="inscription.info"
    53          label="Une question, un souhait ... ?"
    54          textarea
    55          placeholder="Tu peux nous faire passer un message, indiquer si tu peux proposer du co-voiturage, etc..."
    56        ></string-field>
    57      </b-card>
    58      <b-row class="my-2">
    59        <b-col cols="4"></b-col>
    60        <b-col cols="8" class="text-right">
    61          <btn block variant="primary" @click="valid"
    62            >Enregistrer mon inscription</btn
    63          >
    64        </b-col>
    65      </b-row>
    66    </b-form>
    67  </template>
    68  
    69  <script lang="ts">
    70  import Vue from "vue";
    71  import Component from "vue-class-component";
    72  import StringField from "../../../shared/fields/StringField.vue";
    73  import RequiredSexe from "../../../shared/fields/RequiredSexe.vue";
    74  import DateField from "../../../shared/fields/DateField.vue";
    75  import Btn from "../../../shared/Btn.vue";
    76  import { ValidEvent } from "../../../shared/utils";
    77  import { InscriptionSimple } from "@/shared/logic/types";
    78  import { Sexe } from "@/shared/logic/types";
    79  import { nullDateString } from "@/shared/logic/utils";
    80  
    81  const FormInscriptionProps = Vue.extend({});
    82  
    83  @Component({
    84    components: { StringField, RequiredSexe, DateField, Btn }
    85  })
    86  export default class FormInscription extends FormInscriptionProps {
    87    validated = false;
    88  
    89    inscription: InscriptionSimple = {
    90      nom: "",
    91      prenom: "",
    92      sexe: Sexe.SAucun,
    93      date_naissance: nullDateString,
    94      mail: "",
    95      tel: "",
    96      info: ""
    97    };
    98  
    99    $refs!: {
   100      form: HTMLFormElement;
   101    };
   102  
   103    valid(event: ValidEvent) {
   104      this.validated = true;
   105      if (this.$refs.form.checkValidity()) {
   106        this.$emit("save", event, this.inscription);
   107      }
   108    }
   109  }
   110  </script>
   111  
   112  <style scoped></style>