From f6d3aa452cbc616efb07ed90f23b6f5c2bfbd458 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Wed, 7 Apr 2021 23:34:51 +0200
Subject: [PATCH] Add attachment preview

issue10203
review332271014
---
 CHANGELOG        |   1 +
 src/sao.less     |  16 ++++++
 src/screen.js    |   6 +--
 src/tab.js       | 125 ++++++++++++++++++++++++++++++++++++++++++++++-
 src/view/form.js |   6 +--
 5 files changed, 145 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG b/CHANGELOG
index 06f59e32f3..2ada6f6d68 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,3 +1,4 @@
+* Add attachment preview
 * Support document widget
 * Support icon of type URL
 * Allow sending email with existing attachments
diff --git a/src/sao.less b/src/sao.less
index 77c34a59ca..f30d758c68 100644
--- a/src/sao.less
+++ b/src/sao.less
@@ -336,6 +336,15 @@ img.icon {
     overflow-y: auto;
 }
 
+@media screen and (max-width: @screen-sm-max) {
+    .attachment-preview:not(:empty) {
+        border-color: @panel-default-border;
+        border-style: solid;
+        border-width: 0 0 1px 0;
+        margin-bottom: 5px;
+    }
+}
+
 .list-form {
     overflow-y: auto;
     -moz-user-select: none;
@@ -654,6 +663,13 @@ img.icon {
             object-fit: scale-down;
             object-position: center top;
             width: 100%;
+            height: 75vh;
+            @media screen and (max-width: @screen-sm-max) {
+                height: 50vh;
+            }
+            @media screen and (max-width: @screen-xs-max) {
+                height: 25vh;
+            }
         }
     }
     label {
diff --git a/src/screen.js b/src/screen.js
index 54bd02d8e6..31e16d2b20 100644
--- a/src/screen.js
+++ b/src/screen.js
@@ -1133,11 +1133,11 @@
             }
 
             if (!jQuery.isEmptyObject(domain)) {
-                if (!jQuery.isEmptyObject(this.attributes.domain)) {
-                    domain = ['AND', domain, this.attributes.domain];
+                if (!jQuery.isEmptyObject(this.domain)) {
+                    domain = ['AND', domain, this.domain];
                 }
             } else {
-                domain = this.attributes.domain || [];
+                domain = this.domain;
             }
             if (this.screen_container.but_active.hasClass('active')) {
                 if (!jQuery.isEmptyObject(domain)) {
diff --git a/src/tab.js b/src/tab.js
index e3f1a3e8da..03ca2d8a18 100644
--- a/src/tab.js
+++ b/src/tab.js
@@ -119,9 +119,12 @@
             var toolbar = this.create_toolbar().appendTo(this.el);
             this.title = toolbar.find('.title');
 
-            this.content = jQuery('<div/>', {
-                'class': 'panel-body',
+            this.main = jQuery('<div/>', {
+                'class': 'panel-body row',
             }).appendTo(this.el);
+            this.content = jQuery('<div/>', {
+                'class': 'col-xs-12',
+            }).appendTo(this.main);
 
             if (this.info_bar) {
                 this.el.append(this.info_bar.el);
@@ -463,6 +466,8 @@
             this.info_bar = new Sao.Window.InfoBar();
             this.create_tabcontent();
 
+            this.attachment_screen = null;
+
             screen.message_callback = this.record_message.bind(this);
             screen.switch_callback = function() {
                 if (this === Sao.Tab.tabs.get_current()) {
@@ -709,6 +714,12 @@
                 .on('drop', this.attach_drop.bind(this));
             return toolbar;
         },
+        create_tabcontent: function() {
+            Sao.Tab.Form._super.create_tabcontent.call(this);
+            this.attachment_preview = jQuery('<div/>', {
+                'class': 'col-xs-12 attachment-preview',
+            }).prependTo(this.main);
+        },
         compare: function(attributes) {
             if (!attributes) {
                 return false;
@@ -1053,6 +1064,20 @@
                     this.refresh_resources(true);
                 }.bind(this));
             }.bind(this);
+            var preview = function() {
+                if (this.attachment_preview.children().length) {
+                    this.attachment_preview.empty();
+                    this.attachment_screen = null;
+                    this.attachment_preview.removeClass('col-md-4 col-md-push-8');
+                    this.content.removeClass('col-md-8 col-md-pull-4');
+                } else {
+                    this.attachment_preview.append(
+                        this._attachment_preview_el());
+                    this.refresh_attachment_preview();
+                    this.attachment_preview.addClass('col-md-4 col-md-push-8');
+                    this.content.addClass('col-md-8 col-md-pull-4');
+                }
+            }.bind(this);
             var dropdown = this.buttons.attach.parents('.dropdown');
             if (!evt) {
                 window.setTimeout(function() {
@@ -1108,6 +1133,17 @@
                         'href': '#',
                         'tabindex': -1,
                     }).text(Sao.i18n.gettext('Add...'))));
+                    menu.append(jQuery('<li/>', {
+                        'role': 'presentation',
+                    }).append(jQuery('<a/>', {
+                        'role': 'menuitem',
+                        'href': '#',
+                        'tabindex': -1,
+                    }).text(Sao.i18n.gettext("Preview"))
+                        .click(function(evt) {
+                            evt.preventDefault();
+                            preview();
+                        })));
                     menu.append(jQuery('<li/>', {
                         'role': 'presentation',
                     }).append(jQuery('<a/>', {
@@ -1196,6 +1232,87 @@
                 evt.dataTransfer.clearData();
             }
         },
+        _attachment_preview_el: function() {
+            var el = jQuery('<div/>', {
+                'class': 'text-center',
+            });
+            var buttons = jQuery('<div/>', {
+                'class': 'btn-group',
+            }).appendTo(el);
+
+            var but_prev = jQuery('<button/>', {
+                'class': 'btn btn-default btn-sm',
+                'type': 'button',
+                'tabindex': -1,
+                'aria-label': Sao.i18n.gettext("Previous"),
+                'title': Sao.i18n.gettext("Previous"),
+            }).append(Sao.common.ICONFACTORY.get_icon_img('tryton-back')
+            ).appendTo(buttons);
+
+            var label = jQuery('<span/>', {
+                'class': 'badge',
+            }).text('(0/0)').appendTo(jQuery('<span/>', {
+                'class': 'btn btn-sm btn-link',
+            }).appendTo(buttons));
+
+            var but_next = jQuery('<button/>', {
+                'class': 'btn btn-default btn-sm',
+                'type': 'button',
+                'tabindex': -1,
+                'aria-label': Sao.i18n.gettext("Next"),
+                'title': Sao.i18n.gettext("Next"),
+            }).append(Sao.common.ICONFACTORY.get_icon_img('tryton-forward')
+            ).appendTo(buttons);
+
+            var screen = new Sao.Screen('ir.attachment', {
+                'readonly': true,
+                'mode': ['form'],
+                'context': {
+                    'preview': true,
+                },
+            });
+            this.attachment_screen = screen;
+
+            but_prev.click(function() {
+                screen.display_previous();
+            });
+            but_next.click(function() {
+                screen.display_next();
+            });
+
+            screen.message_callback = function(data) {
+                var position = data[0];
+                var length = data[1];
+                var text = (position || '_') + '/' + length;
+                label.text(text).attr('title', text);
+                but_prev.prop('disabled', !position || position <= 1);
+                but_next.prop('disabled', !position || position >= length);
+            };
+
+            screen.switch_view().done(function() {
+                el.append(screen.screen_container.el);
+            });
+            return el;
+        },
+        refresh_attachment_preview: function(force) {
+            if (!this.attachment_screen) {
+                return;
+            }
+            var record = this.screen.current_record;
+            if (!record) {
+                return;
+            }
+            var resource = record.model.name + ',' + record.id;
+            var domain = [
+                ['resource', '=', resource],
+                ['type', '=', 'data'],
+            ];
+            if (!Sao.common.compare(this.attachment_screen.domain, domain) ||
+                force) {
+                this.attachment_screen.domain = domain;
+                this.attachment_screen.search_filter();
+            }
+        },
         note: function() {
             var record = this.screen.current_record;
             if (!record || (record.id < 0)) {
@@ -1247,6 +1364,9 @@
             } else {
                 this.update_resources();
             }
+            if (reload) {
+                this.refresh_attachment_preview(true);
+            }
         },
         update_resources: function(resources) {
             if (!resources) {
@@ -1333,6 +1453,7 @@
             }
             this.info_bar.message();
             // TODO activate_save
+            this.refresh_attachment_preview();
         },
         action: function() {
             window.setTimeout(function() {
diff --git a/src/view/form.js b/src/view/form.js
index 7cef6245d8..869e3206d8 100644
--- a/src/view/form.js
+++ b/src/view/form.js
@@ -709,9 +709,9 @@ function eval_pyson(value){
                 field = record.model.fields[this.attributes.name];
             }
             if (!((this.attributes.string === undefined) ||
-                this.attributes.string) && field) {
+                this.attributes.string)) {
                 var text = '';
-                if (record) {
+                if (field && record) {
                     text = field.get_client(record) || '';
                 }
                 this.label_el.text(text);
@@ -4096,8 +4096,6 @@ function eval_pyson(value){
             }).appendTo(this.el);
             if (attributes.height) {
                 this.object.css('height', parseInt(attributes.height, 10));
-            } else {
-                this.object.css('height', '50vh');
             }
             if (attributes.width) {
                 this.object.css('width', parseInt(attributes.width, 10));