Dashboard

Customers

*Note: Click to row to view orders of a customer

Customer Number	Customer Name	Phone	Country	Credit Limit
103	Santa	40.32.2555	France	$21,000.00
112	Signal Gift Stores	7025551838	USA	$71,800.00
114	Australian Collectors, Co.	03 9520 4555	Australia	$117,300.00
119	La Rochelle Gifts	40.67.8555	France	$118,200.00
121	Baane Mini Imports	07-98 9555	Norway	$81,700.00
124	Mini Gifts Distributors Ltd.	4155551450	USA	$210,500.00
125	Havel & Zbyszek Co	(26) 642-7555	Poland	$0.00
128	Blauer See Auto, Co.	+49 69 66 90 2555	Germany	$59,700.00
129	Mini Wheels Co.	6505555787	USA	$64,600.00
131	Land of Toys Inc.	2125557818	USA	$114,900.00

The example show you how to use FlexView to create a simple drilldown. By clicking to row of table, you will go to details of sub table.

<?php

namespace demo\flexview;

use demo\AutoMaker;
use koolreport\dashboard\Client;
use koolreport\dashboard\fields\Currency;
use koolreport\dashboard\fields\Number;
use koolreport\dashboard\fields\Text;
use koolreport\dashboard\widgets\Table;

class CustomerTable extends Table
{
    
    protected function dataSource()
    {
        return AutoMaker::table("customers");
    }

    protected function fields()
    {
        return [
            Number::create("customerNumber"),
            Text::create("customerName"),
            Text::create("phone"),
            Text::create("country"),
            Currency::create("creditLimit")->USD()->symbol(),
        ];
    }

    protected function onCreated()
    {
        $this
        ->tableHover(true)
        ->pageSize(10);
        $this->clientRowClick(function($row){
            return 
                Client::widget($this)->action("rowSelect",[
                    "customerNumber"=>$row["customerNumber"],
                    "customerName"=>$row["customerName"],
                ]).
                Client::showLoader();
        });
    }

    protected function actionRowSelect($request, $response) {
        $this->sibling("myFlexView")->showView("orders",$request->params());
    }
}

<?php

namespace demo\flexview;

use koolreport\dashboard\containers\Html;
use koolreport\dashboard\containers\Panel;
use koolreport\dashboard\containers\Row;
use koolreport\dashboard\Dashboard;
use koolreport\dashboard\inputs\Button;
use koolreport\dashboard\Lang;
use koolreport\dashboard\widgets\FlexView;

class FlexViewBoard extends Dashboard
{
    protected function content()
    {
        return [
            FlexView::create("myFlexView")
            ->viewOptions([
                "customers"=>function($params) {
                    return [
                        Row::create([
                            Html::h3("Customers")
                        ]),
                        Panel::create()->sub([
                            Html::p(Html::i("*Note: Click to row to view orders of a customer")),
                            CustomerTable::create()
                        ])
                    ];
                },
                "orders"=>function($params) {
                    //Params contain "customerNumber" and "customerName"
                    $customerNumber = $params["customerNumber"];
                    $customerName = $params["customerName"];
                    return [
                        Row::create([
                            Html::h3("Orders of $customerName(#$customerNumber)"),
                            Html::div()->class("text-right")->sub([
                                Button::create("ordersBackButton")
                                ->text(Lang::t("Back"))
                                ->action("submit",function($request, $response){
                                    $this->sibling("myFlexView")->historyBack();
                                }),
                            ]) 
                        ]),
                        Panel::create()->sub([
                            Html::p(Html::i("*Note: Click to row to view details of an order")),
                            OrderTable::create()->params($params)
                        ])
                    ];
                },
                "orderdetails"=>function($params) {
                    $orderNumber = $params["orderNumber"];
                    $customerName = $params["customerName"];
                    return [
                        Row::create([
                            Html::h3("Detail of order #$orderNumber of $customerName"),
                            Html::div()->class("text-right")->sub([
                                Button::create("orderDetailsBackButton")
                                ->text(Lang::t("Back"))
                                ->action("submit",function($request, $response){
                                    $this->sibling("myFlexView")->historyBack();
                                }),
                            ]) 
                        ]),
                        Panel::create()->sub([
                            Html::p(Html::i("*Note: Click back button to go back to previous table")),
                            OrderDetailTable::create()->params($params)
                        ])
                    ];
                }
            ])
            ->initialView("customers")
            ->updateEffect("none"),

            \demo\CodeDemo::create("
                    The example show you how to use FlexView to create a simple drilldown. By clicking to row of table, you will go to details
                    of sub table.
            ")->raw(true)
        ];
    }
}

<?php

namespace demo\flexview;

use demo\AutoMaker;
use koolreport\dashboard\fields\Currency;
use koolreport\dashboard\fields\Number;
use koolreport\dashboard\fields\Text;
use koolreport\dashboard\widgets\Table;

class OrderDetailTable extends Table
{
    protected function onCreated()
    {
        $this->pageSize(10)->hidePagingOnSinglePage(true);
    }
    protected function dataSource()
    {
        return AutoMaker::table("orderdetails")
            ->where("orderNumber",$this->params("orderNumber"));
    }

    protected function fields()
    {
        return [
            Text::create("productCode"),
            Number::create("quantityOrdered"),
            Currency::create("priceEach")->USD()->symbol(),    
        ];
    }
}

<?php

namespace demo\flexview;

use demo\AutoMaker;
use koolreport\dashboard\Client;
use koolreport\dashboard\fields\Date;
use koolreport\dashboard\fields\Number;
use koolreport\dashboard\fields\Text;
use koolreport\dashboard\widgets\Table;

class OrderTable extends Table
{
    protected function onCreated()
    {
        $this->pageSize(10)->tableHover(true)->hidePagingOnSinglePage(true);
        $this->clientRowClick(function($row){
            return 
                Client::widget($this)->action("rowSelect",array_merge([
                    "orderNumber"=>$row["orderNumber"],
                ],$this->params())).
                Client::showLoader();
        });
    }

    protected function actionRowSelect($request, $response)
    {
        $this->sibling("myFlexView")->showView("orderdetails",$request->params());
    }

    protected function dataSource()
    {
        return AutoMaker::table("orders")
                ->where("customerNumber",$this->params("customerNumber"));
    }

    protected function fields()
    {
        return [
            Number::create("orderNumber")->useRaw(true),
            Date::create("orderDate")->displayFormat("F j, Y"),
            Text::create("status"),
            Date::create("shippedDate")->displayFormat("F j, Y"),
        ];
    }
}