github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/vote/admin/Membres.vue (about)

     1  <template>
     2    <b-card>
     3      <b-card-title>
     4        <b-row no-gutters class="w-100">
     5          <b-col>Liste des membres</b-col>
     6          <b-col class="text-right">
     7            <b-button variant="accent" @click="inviteAll">
     8              <b-icon-envelope></b-icon-envelope>
     9              Inviter tous les membres
    10            </b-button>
    11            <b-button
    12              @click="refresh"
    13              variant="light"
    14              title="Rafraichir les données"
    15              class="ml-2"
    16            >
    17              <b-icon-arrow-repeat></b-icon-arrow-repeat>
    18            </b-button>
    19          </b-col>
    20        </b-row>
    21      </b-card-title>
    22      <b-overlay :show="loading" class="overflow-auto" style="height: 60vh">
    23        <b-table-lite :items="membres" :fields="fields" small striped>
    24          <template v-slot:cell(lien)="{ item }">
    25            <a :href="item.lien" target="_blank">{{ item.lien }}</a>
    26          </template>
    27          <template v-slot:cell(participation)="{ item }">
    28            <span v-b-tooltip.html :title="participation(item)"
    29              >{{ item.participation.actuels }} / {{ item.participation.total }}
    30            </span>
    31          </template>
    32          <template v-slot:cell(invite)="{ item }">
    33            <b-button @click="inviteOne(item)" size="sm" variant="accent">
    34              <b-icon-envelope></b-icon-envelope>
    35            </b-button>
    36          </template>
    37        </b-table-lite>
    38      </b-overlay>
    39    </b-card>
    40  </template>
    41  
    42  <script lang="ts">
    43  import Vue from "vue";
    44  import Component from "vue-class-component";
    45  import { C } from "./controller";
    46  import { Membre } from "@/shared/logic/types";
    47  import { isNullDateString, formatDateTime } from "../../../shared/logic/utils";
    48  import Axios from "axios";
    49  
    50  const MembresProps = Vue.extend({
    51    props: {}
    52  });
    53  
    54  @Component({})
    55  export default class Membres extends MembresProps {
    56    loading = false;
    57  
    58    fields: {
    59      key: "invite" | keyof Membre;
    60      label: string;
    61      tdClass?: string;
    62    }[] = [
    63      { key: "nom_prenom", label: "Membre" },
    64      { key: "mail", label: "Adresse mail" },
    65      { key: "lien", label: "Lien de vote" },
    66      { key: "participation", label: "Participation", tdClass: "text-center" },
    67      { key: "invite", label: "Inviter" }
    68    ];
    69  
    70    C = C;
    71  
    72    get membres() {
    73      return C.membres;
    74    }
    75  
    76    created() {
    77      this.refresh();
    78    }
    79  
    80    async refresh() {
    81      this.loading = true;
    82      const ok = await C.getMembres();
    83      this.loading = false;
    84      if (ok == undefined) return;
    85      C.notifications.success = {
    86        title: "Membres",
    87        message: "Liste des membres chargées."
    88      };
    89    }
    90  
    91    participation(item: Membre) {
    92      if (isNullDateString(item.participation.last)) return "";
    93  
    94      return `dernier vote le <b>${formatDateTime(item.participation.last)}</b>`;
    95    }
    96  
    97    async inviteOne(item: Membre) {
    98      this.loading = true;
    99      const ok = await C.inviteOne(item);
   100      this.loading = false;
   101      if (ok === undefined) return;
   102      C.notifications.success = {
   103        title: "Mail",
   104        message: "Mail d'invitation envoyé avec succés."
   105      };
   106    }
   107  
   108    inviteAll() {
   109      this.$bvModal
   110        .msgBoxConfirm("Confirmez-vous l'envoi des mails ?", {
   111          title: "Envois",
   112          cancelTitle: "Retour"
   113        })
   114        .then(value => {
   115          if (value) {
   116            this.doInviteAll();
   117          }
   118        });
   119    }
   120  
   121    async doInviteAll() {
   122      this.loading = true;
   123      const ok = await C.inviteAll();
   124      this.loading = false;
   125      if (ok === undefined) return;
   126      C.notifications.success = {
   127        title: "Mails",
   128        message: "Tous les mails ont étés envoyés."
   129      };
   130    }
   131  }
   132  </script>
   133  
   134  <style scoped></style>