bdlg-planner-front/src/components/ManageRegistration.vue

<template>
  <dots v-if="loading" />
  <div v-else class="container">
    <div>
      <h3>Liste de demande d'inscription des bénévoles</h3>
      <div class="actions">
        <button class="btn small primary" @click="importSelected">
          <i class="material-icons">input</i>Importer la selection
        </button>
        <button class="btn small error" @click="deleteSelected">
          <i class="material-icons">delete_forever</i>Supprimer la selection
        </button>
      </div>

      <table>
        <thead>
          <tr>
            <th @click="selectAll">
              <i class="material-icons">{{ topBox }}</i>
            </th>
            <th>Nom</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="b in inscriptions" :key="b.id">
            <td @click="toggle(b.id)">
              <i class="material-icons">{{ checkbox(b.id) }}</i>
            </td>
            <td @click="display(b.id)">{{ b.name }}, {{ b.surname }}</td>
            <td @click="display(b.id)">{{ b.email }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="benevole-preview">
      <div v-if="benevole">
        <h3>Demande d'inscription</h3>
        <div class="field"><span>Nom</span>{{ benevole.surname }}</div>
        <div class="field"><span>Prénom</span>{{ benevole.name }}</div>
        <div class="field"><span>Téléphone</span>{{ benevole.phone }}</div>
        <div class="field"><span>Email</span>{{ benevole.email }}</div>
        <div class="field"><span>Commentaire</span><br />{{ benevole.comment }}</div>
        <div>
          <h4>Competences & Préférence</h4>
          <div class="chip" v-for="id in benevole.competenceIdList" :key="id">
            <span class="chip-label">{{ getCompetenceName(id) }}</span>
          </div>
        </div>
      </div>
      <div v-else>Cliquer sur un ligne</div>
    </div>
  </div>
</template>

<script lang="ts">
import Benevole, { BenevoleJSON } from "@/models/Benevole";
import { defineComponent } from "vue";

import dots from "@/components/Dots.vue";
import { MutationTypes } from "@/store/Mutations";

const API_URL = process.env.VUE_APP_API_URL;

export default defineComponent({
  components: { dots },
  data() {
    return {
      inscriptions: [] as Array<BenevoleJSON>,
      loading: true,
      selected: [] as Array<number>,
      benevole: null as null | BenevoleJSON,
    };
  },
  methods: {
    toggle(id: number) {
      if (this.selected.includes(id)) {
        this.selected = this.selected.filter((o) => o != id);
      } else {
        this.selected.push(id);
      }
    },
    display(id: number) {
      this.benevole = this.inscriptions.find((b) => b.id == id) ?? null;
    },
    checkbox(id: number) {
      return this.selected.includes(id) ? "check_box" : "check_box_outline_blank";
    },
    selectAll() {
      this.selected =
        this.selected.length == this.inscriptions.length
          ? []
          : (this.inscriptions.map((b) => b.id) as Array<number>);
    },
    importSelected() {
      for (const benevole of this.selectedInscriptions) {
        this.$store.commit(
          MutationTypes.addBenevole,
          Benevole.fromJSON({ ...benevole, id: undefined })
        );
      }
      this.deleteSelected();
    },
    deleteSelected() {
      for (const benevole of this.selectedInscriptions) {
        fetch(`${API_URL}api/inscription/${this.uuid}/${benevole.id}`, { method: "DELETE" }).then(
          (res) => {
            if (res.status == 200) {
              return res.json();
            } else {
              throw new Error(res.statusText);
            }
          }
        );
      }
      this.inscriptions = this.inscriptions.filter((b) => b.id && !this.selected.includes(b.id));
      this.selected = [];
    },
    getCompetenceName(id: number): string {
      return this.$store.getters.getCompetenceById(id)?.name ?? "";
    },
  },
  computed: {
    uuid(): string {
      return this.$store.state.evenement.uuid;
    },
    selectedInscriptions(): Array<BenevoleJSON> {
      return this.inscriptions.filter((b) => b.id && this.selected.includes(b.id));
    },
    topBox(): string {
      if (this.selected.length == 0) {
        return "check_box_outline_blank";
      } else {
        if (this.selected.length == this.inscriptions.length) {
          return "check_box";
        } else {
          return "indeterminate_check_box";
        }
      }
    },
  },
  mounted() {
    fetch(`${API_URL}api/inscription/${this.uuid}`)
      .then((res) => {
        if (res.status == 200) {
          return res.json();
        } else {
          throw new Error(res.statusText);
        }
      })
      .then((data: Array<BenevoleJSON>) => {
        this.inscriptions = data;
        this.loading = false;
      });
  },
});
</script>

<style scoped>
.container {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: flex-start;
}
@media screen and (min-width: 769px) {
  .container {
    gap: 8px;
  }
}
.benevole-preview {
  padding: 12px;
  width: 400px;
  box-shadow: 0 0 2px 2px var(--color-neutral-600);
}
.benevole-preview > div > div {
  padding: 8px;
}
.field > span {
  font-weight: bold;
  display: inline-block;
  min-width: 100px;
}
.field > span:after {
  content: " :";
}
.chip {
  margin-right: 4px;
  margin-bottom: 4px;
}
.actions {
  display: inline-flex;
  justify-content: left;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.actions > .btn {
  margin-right: 4px;
  margin-bottom: 4px;
}
table {
  max-width: 800px;
  width: calc(100vw - 690px);
  border-collapse: collapse;
}
td,
th {
  padding: 0.5rem;
  width: calc(50% - 24px - 1rem);
}
tr > *:first-child {
  width: calc(24px + 1rem);
  cursor: pointer;
}
tr {
  border-bottom: 1px solid #ddd;
}
tr:nth-child(even) {
  background-color: #eeeeee;
}
tbody tr:hover {
  background: var(--color-neutral-800);
}

thead > tr {
  border-bottom-width: 2px;
}
</style>