From 74c3104b4cbc89d0eeeac3327dc4d55315b0cf0d Mon Sep 17 00:00:00 2001 From: Romain Estievenart Date: Mon, 6 Mar 2023 12:02:26 +0000 Subject: [PATCH] [IMP] web: add the avatar icon on m2o/m2m_avatar_field autocomplete The goal of this commit is to add the avatar when a user use the autocomplete m2o/m2m_autocomplete liked to a m2o/m2m_avatar_field. Task-id: 3121207 Part-of: odoo/odoo#114400 --- .../web/static/src/views/fields/fields.scss | 7 +++++ .../many2many_tags_avatar_field.js | 15 +++-------- .../many2many_tags_avatar_field.xml | 1 - .../many2one_avatar/many2one_avatar_field.js | 5 +++- .../src/views/fields/relational_utils.js | 26 ++++++++++++++++--- .../src/views/fields/relational_utils.xml | 8 ++++++ 6 files changed, 44 insertions(+), 18 deletions(-) diff --git a/addons/web/static/src/views/fields/fields.scss b/addons/web/static/src/views/fields/fields.scss index 0e1681242b9..24324b616fa 100644 --- a/addons/web/static/src/views/fields/fields.scss +++ b/addons/web/static/src/views/fields/fields.scss @@ -18,3 +18,10 @@ color: inherit; } } + +.o_avatar_many2x_autocomplete > img{ + width: 19px; + height: 19px; + object-fit: cover; + margin-right: 4px; +} diff --git a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.js b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.js index baf3ef89b96..7e0a39319d1 100644 --- a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.js +++ b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.js @@ -3,18 +3,18 @@ import { isMobileOS } from "@web/core/browser/feature_detection"; import { usePopover } from "@web/core/popover/popover_hook"; import { registry } from "@web/core/registry"; -import { Many2XAutocomplete } from "@web/views/fields/relational_utils"; import { many2ManyTagsField, Many2ManyTagsField, } from "@web/views/fields/many2many_tags/many2many_tags_field"; import { TagsList } from "../many2many_tags/tags_list"; -import { onMounted, useRef, useState } from "@odoo/owl"; +import { onMounted, useState } from "@odoo/owl"; +import { AvatarMany2XAutocomplete } from "@web/views/fields/relational_utils"; export class Many2ManyTagsAvatarField extends Many2ManyTagsField { static template = "web.Many2ManyTagsAvatarField"; static components = { - Many2XAutocomplete, + Many2XAutocomplete: AvatarMany2XAutocomplete, TagsList, }; static props = { @@ -100,7 +100,6 @@ export class KanbanMany2ManyTagsAvatarFieldTagsList extends TagsList { setup() { super.setup(); this.popover = usePopover(); - this.emptyAvatar = useRef("emptyAvatar"); } get visibleTagsCount() { return this.props.itemsVisible; @@ -116,8 +115,6 @@ export class KanbanMany2ManyTagsAvatarFieldTagsList extends TagsList { if (this.closePopoverFn) { this.closePopover(); } - this.emptyAvatar.el?.dispatchEvent(new MouseEvent("mouseleave")); - this.emptyAvatar.el?.removeAttribute("data-tooltip-template"); this.closePopoverFn = this.popover.add( ev.currentTarget.parentElement, Many2ManyTagsAvatarFieldPopover, @@ -130,12 +127,6 @@ export class KanbanMany2ManyTagsAvatarFieldTagsList extends TagsList { }, { position: "bottom", - onClose: () => { - this.emptyAvatar.el?.setAttribute( - "data-tooltip-template", - "web.TagsList.Tooltip" - ); - }, } ); } diff --git a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml index 9ee33498cb3..35219e70e0c 100644 --- a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml +++ b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml @@ -31,7 +31,6 @@ t-on-click.stop.prevent="openPopover" class="o_m2m_avatar rounded-circle align-self-center"/> - emptyAvatar openPopover diff --git a/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.js b/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.js index c5ca248d230..f698239a0a9 100644 --- a/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.js +++ b/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.js @@ -6,6 +6,7 @@ import { usePopover } from "@web/core/popover/popover_hook"; import { many2OneField, Many2OneField } from "../many2one/many2one_field"; import { Component, onMounted } from "@odoo/owl"; +import { AvatarMany2XAutocomplete } from "@web/views/fields/relational_utils"; export class Many2OneAvatarField extends Component { static template = "web.Many2OneAvatarField"; @@ -32,12 +33,14 @@ export const many2OneAvatarField = { ...many2OneField, component: Many2OneAvatarField, }; - export class Many2OneFieldPopover extends Many2OneField { static props = { ...Many2OneField.props, close: { type: Function }, }; + static components = { + Many2XAutocomplete: AvatarMany2XAutocomplete, + }; setup() { super.setup(); onMounted(() => this.focusInput()); diff --git a/addons/web/static/src/views/fields/relational_utils.js b/addons/web/static/src/views/fields/relational_utils.js index 95285aae247..9daa8d8e493 100644 --- a/addons/web/static/src/views/fields/relational_utils.js +++ b/addons/web/static/src/views/fields/relational_utils.js @@ -226,6 +226,12 @@ export class Many2XAutocomplete extends Component { this.props.update([record], params); } + mapRecordToOption(result) { + return { + value: result[0], + label: result[1].split("\n")[0], + }; + } async loadOptionsSource(request) { if (this.lastProm) { this.lastProm.abort(false); @@ -239,10 +245,7 @@ export class Many2XAutocomplete extends Component { }); const records = await this.lastProm; - const options = records.map((result) => ({ - value: result[0], - label: result[1].split("\n")[0], - })); + const options = records.map((result) => this.mapRecordToOption(result)); if (this.props.quickCreate && request.length) { options.push({ @@ -383,6 +386,21 @@ Many2XAutocomplete.defaultProps = { context: {}, }; +export class AvatarMany2XAutocomplete extends Many2XAutocomplete { + mapRecordToOption(result) { + return { + ...super.mapRecordToOption(result), + resModel: this.props.resModel, + }; + } + get optionsSource() { + return { + ...super.optionsSource, + optionTemplate: "web.AvatarMany2XAutocomplete", + }; + } +} + export function useOpenMany2XRecord({ resModel, onRecordSaved, diff --git a/addons/web/static/src/views/fields/relational_utils.xml b/addons/web/static/src/views/fields/relational_utils.xml index 22c07c1e932..fba0cd9d69b 100644 --- a/addons/web/static/src/views/fields/relational_utils.xml +++ b/addons/web/static/src/views/fields/relational_utils.xml @@ -57,4 +57,12 @@ + + + + + + +