From c4994c7d106852bb62eba3c72adb214caf0ca686 Mon Sep 17 00:00:00 2001 From: Leonardo Pavan Rocha Date: Tue, 9 May 2023 18:54:25 +0000 Subject: [PATCH] [IMP] web: changes in name and signature for sign This commit adapts the NameAndSignature component to allow usage in the sign module by enabling customization of behavior when "auto" and "load" buttons are clicked. It also replaces the top buttons for fa icons for a cleaner UI and adds autofocus to the name input field. task-3286974 Part-of: odoo/odoo#126296 --- .../src/core/signature/name_and_signature.js | 21 ++++-- .../src/core/signature/name_and_signature.xml | 24 +++---- .../tests/core/name_and_signature_tests.js | 64 ++++++++----------- 3 files changed, 54 insertions(+), 55 deletions(-) diff --git a/addons/web/static/src/core/signature/name_and_signature.js b/addons/web/static/src/core/signature/name_and_signature.js index e8f27edc34d..e1ad4834f64 100644 --- a/addons/web/static/src/core/signature/name_and_signature.js +++ b/addons/web/static/src/core/signature/name_and_signature.js @@ -3,7 +3,7 @@ import { isMobileOS } from "@web/core/browser/feature_detection"; import { Dropdown } from "@web/core/dropdown/dropdown"; import { DropdownItem } from "@web/core/dropdown/dropdown_item"; -import { useService } from "@web/core/utils/hooks"; +import { useService, useAutofocus } from "@web/core/utils/hooks"; import { pick } from "@web/core/utils/objects"; import { renderToString } from "@web/core/utils/render"; import { getDataURLFromFile } from "@web/core/utils/urls"; @@ -28,14 +28,15 @@ export class NameAndSignature extends Component { }); this.signNameInputRef = useRef("signNameInput"); - const signInputLoad = useRef("signInputLoad"); + this.signInputLoad = useRef("signInputLoad"); + useAutofocus({ refName: "signNameInput" }); useEffect( (el) => { if (el) { el.click(); } }, - () => [signInputLoad.el] + () => [this.signInputLoad.el] ); onWillStart(async () => { @@ -137,6 +138,10 @@ export class NameAndSignature extends Component { return this.$signatureField.jSignature(...arguments); } + uploadFile() { + this.signInputLoad.el?.click(); + } + /** * Handles change on load file input: displays the loaded image if the * format is correct, or displays an error otherwise. @@ -170,6 +175,14 @@ export class NameAndSignature extends Component { this.jSignature("reset"); } + onClickSignLoad() { + this.setMode("load"); + } + + onClickSignAuto() { + this.setMode("auto"); + } + onInputSignName(ev) { this.props.signature.name = ev.target.value; if (!this.state.showSignatureArea && this.getCleanedName()) { @@ -182,7 +195,7 @@ export class NameAndSignature extends Component { } onSelectFont(index) { - this.currentFont = this.fonts[index]; + this.currentFont = index; this.drawCurrentName(); } diff --git a/addons/web/static/src/core/signature/name_and_signature.xml b/addons/web/static/src/core/signature/name_and_signature.xml index bf5dbad9915..8b208153ab2 100644 --- a/addons/web/static/src/core/signature/name_and_signature.xml +++ b/addons/web/static/src/core/signature/name_and_signature.xml @@ -53,7 +53,7 @@
- + Auto
@@ -63,20 +63,14 @@
- + Load
-
- - Clear - -
- - - Style - +
+ + @@ -84,8 +78,14 @@ +
+ +
+
- +
diff --git a/addons/web/static/tests/core/name_and_signature_tests.js b/addons/web/static/tests/core/name_and_signature_tests.js index 339b5984efc..f9e10d68b9f 100644 --- a/addons/web/static/tests/core/name_and_signature_tests.js +++ b/addons/web/static/tests/core/name_and_signature_tests.js @@ -13,6 +13,16 @@ let env; let target; let props; +const getNameAndSignatureButtonNames = (target) => { + return [...target.querySelectorAll(".card-header .col-auto")].reduce((names, el) => { + const text = el.textContent.trim(); + if (text) { + names.push(text); + } + return names; + }, []); +}; + QUnit.module("Components", ({ beforeEach }) => { beforeEach(async () => { const mockRPC = async (route, args) => { @@ -37,11 +47,11 @@ QUnit.module("Components", ({ beforeEach }) => { const defaultName = "Don Toliver"; props.signature.name = defaultName; await mount(NameAndSignature, target, { env, props }); - assert.deepEqual( - [...target.querySelectorAll(".card-header .col-auto")].map((el) => - el.textContent.trim() - ), - ["Auto", "Draw", "Load", "Style"] + assert.deepEqual(getNameAndSignatureButtonNames(target), ["Auto", "Draw", "Load"]); + assert.containsOnce( + target, + ".o_web_sign_auto_select_style", + "should show font selection dropdown" ); assert.containsOnce(target, ".card-header .active"); assert.strictEqual(target.querySelector(".card-header .active").textContent.trim(), "Auto"); @@ -49,26 +59,14 @@ QUnit.module("Components", ({ beforeEach }) => { assert.strictEqual(target.querySelector(".o_web_sign_name_group input").value, defaultName); await click(target, ".o_web_sign_draw_button"); - assert.deepEqual( - [...target.querySelectorAll(".card-header .col-auto")].map((el) => - el.textContent.trim() - ), - ["Auto", "Draw", "Load", "Clear"] - ); + assert.deepEqual(getNameAndSignatureButtonNames(target), ["Auto", "Draw", "Load"]); + assert.containsOnce(target, ".o_web_sign_draw_clear"); assert.containsOnce(target, ".card-header .active"); assert.strictEqual(target.querySelector(".card-header .active").textContent.trim(), "Draw"); await click(target, ".o_web_sign_load_button"); - assert.deepEqual( - [...target.querySelectorAll(".card-header .col-auto")].map((el) => - el.textContent.trim() - ), - ["Auto", "Draw", "Load", ""] - ); - assert.hasClass( - target.querySelectorAll(".card-header .col-auto")[3], - "o_web_sign_load_file" - ); + assert.deepEqual(getNameAndSignatureButtonNames(target), ["Auto", "Draw", "Load"]); + assert.containsOnce(target, ".o_web_sign_load_file"); assert.containsOnce(target, ".card-header .active"); assert.strictEqual(target.querySelector(".card-header .active").textContent.trim(), "Load"); }); @@ -81,12 +79,8 @@ QUnit.module("Components", ({ beforeEach }) => { await editInput(target, ".o_web_sign_name_group input", "plop"); await nextTick(); - assert.deepEqual( - [...target.querySelectorAll(".card-header .col-auto")].map((el) => - el.textContent.trim() - ), - ["Auto", "Draw", "Load", "Style"] - ); + assert.deepEqual(getNameAndSignatureButtonNames(target), ["Auto", "Draw", "Load"]); + assert.containsOnce(target, ".o_web_sign_auto_select_style"); assert.strictEqual(target.querySelector(".card-header .active").textContent.trim(), "Auto"); assert.containsOnce(target, ".o_web_sign_name_group input"); assert.strictEqual(target.querySelector(".o_web_sign_name_group input").value, "plop"); @@ -106,12 +100,8 @@ QUnit.module("Components", ({ beforeEach }) => { }; props.signature.name = defaultName; await mount(NameAndSignature, target, { env, props }); - assert.deepEqual( - [...target.querySelectorAll(".card-header .col-auto")].map((el) => - el.textContent.trim() - ), - ["Auto", "Draw", "Load", "Style"] - ); + assert.deepEqual(getNameAndSignatureButtonNames(target), ["Auto", "Draw", "Load"]); + assert.containsOnce(target, ".o_web_sign_auto_select_style"); assert.containsOnce(target, ".card-header .active"); assert.strictEqual( target.querySelector(".card-header .active").textContent.trim(), @@ -128,12 +118,8 @@ QUnit.module("Components", ({ beforeEach }) => { noInputName: true, }; await mount(NameAndSignature, target, { env, props }); - assert.deepEqual( - [...target.querySelectorAll(".card-header .col-auto")].map((el) => - el.textContent.trim() - ), - ["Draw", "Load", "Clear"] - ); + assert.deepEqual(getNameAndSignatureButtonNames(target), ["Draw", "Load"]); + assert.containsOnce(target, ".o_web_sign_draw_clear"); assert.containsOnce(target, ".card-header .active"); assert.strictEqual( target.querySelector(".card-header .active").textContent.trim(),