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

   1 <template>
   2     <fieldset class="rows" id="agreement_licenses">
   3         <legend>Licenses</legend>
   4         <fieldset
   5             class="rows"
   6             v-for="(agreement_license, counter) in agreement_licenses"
   7             v-bind:key="counter"
   8         >
   9             <legend>
  10                 Agreement license {{ counter + 1 }}
  11                 <a href="#" @click.prevent="deleteLicense(counter)"
  12                     ><i class="fa fa-trash"></i> Remove this license</a
  13                 >
  14             </legend>
  15             <ol>
  16                 <li>
  17                     <label :for="`license_id_${counter}`">License: </label>
  18                     <select
  19                         :id="`license_id_${counter}`"
  20                         v-model="agreement_license.license_id"
  21                         required
  22                     >
  23                         <option value=""></option>
  24                         <option
  25                             v-for="license in licenses"
  26                             :key="license.license_id"
  27                             :value="license.license_id"
  28                             :selected="
  29                                 license.license_id ==
  30                                 agreement_license.license_id
  31                                     ? true
  32                                     : false
  33                             "
  34                         >
  35                             {{ license.name }}
  36                         </option>
  37                     </select>
  38                     <span class="required">Required</span>
  39                 </li>
  40                 <li>
  41                     <label :for="`license_status_${counter}`">Status: </label>
  42                     <select v-model="agreement_license.status" required>
  43                         <option value=""></option>
  44                         <option
  45                             v-for="r in av_agreement_license_statuses"
  46                             :key="r.authorised_values"
  47                             :value="r.authorised_value"
  48                             :selected="
  49                                 r.authorised_value == agreement_license.status
  50                                     ? true
  51                                     : false
  52                             "
  53                         >
  54                             {{ r.lib }}
  55                         </option>
  56                     </select>
  57                     <span class="required">Required</span>
  58                 </li>
  59                 <li>
  60                     <label :for="`license_location_${counter}`"
  61                         >Physical location:
  62                     </label>
  63                     <select v-model="agreement_license.physical_location">
  64                         <option value=""></option>
  65                         <option
  66                             v-for="r in av_agreement_license_location"
  67                             :key="r.authorised_values"
  68                             :value="r.authorised_value"
  69                             :selected="
  70                                 r.authorised_value ==
  71                                 agreement_license.physical_location
  72                                     ? true
  73                                     : false
  74                             "
  75                         >
  76                             {{ r.lib }}
  77                         </option>
  78                     </select>
  79                 </li>
  80                 <li>
  81                     <label :for="`license_notes_${counter}`">Notes:</label>
  82                     <input
  83                         :id="`license_notes_${counter}`"
  84                         v-model="agreement_license.notes"
  85                         placeholder="Notes"
  86                     />
  87                 </li>
  88                 <li>
  89                     <label :for="`license_uri_${counter}`">URI:</label>
  90                     <input
  91                         :id="`license_uri_${counter}`"
  92                         v-model="agreement_license.uri"
  93                         placeholder="URI"
  94                     />
  95                 </li>
  96             </ol>
  97         </fieldset>
  98         <a class="btn btn-default" @click="addLicense"
  99             ><font-awesome-icon icon="plus" /> Add new license</a
 100         >
 101     </fieldset>
 102 </template>
 103
 104 <script>
 105 import { fetchLicenses } from '../../fetch'
 106 export default {
 107     name: 'AgreementLicenses',
 108     data() {
 109         return {
 110             licenses: [],
 111         }
 112     },
 113     props: {
 114         av_agreement_license_statuses: Array,
 115         av_agreement_license_location: Array,
 116         agreement_licenses: Array,
 117     },
 118     beforeCreate(){
 119         fetchLicenses().then((licenses) => this.licenses = licenses )
 120     },
 121     methods: {
 122         addLicense() {
 123             this.agreement_licenses.push({
 124                 license_id: null,
 125                 status: null,
 126                 physical_location: null,
 127                 notes: '',
 128                 uri: '',
 129             })
 130         },
 131         deleteLicense(counter) {
 132             this.agreement_licenses.splice(counter, 1)
 133         },
 134     },
 135 }
 136 </script>