KoolReport's Forum

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

Exporting on Details Modal #2852

Open GHSix opened this topic on on Oct 24 - 7 comments

GHSix commented on Oct 24

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

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
[Widget] MainColumnDetailTable

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

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

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

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

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

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

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