Edit Livewire Blade View

Silakan teman-teman buka file dengan nama edit.blade.php yang terletak didalam folder:

resources/views/livewire/catatan/

Kemudian ubah menjadi seperti berikut ini:

<div>
    <flux:modal name="edit-catatan" class="md:w-900">
        <div class="space-y-6">
            <div>
                <flux:heading size="lg">Edit Catatan</flux:heading>
                <flux:text class="mt-2">Make changes to your catatan details.</flux:text>
            </div>

            <flux:input label="Judul" wire:model="judul" placeholder="Masukkan Judul Catatan" />

            <flux:textarea label="Isi" wire:model="isi" placeholder="Masukkan Isi Catatan" />

            <div class="flex">
                <flux:spacer />

                <flux:button type="submit" variant="primary" wire:click="update">Update changes</flux:button>
            </div>
        </div>
    </flux:modal>
</div>

Struktur dan Penjelasan Kodenya:

<div>
<flux:modal name="edit-catatan" class="md:w-900">

Komponen <flux:modal> adalah komponen modal dari Flux UI. Properti name="edit-catatan" ini penting karena akan dicocokkan dengan pemanggilan dari class Edit.php:

Flux::modal('edit-catatan')->show();

class="md:w-900" adalah lebar modal saat di layar medium, diatur lebar 900px.

Bagian Header Modal

<div>
    <flux:heading size="lg">Edit Catatan</flux:heading>
    <flux:text class="mt-2">Make changes to your catatan details.</flux:text>
</div>

Bagian ini hanya menampilkan judul dan deskripsi kecil di atas form. Ini sekadar memperjelas tujuan dari form ini: untuk mengedit catatan.

Input Judul

<flux:input label="Judul" wire:model="judul" placeholder="Masukkan Judul Catatan" />

• flux:input adalah komponen input teks dari Flux UI.
• Properti wire:model="judul" akan mengikat input ini ke properti $judul di class Livewire Edit.php. Artinya, setiap perubahan nilai di input ini akan otomatis di-sync ke Livewire.
• placeholder hanya memberi petunjuk teks awal untuk user.

Input Isi

<flux:textarea label="Isi" wire:model="isi" placeholder="Masukkan Isi Catatan" />

Sama seperti input sebelumnya, tapi ini pakai <textarea> karena kita ingin pengguna bisa menulis teks panjang (seperti isi artikel atau catatan).

Tombol Submit

<div class="flex">
    <flux:spacer />

    <flux:button type="submit" variant="primary" wire:click="update">Update changes</flux:button>
</div>

• flux:spacer membuat tombol berada di pojok kanan.
• wire:click="update" artinya ketika tombol ini diklik, maka Livewire akan menjalankan fungsi update() dari class Edit.php.

Referensi Komponen FLUX UI

Jika teman-teman ingin menggunakan komponen-komponen lain dari Flux UI (selain modal dan input), bisa lihat ke situs resminya:

https://fluxui.dev/components/modal

Di sana teman-teman bisa temukan banyak komponen siap pakai yang sudah ramah Tailwind dan Livewire.

Kesimpulan

• View ini adalah form edit catatan yang tampil dalam bentuk modal.
• Menggunakan Flux UI agar tampilannya elegan dan konsisten.
• Komunikasi data antar frontend dan backend dilakukan secara reactive via Livewire, dengan wire:model dan wire:click.

Kalau diibaratkan, file ini adalah wajah dari fitur edit catatan, sedangkan logic-nya ada di class Edit.php.