KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Exporting on Details Modal #2852

Closed GHSix opened this topic on on Oct 24, 2022 - 11 comments

GHSix commented on Oct 24, 2022

I have copy/paste detailModal from TDefaultDetailModal and added export function to it.

Here it is:

<?php
namespace Util;

use \koolreport\dashboard\widgets\Table;
use \koolreport\dashboard\containers\Modal;
use \koolreport\dashboard\inputs\Button;
use \koolreport\dashboard\inputs\Dropdown;
use \koolreport\dashboard\Lang;
use \koolreport\dashboard\Client;

trait detailModalExport
{
    protected function detailModal($params = [])
    {
        $modal = Modal::create();
        $dataView = $this->dataView();
        return $modal
            ->title(Lang::t("Details"))
            ->type("info")
            ->size("lg")
            ->sub([
                Table::create($this->name() . "DetailTable")
                    ->pdfExportable(true)
                    ->csvExportable(true)
                    ->xlsxExportable(true)
                    ->pageSize(10)
                    ->dataSource($dataView->data())
                    ->fields(function () use ($dataView) {
                        return array_map(
                            function ($field) {
                                return $field->clone();
                            },
                            $dataView->fields()
                        );
                    })
            ])
            ->footer([
                Dropdown::create($this->name() . "DetailTableExport")
                    ->title(Lang::t("Export"))
                    ->type("primary")
                    ->items([
                        Dropdown::menuItem()
                            ->text("CSV")
                            ->icon("fa fa-file-csv")
                            ->onClick(
                                Client::showLoader().
                                Client::widget($this->name() . "DetailTable")->exportToCSV()
                            ),
                        Dropdown::menuItem()
                            ->text("PDF")
                            ->icon("fa fa-file-pdf")
                            ->onClick(
                                Client::showLoader().
                                Client::widget($this->name() . "DetailTable")->exportToPDF()
                            ),
                        Dropdown::menuItem()
                            ->text("XLS")
                            ->icon("fa fa-file-excel")
                            ->onClick(
                                Client::showLoader().
                                Client::widget($this->name() . "DetailTable")->exportToXLSX()
                            ),
                    ]),
                Button::create()
                    ->text(Lang::t("OK"))
                    ->type("success")
                    ->onClick(Modal::hide($modal))
            ]);
    }
}

Now I can't find out how to add onExporting to $this->pageSize(null) in this trait.

There is a way to directly do that here or do I need to extend the Table class just to add the onExporting function to it?

KoolReport commented on Oct 25, 2022

You do this:

                Table::create($this->name() . "DetailTable")
                    ->pdfExportable(true)
                    ->csvExportable(true)
                    ->xlsxExportable(true)
                    ->pageSize(10)
                    ->dataSource($dataView->data())
                    ->fields(function () use ($dataView) {
                        return array_map(
                            function ($field) {
                                return $field->clone();
                            },
                            $dataView->fields()
                        );
                    })
                    ->registerEvent("Exporting",function($params){
                        $this->pageSize(null);
                    })
GHSix commented on Oct 25, 2022
[Widget] MainColumnDetailTable

Message: Call undefined pageSize() method
Line: 23
File: /www/dev/koolreport/vendor/koolreport/dashboard/TMagicMethod.php
KoolReport commented on Oct 26, 2022

You do this:

$detailTable = Table::create($this->name() . "DetailTable")
                    ->pdfExportable(true)
                    ->csvExportable(true)
                    ->xlsxExportable(true)
                    ->pageSize(10)
                    ->dataSource($dataView->data())
                    ->fields(function () use ($dataView) {
                        return array_map(
                            function ($field) {
                                return $field->clone();
                            },
                            $dataView->fields()
                        );
                    });
$modal
->...
->sub([
    $detailTable->registerEvent("Exporting",function($params) use ($detailTable) {
        $detailTable->pageSize(null);
    })
])

Hope that helps.

GHSix commented on Oct 26, 2022

Now, on export click, the load animation shows up for a couple of seconds and do nothing.

$modal = Modal::create();
        $dataView = $this->dataView();
        $detailTable = Table::create($this->name() . "DetailTable")
                        ->pdfExportable(true)
                        ->csvExportable(true)
                        ->xlsxExportable(true)
                        ->pageSize(10)
                        ->dataSource($dataView->data())
                        ->fields(function () use ($dataView) {
                            return array_map(
                                function ($field) {
                                    return $field->clone();
                                },
                                $dataView->fields()
                            );
                        });
        return $modal
            ->title(Lang::t("Details"))
            ->type("info")
            ->size("lg")
            ->sub([
                $detailTable->registerEvent("Exporting",function($params) use ($detailTable) {
                    $detailTable->pageSize(null);
                })
            ])
KoolReport commented on Oct 28, 2022

Could you please open inspector and see the return when you click export. Probably there will be more information on what happens.

GHSix commented on Oct 28, 2022

On Open DetailTable Popup:

{
  "panels": {
    "MainColumndetail": [
      "<div id=\"modal635beca9c3fe97\"     class=\"modal fade\" \n    tabindex=\"-1\" role=\"dialog\" \n    aria-labelledby=\"modal635beca9c3fe97\" aria-hidden=\"true\">\n    <div class=\"modal-dialog\n        modal-info \n         \n        modal-lg\" role=\"document\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <h5 class=\"modal-title\">Detalhes</h5>\n                                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                        <span aria-hidden=\"true\">×</span>\n                    </button>\n                            </div>\n            <div class=\"modal-body\">\n                                    <ajaxpanel id='ajpMainColumnDetailTable'><div><div id=\"MainColumnDetailTable\" class=\"koolreport-dashboard-table table-responsive\">\n<table class=\"table table-outline\">\n    <thead class=\"thead-light\">\n        <tr>\n                                            <th style=\"vertical-align:middle\" class=\"text-left\" >\n                    Data                                        </th>\n                                            <th style=\"vertical-align:middle\" class=\"text-left\" >\n                    Averbado                                        </th>\n                                            <th style=\"vertical-align:middle\" class=\"text-left\" >\n                    Frete                                        </th>\n                    </tr>    \n    </thead>\n    <tbody>\n                <tr >\n                                            <td class=\"text-left\">01/2020</td>\n                                            <td class=\"text-left\">R$27.240.527.902,68</td>\n                                            <td class=\"text-left\">R$9.703,88</td>\n                    </tr>\n                <tr >\n                                            <td class=\"text-left\">02/2020</td>\n                                            <td class=\"text-left\">R$25.493.492.199,86</td>\n                                            <td class=\"text-left\">R$15.347,71</td>\n                    </tr>\n            </tbody>\n    </table>\n</div>\n    <div id=\"MainColumnDetailTable_paging\" class=\"koolreport-dashboard-table-paging text-left\">\n        \n                <nav style=\"display:inline-block\"></nav>\n    </div>\n<script type=\"text/javascript\">\nKoolReport.widget.init({\"js\":[\"\\/koolreport_assets\\/2751859996\\/widgets\\/table\\/table.js\"]},function(){\n    MainColumnDetailTable = new KoolReport.dashboard.widgets.Table(\n        \"MainColumnDetailTable\",\n        {\"paging\":{\"pageSize\":2,\"pageIndex\":0,\"itemCount\":33,\"pageCount\":17}});\n});\n</script></div></ajaxpanel>                            </div>\n                            <div class=\"modal-footer\">\n                                            <ajaxpanel id='ajpMainColumnDetailTableExport'><div><div class=\"btn-group \" >\n    <button  class=\"btn  btn-primary btn-md dropdown-toggle\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                Exportar    </button>\n    <div class=\"dropdown-menu\">\n                    <a onclick=\"_exec('c2hvd0xvYWRlcigpO3dpZGdldEFjdGlvbignTWFpbkNvbHVtbkRldGFpbFRhYmxlJywnZXhwb3J0JyxfanBhcmFtcygnZXlKMGVYQmxJam9pWTNOMklpd2libUZ0WlNJNmJuVnNiSDA9JykpOw==')\" target=\"\" style=\"\" class=\"dropdown-item \" href=\"javascript:void 0\">\n            <i class=\"fa fa-file-csv\"></i> \n        CSV    </a>\n                    <a onclick=\"_exec('c2hvd0xvYWRlcigpO3dpZGdldEFjdGlvbignTWFpbkNvbHVtbkRldGFpbFRhYmxlJywnZXhwb3J0JyxfanBhcmFtcygnZXlKMGVYQmxJam9pY0dSbUlpd2libUZ0WlNJNmJuVnNiSDA9JykpOw==')\" target=\"\" style=\"\" class=\"dropdown-item \" href=\"javascript:void 0\">\n            <i class=\"fa fa-file-pdf\"></i> \n        PDF    </a>\n                    <a onclick=\"_exec('c2hvd0xvYWRlcigpO3dpZGdldEFjdGlvbignTWFpbkNvbHVtbkRldGFpbFRhYmxlJywnZXhwb3J0JyxfanBhcmFtcygnZXlKMGVYQmxJam9pZUd4emVDSXNJbTVoYldVaU9tNTFiR3g5JykpOw==')\" target=\"\" style=\"\" class=\"dropdown-item \" href=\"javascript:void 0\">\n            <i class=\"fa fa-file-excel\"></i> \n        XLS    </a>\n            </div>\n</div></div></ajaxpanel>                                            <ajaxpanel id='ajpbtn635beca9c7ca711'><div><button \n    id=\"btn635beca9c7ca711\" \n    type=\"button\" \n            class=\"btn  btn-success btn-md\"\n            onclick=\"_exec('JCgnI21vZGFsNjM1YmVjYTljM2ZlOTcnKS5tb2RhbCgnaGlkZScpOw==')\"\n    >\n    OK</button>\n</div></ajaxpanel>                                    </div>\n                    </div>\n    </div>\n</div>\n<script type=\"text/javascript\">\n$('#modal635beca9c3fe97').on('shown.bs.modal',function(){mimicResize();});\n                        $('#modal635beca9c3fe97').on('hidden.bs.modal',function(){KoolReport.dashboard.dboard.widgetRemoveState('MainColumn','detailModalParams');});\n    $('#modal635beca9c3fe97').modal('show');\n</script>",
      "none"
    ]
  },
  "scripts": [
    "KoolReport.dashboard.dboard.setState(_jparams('eyJNYWluQ29sdW1uIjp7ImRldGFpbE1vZGFsUGFyYW1zIjpbXX19'));"
  ]
}

On CSV export:

Payload:

kdr: 
eyJyb3V0ZSI6IkFwcC9NYWluIiwiYWN0aW9uIjoiaW5kZXgiLCJwYXJhbXMiOm51bGx9

kdr[route]: 
App/Main/MainBoard/MainColumnDetailTable
kdr[action]: 
export
kdr[params][type]: 
csv
kdr[params][name]: 
kdr[encodedParams]: 
eyJ0eXBlIjoiY3N2IiwibmFtZSI6bnVsbH0=
state: 
eyJNYWluQm9hcmQiOnsiTWFpbkNvbHVtbiI6eyJkZXRhaWxNb2RhbFBhcmFtcyI6W119fX0=

Response:

{
  "panels": [],
  "scripts": [
    "KoolReport.dashboard.dboard.setState(_jparams('eyJNYWluQ29sdW1uIjp7ImRldGFpbE1vZGFsUGFyYW1zIjpbXX19'));"
  ]
}
GHSix commented on Nov 10, 2022

Any ideas? I'm still lost on that one.

GHSix commented on Jan 27, 2023

Bump

GHSix commented on Jan 30, 2023

I have removed the registerEvent("Exporting" that seens to be doing something very wrong to make the export to stoping working at all.

I have try this so:

class ExTable extends Table
{
    protected function onExporting($params)
    {
        $this->pageSize(null);
        return true;
    }
}

...

$detailTable = ExTable::create($this->name() . "DetailTable")

But it seems to be doing nothing as well. The export is back to working but is paging the result, wich makes no sence.

KoolReport commented on Jan 30, 2023

If you do:

    $detailTable->registerEvent("Exporting",function($params) use ($detailTable) {
        $detailTable->pageSize(null);
        return true;
    })

does it work?

GHSix commented on Jan 30, 2023

Oh gosh! We where missing the return true; in the event function.

Thank you!

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

Dashboard