[IMP] website_form, *: entirely review s_website_form snippet

*: web_editor, website_crm, website_form_project,
website_hr_recruitment, website_sale

The form builder is now using the left panel option system. Many new
options are introduced to build better forms more quickly.

The tests are now running with the new website_form implementation.

Part of: https://github.com/odoo/odoo/pull/42189
task-2092425

closes odoo/odoo#42189

Related: odoo/enterprise#7365
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 156 insertions, 118 deletions

diff --git a/addons/website_form/static/src/xml/website_form.xml b/addons/website_form/static/src/xml/website_form.xml
index c3779f9bc01..5403f763e24 100644
--- a/addons/website_form/static/src/xml/website_form.xml
+++ b/addons/website_form/static/src/xml/website_form.xml
@@ -3,74 +3,22 @@
 
     <!-- Success status -->
     <t t-name="website_form.status_success">
-        <span id="o_website_form_result" class="text-success ml8">
+        <span id="s_website_form_result" class="text-success ml8">
             <i class="fa fa-check mr4" role="img" aria-label="Success" title="Success"/>The form has been sent successfully.
         </span>
     </t>
 
     <!-- Missing field status -->
     <t t-name="website_form.status_invalid">
-        <span id="o_website_form_result" class="text-danger ml8">
+        <span id="s_website_form_result" class="text-danger ml8">
             <i class="fa fa-close mr4" role="img" aria-label="Error" title="Error"/>Please fill in the form correctly.
         </span>
     </t>
 
     <!-- Error status -->
     <t t-name="website_form.status_error">
-        <span id="o_website_form_result" class="text-danger ml8">
+        <span id="s_website_form_result" class="text-danger ml8">
             <i class="fa fa-close mr4" role="img" aria-label="Error" title="Error"/>An error has occured, the form has not been sent.
         </span>
     </t>
-
-    <t t-name="website_form.default_contactus_form">
-        <div class="form-group row form-field o_website_form_custom o_website_form_required_custom">
-            <div class="col-lg-3 col-md-4">
-                <label class="col-form-label" for="Name">Your Name</label>
-            </div>
-            <div class="col-lg-7 col-md-8">
-                <input type="text" class="form-control o_website_form_input" name="Name" required=""/>
-            </div>
-        </div>
-        <div class="form-group row form-field o_website_form_custom">
-            <div class="col-lg-3 col-md-4">
-                <label class="col-form-label" for="Phone">Phone Number</label>
-            </div>
-            <div class="col-lg-7 col-md-8">
-                <input type="text" class="form-control o_website_form_input" name="Phone"/>
-            </div>
-        </div>
-        <div class="form-group row form-field o_website_form_required_custom">
-            <div class="col-lg-3 col-md-4">
-                <label class="col-form-label" for="email_from">Email</label>
-            </div>
-            <div class="col-lg-7 col-md-8">
-                <input type="email" class="form-control o_website_form_input" name="email_from" required=""/>
-            </div>
-        </div>
-        <div class="form-group row form-field o_website_form_custom">
-            <div class="col-lg-3 col-md-4">
-                <label class="col-form-label" for="Partner Name">Your Company</label>
-            </div>
-            <div class="col-lg-7 col-md-8">
-                <input type="text" class="form-control o_website_form_input" name="Partner Name"/>
-            </div>
-        </div>
-        <div class="form-group row form-field o_website_form_required_custom">
-            <div class="col-lg-3 col-md-4">
-                <label class="col-form-label" for="subject">Subject</label>
-            </div>
-            <div class="col-lg-7 col-md-8">
-                <input type="text" class="form-control o_website_form_input" name="subject" required=""/>
-            </div>
-        </div>
-        <div class="form-group row form-field o_website_form_custom o_website_form_required_custom">
-            <div class="col-lg-3 col-md-4">
-                <label class="col-form-label" for="Description">Your Question</label>
-            </div>
-            <div class="col-lg-7 col-md-8">
-                <textarea class="form-control o_website_form_input" name="Description" required=""></textarea>
-            </div>
-        </div>
-    </t>
-
 </templates>
diff --git a/addons/website_form/static/src/xml/website_form_editor.xml b/addons/website_form/static/src/xml/website_form_editor.xml
index 3fb85a7dded..70c90f55593 100644
--- a/addons/website_form/static/src/xml/website_form_editor.xml
+++ b/addons/website_form/static/src/xml/website_form_editor.xml
@@ -1,32 +1,89 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
+    <!-- End Message -->
+    <t t-name="website_form.s_website_form_end_message">
+        <div class="s_website_form_end_message d-none">
+            <div class="text-center alert alert-info css_non_editable_mode_hidden o_not_editable" t-ignore="True" role="status">
+                The following message will become visible <strong>only</strong> once the form is sent.
+            </div>
+            <div class="oe_structure">
+                <section class="s_text_block pt64 pb64">
+                    <div class="container">
+                        <h2 class="text-center">Thank You For Your Feedback</h2>
+                        <p class="text-center">
+                            Our team will message you back as soon as possible.<br/>
+                            In the meantime we invite you to try our awesome <a href="/">website</a>.<br/>
+                        </p>
+                    </div>
+                </section>
+            </div>
+        </div>
+    </t>
+
     <!-- Generic Field Layout -->
+    <!-- Changes made here needs to be reflected in the different Form view (Contact Us, Jobs, ...) -->
     <t t-name="website_form.field">
-        <div t-att-class="'row form-group form-field' + (field.custom ? ' o_website_form_custom' : '') + (field.required ? ' o_website_form_required' : '')">
-            <div t-att-class="field.formatInfo and field.formatInfo.labelClass || 'col-lg-3 col-md-4'">
-                <label class="col-form-label" t-att-for="field.name">
-                    <t t-esc="field.string"/>
+        <div t-attf-class="form-group s_website_form_field #{field.formatInfo.col or 'col-12'} #{field.custom and 's_website_form_custom' or ''} #{(field.required and 's_website_form_required' or '') or (field.modelRequired and 's_website_form_model_required' or '')} #{field.hidden and 's_website_form_field_hidden' or ''} #{field.dnone and 'd-none' or ''}"
+            t-att-data-type="field.type"
+            t-att-data-name="Field">
+            <div t-if="field.formatInfo.labelPosition != 'none' and field.formatInfo.labelPosition != 'top'" class="row s_col_no_resize s_col_no_bgcolor">
+                <label t-attf-class="col-form-label col-sm-auto s_website_form_label #{field.formatInfo.labelPosition == 'right' and 'text-right' or ''}" t-attf-style="width: #{field.formatInfo.labelWidth or '200px'}" t-att-for="field.id">
+                     <t t-call="website_form.label_content"/>
                 </label>
-                <span t-if="field.name == 'email_cc'" title="Separate email addresses with a comma.">
-                    <i class="fa fa-info-circle"/>
-                </span>
+                <div class="col-sm">
+                    <t t-raw="0"/>
+                </div>
             </div>
-            <div t-att-class="field.formatInfo and field.formatInfo.contentClass || 'col-lg-7 col-md-8'">
+            <t t-else="">
+                <label t-attf-class="s_website_form_label #{field.formatInfo.labelPosition == 'none' and 'd-none' or ''}" t-attf-style="width: #{field.formatInfo.labelWidth or '200px'}" t-att-for="field.id">
+                     <t t-call="website_form.label_content"/>
+                </label>
                 <t t-raw="0"/>
-            </div>
+            </t>
         </div>
     </t>
 
+    <t t-name="website_form.label_content">
+        <t t-if="field.custom" t-set="field.string" t-value="field.name"/>
+        <t t-esc="field.string"/>
+        <t t-if="field.required or field.modelRequired">
+            <span class="s_website_form_mark" t-if="field.formatInfo.requiredMark" t-esc="' ' + field.formatInfo.mark"/>
+        </t>
+        <t t-else="">
+            <span class="s_website_form_mark" t-if="field.formatInfo.optionalMark" t-esc="' ' + field.formatInfo.mark"/>
+        </t>
+        <span t-if="['email_cc', 'email_to'].includes(field.name)" title="Separate email addresses with a comma.">
+            <i class="fa fa-info-circle"/>
+        </span>
+    </t>
+
+    <!-- Hidden Field -->
+    <t t-name="website_form.field_hidden">
+        <t t-set="field.dnone" t-value="true"/>
+        <t t-set="field.formatInfo" t-value="{}"/>
+        <t t-call="website_form.field">
+            <input
+                type="hidden"
+                class="form-control s_website_form_input"
+                t-att-name="field.name"
+                t-att-value="field.value"
+                t-att-id="field.id"
+            />
+        </t>
+    </t>
+
     <!-- Char Field -->
     <t t-name="website_form.field_char">
         <t t-call="website_form.field">
             <input
                 type="text"
-                class="form-control o_website_form_input"
+                class="form-control s_website_form_input"
                 t-att-name="field.name"
-                t-att-required="field.required"
+                t-att-required="field.required || field.modelRequired || None"
                 t-att-value="field.value"
+                t-att-placeholder="field.placeholder"
+                t-att-id="field.id"
             />
         </t>
     </t>
@@ -35,9 +92,11 @@
     <t t-name="website_form.field_text">
         <t t-call="website_form.field">
             <textarea
-                class="form-control o_website_form_input"
+                class="form-control s_website_form_input"
                 t-att-name="field.name"
-                t-att-required="field.required"
+                t-att-required="field.required || field.modelRequired || None"
+                t-att-placeholder="field.placeholder"
+                t-att-id="field.id"
             />
         </t>
     </t>
@@ -47,9 +106,11 @@
         <t t-call="website_form.field">
             <input
                 type="email"
-                class="form-control o_website_form_input"
+                class="form-control s_website_form_input"
                 t-att-name="field.name"
-                t-att-required="field.required"
+                t-att-required="field.required || field.modelRequired || None"
+                t-att-placeholder="field.placeholder"
+                t-att-id="field.id"
             />
         </t>
     </t>
@@ -68,10 +129,12 @@
         <t t-call="website_form.field">
             <input
                 type="number"
-                class="form-control o_website_form_input"
+                class="form-control s_website_form_input"
                 t-att-name="field.name"
                 step="1"
-                t-att-required="field.required"
+                t-att-required="field.required || field.modelRequired || None"
+                t-att-placeholder="field.placeholder"
+                t-att-id="field.id"
             />
         </t>
     </t>
@@ -81,10 +144,12 @@
         <t t-call="website_form.field">
             <input
                 type="number"
-                class="form-control o_website_form_input"
+                class="form-control s_website_form_input"
                 t-att-name="field.name"
                 step="any"
-                t-att-required="field.required"
+                t-att-required="field.required || field.modelRequired || None"
+                t-att-placeholder="field.placeholder"
+                t-att-id="field.id"
             />
         </t>
     </t>
@@ -93,13 +158,15 @@
     <t t-name="website_form.field_date">
         <t t-call="website_form.field">
             <t t-set="datepickerID" t-value="_.uniqueId('datepicker')"/>
-            <div class="o_website_form_date input-group date" t-att-id="datepickerID" data-target-input="nearest">
+            <div class="s_website_form_date input-group date" t-att-id="datepickerID" data-target-input="nearest">
                 <input
                         type="text"
-                        class="form-control datetimepicker-input o_website_form_input"
+                        class="form-control datetimepicker-input s_website_form_input"
                         t-attf-data-target="##{datepickerID}"
                         t-att-name="field.name"
-                        t-att-required="field.required"
+                        t-att-required="field.required || field.modelRequired || None"
+                        t-att-placeholder="field.placeholder"
+                        t-att-id="field.id"
                 />
                 <div class="input-group-append" t-attf-data-target="##{datepickerID}" data-toggle="datetimepicker">
                     <div class="input-group-text"><i class="fa fa-calendar"></i></div>
@@ -112,13 +179,15 @@
     <t t-name="website_form.field_datetime">
         <t t-call="website_form.field">
             <t t-set="datetimepickerID" t-value="_.uniqueId('datetimepicker')"/>
-            <div class="o_website_form_datetime input-group date" t-att-id="datetimepickerID" data-target-input="nearest">
+            <div class="s_website_form_datetime input-group date" t-att-id="datetimepickerID" data-target-input="nearest">
                 <input
                         type="text"
-                        class="form-control datetimepicker-input o_website_form_input"
+                        class="form-control datetimepicker-input s_website_form_input"
                         t-attf-data-target="##{datetimepickerID}"
                         t-att-name="field.name"
-                        t-att-required="field.required"
+                        t-att-required="field.required || field.modelRequired || None"
+                        t-att-placeholder="field.placeholder"
+                        t-att-id="field.id"
                 />
                 <div class="input-group-append" t-attf-data-target="##{datetimepickerID}" data-toggle="datetimepicker">
                     <div class="input-group-text"><i class="fa fa-calendar"></i></div>
@@ -134,9 +203,10 @@
                 <input
                     type="checkbox"
                     value="Yes"
-                    class="o_website_form_input"
+                    class="s_website_form_input"
                     t-att-name="field.name"
-                    t-att-required="field.required"
+                    t-att-required="field.required || field.modelRequired || None"
+                    t-att-id="field.id"
                 />
             </div>
         </t>
@@ -145,27 +215,41 @@
     <!-- Selection Field -->
     <t t-name="website_form.field_selection">
         <t t-call="website_form.field">
-            <div class="o_website_form_flex" data-display="horizontal">
-                <t t-foreach="field.selection" t-as="option">
-                    <div class="radio o_website_form_flex_item">
-                        <label class="col-form-label">
-                            <input
-                                type="radio"
-                                class="o_website_form_input"
-                                t-att-name="field.name"
-                                t-att-value="option[0]"
-                                t-att-required="field.required"
-                            />
-                            <span>
-                                <t t-esc="option[1]"/>
-                            </span>
-                        </label>
-                    </div>
+            <div class="row s_col_no_resize s_col_no_bgcolor s_website_form_multiple" t-att-data-name="field.name" t-att-data-display="field.formatInfo.multiPosition">
+                <t t-if="!field.selection">
+                    <input
+                        class="s_website_form_input"
+                        t-att-name="field.name"
+                        t-att-value="record.id"
+                        t-att-required="field.required || field.modelRequired || None"
+                        placeholder="No matching record !"
+                    />
+                </t>
+                <t t-foreach="field.selection" t-as="record">
+                    <t t-call="website_form.radio"/>
                 </t>
             </div>
         </t>
     </t>
 
+    <!-- Radio -->
+    <t t-name="website_form.radio">
+        <div t-attf-class="radio col-12 #{field.formatInfo.multiPosition === 'horizontal' and 'col-lg-4 col-md-6' or ''}">
+            <label class="col-form-label">
+                <input
+                    type="radio"
+                    class="s_website_form_input"
+                    t-att-name="field.name"
+                    t-att-value="record[0]"
+                    t-att-required="field.required || field.modelRequired || None"
+                />
+                <span>
+                    <t t-esc="record[1]"/>
+                </span>
+            </label>
+        </div>
+    </t>
+
     <!-- Many2One Field -->
     <t t-name="website_form.field_many2one">
         <!-- Binary one2many -->
@@ -175,7 +259,7 @@
         <!-- Generic one2many -->
         <t t-if="field.relation != 'ir.attachment'">
             <t t-call="website_form.field">
-                <select class="form-control o_website_form_input" t-att-name="field.name" t-att-required="field.required">
+                <select class="form-control s_website_form_input" t-att-name="field.name" t-att-required="field.required || field.modelRequired || None" t-att-id="field.id">
                     <t t-foreach="field.records" t-as="record">
                         <option t-att-value="record.id" t-att-selected="record.selected">
                             <t t-esc="record.display_name"/>
@@ -197,37 +281,42 @@
         <!-- Generic one2many -->
         <t t-if="field.relation != 'ir.attachment'">
             <t t-call="website_form.field">
-                <div class="o_website_form_flex" data-display="horizontal">
+                <div class="row s_col_no_resize s_col_no_bgcolor s_website_form_multiple" t-att-data-name="field.name" t-att-data-display="field.formatInfo.multiPosition">
                     <t t-if="!field.records">
                         <input
-                            class="o_website_form_input"
+                            class="s_website_form_input"
                             t-att-name="field.name"
                             t-att-value="record.id"
-                            t-att-required="field.required"
+                            t-att-required="field.required || field.modelRequired || None"
                             placeholder="No matching record !"
                         />
                     </t>
                     <t t-foreach="field.records" t-as="record">
-                        <div class="checkbox o_website_form_flex_item">
-                            <label class="col-form-label">
-                                <input
-                                    type="checkbox"
-                                    class="o_website_form_input"
-                                    t-att-name="field.name"
-                                    t-att-value="record.id"
-                                    t-att-required="field.required"
-                                />
-                                <span>
-                                    <t t-esc="record.display_name"/>
-                                </span>
-                            </label>
-                        </div>
+                        <t t-call="website_form.checkbox"/>
                     </t>
                 </div>
             </t>
         </t>
     </t>
 
+    <!-- Checkbox -->
+    <t t-name="website_form.checkbox">
+        <div t-attf-class="checkbox col-12 #{field.formatInfo.multiPosition === 'horizontal' and 'col-lg-4 col-md-6' or ''}">
+            <label class="col-form-label">
+                <input
+                    type="checkbox"
+                    class="s_website_form_input"
+                    t-att-name="field.name"
+                    t-att-value="record.id"
+                    t-att-required="field.required || field.modelRequired || None"
+                />
+                <span>
+                    <t t-esc="record.display_name"/>
+                </span>
+            </label>
+        </div>
+    </t>
+
     <!-- Many2Many Field -->
     <t t-name="website_form.field_many2many">
         <t t-call="website_form.field_one2many"/>
@@ -238,10 +327,11 @@
         <t t-call="website_form.field">
             <input
                 type="file"
-                class="form-control o_website_form_input"
+                class="form-control-file s_website_form_input"
                 t-att-name="field.name"
-                t-att-required="field.required"
+                t-att-required="field.required || field.modelRequired || None"
                 t-att-multiple="multiple"
+                t-att-id="field.id"
             />
         </t>
     </t>