github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/espace_perso/components/participants/DetailsParticipant.vue (about)

     1  <template>
     2    <b-card header-class="p-0 border-0" no-body>
     3      <template v-slot:header>
     4        <b-button block class="text-left" @click="visible = !visible">
     5          <b-row>
     6            <b-col>
     7              <b-icon-chevron-right v-if="visible"></b-icon-chevron-right>
     8              <b-icon-chevron-down v-else></b-icon-chevron-down>
     9              {{ personne ? personne.nom_prenom : "-" }}
    10              <b-badge v-if="isAttente" variant="warning"
    11                >En liste d'attente</b-badge
    12              >
    13            </b-col>
    14            <b-col cols="7" class="text-right">
    15              <b v-b-tooltip.hover.html :title="camp ? camp.description : ''">{{
    16                camp ? camp.label : ""
    17              }}</b>
    18            </b-col>
    19          </b-row>
    20        </b-button>
    21      </template>
    22      <b-collapse v-model="visible">
    23        <b-card-text class="py-2 px-3">
    24          <b-alert variant="info" :show="showLocked">
    25            Ce séjour débute dans moins de {{ joursLimitation }} jours. <br />
    26            Pour faciliter son organisation, les modifications depuis l'espace
    27            personnel sont désactivées. <br />
    28            Vous pouvez contacter directement
    29            <span v-if="mailDirecteurHref">
    30              <a class="text-fushia" :href="mailDirecteurHref">le directeur </a>
    31              ou
    32            </span>
    33            <a class="text-fushia" :href="mailHref">le centre d'inscriptions</a>.
    34          </b-alert>
    35  
    36          <details-liste-attente
    37            v-if="isAttente"
    38            :participant="participant"
    39          ></details-liste-attente>
    40  
    41          <div v-if="!isAttente">
    42            <b-row v-if="hasOneOption && camp != null">
    43              <b-col :cols="hasMaterielSki ? 4 : 12" v-if="hasBus">
    44                <bus-participant
    45                  v-model="participant.options.bus"
    46                  :infoBus="camp.options.bus"
    47                  :disabled="showLocked"
    48                ></bus-participant>
    49              </b-col>
    50              <b-col v-if="hasMaterielSki">
    51                <materiel-ski-participant
    52                  v-model="participant.options.materiel_ski"
    53                  :infoMaterielSki="camp.options.materiel_ski"
    54                  :disabled="showLocked"
    55                ></materiel-ski-participant>
    56              </b-col>
    57            </b-row>
    58            <b-row v-else>
    59              <b-col class="py-2"
    60                ><i>Ce séjour ne propose pas d'options.</i></b-col
    61              >
    62            </b-row>
    63          </div>
    64        </b-card-text>
    65      </b-collapse>
    66    </b-card>
    67  </template>
    68  
    69  <script lang="ts">
    70  import Vue from "vue";
    71  import Component from "vue-class-component";
    72  
    73  import BusParticipant from "../../../../shared/fields/BusParticipant.vue";
    74  import MaterielSkiParticipant from "../../../../shared/fields/MaterielSkiParticipant.vue";
    75  
    76  import {
    77    Participant,
    78    Personne,
    79    CampPlus,
    80    StatutAttente
    81  } from "@/shared/logic/types";
    82  import { C } from "../../logic/controller";
    83  import { hasBus, hasMaterielSki } from "../../../../shared/logic/utils";
    84  import DetailsListeAttente from "./DetailsListeAttente.vue";
    85  
    86  const DetailsParticipantProps = Vue.extend({
    87    props: {
    88      participant: Object as () => Participant
    89    },
    90    model: {
    91      prop: "participant",
    92      event: "change"
    93    }
    94  });
    95  
    96  @Component({
    97    components: { BusParticipant, MaterielSkiParticipant, DetailsListeAttente }
    98  })
    99  export default class DetailsParticipant extends DetailsParticipantProps {
   100    visible = true;
   101  
   102    get joursLimitation() {
   103      if (C.data.metas == null) return 0;
   104      return C.data.metas.update_limitation / 24;
   105    }
   106    get personne() {
   107      return C.getPersonne(this.participant);
   108    }
   109  
   110    get camp(): CampPlus | null {
   111      return C.getCamp(this.participant) || null;
   112    }
   113  
   114    get isAttente() {
   115      return this.participant.liste_attente.statut != StatutAttente.Inscrit;
   116    }
   117  
   118    get hasBus() {
   119      return hasBus(this.camp);
   120    }
   121  
   122    get hasMaterielSki() {
   123      return hasMaterielSki(this.camp);
   124    }
   125  
   126    get hasOneOption() {
   127      return this.hasBus || this.hasMaterielSki;
   128    }
   129  
   130    get showLocked() {
   131      return this.hasOneOption && C.isModificationLocked(this.participant);
   132    }
   133  
   134    get mailDirecteurHref() {
   135      const mail = this.camp ? this.camp.mail_directeur : "";
   136      if (mail) {
   137        return `mailto:${mail}?subject=[Modification des options]`;
   138      }
   139      return "";
   140    }
   141  
   142    get mailHref() {
   143      if (C.data.metas == null) return "";
   144      const mail = C.data.metas.mail_centre_inscription;
   145      return `mailto:${mail}?subject=[Modification des options]`;
   146    }
   147  }
   148  </script>
   149  
   150  <style scoped></style>