github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/vote/personne/App.vue

<template>
  <base-app :title="title">
    <success v-if="output" :output="output"></success>
    <error v-if="output" :output="output"></error>

    <b-container class="my-2 mb-3 mx-auto">
      <b-card body-class="py-3 px-3">
        <b-card-title>
          <b-row>
            <b-col>
              Votes en cours
              <b-badge variant="fushia" v-if="votesCourants > 0">
                {{ votesCourants }}
              </b-badge>
            </b-col>
            <b-col class="text-right">
              <b-button
                :href="urlExportVotes"
                target="_blank"
                variant="info"
                title="Télécharger au format PDF"
              >
                <b-icon-download></b-icon-download>
                Capture
              </b-button>
              <b-button
                @click="refresh"
                variant="light"
                class="ml-2"
                v-b-tooltip
                title="Rafraichir les données"
              >
                <b-icon-arrow-repeat></b-icon-arrow-repeat>
              </b-button>
            </b-col>
          </b-row>
        </b-card-title>
        <b-overlay :show="loading">
          <b-card-text>
            <b-card v-for="(vote, i) in votes" :key="i" class="my-2">
              <b-card-title>
                {{ vote.nom }}
                <b-badge variant="warning" v-if="vote.is_locked"
                  >Vote cloturé</b-badge
                >
              </b-card-title>
              <b-card-sub-title class="mb-2">
                {{ vote.description }}</b-card-sub-title
              >
              <b-card-text>
                <div class="border rounded border-secondary px-2 pt-2">
                  <b-form-group>
                    <template v-slot:label>
                      Mon vote
                      <b-badge v-if="hasVoted(vote)">
                        dernier vote : {{ formatDateTime(vote.time) }}
                      </b-badge>
                    </template>
                    <b-form-checkbox-group
                      v-if="vote.is_qcm"
                      :checked="vote.choix || []"
                      @change="onCheckboxInputVote(vote, $event)"
                      :options="getItems(vote)"
                      :disabled="vote.is_locked"
                    >
                    </b-form-checkbox-group>
                    <b-form-radio-group
                      v-else
                      :options="getItems(vote)"
                      :checked="radioChecked(vote.choix)"
                      @change="onRadioInputVote(vote, $event)"
                      :disabled="vote.is_locked"
                    >
                    </b-form-radio-group>
                  </b-form-group>
                </div>
              </b-card-text>
              <b-row>
                <b-col>
                  <b-button
                    :variant="isVoteDeletable(vote) ? 'danger' : 'light'"
                    :disabled="!isVoteDeletable(vote)"
                    @click="resetVote(vote)"
                    >Effacer mon vote</b-button
                  >
                </b-col>
                <b-col class="text-right">
                  <b-button
                    :variant="isVoteDoable(vote) ? 'success' : 'light'"
                    @click="save(vote)"
                    :disabled="!isVoteDoable(vote)"
                    >Enregistrer mon vote</b-button
                  >
                </b-col>
              </b-row>
            </b-card>
          </b-card-text>
        </b-overlay>
      </b-card>
    </b-container>
  </base-app>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import BaseApp from "@/BaseApp.vue";
import Success from "@/shared/notifications/Success.vue";
import Error from "@/shared/notifications/Error.vue";
import { C, BASE_URL } from "./controller";
import { VotePersonneComplet, Ids, MetaPersonne } from "@/shared/logic/types";
import {
  formatDateTime,
  decodeServerPayload,
  isNullDateString
} from "../../../shared/logic/utils";

type DirtyVote = VotePersonneComplet & { isDirty?: boolean };

@Component({
  components: { BaseApp, Success, Error }
})
export default class App extends Vue {
  personne = decodeServerPayload<MetaPersonne>();

  output = C.notifications;
  loading = false;
  votes: DirtyVote[] = [];

  formatDateTime = formatDateTime;

  urlExportVotes = BASE_URL + "/export";

  created() {
    this.refresh();
  }

  async refresh() {
    this.loading = true;
    const data = await C.getVotes();
    this.loading = false;
    if (data == undefined) return;
    this.votes = data || [];
    C.notifications.success = {
      title: "Propositions",
      message: "Propositions chargées"
    };
  }

  get title() {
    if (this.personne == null) return "";
    return "Page de vote de " + this.personne.prenom_nom;
  }

  get votesCourants() {
    return this.votes.filter(v => isNullDateString(v.time)).length;
  }

  getItems(vote: VotePersonneComplet) {
    return (vote.candidats || []).map(cd => {
      return { value: cd.id, text: cd.label };
    });
  }

  hasVoted(vote: VotePersonneComplet) {
    return !isNullDateString(vote.time);
  }

  isVoteDeletable(vote: VotePersonneComplet) {
    return !vote.is_locked && this.hasVoted(vote);
  }

  isVoteDoable(vote: DirtyVote) {
    return !vote.is_locked && vote.isDirty;
  }

  onCheckboxInputVote(vote: DirtyVote, choix: number[]) {
    vote.choix = choix;
    vote.isDirty = true;
  }

  radioChecked(choix: Ids) {
    choix = choix || [];
    if (choix.length > 0) {
      return choix[0];
    }
    return null;
  }

  onRadioInputVote(vote: DirtyVote, choix: number | null) {
    vote.choix = choix == null ? [] : [choix];
    vote.isDirty = true;
  }

  async save(vote: VotePersonneComplet) {
    this.loading = true;
    const data = await C.doVote(vote);
    this.loading = false;
    if (data == undefined) return;
    this.votes = data || [];
    C.notifications.success = {
      title: "Vote",
      message: "Votre vote a bien été enregistré. Merci !"
    };
  }

  async resetVote(vote: VotePersonneComplet) {
    this.loading = true;
    const data = await C.resetVote(vote.id);
    this.loading = false;
    if (data == undefined) return;
    this.votes = data || [];
    C.notifications.success = {
      title: "Suppression",
      message: "Votre vote a bien été effacé."
    };
  }
}
</script>

<style></style>