From 0bf3a1dac331e48d9bb6898efd5a1fb882955229 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Theys?= <seb@odoo.com>
Date: Fri, 1 Jul 2022 13:06:12 +0000
Subject: [PATCH] [IMP] mail: move attachment viewer widget to community
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This will allow to reduce overrides in enterprise, and we want to display the
feature in community soon as well.

Part of task-2871070

closes odoo/odoo#95085

Related: odoo/enterprise#29036
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 addons/mail/__manifest__.py                   |   1 +
 .../attachment_viewer/attachment_viewer.js    | 123 ++++++++++++++++++
 .../attachment_viewer/attachment_viewer.scss  |  58 +++++++++
 .../attachment_viewer/attachment_viewer.xml   |  24 ++++
 4 files changed, 206 insertions(+)
 create mode 100644 addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.js
 create mode 100644 addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.scss
 create mode 100644 addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.xml

diff --git a/addons/mail/__manifest__.py b/addons/mail/__manifest__.py
index b59cf1fad0b..89e17099b8b 100644
--- a/addons/mail/__manifest__.py
+++ b/addons/mail/__manifest__.py
@@ -162,6 +162,7 @@
         'web.assets_qweb': [
             'mail/static/src/xml/*.xml',
             'mail/static/src/components/*/*.xml',
+            'mail/static/src/widgets/*/*.xml',
         ],
     },
     'license': 'LGPL-3',
diff --git a/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.js b/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.js
new file mode 100644
index 00000000000..9f8ae7617be
--- /dev/null
+++ b/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.js
@@ -0,0 +1,123 @@
+/** @odoo-module **/
+
+import { replace } from '@mail/model/model_field_command';
+
+import core from 'web.core';
+import Widget from 'web.Widget';
+import { hidePDFJSButtons } from '@web/legacy/js/libs/pdfjs';
+
+const QWeb = core.qweb;
+
+export const AttachmentViewer = Widget.extend({
+    className: 'o_attachment_preview_container',
+    events: {
+        'click .arrow.o_move_next': '_onClickNext',
+        'click .arrow.o_move_previous': '_onClickPrevious',
+    },
+    /**
+     * @constructor
+     * @override
+     * @param {Widget} parent
+     * @param {Thread} thread
+     */
+    init(parent, thread) {
+        this._super.apply(this, arguments);
+        this.thread = thread;
+        this.attachments = this.thread.attachmentsInWebClientView;
+        this._setActive();
+    },
+    /**
+     * Render attachment.
+     *
+     * @override
+     */
+    start() {
+        this._renderAttachment();
+        return this._super.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Update attachments list and activeAttachment.
+
+     * @param {Thread} thread
+     */
+    updateContents(thread) {
+        this.thread = thread;
+        this.attachments = this.thread.attachmentsInWebClientView;
+        this._setActive();
+        this._renderAttachment();
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Render template
+     *
+     * @private
+     */
+    _renderAttachment() {
+        this.$el.empty();
+        this.$el.append(QWeb.render('mail.widgets.AttachmentViewer', { thread: this.thread }));
+        if (this.thread.mainAttachment && this.thread.mainAttachment.isPdf) {
+            hidePDFJSButtons(this.el);
+        }
+    },
+
+    /**
+     * @private
+     */
+    _setActive() {
+        if (!this.thread.mainAttachment && this.thread.attachmentsInWebClientView.length > 0) {
+            this._switch_main_attachment(0);
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+    * Sets the attachment at position index as the new main attachment of
+    * the related model, and display it.
+    **/
+    async _switch_main_attachment(index) {
+        this.thread.update({ mainAttachment: replace(this.thread.attachmentsInWebClientView[index]) });
+        await this._rpc({
+            model: 'ir.attachment',
+            method: 'register_as_main_attachment',
+            args: [[this.thread.mainAttachment['id']]],
+        });
+        this._renderAttachment();
+    },
+
+    /**
+     * On click move to next attachment.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickNext(ev) {
+        ev.preventDefault();
+        var index = _.findIndex(this.thread.attachmentsInWebClientView, this.thread.mainAttachment);
+        index = index === this.thread.attachmentsInWebClientView.length - 1 ? 0 : index + 1;
+        this._switch_main_attachment(index);
+    },
+    /**
+     * On click move to previous attachment.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickPrevious(ev) {
+        ev.preventDefault();
+        var index = _.findIndex(this.thread.attachmentsInWebClientView, this.thread.mainAttachment);
+        index = index === 0 ? this.thread.attachmentsInWebClientView.length - 1 : index - 1;
+        this._switch_main_attachment(index);
+    },
+});
diff --git a/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.scss b/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.scss
new file mode 100644
index 00000000000..12f6257e59d
--- /dev/null
+++ b/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.scss
@@ -0,0 +1,58 @@
+.modal {
+    @include media-breakpoint-up(xxl, $o-extra-grid-breakpoints) {
+        .o_attachment_preview {
+            width: 300px;
+        }
+    }
+}
+
+@include media-breakpoint-up(xxl, $o-extra-grid-breakpoints) {
+    .o_attachment_preview {
+        display: block;
+        flex: 1 0 auto;
+        overflow: hidden;
+        width: $o-chatter-min-width;
+        border-left: 1px solid gray('400');
+
+        > .o_attachment_preview_container {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            .arrow {
+                width: 5%;
+                @include o-position-absolute(50%, 0);
+                @include o-viewer-black-btn;
+                transition: width 0.3s;
+                padding-top: 30px;
+                height: 75px;
+                &:hover {
+                    width: 7%;
+                }
+                &.o_move_previous {
+                    left: 2px;
+                    right: 0px;
+                }
+            }
+            > iframe {
+                width: 100%;
+                height: 100%;
+            }
+            > .o_attachment_preview_img {
+                position: absolute;
+                overflow: auto;
+                width: 100%;
+                height: 100%;
+                > img {
+                    margin: auto;
+                    box-shadow: 0px 0px 5px rgba(41, 41, 41, 0.43);
+                }
+            }
+        }
+    }
+}
+
+@include media-breakpoint-down(xl, $o-extra-grid-breakpoints) {
+    .o_attachment_preview {
+        display: none;
+    }
+}
diff --git a/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.xml b/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.xml
new file mode 100644
index 00000000000..f93377cd54f
--- /dev/null
+++ b/addons/mail/static/src/widgets/attachment_viewer/attachment_viewer.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+
+    <t t-name="mail.widgets.AttachmentViewer">
+        <t t-if="thread.mainAttachment">
+            <t t-if="!thread.mainAttachment.isPdf">
+                <h3 class="mt0 mb8 pl-2 text-muted float-end"><t t-esc="thread.mainAttachment.filename"/></h3>
+            </t>
+            <div t-if="thread.mainAttachment.isImage" class="o_attachment_preview_img">
+                <img id="attachment_img" class="img img-fluid d-block" t-attf-src="/web/image/#{thread.mainAttachment.id}?unique=1"/>
+            </div>
+            <iframe t-if="thread.mainAttachment.isPdf" class="mb48" t-attf-src="/web/static/lib/pdfjs/web/viewer.html?file=/web/content/#{thread.mainAttachment.id}?filename%3D#{window.encodeURIComponent(thread.mainAttachment.name)}"/>
+            <t t-if="thread.attachmentsInWebClientView.length > 1">
+                <a class="arrow o_move_previous text-center" href="#">
+                    <span class="fa fa-chevron-left"/>
+                </a>
+                <a class="arrow o_move_next text-center" href="#">
+                    <span class="fa fa-chevron-right"/>
+                </a>
+            </t>
+        </t>
+    </t>
+
+</templates>