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             class="rows"
   6             v-for="(relationship, counter) in relationships"
   7             v-bind:key="counter"
   8         >
   9             <legend>
  10                 Related agreement {{ counter + 1 }}
  11                 <a href="#" @click.prevent="deleteRelationship(counter)"
  12                     ><i class="fa fa-trash"></i> Remove this relationship</a
  13                 >
  14             </legend>
  15             <ol>
  16                 <li>
  17                     <label :for="`related_agreement_id_${counter}`"
  18                         >Related agreement:
  19                     </label>
  20                     <select
  21                         v-model="relationship.related_agreement_id"
  22                         :id="`related_agreement_id_${counter}`"
  23                     >
  24                         <option value=""></option>
  25                         <option
  26                             v-for="agreement in agreements"
  27                             :key="agreement.agreement_id"
  28                             :value="agreement.agreement_id"
  29                             :selected="
  30                                 agreement.agreement_id ==
  31                                 relationship.related_agreement_id
  32                                     ? true
  33                                     : false
  34                             "
  35                         >
  36                             {{ agreement.name }}
  37                         </option>
  38                     </select>
  39                 </li>
  40                 <li>
  41                     <label :for="`related_agreement_relationship_${counter}`"
  42                         >Relationship:
  43                     </label>
  44                     <select
  45                         v-model="relationship.relationship"
  46                         :id="`related_agreement_relationship_${counter}`"
  47                         required
  48                     >
  49                         <option value=""></option>
  50                         <option
  51                             v-for="r in av_agreement_relationships"
  52                             :key="r.authorised_values"
  53                             :value="r.authorised_value"
  54                             :selected="
  55                                 r.authorised_value == relationship.relationship
  56                                     ? true
  57                                     : false
  58                             "
  59                         >
  60                             {{ r.lib }}
  61                         </option>
  62                     </select>
  63                     <span class="required">Required</span>
  64                 </li>
  65                 <li>
  66                     <label :for="`related_agreement_notes${counter}`"
  67                         >Notes:</label
  68                     >
  69                     <input
  70                         :id="`related_agreement_notes_${counter}`"
  71                         v-model="relationship.notes"
  72                         placeholder="Notes"
  73                     />
  74                 </li>
  75             </ol>
  76         </fieldset>
  77         <a class="btn btn-default" @click="addRelationship"
  78             ><font-awesome-icon icon="plus" /> Add new related agreement</a
  79         >
  80     </fieldset>
  81 </template>
  82
  83 <script>
  84 import { fetchAgreements } from "../../fetch"
  85
  86 export default {
  87     data() {
  88         return {
  89             agreements: [],
  90         }
  91     },
  92     beforeCreate() {
  93         fetchAgreements().then((agreements) => {
  94             this.agreements = agreements.filter((agreement) => agreement.agreement_id !== this.agreement_id)
  95         })
  96     },
  97     methods: {
  98         addRelationship() {
  99             this.relationships.push({
 100                 related_agreement_id: null,
 101                 relationship: null,
 102                 notes: '',
 103             })
 104         },
 105         deleteRelationship(counter) {
 106             this.relationships.splice(counter, 1)
 107         },
 108     },
 109     props: {
 110         agreement_id: Number,
 111         av_agreement_relationships: Array,
 112         relationships: Array,
 113     },
 114     name: 'AgreementRelationships',
 115 }
 116 </script>