[TASK] Add toggle button to hide unchecked items in tca tree 65/49765/4
authorSascha Egerer <sascha@sascha-egerer.de>
Fri, 2 Sep 2016 15:17:19 +0000 (17:17 +0200)
committerSascha Egerer <sascha@sascha-egerer.de>
Sat, 3 Sep 2016 10:13:06 +0000 (12:13 +0200)
The select field of type tree can be very complex if you have many
records with many levels. It's really hard to see which elements
are selected in the tree.

Therefore a filter button is added to only show selected pages.

Resolves: #77791
Releases: master
Change-Id: If52467f0777c25468ba9222a184e5234f2bff371
Reviewed-on: https://review.typo3.org/49765
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Bamboo TYPO3com <info@typo3.com>
Reviewed-by: Alexander Stehlik <alexander.stehlik@gmail.com>
Tested-by: Alexander Stehlik <alexander.stehlik@gmail.com>
Reviewed-by: Sascha Egerer <sascha@sascha-egerer.de>
Tested-by: Sascha Egerer <sascha@sascha-egerer.de>
typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/Element/TreeToolbar.js

index 87df1e9..df6f53d 100644 (file)
@@ -28,7 +28,8 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/FormEngine/Eleme
             toolbarSelector: '.tree-toolbar',
             collapseAllBtn: '.collapse-all-btn',
             expandAllBtn: '.expand-all-btn',
-            searchInput: '.search-input'
+            searchInput: '.search-input',
+            toggleHideUnchecked: '.hide-unchecked-btn'
         };
 
         /**
@@ -46,6 +47,14 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/FormEngine/Eleme
         this.tree = null;
 
         /**
+         * State of the hide unchecked toggle button
+         *
+         * @type {boolean}
+         * @private
+         */
+        this._hideUncheckedState = false;
+
+        /**
          * Toolbar template
          *
          * @type {jQuery}
@@ -62,6 +71,9 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/FormEngine/Eleme
                 '<div class="btn-group">' +
                     '<button type="button" class="btn btn-default collapse-all-btn" title="' + TYPO3.lang['tcatree.collapseAll'] + '"></button>' +
                 '</div>' +
+                '<div class="btn-group">' +
+                    '<button type="button" class="btn btn-default hide-unchecked-btn" title="' + TYPO3.lang['tcatree.toggleHideUnchecked'] + '"></button>' +
+                '</div>' +
             '</div>'
         )
     };
@@ -102,12 +114,16 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/FormEngine/Eleme
         Icons.getIcon('apps-pagetree-category-collapse-all', Icons.sizes.small).done(function(icon) {
             $toolbar.find('.collapse-all-btn').append(icon);
         });
+        Icons.getIcon('actions-document-select', Icons.sizes.small).done(function(icon) {
+            $toolbar.find('.hide-unchecked-btn').append(icon);
+        });
 
         $toolbar.find(this.settings.collapseAllBtn).on('click', this.collapseAll.bind(this));
         $toolbar.find(this.settings.expandAllBtn).on('click', this.expandAll.bind(this));
         $toolbar.find(this.settings.searchInput).on('input', function () {
             me.search.call(me, this);
         });
+        $toolbar.find(this.settings.toggleHideUnchecked).on('click', this.toggleHideUnchecked.bind(this));
     };
 
     /**
@@ -150,6 +166,36 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/FormEngine/Eleme
     };
 
     /**
+     * Show only checked items
+     *
+     * @param {HTMLElement} input
+     */
+    TreeToolbar.prototype.toggleHideUnchecked = function (input) {
+        var me = this;
+
+        this._hideUncheckedState = !this._hideUncheckedState;
+
+        if (this._hideUncheckedState) {
+            this.tree.rootNode.eachBefore(function (node, i) {
+                if (node.data.checked) {
+                    me.showParents(node);
+                    node.open = true;
+                    node.hidden = false;
+                } else {
+                    node.hidden = true;
+                    node.open = false;
+                }
+            });
+        } else {
+            this.tree.rootNode.eachBefore(function (node, i) {
+                node.hidden = false;
+            });
+        }
+        this.tree.prepareDataForVisibleNodes();
+        this.tree.update();
+    };
+
+    /**
      * Finds and show all parents of node
      *
      * @param {Node} node