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

     1  <template>
     2    <div>
     3      <v-dialog v-model="showUpload">
     4        <v-card>
     5          <v-card-title class="headline">
     6            Remplacer le document sur le serveur
     7          </v-card-title>
     8          <v-card-text>
     9            <v-file-input
    10              label="Fichier"
    11              v-model="uploadFile.file"
    12              :prepend-icon="$icons['mdi-paperclip']"
    13              :rules="[v => !!v || 'Document requis.']"
    14              accept=".jpg,.jpeg,.png,.pdf"
    15              show-size
    16            ></v-file-input>
    17  
    18            <v-card-actions>
    19              <v-spacer></v-spacer>
    20              <v-btn @click="uploadDocument" :disabled="!fileValid">
    21                Remplacer
    22              </v-btn>
    23            </v-card-actions>
    24          </v-card-text>
    25        </v-card>
    26      </v-dialog>
    27  
    28      <v-dialog v-model="showDelete">
    29        <v-card v-if="deleteFile != null">
    30          <v-card-title class="headline">
    31            Supprimer définitivement le document
    32          </v-card-title>
    33          <v-card-text>
    34            Etes-vous sûr de vouloir supprimer
    35            <b>{{ deleteFile.nom_client }}</b> ?
    36            <br />
    37            Attention, cette opération est irréversible ! <br />
    38            <v-card-actions>
    39              <v-spacer></v-spacer>
    40              <v-btn @click="deleteDocument" class="error">
    41                Supprimer
    42              </v-btn>
    43            </v-card-actions>
    44          </v-card-text>
    45        </v-card>
    46      </v-dialog>
    47      <v-data-table
    48        :items="items"
    49        :headers="headers"
    50        hide-default-footer
    51        fixed-header
    52        height="75vh"
    53        class="ma-1"
    54        :items-per-page="9999"
    55      >
    56        <template v-slot:[`item.miniature`]="{ item }">
    57          <v-img
    58            :src="asI(item).document.url_miniature"
    59            height="100px"
    60            width="70px"
    61          ></v-img>
    62        </template>
    63  
    64        <template v-slot:[`item.contrainte`]="{ item }">
    65          {{ asI(item).contrainte.nom }}
    66        </template>
    67  
    68        <template v-slot:[`item.taille`]="{ item }">
    69          {{ fmt.taille(asI(item).document.taille) }}
    70        </template>
    71  
    72        <template v-slot:[`item.date_heure_modif`]="{ item }">
    73          {{ fmt.date_heure(asI(item).document.date_heure_modif) }}
    74        </template>
    75  
    76        <template v-slot:[`item.actions`]="{ item }">
    77          <tooltip-btn
    78            tooltip="Remplacer"
    79            icon
    80            color="success"
    81            class="mr-2"
    82            @click="setupUpload(asI(item).document)"
    83          >
    84            <v-icon>{{ $icons["mdi-upload"] }}</v-icon>
    85          </tooltip-btn>
    86  
    87          <tooltip-btn
    88            tooltip="Télécharger"
    89            icon
    90            :href="asI(item).document.url_download"
    91          >
    92            <v-icon>{{ $icons["mdi-download"] }}</v-icon>
    93          </tooltip-btn>
    94          <tooltip-btn
    95            tooltip="Supprimer"
    96            icon
    97            @click="setupDelete(asI(item).document)"
    98            color="red"
    99          >
   100            <v-icon>{{ $icons["mdi-delete"] }}</v-icon>
   101          </tooltip-btn>
   102        </template>
   103  
   104        <template v-slot:no-data>
   105          Aucun document n'est présent.
   106        </template>
   107      </v-data-table>
   108    </div>
   109  </template>
   110  
   111  <script lang="ts">
   112  import Vue from "vue";
   113  import Component from "vue-class-component";
   114  import { C } from "../../logic/controller";
   115  import { PublicDocument } from "../../logic/types";
   116  import { Formatter } from "../../logic/formatter";
   117  import TooltipBtn from "@/components/TooltipBtn.vue";
   118  import { DocumentContrainte } from "./documents";
   119  
   120  export interface UploadFile {
   121    file: File | null;
   122    id_crypted: string;
   123  }
   124  
   125  const DetailsDocumentsProps = Vue.extend({
   126    props: {
   127      items: Array as () => DocumentContrainte[]
   128    }
   129  });
   130  @Component({
   131    components: { TooltipBtn }
   132  })
   133  export default class DetailsDocuments extends DetailsDocumentsProps {
   134    showUpload = false;
   135    uploadFile: UploadFile = {
   136      file: null,
   137      id_crypted: ""
   138    };
   139    showDelete = false;
   140    deleteFile: PublicDocument | null = null;
   141    headers = [
   142      { text: "", value: "miniature", sortable: false },
   143      {
   144        text: "Catégorie",
   145        value: "contrainte"
   146      },
   147      {
   148        text: "Nom",
   149        value: "document.nom_client"
   150      },
   151      { text: "Taille", value: "taille" },
   152      { text: "Dernière modification", value: "date_heure_modif" },
   153      { text: "", value: "actions", sortable: false }
   154    ];
   155  
   156    fmt = Formatter;
   157    asI = (item: DocumentContrainte) => item; /** template typechecking */
   158    C = C; //reactivity
   159  
   160    get fileValid() {
   161      // on évite un double clic
   162      return !!this.uploadFile.file && !C.notifications.progress;
   163    }
   164  
   165    async uploadDocument() {
   166      if (this.uploadFile.file == null) return;
   167      this.$emit("change", this.uploadFile);
   168      this.showUpload = false;
   169    }
   170  
   171    deleteDocument() {
   172      const doc = this.deleteFile;
   173      if (doc == null) return;
   174      this.$emit("delete", doc.id_crypted);
   175      this.showDelete = false;
   176    }
   177  
   178    setupUpload(item: PublicDocument) {
   179      this.uploadFile.id_crypted = item.id_crypted;
   180      this.showUpload = true;
   181    }
   182    setupDelete(item: PublicDocument) {
   183      this.deleteFile = item;
   184      this.showDelete = true;
   185    }
   186  }
   187  </script>
   188  
   189  <style scoped></style>