[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>

3 files changed, 166 insertions, 126 deletions

diff --git a/addons/website_form/views/assets.xml b/addons/website_form/views/assets.xml
index 11445b89b63..b5433e0da00 100644
--- a/addons/website_form/views/assets.xml
+++ b/addons/website_form/views/assets.xml
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
     <data>
-
         <template id="assets_editor" name="Website Form Editor Assets Editor" inherit_id="website.assets_editor">
             <xpath expr="." position="inside">
+                <link rel="stylesheet" type="text/scss" href="/website_form/static/src/scss/wysiwyg_snippets.scss"/>
                 <script type="text/javascript" src="/website_form/static/src/snippets/s_website_form/options.js"/>
                 <script type="text/javascript" src="/website_form/static/src/js/website_form_editor_registry.js"/>
             </xpath>
diff --git a/addons/website_form/views/snippets/s_website_form.xml b/addons/website_form/views/snippets/s_website_form.xml
index 2c49bfccd62..9a4a28fe6db 100644
--- a/addons/website_form/views/snippets/s_website_form.xml
+++ b/addons/website_form/views/snippets/s_website_form.xml
@@ -1,86 +1,109 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="s_website_form" name="Form Builder">
-    <form action="/website_form/" method="post" class="s_website_form container-fluid mt32" enctype="multipart/form-data">
+<template id="s_website_form" name="Form">
+    <section class="s_website_form" data-vcss="001">
         <div class="container">
-            <div class="form-group row">
-                <div class="offset-lg-3 offset-md-4 col-md-8 col-lg-7">
-                    <button class="btn btn-primary btn-lg o_website_form_send">Send</button>
-                    <span id="o_website_form_result"></span>
+            <form action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*">
+                <div class="s_website_form_rows row s_col_no_bgcolor">
+                    <div class="form-group col-12 s_website_form_submit">
+                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                            <div style="width: 200px" class="col-sm-auto s_website_form_label"/>
+                            <div class="col-sm">
+                                <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
+                                <span id="s_website_form_result"></span>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-            </div>
+            </form>
         </div>
-    </form>
+    </section>
 </template>
 
-<template id="snippet_options" inherit_id="website.snippet_options">
-    <xpath expr="//*[@t-set='so_snippet_addition_selector']" position="inside">, .s_website_form</xpath>
+<template id="s_website_form_options" inherit_id="website.snippet_options">
     <xpath expr="//div" position="after">
         <!-- Form -->
-        <div data-js="website_form_editor" data-selector=".s_website_form">
-            <we-button data-website_form_model_modal="" data-no-preview="true">Change Form Parameters</we-button>
-            <we-button data-website_form_field_modal="" data-no-preview="true">Add an existing field</we-button>
-            <we-select string="Add a custom field" data-no-preview="true">
-                <we-button data-website_form_custom_field="char">Text</we-button>
-                <we-button data-website_form_custom_field="text">Long Text</we-button>
-                <we-button data-website_form_custom_field="email">Email</we-button>
-                <we-button data-website_form_custom_field="integer">Number</we-button>
-                <we-button data-website_form_custom_field="float">Decimal Number</we-button>
-                <we-button data-website_form_custom_field="boolean">Checkbox</we-button>
-                <we-button data-website_form_custom_field="selection">Radio Buttons</we-button>
-                <we-button data-website_form_custom_field="many2one">Selection</we-button>
-                <we-button data-website_form_custom_field="one2many">Multiple Checkboxes</we-button>
-                <we-button data-website_form_custom_field="date">Date</we-button>
-                <we-button data-website_form_custom_field="datetime">Date &amp; Time</we-button>
-                <we-button data-website_form_custom_field="binary">File Upload</we-button>
+        <div data-js="WebsiteFormEditor" data-selector=".s_website_form" data-target="form">
+            <we-select string="Display Fields Mark" data-name="field_mark_select" data-no-preview="true">
+                <we-button data-select-class="">None</we-button>
+                <we-button data-select-class="o_mark_required" data-name="form_required_opt">Required</we-button>
+                <we-button data-select-class="o_mark_optional" data-name="form_optional_opt">Optional</we-button>
             </we-select>
+            <we-input data-set-mark="" data-dependencies="form_required_opt, form_optional_opt"/>
+            <we-input string="Labels Width"
+                data-select-style="" data-css-property="width"
+                data-unit="px" data-apply-to=".s_website_form_label"/>
+            <we-row>
+                <we-select string="On Success" data-no-preview="true">
+                    <we-button data-on-success="nothing">Nothing</we-button>
+                    <we-button data-on-success="redirect" data-name="show_redirect_opt">Redirect</we-button>
+                    <we-button data-on-success="message" data-name="show_message_opt">Show Message</we-button>
+                </we-select>
+                <we-button class="fa fa-fw fa-edit align-self-end toggle-edit-message" title="Edit Message" data-name="message_opt" data-dependencies="show_message_opt"/>
+            </we-row>
+            <we-urlpicker string="URL" data-select-data-attribute="/contactus-thank-you" data-attribute-name="successPage" data-name="url_opt" data-dependencies="show_redirect_opt"/>
         </div>
 
-        <!-- Field -->
-        <div data-js='website_form_editor' data-selector=".form-field" data-drop-near=".form-field">
-            <we-checkbox string="Hidden" data-no-preview="true"
-                            data-select-class="o_website_form_field_hidden"/>
+        <!-- Add Field Form -->
+        <div data-js="AddFieldForm" data-selector=".s_website_form" data-target="form">
+            <we-button class="fa fa-fw fa-plus"
+                title="Add a new field at the end"
+                data-add-field=""
+                data-no-preview="true"/>
         </div>
 
-        <!-- Add an option to display radio buttons / checkboxes horizontally or vertically -->
-        <div data-js='website_form_editor_choice_field_display' data-selector=".o_website_form_flex">
-            <we-select string="Display" data-no-preview="true">
-                <we-button data-website_form_choice_field_display="horizontal">Horizontal</we-button>
-                <we-button data-website_form_choice_field_display="vertical">Vertical</we-button>
-            </we-select>
+        <!-- Add Field -->
+        <div data-js="AddField" data-selector=".s_website_form_field">
+            <we-button class="fa fa-fw fa-plus"
+                title="Add a new field after this one"
+                data-add-field=""
+                data-no-preview="true"/>
         </div>
 
-        <!-- Add move, duplicate and remove controllers to checkboxes and radio buttons -->
-        <div data-selector=".o_website_form_flex_item" data-drop-near=".o_website_form_flex_item"/>
-
-        <!-- Add move and remove controllers to select items -->
-        <div data-selector=".s_website_form .form-field.o_website_form_custom .o_website_form_select_item" data-drop-near=".o_website_form_select_item"/>
-
-        <!-- Required option for fields that are not required fields of the model -->
-        <div data-js='website_form_editor_field' data-selector=".form-field:not(.o_website_form_required)">
-            <we-checkbox string="Required" data-no-preview="true"
-                        data-website_form_field_require=""
-                        data-select-class="o_website_form_required_custom"/>
+        <!-- Field -->
+        <div data-js='WebsiteFieldEditor' data-selector=".s_website_form_field" data-drop-near=".s_website_form_field">
+            <we-select data-name="type_opt" string="Type" data-no-preview="true">
+                <we-title>Custom field</we-title>
+                <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="integer">Number</we-button>
+                <we-button data-custom-field="float">Decimal Number</we-button>
+                <we-button data-custom-field="boolean">Checkbox</we-button>
+                <we-button data-custom-field="one2many">Multiple Checkboxes</we-button>
+                <we-button data-custom-field="selection">Radio Buttons</we-button>
+                <we-button data-custom-field="many2one">Selection</we-button>
+                <we-button data-custom-field="date">Date</we-button>
+                <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 string="Display" data-name="multi_check_display_opt" data-no-preview="true">
+                <we-button data-multi-checkbox-display="horizontal">Horizontal</we-button>
+                <we-button data-multi-checkbox-display="vertical">Vertical</we-button>
+            </we-select>
+            <we-input string="Label Name" data-set-label-text=""/>
+            <we-select string="Label Position" data-no-preview="true">
+                <we-button data-select-label-position="none">None</we-button>
+                <we-button data-select-label-position="top">Top</we-button>
+                <we-button data-select-label-position="left">Left</we-button>
+                <we-button data-select-label-position="right">Right</we-button>
+            </we-select>
+            <we-input string="Input Placeholder" data-name="placeholder_opt" data-set-placeholder=""/>
+            <we-checkbox string="Required" data-name="required_opt" data-no-preview="true"
+                data-toggle-required="s_website_form_required"/>
+            <we-checkbox string="Hidden" data-name="hidden_opt" data-no-preview="true"
+                data-select-class="s_website_form_field_hidden"/>
         </div>
 
-        <!-- Remove the duplicate options of model fields -->
-        <div data-js="website_form_editor_field_model" data-selector=".s_website_form .form-field:not(.o_website_form_custom)"/>
-
-        <!-- Remove the delete options of model required fields -->
-        <div data-js="website_form_editor_field_required" data-selector=".s_website_form .o_website_form_required"/>
-
-        <!-- Remove the duplicate options of radio and checkboxes of model fields -->
-        <div data-js="website_form_editor_field_x2many" data-selector=".s_website_form .form-field:not(.o_website_form_custom) .o_website_form_flex_item"/>
-
-        <!-- Transform the select inputs into editable constructs -->
-        <div data-js="website_form_editor_field_select" data-selector=".s_website_form .form-field:has(select)"/>
+        <!-- Remove the duplicate option of model fields -->
+        <div data-js="WebsiteFormFieldModel" data-selector=".s_website_form .s_website_form_field:not(.s_website_form_custom)"/>
 
-        <!-- Remove the duplicate option of model select items -->
-        <div data-js="website_form_editor_field_x2many" data-selector=".s_website_form .form-field:not(.o_website_form_custom) .o_website_form_select_item" data-drop-near=".o_website_form_select_item"/>
+        <!-- Remove the delete option of model required fields -->
+        <div data-js="WebsiteFormFieldRequired" data-selector=".s_website_form .s_website_form_model_required"/>
 
-        <!-- Remove the delete options of the Submit button -->
-        <div data-js="website_form_editor_field_required" data-selector=".s_website_form .o_website_form_send"/>
+        <!-- Remove the delete and duplicate option of the submit button -->
+        <div data-js="WebsiteFormSubmitRequired" data-selector=".s_website_form .s_website_form_submit"/>
     </xpath>
 </template>
 
@@ -89,6 +112,11 @@
         <link rel="stylesheet" type="text/scss" href="/website_form/static/src/snippets/s_website_form/000.scss"/>
     </xpath>
 </template>
+<template id="assets_snippet_s_website_form_css_001" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website_form/static/src/snippets/s_website_form/001.scss"/>
+    </xpath>
+</template>
 
 <template id="assets_snippet_s_website_form_js_000" inherit_id="website.assets_frontend">
     <xpath expr="//script[last()]" position="after">
diff --git a/addons/website_form/views/website_form_templates.xml b/addons/website_form/views/website_form_templates.xml
index ea6e3a5a9aa..256a9ad81f7 100644
--- a/addons/website_form/views/website_form_templates.xml
+++ b/addons/website_form/views/website_form_templates.xml
@@ -3,70 +3,82 @@
 
     <template id="contactus_form" name="Contact Form" inherit_id="website.contactus" customize_show="True">
         <xpath expr="//div[@name='mail_button']" position="replace">
-            <form id="contactus_form" t-ignore="true" action="/website_form/" method="post" data-model_name="mail.mail" class="s_website_form container-fluid mt32" enctype="multipart/form-data" data-success_page="/contactus-thank-you">
-                <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>
-                <div class="form-group row form-field d-none">
-                    <div class="col-lg-3 col-md-4">
-                        <label class="col-form-label" for="email_to">Email To</label>
-                    </div>
-                    <div class="col-lg-7 col-md-8">
-                        <input type="hidden" class="form-control o_website_form_input" name="email_to" t-att-value="res_company.email"/>
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <div class="offset-lg-3 offset-md-4 col-md-8 col-lg-7">
-                        <a href="#" class="btn btn-primary btn-lg o_website_form_send">Send</a>
-                        <span id="o_website_form_result"></span>
+            <span class="hidden" data-for="contactus_form" t-att-data-values="{'email_to': res_company.email}" />
+            <div>
+                <section id="contactus_section" class="s_website_form" data-vcss="001">
+                    <div class="container">
+                        <form id="contactus_form" action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-model_name="mail.mail" data-success-mode="redirect" data-success-page="/contactus-thank-you">
+                            <div class="s_website_form_rows row s_col_no_bgcolor">
+                                <div class="form-group col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="char">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact1">Your Name<span class="s_website_form_mark"> *</span></label>
+                                        <div class="col-sm">
+                                            <input id="contact1" type="text" class="form-control s_website_form_input" name="Name" required=""/>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="char">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact2">Phone Number</label>
+                                        <div class="col-sm">
+                                            <input id="contact2" type="text" class="form-control s_website_form_input" name="Phone"/>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="email">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact3">Email<span class="s_website_form_mark"> *</span></label>
+                                        <div class="col-sm">
+                                            <input id="contact3" type="email" class="form-control s_website_form_input" name="email_from" required=""/>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="char">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact4">Your Company</label>
+                                        <div class="col-sm">
+                                            <input id="contact4" type="text" class="form-control s_website_form_input" name="Partner Name"/>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact5">Subject<span class="s_website_form_mark"> *</span></label>
+                                        <div class="col-sm">
+                                            <input id="contact5" type="text" class="form-control s_website_form_input" name="subject" required=""/>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="text">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact6">Your Question</label>
+                                        <div class="col-sm">
+                                            <textarea id="contact6" class="form-control s_website_form_input" name="Description" required=""></textarea>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group col-12 s_website_form_field d-none">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact7">Email To</label>
+                                        <div class="col-sm">
+                                            <input id="contact7" type="hidden" class="form-control s_website_form_input" name="email_to"/>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group col-12 s_website_form_submit">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <div style="width: 200px" class="col-sm-auto s_website_form_label"/>
+                                        <div class="col-sm">
+                                            <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
+                                            <span id="s_website_form_result"></span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </form>
                     </div>
-                </div>
-            </form>
+                </section>
+            </div>
         </xpath>
     </template>