how to create dependent dropdown?

[zamcoder]

i want to create dependent dropdown, when i choose my "kodekegiatan" it will fetch result for "kodesubkegiatan"

<?php

namespace App\Http\Livewire\SuperAdmin;

use App\Models\KodeKegiatan;
use App\Models\KodeSubKegiatan;
use App\Models\KodeRekening;
use Illuminate\Support\Carbon;
use Illuminate\Database\QueryException;
use Illuminate\Database\Eloquent\Builder;
use PowerComponents\LivewirePowerGrid\Button;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridEloquent;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Traits\ActionButton;
use PowerComponents\LivewirePowerGrid\Rules\Rule;

final class KodeRekeningTable extends PowerGridComponent
{
    use ActionButton;

    //Messages informing success/error data is updated.
    public bool $showUpdateMessages = true;
    public array $perPageValues = [10, 25, 50, 75, 100];
    public string $primaryKey = 'kode_rekening.id';

    /*
    |--------------------------------------------------------------------------
    |  Features Setup
    |--------------------------------------------------------------------------
    | Setup Table's general features
    |
    */
    public function setUp(): void
    {
        $this->showPerPage(10)
            ->showRecordCount('full')
            ->showSearchInput()
            ->showExportOption('download', ['excel', 'csv']);
    }

    /*
    |--------------------------------------------------------------------------
    |  Datasource
    |--------------------------------------------------------------------------
    | Provides data to your Table using a Model or Collection
    |
    */

    /**
    * PowerGrid datasource.
    *
    * @return  \Illuminate\Database\Eloquent\Builder<\App\Models\KodeRekening>|null
    */
    public function datasource(): ?Builder
    {
        return KodeRekening::query()
            ->join('kode_sub_kegiatan', function ($kodeSubKegiatan) {
                $kodeSubKegiatan->on('kode_rekening.kode_sub_kegiatan_id', '=', 'kode_sub_kegiatan.id');
            })
            ->join('kode_kegiatan', function ($kodeKegiatan) {
                $kodeKegiatan->on('kode_sub_kegiatan.kode_kegiatan_id', '=', 'kode_kegiatan.id');
            })
            ->select('kode_rekening.*', 'kode_sub_kegiatan.kode as kode_sub_kegiatan_kode', 'kode_sub_kegiatan.nama as kode_sub_kegiatan_nama', 'kode_kegiatan.kode as kode_kegiatan_kode', 'kode_kegiatan.nama as kode_kegiatan_nama')
            ->whereNull('kode_rekening.deleted_at')
            ->whereNull('kode_sub_kegiatan.deleted_at')
            ->whereNull('kode_kegiatan.deleted_at');
    }

    /*
    |--------------------------------------------------------------------------
    |  Relationship Search
    |--------------------------------------------------------------------------
    | Configure here relationships to be used by the Search and Table Filters.
    |
    */

    /**
     * Relationship search.
     *
     * @return array<string, array<int, string>>
     */
    public function relationSearch(): array
    {
        return [
            'kode_kegiatan' => [
                'kode',
                'nama',
            ],
            'kode_sub_kegiatan' => [
                'kode',
                'nama',
            ],
        ];
    }

    /*
    |--------------------------------------------------------------------------
    |  Add Column
    |--------------------------------------------------------------------------
    | Make Datasource fields available to be used as columns.
    | You can pass a closure to transform/modify the data.
    |
    */
    public function addColumns(): ?PowerGridEloquent
    {
        return PowerGrid::eloquent()
            ->addColumn('id')
            ->addColumn('kode_kegiatan', function (KodeRekening $model) {
                return $model->kodeSubKegiatan->kodeKegiatan->kode.' - '.$model->kodeSubKegiatan->kodeKegiatan->nama;
            })
            ->addColumn('kode_sub_kegiatan', function (KodeRekening $model) {
                return $model->kodeSubKegiatan->kode.' - '.$model->kodeSubKegiatan->nama;
            })
            ->addColumn('kode')
            ->addColumn('nama')
            ->addColumn('created_at_formatted', function(KodeRekening $model) {
                return Carbon::parse($model->created_at)->format('d/m/Y H:i:s');
            })
            ->addColumn('updated_at_formatted', function(KodeRekening $model) {
                return Carbon::parse($model->updated_at)->format('d/m/Y H:i:s');
            });
    }

    /*
    |--------------------------------------------------------------------------
    |  Include Columns
    |--------------------------------------------------------------------------
    | Include the columns added columns, making them visible on the Table.
    | Each column can be configured with properties, filters, actions...
    |
    */

     /**
     * PowerGrid Columns.
     *
     * @return array<int, Column>
     */
    public function columns(): array
    {
        return [
            Column::add()
                ->title('Kode Kegiatan')
                ->field('kode_kegiatan', 'kode_kegiatan.nama')
                ->sortable()
                ->searchable()
                ->makeInputSelect(KodeKegiatan::all(), 'nama', 'kode_kegiatan_id', ['live-search' => false]),

            Column::add()
                ->title('Kode Sub Kegiatan')
                ->field('kode_sub_kegiatan', 'kode_sub_kegiatan.nama')
                ->sortable()
                ->searchable()
                ->makeInputSelect(KodeSubKegiatan::all(), 'nama', 'kode_sub_kegiatan_id', ['live-search' => false]),

            Column::add()
                ->title('Kode')
                ->field('kode')
                ->sortable()
                ->searchable()
                ->makeInputText(),

            Column::add()
                ->title('Nama')
                ->field('nama')
                ->sortable()
                ->searchable()
                ->makeInputText(),

            Column::add()
                ->title('Created')
                ->field('created_at_formatted', 'created_at')
                ->sortable(),

        ]
;
    }

    /*
    |--------------------------------------------------------------------------
    | Actions Method
    |--------------------------------------------------------------------------
    | Enable the method below only if the Routes below are defined in your app.
    |
    */

     /**
     * PowerGrid KodeRekening Action Buttons.
     *
     * @return array<int, \PowerComponents\LivewirePowerGrid\Button>
     */


    public function actions(): array
    {
        return [
            Button::add('Edit')
                ->caption(__('Edit'))
                ->class('block text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-l text-xs px-5 py-2 text-center grow m-0')
                ->openModal('super-admin.kode-rekening-edit', [
                    'kodeRekeningId'       => 'id',
                ]),

            Button::add('Delete')
                ->caption(__('Delete'))
                ->class('block text-white bg-red-500 hover:bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-r text-xs px-5 py-2 text-center grow m-0')
                ->openModal('super-admin.kode-rekening-delete', [
                    'kodeRekeningId'       => 'id',
                    'confirmationTitle'         => 'Delete data?',
                    'confirmationDescription'   => 'Apakah anda yakin untuk menghapus data ini?',
                ]),
        ];
    }


    /*
    |--------------------------------------------------------------------------
    | Actions Rules
    |--------------------------------------------------------------------------
    | Enable the method below to configure Rules for your Table and Action Buttons.
    |
    */

     /**
     * PowerGrid KodeRekening Action Rules.
     *
     * @return array<int, \PowerComponents\LivewirePowerGrid\Rules\RuleActions>
     */

    /*
    public function actionRules(): array
    {
       return [

           //Hide button edit for ID 1
            Rule::button('edit')
                ->when(fn($kode-rekening) => $kode-rekening->id === 1)
                ->hide(),
        ];
    }
    */

    /*
    |--------------------------------------------------------------------------
    | Edit Method
    |--------------------------------------------------------------------------
    | Enable the method below to use editOnClick() or toggleable() methods.
    | Data must be validated and treated (see "Update Data" in PowerGrid doc).
    |
    */

     /**
     * PowerGrid KodeRekening Update.
     *
     * @param array<string,string> $data
     */

    /*
    public function update(array $data ): bool
    {
       try {
           $updated = KodeRekening::query()->findOrFail($data['id'])
                ->update([
                    $data['field'] => $data['value'],
                ]);
       } catch (QueryException $exception) {
           $updated = false;
       }
       return $updated;
    }

    public function updateMessages(string $status = 'error', string $field = '_default_message'): string
    {
        $updateMessages = [
            'success'   => [
                '_default_message' => __('Data has been updated successfully!'),
                //'custom_field'   => __('Custom Field updated successfully!'),
            ],
            'error' => [
                '_default_message' => __('Error updating the data.'),
                //'custom_field'   => __('Error updating custom field.'),
            ]
        ];

        $message = ($updateMessages[$status][$field] ?? $updateMessages[$status]['_default_message']);

        return (is_string($message)) ? $message : 'Error!';
    }
    */
}

it should be when i select this kegiatan 1, it will fetch kode sub kegiatan that have relation with kegiatan 1

[zamcoder]

how @luanfreitasdev

[codemasterjoel]

I have the same problem

a close solution would be that you pass the code that you selected in the KodeKegiatan input to the kode_sub_kegiatan filter

         Column::add()
             ->title('Kode Sub Kegiatan')
             ->field('kode_sub_kegiatan', 'kode_sub_kegiatan.nama')
             ->sortable()
             ->searchable()
             ->makeInputSelect(KodeSubKegiatan::all()->where('kode_kegiatan', '=', 'kode_kegiatan.kode'), 'nama', 'kode_sub_kegiatan_id', ['live-search' => false]),

but I don't know how to pass the id of the selected field in the previous select

[luanfreitasdev]

I haven't tested it yet. But I'll think of something 🤔

[younus93]

Did you guys find a solution to this?

[zamcoder]

No solution from dev

…

On Mon, Aug 14, 2023, 12:24 PM Younus Farveaz ***@***.***> wrote: Did you guys find a solution to this? — Reply to this email directly, view it on GitHub <#380 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASKVRCXRZYG6TVTM7ERE47LXVGZCDANCNFSM6AAAAAAQKDMYHU> . You are receiving this because you authored the thread.Message ID: <Power-Components/livewire-powergrid/repo-discussions/380/comments/6717261 @github.com>

[luanfreitasdev]

Hi @zamcoder , which version are you using?