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

     1  <template>
     2    <div>
     3      <b-form novalidate :validated="validated" ref="form">
     4        <b-overlay :show="disabled">
     5          <b-card
     6            title="Responsable légal"
     7            sub-title="Contact"
     8            border-variant="secondary"
     9          >
    10            <b-card-text>
    11              <b-form-row>
    12                <b-col md="3" sm="6">
    13                  <string-field
    14                    v-model="respo.nom"
    15                    label="Nom"
    16                    required
    17                    invalidFeedback="Merci de remplir votre nom."
    18                  ></string-field>
    19                </b-col>
    20                <b-col md="3" sm="6">
    21                  <string-field
    22                    v-model="respo.prenom"
    23                    label="Prénom"
    24                    required
    25                    invalidFeedback="Merci de remplir votre prénom."
    26                  ></string-field>
    27                </b-col>
    28                <b-col md="2" sm="4">
    29                  <required-sexe
    30                    v-model="respo.sexe"
    31                    invalidFeedback="Nous avons besoin de votre sexe pour personnaliser nos courriels."
    32                  ></required-sexe>
    33                </b-col>
    34                <b-col md="4" sm="8">
    35                  <date-field
    36                    v-model="respo.date_naissance"
    37                    label="Date de naissance"
    38                    checkMajeur
    39                    invalidFeedback="Le responsable légal doit être majeur."
    40                    :validated="validated"
    41                  ></date-field>
    42                </b-col>
    43              </b-form-row>
    44              <b-form-row>
    45                <b-col md="6" sm="12">
    46                  <string-field
    47                    v-model="respo.mail"
    48                    label="Adresse mail"
    49                    type="email"
    50                    required
    51                    invalidFeedback="Une adresse mail est nécessaire pour recevoir les informations sur le suivi de votre inscription."
    52                  ></string-field>
    53                </b-col>
    54                <b-col md="6" sm="12">
    55                  <liste-strings
    56                    v-model="respo.tels"
    57                    :formatter="formatTel"
    58                    label="Téléphones"
    59                    required
    60                    invalidFeedback="Merci de fournir un numéro en cas d'urgence."
    61                    :validated="validated"
    62                  ></liste-strings>
    63                </b-col>
    64              </b-form-row>
    65              <b-form-row>
    66                <b-col md="4" sm="8">
    67                  <string-field
    68                    v-model="respo.adresse"
    69                    label="Adresse"
    70                    textarea
    71                    required
    72                    invalidFeedback="L'adresse est requise pour l'émission d'une facture."
    73                  ></string-field>
    74                </b-col>
    75                <b-col md="2" sm="4">
    76                  <string-field
    77                    v-model="respo.code_postal"
    78                    label="Code postal"
    79                    required
    80                    invalidFeedback="Le code postal est requis pour l'émission d'une facture."
    81                  ></string-field>
    82                </b-col>
    83                <b-col md="3" sm="6">
    84                  <string-field
    85                    v-model="respo.ville"
    86                    label="Ville"
    87                    required
    88                    invalidFeedback="La ville est requise pour l'émission d'une facture."
    89                  ></string-field>
    90                </b-col>
    91                <b-col md="3" sm="6">
    92                  <string-field v-model="respo.pays" label="Pays"></string-field>
    93                </b-col>
    94              </b-form-row>
    95            </b-card-text>
    96          </b-card>
    97          <b-row>
    98            <b-col cols="3"></b-col>
    99            <b-col cols="9" class="text-right">
   100              <b-button variant="accent" class="mt-2" @click="valid">
   101                Continuer vers les participants
   102              </b-button>
   103            </b-col>
   104          </b-row>
   105        </b-overlay>
   106      </b-form>
   107    </div>
   108  </template>
   109  
   110  <script lang="ts">
   111  import Vue from "vue";
   112  import Component from "vue-class-component";
   113  
   114  import StringField from "@/shared/fields/StringField.vue";
   115  import DateField from "@/shared/fields/DateField.vue";
   116  import RequiredSexe from "@/shared/fields/RequiredSexe.vue";
   117  import ListeStrings from "@/shared/fields/ListeStrings.vue";
   118  import { formatTel, nullResponsableInscription } from "@/shared/logic/utils";
   119  import { ResponsableLegal } from "@/shared/logic/types";
   120  import { scrollToError } from "@/shared/utils";
   121  
   122  const TabRespoProps = Vue.extend({
   123    props: {
   124      respoOuter: Object as () => ResponsableLegal
   125    },
   126    model: {
   127      prop: "respoOuter",
   128      event: "change"
   129    }
   130  });
   131  
   132  @Component({
   133    components: { StringField, DateField, RequiredSexe, ListeStrings }
   134  })
   135  export default class TabRespo extends TabRespoProps {
   136    validated = false;
   137  
   138    formatTel = formatTel;
   139  
   140    $refs!: {
   141      form: HTMLFormElement;
   142    };
   143  
   144    get respo(): ResponsableLegal {
   145      return this.respoOuter == null
   146        ? nullResponsableInscription()
   147        : this.respoOuter;
   148    }
   149  
   150    get disabled() {
   151      return this.respoOuter == null;
   152    }
   153  
   154    valid() {
   155      this.validated = true;
   156      this.$nextTick(() => {
   157        const isValid = scrollToError(this.$refs.form);
   158        if (isValid) {
   159          this.$emit("goNext");
   160        }
   161      });
   162    }
   163  }
   164  </script>
   165  
   166  <style scoped></style>