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

   1 <template>
   2     <fieldset class="rows" id="package_agreements">
   3         <legend>{{ $__("Agreements") }}</legend>
   4         <fieldset
   5             class="rows"
   6             v-for="(package_agreement, counter) in package_agreements"
   7             v-bind:key="counter"
   8         >
   9             <legend>
  10                 {{ $__("Agreement %s").format(counter + 1) }}
  11                 <a href="#" @click.prevent="deleteAgreement(counter)"
  12                     ><i class="fa fa-trash"></i>
  13                     {{ $__("Remove this agreement") }}</a
  14                 >
  15             </legend>
  16             <ol>
  17                 <li>
  18                     <label :for="`agreement_id_${counter}`" class="required"
  19                         >{{ $__("Agreement") }}:
  20                     </label>
  21                     <v-select
  22                         :id="`agreement_id_${counter}`"
  23                         v-model="package_agreement.agreement_id"
  24                         label="name"
  25                         :reduce="a => a.agreement_id"
  26                         :options="agreements"
  27                     >
  28                         <template #search="{ attributes, events }">
  29                             <input
  30                                 :required="!package_agreement.agreement_id"
  31                                 class="vs__search"
  32                                 v-bind="attributes"
  33                                 v-on="events"
  34                             />
  35                         </template>
  36                     </v-select>
  37                     <span class="required">{{ $__("Required") }}</span>
  38                 </li>
  39             </ol>
  40         </fieldset>
  41         <a
  42             v-if="agreements.length"
  43             class="btn btn-default"
  44             @click="addAgreement"
  45             ><font-awesome-icon icon="plus" /> {{ $__("Add new agreement") }}</a
  46         >
  47         <span v-else>{{ $__("There are no agreements created yet") }}</span>
  48     </fieldset>
  49 </template>
  50
  51 <script>
  52 import { fetchAgreements } from "../../fetch"
  53
  54 export default {
  55     data() {
  56         return {
  57             agreements: [],
  58         }
  59     },
  60     beforeCreate() {
  61         fetchAgreements().then(agreements => {
  62             this.agreements = agreements
  63         })
  64     },
  65     methods: {
  66         addAgreement() {
  67             this.package_agreements.push({
  68                 agreement_id: null,
  69             })
  70         },
  71         deleteAgreement(counter) {
  72             this.package_agreements.splice(counter, 1)
  73         },
  74     },
  75     props: {
  76         package_agreements: Array,
  77     },
  78     name: "EHoldingsLocalPackageAgreements",
  79 }
  80 </script>