koha-dev.rot13.org Git - srvgit/blob - koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue

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