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

     1  <template>
     2    <div>
     3      <b-form novalidate :validated="validated" ref="form">
     4        <b-card>
     5          <b-card-title>
     6            <b-row>
     7              <b-col>Participants</b-col>
     8              <b-col class="text-right">
     9                <b-button variant="outline-success" @click="addParticipant">
    10                  <b-icon-plus class=""></b-icon-plus>
    11                  Ajouter un participant
    12                </b-button>
    13              </b-col>
    14            </b-row>
    15          </b-card-title>
    16          <b-card-text>
    17            <b-row no-gutters>
    18              <b-col
    19                v-for="(p, i) in participants"
    20                :key="i"
    21                xs="12"
    22                lg="6"
    23                class="p-1"
    24              >
    25                <details-participant
    26                  v-model="participants[i]"
    27                  :validated="validated"
    28                  @delete="deleteParticipant(i)"
    29                ></details-participant>
    30              </b-col>
    31              <b-col v-if="participants.length == 0" class="text-center">
    32                <i>Aucun participant....</i>
    33              </b-col>
    34            </b-row>
    35          </b-card-text>
    36        </b-card>
    37        <b-row ref="bottom">
    38          <b-col cols="3">
    39            <b-button variant="warning" class="mt-2" @click="$emit('cancel')">
    40              Retour
    41            </b-button>
    42          </b-col>
    43          <b-col cols="9" class="text-right">
    44            <b-button
    45              variant="accent"
    46              class="mt-2"
    47              @click="valid"
    48              :disabled="participants.length == 0"
    49            >
    50              Continuer vers les informations financières
    51            </b-button>
    52          </b-col>
    53        </b-row>
    54      </b-form>
    55    </div>
    56  </template>
    57  
    58  <script lang="ts">
    59  import Vue from "vue";
    60  import Component from "vue-class-component";
    61  
    62  import DetailsParticipant from "./DetailsParticipant.vue";
    63  
    64  import { ParticipantInscription } from "@/shared/logic/types";
    65  import { scrollToError } from "../../../../shared/utils";
    66  import { C } from "../controller";
    67  
    68  const TabPartsProps = Vue.extend({
    69    props: {
    70      outerParticipants: Array as () => ParticipantInscription[] | null
    71    },
    72    model: {
    73      prop: "outerParticipants",
    74      event: "change"
    75    }
    76  });
    77  
    78  @Component({
    79    components: { DetailsParticipant }
    80  })
    81  export default class TabParts extends TabPartsProps {
    82    validated = false;
    83  
    84    $refs!: {
    85      bottom: HTMLElement;
    86      form: HTMLFormElement;
    87    };
    88  
    89    get participants() {
    90      return this.outerParticipants || [];
    91    }
    92  
    93    addParticipant() {
    94      const nullPart = C.newParticipant();
    95      this.participants.push(nullPart);
    96      this.$emit("change", this.participants);
    97      this.$refs.bottom.scrollIntoView();
    98    }
    99  
   100    deleteParticipant(i: number) {
   101      const newParts = this.participants.filter((_, idx) => idx != i);
   102      this.$emit("change", newParts);
   103    }
   104  
   105    valid() {
   106      this.validated = true;
   107      this.$nextTick(() => {
   108        const isValid = scrollToError(this.$refs.form);
   109        if (isValid) {
   110          this.$emit("goNext");
   111        }
   112      });
   113    }
   114  }
   115  </script>
   116  
   117  <style scoped></style>