github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/shared/ControleDocument.vue (about)

     1  <template>
     2    <div>
     3      <b-modal
     4        v-model="showUpload"
     5        hide-header-close
     6        hide-footer
     7        size="lg"
     8        title="Modifier le document"
     9      >
    10        <b-row class="mb-2">
    11          <b-col cols="8">
    12            Document actuel :
    13            <div v-html="descriptionDocument"></div>
    14          </b-col>
    15          <b-col cols="4">
    16            <b-img
    17              thumbnail
    18              width="120"
    19              height="120"
    20              alt="aperçu"
    21              :src="document.url_miniature"
    22            ></b-img>
    23          </b-col>
    24        </b-row>
    25        <form novalidate>
    26          <form-file
    27            title="Nouveau document"
    28            invalidFeedback="Merci de fournir un document valide."
    29            variant="success"
    30            @upload="uploadDocument"
    31          ></form-file>
    32        </form>
    33      </b-modal>
    34  
    35      <b-modal
    36        v-model="confirmeDelete"
    37        cancel-title="Retour"
    38        hide-header-close
    39        title="Confirmer la suppression"
    40        @ok="deleteDocument"
    41        ok-variant="danger"
    42      >
    43        Confirmez-vous la <b>suppression</b> du document
    44        {{ document.nom_client }}?
    45        <template v-slot:modal-ok>
    46          <b-spinner type="grow" small v-show="spinningDelete"></b-spinner>
    47          Supprimer
    48        </template>
    49      </b-modal>
    50  
    51      <b-button
    52        variant="outline-secondary"
    53        v-b-tooltip.html.top
    54        :title="tooltipDownload"
    55        target="_blank"
    56        :href="document.url_download"
    57        download
    58        class="mx-1"
    59      >
    60        <b-icon-download></b-icon-download>
    61      </b-button>
    62  
    63      <b-button
    64        variant="outline-accent"
    65        v-b-tooltip.html.top
    66        :title="tooltipUpload"
    67        class="mx-1"
    68        :disabled="disableUpload"
    69        @click="showUpload = true"
    70        v-if="!hideUpload"
    71      >
    72        <b-icon-upload></b-icon-upload>
    73      </b-button>
    74  
    75      <b-button
    76        v-b-tooltip.html.top
    77        :title="tooltipDelete"
    78        variant="danger"
    79        class="mx-1"
    80        @click="confirmeDelete = true"
    81        v-if="!hideDelete"
    82      >
    83        <b-icon-trash></b-icon-trash>
    84      </b-button>
    85    </div>
    86  </template>
    87  
    88  <script lang="ts">
    89  import Vue from "vue";
    90  import Component from "vue-class-component";
    91  
    92  import FormFile from "./FormFile.vue";
    93  
    94  import { descriptionDocument } from "./logic/utils";
    95  import { BvModalEvent } from "bootstrap-vue";
    96  import { ValidEvent, ValidEventFile } from "./utils";
    97  import { ControllerDocument } from "./logic/controller";
    98  import { PublicDocument } from "@/shared/logic/types";
    99  
   100  const ControleDocumentProps = Vue.extend({
   101    props: {
   102      controller: Object as () => ControllerDocument,
   103      document: Object as () => PublicDocument,
   104      hideDelete: {
   105        type: Boolean,
   106        default: false
   107      },
   108      hideUpload: {
   109        type: Boolean,
   110        default: false
   111      },
   112      disableUpload: {
   113        type: Boolean,
   114        default: false
   115      }
   116    }
   117  });
   118  
   119  @Component({
   120    components: { FormFile }
   121  })
   122  export default class ControleDocument extends ControleDocumentProps {
   123    confirmeDelete = false;
   124    spinningDelete = false;
   125  
   126    showUpload = false;
   127  
   128    get descriptionDocument() {
   129      return descriptionDocument(this.document);
   130    }
   131    get tooltipDownload() {
   132      return `<b>Télécharger</b> le document (${this.descriptionDocument})`;
   133    }
   134  
   135    tooltipUpload = "Remplacer le document...";
   136    tooltipDelete = "Supprimer le document...";
   137  
   138    async deleteDocument(event: BvModalEvent) {
   139      event.preventDefault(); // garde le dialog visible
   140      this.spinningDelete = true;
   141      const out = await this.controller.deleteDocument(this.document);
   142      this.spinningDelete = false;
   143      this.confirmeDelete = false;
   144      if (out) {
   145        this.$emit("deleted", this.document);
   146      }
   147    }
   148  
   149    async uploadDocument(event: ValidEventFile) {
   150      const rep = await this.controller.uploadDocument(
   151        event.file,
   152        this.document.id_crypted
   153      );
   154      event.event.spinning = false;
   155      this.showUpload = false;
   156      if (rep !== undefined) {
   157        this.$emit("uploaded", rep);
   158      }
   159    }
   160  }
   161  </script>
   162  
   163  <style scoped></style>