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

   1 <template>
   2     <div v-if="!initialized">{{ $t("Loading") }}</div>
   3     <div v-else-if="resource" id="eholdings_resources_show">
   4         <h2>
   5             {{ $t("Resource .id", { id: resource.resource_id }) }}
   6             <span v-if="!updating_is_selected">
   7                 <a
   8                     v-if="!resource.is_selected"
   9                     class="btn btn-default btn-xs"
  10                     role="button"
  11                     @click="add_to_holdings"
  12                     ><font-awesome-icon icon="plus" /> Add to holdings</a
  13                 >
  14                 <a
  15                     v-else
  16                     class="btn btn-default btn-xs"
  17                     role="button"
  18                     id="remove-from-holdings"
  19                     @click="remove_from_holdings"
  20                     ><font-awesome-icon icon="minus" /> Remove from holdings</a
  21                 > </span
  22             ><span v-else><font-awesome-icon icon="spinner" /></span>
  23         </h2>
  24         <div>
  25             <fieldset class="rows">
  26                 <legend>{{ $t("Resource information") }}</legend>
  27                 <ol>
  28                     <li v-if="resource.resource_id">
  29                         <label>{{ $t("Resource identifier") }}:</label>
  30                         <span>
  31                             {{ resource.resource_id }}
  32                         </span>
  33                     </li>
  34                     <li>
  35                         <label>{{ $t("Publication title") }}:</label>
  36                         <span
  37                             ><router-link
  38                                 :to="`/cgi-bin/koha/erm/eholdings/ebsco/titles/${resource.title_id}`"
  39                                 >{{
  40                                     resource.title.publication_title
  41                                 }}</router-link
  42                             ></span
  43                         >
  44                     </li>
  45                     <li>
  46                         <label>{{ $t("Publisher name") }}:</label>
  47                         <span>
  48                             {{ resource.title.publisher_name }}
  49                         </span>
  50                     </li>
  51                     <li>
  52                         <label>{{ $t("Publication type") }}:</label>
  53                         <span>
  54                             {{ resource.title.publication_type }}
  55                         </span>
  56                     </li>
  57                     <li v-if="resource.title.print_identifier">
  58                         <label>{{ $t("Print-format identifier") }}:</label>
  59                         <span>
  60                             {{ resource.title.print_identifier }}
  61                         </span>
  62                     </li>
  63                     <li v-if="resource.title.online_identifier">
  64                         <label>{{ $t("Online-format identifier") }}:</label>
  65                         <span>
  66                             {{ resource.title.online_identifier }}
  67                         </span>
  68                     </li>
  69                 </ol>
  70             </fieldset>
  71
  72             <fieldset class="rows">
  73                 <ol>
  74                     <li>
  75                         <label>{{ $t("Package") }}:</label>
  76                         <span
  77                             ><router-link
  78                                 :to="`/cgi-bin/koha/erm/eholdings/ebsco/packages/${resource.package_id}`"
  79                                 >{{ resource.package.name }}</router-link
  80                             ></span
  81                         >
  82                     </li>
  83
  84                     <li>
  85                         <label>{{ $t("Vendor") }}:</label>
  86                         <span v-if="resource.vendor">
  87                             {{ resource.vendor.name }}
  88                         </span>
  89                     </li>
  90                     <li v-if="resource.package.content_type">
  91                         <label>{{ $t("Package content type") }}:</label>
  92                         <span>{{ resource.package.content_type }}</span>
  93                     </li>
  94                 </ol>
  95             </fieldset>
  96
  97             <fieldset class="rows">
  98                 <legend>Resource settings</legend>
  99                 <ol>
 100                     <li>
 101                         <label>{{ $t("Coverage dates") }}:</label>
 102                         <span
 103                             >{{ format_date(resource.started_on) }}-{{
 104                                 format_date(resource.ended_on)
 105                             }}</span
 106                         >
 107                     </li>
 108                 </ol>
 109             </fieldset>
 110         </div>
 111     </div>
 112 </template>
 113
 114 <script>
 115 import { fetchEBSCOResource } from "../../fetch"
 116 import { useVendorStore } from "../../stores/vendors"
 117 import { storeToRefs } from "pinia"
 118 import { checkError } from '../../fetch.js'
 119
 120 export default {
 121     setup() {
 122         const format_date = $date
 123
 124         const vendorStore = useVendorStore()
 125         const { vendors } = storeToRefs(vendorStore)
 126         return {
 127             format_date,
 128             vendors,
 129         }
 130     },
 131     data() {
 132         return {
 133             resource: {
 134                 resource_id: null,
 135                 title_id: null,
 136                 package_id: null,
 137                 started_on: '',
 138                 ended_on: '',
 139                 proxy: '',
 140                 title: {},
 141                 package: {},
 142             },
 143             initialized: false,
 144             updating_is_selected: false,
 145         }
 146     },
 147
 148     beforeRouteEnter(to, from, next) {
 149         next(vm => {
 150             vm.getResource(to.params.resource_id)
 151         })
 152     },
 153     beforeRouteUpdate(to, from) {
 154         this.resource = this.getResource(to.params.resource_id)
 155     },
 156     methods: {
 157         async getResource(resource_id) {
 158             const resource = await fetchEBSCOResource(resource_id)
 159             this.resource = resource
 160             this.initialized = true
 161             this.updating_is_selected = false
 162         },
 163         edit_selected(is_selected) {
 164             this.updating_is_selected = true
 165             fetch('/api/v1/erm/eholdings/ebsco/resources/' + this.resource.resource_id, {
 166                 method: "PATCH",
 167                 body: JSON.stringify({ is_selected }),
 168                 headers: {
 169                     'Accept': 'application/json',
 170                     'Content-Type': 'application/json'
 171                 },
 172             })
 173                 .then(checkError)
 174                 .then(
 175                     (result) => {
 176                         // Refresh the page. We should not need that actually.
 177                         this.getResource(this.resource.resource_id)
 178                     },
 179                 ).catch(
 180                     (error) => {
 181                         setError(error)
 182                     }
 183                 )
 184         },
 185         add_to_holdings() {
 186             this.edit_selected(true)
 187         },
 188         remove_from_holdings() {
 189             this.edit_selected(false)
 190         },
 191     },
 192     name: "EHoldingsEBSCOResourcesShow",
 193 }
 194 </script>
 195 <style scoped>
 196 fieldset.rows label {
 197     width: 25rem;
 198 }
 199 </style>