From e90ccb7ff33d68263a62a4f0f2f5234c79481d5f Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Tue, 11 Apr 2023 11:05:07 +0200
Subject: [PATCH] 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>
---
 .../vue/components/ERM/AgreementsFormAdd.vue  | 11 ++---
 .../ERM/EHoldingsLocalPackagesFormAdd.vue     | 10 ++--
 .../EHoldingsLocalTitlesFormAddResources.vue  | 16 ++-----
 .../js/vue/components/ERM/LicensesFormAdd.vue | 11 ++---
 .../prog/js/vue/components/ERM/Main.vue       | 11 +----
 .../js/vue/components/FormSelectVendors.vue   | 47 +++++++++++++++++++
 6 files changed, 61 insertions(+), 45 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/FormSelectVendors.vue

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue
index e551a94532..645a13b5be 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue
@@ -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",
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesFormAdd.vue
index 3c0a94fa18..75da1c2a68 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesFormAdd.vue
@@ -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",
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormAddResources.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormAddResources.vue
index badeeee673..3ab53bf77c 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormAddResources.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormAddResources.vue
@@ -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>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
index 9df7727489..b14f93bb25 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
@@ -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",
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Main.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Main.vue
index 12e569e28d..aac16c48e2 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Main.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Main.vue
@@ -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 => {}
             )
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormSelectVendors.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormSelectVendors.vue
new file mode 100644
index 0000000000..fe6db5a102
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormSelectVendors.vue
@@ -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>
-- 
2.39.5