From cd2884d907373aa5fd338da2c27cd365b5d4e51b Mon Sep 17 00:00:00 2001 From: Jonathan Druart Date: Thu, 28 Jul 2022 17:26:46 +0200 Subject: [PATCH] Bug 32030: Improve form UI * Align inputs, textareas and selects * Use vue-select for dropdown lists Note that the only way I found to make the select required is to follow what is on their doc https://vue-select.org/guide/validation.html#required However we need our own vue-select-required component to avoid the repetition (the #search slot). I've tried (but failed) on https://gitlab.com/joubu/Koha/-/commits/erm-v-select-required Signed-off-by: Jonathan Field Signed-off-by: Martin Renvoize Signed-off-by: Kyle M Hall Signed-off-by: Tomas Cohen Arazi --- cypress/integration/Agreements_spec.ts | 4 +- cypress/integration/Licenses_spec.ts | 8 +- cypress/integration/Packages_spec.ts | 8 +- .../vue/components/ERM/AgreementLicenses.vue | 84 ++++++-------- .../components/ERM/AgreementRelationships.vue | 63 +++++------ .../vue/components/ERM/AgreementUserRoles.vue | 31 +++--- .../vue/components/ERM/AgreementsFormAdd.vue | 103 ++++++------------ .../ERM/EHoldingsLocalPackageAgreements.vue | 34 +++--- .../ERM/EHoldingsLocalPackagesFormAdd.vue | 65 +++-------- .../ERM/EHoldingsLocalTitlesFormAdd.vue | 22 +--- .../EHoldingsLocalTitlesFormAddResources.vue | 60 +++++----- .../prog/js/vue/components/ERM/ERMMain.vue | 18 ++- .../js/vue/components/ERM/LicensesFormAdd.vue | 81 ++++++-------- .../intranet-tmpl/prog/js/vue/main-erm.ts | 4 +- package.json | 3 +- 15 files changed, 240 insertions(+), 348 deletions(-) diff --git a/cypress/integration/Agreements_spec.ts b/cypress/integration/Agreements_spec.ts index a592628e0f..928b201a0b 100644 --- a/cypress/integration/Agreements_spec.ts +++ b/cypress/integration/Agreements_spec.ts @@ -102,7 +102,7 @@ describe("Agreement CRUD operations", () => { "have.length", 1 ); // name, description, status - cy.get("#agreement_status").select(agreement.status); + cy.get("#agreement_status .vs__search").type(agreement.status + '{enter}',{force:true}); cy.contains("Add new period").click(); cy.get("#agreements_add").contains("Submit").click(); @@ -215,7 +215,7 @@ describe("Agreement CRUD operations", () => { "have.value", agreements[0].description ); - cy.get("#agreement_status").should("have.value", agreement.status); + cy.get("#agreement_status .vs__selected").contains("Active"); cy.get("#agreement_is_perpetual_no").should("be.checked"); cy.get("#started_on_0").invoke("val").should("eq", dates["today_us"]); cy.get("#ended_on_0").invoke("val").should("eq", dates["tomorrow_us"]); diff --git a/cypress/integration/Licenses_spec.ts b/cypress/integration/Licenses_spec.ts index 068fafe8a7..f2498bbdaf 100644 --- a/cypress/integration/Licenses_spec.ts +++ b/cypress/integration/Licenses_spec.ts @@ -77,8 +77,8 @@ describe("License CRUD operations", () => { cy.get("#license_name").type(license.name); cy.get("#license_description").type(license.description); cy.get("#licenses_add").contains("Submit").click(); - cy.get("#license_type").select(license.type); - cy.get("#license_status").select(license.status); + cy.get("#license_type .vs__search").type(license.type + '{enter}',{force:true}); + cy.get("#license_status .vs__search").type(license.status + '{enter}',{force:true}); cy.get("#started_on").click(); cy.get(".flatpickr-calendar") @@ -143,8 +143,8 @@ describe("License CRUD operations", () => { "have.value", license.description ); - cy.get("#license_type").should("have.value", license.type); - cy.get("#license_status").should("have.value", license.status); + cy.get("#license_type .vs__selected").contains("Local"); + cy.get("#license_status .vs__selected").contains("Active"); cy.get("#started_on").invoke("val").should("eq", dates["today_us"]); cy.get("#ended_on").invoke("val").should("eq", dates["tomorrow_us"]); diff --git a/cypress/integration/Packages_spec.ts b/cypress/integration/Packages_spec.ts index 9bce51f4a8..55b68138ff 100644 --- a/cypress/integration/Packages_spec.ts +++ b/cypress/integration/Packages_spec.ts @@ -67,8 +67,8 @@ describe("Package CRUD operations", () => { 1 ); cy.get("#package_name").type(erm_package.name); - cy.get("#package_type").select(erm_package.package_type); - cy.get("#package_content_type").select(erm_package.content_type); + cy.get("#package_type .vs__search").type(erm_package.package_type + '{enter}',{force:true}); + cy.get("#package_content_type .vs__search").type(erm_package.content_type + '{enter}',{force:true}); // Submit the form, get 500 cy.intercept("POST", "/api/v1/erm/eholdings/local/packages", { @@ -116,8 +116,8 @@ describe("Package CRUD operations", () => { // Form has been correctly filled in cy.get("#package_name").should("have.value", erm_package.name); - cy.get("#package_type").should("have.value", erm_package.package_type); - cy.get("#package_content_type").should("have.value", erm_package.content_type); + cy.get("#package_type .vs__selected").contains("Complete"); + cy.get("#package_content_type .vs__selected").contains("Print"); // Submit the form, get 500 cy.intercept("PUT", "/api/v1/erm/eholdings/local/packages/*", { diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue index 813faf7b49..995abc8d63 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue @@ -19,69 +19,57 @@ - + + {{ $t("Required") }}
  • - + + + {{ $t("Required") }}
  • - +
  • - + + + {{ $t("Required") }}
  • - + + {{ $t("Required") }}
  • diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue index 62a6a524bd..5dbc2ad415 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue @@ -29,21 +29,22 @@ - + + + {{ $t("Required") }}
    • 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 cfe56967ec..1df13c1446 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,24 +25,13 @@ - + label="name" + :reduce="(vendor) => vendor.id" + :options="vendors" + />
  • - + + {{ $t("Required") }}
  • - + />
  • - +
  • - + label="lib" + :reduce="(av) => av.authorised_value" + :options="av_package_types" + />
  • - + label="lib" + :reduce="(av) => av.authorised_value" + :options="av_package_content_types" + />
    • {{ $t("Publication type") }}: - + label="lib" + :reduce="(av) => av.authorised_value" + :options="av_title_publication_types" + />
  • 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 77a6ff4f1a..52c1877112 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 @@ -15,45 +15,41 @@
    1. - - + + {{ $t("Required") }}
    2. - - + +
    3. diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue index bccf63e5fa..d01174e434 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue @@ -161,8 +161,22 @@ export default { }; - + + +form .v-select { + display: inline-block; + background-color: white; + width: 30%; +} + +.v-select, input:not([type=submit]):not([type=search]):not([type=button]), textarea { + border-color: rgba(60,60,60,0.26); + border-width: 1px; + border-radius: 4px; + min-width: 30%; +} + \ No newline at end of file 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 4dcf88c92f..2c8d1ff101 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,26 +25,14 @@ - + label="name" + :reduce="(vendor) => vendor.id" + :options="vendors" + />
      4. -
    5. - + + {{ $t("Required") }}
    6. - + + {{ $t("Required") }}
    7. diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts b/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts index 7656bbfbe3..21ae72eb12 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts @@ -5,6 +5,7 @@ import { createPinia } from "pinia"; import { library } from "@fortawesome/fontawesome-svg-core"; import { faPlus, faPencil, faTrash } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; +import vSelect from "vue-select"; library.add(faPlus, faPencil, faTrash); @@ -31,7 +32,8 @@ const app = createApp(App) .use(createPinia()) .use(router) .use(i18n) - .component("font-awesome-icon", FontAwesomeIcon); + .component("font-awesome-icon", FontAwesomeIcon) + .component("v-select", vSelect); app.config.unwrapInjectedRef = true; app.mount("#erm"); const mainStore = useMainStore(); diff --git a/package.json b/package.json index 395a4faf7f..54ebc3f562 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,8 @@ "vue": "^3.2.31", "vue-flatpickr-component": "^9", "vue-i18n": "^9.1.10", - "vue-router": "^4.0.14" + "vue-router": "^4.0.14", + "vue-select": "^4.0.0-beta.5" }, "scripts": { "build": "node_modules/.bin/gulp build", -- 2.39.5