Sembunyikan Di Bawah Dropdown JavaScript – Panel Admin Cepat

Biasanya di setiap datatable terdapat kolom dengan tombol – Edit, View, Delete. Namun seringkali secara visual lebih menarik untuk “menyembunyikannya” dan hanya melihat beberapa ikon (seperti tiga titik vertikal) dan menampilkan tindakan tersebut hanya dengan mengklik ikon ini. Bagaimana cara mengimplementasikannya di Laravel, dan khususnya di QuickAdminPanel?

Apa yang saya bicarakan di sini?

Berikut penjelasan visualnya.

SEBELUM

SETELAH

Sekarang, bagaimana cara mengganti tombol-tombol itu dengan ikon+dropdown itu?

Secara umum, ini adalah perubahan JavaScript, tidak banyak tentang Laravel. Tapi saya akan mendasarkan artikel ini pada proyek Laravel yang dihasilkan oleh QuickAdminPanel kami.

Di sistem kami, Anda mungkin memiliki dua jenis Tabel Data – “reguler” dan berbasis AJAX. Jadi kita akan membahas kedua kasus tersebut.

---

Kasus 1. Dengan Tabel Data non-AJAX “Sederhana”.

Berikut potongan kode biasa sumber daya/tampilan/admin/pengguna/index.blade.php:

<td>
    @can('user_show')
        <a class="btn btn-xs btn-primary" href=" route("admin.users.show', $user->id) }}">
            {{ trans('global.view') }}
    @endcan

    @can('user_edit')
        <a class="btn btn-xs btn-info" href=" route("admin.users.edit', $user->id) }}">
            {{ trans('global.edit') }}
        </a>
    @endcan

    @can('user_delete')
        <form action=" route("admin.users.destroy', $user->id) }}" method="POST" onsubmit="return confirm('{{ trans('global.areYouSure') }}');" style="display: inline-block;">
            <input type="hidden" name="_method" value="DELETE">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type="submit" class="btn btn-xs btn-danger" value="{{ trans('global.delete') }}">
        </form>
    @endcan
</td>

Jadi, daftar tautan/tombol sederhana, dibatasi oleh perintah @can Blade.

Untuk mengubahnya menjadi dropdown bertitik, kami mengubahnya menjadi ini:

<td>
    <div class="dropdown text-center">
        <a class="dropdown-button" id="dropdown-menu-{{ $user->id }}" data-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-ellipsis-v"></i>
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdown-menu-{{ $user->id }}">
            @can('user_show')
                <a class="dropdown-item" href=" route("admin.users.show', $user->id) }}">
                    <i class="fa fa-user fa-lg"></i>
                    {{ trans('global.view') }}
                </a>
            @endcan

            @can('user_edit')
                <a class="dropdown-item" href=" route("admin.users.edit', $user->id) }}">
                    <i class="fa fa-edit"></i>
                    {{ trans('global.edit') }}
                </a>
            @endcan
            
            @can('user_delete')
                <form id="delete-{{ $user->id }}" action=" route("admin.users.destroy', $user->id) }}" method="POST">
                    @method('DELETE')
                    @csrf
                </form>
                <a class="dropdown-item" href="#" onclick="if(confirm('{{ trans('global.areYouSure') }}')) document.getElementById('delete-{{ $user->id }}').submit()">
                    <i class="fa fa-trash"></i>
                    {{ trans('global.delete') }}
                </a>
            @endcan
        </div>
    </div>

</td>

Lihat apa yang telah kita lakukan di sini? Baru saja ditambahkan kelas div=”tarik-turun dan di dalamnya semua tautannya ada div class=”menu tarik-turun” dengan div class=”item tarik-turun”.

Perubahan terakhir yang perlu kita lakukan di sini adalah beberapa CSS yang sama indeks.blade.php berkas di bagian bawah.

@section('styles')
<style>
.dataTables_scrollBody, .dataTables_wrapper {
    position: static !important;
}
.dropdown-button {
    cursor: pointer;
    font-size: 2em;
    display:block
}
.dropdown-menu i {
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -15%;
    color: #000;
}
</style>
@endsection

Itu mengasumsikan Anda memiliki @hasil(‘gaya’) kode di tata letak utama Anda di suatu tempat.

---

Kasus 2. Tabel Data Sisi Server AJAX

Dalam kasus AJAX, kami memuat tombol tindakan tersebut dari file Blade tertentu – sumber daya/tampilan/partials/datatablesActions.blade.php.

Ini sebenarnya terlihat sangat mirip dengan indeks.blade.php di atas, hanya saja lebih fleksibel karena digunakan semua tabel data di dalam proyek.

Secara default, tampilannya seperti ini:

@can($viewGate)
    <a class="btn btn-xs btn-primary" href=" route("admin.' . $crudRoutePart . '.show', $row->id) }}">
        {{ trans('global.view') }}
@endcan
@can($editGate)
    <a class="btn btn-xs btn-info" href=" route("admin.' . $crudRoutePart . '.edit', $row->id) }}">
        {{ trans('global.edit') }}
    </a>
@endcan
@can($deleteGate)
    <form action=" route("admin.' . $crudRoutePart . '.destroy', $row->id) }}" method="POST" onsubmit="return confirm('{{ trans('global.areYouSure') }}');" style="display: inline-block;">
        <input type="hidden" name="_method" value="DELETE">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="submit" class="btn btn-xs btn-danger" value="{{ trans('global.delete') }}">
    </form>
@endcan 

Mirip, kan? Tiga tombol. Hampir identik dengan tweak di atas, mari kita ubah menjadi dropdown ikon tiga titik.

<div class="dropdown text-center">
    <a class="dropdown-button" id="dropdown-menu-{{ $row->id }}" data-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-ellipsis-v"></i>
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdown-menu-{{ $row->id }}">
        @can($viewGate)
            <a class="dropdown-item" href=" route("admin.' . $crudRoutePart . '.show', $row->id) }}">
                <i class="fa fa-eye fa-lg"></i>
                {{ trans('global.view') }}
            </a>
        @endcan

        @can($editGate)
            <a class="dropdown-item" href=" route("admin.' . $crudRoutePart . '.edit', $row->id) }}">
                <i class="fa fa-edit"></i>
                {{ trans('global.edit') }}
            </a>
        @endcan
        
        @can($deleteGate)
            <form id="delete-{{ $row->id }}" action=" route("admin.' . $crudRoutePart . '.destroy', $row->id) }}" method="POST">
                @method('DELETE')
                @csrf
            </form>
            <a class="dropdown-item" href="#" onclick="if(confirm('{{ trans('global.areYouSure') }}')) document.getElementById('delete-{{ $row->id }}').submit()">
                <i class="fa fa-trash"></i>
                {{ trans('global.delete') }}
            </a>
        @endcan
    </div>
</div>

Hal yang sama – DIV dengan kelas CSS terkait dropdown.