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

   1 <template>
   2     <div class="page-section" id="agreement_relationships">
   3         <legend>{{ $__("Related agreements") }}</legend>
   4         <fieldset
   5             :id="`related_agreement_${counter}`"
   6             class="rows"
   7             v-for="(relationship, counter) in relationships"
   8             v-bind:key="counter"
   9         >
  10             <legend>
  11                 {{ $__("Related agreement %s").format(counter + 1) }}
  12                 <a href="#" @click.prevent="deleteRelationship(counter)"
  13                     ><i class="fa fa-trash"></i>
  14                     {{ $__("Remove this relationship") }}</a
  15                 >
  16             </legend>
  17             <ol>
  18                 <li>
  19                     <label :for="`related_agreement_id_${counter}`"
  20                         >{{ $__("Related agreement") }}:
  21                     </label>
  22                     <v-select
  23                         :id="`related_agreement_id_${counter}`"
  24                         v-model="relationship.related_agreement_id"
  25                         label="name"
  26                         :reduce="a => a.agreement_id"
  27                         :options="agreements"
  28                     >
  29                         <template #search="{ attributes, events }">
  30                             <input
  31                                 :required="!relationship.related_agreement_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="`related_agreement_relationship_${counter}`"
  42                         >{{ $__("Relationship") }}:
  43                     </label>
  44                     <v-select
  45                         :id="`related_agreement_relationship_${counter}`"
  46                         v-model="relationship.relationship"
  47                         label="lib"
  48                         :reduce="av => av.authorised_value"
  49                         :options="av_agreement_relationships"
  50                     >
  51                         <template #search="{ attributes, events }">
  52                             <input
  53                                 :required="!relationship.relationship"
  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="`related_agreement_notes_${counter}`"
  64                         >{{ $__("Notes") }}:</label
  65                     >
  66                     <input
  67                         :id="`related_agreement_notes_${counter}`"
  68                         v-model="relationship.notes"
  69                         :placeholder="$__('Notes')"
  70                     />
  71                 </li>
  72             </ol>
  73         </fieldset>
  74         <a
  75             v-if="agreements.length"
  76             class="btn btn-default"
  77             @click="addRelationship"
  78             ><font-awesome-icon icon="plus" />
  79             {{ $__("Add new related agreement") }}</a
  80         >
  81         <span v-else>{{
  82             $__("There are no other agreements created yet")
  83         }}</span>
  84     </div>
  85 </template>
  86
  87 <script>
  88 import { fetchAgreements } from "../../fetch"
  89
  90 export default {
  91     data() {
  92         return {
  93             agreements: [],
  94         }
  95     },
  96     beforeCreate() {
  97         fetchAgreements().then(agreements => {
  98             this.agreements = agreements.filter(
  99                 agreement => agreement.agreement_id !== this.agreement_id
 100             )
 101         })
 102     },
 103     methods: {
 104         addRelationship() {
 105             this.relationships.push({
 106                 related_agreement_id: null,
 107                 relationship: null,
 108                 notes: "",
 109             })
 110         },
 111         deleteRelationship(counter) {
 112             this.relationships.splice(counter, 1)
 113         },
 114     },
 115     props: {
 116         agreement_id: Number,
 117         av_agreement_relationships: Array,
 118         relationships: Array,
 119     },
 120     name: "AgreementRelationships",
 121 }
 122 </script>