From d41f6e768711213072cbe3e1f8d155e57f5d247b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Wed, 7 Sep 2022 09:59:10 +0000
Subject: [PATCH] [IMP] mail: emoji picker view no search content screen

Task-2976156

closes odoo/odoo#99700

Signed-off-by: Louis Wicket (wil) <wil@odoo.com>
---
 .../emoji_grid_search_no_content_view.js      | 21 +++++++++++++++++++
 .../emoji_grid_search_no_content_view.scss    |  5 +++++
 .../emoji_grid_search_no_content_view.xml     | 10 +++++++++
 .../emoji_grid_view/emoji_grid_view.scss      |  6 ------
 .../emoji_grid_view/emoji_grid_view.xml       |  3 ++-
 .../emoji_grid_no_search_content_view.js      | 19 +++++++++++++++++
 .../mail/static/src/models/emoji_grid_view.js | 10 +++++++++
 7 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.js
 create mode 100644 addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.scss
 create mode 100644 addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.xml
 create mode 100644 addons/mail/static/src/models/emoji_grid_no_search_content_view.js

diff --git a/addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.js b/addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.js
new file mode 100644
index 00000000000..688894cdeed
--- /dev/null
+++ b/addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.js
@@ -0,0 +1,21 @@
+/** @odoo-module **/
+
+import { registerMessagingComponent } from '@mail/utils/messaging_component';
+
+const { Component } = owl;
+
+export class EmojiGridSearchNoContentView extends Component {
+    /**
+     * @returns {EmojiGridSearchNoContentView}
+     */
+    get emojiGridSearchNoContentView() {
+        return this.props.record;
+    }
+}
+
+Object.assign(EmojiGridSearchNoContentView, {
+    props: { record: Object },
+    template: 'mail.EmojiGridSearchNoContentView',
+});
+
+registerMessagingComponent(EmojiGridSearchNoContentView);
diff --git a/addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.scss b/addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.scss
new file mode 100644
index 00000000000..366de627326
--- /dev/null
+++ b/addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.scss
@@ -0,0 +1,5 @@
+
+.o_EmojiGridSearchNoContentView_image {
+    filter: grayscale(1);
+    font-size: 5rem;
+}
diff --git a/addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.xml b/addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.xml
new file mode 100644
index 00000000000..1536c891aa0
--- /dev/null
+++ b/addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.EmojiGridSearchNoContentView" owl="1">
+        <div class="o_EmojiGridSearchNoContentView d-flex flex-column justify-content-center align-items-center w-100 h-100">
+            <div class="o_EmojiGridSearchNoContentView_image">😢</div>
+            <span class="o_EmojiGridSearchNoContentView_text text-muted" t-out="emojiGridSearchNoContentView.text"/>
+        </div>
+    </t>
+</templates>
diff --git a/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.scss b/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.scss
index a746a196e9c..2fad438ef90 100644
--- a/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.scss
+++ b/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.scss
@@ -2,12 +2,6 @@
 // Layout
 // ------------------------------------------------------------------
 
-.o_EmojiGridView {
-    display: grid;
-    grid-template-columns: repeat(9, 1fr);
-    text-align: center;
-}
-
 .o_EmojiGridView_container {
     height: auto;
     width: auto;
diff --git a/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml b/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml
index 80b1967130e..823b680b308 100644
--- a/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml
+++ b/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml
@@ -3,7 +3,8 @@
 
     <t t-name="mail.EmojiGridView" owl="1">
     <div class="o_EmojiGridView o_EmojiGridView_container" t-attf-style="--rowHeight: {{emojiGridView.rowHeight}}px; --itemWidth: {{emojiGridView.itemWidth}}px; height: {{emojiGridView.height}}; width: {{emojiGridView.width}};" t-on-scroll="emojiGridView.onScroll" t-ref="containerRef">
-        <div class="o_EmojiGridView_list" t-attf-style="height: {{emojiGridView.listHeight}}px; min-height: {{emojiGridView.listHeight}}px;" t-ref="listRef">
+        <EmojiGridSearchNoContentView t-if="emojiGridView.searchNoContentView" record="emojiGridView.searchNoContentView"/>
+        <div t-if="!emojiGridView.searchNoContentView" class="o_EmojiGridView_list" t-attf-style="height: {{emojiGridView.listHeight}}px; min-height: {{emojiGridView.listHeight}}px;" t-ref="listRef">
             <div t-if="emojiGridView.lastRenderedRowIndex >= emojiGridView.firstRenderedRowIndex" class="o_EmojiGridView_viewBlock" t-attf-style="top: {{emojiGridView.distanceFromTop}}px; width: {{emojiGridView.width}};" t-ref="viewBlockRef">
                 <EmojiGridRowView t-foreach="emojiGridView.renderedRows" t-as="row" t-key="row" record="row"/>
             </div>
diff --git a/addons/mail/static/src/models/emoji_grid_no_search_content_view.js b/addons/mail/static/src/models/emoji_grid_no_search_content_view.js
new file mode 100644
index 00000000000..ea9e418e33a
--- /dev/null
+++ b/addons/mail/static/src/models/emoji_grid_no_search_content_view.js
@@ -0,0 +1,19 @@
+/** @odoo-module **/
+
+import { registerModel } from '@mail/model/model_core';
+import { attr, one } from '@mail/model/model_field';
+
+registerModel({
+    name: 'EmojiGridNoSearchContentView',
+    fields: {
+        emojiGridViewOwner: one('EmojiGridView', {
+            identifying: true,
+            inverse: 'searchNoContentView',
+        }),
+        text: attr({
+            compute() {
+                return this.env._t("No emoji match your search");
+            },
+        }),
+    },
+});
diff --git a/addons/mail/static/src/models/emoji_grid_view.js b/addons/mail/static/src/models/emoji_grid_view.js
index 6c33a8554b3..a898807d9df 100644
--- a/addons/mail/static/src/models/emoji_grid_view.js
+++ b/addons/mail/static/src/models/emoji_grid_view.js
@@ -182,6 +182,16 @@ registerModel({
         scrollRecomputeCount: attr({
             default: 0,
         }),
+        searchNoContentView: one('EmojiGridNoSearchContentView', {
+            compute() {
+                if (this.emojiPickerViewOwner.emojiSearchBarView.currentSearch !== "" && this.rows.length === 0) {
+                    return {};
+                }
+                return clear();
+            },
+            inverse: 'emojiGridViewOwner',
+            isCausal: true,
+        }),
         searchRowRegistry: one('EmojiGridViewRowRegistry', {
             default: {},
             inverse: 'emojiGridViewOwnerAsSearch',