[IMP] mail: avatar card preview v2

This commit changes the behavior of the avatar card preview so that it
is now triggered on click instead of on hover and the previous behavior
of the click event (open chat) is therefore removed. It also adds the
functionality to the Message and Activity components of discuss so that
clicking on the avatar inside these components will also show the card.
It also makes sure that the id of the user is added to the persona even
if nothing indicates that it should.

task-3442819

closes odoo/odoo#131355

Related: odoo/enterprise#47084
Signed-off-by: Francois Georis (fge) <fge@odoo.com>
This commit is contained in:
Julien Carion (juca)
2023-09-15 16:45:50 +00:00
parent 30650af183
commit 1a44537095
30 changed files with 245 additions and 392 deletions
@@ -2,7 +2,7 @@
<templates xml:space="preserve">
<t t-inherit="mail.AvatarCardPopover" t-inherit-mode="extension">
<xpath expr="//div[hasclass('o_avatar_card_buttons')]" position="inside">
<button class="btn btn-secondary btn-sm" t-on-click.stop="onClickViewEmployee"> View profile </button>
<button class="btn btn-secondary btn-sm" t-if="user.employee_id" t-on-click.stop="onClickViewEmployee">View profile</button>
</xpath>
</t>
@@ -59,34 +59,34 @@ QUnit.test("many2one_avatar_employee widget in list view", async function (asser
document.querySelectorAll(".o_data_cell div[name='employee_id']")[2].innerText,
"Mario"
);
// TODO: avatar card employee
// click on first employee
dom.click(document.querySelector(".o_data_cell .o_m2o_avatar > img"));
await contains(".o-mail-ChatWindow-name");
assert.verifySteps([`read hr.employee.public ${employeeId_1}`]);
assert.strictEqual(document.querySelector(".o-mail-ChatWindow-name").textContent, "Mario");
// dom.click(document.querySelector(".o_data_cell .o_m2o_avatar > img"));
// await contains(".o-mail-ChatWindow-name");
// assert.verifySteps([`read hr.employee.public ${employeeId_1}`]);
// assert.strictEqual(document.querySelector(".o-mail-ChatWindow-name").textContent, "Mario");
// click on second employee
dom.click(document.querySelectorAll(".o_data_cell .o_m2o_avatar > img")[1]);
await contains(".o-mail-ChatWindow-name", { count: 2 });
assert.verifySteps([`read hr.employee.public ${employeeId_2}`]);
assert.strictEqual(
document.querySelectorAll(".o-mail-ChatWindow-name")[1].textContent,
"Luigi"
);
// // click on second employee
// dom.click(document.querySelectorAll(".o_data_cell .o_m2o_avatar > img")[1]);
// await contains(".o-mail-ChatWindow-name", { count: 2 });
// assert.verifySteps([`read hr.employee.public ${employeeId_2}`]);
// assert.strictEqual(
// document.querySelectorAll(".o-mail-ChatWindow-name")[1].textContent,
// "Luigi"
// );
// click on third employee (same as first)
dom.click(document.querySelectorAll(".o_data_cell .o_m2o_avatar > img")[2]);
assert.containsN(
document.body,
".o-mail-ChatWindow-name",
2,
"should still have only 2 chat windows because third is the same partner as first"
);
assert.verifySteps(
[],
"employee should not have been read again because we already know its partner"
);
// // click on third employee (same as first)
// dom.click(document.querySelectorAll(".o_data_cell .o_m2o_avatar > img")[2]);
// assert.containsN(
// document.body,
// ".o-mail-ChatWindow-name",
// 2,
// "should still have only 2 chat windows because third is the same partner as first"
// );
// assert.verifySteps(
// [],
// "employee should not have been read again because we already know its partner"
// );
});
QUnit.test("many2one_avatar_employee widget in kanban view", async function (assert) {
@@ -158,10 +158,8 @@ QUnit.test(
});
await contains(".o_field_widget[name=employee_id] input", { value: "Mario" });
await dom.click(document.querySelector(".o_m2o_avatar > img"));
await contains(
".o_notification.border-info:contains(You can only chat with employees that have a dedicated user.)"
);
assert.verifySteps([`web_read m2x.avatar.employee ${avatarId}`]);
// Nothing should happen
}
);
@@ -218,12 +216,10 @@ QUnit.test("many2many_avatar_employee widget in form view", async function (asse
await dom.click(
document.querySelectorAll(".o_field_many2many_avatar_employee .o_tag .o_m2m_avatar")[1]
);
// TODO: avatar card employee
assert.verifySteps([
`web_read m2x.avatar.employee ${avatarId_1}`,
`read hr.employee.public ${employeeId_1}`,
`read hr.employee.public ${employeeId_2}`,
]);
await contains(".o-mail-ChatWindow-name", { count: 2 });
});
QUnit.test("many2many_avatar_employee widget in list view", async function (assert) {
@@ -265,21 +261,21 @@ QUnit.test("many2many_avatar_employee widget in list view", async function (asse
2,
"should have two avatar"
);
// TODO: avatar card employee
// // click on first employee badge
// dom.click(document.querySelector(".o_data_cell .o_m2m_avatar"));
// await contains(".o-mail-ChatWindow-name");
// assert.verifySteps([`read hr.employee.public ${employeeId_1}`]);
// assert.strictEqual(document.querySelector(".o-mail-ChatWindow-name").textContent, "Mario");
// click on first employee badge
dom.click(document.querySelector(".o_data_cell .o_m2m_avatar"));
await contains(".o-mail-ChatWindow-name");
assert.verifySteps([`read hr.employee.public ${employeeId_1}`]);
assert.strictEqual(document.querySelector(".o-mail-ChatWindow-name").textContent, "Mario");
// click on second employee
dom.click(document.querySelectorAll(".o_data_cell .o_m2m_avatar")[1]);
await contains(".o-mail-ChatWindow-name", { count: 2 });
assert.verifySteps([`read hr.employee.public ${employeeId_2}`]);
assert.strictEqual(
document.querySelectorAll(".o-mail-ChatWindow-name")[1].textContent,
"Yoshi"
);
// // click on second employee
// dom.click(document.querySelectorAll(".o_data_cell .o_m2m_avatar")[1]);
// await contains(".o-mail-ChatWindow-name", { count: 2 });
// assert.verifySteps([`read hr.employee.public ${employeeId_2}`]);
// assert.strictEqual(
// document.querySelectorAll(".o-mail-ChatWindow-name")[1].textContent,
// "Yoshi"
// );
});
QUnit.test("many2many_avatar_employee widget in kanban view", async function (assert) {
@@ -346,12 +342,9 @@ QUnit.test("many2many_avatar_employee widget in kanban view", async function (as
`/web/image/hr.employee.public/${employeeId_1}/avatar_128`
);
await dom.click(document.querySelectorAll(".o_kanban_record img.o_m2m_avatar")[1]);
await dom.click(document.querySelectorAll(".o_kanban_record img.o_m2m_avatar")[0]);
assert.verifySteps([
`read hr.employee.public ${employeeId_1}`,
`read hr.employee.public ${employeeId_2}`,
]);
await dom.click(document.querySelectorAll('.o_kanban_record img.o_m2m_avatar')[1]);
await dom.click(document.querySelectorAll('.o_kanban_record img.o_m2m_avatar')[0]);
// TODO: avatar card employee
});
QUnit.test(
@@ -400,14 +393,9 @@ QUnit.test(
await dom.click(
document.querySelectorAll(".o_field_many2many_avatar_employee .o_tag .o_m2m_avatar")[1]
);
await contains(
".o_notification.border-info:contains(You can only chat with employees that have a dedicated user.)"
);
assert.verifySteps([
`web_read m2x.avatar.employee ${employeeId_1}`,
`read hr.employee.public ${employeeId_1}`,
`read hr.employee.public ${employeeId_2}`,
]);
await contains(".o-mail-ChatWindow-name");
// TODO: avtar card employee
}
);
@@ -1,9 +1,8 @@
/* @odoo-module */
import { startServer } from "@bus/../tests/helpers/mock_python_environment";
import { start } from "@mail/../tests/helpers/test_utils";
import { patchWithCleanup, triggerEvent, getFixture, getNodesTextContent } from "@web/../tests/helpers/utils";
import { startServer } from "@bus/../tests/helpers/mock_python_environment";
import { click, patchWithCleanup, getFixture, getNodesTextContent } from "@web/../tests/helpers/utils";
import { registry } from "@web/core/registry";
import { browser } from "@web/core/browser/browser";
import { EventBus } from "@odoo/owl";
@@ -71,6 +70,7 @@ QUnit.module("M2XAvatarUser", ({ beforeEach }) => {
"email",
"phone",
"im_status",
"share",
"work_phone",
"work_email",
"job_title",
@@ -107,13 +107,12 @@ QUnit.module("M2XAvatarUser", ({ beforeEach }) => {
},
});
// Open card
await triggerEvent(target, ".o_m2o_avatar > img", "mouseover");
assert.verifySteps(["setTimeout of 350ms", "setTimeout of 250ms", "user read"]);
await click(document, ".o_m2o_avatar > img");
assert.verifySteps(["setTimeout of 250ms", "user read"]);
assert.containsOnce(target, ".o_avatar_card");
assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_card_user_infos > *")), ['Mario', 'sub manager', 'Managemment', ' Mario@odoo.pro', ' +585555555']);
assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_card_user_infos > *")), ['Mario', 'sub manager', 'Managemment', 'Mario@odoo.pro', '+585555555']);
// Close card
await triggerEvent(target, ".o_control_panel", "mouseover");
assert.verifySteps(["setTimeout of 400ms"]);
await click(document, ".o_action_manager");
assert.containsNone(target, ".o_avatar_card");
});
});