[IMP] website, *: add pre fill option for website forms

*: website_crm, website_form_project, website_hr_recruitment,
   website_sale

Replace website_crm specific behavior by another option for all website
forms.

Part of https://github.com/odoo/odoo/pull/69888
task-2462993
This commit is contained in:
Matthieu Stockbauer
2021-07-16 19:13:18 +00:00
committed by Romain Derie
parent 2709602006
commit 54873d20c3
9 changed files with 56 additions and 18 deletions
+4 -4
View File
@@ -63,7 +63,7 @@
<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=""/>
<input id="contact1" type="text" class="form-control s_website_form_input" name="Name" required="" data-fill-with="name"/>
</div>
</div>
</div>
@@ -73,7 +73,7 @@
<span class="s_website_form_label_content">Phone Number</span>
</label>
<div class="col-sm">
<input id="contact2" type="tel" class="form-control s_website_form_input" name="Phone"/>
<input id="contact2" type="tel" class="form-control s_website_form_input" name="Phone" data-fill-with="phone"/>
</div>
</div>
</div>
@@ -84,7 +84,7 @@
<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=""/>
<input id="contact3" type="email" class="form-control s_website_form_input" name="email_from" required="" data-fill-with="email"/>
</div>
</div>
</div>
@@ -94,7 +94,7 @@
<span class="s_website_form_label_content">Your Company</span>
</label>
<div class="col-sm">
<input id="contact4" type="text" class="form-control s_website_form_input" name="Partner Name"/>
<input id="contact4" type="text" class="form-control s_website_form_input" name="Partner Name" data-fill-with="commercial_company_name"/>
</div>
</div>
</div>
@@ -20,19 +20,23 @@ FormEditorRegistry.add('send_mail', {
type: 'char',
custom: true,
required: true,
fillWith: 'name',
name: 'Your Name',
}, {
type: 'tel',
custom: true,
fillWith: 'phone',
name: 'Phone Number',
}, {
type: 'email',
modelRequired: true,
fillWith: 'email',
name: 'email_from',
string: 'Your Email',
}, {
type: 'char',
custom: true,
fillWith: 'commercial_company_name',
name: 'Your Company',
}, {
type: 'char',
@@ -4,6 +4,7 @@ odoo.define('website.s_website_form', function (require) {
var core = require('web.core');
var time = require('web.time');
const {ReCaptcha} = require('google_recaptcha.ReCaptchaV3');
const session = require('web.session');
var ajax = require('web.ajax');
var publicWidget = require('web.public.widget');
const dom = require('web.dom');
@@ -49,12 +50,22 @@ odoo.define('website.s_website_form', function (require) {
this._recaptcha = new ReCaptcha();
this.__started = new Promise(resolve => this.__startResolve = resolve);
},
willStart: function () {
willStart: async function () {
const res = this._super(...arguments);
if (!this.$target[0].classList.contains('s_website_form_no_recaptcha')) {
this._recaptchaLoaded = true;
this._recaptcha.loadLibs();
}
// fetch user data (required by fill-with behavior)
this.preFillValues = {};
if (session.user_id) {
this.preFillValues = (await this._rpc({
model: 'res.users',
method: 'read',
args: [session.user_id, this._getUserPreFillFields()],
}))[0] || {};
}
return res;
},
start: function () {
@@ -91,18 +102,20 @@ odoo.define('website.s_website_form', function (require) {
// Display form values from tag having data-for attribute
// It's necessary to handle field values generated on server-side
// Because, using t-att- inside form make it non-editable
var $values = $('[data-for=' + this.$target.attr('id') + ']');
if ($values.length) {
var values = JSON.parse($values.data('values').replace('False', '""').replace('None', '""').replace(/'/g, '"'));
// Data-fill-with attribute is given during registry and is used by
// to know which user data should be used to prfill fields.
var $dataFor = $('[data-for=' + this.$target.attr('id') + ']');
if ($dataFor.length || !_.isEmpty(this.preFillValues)) {
var dataForValues = $dataFor.length ? JSON.parse($dataFor.data('values').replace('False', '""').replace('None', '""').replace(/'/g, '"')) : [];
var fields = _.pluck(this.$target.serializeArray(), 'name');
_.each(fields, function (field) {
if (_.has(values, field)) {
var $field = self.$target.find('input[name="' + field + '"], textarea[name="' + field + '"]');
if (!$field.val()) {
$field.val(values[field]);
$field.data('website_form_original_default_value', $field.val());
}
var $field = self.$target.find('input[name="' + field + '"], textarea[name="' + field + '"]');
if (!$field.val() && _.has(dataForValues, field) && dataForValues[field]) {
$field.val(dataForValues[field]);
} else if (!$field.val() && $field.data('fill-with')) {
$field.val(self.preFillValues[$field.data('fill-with')]);
}
$field.data('website_form_original_default_value', $field.val());
});
}
@@ -382,5 +395,13 @@ odoo.define('website.s_website_form', function (require) {
message: message,
})));
},
/**
* Gets the user's field needed to be fetched to pre-fill the form.
*
* @returns {string[]} List of user's field that have to be fetched.
*/
_getUserPreFillFields() {
return ['name', 'phone', 'email', 'commercial_company_name'];
},
});
});
@@ -107,6 +107,7 @@
t-att-name="field.name"
t-att-required="field.required || field.modelRequired || None"
t-att-value="field.value"
t-att-data-fill-with="field.fillWith"
t-att-placeholder="field.placeholder"
t-att-id="field.id"
/>
@@ -11,19 +11,23 @@ FormEditorRegistry.add('create_lead', {
type: 'char',
required: true,
name: 'contact_name',
fillWith: 'name',
string: 'Your Name',
}, {
type: 'tel',
name: 'phone',
fillWith: 'phone',
string: 'Phone Number',
}, {
type: 'email',
required: true,
fillWith: 'email',
name: 'email_from',
string: 'Your Email',
}, {
type: 'char',
required: true,
fillWith: 'commercial_company_name',
name: 'partner_name',
string: 'Your Company',
}, {
@@ -27,7 +27,7 @@
<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=""/>
<input id="opportunity1" type="text" class="form-control s_website_form_input" name="contact_name" required="" data-fill-with="name"/>
</div>
</div>
</div>
@@ -37,7 +37,7 @@
<span class="s_website_form_label_content">Phone Number</span>
</label>
<div class="col-sm">
<input id="opportunity2" type="tel" class="form-control s_website_form_input" name="phone" />
<input id="opportunity2" type="tel" class="form-control s_website_form_input" name="phone" data-fill-with="phone"/>
</div>
</div>
</div>
@@ -48,7 +48,7 @@
<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="" />
<input id="opportunity3" type="text" class="form-control s_website_form_input" name="email_from" required="" data-fill-with="email"/>
</div>
</div>
</div>
@@ -58,7 +58,7 @@
<span class="s_website_form_label_content">Your Company</span>
</label>
<div class="col-sm">
<input id="opportunity4" type="text" class="form-control s_website_form_input" name="partner_name" />
<input id="opportunity4" type="text" class="form-control s_website_form_input" name="partner_name" data-fill-with="commercial_company_name"/>
</div>
</div>
</div>
@@ -15,6 +15,7 @@ FormEditorRegistry.add('create_task', {
}, {
type: 'email',
modelRequired: true,
fillWith: 'email',
name: 'email_from',
string: 'Your Email',
}, {
@@ -11,15 +11,18 @@ FormEditorRegistry.add('apply_job', {
type: 'char',
modelRequired: true,
name: 'partner_name',
fillWith: 'name',
string: 'Your Name',
}, {
type: 'email',
required: true,
fillWith: 'email',
name: 'email_from',
string: 'Your Email',
}, {
type: 'char',
required: true,
fillWith: 'phone',
name: 'partner_phone',
string: 'Phone Number',
}, {
@@ -8,19 +8,23 @@ FormEditorRegistry.add('create_customer', {
type: 'char',
modelRequired: true,
name: 'name',
fillWith: 'name',
string: 'Your Name',
}, {
type: 'email',
required: true,
fillWith: 'email',
name: 'email',
string: 'Your Email',
}, {
type: 'tel',
fillWith: 'phone',
name: 'phone',
string: 'Phone Number',
}, {
type: 'char',
name: 'company_name',
fillWith: 'commercial_company_name',
string: 'Company Name',
}],
});