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

   1 <template>
   2     <transition name="modal">
   3         <div v-if="showModal" class="modal">
   4             <AgreementsList @select-agreement="addAgreement" />
   5             <input
   6                 type="button"
   7                 @click="showModal = false"
   8                 :value="$__('Close')"
   9             />
  10         </div>
  11     </transition>
  12     <div id="package_agreements">
  13         <div
  14             v-for="(
  15                 package_agreement, counter
  16             ) in erm_package.package_agreements"
  17             v-bind:key="counter"
  18         >
  19             <router-link
  20                 :to="`/cgi-bin/koha/erm/agreements/${package_agreement.agreement.agreement_id}`"
  21                 >{{ package_agreement.agreement.name }}</router-link
  22             >
  23             &nbsp;
  24             <a
  25                 href="#"
  26                 @click.prevent="deleteAgreement(counter)"
  27                 :title="$__('Remove this agreement')"
  28                 ><i class="fa fa-trash"></i
  29             ></a>
  30         </div>
  31         <a class="btn btn-default btn-xs" @click="showModal = true"
  32             ><font-awesome-icon icon="plus" /> {{ $__("Add new agreement") }}</a
  33         >
  34     </div>
  35 </template>
  36
  37 <script>
  38 import AgreementsList from "./AgreementsList.vue"
  39 import { createPackage, editPackage } from "../../fetch"
  40 import { setWarning, removeMessages } from "../../messages"
  41
  42 export default {
  43     data() {
  44         return { showModal: false }
  45     },
  46     beforeCreate() {},
  47     methods: {
  48         serializeAgreement() {
  49             let erm_package = JSON.parse(JSON.stringify(this.erm_package)) // copy
  50             delete erm_package.vendor_id // This is the EBSCO's vendor_id
  51
  52             // Remove remote data, we don't need to store them (don't we?)
  53             // Keep the name, it's mandatory by the REST API specs
  54             delete erm_package.package_type
  55             delete erm_package.content_type
  56             erm_package.external_id = erm_package.package_id
  57             delete erm_package.package_id
  58             erm_package.provider = "ebsco"
  59             erm_package.package_id = erm_package.koha_internal_id
  60             delete erm_package.koha_internal_id
  61             return erm_package
  62         },
  63         addAgreement(agreement_id) {
  64             removeMessages()
  65             this.showModal = false
  66             let erm_package = this.serializeAgreement()
  67             // Only add if it does not exist
  68             if (
  69                 !erm_package.package_agreements.find(
  70                     a => a.agreement_id == agreement_id
  71                 )
  72             ) {
  73                 erm_package.package_agreements.push({ agreement_id })
  74                 if (this.erm_package.koha_internal_id) {
  75                     editPackage(erm_package).then(() => {
  76                         this.$emit("refresh-agreements")
  77                     })
  78                 } else {
  79                     createPackage(erm_package).then(() => {
  80                         this.$emit("refresh-agreements")
  81                     })
  82                 }
  83             } else {
  84                 setWarning(
  85                     this.$__(
  86                         "This agreement is already linked with this package"
  87                     )
  88                 )
  89             }
  90         },
  91         deleteAgreement(counter) {
  92             let erm_package = this.serializeAgreement()
  93             erm_package.package_agreements.splice(counter, 1)
  94             editPackage(erm_package).then(() => {
  95                 this.$emit("refresh-agreements")
  96             })
  97         },
  98     },
  99     props: {
 100         erm_package: Object,
 101     },
 102     components: {
 103         AgreementsList,
 104     },
 105     emits: ["refresh-agreements"],
 106     name: "EHoldingsEBSCOPackageAgreements",
 107 }
 108 </script>
 109 <style scoped>
 110 .modal {
 111     position: fixed;
 112     z-index: 9998;
 113     top: 0;
 114     left: 0;
 115     width: 80%;
 116     height: 80%;
 117     background-color: rgba(0, 0, 0, 0.5);
 118     display: table;
 119     transition: opacity 0.3s ease;
 120     margin: auto;
 121     padding: 20px 30px;
 122     background-color: #fff;
 123     border-radius: 2px;
 124     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
 125     transition: all 0.3s ease;
 126     font-family: Helvetica, Arial, sans-serif;
 127 }
 128 </style>