[IMP] website_form, *: add field type to form

*= website_hr_recruitment, website_sale, website_crm

Adding 2 new types of fields: tel, url
email, url and tel type can now be applied on existing char fields.

task-2213083

closes odoo/odoo#50891

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

addons/website_crm/static/src/js/website_crm_editor.js

@@ -13,7 +13,7 @@ FormEditorRegistry.add('create_lead', {
         name: 'contact_name',
         string: 'Your Name',
     }, {
-        type: 'char',
+        type: 'tel',
         name: 'phone',
         string: 'Phone Number',
     }, {

addons/website_crm/views/website_crm_templates.xml

@@ -34,7 +34,7 @@
                                                 <span class="s_website_form_label_content">Phone Number</span>
                                             </label>
                                             <div class="col-sm">
-                                                <input id="opportunity2" type="text" class="form-control s_website_form_input" name="phone" />
+                                                <input id="opportunity2" type="tel" class="form-control s_website_form_input" name="phone" />
                                             </div>
                                         </div>
                                     </div>

addons/website_form/static/src/js/website_form_editor_registry.js

@@ -22,7 +22,7 @@ FormEditorRegistry.add('send_mail', {
         required: true,
         name: 'Your Name',
     }, {
-        type: 'char',
+        type: 'tel',
         custom: true,
         name: 'Phone Number',
     }, {

addons/website_form/static/src/snippets/s_website_form/000.js

@@ -82,7 +82,7 @@ odoo.define('website_form.s_website_form', function (require) {
             this.$target.find('button').off('click');
 
             // Empty imputs
-            this.$target.find('input[type="text"], input[type="email"], input[type="number"], textarea').val('');
+            this.$target.find('input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], textarea').val('');
 
             // Remove saving of the error colors
             this.$target.find('.o_has_error').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');

addons/website_form/static/src/snippets/s_website_form/options.js

@@ -242,7 +242,7 @@ const FieldEditor = FormEditor.extend({
      * @returns {HTMLElement}
      */
     _getPlaceholderInput: function () {
-        return this.$target[0].querySelector('input[type="text"], input[type="email"], input[type="number"] , textarea');
+        return this.$target[0].querySelector('input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], textarea');
     },
     /**
      * Returns true if the field is a custom field, false if it is an existing field
@@ -860,6 +860,11 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
         await this._replaceField(field);
         this.rerender = true;
     },
+    selectType: async function (previewMode, value, params) {
+        const field = this._getActiveField();
+        field.type = value;
+        await this._replaceField(field);
+    },
     /**
      * Select the display of the multicheckbox field (vertical & horizontal)
      */
@@ -906,6 +911,8 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
                 return this._getPlaceholder();
             case 'selectLabelPosition':
                 return this._getLabelPosition();
+            case 'selectType':
+                return this._getFieldType();
             case 'multiCheckboxDisplay': {
                 const target = this._getMultipleInputs();
                 return target ? target.dataset.display : '';
@@ -920,6 +927,8 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
      */
     _computeWidgetVisibility: function (widgetName, params) {
         switch (widgetName) {
+            case 'char_input_type_opt':
+                return !this.$target[0].classList.contains('s_website_form_custom') && ['char', 'email', 'tel', 'url'].includes(this.$target[0].dataset.type);
             case 'multi_check_display_opt':
                 return !!this._getMultipleInputs();
             case 'placeholder_opt':

addons/website_form/static/src/xml/website_form_editor.xml

@@ -86,7 +86,7 @@
     <t t-name="website_form.field_char">
         <t t-call="website_form.field">
             <input
-                type="text"
+                t-att-type="field.inputType || 'text'"
                 class="form-control s_website_form_input"
                 t-att-name="field.name"
                 t-att-required="field.required || field.modelRequired || None"
@@ -97,6 +97,24 @@
         </t>
     </t>
 
+    <!-- Email Field -->
+    <t t-name="website_form.field_email">
+        <t t-set="field.inputType" t-value="'email'"/>
+        <t t-call="website_form.field_char"/>
+    </t>
+
+    <!-- Telephone Field -->
+    <t t-name="website_form.field_tel">
+        <t t-set="field.inputType" t-value="'tel'"/>
+        <t t-call="website_form.field_char"/>
+    </t>
+
+    <!-- Url Field -->
+    <t t-name="website_form.field_url">
+        <t t-set="field.inputType" t-value="'url'"/>
+        <t t-call="website_form.field_char"/>
+    </t>
+
     <!-- Text Field -->
     <t t-name="website_form.field_text">
         <t t-call="website_form.field">
@@ -111,20 +129,6 @@
         </t>
     </t>
 
-    <!-- Email Field -->
-    <t t-name="website_form.field_email">
-        <t t-call="website_form.field">
-            <input
-                type="email"
-                class="form-control s_website_form_input"
-                t-att-name="field.name"
-                t-att-required="field.required || field.modelRequired || None"
-                t-att-placeholder="field.placeholder"
-                t-att-id="field.id"
-            />
-        </t>
-    </t>
-
     <!-- HTML Field -->
     <t t-name="website_form.field_html">
         <!--

addons/website_form/views/snippets/s_website_form.xml

@@ -67,6 +67,8 @@
                 <we-button data-custom-field="char">Text</we-button>
                 <we-button data-custom-field="text">Long Text</we-button>
                 <we-button data-custom-field="email">Email</we-button>
+                <we-button data-custom-field="tel">Telephone</we-button>
+                <we-button data-custom-field="url">Url</we-button>
                 <we-button data-custom-field="integer">Number</we-button>
                 <we-button data-custom-field="float">Decimal Number</we-button>
                 <we-button data-custom-field="boolean">Checkbox</we-button>
@@ -77,6 +79,12 @@
                 <we-button data-custom-field="datetime">Date &amp; Time</we-button>
                 <we-button data-custom-field="binary">File Upload</we-button>
             </we-select>
+            <we-select data-name="char_input_type_opt" string="Input Type" data-no-preview="true">
+                <we-button data-select-type="char">Text</we-button>
+                <we-button data-select-type="email">Email</we-button>
+                <we-button data-select-type="tel">Telephone</we-button>
+                <we-button data-select-type="url">Url</we-button>
+            </we-select>
             <t t-set="unit_textarea_height">rows</t>
             <we-input string="Height" data-step="1" t-attf-data-select-attribute="3#{unit_textarea_height}" t-att-data-unit="unit_textarea_height"
                 data-attribute-name="rows" data-apply-to="textarea"/>

addons/website_form/views/website_form_templates.xml

@@ -26,7 +26,7 @@
                                             <span class="s_website_form_label_content">Phone Number</span>
                                         </label>
                                         <div class="col-sm">
-                                            <input id="contact2" type="text" class="form-control s_website_form_input" name="Phone"/>
+                                            <input id="contact2" type="tel" class="form-control s_website_form_input" name="Phone"/>
                                         </div>
                                     </div>
                                 </div>

addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml

@@ -169,7 +169,7 @@
                                             <span class="s_website_form_mark"> *</span>
                                         </label>
                                         <div class="col-sm">
-                                            <input id="recruitment3" type="text" class="form-control s_website_form_input" name="partner_phone" required=""/>
+                                            <input id="recruitment3" type="tel" class="form-control s_website_form_input" name="partner_phone" required=""/>
                                         </div>
                                     </div>
                                 </div>

addons/website_sale/static/src/js/website_sale_form_editor.js

@@ -15,7 +15,7 @@ FormEditorRegistry.add('create_customer', {
         name: 'email',
         string: 'Your Email',
     }, {
-        type: 'char',
+        type: 'tel',
         name: 'phone',
         string: 'Phone Number',
     }, {