From 12326de30fe8f12e9a6ce8d6e78fa3be3d2cb872 Mon Sep 17 00:00:00 2001
From: Thanh Dodeur <tso@odoo.com>
Date: Thu, 16 Jun 2022 08:43:23 +0000
Subject: [PATCH] [REF] mail: create `CallSidebarView` component and model

Move the sideBar part of the `CallView` to its new model and component.

part of task-2692836

Part-of: odoo/odoo#94035
---
 .../call_sidebar_view/call_sidebar_view.js    | 26 ++++++++++++++
 .../call_sidebar_view/call_sidebar_view.scss  | 32 +++++++++++++++++
 .../call_sidebar_view/call_sidebar_view.xml   | 17 +++++++++
 .../src/components/call_view/call_view.scss   | 36 ++++---------------
 .../src/components/call_view/call_view.xml    | 13 +++----
 .../static/src/models/call_sidebar_view.js    | 16 +++++++++
 addons/mail/static/src/models/call_view.js    | 13 +++++++
 7 files changed, 115 insertions(+), 38 deletions(-)
 create mode 100644 addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.js
 create mode 100644 addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.scss
 create mode 100644 addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.xml
 create mode 100644 addons/mail/static/src/models/call_sidebar_view.js

diff --git a/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.js b/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.js
new file mode 100644
index 00000000000..27fb9b28b64
--- /dev/null
+++ b/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.js
@@ -0,0 +1,26 @@
+/** @odoo-module **/
+
+import { registerMessagingComponent } from '@mail/utils/messaging_component';
+
+const { Component } = owl;
+
+export class CallSidebarView extends Component {
+
+    //--------------------------------------------------------------------------
+    // Getters / Setters
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {CallSidebarView}
+     */
+    get callSidebarView() {
+        return this.props.record;
+    }
+}
+
+Object.assign(CallSidebarView, {
+    props: { record: Object },
+    template: 'mail.CallSidebarView',
+});
+
+registerMessagingComponent(CallSidebarView);
diff --git a/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.scss b/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.scss
new file mode 100644
index 00000000000..af1ba2065a0
--- /dev/null
+++ b/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.scss
@@ -0,0 +1,32 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_CallSidebarView {
+    width: 120px;
+    min-width: 120px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    &::-webkit-scrollbar {
+        width: 0.3vw;
+    }
+}
+
+.o_CallSidebarView_participantCard {
+    aspect-ratio: 16/9;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_CallSidebarView {
+
+    &::-webkit-scrollbar {
+        background: gray('900');
+    }
+    &::-webkit-scrollbar-thumb {
+        background: gray('700');
+    }
+}
diff --git a/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.xml b/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.xml
new file mode 100644
index 00000000000..f2ff5d9e424
--- /dev/null
+++ b/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="mail.CallSidebarView" owl="1">
+    <t t-if="callSidebarView">
+        <div class="o_CallSidebarView d-flex align-items-center h-100 flex-column">
+            <t t-foreach="callSidebarView.callView.tileParticipantCards" t-as="participantCard" t-key="participantCard.localId">
+                <CallParticipantCard
+                    className="'o_CallSidebarView_participantCard w-100'"
+                    record="participantCard"
+                />
+            </t>
+        </div>
+    </t>
+</t>
+
+</templates>
diff --git a/addons/mail/static/src/components/call_view/call_view.scss b/addons/mail/static/src/components/call_view/call_view.scss
index 81d005aa5d3..26daaf4ec43 100644
--- a/addons/mail/static/src/components/call_view/call_view.scss
+++ b/addons/mail/static/src/components/call_view/call_view.scss
@@ -16,27 +16,13 @@
 }
 
 .o_CallView_grid {
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden;
 
-    &::-webkit-scrollbar {
-        width: 0.3vw;
-    }
-
-    &.o-isTiled {
-        overflow-y: hidden;
-
-        .o_CallView_participantCard {
-            width: var(--width);
-            height: var(--height);
-            min-width: var(--width);
-            min-height: var(--height);
-        }
-    }
-
-    &.o-isSidebar {
-        width: 120px;
-        min-width: 120px;
+    .o_CallView_participantCard {
+        width: var(--width);
+        height: var(--height);
+        min-width: var(--width);
+        min-height: var(--height);
     }
 }
 
@@ -55,16 +41,6 @@
 // Style
 // ------------------------------------------------------------------
 
-.o_CallView_grid {
-
-    &::-webkit-scrollbar {
-        background: gray('900');
-    }
-    &::-webkit-scrollbar-thumb {
-        background: gray('700');
-    }
-}
-
 .o_CallView_mainParticipantContainer {
     background-color: black;
 }
diff --git a/addons/mail/static/src/components/call_view/call_view.xml b/addons/mail/static/src/components/call_view/call_view.xml
index c8bf9b9a526..7faaba57d87 100644
--- a/addons/mail/static/src/components/call_view/call_view.xml
+++ b/addons/mail/static/src/components/call_view/call_view.xml
@@ -17,15 +17,13 @@
                             <i t-else="" class="o_CallView_sidebarButton position-absolute fa fa-arrow-left" title="Show sidebar" t-on-click="callView.onClickShowSidebar"/>
                         </t>
                     </div>
+                    <t t-if="callView.callSidebarView">
+                        <CallSidebarView record="callView.callSidebarView"/>
+                    </t>
                 </t>
-                <t t-if="callView.tileParticipantCards.length > 0">
+                <t t-elif="callView.tileParticipantCards.length > 0">
                     <div
-                        class="o_CallView_grid d-flex align-items-center h-100"
-                        t-att-class="{
-                            'o-isTiled flex-wrap justify-content-center w-100': !callView.mainParticipantCard,
-                            'flex-column': callView.mainParticipantCard,
-                            'o-isSidebar': callView.hasSidebar and callView.mainParticipantCard,
-                        }"
+                        class="o_CallView_grid d-flex align-items-center h-100 w-100 flex-wrap justify-content-center"
                         t-ref="tileContainer"
                         t-attf-style="--height:{{callView.tileHeight}}px; --width:{{callView.tileWidth}}px;"
                     >
@@ -34,7 +32,6 @@
                                 <!-- maybe filter focused partner out? -->
                                 <CallParticipantCard
                                     className="'o_CallView_participantCard o_CallView_gridTile'"
-                                    classNameObj="{ 'w-100' : callView.hasSidebar and callView.mainParticipantCard }"
                                     record="participantCard"
                                 />
                             </t>
diff --git a/addons/mail/static/src/models/call_sidebar_view.js b/addons/mail/static/src/models/call_sidebar_view.js
new file mode 100644
index 00000000000..5b5385c3db3
--- /dev/null
+++ b/addons/mail/static/src/models/call_sidebar_view.js
@@ -0,0 +1,16 @@
+/** @odoo-module **/
+
+import { registerModel } from '@mail/model/model_core';
+import { one } from '@mail/model/model_field';
+
+registerModel({
+    name: 'CallSidebarView',
+    identifyingFields: ['callView'],
+    fields: {
+        callView: one('CallView', {
+            inverse: 'callSidebarView',
+            required: true,
+            readonly: true,
+        })
+    },
+});
diff --git a/addons/mail/static/src/models/call_view.js b/addons/mail/static/src/models/call_view.js
index b9245d83b9e..8d4b8608725 100644
--- a/addons/mail/static/src/models/call_view.js
+++ b/addons/mail/static/src/models/call_view.js
@@ -180,6 +180,13 @@ registerModel({
             // if we are in minimized mode (round avatar frames), we treat the cards like squares.
             return this.isMinimized ? 1 : aspectRatio;
         },
+        /**
+         * @private
+         */
+        _computeCallSideBarView() {
+            const willShowSidebar = this.hasSidebar;
+            return  willShowSidebar ? insertAndReplace() : clear();
+        },
         /**
          * @private
          */
@@ -321,6 +328,12 @@ registerModel({
             default: 16 / 9,
             compute: '_computeAspectRatio',
         }),
+        callSidebarView: one('CallSidebarView', {
+            compute: '_computeCallSideBarView',
+            inverse: 'callView',
+            isCausal: true,
+            readonly: true,
+        }),
         tileContainerRef: attr(),
         /**
          * Determines whether we only display the videos or all the participants