Merge pull request #56 from exadel-inc/bugfix/ERM-45

[ERM-45] Add Expand All functionality for content tree

Author: abarmina

ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/css/console-ui.checkboxlist.css

@@ -43,9 +43,10 @@
     }
 }
 
-.rollout-manager-select-all {
+.rollout-manager-select-all,
+.rollout-manager-expand {
     font-size: small;
-    min-width: 86px;
+    min-width: 100px;
 }
 
 .rollout-manager-coral-accordion-item-content {
@@ -75,7 +76,7 @@
     .coral3-Dialog-wrapper,
     ._coral-Dialog {
         width: 800px;
-        height: 566px;
+        height: 70vh;
     }
 
     .coral3-Checkbox {
@@ -164,13 +165,4 @@
     ._coral-Accordion-itemIndicator {
         top: 19px;
     }
-
-    ._coral-Accordion-item .rollout-manager-coral-accordion-item-content {
-        visibility: hidden;
-        height: 0;
-    }
-
-    ._coral-Accordion-item.is-open > .rollout-manager-coral-accordion-item-content {
-        height: auto;
-    }
 }

ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/js/console-ui.dialog.js

@@ -107,8 +107,10 @@
     const CANCEL_LABEL = Granite.I18n.get('Cancel');
     const DIALOG_LABEL = Granite.I18n.get('Rollout');
     const ROLLOUT_AND_PUBLISH_LABEL = Granite.I18n.get('Rollout and Publish');
-    const SELECT_ALL_LABEL = Granite.I18n.get('Select all');
-    const UNSELECT_ALL_LABEL = Granite.I18n.get('Unselect all');
+    const EXPAND_ALL = Granite.I18n.get('Expand All');
+    const COLLAPSE_ALL = Granite.I18n.get('Collapse All');
+    const SELECT_ALL_LABEL = Granite.I18n.get('Select All');
+    const UNSELECT_ALL_LABEL = Granite.I18n.get('Unselect All');
     const TARGET_PATHS_LABEL = Granite.I18n.get('Target paths');
     const ROLLOUT_SCOPE_LABEL = Granite.I18n.get('Rollout scope');
     const INCLUDE_SUBPAGES_LABEL = Granite.I18n.get('Include subpages');
@@ -138,6 +140,10 @@
             .text(SELECT_ALL_LABEL)
             .appendTo($span);
         $span.appendTo(sourceElement);
+        $('<button is="coral-button" variant="quiet" class="rollout-manager-expand">')
+            .text(COLLAPSE_ALL)
+            .appendTo($span);
+        $span.appendTo(sourceElement);
     }
 
     function appendRolloutScope(sourceElement) {
@@ -147,7 +153,7 @@
 
     function initNestedAccordion(currentCheckbox, liveCopiesJsonArray) {
         const $accordion = $('<coral-accordion variant="quiet">');
-        const $accordionItem = $('<coral-accordion-item>');
+        const $accordionItem = $('<coral-accordion-item selected>');
         const $accordionItemLabel = $('<coral-accordion-item-label>');
 
         currentCheckbox.appendTo($accordionItemLabel);
@@ -231,6 +237,13 @@
         onCheckboxChange(submitBtn);
     }
 
+    function onExpandButtonClick() {
+        const $expandBtn = $('.rollout-manager-expand');
+        const isExpand = $expandBtn.text() === EXPAND_ALL;
+        $('coral-accordion-item').prop('selected', isExpand);
+        $expandBtn.text(isExpand ? COLLAPSE_ALL : EXPAND_ALL);
+    }
+
     function onResolve($btn, path, deferred) {
         const shouldActivate = $btn.closest('[data-dialog-action]').data('dialogAction') === 'rolloutPublish';
         const isDeepRollout = $('coral-checkbox[name="isDeepRollout"]').filter(':not([disabled])').prop('checked');
@@ -253,10 +266,12 @@
     function initEventHandlers(dialog, deferred, onCheckboxChange, onSelectAllClick, onResolve) {
         dialog.on('change', 'coral-checkbox', onCheckboxChange);
         dialog.on('click', '.rollout-manager-select-all', onSelectAllClick);
+        dialog.on('click', '.rollout-manager-expand', onExpandButtonClick);
         dialog.on('click', '[data-dialog-action]', onResolve);
         dialog.on('coral-overlay:close', function () {
             dialog.off('change', 'coral-checkbox', onCheckboxChange);
             dialog.off('click', '.rollout-manager-select-all', onSelectAllClick);
+            dialog.off('click', '.rollout-manager-expand', onExpandButtonClick);
             dialog.off('click', '[data-dialog-action]', onResolve);
             deferred.reject();
         });