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

   1 <template>
   2     <fieldset class="rows" 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
  20                         :for="`related_agreement_id_${counter}`"
  21                         class="required"
  22                         >{{ $__("Related agreement") }}:
  23                     </label>
  24                     <v-select
  25                         :id="`related_agreement_id_${counter}`"
  26                         v-model="relationship.related_agreement_id"
  27                         label="name"
  28                         :reduce="a => a.agreement_id"
  29                         :options="agreements"
  30                     >
  31                         <template #search="{ attributes, events }">
  32                             <input
  33                                 :required="!relationship.related_agreement_id"
  34                                 class="vs__search"
  35                                 v-bind="attributes"
  36                                 v-on="events"
  37                             />
  38                         </template>
  39                     </v-select>
  40                     <span class="required">{{ $__("Required") }}</span>
  41                 </li>
  42                 <li>
  43                     <label
  44                         :for="`related_agreement_relationship_${counter}`"
  45                         class="required"
  46                         >{{ $__("Relationship") }}:
  47                     </label>
  48                     <v-select
  49                         :id="`related_agreement_relationship_${counter}`"
  50                         v-model="relationship.relationship"
  51                         label="description"
  52                         :reduce="av => av.value"
  53                         :options="av_agreement_relationships"
  54                     >
  55                         <template #search="{ attributes, events }">
  56                             <input
  57                                 :required="!relationship.relationship"
  58                                 class="vs__search"
  59                                 v-bind="attributes"
  60                                 v-on="events"
  61                             />
  62                         </template>
  63                     </v-select>
  64                     <span class="required">{{ $__("Required") }}</span>
  65                 </li>
  66                 <li>
  67                     <label :for="`related_agreement_notes_${counter}`"
  68                         >{{ $__("Notes") }}:</label
  69                     >
  70                     <input
  71                         :id="`related_agreement_notes_${counter}`"
  72                         v-model="relationship.notes"
  73                         :placeholder="$__('Notes')"
  74                     />
  75                 </li>
  76             </ol>
  77         </fieldset>
  78         <a
  79             v-if="agreements.length"
  80             class="btn btn-default"
  81             @click="addRelationship"
  82             ><font-awesome-icon icon="plus" />
  83             {{ $__("Add new related agreement") }}</a
  84         >
  85         <span v-else>{{
  86             $__("There are no other agreements created yet")
  87         }}</span>
  88     </fieldset>
  89 </template>
  90
  91 <script>
  92 import { APIClient } from "../../fetch/api-client.js"
  93
  94 export default {
  95     data() {
  96         return {
  97             agreements: [],
  98         }
  99     },
 100     beforeCreate() {
 101         const client = APIClient.erm
 102         client.agreements
 103             .getAll({ "me.agreement_id": { "!=": this.agreement_id } })
 104             .then(
 105                 agreements => {
 106                     this.agreements = agreements
 107                     this.initialized = true
 108                 },
 109                 error => {}
 110             )
 111     },
 112     methods: {
 113         addRelationship() {
 114             this.relationships.push({
 115                 related_agreement_id: null,
 116                 relationship: null,
 117                 notes: "",
 118             })
 119         },
 120         deleteRelationship(counter) {
 121             this.relationships.splice(counter, 1)
 122         },
 123     },
 124     props: {
 125         agreement_id: Number,
 126         av_agreement_relationships: Array,
 127         relationships: Array,
 128     },
 129     name: "AgreementRelationships",
 130 }
 131 </script>