Koha/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesFormAdd.vue
Jonathan Druart 5d8c6a36b8
Bug 32983: ERM - Retrieve AVs from an endpoint
Bug 32981 let us retrieve the authorised values from a REST API route,
instead of injecting them from the template. Let us that for the ERM module!

Test plan:
You will notice a "Loading" screen when refreshing the ERM module
Then you should not notice any other UI changes. Dropdown list should be
populated like before this patch.

Some technical notes:
I am expecting this to be slower than before, but it feels better to use
a REST API route to retrieve the AV
Future improvement will be to lazy load the AVs, to speed up the landing
page. However it needs more changes, and this gets big enough.
I would like to see a follow-up that move the code from ERM/Main.vue to
the authorised value store (I've failed at that), but that should
certainly be done after the lazy loading is implemented anyway)

Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2023-03-02 14:46:09 -03:00

211 lines
7.5 KiB
Vue

<template>
<div v-if="!initialized">{{ $__("Loading") }}</div>
<div v-else id="packages_add">
<h2 v-if="erm_package.package_id">
{{ $__("Edit package #%s").format(erm_package.package_id) }}
</h2>
<h2 v-else>{{ $__("New package") }}</h2>
<div>
<form @submit="onSubmit($event)">
<fieldset class="rows">
<ol>
<li>
<label class="required" for="package_name"
>{{ $__("Package name") }}:</label
>
<input
id="package_name"
v-model="erm_package.name"
:placeholder="$__('Package name')"
required
/>
<span class="required">{{ $__("Required") }}</span>
</li>
<li>
<label for="package_vendor_id"
>{{ $__("Vendor") }}:</label
>
<v-select
id="package_vendor_id"
v-model="erm_package.vendor_id"
label="name"
:reduce="vendor => vendor.id"
:options="vendors"
/>
</li>
<li>
<label for="package_type">{{ $__("Type") }}:</label>
<v-select
id="package_type"
v-model="erm_package.package_type"
label="description"
:reduce="av => av.value"
:options="av_package_types"
/>
</li>
<li>
<label for="package_content_type">{{
$__("Content type: ")
}}</label>
<v-select
id="package_content_type"
v-model="erm_package.content_type"
label="description"
:reduce="av => av.value"
:options="av_package_content_types"
/>
</li>
<li>
<label for="package_notes"
>{{ $__("Notes") }}:</label
>
<textarea
id="package_notes"
v-model="erm_package.notes"
/>
</li>
<EHoldingsPackageAgreements
:package_agreements="erm_package.package_agreements"
/>
</ol>
</fieldset>
<fieldset class="action">
<input type="submit" value="Submit" />
<router-link
to="/cgi-bin/koha/erm/eholdings/local/packages"
role="button"
class="cancel"
>{{ $__("Cancel") }}</router-link
>
</fieldset>
</form>
</div>
</div>
</template>
<script>
import { inject } from "vue"
import EHoldingsPackageAgreements from "./EHoldingsLocalPackageAgreements.vue"
import { setMessage, setError, setWarning } from "../../messages"
import { APIClient } from "../../fetch/api-client.js"
import { storeToRefs } from "pinia"
export default {
setup() {
const vendorStore = inject("vendorStore")
const { vendors } = storeToRefs(vendorStore)
const AVStore = inject("AVStore")
const { av_package_types, av_package_content_types } =
storeToRefs(AVStore)
return {
vendors,
av_package_types,
av_package_content_types,
}
},
data() {
return {
erm_package: {
package_id: null,
vendor_id: null,
name: "",
external_id: "",
package_type: "",
content_type: "",
notes: "",
created_on: null,
resources: null,
package_agreements: [],
},
initialized: false,
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
if (to.params.package_id) {
vm.erm_package = vm.getPackage(to.params.package_id)
} else {
vm.initialized = true
}
})
},
methods: {
getPackage(package_id) {
const client = APIClient.erm
client.localPackages.get(package_id).then(
erm_package => {
this.erm_package = erm_package
this.initialized = true
},
error => {}
)
},
checkForm(erm_package) {
let errors = []
let package_agreements = erm_package.package_agreements
const agreement_ids = package_agreements.map(pa => pa.agreement_id)
const duplicate_agreement_ids = agreement_ids.filter(
(id, i) => agreement_ids.indexOf(id) !== i
)
if (duplicate_agreement_ids.length) {
errors.push(this.$__("An agreement is used several times"))
}
errors.forEach(function (e) {
setWarning(e)
})
return !errors.length
},
onSubmit(e) {
e.preventDefault()
let erm_package = JSON.parse(JSON.stringify(this.erm_package)) // copy
if (!this.checkForm(erm_package)) {
return false
}
let package_id = erm_package.package_id
delete erm_package.package_id
delete erm_package.resources
delete erm_package.vendor
delete erm_package.resources_count
delete erm_package.is_selected
erm_package.package_agreements = erm_package.package_agreements.map(
({ package_id, agreement, ...keepAttrs }) => keepAttrs
)
const client = APIClient.erm
if (package_id) {
client.localPackages.update(erm_package, package_id).then(
success => {
setMessage(this.$__("Package updated"))
this.$router.push(
"/cgi-bin/koha/erm/eholdings/local/packages"
)
},
error => {}
)
} else {
client.localPackages.create(erm_package).then(
success => {
setMessage(this.$__("Package created"))
this.$router.push(
"/cgi-bin/koha/erm/eholdings/local/packages"
)
},
error => {}
)
}
},
},
components: {
EHoldingsPackageAgreements,
},
name: "EHoldingsEBSCOPackagesFormAdd",
}
</script>