[FIX] web: adapt Call button for PhoneField

Since form views are always visible in edition mode, it was no longer
possible to click on the phone number to start a call. Now, a button
is displayed next to the input, allowing the call to start despite
the state of the view.

Tests have been adapted to assert the presence of the button.

Enterprise PR: https://github.com/odoo/enterprise/pull/31954

X-original-commit: 4ac2f17ce6279aa745b1a930f52b86635a04753c
Part-of: odoo/odoo#101786

addons/web/static/src/views/fields/phone/phone_field.js

@@ -28,4 +28,8 @@ PhoneField.extractProps = ({ attrs }) => {
     };
 };
 
+class FormPhoneField extends PhoneField {}
+FormPhoneField.template = "web.FormPhoneField";
+
 registry.category("fields").add("phone", PhoneField);
+registry.category("fields").add("form.phone", FormPhoneField);

addons/web/static/src/views/fields/phone/phone_field.xml

@@ -2,18 +2,32 @@
 <templates xml:space="preserve">
 
     <t t-name="web.PhoneField" owl="1">
-        <t t-if="props.readonly">
-            <a t-if="props.value" class="o_form_uri o_phone_link" t-att-href="'tel:'+props.value" t-esc="props.value"/>
-        </t>
-        <t t-else="">
-            <input
-                class="o_input"
-                t-att-id="props.id"
-                type="tel"
-                t-att-placeholder="props.placeholder"
-                t-ref="input"
-            />
-        </t>
+        <div class="o_phone_content d-inline-flex w-100">
+            <t t-if="props.readonly">
+                <a t-if="props.value" class="o_form_uri" t-att-href="'tel:'+props.value" t-esc="props.value"/>
+            </t>
+            <t t-else="">
+                <input
+                    class="o_input"
+                    t-att-id="props.id"
+                    type="tel"
+                    t-att-placeholder="props.placeholder"
+                    t-ref="input"
+                />
+            </t>
+        </div>
+    </t>
+
+    <t t-name="web.FormPhoneField" t-inherit="web.PhoneField" t-inherit-mode="primary">
+        <xpath expr="//div[hasclass('o_phone_content')]//input" position="after">
+            <a
+                t-if="props.value"
+                t-att-href="'tel:'+props.value"
+                class="ms-3 d-inline-flex align-items-center"
+            >
+                <i class="fa fa-phone"></i><small class="fw-bold ms-1">Call</small>
+            </a>
+        </xpath>
     </t>
 
 </templates>

addons/web/static/tests/views/fields/phone_field_tests.js

@@ -85,6 +85,15 @@ QUnit.module("Fields", (hooks) => {
             "input should contain field value in edit mode"
         );
 
+        const phoneLink = target.querySelector(".o_field_phone a");
+        assert.containsOnce(
+            target,
+            phoneLink,
+            "should have rendered the phone number as a link with correct classes"
+        );
+        assert.strictEqual(phoneLink.textContent, "Call", "link is shown with the right text");
+        assert.hasAttrValue(phoneLink, "href", "tel:yop", "should have proper tel prefix");
+
         // change value in edit mode
         await editInput(target, "input[type='tel']", "new");
 
@@ -114,7 +123,7 @@ QUnit.module("Fields", (hooks) => {
 
         assert.containsN(
             target,
-            ".o_field_widget a.o_form_uri.o_phone_link",
+            ".o_field_widget a.o_form_uri",
             2,
             "should have the correct classnames"
         );
@@ -145,7 +154,7 @@ QUnit.module("Fields", (hooks) => {
         );
         assert.containsN(
             target,
-            ".o_field_widget a.o_form_uri.o_phone_link",
+            ".o_field_widget a.o_form_uri",
             2,
             "should still have links with correct classes"
         );