Filter Data

Menampilkan Field Yang Ingin Difilter

Perlu di ingat untuk menampilkan komponen filter pada halaman index bisa menggunakan property subHeader pada komponen TableLowcode.

 subHeader={
     <FormFilter
         baseUrl={baseUrl}
         onSubmit={(data) => {
             if (data.status) {
             data.status = data.status.value;
             }

             setFilterBy(data);
             setPageConfig((prev) => ({ ...prev, page: 0 }));
         }}
         onCancel={(reset) => {
             reset();
             setFilterBy?.(undefined);
         }}
         withCreateButton
         createButtonUrl={`create?kpt21ba_id=${kpt21baId}`}
         spec={specSearch}
     />
 }

Gunakan property spec ada komponen FormFilter, untuk menampilkan field-field yang ingin di filter pada halaman index.
```
spec = { specSearch };
```

Berikut isi dari variabel specSearch.

const specSearch = [
  {
    form_field_type: "INPUT_TEXT",
    label: "No. Sprin Geledah",
    name: "sprindah",
    type: "text",
  },
  {
    form_field_type: "INPUT_TEXT",
    label: "Tanggal Dibuat",
    name: "created",
    type: "date",
  },
  {
    form_field_type: "INPUT_TEXT",
    label: "No. Sprindik",
    name: "sprindik",
    type: "text",
  },
  {
    form_field_type: "INPUT_SELECT",
    label: "Status",
    name: "status",
    type: "text",
    select_options: {
      method: "GET",
      option_key: "key",
      option_label: "label",
      url: "/api/kpm21c/kpt21ca/get-status",
    },
  },
];

Filter Field Select

Ada yang perlu di kostumisasi, jika ingin memfilter data menggunakan field Select.
Karena hasil dari Select berupa json.

Sehingga untuk mengambil nilai yang ingin di filter yaitu value dari json tersebut bisa menggunakan onSubmit pada komponen FormFilter.

 onSubmit={(data) => {
     if (data.status) {
         data.status = data.status.value;
     }

     setFilterBy(data);
     setPageConfig((prev) => ({ ...prev, page: 0 }));
 }}

Melakukan Filter Data

Tanpa Query

Untuk mendaftarkan kolom yang ingin di filter, bisa ditambahkan property $filterableColumns pada model.

protected array $filterableColumns = [
    'status',
];

⚠️ Catatan: untuk kolom yang dapat difilter menggunakan metode diatas adalah hanya data varchar dan int

Dengan Query

Ada beberapa kasus khusus pada filter yang mengharuskan menggunakan query.
Contohnya pada filter data relasi ataupun data json.

⚠️ Perlu diingat: untuk kolom yang di filter Dengan Query tidak perlu didaftarkan pada $filterableColumns.

Override method customFilter pada service.

 protected function customFilter(Builder $query, Request $request): Builder
 {
     return $query;
 }

Periksa jika parameter kolom yang difilter ada atau tidak, jika ada maka lakukan query filter.

 protected function customFilter(Builder $query, Request $request): Builder
 {
     if ($request->input('filter.kpt443a_number')) {
         $keyword = $request->input('filter.kpt443a_number');

         $query->whereHas(
             'kpt443a',
             fn ($q) => $q->where('kpt443a_number', 'like', "%$keyword%")
         );
     }

     return $query;
 }

Rentang Tanggal

Untuk menampilkan field filter pada FE yang memiliki rentang tanggal bisa menggunakan tipe form INPUT_DATE_RANGE pada spesifikasi filter.

 {
     form_field_type: "INPUT_DATE_RANGE",
     label: "Periode Surat",
     name: "date_letter",
     type: "date",
 },

Dan pada model tinggal mendaftarkan scope FilterDateRangeScope dengan parameter pertama adalah nama kolom.
```
 protected static function booted(): void
 {
     static::addGlobalScope(new FilterDateRangeScope('date_letter'));
 }
```
⚠️ Perlu diingat: name dan parameter pertama scope adalah nama kolom pada tabel tanpa suffix _start dan _end.

Filter Data

Menampilkan Field Yang Ingin Difilter​

Filter Field Select​

Melakukan Filter Data​

Tanpa Query​

Dengan Query​

Rentang Tanggal​