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

   1 <template>
   2     <div v-if="!initialized">{{ $__("Loading") }}</div>
   3     <div v-else-if="erm_package" id="packages_show">
   4         <h2>
   5             {{ $__("Package #%s").format(erm_package.package_id) }}
   6             <span v-if="!updating_is_selected">
   7                 <a
   8                     v-if="!erm_package.is_selected"
   9                     class="btn btn-default btn-xs"
  10                     role="button"
  11                     @click="add_to_holdings"
  12                     ><font-awesome-icon icon="plus" />
  13                     {{ $__("Add package to holdings") }}</a
  14                 >
  15                 <a
  16                     v-else
  17                     class="btn btn-default btn-xs"
  18                     role="button"
  19                     id="remove-from-holdings"
  20                     @click="remove_from_holdings"
  21                     ><font-awesome-icon icon="minus" />
  22                     {{ $__("Remove package from holdings") }}</a
  23                 > </span
  24             ><span v-else><font-awesome-icon icon="spinner" /></span>
  25         </h2>
  26         <div>
  27             <fieldset class="rows">
  28                 <ol>
  29                     <li>
  30                         <label>{{ $__("Package name") }}:</label>
  31                         <span>
  32                             {{ erm_package.name }}
  33                         </span>
  34                     </li>
  35                     <li v-if="erm_package.vendor">
  36                         <label>{{ $__("Vendor") }}:</label>
  37                         <span>{{ erm_package.vendor.name }}</span>
  38                     </li>
  39                     <li v-if="false">
  40                         <label>{{ $__("External ID") }}:</label>
  41                         <span>
  42                             <span v-if="false"
  43                                 >FIXME - Does not replace this v-if with an HTML
  44                                 comment, it breaks xgettext</span
  45                             >
  46                             <span v-if="false"
  47                                 >FIXME - Create a syspref to store the URL</span
  48                             >
  49                             <a
  50                                 :href="`https://replace_with_syspref_value_here.folio.ebsco.com/eholdings/packages/${erm_package.vendor.external_id}-${erm_package.external_id}`"
  51                             >
  52                                 {{ erm_package.vendor.external_id }}-{{
  53                                     erm_package.external_id
  54                                 }}
  55                             </a>
  56                         </span>
  57                     </li>
  58                     <li>
  59                         <label>{{ $__("Package type") }}:</label>
  60                         <span>{{
  61                             get_lib_from_av(
  62                                 "av_package_types",
  63                                 erm_package.package_type
  64                             )
  65                         }}</span>
  66                     </li>
  67                     <li>
  68                         <label>{{ $__("Content type") }}:</label>
  69                         <span>{{
  70                             get_lib_from_av(
  71                                 "av_package_content_types",
  72                                 erm_package.content_type
  73                             )
  74                         }}</span>
  75                     </li>
  76                     <li v-if="erm_package.created_on">
  77                         <label>{{ $__("Created on") }}:</label>
  78                         <span>{{ format_date(erm_package.created_on) }}</span>
  79                     </li>
  80
  81                     <li>
  82                         <label>Agreements</label>
  83                         <EHoldingsPackageAgreements
  84                             :erm_package="erm_package"
  85                             @refresh-agreements="refreshAgreements"
  86                         />
  87                     </li>
  88
  89                     <li>
  90                         <label
  91                             >Titles ({{ erm_package.resources_count }})</label
  92                         >
  93                         <div v-if="erm_package.resources_count">
  94                             <EHoldingsPackageTitlesList
  95                                 :package_id="erm_package.package_id.toString()"
  96                             />
  97                         </div>
  98                     </li>
  99
 100                     <li></li>
 101                 </ol>
 102             </fieldset>
 103             <fieldset class="action">
 104                 <router-link
 105                     to="/cgi-bin/koha/erm/eholdings/ebsco/packages"
 106                     role="button"
 107                     class="cancel"
 108                     >{{ $__("Close") }}</router-link
 109                 >
 110             </fieldset>
 111         </div>
 112     </div>
 113 </template>
 114
 115 <script>
 116 import { inject } from "vue"
 117 import EHoldingsPackageAgreements from "./EHoldingsEBSCOPackageAgreements.vue"
 118 import EHoldingsPackageTitlesList from "./EHoldingsEBSCOPackageTitlesList.vue"
 119 import { fetchEBSCOPackage, checkError } from "../../fetch"
 120
 121 export default {
 122     setup() {
 123         const format_date = $date
 124
 125         const AVStore = inject("AVStore")
 126         const { get_lib_from_av } = AVStore
 127
 128         return {
 129             format_date,
 130             get_lib_from_av,
 131         }
 132     },
 133     data() {
 134         return {
 135             erm_package: {
 136                 package_id: null,
 137                 vendor_id: null,
 138                 name: "",
 139                 external_id: "",
 140                 provider: "",
 141                 package_type: "",
 142                 content_type: "",
 143                 created_on: null,
 144                 resources: null,
 145                 package_agreements: [],
 146             },
 147             initialized: false,
 148             updating_is_selected: false,
 149         }
 150     },
 151     beforeRouteEnter(to, from, next) {
 152         next(vm => {
 153             vm.getPackage(to.params.package_id)
 154         })
 155     },
 156     beforeRouteUpdate(to, from) {
 157         this.erm_package = this.getPackage(to.params.package_id)
 158     },
 159     methods: {
 160         async getPackage(package_id) {
 161             const erm_package = await fetchEBSCOPackage(package_id)
 162             this.erm_package = erm_package
 163             this.initialized = true
 164             this.updating_is_selected = false
 165         },
 166         edit_selected(is_selected) {
 167             this.updating_is_selected = true
 168             fetch(
 169                 "/api/v1/erm/eholdings/ebsco/packages/" +
 170                     this.erm_package.package_id,
 171                 {
 172                     method: "PATCH",
 173                     body: JSON.stringify({ is_selected }),
 174                     headers: {
 175                         Accept: "application/json",
 176                         "Content-Type": "application/json",
 177                     },
 178                 }
 179             )
 180                 .then(checkError)
 181                 .then(result => {
 182                     // Refresh the page. We should not need that actually.
 183                     this.getPackage(this.erm_package.package_id)
 184                 })
 185                 .catch(error => {
 186                     setError(error)
 187                 })
 188         },
 189         add_to_holdings() {
 190             this.edit_selected(true)
 191         },
 192         remove_from_holdings() {
 193             this.edit_selected(false)
 194         },
 195         refreshAgreements() {
 196             // FIXME We could GET /erm/eholdings/packages/$package_id/agreements instead
 197             this.initialized = false
 198             this.getPackage(this.erm_package.package_id)
 199         },
 200     },
 201     components: {
 202         EHoldingsPackageAgreements,
 203         EHoldingsPackageTitlesList,
 204     },
 205     name: "EHoldingsEBSCOPackagesShow",
 206 }
 207 </script>
 208 <style scoped>
 209 fieldset.rows label {
 210     width: 25rem;
 211 }
 212 </style>