From cc780b5974bd8113001fa7f2a65428d117ea3889 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Mon, 15 Oct 2018 16:15:01 +0000
Subject: [PATCH] [FIX] website: allow to add/remove tabs in the new "Tabs"
 snippet

closes odoo/odoo#27815
---
 .../static/src/js/editor/snippets.options.js  | 71 +++++++++++++++++--
 addons/website/views/snippets.xml             |  5 +-
 2 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 13532104449..56119c33e11 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -299,13 +299,7 @@ options.registry.navTabs = options.Class.extend({
      * @override
      */
     start: function () {
-        this.$navLinks = this.$target.find('.nav-link');
-        var $el = this.$target;
-        do {
-            $el = $el.parent();
-            this.$tabPanes = $el.find('.tab-pane');
-        } while (this.$tabPanes.length === 0 && !$el.is('body'));
-
+        this._findLinksAndPanes();
         return this._super.apply(this, arguments);
     },
     /**
@@ -321,10 +315,65 @@ options.registry.navTabs = options.Class.extend({
         this._generateUniqueIDs();
     },
 
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Creates a new tab and tab-pane.
+     *
+     * @see this.selectClass for parameters
+     */
+    addTab: function (previewMode, value, $opt) {
+        var $activeItem = this.$navLinks.filter('.active').parent();
+        var $activePane = this.$tabPanes.filter('.active');
+
+        var $navItem = $activeItem.clone();
+        var $navLink = $navItem.find('.nav-link').removeClass('active show');
+        var $tabPane = $activePane.clone().removeClass('active show');
+        $navItem.insertAfter($activeItem);
+        $tabPane.insertAfter($activePane);
+        this._findLinksAndPanes();
+        this._generateUniqueIDs();
+
+        $navLink.tab('show');
+    },
+    /**
+     * Removes the current active tab and its content.
+     *
+     * @see this.selectClass for parameters
+     */
+    removeTab: function (previewMode, value, $opt) {
+        var self = this;
+
+        var $activeLink = this.$navLinks.filter('.active');
+        var $activePane = this.$tabPanes.filter('.active');
+
+        var $next = this.$navLinks.eq((this.$navLinks.index($activeLink) + 1) % this.$navLinks.length);
+        $next.one('shown.bs.tab', function () {
+            $activeLink.parent().remove();
+            $activePane.remove();
+            self._findLinksAndPanes();
+            self._setActive(); // TODO forced to do this because we do not return deferred for options
+        });
+        $next.tab('show');
+    },
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * @private
+     */
+    _findLinksAndPanes: function () {
+        this.$navLinks = this.$target.find('.nav-link');
+        var $el = this.$target;
+        do {
+            $el = $el.parent();
+            this.$tabPanes = $el.find('.tab-pane');
+        } while (this.$tabPanes.length === 0 && !$el.is('body'));
+    },
     /**
      * @private
      */
@@ -344,6 +393,14 @@ options.registry.navTabs = options.Class.extend({
             });
         }
     },
+    /**
+     * @private
+     * @override
+     */
+    _setActive: function () {
+        this._super.apply(this, arguments);
+        this.$el.filter('[data-remove-tab]').toggleClass('d-none', this.$tabPanes.length <= 2);
+    },
 });
 
 options.registry.sizing_x = options.registry.sizing.extend({
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index c99668e4e16..eaea0a4bcea 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -1109,7 +1109,10 @@
         <a href="#" class="dropdown-item" data-remove-slide="true" data-no-preview="true"><i class="fa fa-trash-o"/>Remove Slide</a>
     </div>
 
-    <div data-js="navTabs" data-selector="section .row > div" data-target=".nav-tabs"/>
+    <div data-js="navTabs" data-selector="section .row > div" data-target=".nav-tabs">
+        <a href="#" class="dropdown-item" data-add-tab="1" data-no-preview="true"><i class="fa fa-plus"/>Add Tab</a>
+        <a href="#" class="dropdown-item" data-remove-tab="1" data-no-preview="true"><i class="fa fa-minus"/>Remove Tab</a>
+    </div>
 
     <!-- Parallax -->
     <div data-js="parallax" data-selector=".parallax">