Dashboard DateRangTimePicker : how could I send value of DateRangTimePicker to from my Dashboard

developer commented on Dec 24, 2020


 protected function widgets()
    {
        return [
            Row::create([
                Panel::create()->type("primary")->header("<b>Sales</b>")->sub([
                    Text::create()->text("<label><strong>DateRangePicker</strong></label>")->asHtml(true),
                    SaleDateRangePicker::create()
                ]),
                Panel::create()->type("primary")->sub([
                    Result::create("Result"),
                    // RecievedParam::create('RecievedParam')
                ]),
            ]),
            Row::create()->sub([
                SaleCredit::create()->params([
                    "date" => Result::create("Result")
                ]),
                SaleCash::create(),
                SaleNet::create(),
            ]),

        ];
    }

}

inside SaleCredit.php

    protected $from_date;
    protected $to_date;

    protected function onInit()
    {
        // $value = json_encode($this->sibling('SaleDateRangePicker')->value());
        $value = json_encode($this->params("date"));
        $this->from_date = $value[0];
        $this->to_date = $value[1];
    }

   protected function dataSource()
    {
        return AutoMaker::table("transactions")
            ->where('transactions.invoice_type', 'CREDIT')
            ->where('transactions.status', 3)
            ->whereBetween('transactions.created_at', [$this->from_date, $this->to_date])
            ->where('transactions.transaction_type', 1);
    }

SaleDateRangTimePicker.php

class SaleDateRangePicker extends DateRangePicker
{
    protected function onCreated()
    {
        $this->defaultValue(DateRangePicker::today());
    }
    protected function actionChange($request, $response)
    {
        $this->sibling("Result")->update();
        // $this->sibling("RecievedParam")->update();
    }
}

so how could be solve?

Ali commented on Dec 24, 2020

guys I need quick support on this.

KoolReport commented on Dec 24, 2020

Hi Ali,

You should follow our "Payments" dashboard from the dashboard-demo. It is similar to your case in which user selects DateRangePicker, the other widgets will update.

The step will be like this:

1) On the actionChange of DateRangePicker, you will need to update SaleCredit, SaleCash and SaleNet like this:

    protected function actionChange($request, $response)
    {
        $this->sibling("SaleCredit")->update();
        $this->sibling("SaleCash")->update();
        $this->sibling("SaleNet")->update();
    }

the update() function mean that those three widgets will be updated at client.

2) In dataSource() of SaleCredit, SaleCash and SaleNet, you get the date range from DateRangePicker:

protected function dataSource()
{
    $ranges = $this->sibling("SaleDateRangePicker")->value();
    //Then base on the ranges, you provide data query here
    return AutoMaker:: ....;
}

In summary, when user select a date range, the daterangepicker will tell 3 widgets to update. When each widget updates, it will get the range from daterangepicker to perform query and update result to web.

Hope that helps.

developer commented on Dec 26, 2020

Thank you KoolReport, some of my widgets are working except [SaleCredit, and SaleCash, and SaleNet] is not working and their dropdown select Datetimepicker also is not changes too.

KoolReport's Forum

Dashboard DateRangTimePicker : how could I send value of DateRangTimePicker to from my Dashboard #1791

Build Your Excellent Data Report