[TASK] Add toggle button to hide unchecked items in tca tree

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>

[TASK] Add toggle button to hide unchecked items in tca tree
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>
d1b456b9 · Sascha Egerer · 67b664fc · d1b456b9
Commit d1b456b9 authored 8 years ago by Sascha Egerer
--- a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/Element/TreeToolbar.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/Element/TreeToolbar.js
@@ -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'
        };

        /**
@@ -45,6 +46,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
         *
@@ -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));
    };

    /**
@@ -149,6 +165,36 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/FormEngine/Eleme
        this.tree.update();
    };

+    /**
+     * 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
     *