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

     1  <template>
     2    <b-form :validated="validated" ref="form">
     3      <b-form-row>
     4        <b-col md="4" sm="6">
     5          <string-field
     6            label="Nom"
     7            invalidFeedback="Merci de remplir votre nom."
     8            v-model="equipier.nom"
     9            required
    10          ></string-field>
    11        </b-col>
    12        <b-col md="3" sm="6">
    13          <string-field
    14            label="Prénom"
    15            invalidFeedback="Merci de remplir votre prénom."
    16            v-model="equipier.prenom"
    17            required
    18          ></string-field>
    19        </b-col>
    20        <b-col md="2" sm="4">
    21          <required-sexe v-model="equipier.sexe"></required-sexe>
    22        </b-col>
    23        <b-col md="3" sm="8">
    24          <string-field
    25            label="Nom de jeune fille"
    26            placeholder="(Optionnel) Nom de jeune fille"
    27            v-model="equipier.nom_jeune_fille"
    28          ></string-field>
    29        </b-col>
    30      </b-form-row>
    31      <b-form-row>
    32        <b-col md="4" sm="12">
    33          <date-field
    34            v-model="equipier.date_naissance"
    35            label="Date de naissance"
    36            invalidFeedback="Votre date de naissance est requise par Jeunesse et Sport."
    37            :validated="validated"
    38            required
    39          ></date-field>
    40        </b-col>
    41        <b-col md="4" sm="6">
    42          <string-field
    43            label="Ville de naissance"
    44            invalidFeedback="Votre ville de naissance est requise par Jeunesse et Sport."
    45            v-model="equipier.ville_naissance"
    46            required
    47          ></string-field>
    48        </b-col>
    49        <b-col md="4" sm="6">
    50          <string-field
    51            label="Département de naissance <i>(ou pays si hors de France)</i>"
    52            placeholder="Département ou pays de naissance..."
    53            invalidFeedback="Votre département (ou pays) de naissance est requis par Jeunesse et Sport."
    54            v-model="equipier.departement_naissance"
    55            required
    56            list="departements"
    57          ></string-field>
    58          <b-form-datalist
    59            id="departements"
    60            :options="choixDepartements"
    61          ></b-form-datalist>
    62        </b-col>
    63      </b-form-row>
    64      <b-form-row>
    65        <b-col md="4" sm="6">
    66          <string-field
    67            label="Mail"
    68            invalidFeedback="Votre adresse mail est utile pour partager les photos du séjour."
    69            v-model="equipier.mail"
    70            required
    71          ></string-field>
    72        </b-col>
    73        <b-col md="8" sm="6">
    74          <liste-strings
    75            label="Téléphones"
    76            v-model="equipier.tels"
    77            :formatter="formatTel"
    78            :validated="validated"
    79          ></liste-strings>
    80        </b-col>
    81      </b-form-row>
    82      <b-form-row>
    83        <b-col md="4" sm="6">
    84          <string-field
    85            label="Adresse"
    86            invalidFeedback="Votre adresse est requise par l'URSSAF."
    87            v-model="equipier.adresse"
    88            textarea
    89            required
    90          ></string-field>
    91        </b-col>
    92        <b-col md="4" sm="6">
    93          <string-field
    94            label="Code postal"
    95            invalidFeedback="Votre adresse est requise par l'URSSAF."
    96            v-model="equipier.code_postal"
    97            required
    98          ></string-field>
    99        </b-col>
   100        <b-col md="4" sm="6">
   101          <string-field
   102            label="Ville"
   103            invalidFeedback="Votre adresse est requise par l'URSSAF."
   104            v-model="equipier.ville"
   105            required
   106          ></string-field>
   107        </b-col>
   108      </b-form-row>
   109      <b-form-row>
   110        <b-col>
   111          <b-form-group label="Diplôme">
   112            <b-form-select :options="optionsDiplome" v-model="equipier.diplome">
   113            </b-form-select>
   114          </b-form-group>
   115        </b-col>
   116        <b-col>
   117          <b-form-group label="Approfondissement">
   118            <b-form-select :options="optionsAppro" v-model="equipier.appro">
   119            </b-form-select>
   120          </b-form-group>
   121        </b-col>
   122      </b-form-row>
   123      <b-form-row>
   124        <b-col>
   125          <string-field
   126            label="Sécurité sociale"
   127            invalidFeedback="Votre numéro de Sécurité Sociale est requis par Jeunesse et Sport."
   128            v-model="equipier.securite_sociale"
   129            type="securite-sociale"
   130            required
   131          ></string-field>
   132        </b-col>
   133        <b-col>
   134          <string-field
   135            label="Profession"
   136            invalidFeedback="Votre profession est requise par Jeunesse et Sport."
   137            v-model="equipier.profession"
   138            required
   139          ></string-field>
   140        </b-col>
   141      </b-form-row>
   142      <b-form-row>
   143        <b-col>
   144          <b-form-checkbox v-model="equipier.etudiant"
   145            >Etudiant ?</b-form-checkbox
   146          >
   147        </b-col>
   148        <b-col>
   149          <b-form-checkbox v-model="equipier.fonctionnaire"
   150            >Fonctionnaire ?</b-form-checkbox
   151          >
   152        </b-col>
   153      </b-form-row>
   154  
   155      <b-card title="Dates de présence" class="mt-3">
   156        <b-card-text>
   157          <b-form-row>
   158            <b-col>
   159              <b-form-checkbox v-model="equipier.presence.active">
   160                Définir des dates de présence personnalisées
   161                <small class="text-muted"
   162                  >(différentes de celles du séjour : {{ datesSejour }})</small
   163                >
   164              </b-form-checkbox>
   165            </b-col>
   166          </b-form-row>
   167          <b-form-row class="mt-2">
   168            <b-col>
   169              <date-field
   170                label="Date d'arrivée"
   171                invalidFeedback="Votre date d'arrivée est requise par Jeunesse et Sport"
   172                v-model="equipier.presence.from"
   173                :disabled="!equipier.presence.active"
   174              ></date-field>
   175            </b-col>
   176            <b-col>
   177              <date-field
   178                label="Date de départ"
   179                invalidFeedback="Votre date de départ est requise par Jeunesse et Sport"
   180                v-model="equipier.presence.to"
   181                :disabled="!equipier.presence.active"
   182              ></date-field>
   183            </b-col>
   184          </b-form-row>
   185        </b-card-text>
   186      </b-card>
   187    </b-form>
   188  </template>
   189  
   190  <script lang="ts">
   191  import Vue from "vue";
   192  import Component from "vue-class-component";
   193  import StringField from "@/shared/fields/StringField.vue";
   194  import DateField from "@/shared/fields/DateField.vue";
   195  import RequiredSexe from "@/shared/fields/RequiredSexe.vue";
   196  import ListeStrings from "@/shared/fields/ListeStrings.vue";
   197  
   198  import {
   199    EquipierEquipier,
   200    Camp,
   201    DiplomeLabels,
   202    ApprofondissementLabels
   203  } from "@/shared/logic/types";
   204  import { formatTel, formatDate, enumToOptions } from "@/shared/logic/utils";
   205  import { DEPARTEMENTS } from "@/shared/logic/enums";
   206  import { BForm } from "bootstrap-vue";
   207  import { scrollToError } from "@/shared/utils";
   208  
   209  const FormEquipierProps = Vue.extend({
   210    props: {
   211      equipier: Object as () => EquipierEquipier,
   212      camp: Object as () => Camp
   213    },
   214    model: {
   215      prop: "equipier",
   216      event: "change"
   217    }
   218  });
   219  
   220  @Component({
   221    components: { StringField, RequiredSexe, DateField, ListeStrings }
   222  })
   223  export default class FormEquipier extends FormEquipierProps {
   224    private validated = false;
   225  
   226    $refs!: {
   227      form: HTMLFormElement;
   228    };
   229  
   230    private choixDepartements = DEPARTEMENTS;
   231    private formatTel = formatTel;
   232    private optionsDiplome = enumToOptions(DiplomeLabels);
   233    private optionsAppro = enumToOptions(ApprofondissementLabels);
   234  
   235    get datesSejour() {
   236      return (
   237        formatDate(this.camp.date_debut) + " - " + formatDate(this.camp.date_fin)
   238      );
   239    }
   240  
   241    async validate() {
   242      this.validated = true;
   243      // on attend que les events soit passés
   244      await this.$nextTick();
   245      return scrollToError(this.$refs.form);
   246    }
   247  }
   248  </script>
   249  
   250  <style scoped></style>