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

     1  <template>
     2    <v-container fluid>
     3      <v-dialog v-model="showListeFicheSanitaire" max-width="1200px">
     4        <fiches-sanitaires :items="items"></fiches-sanitaires>
     5      </v-dialog>
     6  
     7      <v-dialog v-model="showEditDialog" max-width="1200px">
     8        <form-inscrit
     9          :inscrit="editedInscrit"
    10          :groupes="groupes"
    11          withButtons
    12          @reject="showEditDialog = false"
    13          @accept="saveRemoteChange"
    14        ></form-inscrit>
    15      </v-dialog>
    16  
    17      <v-dialog v-model="showExportDialog" max-width="400px">
    18        <form-export
    19          @reject="showExportDialog = false"
    20          @accept="downloadListe"
    21          :currentBus="filterBus"
    22          :currentAttente="showAttente"
    23        ></form-export>
    24      </v-dialog>
    25  
    26      <v-dialog v-model="showGroupesDialog" max-width="1200px">
    27        <liste-groupes
    28          :attributions="attributions"
    29          @reject="showGroupesDialog = false"
    30        ></liste-groupes>
    31      </v-dialog>
    32  
    33      <v-dialog v-model="showContraintesDialog">
    34        <panel-contraintes></panel-contraintes>
    35      </v-dialog>
    36  
    37      <v-dialog v-model="showMessagesDialog" max-width="800px">
    38        <panel-messages :messages="messages"></panel-messages>
    39      </v-dialog>
    40  
    41      <v-dialog v-model="showInfosParticulieresDialog" max-width="1200px">
    42        <panel-infos-particulieres
    43          :infos="infosParticulieres"
    44        ></panel-infos-particulieres>
    45      </v-dialog>
    46  
    47      <v-toolbar dense>
    48        <v-menu open-on-hover bottom offset-y>
    49          <template v-slot:activator="{ on }">
    50            <v-btn v-on="on" icon>
    51              <v-icon>{{ $icons["mdi-information-outline"] }}</v-icon>
    52            </v-btn>
    53          </template>
    54          <v-card>
    55            <v-card-text>
    56              <b>{{ nbInscrits }}</b> inscrit(s)
    57              <br />
    58              <span :style="{ color: 'gray' }">
    59                <b>{{ nbTemporaires }}</b> en attente de validation
    60              </span>
    61              <br />
    62              <span :style="{ color: COULEUR_ATTENTE }">
    63                <b>{{ nbAttente }}</b> en liste d'attente
    64              </span>
    65              <br />
    66              <v-tooltip bottom>
    67                <template v-slot:activator="{ on }">
    68                  <span v-on="on" :style="{ color: COULEUR_ANNIVERSAIRE }">
    69                    <b>{{ anniversaires.length }}</b> anniversaire(s) pendant le
    70                    séjour
    71                  </span>
    72                </template>
    73                {{ anniversaires.join(", ") }}
    74              </v-tooltip>
    75              <br />
    76              <span :style="{ color: COULEUR_INFO }">
    77                <b>{{ nbInfos }}</b> information(s) particulière(s)
    78              </span>
    79            </v-card-text>
    80          </v-card>
    81        </v-menu>
    82  
    83        <v-toolbar-title>
    84          Liste des inscrits
    85  
    86          <v-chip>{{ items.length }}</v-chip>
    87        </v-toolbar-title>
    88        <v-spacer></v-spacer>
    89        <v-toolbar-items>
    90          <tooltip-btn
    91            tooltip="Export au format Excel des inscrits..."
    92            @click="showExportDialog = true"
    93            text
    94            small
    95          >
    96            <v-icon class="mr-1">{{ $icons["mdi-download"] }}</v-icon>
    97            Exporter
    98          </tooltip-btn>
    99  
   100          <!-- Export rapides des mails -->
   101          <v-menu>
   102            <template v-slot:activator="{ on: menu }">
   103              <v-tooltip bottom>
   104                <template v-slot:activator="{ on: tooltip }">
   105                  <v-btn v-on="{ ...tooltip, ...menu }" depressed>Mails</v-btn>
   106                </template>
   107                Envoyer un mail aux inscrits...
   108              </v-tooltip>
   109            </template>
   110            <v-list>
   111              <v-list-item>
   112                <v-list-item-content>
   113                  <a :href="mailToInscrits"
   114                    >Mail aux inscrits (sans liste d'attente)</a
   115                  >
   116                </v-list-item-content>
   117                <v-list-item-action>
   118                  <tooltip-btn
   119                    tooltip="Copier les adresses"
   120                    @click="copyMailsToClipboard()"
   121                    icon
   122                  >
   123                    <v-icon>{{ $icons["mdi-content-copy"] }} </v-icon>
   124                  </tooltip-btn>
   125                </v-list-item-action>
   126              </v-list-item>
   127            </v-list>
   128          </v-menu>
   129  
   130          <v-divider vertical></v-divider>
   131          <tooltip-btn
   132            tooltip="Afficher les demandes particulières..."
   133            @click="showInfosParticulieres"
   134            icon
   135            :color="COULEUR_INFO"
   136          >
   137            <v-icon class="mr-1">{{ $icons["mdi-email"] }}</v-icon>
   138          </tooltip-btn>
   139          <v-divider vertical></v-divider>
   140          <tooltip-btn
   141            tooltip="Accéder aux <b>fiches sanitaires</b> <br />
   142            des participants..."
   143            @click="showListeFicheSanitaire = true"
   144            icon
   145          >
   146            <v-icon class="mr-1">{{ $icons["mdi-hospital-box-outline"] }}</v-icon>
   147          </tooltip-btn>
   148          <v-divider vertical></v-divider>
   149          <toolbar-switch
   150            v-model="showAttente"
   151            label="Liste d'attente"
   152            tooltipOn="Afficher/Masquer la liste d'attente"
   153            :color="COULEUR_ATTENTE"
   154          >
   155          </toolbar-switch>
   156          <v-divider vertical></v-divider>
   157          <v-menu>
   158            <template v-slot:activator="{ on: menu }">
   159              <v-tooltip bottom>
   160                <template v-slot:activator="{ on: tooltip }">
   161                  <v-btn
   162                    v-on="{ ...tooltip, ...menu }"
   163                    :color="filterBus ? 'accent' : ''"
   164                    depressed
   165                    >Bus</v-btn
   166                  >
   167                </template>
   168                Filter par trajet en bus...
   169              </v-tooltip>
   170            </template>
   171            <v-list>
   172              <v-list-item
   173                @click="filterBus = bus.value"
   174                v-for="bus in busItems"
   175                :key="bus.value"
   176                >{{ bus.text }}
   177              </v-list-item>
   178            </v-list>
   179          </v-menu>
   180  
   181          <v-divider vertical></v-divider>
   182          <tooltip-btn
   183            tooltip="Créer et modifier les groupes..."
   184            @click="showGroupesDialog = true"
   185            text
   186            small
   187          >
   188            <v-icon class="mr-1">{{ $icons["mdi-account-multiple"] }}</v-icon
   189            >Groupes
   190          </tooltip-btn>
   191          <tooltip-btn
   192            tooltip="Demander et récupérer des documents à remplir..."
   193            @click="showContraintesDialog = true"
   194            text
   195            small
   196          >
   197            <v-icon class="mr-1">{{ $icons["mdi-folder"] }}</v-icon
   198            >Documents
   199          </tooltip-btn>
   200        </v-toolbar-items>
   201      </v-toolbar>
   202  
   203      <v-data-table
   204        :headers="header"
   205        :items="items"
   206        must-sort
   207        class="mt-2"
   208        dense
   209        hide-default-footer
   210        fixed-header
   211        height="68vh"
   212        :items-per-page="9999"
   213        show-expand
   214        @click:row="
   215          item => {
   216            editedInscrit = item;
   217            showEditDialog = true;
   218          }
   219        "
   220        id="inscrits"
   221      >
   222        <template v-slot:no-data>
   223          <v-alert :value="true" type="warning" class="ma-1">
   224            Aucun participant présent.
   225            <br />
   226            <i>Pensez à vérifier les filtres (bus et liste d'attente).</i>
   227          </v-alert>
   228        </template>
   229  
   230        <template v-slot:[`item.has_info`]="{ item }">
   231          <tooltip-btn
   232            tooltip="Afficher le suivi de l'inscription..."
   233            small
   234            icon
   235            v-if="asI(item).responsable.valide"
   236            :color="has_messages(item) ? COULEUR_INFO : ''"
   237            @click.stop="showMessages(item)"
   238          >
   239            <v-icon>{{ $icons["mdi-email"] }}</v-icon>
   240          </tooltip-btn>
   241        </template>
   242  
   243        <template v-slot:[`item.paiement_complet`]="{ item }">
   244          <v-tooltip bottom>
   245            <template v-slot:activator="{ on }">
   246              <v-icon v-on="on" :color="colorPaiement(asI(item))">{{
   247                $icons["mdi-currency-usd"]
   248              }}</v-icon>
   249            </template>
   250            {{ tooltipPaiement(asI(item)) }}
   251          </v-tooltip>
   252        </template>
   253  
   254        <template v-slot:[`item.nom`]="{ item }">
   255          <span
   256            :style="{
   257              color: asI(item).is_attente ? COULEUR_ATTENTE : ''
   258            }"
   259          >
   260            {{ asI(item).nom }}
   261          </span>
   262        </template>
   263        <template v-slot:[`item.prenom`]="{ item }">
   264          <span
   265            :style="{
   266              color: asI(item).is_attente ? COULEUR_ATTENTE : ''
   267            }"
   268          >
   269            {{ asI(item).prenom }}
   270          </span>
   271        </template>
   272  
   273        <template v-slot:[`item.id_groupe`]="{ item }">
   274          <GroupeChip v-if="getGroupe(item)" :groupe="getGroupe(item)" />
   275        </template>
   276  
   277        <template v-slot:[`item.date_naissance`]="{ item }">
   278          <v-tooltip bottom :disabled="!asI(item).has_anniversaire">
   279            <template v-slot:activator="{ on }">
   280              <span
   281                v-on="on"
   282                :style="{
   283                  color: asI(item).has_anniversaire ? COULEUR_ANNIVERSAIRE : '',
   284                  fontWeight: asI(item).has_anniversaire ? 'bold' : ''
   285                }"
   286              >
   287                {{ fmt.date(asI(item).date_naissance) }}
   288              </span>
   289            </template>
   290            {{ asI(item).prenom }} a son <b>anniversaire</b> pendant le séjour.
   291          </v-tooltip>
   292        </template>
   293  
   294        <template v-slot:[`item.sexe`]="{ item }">
   295          {{ fmt.sexe(asI(item).sexe) }}
   296        </template>
   297  
   298        <template v-slot:[`item.options.bus`]="{ item }">
   299          {{ fmt.bus(asI(item).options.bus) }}
   300        </template>
   301  
   302        <template v-slot:expanded-item="{ item, headers }">
   303          <td :colspan="headers.length" class="pa-1">
   304            <v-card text>
   305              <v-card-text>
   306                <v-row>
   307                  <v-col cols="2">
   308                    <div class="label-responsable">
   309                      <h4 class="text-right">Contact</h4>
   310                    </div>
   311                  </v-col>
   312  
   313                  <v-col cols="4">
   314                    <span
   315                      v-html="renderResponsableHtml(asI(item).responsable)"
   316                    ></span>
   317                  </v-col>
   318  
   319                  <v-col cols="2">
   320                    <div class="label-responsable">
   321                      <h4 class="text-right">Contact supplémentaire</h4>
   322                    </div>
   323                  </v-col>
   324                  <v-col v-if="asI(item).responsable.mails_copies">
   325                    <v-row
   326                      v-for="(mail, i) in asI(item).responsable.mails_copies ||
   327                        []"
   328                      :key="i"
   329                      no-gutters
   330                    >
   331                      <v-col> {{ mail }} </v-col>
   332                    </v-row>
   333                  </v-col>
   334                </v-row>
   335              </v-card-text>
   336            </v-card>
   337          </td>
   338        </template>
   339      </v-data-table>
   340    </v-container>
   341  </template>
   342  
   343  <script lang="ts">
   344  import Inscrits from "./inscrits_complets";
   345  export default Inscrits;
   346  </script>
   347  
   348  <style>
   349  #inscrits tr:hover {
   350    cursor: pointer;
   351  }
   352  </style>