Bugzilla – Attachment 155620 Details for
Bug 34762
Add a search based select component to ERM
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 34762: Add a SearchSelect component to ERM
Bug-34762-Add-a-SearchSelect-component-to-ERM.patch (text/plain), 5.21 KB, created by
Matt Blenkinsop
on 2023-09-14 16:10:26 UTC
(
hide
)
Description:
Bug 34762: Add a SearchSelect component to ERM
Filename:
MIME Type:
Creator:
Matt Blenkinsop
Created:
2023-09-14 16:10:26 UTC
Size:
5.21 KB
patch
obsolete
>From 942fe6d53ff5b7bf743285902d38acd4836c82b1 Mon Sep 17 00:00:00 2001 >From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com> >Date: Tue, 12 Sep 2023 09:42:57 +0000 >Subject: [PATCH] Bug 34762: Add a SearchSelect component to ERM >MIME-Version: 1.0 >Content-Type: text/plain; charset=UTF-8 >Content-Transfer-Encoding: 8bit > >This patch adds an ajax based searchable dropdown component to ERM that can be used throughout the module. It can be configured to work with different parts of the API client >This patch contains examples using the erm-api-client and the acquisitions-api-client. You can also customise the amount of characters required to trigger a search, this test plan will show two examples > >Test plan: >1) Create at least two licenses and agreements in the erm module >2) In Agreements, click New agreement and add an Agreement name and a Status (the required fields) >3) In the Vendor dropdown, you should be prompted to type at least one character to search >4) Search for a vendor in your koha system >5) The results should populate with that vendor >6) Select that vendor >7) Scroll down to Licenses and click add new license >8) In the License dropdown you should again be prompted to type at least one character >9) Search for one of the licenses you created earlier - it should be returned as an option in the dropdown >10) Select the license and add a status >11) Scroll to Related agreements and click to add a new one >12) This time you should be prompted to type two characters to search >13) Search for one of your agreements, you should not receive any results until two characters are provided >14) Select the agreement returned and add a relationship as well >15) Submit the form, the agreement should be saved (provided you have filled in all required fields) >16) In the list of agreements, click on your newly created agreement. It should have a vendor, license and related agreement associated with it >17) Sign off! > >Signed-off-by: Ãmily-Rose Francoeur <emily-rose.francoeur@inLibro.com> >--- > .../prog/js/vue/components/SearchSelect.vue | 92 +++++++++++++++++++ > 1 file changed, 92 insertions(+) > create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/SearchSelect.vue > >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/SearchSelect.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/SearchSelect.vue >new file mode 100644 >index 0000000000..81688ce767 >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/SearchSelect.vue >@@ -0,0 +1,92 @@ >+<template> >+ <v-select >+ :id="`search-select-${dataType}`" >+ v-model="model" >+ :label="label" >+ :options="options" >+ :reduce="item => item[dataIdentifier]" >+ @search="searchFilter($event)" >+ :required="required ? !modelValue : false" >+ > >+ <template v-if="searching" v-slot:no-options >+ >{{ $__("Searching...") }} >+ </template> >+ <template v-else v-slot:no-options >+ >{{ searchConducted ? $__(noResults) : $__(typeToSearch) }} >+ </template> >+ <template #search="{ attributes, events }"> >+ <input >+ :required="required ? !modelValue : false" >+ class="vs__search" >+ v-bind="attributes" >+ v-on="events" >+ /> >+ </template> >+ </v-select> >+</template> >+ >+<script> >+import { APIClient } from "../fetch/api-client.js" >+ >+export default { >+ data() { >+ return { >+ options: [], >+ searching: false, >+ searchConducted: false, >+ typeToSearch: `Type at least ${this.numberOfCharacters} character(s) to search`, >+ noResults: "No results found", >+ } >+ }, >+ computed: { >+ model: { >+ get() { >+ return this.modelValue >+ }, >+ set(value) { >+ this.$emit("update:modelValue", value) >+ }, >+ }, >+ }, >+ methods: { >+ async populateDropdown(query) { >+ const client = APIClient[this.APIClientType] >+ await client[this.dataType].getAll(query).then( >+ response => { >+ if (response.length > 0) { >+ this.options = response >+ this.searching = false >+ this.searchConducted = false >+ } else { >+ this.searching = false >+ } >+ }, >+ error => {} >+ ) >+ }, >+ searchFilter(e) { >+ if (e.length >= this.numberOfCharacters) { >+ this.searching = true >+ this.searchConducted = true >+ const dataQueryObject = {} >+ dataQueryObject[`me.${this.searchField}`] = { "-like": `${e}%` } >+ this.populateDropdown(dataQueryObject) >+ } else { >+ this.searchConducted = false >+ } >+ }, >+ }, >+ props: { >+ dataType: String, >+ modelValue: Number, >+ required: Boolean, >+ dataIdentifier: String, >+ label: String, >+ numberOfCharacters: Number, >+ searchField: String, >+ APIClientType: String, >+ }, >+ emits: ["update:modelValue"], >+ name: "SearchSelect", >+} >+</script> >-- >2.37.1 (Apple Git-137.1)
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 34762
:
155545
|
155546
|
155547
|
155549
| 155620