Default Detail Modal
Custom Detail Modal
Master Details
Customer Name | Country | View Details |
---|---|---|
Santa | France | |
Signal Gift Stores | USA | |
Australian Collectors, Co. | Australia | |
La Rochelle Gifts | France | |
Baane Mini Imports | Norway |
DetailModal is a special feature of most widgets. By default, detail modal allows us to see behind data of widget in a table form. However, the detail modal can be customized to show anything. In above example, we use detail modal to show revenue comparizon in DonutChart. Also, we customize detail modal to show customer detail information.
<?php
namespace demo\detailmodal;
use \koolreport\dashboard\widgets\Table;
use \demo\AutoMaker;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Number;
use \koolreport\dashboard\fields\Button as ButtonField;
use \koolreport\dashboard\Client;
use \koolreport\dashboard\containers\Html;
use \koolreport\dashboard\inputs\Button;
use \koolreport\dashboard\containers\Modal;
class CustomerTable extends Table
{
protected function onCreated()
{
$this
->detailShowable(true)
->pageSize(5)
->tableHover(true)
->tableStriped(true)
->searchable(true)
->searchAlign("right")
->searchWidth("300px");
}
protected function dataSource()
{
return AutoMaker::table("customers");
}
protected function fields()
{
return [
Text::create("customerName")
->searchable(true),
Text::create("country")
->searchable(true),
ButtonField::create("viewDetails")
->type("warning")
->textAlign("right")
->text("View Orders")
->onClick(function($value, $row){
return Client::widget($this->widget())->showDetail([
"customerNumber"=>$row["customerNumber"]
]);
}),
];
}
protected function detailModal($params=[])
{
$customerName = AutoMaker::table("customers")
->select("customerName")
->where("customerNumber",$params["customerNumber"])
->run()
->getScalar();
$modal = Modal::create();
return $modal
->title($customerName)
->type("info")
->size("lg")
->sub([
OrderDetailsTable::create()->params($params)
])
->footer([
Button::create()
->text("Export to PDF")
->type("primary")
->icon("far fa-file-pdf")
->onClick(
Client::showLoader().
Client::widget("OrderDetailsTable")->exportToPDF()
),
Button::create()
->text("Done")
->type("default")
->onClick(Modal::hide($modal))
]);
}
}
<?php
namespace demo\detailmodal;
use \koolreport\dashboard\Dashboard;
use \koolreport\dashboard\containers\Row;
use \koolreport\dashboard\containers\Panel;
use \koolreport\dashboard\containers\Html;
use \koolreport\dashboard\Client;
use \koolreport\dashboard\inputs\Button;
use \demo\AutoMaker;
use \koolreport\dashboard\containers\Modal;
class DetailModalBoard extends Dashboard
{
protected function content()
{
return [
Row::create([
Panel::create()->header("<b>Default Detail Modal</b>")->width(1/2)->sub([
Html::div()->class("text-right")->sub([
Button::create()->text("View Data")
->laddaOnAction(true)
->onClick(
Client::widget("Revenue")->showDetail()
)
]),
Revenue::create()->detailShowable(true)
]),
Panel::create()->header("<b>Custom Detail Modal</b>")->width(1/2)->sub([
Html::div()->class("text-right")->sub([
Button::create()->text("Revenue Comparison")
->type("warning")
->laddaOnAction(true)
->onClick(
Client::widget("RevenueCustomDetail")->showDetail()
)
]),
RevenueCustomDetail::create()->detailShowable(true)
])
]),
Row::create([
Panel::create()->header(Html::b("Master Details"))->sub([
CustomerTable::create()
])
]),
\demo\CodeDemo::create("
DetailModal is a special feature of most widgets. By default, detail modal allows us to see behind data
of widget in a table form. However, the detail modal can be customized to show anything. In above example,
we use detail modal to show revenue comparizon in DonutChart. Also, we customize detail modal to show
customer detail information.
")->raw(true)
];
}
}
<?php
namespace demo\detailmodal;
use \koolreport\dashboard\widgets\Table;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Date;
use \koolreport\dashboard\fields\Badge;
use \koolreport\dashboard\containers\Html;
use \demo\AutoMaker;
class OrderDetailsTable extends Table
{
protected function onCreated()
{
$this
->tableSmall(true)
->pdfExportable(true);
}
protected function dataSource()
{
if($this->params("customerNumber")===null) {
throw new \Exception("OrderDetailsTable requires params['customerNumber']");
}
return AutoMaker::table("orders")
->where("customerNumber",$this->params("customerNumber"));
}
protected function fields()
{
return [
Text::create("orderNumber"),
Date::create("orderDate"),
Badge::create("status")->type(function($status){
switch($status){
case "Shipped":
case "Resolved":
return "success";
case "Cancelled":
case "Disputed":
return "danger";
case "On Hold":
return "warning";
case "In Process":
return "info";
default:
return "default";
}
}),
Date::create("shippedDate")
->formatUsing(function($value) {
return ($value!==null)?$this->defaultFormatValue($value):"No date";
}),
];
}
public function exportedView()
{
$customerName = AutoMaker::table("customers")
->select("customerName")
->where("customerNumber",$this->params("customerNumber"))
->run()
->getScalar();
return Html::div(Html::h1($customerName))->class("text-center").
$this->view();
}
}
<?php
namespace demo\detailmodal;
use \koolreport\dashboard\widgets\google\LineChart;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Currency;
use \koolreport\dashboard\ColorList;
use \demo\AutoMaker;
class Revenue extends LineChart
{
protected function onInit()
{
$this
->title("AutoMaker's Revenue in 2022")
->colorScheme(ColorList::random())
->height("360px");
}
protected function dataSource()
{
return AutoMaker::rawSQL("
SELECT
DATE_FORMAT(paymentDate,'%b') as month,
sum(amount) as total
FROM
payments
WHERE
YEAR(paymentDate)=2022
GROUP BY month, DATE_FORMAT(paymentDate,'%m')
ORDER BY DATE_FORMAT(paymentDate,'%m') asc
");
}
protected function fields()
{
return [
Text::create("month"),
Currency::create("total")
->USD()->symbol()
->decimals(0),
];
}
}
<?php
namespace demo\detailmodal;
use \koolreport\dashboard\containers\Modal;
use \koolreport\dashboard\widgets\d3\DonutChart;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Currency;
use \koolreport\dashboard\inputs\Button;
class RevenueCustomDetail extends Revenue
{
protected function detailModal($params=[])
{
$modal = Modal::create();
$dataView = $this->dataView();
return $modal
->title("AutoMaker's Revenue in 2022")
->type("warning")
->size("lg")
->sub([
DonutChart::create("revenueInDonut")
->dataSource($dataView->data())
->fields([
Text::create("month"),
Currency::create("total")
->USD()->symbol()
->decimals(0),
])
])
->footer([
Button::create()
->text("Done")
->type("default")
->onClick(Modal::hide($modal))
]);
}
}