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

   1 <template>
   2     <div v-if="!this.initialized">{{ $t("Loading") }}</div>
   3     <div v-else id="packages_add">
   4         <h2 v-if="erm_package.package_id">
   5             {{ $t("Edit package .id", { id: erm_package.package_id }) }}
   6         </h2>
   7         <h2 v-else>{{ $t("New package") }}</h2>
   8         <div>
   9             <form @submit="onSubmit($event)">
  10                 <fieldset class="rows">
  11                     <ol>
  12                         <li>
  13                             <label class="required" for="package_name"
  14                                 >{{ $t("Package name") }}:</label
  15                             >
  16                             <input
  17                                 id="package_name"
  18                                 v-model="erm_package.name"
  19                                 :placeholder="$t('Package name')"
  20                                 required
  21                             />
  22                             <span class="required">{{ $t("Required") }}</span>
  23                         </li>
  24                         <li>
  25                             <label for="package_vendor_id"
  26                                 >{{ $t("Vendor") }}:</label
  27                             >
  28                             <select
  29                                 id="package_vendor_id"
  30                                 v-model="erm_package.vendor_id"
  31                             >
  32                                 <option value=""></option>
  33                                 <option
  34                                     v-for="vendor in vendors"
  35                                     :key="vendor.vendor_id"
  36                                     :value="vendor.id"
  37                                     :selected="
  38                                         vendor.id == erm_package.vendor_id
  39                                             ? true
  40                                             : false
  41                                     "
  42                                 >
  43                                     {{ vendor.name }}
  44                                 </option>
  45                             </select>
  46                         </li>
  47                         <li>
  48                             <label for="package_type">{{ $t("Type") }}:</label>
  49                             <select
  50                                 id="package_type"
  51                                 v-model="erm_package.package_type"
  52                             >
  53                                 <option value=""></option>
  54                                 <option
  55                                     v-for="type in av_package_types"
  56                                     :key="type.authorised_values"
  57                                     :value="type.authorised_value"
  58                                     :selected="
  59                                         type.authorised_value ==
  60                                         erm_package.package_type
  61                                             ? true
  62                                             : false
  63                                     "
  64                                 >
  65                                     {{ type.lib }}
  66                                 </option>
  67                             </select>
  68                         </li>
  69                         <li>
  70                             <label for="package_content_type">{{
  71                                 $t("Content type: ")
  72                             }}</label>
  73                             <select
  74                                 id="package_content_type"
  75                                 v-model="erm_package.content_type"
  76                             >
  77                                 <option value=""></option>
  78                                 <option
  79                                     v-for="type in av_package_content_types"
  80                                     :key="type.authorised_values"
  81                                     :value="type.authorised_value"
  82                                     :selected="
  83                                         type.authorised_value ==
  84                                         erm_package.content_type
  85                                             ? true
  86                                             : false
  87                                     "
  88                                 >
  89                                     {{ type.lib }}
  90                                 </option>
  91                             </select>
  92                         </li>
  93
  94                         <EHoldingsPackageAgreements
  95                             :package_agreements="erm_package.package_agreements"
  96                         />
  97                     </ol>
  98                 </fieldset>
  99                 <fieldset class="action">
 100                     <input type="submit" value="Submit" />
 101                     <router-link
 102                         to="/cgi-bin/koha/erm/eholdings/packages"
 103                         role="button"
 104                         class="cancel"
 105                         >{{ $t("Cancel") }}</router-link
 106                     >
 107                 </fieldset>
 108             </form>
 109         </div>
 110     </div>
 111 </template>
 112
 113 <script>
 114 import EHoldingsPackageAgreements from "./EHoldingsPackageAgreements.vue"
 115 import { useVendorStore } from "../../stores/vendors"
 116 import { useAVStore } from "../../stores/authorised_values"
 117 import { setMessage, setError } from "../../messages"
 118 import { fetchPackage } from '../../fetch'
 119 import { storeToRefs } from "pinia"
 120
 121 export default {
 122     setup() {
 123         const vendorStore = useVendorStore()
 124         const { vendors } = storeToRefs(vendorStore)
 125         const AVStore = useAVStore()
 126         const {
 127             av_package_types,
 128             av_package_content_types,
 129         } = storeToRefs(AVStore)
 130
 131         return {
 132             vendors,
 133             av_package_types,
 134             av_package_content_types,
 135         }
 136     },
 137     data() {
 138         return {
 139             erm_package: {
 140                 package_id: null,
 141                 name: '',
 142                 external_id: '',
 143                 package_type: '',
 144                 content_type: '',
 145                 package_agreements: [],
 146             },
 147             initialized: false,
 148         }
 149     },
 150     beforeRouteEnter(to, from, next) {
 151         next(vm => {
 152             if (to.params.package_id) {
 153                 vm.erm_package = vm.getPackage(to.params.package_id)
 154             } else {
 155                 vm.initialized = true
 156             }
 157         })
 158     },
 159     methods: {
 160         async getPackage(package_id) {
 161             const erm_package = await fetchPackage(package_id)
 162             this.erm_package = erm_package
 163             this.initialized = true
 164         },
 165         onSubmit(e) {
 166             e.preventDefault()
 167
 168             let erm_package = JSON.parse(JSON.stringify(this.erm_package)) // copy
 169             let apiUrl = '/api/v1/erm/eholdings/packages'
 170
 171             let method = 'POST'
 172             if (erm_package.package_id) {
 173                 method = 'PUT'
 174                 apiUrl += '/' + erm_package.package_id
 175             }
 176             delete erm_package.package_id
 177             delete erm_package.resources
 178             delete erm_package.vendor
 179             delete erm_package.resources_count
 180
 181             erm_package.package_agreements = erm_package.package_agreements.map(({ package_id, agreement, ...keepAttrs }) => keepAttrs)
 182
 183             const options = {
 184                 method: method,
 185                 body: JSON.stringify(erm_package),
 186                 headers: {
 187                     'Content-Type': 'application/json;charset=utf-8'
 188                 },
 189             }
 190
 191             fetch(apiUrl, options)
 192                 .then(response => {
 193                     if (response.status == 200) {
 194                         this.$router.push("/cgi-bin/koha/erm/eholdings/packages")
 195                         setMessage(this.$t("Package updated"))
 196                     } else if (response.status == 201) {
 197                         this.$router.push("/cgi-bin/koha/erm/eholdings/packages")
 198                         setMessage(this.$t("Package created"))
 199                     } else {
 200                         setError(response.message || response.statusText)
 201                     }
 202                 }, (error) => {
 203                     setError(error)
 204                 }).catch(e => { console.log(e) })
 205         },
 206     },
 207     components: {
 208         EHoldingsPackageAgreements,
 209     },
 210     name: "EHoldingsPackagesFormAdd",
 211 }
 212 </script>