github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/components/home/DetailsII.vue

<template>
  <v-card flat>
    <v-card-text>
      <v-alert type="info" :value="true" dismissible>
        Vous pouvez ici choisir les <b>documents</b> affichés dans l'espace de
        suivi des responsables.
        <br />
        La <b>fiche sanitaire</b> est automatiquement demandée pour les
        participants mineurs. <br />
        En plus des trois documents standards, vous pouvez publier des documents
        supplémentaires, à ajouter ci-dessous.
      </v-alert>
      <v-alert
        v-model="lockAlert"
        :type="envois.__locked__ ? 'warning' : 'success'"
      >
        <span v-html="lockInfo"></span>
      </v-alert>
      <v-row justify-space-between>
        <v-col xs="12" md="3">
          <v-checkbox
            v-model="envois.lettre_directeur"
            label="Afficher la lettre du directeur"
          ></v-checkbox>
        </v-col>
        <v-col xs="12" md="3">
          <v-checkbox
            v-model="envois.liste_vetements"
            label="Afficher la liste de vêtements"
          ></v-checkbox>
        </v-col>
        <v-col xs="12" md="3">
          <v-checkbox
            v-model="envois.liste_participants"
            label="Afficher une liste des participants"
          ></v-checkbox>
        </v-col>
        <v-col style="margin: auto;" class="text-right">
          <v-btn @click="saveEnvois" class="success" :disabled="isEnvoisSame">
            <v-icon v-if="envois.__locked__">{{
              $icons["mdi-lock-open"]
            }}</v-icon>
            {{
              envois.__locked__ ? "Déverrouiller et sauvegarder" : "Sauvegarder"
            }}
          </v-btn>
        </v-col>
      </v-row>

      <v-card>
        <v-card-title class="subtitle-2">Pièces jointes</v-card-title>
        <v-card-text>
          <v-row v-for="pj in pieces_jointes" :key="pj.id_crypted">
            <v-col xs="6" sm="3">
              <v-img
                :src="pj.url_miniature"
                height="100px"
                width="70px"
              ></v-img>
            </v-col>
            <v-col xs="6" sm="6">
              <b>{{ pj.nom_client }}</b>
              <br />
              modifié le {{ date_heure(pj.date_heure_modif) }}
              <br />
              taille: {{ taille(pj.taille) }}
            </v-col>
            <v-col xs="12" sm="3" style="margin: auto;">
              <tooltip-btn tooltip="Télécharger" icon :href="pj.url_download">
                <v-icon>{{ $icons["mdi-download"] }}</v-icon>
              </tooltip-btn>
              <tooltip-btn
                tooltip="Supprimer"
                icon
                @click="deletePieceJointe(pj)"
              >
                <v-icon>{{ $icons["mdi-close"] }}</v-icon>
              </tooltip-btn>
            </v-col>
          </v-row>

          <v-row>
            <v-col xs="12" md="9">
              <v-file-input
                label="Pièce jointe supplémentaire"
                v-model="bonusFile"
                :prepend-icon="$icons['mdi-paperclip']"
                accept=".jpg, .jpeg, .png, .pdf"
                show-size
              ></v-file-input>
            </v-col>
            <v-col xs="12" md="3" class="text-right" style="margin: auto;">
              <v-btn
                color="success"
                :disabled="!bonusFile"
                @click="uploadPieceJointe"
                >Ajouter</v-btn
              >
            </v-col>
          </v-row>
        </v-card-text>
      </v-card>
    </v-card-text>
  </v-card>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Envois, DetailsEnvoisOut, PublicDocument } from "../../logic/types";
import { C } from "../../logic/controller";
import { Formatter } from "../../logic/formatter";
import TooltipBtn from "@/components/TooltipBtn.vue";

const DetailsIIProps = Vue.extend({
  props: {}
});

@Component({
  components: { TooltipBtn }
})
export default class DetailsII extends DetailsIIProps {
  date_heure = Formatter.date_heure;
  taille = Formatter.taille;

  lockAlert = true;
  initialEnvois: Envois = {
    __locked__: true,
    lettre_directeur: false,
    liste_participants: false,
    liste_vetements: false
  };

  envois: Envois = {
    __locked__: true,
    lettre_directeur: false,
    liste_participants: false,
    liste_vetements: false
  };

  pieces_jointes: PublicDocument[] = [];
  bonusFile = null;

  get lockInfo() {
    if (this.envois.__locked__) {
      return `L'envoi des documents est verrouillé. <br/>
        Le centre d'inscription ne peut donc pas, pour l'instant, envoyer une notification. <br/>
        Une fois vos documents prêts, penser à en notifier le centre d'inscriptions à l'aide du bouton <b>Déverrouiller et sauvegarder</b>.<br/>
        <small>
        Veuillez noter qu'il s'agit simplement d'une notification, et non pas de l'envoi effectif des mails aux contacts.
        </small>
        `;
    } else {
      return "L'envoi des documents est déverrouillé. <br/> Le centre d'inscription peut envoyer à tout moment un mail de notification.";
    }
  }

  get isEnvoisSame() {
    return (
      !this.envois.__locked__ &&
      !this.envois.lettre_directeur == !this.initialEnvois.lettre_directeur &&
      !this.envois.liste_vetements == !this.initialEnvois.liste_vetements &&
      !this.envois.liste_participants == !this.initialEnvois.liste_participants
    );
  }

  async created() {
    const r = await C.getDetails("envois");
    if (r != undefined) {
      this.pieces_jointes = r.pieces_jointes || [];
      this.setEnvois(r);
      C.notifications.success = ""; // hide progress
    }
  }

  private setEnvois(data: DetailsEnvoisOut) {
    this.envois = data.envois;
    this.initialEnvois = JSON.parse(JSON.stringify(data.envois));
  }

  async saveEnvois() {
    this.envois.__locked__ = false; // besoin de délock pour le serveur.
    const r = await C.updateDetails("envois", this.envois);
    if (r != undefined) {
      C.notifications.success = "Préférences d'envois bien modifiées.";
      this.setEnvois(r);
    }
  }

  async uploadPieceJointe() {
    const file = this.bonusFile;
    if (file == null) return;

    const docPub = await C.addBonusDoc(file);
    if (docPub == undefined) return;
    this.pieces_jointes.push(docPub);
    C.notifications.success = "Document ajouté avec succès.";
    this.bonusFile = null;
  }

  async deletePieceJointe(doc: PublicDocument) {
    const ok = await C.deleteDocument(doc.id_crypted);
    if (ok) {
      this.pieces_jointes = this.pieces_jointes.filter(
        r => r.id_crypted != doc.id_crypted
      );
      C.notifications.success = "Document supprimé avec succés.";
    }
  }
}
</script>

<style scoped></style>