[FIX] website_form, *: fix new website form

* = website_crm, website_hr_recruitment, website_sale

Changing label position on existing field was replacing the label with
the default one.

Redirection message was not updating the overlay

Going from show message to redirect without hidding the mesage made the
form d-none

When a select field's label's position was changed the select was not
editable anymore.

Some other miscellaneous fixes

task-2191409

closes odoo/odoo#44911

X-original-commit: 3cf87cc1cb179598cecb736728378e330d3b2e22
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
fja-odoo
2020-02-07 18:34:34 +00:00
committed by qsm-odoo
parent faac525e62
commit 67d9eafd2e
9 changed files with 290 additions and 254 deletions
@@ -11,72 +11,74 @@
'description': request.params.get('description', ''),
}</attribute>
</xpath>
<xpath expr="//section[@id='contactus_section']" position="replace">
<section class="s_website_form" data-vcss="001">
<div class="container">
<form id="contactus_form" action="/website_form/" method="post" enctype="multipart/form-data" data-model_name="crm.lead" data-success-mode="redirect" data-success-page="/contactus-thank-you" class="o_mark_required" data-mark="*" data-editable-form="false">
<div class="s_website_form_rows row s_col_no_bgcolor">
<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="opportunity1">Your Name<span class="s_website_form_mark"> *</span></label>
<div class="col-sm">
<input id="opportunity1" type="text" class="form-control s_website_form_input" name="contact_name" required=""/>
<xpath expr="//div[@id='contactus_section']" position="replace">
<div id="contactus_section">
<section class="s_website_form" data-vcss="001">
<div class="container">
<form id="contactus_form" action="/website_form/" method="post" enctype="multipart/form-data" data-model_name="crm.lead" data-success-mode="redirect" data-success-page="/contactus-thank-you" class="o_mark_required" data-mark="*" data-editable-form="false">
<div class="s_website_form_rows row s_col_no_bgcolor">
<div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char" data-name="Field">
<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="opportunity1">Your Name<span class="s_website_form_mark"> *</span></label>
<div class="col-sm">
<input id="opportunity1" type="text" class="form-control s_website_form_input" name="contact_name" required=""/>
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field" data-type="char" data-name="Field">
<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="opportunity2">Phone Number</label>
<div class="col-sm">
<input id="opportunity2" 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="char" data-name="Field">
<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="opportunity3">Email<span class="s_website_form_mark"> *</span></label>
<div class="col-sm">
<input id="opportunity3" type="text" class="form-control s_website_form_input" name="email_from" required="" />
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field" data-type="char" data-name="Field">
<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="opportunity4">Your Company</label>
<div class="col-sm">
<input id="opportunity4" 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_model_required" data-type="char" data-name="Field">
<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="opportunity5">Subject</label>
<div class="col-sm">
<input id="opportunity5" 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_required" data-type="text" data-name="Field">
<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="opportunity6">Your Question<span class="s_website_form_mark"> *</span></label>
<div class="col-sm">
<textarea id="opportunity6" class="form-control s_website_form_input" name="description" required=""></textarea>
</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>
<div class="form-group col-12 s_website_form_field" 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="opportunity2">Phone Number</label>
<div class="col-sm">
<input id="opportunity2" 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="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="opportunity3">Email<span class="s_website_form_mark"> *</span></label>
<div class="col-sm">
<input id="opportunity3" type="text" class="form-control s_website_form_input" name="email_from" required="" />
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field" 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="opportunity4">Your Company</label>
<div class="col-sm">
<input id="opportunity4" 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_model_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="opportunity5">Subject</label>
<div class="col-sm">
<input id="opportunity5" 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_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="opportunity6">Your Question<span class="s_website_form_mark"> *</span></label>
<div class="col-sm">
<textarea id="opportunity6" class="form-control s_website_form_input" name="description" required=""></textarea>
</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>
</section>
</form>
</div>
</section>
</div>
</xpath>
</template>
@@ -50,6 +50,7 @@ FormEditorRegistry.add('send_mail', {
type: 'char',
required: true,
string: _t('Recipient Email'),
defaultValue: 'info@yourcompany.example.com',
}],
});
@@ -28,8 +28,19 @@ const FormEditor = options.Class.extend({
// in qweb js to avoid duplicating this in the templates
field.required = field.required ? 1 : null;
// Fetch possible values for relation fields
if (!field.records && field.relation && field.relation !== 'ir.attachment') {
if (field.records) {
return field.records;
}
// Set selection as records to avoid added conplexity
if (field.type === 'selection') {
field.records = [];
field.selection.forEach(el => {
field.records.push({
id: el[0],
display_name: el[1],
});
});
} else if (field.relation && field.relation !== 'ir.attachment') {
field.records = await this._rpc({
model: field.relation,
method: 'search_read',
@@ -55,7 +66,7 @@ const FormEditor = options.Class.extend({
string: name,
custom: true,
type: type,
// Default values for x2many fields
// Default values for x2many fields and selection
records: [{
id: _t('Option 1'),
display_name: _t('Option 1'),
@@ -66,17 +77,6 @@ const FormEditor = options.Class.extend({
id: _t('Option 3'),
display_name: _t('Option 3'),
}],
// Default values for selection fields
selection: [[
_t('Option 1'),
_t('Option 1'),
], [
_t('Option 2'),
_t('Option 2'),
], [
_t('Option 3'),
_t('Option 3'),
]],
};
},
/**
@@ -116,7 +116,6 @@ const FormEditor = options.Class.extend({
*/
_isRequiredMark: function () {
return this.$target[0].classList.contains('o_mark_required');
},
/**
* @private
@@ -152,12 +151,14 @@ const FieldEditor = FormEditor.extend({
*/
_getActiveField: function () {
let field;
const labelText = this.$target.find('.s_website_form_label_content').text();
if (this._isFieldCustom()) {
const name = this.$target[0].querySelector('.s_website_form_label').firstChild.textContent.trim();
field = this._getCustomField(this.$target[0].dataset.type, name);
field = this._getCustomField(this.$target[0].dataset.type, labelText);
} else {
field = this.fields[this._getFieldName()];
field.string = labelText;
}
field.records = this._getListItems();
this._setActiveProperties(field);
return field;
},
@@ -170,7 +171,7 @@ const FieldEditor = FormEditor.extend({
*/
_getFieldFormat: function () {
let requiredMark, optionalMark;
const mark = this.$target[0].querySelector('span.s_website_form_mark');
const mark = this.$target[0].querySelector('.s_website_form_mark');
if (mark) {
requiredMark = this._isFieldRequired();
optionalMark = !requiredMark;
@@ -270,7 +271,8 @@ const FieldEditor = FormEditor.extend({
*/
_setActiveProperties(field) {
field.placeholder = this._getPlaceholder();
field.required = this._isFieldRequired();
field.required = this.$target[0].classList.contains('s_website_form_required');
field.modelRequired = this.$target[0].classList.contains('s_website_form_model_required');
field.hidden = this.$target[0].classList.contains('s_website_form_field_hidden');
field.formatInfo = this._getFieldFormat();
},
@@ -361,7 +363,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
if (model) {
// we may be re-whitelisting already whitelisted fields. Doesn't
// really matter.
const fields = [...this.$target[0].querySelectorAll('.s_website_form_field:not(.s_website_form_custom) input')].map(el => el.name);
const fields = [...this.$target[0].querySelectorAll('.s_website_form_field:not(.s_website_form_custom) .s_website_form_input')].map(el => el.name);
if (fields.length) {
// ideally we'd only do this if saving the form
// succeeds... but no idea how to do that
@@ -399,6 +401,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
updateUIEndMessage: function () {
this.$target.toggleClass("d-none", this.showEndMessage);
this.$message.toggleClass("d-none", !this.showEndMessage);
this.$el.find(".toggle-edit-message").toggleClass('text-primary', this.showEndMessage);
},
/**
* @override
@@ -430,20 +433,11 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
* ie: The Job you apply for if the form is on that job's page.
*/
addActionField: function (previewMode, value, params) {
let fieldName = params.fieldName;
const fieldName = params.fieldName;
if (params.isSelect === 'true') {
value = parseInt(value);
}
this.$target.find(`.s_website_form_field.d-none:has(input[name="${params.fieldName}"])`).remove();
if (value) {
const hiddenField = qweb.render('website_form.field_hidden', {
field: {
name: fieldName,
value: value,
},
});
this.$target.find('.s_website_form_submit').before(hiddenField);
}
this.addHiddenField(value, fieldName);
},
/**
* Changes the onSuccess event.
@@ -456,6 +450,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
}
this.$target.after(this.$message);
} else {
this.showEndMessage = false;
this.$message.remove();
}
},
@@ -541,11 +536,33 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
option = this._buildInput(field);
break;
}
if (field.required) {
// Get default value or for many2one fields the first option.
const defaultValue = field.defaultValue || field.records[0].id;
this.addHiddenField(defaultValue, field.name);
}
uiFragment.insertBefore(option, firstOption);
});
});
},
/**
* Add a hidden field to the form
*
* @param {string} value
* @param {string} fieldName
*/
addHiddenField: function (value, fieldName) {
this.$target.find(`.s_website_form_field.d-none:has(input[name="${fieldName}"])`).remove();
if (value) {
const hiddenField = qweb.render('website_form.field_hidden', {
field: {
name: fieldName,
value: value,
},
});
this.$target.find('.s_website_form_submit').before(hiddenField);
}
},
/**
* Returns a we-input element from the field
*
@@ -574,10 +591,12 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
selectEl.dataset.fieldName = field.name;
selectEl.dataset.isSelect = 'true';
selectEl.setAttribute('string', field.string);
const noneButton = document.createElement('we-button');
noneButton.textContent = 'None';
noneButton.dataset.addActionField = 0;
selectEl.append(noneButton);
if (!field.required) {
const noneButton = document.createElement('we-button');
noneButton.textContent = 'None';
noneButton.dataset.addActionField = 0;
selectEl.append(noneButton);
}
field.records.forEach(el => {
const button = document.createElement('we-button');
button.textContent = el.display_name;
@@ -634,7 +653,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
* @private
*/
_setLabelsMark: function () {
this.$target[0].querySelectorAll('span.s_website_form_mark').forEach(el => el.remove());
this.$target[0].querySelectorAll('.s_website_form_mark').forEach(el => el.remove());
const mark = this._getMark();
if (!mark) {
return;
@@ -664,8 +683,10 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
*/
_onToggleEndMessageClick: function () {
this.showEndMessage = !this.showEndMessage;
this.$el.find(".toggle-edit-message").toggleClass('text-primary', this.showEndMessage);
this.updateUIEndMessage();
this.trigger_up('activate_snippet', {
$snippet: this.showEndMessage ? this.$message : this.$target,
});
},
});
@@ -794,7 +815,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
* Set the name of the field on the label
*/
setLabelText: function (previewMode, value, params) {
this.$target[0].querySelector('.s_website_form_label').firstChild.textContent = value;
this.$target.find('.s_website_form_label_content').text(value);
if (this._isFieldCustom()) {
const multiple = this.$target[0].querySelector('.s_website_form_multiple');
if (multiple) {
@@ -816,7 +837,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
const field = this._getActiveField();
field.formatInfo.labelPosition = value;
await this._replaceField(field);
this._renderListItems();
this.rerender = true;
},
/**
* Select the display of the multicheckbox field (vertical & horizontal)
@@ -859,7 +880,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
case 'existingField':
return this._isFieldCustom() ? '' : this._getFieldName();
case 'setLabelText':
return this.$target[0].querySelector('.s_website_form_label').firstChild.textContent.trim();
return this.$target.find('.s_website_form_label_content').text();
case 'setPlaceholder':
return this._getPlaceholder();
case 'selectLabelPosition':
@@ -943,7 +964,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
listTitle = multipleInputs.querySelector('.radio') ? 'Radio List' : 'Checkbox List';
addItemTitle = 'Add new Checkbox';
multipleInputs.querySelectorAll('.checkbox, .radio').forEach(opt => {
this._addItemToTable(opt.querySelector('input').value, opt.querySelector('span').textContent.trim());
this._addItemToTable(opt.querySelector('input').value, opt.querySelector('.s_website_form_check_label').textContent.trim());
});
} else {
return;
@@ -988,18 +1009,11 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
selectMenu.innerHTML = '';
const field = this.fields[this._getFieldName()];
this._fetchFieldRecords(field).then(() => {
let buttonItems, availableRecords;
if (field.selection) {
availableRecords = field.selection.map(el => {
return {id: el[0], display_name: el[1]};
});
} else if (field.records) {
availableRecords = field.records;
}
let buttonItems;
const optionIds = Array.from(this.listTable.querySelectorAll('input')).map(opt => {
return field.type === 'selection' ? opt.name : parseInt(opt.name);
});
availableRecords = (availableRecords || []).filter(el => !optionIds.includes(el.id));
const availableRecords = (field.records || []).filter(el => !optionIds.includes(el.id));
if (availableRecords.length) {
buttonItems = availableRecords.map(el => {
const option = document.createElement('we-button');
@@ -1079,31 +1093,22 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
_renderListItems: function () {
const multiInputsWrap = this._getMultipleInputs();
const selectWrap = this.$target[0].querySelector('#editable_select');
const isCustomField = this._isFieldCustom();
const isRequiredField = this._isFieldRequired();
const name = this._getFieldName();
if (multiInputsWrap) {
const type = multiInputsWrap.querySelector('.radio') ? 'radio' : 'checkbox';
multiInputsWrap.innerHTML = '';
this.listTable.querySelectorAll('input').forEach(el => {
const params = {
field: {
name: name,
required: isRequiredField,
formatInfo: {
multiPosition: multiInputsWrap.dataset.display,
}
const params = {
field: {
name: name,
required: isRequiredField,
formatInfo: {
multiPosition: multiInputsWrap.dataset.display,
}
};
const id = isCustomField ? el.value : el.name;
if (type === 'radio') {
params.record = [id, el.value];
} else {
params.record = {
id: id,
display_name: el.value,
};
}
};
this._getListItems().forEach(record => {
params.record = record;
const template = document.createElement('template');
template.innerHTML = qweb.render(`website_form.${type}`, params);
multiInputsWrap.appendChild(template.content.firstElementChild);
@@ -1119,6 +1124,26 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
});
}
},
/**
* Returns an array based on the we-list containing the field's records
*
* @returns {Array}
*/
_getListItems: function () {
if (!this.listTable) {
return null;
}
const isCustomField = this._isFieldCustom();
const records = [];
this.listTable.querySelectorAll('input').forEach(el => {
const id = isCustomField ? el.value : el.name;
records.push({
id: id,
display_name: el.value,
});
});
return records;
},
/**
* Returns the select element if it exist else null
*
@@ -26,9 +26,9 @@
<t t-name="website_form.field">
<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">
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">
<label t-attf-class="#{!field.isCheck and 'col-form-label' or ''} 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>
<div class="col-sm">
@@ -46,7 +46,7 @@
<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"/>
<span class="s_website_form_label_content" 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>
@@ -198,25 +198,25 @@
<!-- Boolean Field -->
<t t-name="website_form.field_boolean">
<t t-set="field.isCheck" t-value="true"/>
<t t-call="website_form.field">
<div class="col-form-label">
<input
type="checkbox"
value="Yes"
class="s_website_form_input"
t-att-name="field.name"
t-att-required="field.required || field.modelRequired || None"
t-att-id="field.id"
/>
</div>
<input
type="checkbox"
value="Yes"
class="s_website_form_input"
t-att-name="field.name"
t-att-required="field.required || field.modelRequired || None"
t-att-id="field.id"
/>
</t>
</t>
<!-- Selection Field -->
<t t-name="website_form.field_selection">
<t t-set="field.isCheck" t-value="true"/>
<t t-call="website_form.field">
<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">
<t t-if="!field.records">
<input
class="s_website_form_input"
t-att-name="field.name"
@@ -225,7 +225,7 @@
placeholder="No matching record !"
/>
</t>
<t t-foreach="field.selection" t-as="record">
<t t-foreach="field.records" t-as="record">
<t t-call="website_form.radio"/>
</t>
</div>
@@ -234,19 +234,21 @@
<!-- Radio -->
<t t-name="website_form.radio">
<t t-set="recordId" t-value="field.id + record_index"/>
<div t-attf-class="radio col-12 #{field.formatInfo.multiPosition === 'horizontal' and 'col-lg-4 col-md-6' or ''}">
<label class="col-form-label">
<div class="form-check">
<input
type="radio"
class="s_website_form_input"
class="s_website_form_input form-check-input"
t-att-id="recordId"
t-att-name="field.name"
t-att-value="record[0]"
t-att-value="record.id"
t-att-required="field.required || field.modelRequired || None"
/>
<span>
<t t-esc="record[1]"/>
</span>
</label>
<label class="form-check-label s_website_form_check_label" t-att-for="recordId">
<t t-esc="record.display_name"/>
</label>
</div>
</div>
</t>
@@ -280,6 +282,7 @@
</t>
<!-- Generic one2many -->
<t t-if="field.relation != 'ir.attachment'">
<t t-set="field.isCheck" t-value="true"/>
<t t-call="website_form.field">
<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">
@@ -301,19 +304,21 @@
<!-- Checkbox -->
<t t-name="website_form.checkbox">
<t t-set="recordId" t-value="field.id + record_index"/>
<div t-attf-class="checkbox col-12 #{field.formatInfo.multiPosition === 'horizontal' and 'col-lg-4 col-md-6' or ''}">
<label class="col-form-label">
<div class="form-check">
<input
type="checkbox"
class="s_website_form_input"
class="s_website_form_input form-check-input"
t-att-id="recordId"
t-att-name="field.name"
t-att-value="record.id"
t-att-required="field.required || field.modelRequired || None"
/>
<span>
<label class="form-check-label s_website_form_check_label" t-att-for="recordId">
<t t-esc="record.display_name"/>
</span>
</label>
</label>
</div>
</div>
</t>
@@ -324,6 +329,7 @@
<!-- Binary Field -->
<t t-name="website_form.field_binary">
<t t-set="field.isCheck" t-value="true"/>
<t t-call="website_form.field">
<input
type="file"
@@ -136,10 +136,10 @@ odoo.define('website_form_editor.tour', function (require) {
content: "Check the resulting field",
trigger: ".s_website_form_field.s_website_form_custom.s_website_form_required" +
":has(.s_website_form_multiple[data-display='horizontal'])" +
":has(.checkbox label:contains('Iphone'):has(input[type='checkbox'][required]))" +
":has(.checkbox label:contains('Galaxy S'):has(input[type='checkbox'][required]))" +
":has(.checkbox label:contains('Xperia'):has(input[type='checkbox'][required]))" +
":has(.checkbox label:contains('Wiko Stairway'):has(input[type='checkbox'][required]))",
":has(.checkbox:has(label:contains('Iphone')):has(input[type='checkbox'][required]))" +
":has(.checkbox:has(label:contains('Galaxy S')):has(input[type='checkbox'][required]))" +
":has(.checkbox:has(label:contains('Xperia')):has(input[type='checkbox'][required]))" +
":has(.checkbox:has(label:contains('Wiko Stairway')):has(input[type='checkbox'][required]))",
run: function () {},
},
...selectButtonByData('data-multi-checkbox-display="vertical"'),
@@ -147,10 +147,10 @@ odoo.define('website_form_editor.tour', function (require) {
content: "Check the resulting field",
trigger: ".s_website_form_field.s_website_form_custom.s_website_form_required" +
":has(.s_website_form_multiple[data-display='vertical'])" +
":has(.checkbox label:contains('Iphone'):has(input[type='checkbox'][required]))" +
":has(.checkbox label:contains('Galaxy S'):has(input[type='checkbox'][required]))" +
":has(.checkbox label:contains('Xperia'):has(input[type='checkbox'][required]))" +
":has(.checkbox label:contains('Wiko Stairway'):has(input[type='checkbox'][required]))",
":has(.checkbox:has(label:contains('Iphone')):has(input[type='checkbox'][required]))" +
":has(.checkbox:has(label:contains('Galaxy S')):has(input[type='checkbox'][required]))" +
":has(.checkbox:has(label:contains('Xperia')):has(input[type='checkbox'][required]))" +
":has(.checkbox:has(label:contains('Wiko Stairway')):has(input[type='checkbox'][required]))",
run: function () {},
},
@@ -180,10 +180,10 @@ odoo.define('website_form_editor.tour', function (require) {
}, {
content: "Check the resulting field",
trigger: ".s_website_form_field.s_website_form_custom:not(.s_website_form_required)" +
":has(.radio label:contains('After-sales Service'):has(input[type='radio']:not([required])))" +
":has(.radio label:contains('Invoicing Service'):has(input[type='radio']:not([required])))" +
":has(.radio label:contains('Development Service'):has(input[type='radio']:not([required])))" +
":has(.radio label:contains('Management Service'):has(input[type='radio']:not([required])))",
":has(.radio:has(label:contains('After-sales Service')):has(input[type='radio']:not([required])))" +
":has(.radio:has(label:contains('Invoicing Service')):has(input[type='radio']:not([required])))" +
":has(.radio:has(label:contains('Development Service')):has(input[type='radio']:not([required])))" +
":has(.radio:has(label:contains('Management Service')):has(input[type='radio']:not([required])))",
run: function () {},
},
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_website_form" name="Form">
<template id="s_website_form" name="Form Builder">
<section class="s_website_form" data-vcss="001">
<div class="container">
<form action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*">
@@ -40,7 +40,7 @@
<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-button class="fa fa-fw fa-eye 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>
@@ -4,12 +4,12 @@
<template id="contactus_form" name="Contact Form" inherit_id="website.contactus" customize_show="True">
<xpath expr="//div[@name='mail_button']" position="replace">
<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 id="contactus_section">
<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="form-group col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="char" data-name="Field">
<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">
@@ -17,7 +17,7 @@
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="char">
<div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="char" data-name="Field">
<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">
@@ -25,7 +25,7 @@
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field s_website_form_required" data-type="email">
<div class="form-group col-12 s_website_form_field s_website_form_required" data-type="email" data-name="Field">
<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">
@@ -33,7 +33,7 @@
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="char">
<div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="char" data-name="Field">
<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">
@@ -41,7 +41,7 @@
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char">
<div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char" data-name="Field">
<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">
@@ -49,7 +49,7 @@
</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="form-group col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="text" data-name="Field">
<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">
@@ -135,79 +135,81 @@
<span t-field="job.name"/>
</h2>
<span class="hidden" data-for="hr_recruitment_form" t-att-data-values="{'department_id': job and job.department_id.id or '', 'job_id': job and job.id or ''}" />
<section id="forms" class="s_website_form" data-vcss="001">
<div class="container">
<form id="hr_recruitment_form" action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-model_name="hr.applicant" data-success-mode="redirect" data-success-page="/job-thank-you" hide-change-model="true">
<div class="s_website_form_rows row s_col_no_bgcolor">
<div class="form-group col-12 s_website_form_field s_website_form_required s_website_form_model_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="recruitment1">Your Name<span class="s_website_form_mark"> *</span></label>
<div class="col-sm">
<input id="recruitment1" type="text" class="form-control s_website_form_input" name="partner_name" required=""/>
<div id="jobs_section">
<section id="forms" class="s_website_form" data-vcss="001">
<div class="container">
<form id="hr_recruitment_form" action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-model_name="hr.applicant" data-success-mode="redirect" data-success-page="/job-thank-you" hide-change-model="true">
<div class="s_website_form_rows row s_col_no_bgcolor">
<div class="form-group col-12 s_website_form_field s_website_form_required s_website_form_model_required" data-type="char" data-name="Field">
<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="recruitment1">Your Name<span class="s_website_form_mark"> *</span></label>
<div class="col-sm">
<input id="recruitment1" type="text" class="form-control s_website_form_input" name="partner_name" required=""/>
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field s_website_form_required" data-type="email" data-name="Field">
<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="recruitment2">Your Email<span class="s_website_form_mark"> *</span></label>
<div class="col-sm">
<input id="recruitment2" 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_required" data-type="char" data-name="Field">
<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="recruitment3">Your Phone Number<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=""/>
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field" data-type="text" data-name="Field">
<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="recruitment4">Short Introduction</label>
<div class="col-sm">
<textarea id="recruitment4" class="form-control s_website_form_input" name="description"></textarea>
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="binary" data-name="Field">
<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="recruitment5">Resume</label>
<div class="col-sm">
<input id="recruitment5" type="file" class="form-control s_website_form_input" name="Resume"/>
</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="recruitment6">Job</label>
<div class="col-sm">
<input id="recruitment6" type="hidden" class="form-control s_website_form_input" name="job_id"/>
</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="recruitment7">Department</label>
<div class="col-sm">
<input id="recruitment7" type="hidden" class="form-control s_website_form_input" name="department_id"/>
</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>
<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="recruitment2">Your Email<span class="s_website_form_mark"> *</span></label>
<div class="col-sm">
<input id="recruitment2" 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_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="recruitment3">Your Phone Number<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=""/>
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field" 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="recruitment4">Short Introduction</label>
<div class="col-sm">
<textarea id="recruitment4" class="form-control s_website_form_input" name="description"></textarea>
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="binary">
<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="recruitment5">Resume</label>
<div class="col-sm">
<input id="recruitment5" type="file" class="form-control s_website_form_input" name="Resume"/>
</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="recruitment6">Job</label>
<div class="col-sm">
<input id="recruitment6" type="hidden" class="form-control s_website_form_input" name="job_id"/>
</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="recruitment7">Department</label>
<div class="col-sm">
<input id="recruitment7" type="hidden" class="form-control s_website_form_input" name="department_id"/>
</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>
</section>
</form>
</div>
</section>
</div>
<div class="oe_structure mt-2"/>
</div>
</t>
+3 -3
View File
@@ -750,7 +750,7 @@
<div class="container">
<form action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-force_action="shop.sale.order" data-model_name="sale.order" data-success-mode="redirect" data-success-page="/shop/payment" hide-change-model="true">
<div class="s_website_form_rows row s_col_no_bgcolor">
<div class="form-group col-12 s_website_form_field" data-type="char">
<div class="form-group col-12 s_website_form_field" data-type="char" data-name="Field">
<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="sale1">Your Reference</label>
<div class="col-sm">
@@ -758,7 +758,7 @@
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="text">
<div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="text" data-name="Field">
<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="sale2">Give us your feedback</label>
<div class="col-sm">
@@ -766,7 +766,7 @@
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="binary">
<div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="binary" data-name="Field">
<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="sale3">A document to provide</label>
<div class="col-sm">