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

     1  <template>
     2    <b-container class="my-2 mb-4">
     3      <success v-if="output" :output="output"></success>
     4      <error v-if="output" :output="output"></error>
     5  
     6      <no-camps v-if="isClosed" class="my-4"></no-camps>
     7      <div v-else>
     8        <transition name="fade" mode="out-in">
     9          <post-inscription
    10            :checkMail="checkMail"
    11            :urlEspacePerso="urlEspacePerso"
    12            v-if="inscriptionDone"
    13            class="my-5"
    14          ></post-inscription>
    15          <b-tabs
    16            fill
    17            pills
    18            v-model="tabIndex"
    19            content-class="py-2"
    20            @activate-tab="scrollToTopTab"
    21            ref="tabs"
    22            v-else-if="inscription != null"
    23          >
    24            <b-tab
    25              :title-item-class="tabIndex >= 1 ? '' : 'noClick'"
    26              title="Responsable"
    27            >
    28              <fast-mail v-if="showFastMail"></fast-mail>
    29              <tab-respo
    30                v-model="inscription.responsable"
    31                @goNext="tabIndex = 1"
    32              ></tab-respo>
    33            </b-tab>
    34            <b-tab
    35              :title-item-class="tabIndex >= 2 ? '' : 'noClick'"
    36              title="Participants"
    37            >
    38              <tab-parts
    39                v-if="inscription != null"
    40                v-model="inscription.participants"
    41                @cancel="tabIndex = 0"
    42                @goNext="tabIndex = 2"
    43              ></tab-parts>
    44            </b-tab>
    45            <b-tab
    46              :title-item-class="tabIndex >= 3 ? '' : 'noClick'"
    47              title="Informations sur le paiement"
    48            >
    49              <tab-info @cancel="tabIndex = 1" @goNext="tabIndex = 3"></tab-info>
    50            </b-tab>
    51            <b-tab
    52              :title-item-class="tabIndex >= 4 ? '' : 'noClick'"
    53              title="Conclusion"
    54            >
    55              <tab-conclu
    56                v-model="inscription"
    57                @cancel="tabIndex = 2"
    58                @valid="validInscription"
    59              ></tab-conclu>
    60            </b-tab>
    61          </b-tabs>
    62        </transition>
    63      </div>
    64    </b-container>
    65  </template>
    66  
    67  <script lang="ts">
    68  import Vue from "vue";
    69  import Component from "vue-class-component";
    70  import BaseApp from "@/BaseApp.vue";
    71  import Error from "@/shared/notifications/Error.vue";
    72  import Success from "@/shared/notifications/Success.vue";
    73  import PostInscription from "./PostInscription.vue";
    74  import NoCamps from "./NoCamps.vue";
    75  import FastMail from "./FastMail.vue";
    76  import TabRespo from "./tabs/TabRespo.vue";
    77  import TabParts from "./tabs/TabParts.vue";
    78  import TabInfo from "./tabs/TabInfo.vue";
    79  import TabConclu from "./tabs/TabConclu.vue";
    80  import { C } from "./controller";
    81  import { ConclusionInscription } from "./types";
    82  import { ValidEvent } from "@/shared/utils";
    83  import { BTabs } from "bootstrap-vue";
    84  
    85  @Component({
    86    components: {
    87      BaseApp,
    88      Error,
    89      Success,
    90      PostInscription,
    91      NoCamps,
    92      FastMail,
    93      TabRespo,
    94      TabParts,
    95      TabInfo,
    96      TabConclu
    97    }
    98  })
    99  export default class AppComplet extends Vue {
   100    title = "Portail des inscriptions";
   101  
   102    showFastMail = true;
   103  
   104    inscriptionDone = false;
   105    checkMail = true;
   106    urlEspacePerso = "";
   107  
   108    tabIndex = 0;
   109  
   110    output = C.notifications;
   111    C = C; // besoin d'une référence pour la réactivité
   112  
   113    $refs!: {
   114      tabs: BTabs;
   115    };
   116  
   117    get inscription() {
   118      if (C.data == null) return null;
   119      return C.data.initial_inscription;
   120    }
   121  
   122    get isClosed() {
   123      if (C.data == null) return false; // en attendant les données
   124      return (C.data.camps || []).length == 0;
   125    }
   126  
   127    async mounted() {
   128      await C.loadData();
   129      if (C.data == null) return;
   130  
   131      // initial values
   132      if ((C.data.initial_inscription.participants || []).length == 0) {
   133        Vue.set(C.data.initial_inscription, "participants", [C.newParticipant()]);
   134      }
   135      this.showFastMail = !C.data.initial_inscription.responsable.mail;
   136    }
   137  
   138    async validInscription(ev: ValidEvent) {
   139      ev.spinning = true;
   140      const data = await C.validInscription();
   141      ev.spinning = false;
   142      if (data == undefined) return;
   143      this.inscriptionDone = true;
   144      this.checkMail = data.check_mail;
   145      this.urlEspacePerso = data.url_espace_perso;
   146    }
   147  
   148    scrollToTopTab() {
   149      const nav = this.$refs.tabs.$refs.nav as HTMLElement;
   150      nav.scrollIntoView();
   151    }
   152  }
   153  </script>
   154  
   155  <style>
   156  .noClick {
   157    pointer-events: none;
   158  }
   159  </style>