From 550240ce34465a79ccc1dc8cbfab212a81f326ba Mon Sep 17 00:00:00 2001
From: nharshunova <nharshunova@exadel.com>
Date: Mon, 4 Apr 2022 22:07:36 +0300
Subject: [PATCH 1/3] [EQK-24] Results table: add resizable columns

---
 .../query/clientlibs/css/main-layout.css      |  3 +-
 .../console/query/clientlibs/css/results.css  | 24 +++++
 .../console/query/clientlibs/js.txt           |  2 +
 .../query/clientlibs/js/actions/execute.js    |  3 +-
 .../query/clientlibs/js/results/table.js      | 99 +++++++++++++++++++
 5 files changed, 129 insertions(+), 2 deletions(-)
 create mode 100644 ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/results/table.js

diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/main-layout.css b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/main-layout.css
index 807f4ae..e84d059 100644
--- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/main-layout.css
+++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/main-layout.css
@@ -50,6 +50,7 @@
     background-color: #fff;
     border: 1px solid #e9e9e9;
     border-radius: 0.25rem;
+    box-sizing: border-box;
 }
 
 .eqk-action-label {
@@ -69,4 +70,4 @@
 
 .coral3-Dialog--error .coral3-Dialog-wrapper {
     max-width: 550px;
-}
\ No newline at end of file
+}
diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/results.css b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/results.css
index a5eefb7..5ad17c1 100644
--- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/results.css
+++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/results.css
@@ -80,3 +80,27 @@
     padding: 0.3125rem;
     margin: 0 0.3125rem 0 0;
 }
+
+#resultsTable th:not(:first-child):not(:last-child) .resizer {
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    content: '';
+    background-color: #ececec;
+    width: 5px;
+    cursor: ew-resize;
+    z-index: 10;
+}
+
+#resultsTable table {
+    table-layout: fixed;
+}
+
+#resultsTable .results-table-cell:first-of-type, #resultsTable .coral-Table-headerCell:first-of-type {
+    width: 40px;
+}
+#resultsTable .coral-Table-wrapper-container {
+    overflow-y: hidden;
+}
diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js.txt b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js.txt
index 1b971b8..11cb6ad 100644
--- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js.txt
+++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js.txt
@@ -27,3 +27,5 @@ noop-adapter.js
 #base=js
 profiles.js
 startup.js
+
+results/table.js
diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/actions/execute.js b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/actions/execute.js
index 2e1596b..3c86cb2 100644
--- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/actions/execute.js
+++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/actions/execute.js
@@ -42,7 +42,8 @@
                 const isBackendException = $errorMessage.length;
                 if (!isBackendException) {
                     $('#resultsColumn').empty().prepend($result.html());
-                    $(document).trigger('eqk-success-response', args);
+                    const table = $result.find('#resultsTable')[0];
+                    Coral.commons.ready(table, ns.initResizableCols);
                 } else {
                     foundationUi.alert('EToolbox Query Console', 'Could not retrieve results: ' + $errorMessage.text(), 'error');
                     $errorMessage.remove();
diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/results/table.js b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/results/table.js
new file mode 100644
index 0000000..0a7c8de
--- /dev/null
+++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/results/table.js
@@ -0,0 +1,99 @@
+(function ($, ns) {
+    'use strict';
+
+    const TABLE_RESULTS_ID = '#resultsTable';
+    const COL_STYLES_ID = 'colStyles';
+    const RESIZER_CLASS = 'resizer';
+
+    $(`<style id="${COL_STYLES_ID}">`).prependTo(document.head);
+    const $savedColStyles = $(`#${COL_STYLES_ID}`);
+
+    ns.initResizableCols = () => {
+        $(`${TABLE_RESULTS_ID} table colgroup`).remove();
+
+        $(`${TABLE_RESULTS_ID} coral-table-headercell-content`).each((i, coralCell) => {
+            const $resizer = $(`<div class="${RESIZER_CLASS}">`);
+            $resizer.appendTo($(coralCell));
+            createResizableColumn($(coralCell), $(coralCell).closest('th'), $resizer);
+        });
+    };
+
+    const createResizableColumn = function ($coralCell, $col, $resizer) {
+        let x = 0;
+        let curColWidth = 0;
+        let nextColWidth = 0;
+
+        const $nextCol = $col.next();
+
+        const curColMinWidth = parseFloat($col.css('min-width')) || Number.POSITIVE_INFINITY;
+        const nextColMinWith = parseFloat($nextCol.css('min-width')) || Number.POSITIVE_INFINITY;
+        const curColPadding = getPadding($col);
+        const nextColPadding = getPadding($nextCol);
+
+        const mouseDownHandler = function (e) {
+            x = e.clientX;
+
+            curColWidth = parseFloat($col.css('width'));
+            if ($nextCol.length) {
+                nextColWidth = parseFloat($nextCol.css('width'));
+            }
+
+            $(document).on('mousemove', mouseMoveHandler);
+            $(document).on('mouseup', mouseUpHandler);
+        };
+
+        const mouseMoveHandler = (e) => requestAnimationFrame(() => {
+            $savedColStyles.text('');
+
+            const dx = e.clientX - x;
+
+            if (curColWidth + dx + curColPadding < curColMinWidth) return;
+            if ($nextCol.length && nextColWidth - dx + nextColPadding < nextColMinWith) return;
+
+            setWidth($col, curColWidth + dx, curColPadding);
+            $nextCol.length && setWidth($nextCol, nextColWidth - dx, nextColPadding);
+        });
+
+        const mouseUpHandler = function () {
+            $(document).off('mousemove', mouseMoveHandler);
+            $(document).off('mouseup', mouseUpHandler);
+
+            saveColStyles();
+        };
+
+        $resizer.on('mousedown', mouseDownHandler);
+    };
+
+    function saveColStyles() {
+        const thSelector = `${TABLE_RESULTS_ID} th`;
+        let result = '';
+
+        $(thSelector).each((i, col) => {
+            result += `${thSelector}:nth-child(${i + 1}) { 
+            width: ${$(col).css('width')};
+            }`;
+
+            result += `${thSelector}:nth-child(${i + 1}) coral-table-headercell-content { 
+            width: ${$(col).children().first().css('width')} !important;
+            }`;
+        });
+
+        $savedColStyles.text(result);
+    }
+
+    function setWidth($col, width, padding) {
+        $col.css('width', width);
+        const $coralCell = $col.children('coral-table-headercell-content').first();
+        $coralCell.css('width', width + padding);
+    }
+
+    function getPadding($col) {
+        if ($col.css('box-sizing') === 'border-box') {
+            return 0;
+        }
+
+        const padLeft = $col.css('padding-left');
+        const padRight = $col.css('padding-right');
+        return (parseFloat(padLeft) + parseFloat(padRight));
+    }
+})(Granite.$, Granite.Eqk = (Granite.Eqk || {}));

From 816c75e19fc63562b07b277edf35bb735a108066 Mon Sep 17 00:00:00 2001
From: nharshunova <nharshunova@exadel.com>
Date: Wed, 6 Apr 2022 15:29:14 +0300
Subject: [PATCH 2/3] [EQK-24] Results table: clear styles on execute action,
 fixes

---
 .../console/query/clientlibs/css/results.css      |  1 +
 .../query/clientlibs/js/actions/execute.js        |  8 ++++----
 .../console/query/clientlibs/js/results/table.js  | 15 +++++++++------
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/results.css b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/results.css
index 5ad17c1..6efa220 100644
--- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/results.css
+++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/results.css
@@ -59,6 +59,7 @@
 
 .results-table-cell {
     position: relative;
+    word-break: break-word;
 }
 
 .results-table-cell .actions {
diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/actions/execute.js b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/actions/execute.js
index 3c86cb2..46cfddd 100644
--- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/actions/execute.js
+++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/actions/execute.js
@@ -19,7 +19,7 @@
     const registry = $(window).adaptTo('foundation-registry');
     const foundationUi = $(window).adaptTo('foundation-ui');
 
-    function executeAndUpdateUi(args) {
+    function executeAndUpdateUi(args, saveColStyles = false) {
         if (!args || !args.query) {
             return;
         }
@@ -43,7 +43,7 @@
                 if (!isBackendException) {
                     $('#resultsColumn').empty().prepend($result.html());
                     const table = $result.find('#resultsTable')[0];
-                    Coral.commons.ready(table, ns.initResizableCols);
+                    Coral.commons.ready(table, ns.initResizableCols.bind(null, saveColStyles));
                 } else {
                     foundationUi.alert('EToolbox Query Console', 'Could not retrieve results: ' + $errorMessage.text(), 'error');
                     $errorMessage.remove();
@@ -64,7 +64,7 @@
         if ($button.is('.coral3-Button--primary')) {
             return;
         }
-        executeAndUpdateUi(getQueryArgs($button));
+        executeAndUpdateUi(getQueryArgs($button), true);
     });
 
     function getQueryArgs($navButton) {
@@ -109,7 +109,7 @@
                 return;
             }
             const args = getQueryArgs($button);
-            executeAndUpdateUi(args);
+            executeAndUpdateUi(args, true);
         }
     });
 })(document, Granite.$, Granite.Eqk = (Granite.Eqk || {}));
diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/results/table.js b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/results/table.js
index 0a7c8de..9036385 100644
--- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/results/table.js
+++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/results/table.js
@@ -8,7 +8,10 @@
     $(`<style id="${COL_STYLES_ID}">`).prependTo(document.head);
     const $savedColStyles = $(`#${COL_STYLES_ID}`);
 
-    ns.initResizableCols = () => {
+    ns.initResizableCols = (saveColStyles) => {
+        if (!saveColStyles) {
+            $savedColStyles.text('');
+        }
         $(`${TABLE_RESULTS_ID} table colgroup`).remove();
 
         $(`${TABLE_RESULTS_ID} coral-table-headercell-content`).each((i, coralCell) => {
@@ -25,11 +28,6 @@
 
         const $nextCol = $col.next();
 
-        const curColMinWidth = parseFloat($col.css('min-width')) || Number.POSITIVE_INFINITY;
-        const nextColMinWith = parseFloat($nextCol.css('min-width')) || Number.POSITIVE_INFINITY;
-        const curColPadding = getPadding($col);
-        const nextColPadding = getPadding($nextCol);
-
         const mouseDownHandler = function (e) {
             x = e.clientX;
 
@@ -47,6 +45,11 @@
 
             const dx = e.clientX - x;
 
+            const curColMinWidth = parseFloat($col.css('min-width')) || Number.POSITIVE_INFINITY;
+            const nextColMinWith = parseFloat($nextCol.css('min-width')) || Number.POSITIVE_INFINITY;
+            const curColPadding = getPadding($col);
+            const nextColPadding = getPadding($nextCol);
+
             if (curColWidth + dx + curColPadding < curColMinWidth) return;
             if ($nextCol.length && nextColWidth - dx + nextColPadding < nextColMinWith) return;
 

From 81a83467eda33215943c6d34c87ca569bc681752 Mon Sep 17 00:00:00 2001
From: nharshunova <nharshunova@exadel.com>
Date: Sat, 14 May 2022 13:39:24 +0300
Subject: [PATCH 3/3] [EQK-24] Results table: fix sticky header scrolling with
 content

---
 .../query/clientlibs/css/main-layout.css      |  3 --
 .../console/query/clientlibs/css/results.css  | 30 +++++++++----------
 .../query/clientlibs/js/actions/execute.js    |  2 +-
 .../query/clientlibs/js/results/table.js      | 10 +++++--
 4 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/main-layout.css b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/main-layout.css
index e84d059..0721254 100644
--- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/main-layout.css
+++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/main-layout.css
@@ -11,9 +11,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.foundation-layout-panel-content {
-    overflow: hidden;
-}
 
 .foundation-layout-util-vmargin {
     margin: 0.625rem 0;
diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/results.css b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/results.css
index 6efa220..0775f71 100644
--- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/results.css
+++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/results.css
@@ -45,6 +45,7 @@
 .results-table-cell {
     position: relative;
     vertical-align: top;
+    word-break: break-word;
 }
 
 .results-table-cell.ordinal {
@@ -57,11 +58,6 @@
     padding: 0 0.625rem 0 0.3125rem;
 }
 
-.results-table-cell {
-    position: relative;
-    word-break: break-word;
-}
-
 .results-table-cell .actions {
     position: absolute;
     bottom: 0.3125rem;
@@ -82,6 +78,19 @@
     margin: 0 0.3125rem 0 0;
 }
 
+#resultsTable table {
+    table-layout: fixed;
+}
+
+#resultsTable coral-table-headercell-content {
+    overflow: hidden;
+}
+
+#resultsTable .results-table-cell:first-of-type,
+#resultsTable .coral-Table-headerCell:first-of-type {
+    width: 40px;
+}
+
 #resultsTable th:not(:first-child):not(:last-child) .resizer {
     display: block;
     position: absolute;
@@ -94,14 +103,3 @@
     cursor: ew-resize;
     z-index: 10;
 }
-
-#resultsTable table {
-    table-layout: fixed;
-}
-
-#resultsTable .results-table-cell:first-of-type, #resultsTable .coral-Table-headerCell:first-of-type {
-    width: 40px;
-}
-#resultsTable .coral-Table-wrapper-container {
-    overflow-y: hidden;
-}
diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/actions/execute.js b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/actions/execute.js
index 46cfddd..9649b91 100644
--- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/actions/execute.js
+++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/actions/execute.js
@@ -42,7 +42,7 @@
                 const isBackendException = $errorMessage.length;
                 if (!isBackendException) {
                     $('#resultsColumn').empty().prepend($result.html());
-                    const table = $result.find('#resultsTable')[0];
+                    const table = document.getElementById('resultsTable');
                     Coral.commons.ready(table, ns.initResizableCols.bind(null, saveColStyles));
                 } else {
                     foundationUi.alert('EToolbox Query Console', 'Could not retrieve results: ' + $errorMessage.text(), 'error');
diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/results/table.js b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/results/table.js
index 9036385..9284a8b 100644
--- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/results/table.js
+++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/results/table.js
@@ -8,13 +8,17 @@
     $(`<style id="${COL_STYLES_ID}">`).prependTo(document.head);
     const $savedColStyles = $(`#${COL_STYLES_ID}`);
 
-    ns.initResizableCols = (saveColStyles) => {
+    ns.initResizableCols = (saveColStyles, table) => {
+        // Hack for Coral to enable sticky header scrolling with content
+        table._preventLayoutStickyCellOnScroll = false;
+        table._layoutStickyCellOnScroll = true;
+
         if (!saveColStyles) {
             $savedColStyles.text('');
         }
-        $(`${TABLE_RESULTS_ID} table colgroup`).remove();
+        $(table).find('table colgroup').remove();
 
-        $(`${TABLE_RESULTS_ID} coral-table-headercell-content`).each((i, coralCell) => {
+        $(table).find('coral-table-headercell-content').each((i, coralCell) => {
             const $resizer = $(`<div class="${RESIZER_CLASS}">`);
             $resizer.appendTo($(coralCell));
             createResizableColumn($(coralCell), $(coralCell).closest('th'), $resizer);