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

     1  <template>
     2    <div>
     3      <b-card :border-variant="border">
     4        <b-row fluid>
     5          <b-col>
     6            <b-card-title>
     7              <b-icon-clock
     8                v-if="contrainte.jours_valide > 0"
     9                v-b-tooltip.html
    10                :title="tooltipTmp"
    11              >
    12              </b-icon-clock>
    13              {{ contrainte.nom }}
    14              <b-button
    15                v-if="contrainte.document.id_crypted"
    16                class="ml-2"
    17                :href="contrainte.document.url_download"
    18                ref="downloadButton"
    19                variant="outline-fushia"
    20              >
    21                <b-icon-download></b-icon-download>
    22                Télécharger
    23              </b-button>
    24            </b-card-title>
    25          </b-col>
    26          <b-col class="text-right align-self-center">
    27            <slot name="corner"></slot>
    28          </b-col>
    29        </b-row>
    30  
    31        <b-card-sub-title>
    32          <div v-for="(row, i) in contrainte.description.split('\n')" :key="i">
    33            {{ row }}
    34          </div>
    35        </b-card-sub-title>
    36        <b-card-text>
    37          <document
    38            v-for="(document, i) in documents || []"
    39            :key="document.id_crypted"
    40            :controller="controller"
    41            :document="document"
    42            @uploaded="onUpload(i, $event)"
    43            @deleted="onDelete(i, $event)"
    44          ></document>
    45          <form-file
    46            v-if="showAdd"
    47            :title="'Ajouter un document : ' + contrainte.nom"
    48            variant="success"
    49            @upload="$emit('upload', $event)"
    50          ></form-file>
    51        </b-card-text>
    52      </b-card>
    53  
    54      <b-popover
    55        v-if="contrainte.document.id_crypted"
    56        :target="() => ($refs.downloadButton ? $refs.downloadButton.$el : null)"
    57        triggers="hover"
    58      >
    59        <b-row>
    60          <b-col class="align-self-center text-center">
    61            <b>{{ contrainte.document.nom_client }}</b>
    62          </b-col>
    63          <b-col>
    64            <b-img
    65              thumbnail
    66              width="120"
    67              height="120"
    68              alt="aperçu"
    69              :src="contrainte.document.url_miniature"
    70            ></b-img>
    71          </b-col>
    72        </b-row>
    73      </b-popover>
    74    </div>
    75  </template>
    76  
    77  <script lang="ts">
    78  import Vue from "vue";
    79  import Component from "vue-class-component";
    80  import FormFile from "./FormFile.vue";
    81  import Document from "./Document.vue";
    82  
    83  import { formatDateTime, isDocumentNull, ModifDocument } from "./logic/utils";
    84  import { ControllerDocument } from "./logic/controller";
    85  import {
    86    PublicDocument,
    87    Contrainte,
    88    PublicContrainte
    89  } from "@/shared/logic/types";
    90  import { Watch } from "vue-property-decorator";
    91  import { BButton } from "bootstrap-vue";
    92  
    93  const NeededDocumentProps = Vue.extend({
    94    props: {
    95      controller: Object as () => ControllerDocument,
    96      contrainte: Object as () => PublicContrainte,
    97      documents: Array as () => PublicDocument[],
    98      border: String
    99    }
   100  });
   101  
   102  @Component({
   103    components: { Document, FormFile }
   104  })
   105  export default class NeededDocument extends NeededDocumentProps {
   106    $refs!: {
   107      downloadButton: BButton;
   108    };
   109  
   110    get showAdd() {
   111      return this.contrainte.max_docs > this.documents.length;
   112    }
   113  
   114    get tooltipTmp() {
   115      return `Ce document sera supprimé automatiquement <b>${this.contrainte.jours_valide} jours</b> après son ajout.`;
   116    }
   117  
   118    onUpload(index: number, newDoc: PublicDocument) {
   119      const docs: PublicDocument[] = JSON.parse(JSON.stringify(this.documents));
   120      docs[index] = newDoc;
   121      this.$emit("changed", docs);
   122    }
   123  
   124    onDelete(index: number, newDoc: PublicDocument) {
   125      let docs: PublicDocument[] = JSON.parse(JSON.stringify(this.documents));
   126      docs = docs.filter((_, i) => i != index);
   127      this.$emit("changed", docs);
   128    }
   129  }
   130  </script>
   131  
   132  <style scoped></style>