Okay, mari kita lanjut-keun development proyek improved-sniffle. Setelah kemarin kita bisa membuat data Phone Book tanpa pindah halaman (SPA experience), kali ini kita akan menambah fitur edit dan delete.

Series TALL stack

1. Modern SPA Application — Best Pratice TALL Stack bagian 1
2. Best Pratice TALL Stack bagian 2: Developing Time
3. Best Pratice TALL Stack bagian 3: Develop Edit/Delete Phone Book
4. Mencoba Laravel Octane di Heroku

Develop edit data

Kita akan manfaatkan modal yang telah kita buat sebelumnya, yakni CreateEditModal. Bedanya, kita akan melempar ID data yang akan kita edit. Caranya:

Ubah permalink edit menjadi button

<button type="button" class="text-indigo-600 hover:text-indigo-900">Edit</button>

Tambahkan attribute wire:click

Seperti pada tombol new, ketika pengguna click tombol edit maka kita akan menampilkan modal yang sama, tetapi dengan field yang telah terisi data existing. Untuk itu, kita perlu melempar parameter yang kemudian bisa ditangkap oleh CreateEditModal. Simak kode dibawah:

Kode diatas, blade akan mentransformasikan variable $line menjadi json dengan key phoneBook. Setelah itu, kita akan menangkap phoneBook di-method mount pada CreateEditModal.

Kemudian, di method mount juga, ketika ID dari PhoneBook ketemu, maka kita akan mengisi name, email dan phone dengan data existing. Setelah itu, ketika klik tombol submit form akan update data. Further more, cekidot commit’an dibawah.

https://github.com/wreckitq/improved-sniffle/commit/d90ec6dd265816ff17d7d5fdc3ab444e440a3467?source=post_page-----15af00da1363--------------------------------

// PS: agar data yang tampil di awal adalah data terbaru, kita perlu merubah class Manage.PhoneBook::latest()->paginate(7)

Develop delete data

Disini, kita masih akan menggunakan modal. Agar tampilan UI/UX kita lebih konsisten. Modal pada fitur delete ini berfungsi untuk konfirmasi apakah pengguna yakin akan menghapus data, kalau yakin maka proses delete data. Kalau tidak yakin menghapus data, maka kita akan close modal. Cukup simpel, kan?

Dan, karena secara konsep sama dengan materi sebelum-sebelumnya, silahkan langsung simak saja commit’an dibawah ini.

https://github.com/wreckitq/improved-sniffle/commit/6ee514acdcfc2ffd8d8e2e47ae9c88054f5e2a30?source=post_page-----15af00da1363--------------------------------

Further more, ada yang perlu kita refactor terkait x-button. Karena, ketika modal delete muncul harusnya tombol delete berwarna merah. Karena saat ini masih berwarna primary, maka kita perlu mengeluarkan class terkait warna pada berkas resources/views/components/button.blade.php. Kemudian, pasang warna masing-masing pada pemanggilan x-button. Sebenarnya ada opsi yang cukup clean code, tapi yasudahlah. Ada materi lain yang ingin saya coba heuheu. Cheers!

https://github.com/wreckitq/improved-sniffle/commit/65580f984ebfb8c58981392510b06a49e33b3ca8?source=post_page-----15af00da1363--------------------------------

Live demo dari project dapat diliat di improved-sniffle.herokuapp.com.