chg: [genericElements:index_table] Added close button for stat widget config UI

templates/element/genericElements/IndexTable/Statistics/index_statistic_field_amount.php

@@ -43,7 +43,6 @@ foreach ($statistics['usage'] as $scope => $graphData) {
             'class' => ['btn-statistics-pie-configurator-' . $seedPiechart],
             'params' => [
                 'data-bs-toggle' => 'popover',
-                'data-bs-title' => __('Configure chart'),
             ]
         ])
     );
@@ -66,12 +65,18 @@ foreach ($statistics['usage'] as $scope => $graphData) {
 
 <script>
     $(document).ready(function() {
-        var popoverTriggerList = [].slice.call(document.querySelectorAll('.btn-statistics-pie-configurator-<?= $seedPiechart ?>'))
+        let popoverTriggerList = [].slice.call(document.querySelectorAll('.btn-statistics-pie-configurator-<?= $seedPiechart ?>'))
-        var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
+        let popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
-            return new bootstrap.Popover(popoverTriggerEl, {
+            const popover = new bootstrap.Popover(popoverTriggerEl, {
                 container: 'body',
                 html: true,
                 sanitize: false,
+                title: () => {
+                    return '<div class="d-flex align-items-center justify-content-between"> \
+                                <?= __('Configure chart') ?> \
+                                <button type = "button" class="btn-xs btn-close" aria-label="Close"></button> \
+                            </div>'
+                },
                 content: () => {
                     return '<div class="popover-form-container"> \
                                 <div class="input-group flex-nowrap"> \
@@ -94,6 +99,26 @@ foreach ($statistics['usage'] as $scope => $graphData) {
                             </div>'
                 }
             })
+            popoverTriggerEl.addEventListener('shown.bs.popover', function(evt) {
+                const popover = bootstrap.Popover.getInstance(this)
+                const popoverEl = popover.getTipElement()
+                const popoverBtnCloseEl = popoverEl.querySelector('.popover-header button.btn-close')
+                popoverBtnCloseEl.addEventListener('click', function() {
+                    popover.hide()
+                })
+            })
+            return popover
+        })
+
+        let popoverCloseBtnlist = [].slice.call(document.querySelectorAll('.popover .popover-header button.btn-close'))
+        popoverCloseBtnlist.map(function(popoverBtnCloseEl) {
+            return popoverBtnCloseEl.addEventListener('click', function() {
+                const popoverEl = this.closest('.popover')
+                const popover = bootstrap.Popover.getInstance(popoverEl)
+                if (popover !== null) {
+                    popover.hide()
+                }
+            })
         })
     })
 

templates/element/genericElements/IndexTable/Statistics/index_statistic_timestamp.php

@@ -40,7 +40,6 @@ $panelControlHtml = sprintf(
         'class' => ['btn-statistics-days-configurator-' . $seed,],
         'params' => [
             'data-bs-toggle' => 'popover',
-            'data-bs-title' => __('Set statistics spanning days'),
         ]
     ])
 );
@@ -103,6 +102,12 @@ $card = $this->Bootstrap->card([
             container: 'body',
             html: true,
             sanitize: false,
+            title: () => {
+                return '<div class="d-flex align-items-center justify-content-between"> \
+                            <?= __('Set spanning window') ?> \
+                            <button type = "button" class="btn-xs btn-close" aria-label="Close"></button> \
+                        </div>'
+            },
             content: () => {
                 return '<div class="input-group flex-nowrap"> \
                             <span class="input-group-text" id="addon-wrapping-<?= $seed ?>"><?= __('Days') ?></span> \
@@ -111,6 +116,14 @@ $card = $this->Bootstrap->card([
                         </div>'
             }
         })
+        document.querySelector('.btn-statistics-days-configurator-<?= $seed ?>').addEventListener('shown.bs.popover', function(evt) {
+            const popover = bootstrap.Popover.getInstance(this)
+            const popoverEl = popover.getTipElement()
+            const popoverBtnCloseEl = popoverEl.querySelector('.popover-header button.btn-close')
+            popoverBtnCloseEl.addEventListener('click', function() {
+                popover.hide()
+            })
+        })
     })
 
     function statisticsDaysRedirect(clicked) {