github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/components/inscrits/FormInscrit.vue (about)

     1  <template>
     2    <v-card v-if="tmpItem != null">
     3      <v-card-title>
     4        <span class="headline"
     5          >Modifier la fiche de {{ tmpItem.prenom }} {{ tmpItem.nom }}</span
     6        >
     7        <v-spacer v-if="withButtons"></v-spacer>
     8        <v-btn v-if="withButtons" @click="reset">
     9          <v-icon>{{ $icons["mdi-undo"] }}</v-icon
    10          >Réinitialiser
    11        </v-btn>
    12      </v-card-title>
    13      <v-card-text class="pt-1 pb-1">
    14        <v-container grid-list-md fluid class="pa-1">
    15          <v-row wrap>
    16            <v-col xs="12" sm="6" md="4">
    17              <v-text-field
    18                v-model="tmpItem.mail"
    19                label="Mail"
    20                :rules="[isEmailValid]"
    21              ></v-text-field>
    22            </v-col>
    23            <v-col xs="12" sm="6" md="4">
    24              <v-select
    25                :value="tmpItem.id_groupe.Valid ? tmpItem.id_groupe.Int64 : null"
    26                @input="onGroupeChange"
    27                :items="groupesItems"
    28                label="Groupe"
    29                no-data-text="Aucun groupe n'est encore défini."
    30              ></v-select>
    31            </v-col>
    32            <v-col xs="12" sm="6" md="4">
    33              <v-select
    34                v-model="tmpItem.options.bus"
    35                :items="busItems"
    36                label="Trajet en bus"
    37              ></v-select>
    38            </v-col>
    39          </v-row>
    40          <v-row wrap>
    41            <v-col xs="12" sm="6" md="2">
    42              <v-select
    43                v-model="tmpItem.options.materiel_ski.need"
    44                :items="[
    45                  { value: '', text: 'Non' },
    46                  { value: 'acve', text: 'Matériel ACVE' },
    47                  { value: 'loueur', text: 'Loueur' }
    48                ]"
    49                label="Matériel de ski demandé"
    50              ></v-select>
    51            </v-col>
    52            <v-col xs="12" sm="6" md="2">
    53              <v-select
    54                v-model="tmpItem.options.materiel_ski.mode"
    55                :items="[
    56                  { id: 'ski', text: 'Ski' },
    57                  { id: 'surf', text: 'Surf' }
    58                ]"
    59                label="Catégorie"
    60                :disabled="!materielSkiActif"
    61              ></v-select>
    62            </v-col>
    63            <v-col xs="12" sm="6" md="2">
    64              <v-checkbox
    65                v-model="tmpItem.options.materiel_ski.casque"
    66                label="Avec un casque"
    67                :disabled="!materielSkiActif"
    68              ></v-checkbox>
    69            </v-col>
    70            <v-col xs="12" sm="6" md="2">
    71              <v-text-field
    72                v-model.number="tmpItem.options.materiel_ski.poids"
    73                label="Poids"
    74                suffix="kg"
    75                type="number"
    76                :disabled="!materielSkiActif"
    77              ></v-text-field>
    78            </v-col>
    79            <v-col xs="12" sm="6" md="2">
    80              <v-text-field
    81                v-model.number="tmpItem.options.materiel_ski.taille"
    82                label="Taille"
    83                suffix="cm"
    84                type="number"
    85                :disabled="!materielSkiActif"
    86              ></v-text-field>
    87            </v-col>
    88            <v-col xs="12" sm="6" md="2">
    89              <v-text-field
    90                v-model.number="tmpItem.options.materiel_ski.pointure"
    91                label="Pointure"
    92                type="number"
    93                :disabled="!materielSkiActif"
    94              ></v-text-field>
    95            </v-col>
    96          </v-row>
    97  
    98          <template v-if="withButtons">
    99            <v-row justify-space-between>
   100              <v-col xs="4" md="3">
   101                <v-btn @click="$emit('reject')">Retour</v-btn>
   102              </v-col>
   103              <v-col xs="0" md="6"></v-col>
   104              <v-col xs="4" md="3">
   105                <div class="text-right">
   106                  <v-btn @click="$emit('accept', tmpItem)">Sauvegarder</v-btn>
   107                </div>
   108              </v-col>
   109            </v-row>
   110          </template>
   111        </v-container>
   112      </v-card-text>
   113    </v-card>
   114  </template>
   115  
   116  <script lang="ts">
   117  import Vue from "vue";
   118  import Component from "vue-class-component";
   119  import { Watch } from "vue-property-decorator";
   120  import { Groupes, Inscrit } from "../../logic/types";
   121  import { isEmailValid, EditFields } from "../../logic/formatter";
   122  
   123  const FormInscritProps = Vue.extend({
   124    props: {
   125      inscrit: Object as () => Inscrit | null,
   126      withDetails: Boolean,
   127      withButtons: Boolean,
   128      groupes: Object as () => NonNullable<Groupes>
   129    }
   130  });
   131  @Component({})
   132  export default class FormInscrit extends FormInscritProps {
   133    tmpItem: Inscrit | null = this.duplique();
   134  
   135    isEmailValid = isEmailValid;
   136    busItems = EditFields.bus;
   137  
   138    private duplique() {
   139      return JSON.parse(JSON.stringify(this.inscrit));
   140    }
   141  
   142    @Watch("inscrit")
   143    i() {
   144      this.tmpItem = this.duplique();
   145    }
   146  
   147    get materielSkiActif() {
   148      return this.tmpItem !== null && !!this.tmpItem.options.materiel_ski.need;
   149    }
   150  
   151    get groupesItems() {
   152      return Object.values(this.groupes).map(g => {
   153        return { value: g.id, text: g.nom };
   154      });
   155    }
   156  
   157    reset() {
   158      this.tmpItem = this.duplique();
   159    }
   160  
   161    onGroupeChange(idGroupe: number) {
   162      if (this.tmpItem == null) return;
   163      this.tmpItem.id_groupe = { Valid: true, Int64: idGroupe };
   164    }
   165  }
   166  </script>
   167  
   168  <style scoped></style>