qsm-odoo
b38253f400
Before this commit, the rendering of inner content of the left panel
options was handled through _buildXXXElement methods in the options
widgets. Now they are handled through sub-widgets which also handle
the user events.
Each sub-widget is notified with the string value it should hold
according to the snippet option target and methods. Each sub-widget
notifies a string value following user interactions, which snippet
options can use to adapt their target through their option methods.
The current sub-widgets introduced by this commit are (others will
follow):
1) we-button
2) we-checkbox
3) we-input
4) we-select (typically containing multiple we-button widgets)
5) we-multi (typically containing multiple we-input widget)
Following this commit only 3 standard option methods remain, which can
be used with any meaningful widget:
1) selectClass
-> Same as before + handle the old 'toggleClass' method when used with
a checkbox-like widget.
2) selectStyle
-> Same as old setStyle, introduced recently (simply renamed)
3) selectDataAttribute
-> Handle both old selectDataAttribute and setDataAttribute, introduced
recently
The parameters these methods received are now:
- previewMode: same as before
- widgetValue: the string value the widget currently holds
- params: additional parameters (mainly dataset of the related xml)
+ params.possibleValues (all the possible values for the method,
meaninful for a select or a checkbox)
+ params.defaultValue (the value that the widget would give if it
even holds no value)
When defining a method in XML, the given value is the default value.
e.g. data-select-style="34px" data-css-property="margin-top"
-> if set on any widget, allows to retrieve a value from the user to
customize the margin-top, the default value being 34px.
-> if used with a we-input, allow to retrieve any value and an empty
value will be equal to 34px
-> if used on a checkbox, allow to toggle between no value and 34px.
-> ...
Hopefully, detailed documentation about all of this will follow. Code
documentation should already be helpful.
Last note: the _updateUI method (replacing the old _setActive) is now
async (so does all the functions calling it). In particular, the _select
method is now async.
Part of https://github.com/odoo/odoo/pull/40282
In preparation of task-2122935 and other tasks
98 lines
6.2 KiB
XML
98 lines
6.2 KiB
XML
<?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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<template id="remove_external_snippets" inherit_id="website.external_snippets">
|
|
<xpath expr="//t[@t-install='website_form']" position="replace"/>
|
|
</template>
|
|
|
|
<template id="register_s_website_form" inherit_id="website.snippets" name="Snippet Form Builder">
|
|
<xpath expr="//div[@id='snippet_feature']//t[@t-snippet][last()]" position="after">
|
|
<t t-snippet="website_form.s_website_form" t-thumbnail="/website/static/src/img/s_website_form.png"/>
|
|
</xpath>
|
|
</template>
|
|
|
|
<template id="snippet_options" inherit_id="website.snippet_options">
|
|
<xpath expr="//*[@id='so_snippet_addition']" position="attributes">
|
|
<attribute name="data-selector" add=".s_website_form" separator=","/>
|
|
</xpath>
|
|
<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 & Time</we-button>
|
|
<we-button data-website_form_custom_field="binary">File Upload</we-button>
|
|
</we-select>
|
|
</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"/>
|
|
</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>
|
|
</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"/>
|
|
</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 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 options of the Submit button -->
|
|
<div data-js="website_form_editor_field_required" data-selector=".s_website_form .o_website_form_send"/>
|
|
</xpath>
|
|
</template>
|
|
</odoo>
|