[IMP] mrp: added support embedded google slide on work center

This commit adds new `embed_viewer` widget which will be used display URLs
via embedded iframes.  You can add any valid URL to display page via iframe,
although widget automatically converts raw google slide URL into embedded URL.

Task ID: 1909010

closes odoo/odoo#29404

Signed-off-by: Simon Lejeune (sle) <sle@openerp.com>


Co-authored-by: pga-odoo <pga@odoo.com>

2 files changed, 133 insertions, 1 deletions

diff --git a/addons/mrp/static/src/js/mrp.js b/addons/mrp/static/src/js/mrp.js
index 8843d9ab3cd..22abd2b0d91 100644
--- a/addons/mrp/static/src/js/mrp.js
+++ b/addons/mrp/static/src/js/mrp.js
@@ -3,6 +3,7 @@ odoo.define('mrp.mrp_state', function (require) {
 
 var AbstractField = require('web.AbstractField');
 var core = require('web.core');
+var fields = require('web.basic_fields');
 var field_registry = require('web.field_registry');
 var time = require('web.time');
 
@@ -125,8 +126,131 @@ var TimeCounter = AbstractField.extend({
     },
 });
 
+var FieldEmbedURLViewer = fields.FieldChar.extend({
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    init: function () {
+        this._super.apply(this, arguments);
+        this.page = 1;
+        this.srcDirty = false;
+    },
+
+    /**
+     * force to set 'src' for embed iframe viewer when its value has changed
+     *
+     * @override
+     *
+     */
+    reset: function () {
+        this._super.apply(this, arguments);
+        this._updateIframePreview();
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Initializes and returns an iframe for the viewer
+     *
+     * @private
+     * @returns {jQueryElement}
+     */
+    _prepareIframe: function () {
+        return $('<iframe>', {
+            class: 'o_embed_iframe d-none',
+            allowfullscreen: true,
+        });
+    },
+
+    /**
+     * @override
+     * @private
+     */
+    _renderEdit: function () {
+        if (!this.$('iframe.o_embed_iframe').length) {
+            this.$input = this.$el;
+            this.setElement(this.$el.wrap('<div class="o_embed_url_viewer o_field_widget"/>').parent());
+            this.$el.append(this._prepareIframe());
+        }
+        this._prepareInput(this.$input);
+
+        // Do not set iframe src if widget is invisible
+        if (!this.record.evalModifiers(this.attrs.modifiers).invisible) {
+            this._updateIframePreview();
+        } else {
+            this.srcDirty = true;
+        }
+    },
+    /**
+     * @override
+     * @private
+     */
+    _renderReadonly: function () {
+        if (!this.$('iframe.o_embed_iframe').length) {
+            this.$el.addClass('o_embed_url_viewer');
+            this.$el.append(this._prepareIframe());
+        }
+        this._updateIframePreview();
+    },
+    /**
+     * Set the associated src for embed iframe viewer
+     *
+     * @private
+     * @returns {string} source of the google slide
+     */
+    _getEmbedSrc: function () {
+        var src = false;
+        if (this.value) {
+            // check given google slide url is valid or not
+            var googleRegExp = /(^https:\/\/docs.google.com).*(\/d\/e\/|\/d\/)([A-Za-z0-9-_]+)/;
+            var google = this.value.match(googleRegExp);
+            if (google && google[3]) {
+                src = 'https://docs.google.com/presentation' + google[2] + google[3] + '/preview?slide=' + this.page;
+            }
+        }
+        return src || this.value;
+    },
+    /**
+     * update iframe attrs
+     *
+     * @private
+     */
+    _updateIframePreview: function () {
+        var $iframe = this.$('iframe.o_embed_iframe');
+        var src = this._getEmbedSrc();
+        $iframe.toggleClass('d-none', !src);
+        if (src) {
+            $iframe.attr('src', src);
+        } else {
+            $iframe.removeAttr('src');
+        }
+    },
+    /**
+     * Listen to modifiers updates to and only render iframe when it is necessary
+     *
+     * @override
+     */
+    updateModifiersValue: function () {
+        this._super.apply(this, arguments);
+        if (!this.attrs.modifiersValue.invisible && this.srcDirty) {
+            this._updateIframePreview();
+            this.srcDirty = false;
+        }
+    },
+});
+
+
 field_registry
     .add('bullet_state', SetBulletStatus)
-    .add('mrp_time_counter', TimeCounter);
+    .add('mrp_time_counter', TimeCounter)
+    .add('embed_viewer', FieldEmbedURLViewer);
 
+return FieldEmbedURLViewer;
 });
diff --git a/addons/mrp/static/src/scss/mrp_fields.scss b/addons/mrp/static/src/scss/mrp_fields.scss
new file mode 100644
index 00000000000..606e32f4d94
--- /dev/null
+++ b/addons/mrp/static/src/scss/mrp_fields.scss
@@ -0,0 +1,8 @@
+.o_field_widget.o_embed_url_viewer{
+    width: 100% !important;
+    iframe {
+        width: 100%;
+        height: 30rem;
+        border: none;
+    }
+}
\ No newline at end of file