koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementDocuments.vue

   1 <template>
   2     <fieldset class="rows" id="agreement_documents">
   3         <legend>{{ $t("Documents") }}</legend>
   4         <fieldset
   5             :id="`agreement_period_${counter}`"
   6             class="rows"
   7             v-for="(document, counter) in documents"
   8             v-bind:key="counter"
   9         >
  10             <legend>
  11                 {{ $t("Document.counter", { counter: counter + 1 }) }}
  12                 <a href="#" @click.prevent="deleteDocument(counter)"
  13                     ><i class="fa fa-trash"></i>
  14                     {{ $t("Remove this document") }}</a
  15                 >
  16             </legend>
  17             <ol>
  18                 <li>
  19                     <label>{{ $t("File") }}:</label>
  20                     <div class="file_information">
  21                         <span v-if="!document.file_name">
  22                             {{ $t("Select a file") }}
  23                             <input
  24                                 type="file"
  25                                 @change="selectFile($event, counter)"
  26                                 :id="`file_${counter}`"
  27                                 :name="`file_${counter}`"
  28                             />
  29                         </span>
  30                         <span v-else>
  31                             {{ $t("Update file") }}
  32                             <input
  33                                 type="file"
  34                                 @change="selectFile($event, counter)"
  35                                 :id="`file_${counter}`"
  36                                 :name="`file_${counter}`"
  37                             />
  38                         </span>
  39                         <ol>
  40                             <li v-show="document.file_name">
  41                                 {{ $t("File name") }}:
  42                                 <span>{{ document.file_name }}</span>
  43                             </li>
  44                             <li v-show="document.file_type">
  45                                 {{ $t("File type") }}:
  46                                 <span>{{ document.file_type }}</span>
  47                             </li>
  48                             <li v-show="document.file_name">
  49                                 {{ $t("File description") }}:
  50                                 <input
  51                                     :id="`file_description_${counter}`"
  52                                     type="text"
  53                                     class="file_description"
  54                                     :name="`file_description_${counter}`"
  55                                     v-model="document.file_description"
  56                                     :placeholder="$t('File description')"
  57                                 />
  58                             </li>
  59                             <li v-show="document.uploaded_on">
  60                                 {{ $t("Uploaded on") }}:
  61                                 <span>{{
  62                                     format_date(document.uploaded_on)
  63                                 }}</span>
  64                             </li>
  65                         </ol>
  66                     </div>
  67                 </li>
  68                 <li>
  69                     <label :for="`physical_location_${counter}`"
  70                         >{{ $t("Physical location") }}:
  71                     </label>
  72                     <input
  73                         :id="`physical_location_${counter}`"
  74                         type="text"
  75                         class="physical_location"
  76                         :name="`physical_location_${counter}`"
  77                         v-model="document.physical_location"
  78                         :placeholder="$t('Physical location')"
  79                     />
  80                 </li>
  81                 <li>
  82                     <label :for="`uri_${counter}`">{{ $t("URI") }}:</label>
  83                     <input
  84                         :id="`uri_${counter}`"
  85                         v-model="document.uri"
  86                         :placeholder="$t('URI')"
  87                     />
  88                 </li>
  89                 <li>
  90                     <label :for="`notes_${counter}`">{{ $t("Notes") }}:</label>
  91                     <input
  92                         :id="`notes_${counter}`"
  93                         type="text"
  94                         class="notes"
  95                         :name="`notes_${counter}`"
  96                         v-model="document.notes"
  97                         :placeholder="$t('Notes')"
  98                     />
  99                 </li>
 100             </ol>
 101         </fieldset>
 102         <a class="btn btn-default" @click="addDocument"
 103             ><font-awesome-icon icon="plus" /> {{ $t("Add new document") }}</a
 104         >
 105     </fieldset>
 106 </template>
 107
 108 <script>
 109 export default {
 110     setup() {
 111         const format_date = $date
 112         return { format_date }
 113     },
 114     methods: {
 115         selectFile(e, i) {
 116             let files = e.target.files
 117             if (!files) return
 118             let file = files[0]
 119             const reader = new FileReader()
 120             reader.onload = e => this.loadFile(file.name, e.target.result, i)
 121             reader.readAsBinaryString(file)
 122         },
 123         loadFile(filename, content, i) {
 124             this.documents[i].file_name = filename
 125             this.documents[i].file_content = btoa(content)
 126         },
 127         addDocument() {
 128             this.documents.push({
 129                 file_name: null,
 130                 file_type: null,
 131                 file_description: null,
 132                 file_content: null,
 133                 physical_location: null,
 134                 uri: null,
 135                 notes: null,
 136             })
 137         },
 138         deleteDocument(counter) {
 139             this.documents.splice(counter, 1)
 140         }
 141     },
 142     name: 'AgreementDocuments',
 143     props: {
 144         documents: Array
 145     },
 146
 147 }
 148 </script>
 149
 150 <style scoped>
 151 .file_information {
 152     margin: 0 10rem;
 153 }
 154 </style>