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

   1 <template>
   2     <div class="page-section" id="agreement_licenses">
   3         <legend>{{ $__("Licenses") }}</legend>
   4         <fieldset
   5             :id="`agreement_license_${counter}`"
   6             class="rows"
   7             v-for="(agreement_license, counter) in agreement_licenses"
   8             v-bind:key="counter"
   9         >
  10             <legend>
  11                 {{ $__("Agreement license %s").format(counter + 1) }}
  12                 <a href="#" @click.prevent="deleteLicense(counter)"
  13                     ><i class="fa fa-trash"></i>
  14                     {{ $__("Remove this license") }}</a
  15                 >
  16             </legend>
  17             <ol>
  18                 <li>
  19                     <label :for="`license_id_${counter}`"
  20                         >{{ $__("License") }}:</label
  21                     >
  22                     <v-select
  23                         :id="`license_id_${counter}`"
  24                         v-model="agreement_license.license_id"
  25                         label="name"
  26                         :reduce="l => l.license_id"
  27                         :options="licenses"
  28                     >
  29                         <template #search="{ attributes, events }">
  30                             <input
  31                                 :required="!agreement_license.license_id"
  32                                 class="vs__search"
  33                                 v-bind="attributes"
  34                                 v-on="events"
  35                             />
  36                         </template>
  37                     </v-select>
  38                     <span class="required">{{ $__("Required") }}</span>
  39                 </li>
  40                 <li>
  41                     <label :for="`license_status_${counter}`"
  42                         >{{ $__("Status") }}:</label
  43                     >
  44                     <v-select
  45                         :id="`license_status_${counter}`"
  46                         v-model="agreement_license.status"
  47                         label="lib"
  48                         :reduce="av => av.authorised_value"
  49                         :options="av_agreement_license_statuses"
  50                     >
  51                         <template #search="{ attributes, events }">
  52                             <input
  53                                 :required="!agreement_license.status"
  54                                 class="vs__search"
  55                                 v-bind="attributes"
  56                                 v-on="events"
  57                             />
  58                         </template>
  59                     </v-select>
  60                     <span class="required">{{ $__("Required") }}</span>
  61                 </li>
  62                 <li>
  63                     <label :for="`license_location_${counter}`"
  64                         >{{ $__("Physical location") }}:
  65                     </label>
  66                     <v-select
  67                         :id="`license_location_${counter}`"
  68                         v-model="agreement_license.physical_location"
  69                         label="lib"
  70                         :reduce="av => av.authorised_value"
  71                         :options="av_agreement_license_location"
  72                     />
  73                 </li>
  74                 <li>
  75                     <label :for="`license_notes_${counter}`"
  76                         >{{ $__("Notes") }}:</label
  77                     >
  78                     <input
  79                         :id="`license_notes_${counter}`"
  80                         v-model="agreement_license.notes"
  81                         :placeholder="$__('Notes')"
  82                     />
  83                 </li>
  84                 <li>
  85                     <label :for="`license_uri_${counter}`"
  86                         >{{ $__("URI") }}:</label
  87                     >
  88                     <input
  89                         :id="`license_uri_${counter}`"
  90                         v-model="agreement_license.uri"
  91                         :placeholder="$__('URI')"
  92                     />
  93                 </li>
  94             </ol>
  95         </fieldset>
  96         <a v-if="licenses.length" class="btn btn-default" @click="addLicense"
  97             ><font-awesome-icon icon="plus" /> {{ $__("Add new license") }}</a
  98         >
  99         <span v-else>{{ $__("There are no licenses created yet") }}</span>
 100     </div>
 101 </template>
 102
 103 <script>
 104 import { APIClient } from "../../fetch/api-client.js"
 105
 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         const client = APIClient.erm
 120         client.licenses.getAll().then(
 121             licenses => {
 122                 this.licenses = licenses
 123                 this.initialized = true
 124             },
 125             error => {}
 126         )
 127     },
 128     methods: {
 129         addLicense() {
 130             this.agreement_licenses.push({
 131                 license_id: null,
 132                 status: null,
 133                 physical_location: null,
 134                 notes: "",
 135                 uri: "",
 136             })
 137         },
 138         deleteLicense(counter) {
 139             this.agreement_licenses.splice(counter, 1)
 140         },
 141     },
 142 }
 143 </script>