Bug 33480: Improve vendor aliases display in dropdown list
On bug 33103 we are adding the ability to filter vendors by aliases. To make it possible in the ERM module we are adding the alias list in the dropdown list. However it's not nicely displayed, especially if there are several entries. This patch suggests to display the aliases in a different line, and not for the selected option. To acchieve that we create a new Vue component FormSelectVendors. Test plan: Create several vendors, and add some aliases to them (keep one vendor without alias) Go to the ERM module go to the following page, search for vendors by aliases, save the form, and confirm that everything is nice and works correctly: * Add/edit an agreement * Add/edit a license * Add/edit a local package * Add a new package to a title (edit a title) Signed-off-by: Pedro Amorim <pedro.amorim@ptfs-europe.com> Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
parent
b00806774d
commit
e90ccb7ff3
6 changed files with 61 additions and 45 deletions
|
@ -25,12 +25,9 @@
|
|||
<label for="agreement_vendor_id"
|
||||
>{{ $__("Vendor") }}:</label
|
||||
>
|
||||
<v-select
|
||||
<FormSelectVendors
|
||||
id="agreement_vendor_id"
|
||||
v-model="agreement.vendor_id"
|
||||
label="display_name"
|
||||
:reduce="vendor => vendor.id"
|
||||
:options="vendors"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
|
@ -178,15 +175,13 @@ import AgreementLicenses from "./AgreementLicenses.vue"
|
|||
import AgreementRelationships from "./AgreementRelationships.vue"
|
||||
import Documents from "./Documents.vue"
|
||||
import ButtonSubmit from "../ButtonSubmit.vue"
|
||||
import FormSelectVendors from "../FormSelectVendors.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_agreement_statuses,
|
||||
|
@ -199,7 +194,6 @@ export default {
|
|||
} = storeToRefs(AVStore)
|
||||
|
||||
return {
|
||||
vendors,
|
||||
av_agreement_statuses,
|
||||
av_agreement_closure_reasons,
|
||||
av_agreement_renewal_priorities,
|
||||
|
@ -402,6 +396,7 @@ export default {
|
|||
AgreementRelationships,
|
||||
Documents,
|
||||
ButtonSubmit,
|
||||
FormSelectVendors,
|
||||
},
|
||||
name: "AgreementsFormAdd",
|
||||
}
|
||||
|
|
|
@ -25,12 +25,9 @@
|
|||
<label for="package_vendor_id"
|
||||
>{{ $__("Vendor") }}:</label
|
||||
>
|
||||
<v-select
|
||||
<FormSelectVendors
|
||||
id="package_vendor_id"
|
||||
v-model="erm_package.vendor_id"
|
||||
label="display_name"
|
||||
:reduce="vendor => vendor.id"
|
||||
:options="vendors"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
|
@ -86,20 +83,18 @@
|
|||
<script>
|
||||
import { inject } from "vue"
|
||||
import EHoldingsPackageAgreements from "./EHoldingsLocalPackageAgreements.vue"
|
||||
import FormSelectVendors from "../FormSelectVendors.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,
|
||||
}
|
||||
|
@ -204,6 +199,7 @@ export default {
|
|||
},
|
||||
components: {
|
||||
EHoldingsPackageAgreements,
|
||||
FormSelectVendors,
|
||||
},
|
||||
name: "EHoldingsEBSCOPackagesFormAdd",
|
||||
}
|
||||
|
|
|
@ -43,12 +43,9 @@
|
|||
<label :for="`resource_vendor_id_${counter}`"
|
||||
>{{ $__("Vendor") }}:</label
|
||||
>
|
||||
<v-select
|
||||
<FormSelectVendors
|
||||
:id="`resource_vendor_id_${counter}`"
|
||||
v-model="resource.vendor_id"
|
||||
label="display_name"
|
||||
:reduce="vendor => vendor.id"
|
||||
:options="vendors"
|
||||
/>
|
||||
</li>
|
||||
|
||||
|
@ -92,17 +89,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { inject } from "vue"
|
||||
import flatPickr from "vue-flatpickr-component"
|
||||
import { storeToRefs } from "pinia"
|
||||
import { APIClient } from "../../fetch/api-client.js"
|
||||
import FormSelectVendors from "../FormSelectVendors.vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const vendorStore = inject("vendorStore")
|
||||
const { vendors } = storeToRefs(vendorStore)
|
||||
return { vendors }
|
||||
},
|
||||
setup() {},
|
||||
data() {
|
||||
return {
|
||||
packages: [],
|
||||
|
@ -136,7 +128,7 @@ export default {
|
|||
props: {
|
||||
resources: Array,
|
||||
},
|
||||
components: { flatPickr },
|
||||
components: { flatPickr, FormSelectVendors },
|
||||
name: "EHoldingsLocalTitlesFormAddResources",
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -25,12 +25,9 @@
|
|||
<label for="license_vendor_id"
|
||||
>{{ $__("Vendor") }}:</label
|
||||
>
|
||||
<v-select
|
||||
<FormSelectVendors
|
||||
id="license_vendor_id"
|
||||
v-model="license.vendor_id"
|
||||
label="display_name"
|
||||
:reduce="vendor => vendor.id"
|
||||
:options="vendors"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
|
@ -137,21 +134,18 @@ import { inject } from "vue"
|
|||
import flatPickr from "vue-flatpickr-component"
|
||||
import UserRoles from "./UserRoles.vue"
|
||||
import Documents from "./Documents.vue"
|
||||
import FormSelectVendors from "../FormSelectVendors.vue"
|
||||
import { setMessage, 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_license_types, av_license_statuses, av_user_roles } =
|
||||
storeToRefs(AVStore)
|
||||
|
||||
return {
|
||||
vendors,
|
||||
av_license_types,
|
||||
av_license_statuses,
|
||||
av_user_roles,
|
||||
|
@ -271,6 +265,7 @@ export default {
|
|||
flatPickr,
|
||||
UserRoles,
|
||||
Documents,
|
||||
FormSelectVendors,
|
||||
},
|
||||
name: "LicensesFormAdd",
|
||||
}
|
||||
|
|
|
@ -76,16 +76,7 @@ export default {
|
|||
const acq_client = APIClient.acquisition
|
||||
acq_client.vendors.getAll().then(
|
||||
vendors => {
|
||||
this.vendorStore.vendors = vendors.map(v => ({
|
||||
...v,
|
||||
display_name:
|
||||
v.name +
|
||||
(v.aliases.length > 0
|
||||
? " (" +
|
||||
v.aliases.map(a => a.alias).join(", ") +
|
||||
")"
|
||||
: ""),
|
||||
}))
|
||||
this.vendorStore.vendors = vendors
|
||||
},
|
||||
error => {}
|
||||
)
|
||||
|
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<v-select
|
||||
label="name"
|
||||
:reduce="vendor => vendor.id"
|
||||
:options="vendorOptions"
|
||||
:filter-by="filterVendors"
|
||||
>
|
||||
<template v-slot:option="v">
|
||||
{{ v.name }}
|
||||
<br />
|
||||
<cite>{{ v.aliases.map(a => a.alias).join(", ") }}</cite>
|
||||
</template>
|
||||
</v-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { inject } from "vue"
|
||||
import { storeToRefs } from "pinia"
|
||||
export default {
|
||||
setup() {
|
||||
const vendorStore = inject("vendorStore")
|
||||
const { vendors } = storeToRefs(vendorStore)
|
||||
return { vendors }
|
||||
},
|
||||
computed: {
|
||||
vendorOptions() {
|
||||
return this.vendors.map(v => ({
|
||||
...v,
|
||||
full_search:
|
||||
v.name +
|
||||
(v.aliases.length > 0
|
||||
? " (" + v.aliases.map(a => a.alias).join(", ") + ")"
|
||||
: ""),
|
||||
}))
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
filterVendors(vendor, label, search) {
|
||||
return (
|
||||
(vendor.full_search || "")
|
||||
.toLocaleLowerCase()
|
||||
.indexOf(search.toLocaleLowerCase()) > -1
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
Loading…
Reference in a new issue