new: [element:index_table] Added possibility to download current table based on filters

templates/element/genericElements/ListTopBar/group_table_action.php

@@ -67,6 +67,8 @@ $numberOfElementHtml = $this->element('/genericElements/ListTopBar/group_table_a
 ?>
 <?php if (!isset($data['requirement']) || $data['requirement']) : ?>
     <?php
+    $now = date("Y-m-d_H-i-s");
+    $downloadFilename = sprintf('%s_%s.json', $data['table_setting_id'] ?? h($model), $now);
     echo $this->Bootstrap->dropdownMenu([
         'dropdown-class' => 'ms-1',
         'alignment' => 'end',
@@ -89,6 +91,13 @@ $numberOfElementHtml = $this->element('/genericElements/ListTopBar/group_table_a
                 'keepOpen' => true,
                 'menu' => $indexColumnMenu,
             ],
+            [
+                'text' => __('Download'),
+                'icon' => 'download',
+                'attrs' => [
+                    'onclick' => sprintf('downloadIndexTable(this, "%s")', $downloadFilename),
+                ],
+            ],
             [
                 'html' => $compactDisplayHtml,
             ],

webroot/js/main.js

@@ -206,6 +206,24 @@ function deleteBookmark(bookmark, forSidebar=false) {
     }).catch((e) => { })
 }
 
+function downloadIndexTable(downloadButton, filename) {
+    const $dropdownMenu = $(downloadButton).closest('.dropdown')
+    const tableRandomValue = $dropdownMenu.attr('data-table-random-value')
+    const $container = $dropdownMenu.closest('div[id^="table-container-"]')
+    const $table = $container.find(`table[data-table-random-value="${tableRandomValue}"]`)
+    const $filterButton = $(`#toggleFilterButton-${tableRandomValue}`)
+    const activeFilters = $filterButton.data('activeFilters')
+    const additionalUrlParams = $filterButton.data('additionalUrlParams') ? $filterButton.data('additionalUrlParams') : ''
+    const searchParam = jQuery.param(activeFilters);
+    const url = $table.data('reload-url') + additionalUrlParams + '?' + searchParam
+    let options = {}
+    const downloadPromise = AJAXApi.quickFetchJSON(url, options)
+    UI.overlayUntilResolve($dropdownMenu, downloadPromise)
+    downloadPromise.then((data) => {
+        download(filename, JSON.stringify(data, undefined, 4))
+    })
+}
+
 function overloadBSDropdown() {
     // Inspired from https://jsfiddle.net/dallaslu/mvk4uhzL/
     (function ($bs) {

webroot/js/utils.js

@@ -189,3 +189,15 @@ function mergeDeep(target, ...sources) {
 
     return mergeDeep(target, ...sources);
 }
+
+function download(filename, data, type='application/json') {
+    const blob = new Blob([data], {type: type})
+    const a = window.document.createElement('a')
+    const objectURL = URL.createObjectURL(blob)
+    a.href = objectURL
+    a.download = filename
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(objectURL)
+}