[IMP] mail: emoji picker view no search content screen

Task-2976156

closes odoo/odoo#99700

Signed-off-by: Louis Wicket (wil) <wil@odoo.com>

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);

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;
+}

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>

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;

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>

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");
+            },
+        }),
+    },
+});

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',