Tabel Data Transaksi dengan Filter Rentang Tanggal dan Bagan di Atas – Panel Admin Cepat

Salah satu pelanggan kami bertanya bagaimana cara menambahkan filter tanggal dari-ke di atas tabel data default. Jadi kami membuat proyek demo dan di sini saya akan menjelaskan cara kerjanya.

Pertama, tampilannya – hanya daftar transaksi, difilter berdasarkan tanggal dari-sampai, dan dengan grafik jumlah per hari:

Kedua, link ke repositori: Laravel Datatables Dates Chart

Sekarang, ke kodenya. Bagaimana cara menambahkan filter rentang tanggal dan diagram ke bagian atas tabel?

---

Komponen file blade: DateRangePicker

Pertama, di file sumber daya/tampilan/admin/transaksi/index.blade.php kami menambahkan HTML ini sebelum kode tabel data biasa:

<div class="row">
    <div class="col-md-6">
    <form action="" id="filtersForm">
        <div class="input-group">
        <input type="text" name="from-to" class="form-control mr-2" id="date_filter">
        <span class="input-group-btn">
            <input type="submit" class="btn btn-primary" value="Filter">
        </span> 
        </div>
    </form>
    </div>
</div>
<div class="row my-2" id="chart">
    <div class="{{ $chart->options['column_class'] }}">
        <h3>{!! $chart->options['chart_title'] !!}</h3>
        {!! $chart->renderHtml() !!}
    </div>
</div>
<table class=" table table-bordered table-striped table-hover ajaxTable datatable datatable-Transaction">

Baris terakhir adalah awal dari tabel itu sendiri. Sekarang, tabel itu harus difilter berdasarkan rentang tanggal, bukan?

Jadi inilah JavaScript yang seharusnya berada di suatu tempat di file Blade yang sama di bawah ini:

  let searchParams = new URLSearchParams(window.location.search)
  let dateInterval = searchParams.get('from-to');
  let start = moment().subtract(29, 'days');
  let end = moment();

  if (dateInterval) {
      dateInterval = dateInterval.split(' - ');
      start = dateInterval[0];
      end = dateInterval[1];
  }

  $('#date_filter').daterangepicker({
      "showDropdowns": true,
      "showWeekNumbers": true,
      "alwaysShowCalendars": true,
      startDate: start,
      endDate: end,
      locale: {
          format: 'YYYY-MM-DD',
          firstDay: 1,
      },
      ranges: {
          'Today': [moment(), moment()],
          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
          'This Month': [moment().startOf('month'), moment().endOf('month')],
          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
          'This Year': [moment().startOf('year'), moment().endOf('year')],
          'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
          'All time': [moment().subtract(30, 'year').startOf('month'), moment().endOf('month')],
      }
  });

Hal terakhir mengenai tanggal – kita perlu memfilter data tabel berdasarkan tanggal tersebut.

Jadi kita pergi ke app/Http/Controllers/Admin/TransactionsController.php dan metode indeks().
Untuk mendapatkan datanya, kami menggunakan paket Laravel Datatables, yang membentuk query Eloquent dan kemudian meneruskannya ke Datatables.

Kami akan menambahkan Lingkup Kueri Eloquent ke dalamnya.

Sebelum:

$query = Transaction::query()
    ->select(sprintf('%s.*', (new Transaction)->table));
$table = Datatables::of($query);

Setelah:

$query = Transaction::query()
    ->filterDates()
    ->select(sprintf('%s.*', (new Transaction)->table));
$table = Datatables::of($query);

Melihat filterTanggal()? Ini akan menjadi cakupan filter di dalamnya app/Transaksi.php model:

public function scopeFilterDates($query)
{
    $date = explode(" - ", request()->input('from-to', "")); 

    if(count($date) != 2)
    {
        $date = [now()->subDays(29)->format("Y-m-d"), now()->format("Y-m-d")];
    }

    return $query->whereBetween('transaction_date', $date);
}

Dan itu saja, filternya akan aktif di atas meja.

---

Menggambar Bagan dengan Paket Laravel Charts

Bagian kedua dari tutorial ini adalah bagan. Saya akan mengulangi kode Blade untuk mereka, dari atas:

<div class="row my-2" id="chart">
    <div class="{{ $chart->options['column_class'] }}">
        <h3>{!! $chart->options['chart_title'] !!}</h3>
        {!! $chart->renderHtml() !!}
    </div>
</div>

Terlihat sangat aneh, bukan? Apa itu a $bagan dan metode seperti renderHtml()? Mereka berasal dari paket Laravel Charts kami sendiri, untuk menggambar grafik sederhana seperti ini.

Kami menggunakan paket itu di dalam QuickAdminPanel untuk modul Dasbor dan Laporan, dan dalam hal ini untuk membuat bagan – ini adalah kode yang perlu kami tambahkan app/Http/Controllers/Admin/TransactionsController.php – indeks() metode:

use LaravelDaily\LaravelCharts\Classes\LaravelChart;

// ...

$date = explode(" - ", request()->input('from-to', "")); 

if(count($date) != 2)
{
    $date = [now()->subDays(29)->format("Y-m-d"), now()->format("Y-m-d")];
}

$settings = [
    'chart_title'           => 'Amount by days',
    'chart_type'            => 'line',
    'report_type'           => 'group_by_date',
    'model'                 => 'App\\Transaction',
    'group_by_field'        => 'transaction_date',
    'group_by_period'       => 'day',
    'aggregate_function'    => 'sum',
    'aggregate_field'       => 'amount',
    'filter_field'          => 'transaction_date',
    'range_date_start'      => $date[0],
    'range_date_end'        => $date[1],
    'group_by_field_format' => 'Y-m-d H:i:s',
    'column_class'          => 'col-md-12',
    'entries_number'        => '5',
    'continuous_time'       => true,
];

$chart = new LaravelChart($settings);

return view('admin.transactions.index', compact('chart'));

Dan itu saja, bagan juga selesai. Semoga itu bisa membantu!
Tautan ke repositori inti lagi: LaravelDaily/Laravel-Datatables-Dates-Chart