Gabut Mode On: Bikin Aplikasi Inventaris Kosan (Bagian 6 - Delete Item)

Heyooo.

1. Mencatat barang-barang
2. Menampilkan daftarnya
3. Menghapus data barang

Sudah dua dari tiga fitur yang saya inginkan dari MVP ini. Sekarang saatnya merampungkan fitur ketiga.

Seperti biasa, yang tidak ingin basa-basi boleh langsung ke bagian paling bawah. Scroll terus~

Untuk bisa menghapus barang, user butuh interface. Bentuk umum yang paling sederhana mungkin tombol dengan huruf "X". Hmm, coba saya pasang di list item ya.

...
<li v-for="(item, index) in items" class="w-full">
  <div class="border p-2 flex w-full justify-between">
    <div class="flex">
      <div class="border px-2 mr-2">
        {{ index+1 }}
      </div>
      <div>
        <p class="text-xs text-gray-600">name:</p>
        <p class="font-bold">{{ item.name }}</p>
        <p class="text-xs text-gray-600">description: "</p>"
        <p>{{ item.description }}</p>
      </div>
    </div>
    <div>
      <button class="cursor-pointer">X</button>
    </div>
  </div>
</li>
...

OK, lumayan. Sekarang pasang pendengar acara alias event listenernya. Hehe.

...
  <button class="cursor-pointer" @click="remove(index)">X</button>
...

...
  methods: {
    add(){
      ...
    },

    // ini method untuk delete itemnya nanti
    remove(index){
      console.log(index)
    }
  }
...

Sekarang saya bisa tahu mana item yang terpilih untuk di-delete, dengan menggunakan index sebagai pembeda atau identitas si item.

Kalau user masukin item yang sama dua atau berkali-kali, misalnya dia punya dua meja yang sama-sama beli di Jepara, pasti indexnya beda. Meja Jepara 1 atau Meja Jepara 2, sesuai index item-nya.

Langkah berikutnya, saya hapus item dengan index yang terpilih.

...
    remove(index){
      this.items.splice(index, 1)
    }
...

Yasss, fungsi delete-nya sudah jadi!

User story ketiga sudah terpenuhi, harusnya user sudah bisa memakai aplikasinya, dong?

Mencatat barang: bisa ✔️
Menampilkan daftar barang: bisa ✔️
Menghapus barang: bisa ✔️

Terus? Bungkus?

Ada masalah yang belum terpikirkan sejak bagian satu: kalau aplikasinya di-refresh atau ke-refresh, catatan barangnya hilang. Kalau begini kan MVP-nya jadi tidak mantap. Bayangin udah nginput puluhan item, tiba-tiba browsernya ga sengaja kerefresh. Duh...

Maka dengan tempo yang sesingkat-singkatnya, saya akan memasang fungsi save/simpan ke storage. Lebih tepatnya storage yang ada di browser saya alias localStorage. Mari kita coba integrasinya. Buat method save:

...
methods: {
  add(){...},
  remove(){...},

  // ini dia methodnya
  save(){
    localStorage.setItem('inkos_data', JSON.stringify(this.items))
  }
}
...

Saya akan panggil fungsi save setiap kali catatan kita this.items mengalami perubahan.

...
  methods: {
    add(){
      let item = {
        name: this.name,
        description: this.description
      }

      this.items.push(item)

      // ada penambahan ke "this.items", berarti disini pasang
      this.save()

      this.name = ''
      this.description = ''

      console.log(this.items)
    },
    remove(index){
      this.items.splice(index, 1)

      // ada pengurangan ke "this.items", berarti disini juga pasang
      this.save()
    },
    save(){
      localStorage.setItem('inkos_data', JSON.stringify(this.items))
    }
  }
...

OK, coba dites dulu.

...

Hmm, masih belum nge-save kalau direfresh? Tapi ada di local storage?

Setiap kali kita refresh, aplikasinya selalu kosong padahal ada data yang harus ditampilkan dari local storage. Artinya kita harus ambil data itu dan bilang ke aplikasinya untuk menampilkan data itu, jika ada.

• Refresh
• Ada datanya? Tampilin
• Ga ada datanya? Yaudah kasih yang ada apa

Kita akan cek data setelah aplikasi di-refresh. Bisa kita tulis kodenya di mountednya Vue. Jadi setiap kali aplikasi Vue kita terpasang di browser, kita cek ada data di storage atau tidak.

...
  data(){ ... },

  mounted() {
    let data = localStorage.getItem('inkos_data')
    if (data) this.items = JSON.parse(data)
  },

  methods: { ... }
...

Setelah dicoba, hasilnya... mantap!

Ini baru minimun viable product yang saya inginkan. Untuk sementara inventarisasi barang kosan sudah bisa dimulai. Hehe.

Terima kasih sudah menyimak sampai bagian ini. Sampai jumpa di artikel yang lain!

1. Mencatat barang-barang
2. Menampilkan daftarnya
3. Menghapus data barang 🎉

Mau coba juga? Atau mau lihat source code nya?
Mampir kesini:

• Inkos
• Inkos' source code