[FIX] mail: fix read more/less span insertion
task-2248307 closes odoo/odoo#55163 X-original-commit: a8ea9bc98d114eef056babc0d2639eaddbcf3778 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
@@ -104,6 +104,12 @@ class Message extends Component {
|
||||
_constructor() {}
|
||||
|
||||
mounted() {
|
||||
// Remove all readmore before if any before reinsert them with _insertReadMoreLess.
|
||||
// This is needed because _insertReadMoreLess is working with direct DOM mutations
|
||||
// which are not sync with Owl.
|
||||
for (const el of [...this._contentRef.el.querySelectorAll(':scope .o_Message_readMoreLess')]) {
|
||||
el.remove();
|
||||
}
|
||||
this._insertReadMoreLess($(this._contentRef.el));
|
||||
this._update();
|
||||
}
|
||||
@@ -309,6 +315,8 @@ class Message extends Component {
|
||||
* Those text nodes need to be wrapped in a span (toggle functionality).
|
||||
* All consecutive elements are joined in one 'read more/read less'.
|
||||
*
|
||||
* FIXME This method should be rewritten (task-2308951)
|
||||
*
|
||||
* @private
|
||||
* @param {jQuery} $element
|
||||
*/
|
||||
@@ -362,7 +370,7 @@ class Message extends Component {
|
||||
for (const group of groups) {
|
||||
// Insert link just before the first node
|
||||
const $readMoreLess = $('<a>', {
|
||||
class: 'o_Message_readMore',
|
||||
class: 'o_Message_readMoreLess',
|
||||
href: '#',
|
||||
text: READ_MORE,
|
||||
}).insertBefore(group[0]);
|
||||
|
||||
@@ -122,7 +122,7 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.o_Message_readMore {
|
||||
.o_Message_readMoreLess {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@@ -426,6 +426,169 @@ QUnit.test('chatter should become enabled when creation done', async function (a
|
||||
);
|
||||
});
|
||||
|
||||
QUnit.test('read more/less links are not duplicated when switching from read to edit mode', async function (assert) {
|
||||
assert.expect(5);
|
||||
|
||||
this.data['mail.message'].records = [{
|
||||
author_id: [100, "Someone"],
|
||||
// "data-o-mail-quote" added by server is intended to be compacted in read more/less blocks
|
||||
body: `
|
||||
<div>
|
||||
Dear Joel Willis,<br>
|
||||
Thank you for your enquiry.<br>
|
||||
If you have any questions, please let us know.
|
||||
<br><br>
|
||||
Thank you,<br>
|
||||
<span data-o-mail-quote="1">-- <br data-o-mail-quote="1">
|
||||
System
|
||||
</span>
|
||||
</div>
|
||||
`,
|
||||
id: 1000,
|
||||
model: 'res.partner',
|
||||
res_id: 1,
|
||||
}];
|
||||
this.data['res.partner'].records = [{
|
||||
display_name: "first partner",
|
||||
id: 1,
|
||||
}];
|
||||
await this.createView({
|
||||
data: this.data,
|
||||
hasView: true,
|
||||
// View params
|
||||
View: FormView,
|
||||
model: 'res.partner',
|
||||
res_id: 1,
|
||||
arch: `
|
||||
<form string="Partners">
|
||||
<sheet>
|
||||
<field name="name"/>
|
||||
</sheet>
|
||||
<div class="oe_chatter">
|
||||
<field name="message_ids"/>
|
||||
</div>
|
||||
</form>
|
||||
`,
|
||||
});
|
||||
assert.containsOnce(
|
||||
document.body,
|
||||
'.o_Chatter',
|
||||
"there should be a chatter"
|
||||
);
|
||||
assert.containsOnce(
|
||||
document.body,
|
||||
'.o_Message',
|
||||
"there should be a message"
|
||||
);
|
||||
assert.containsOnce(
|
||||
document.body,
|
||||
'.o_Message_readMoreLess',
|
||||
"there should be only one read more"
|
||||
);
|
||||
|
||||
await afterNextRender(() => {
|
||||
document.querySelector('.o_form_button_edit').click();
|
||||
});
|
||||
assert.containsOnce(
|
||||
document.body,
|
||||
'.o_Message_readMoreLess',
|
||||
"there should still be only one read more after switching to edit mode"
|
||||
);
|
||||
|
||||
await afterNextRender(() => {
|
||||
document.querySelector('.o_form_button_cancel').click();
|
||||
});
|
||||
assert.containsOnce(
|
||||
document.body,
|
||||
'.o_Message_readMoreLess',
|
||||
"there should still be only one read more after switching back to read mode"
|
||||
);
|
||||
});
|
||||
|
||||
QUnit.test('read more links becomes read less after being clicked', async function (assert) {
|
||||
assert.expect(6);
|
||||
|
||||
this.data['mail.message'].records = [{
|
||||
author_id: [100, "Someone"],
|
||||
// "data-o-mail-quote" added by server is intended to be compacted in read more/less blocks
|
||||
body: `
|
||||
<div>
|
||||
Dear Joel Willis,<br>
|
||||
Thank you for your enquiry.<br>
|
||||
If you have any questions, please let us know.
|
||||
<br><br>
|
||||
Thank you,<br>
|
||||
<span data-o-mail-quote="1">-- <br data-o-mail-quote="1">
|
||||
System
|
||||
</span>
|
||||
</div>
|
||||
`,
|
||||
id: 1000,
|
||||
model: 'res.partner',
|
||||
res_id: 1,
|
||||
}];
|
||||
this.data['res.partner'].records = [{
|
||||
display_name: "first partner",
|
||||
id: 1,
|
||||
}];
|
||||
await this.createView({
|
||||
data: this.data,
|
||||
hasView: true,
|
||||
// View params
|
||||
View: FormView,
|
||||
model: 'res.partner',
|
||||
res_id: 1,
|
||||
arch: `
|
||||
<form string="Partners">
|
||||
<sheet>
|
||||
<field name="name"/>
|
||||
</sheet>
|
||||
<div class="oe_chatter">
|
||||
<field name="message_ids"/>
|
||||
</div>
|
||||
</form>
|
||||
`,
|
||||
});
|
||||
assert.containsOnce(
|
||||
document.body,
|
||||
'.o_Chatter',
|
||||
"there should be a chatter"
|
||||
);
|
||||
assert.containsOnce(
|
||||
document.body,
|
||||
'.o_Message',
|
||||
"there should be a message"
|
||||
);
|
||||
assert.containsOnce(
|
||||
document.body,
|
||||
'.o_Message_readMoreLess',
|
||||
"there should be a read more"
|
||||
);
|
||||
assert.strictEqual(
|
||||
document.querySelector('.o_Message_readMoreLess').textContent,
|
||||
'read more',
|
||||
"read more/less link should contain 'read more' as text"
|
||||
);
|
||||
|
||||
await afterNextRender(() => {
|
||||
document.querySelector('.o_form_button_edit').click();
|
||||
});
|
||||
assert.strictEqual(
|
||||
document.querySelector('.o_Message_readMoreLess').textContent,
|
||||
'read more',
|
||||
"read more/less link should contain 'read more' as text"
|
||||
);
|
||||
|
||||
await afterNextRender(() => {
|
||||
document.querySelector('.o_Message_readMoreLess').click();
|
||||
});
|
||||
assert.strictEqual(
|
||||
document.querySelector('.o_Message_readMoreLess').textContent,
|
||||
'read less',
|
||||
"read more/less link should contain 'read less' as text after it has been clicked"
|
||||
);
|
||||
});
|
||||
|
||||
QUnit.test('Form view not scrolled when switching record', async function (assert) {
|
||||
assert.expect(6);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user