AdityaDees

Jika anda menggunakan Vue dan Vuetify, maka VDialog/v-dialog mungkin adalah komponen yang selalu atau sering anda gunakan. Cara standar untuk menggunakan v-dialog adalah dengan menempatkannya menjadi satu pada halaman yang membutuhkan, lalu men-show-hide dialog dengan menggunakan v-model.

Cara seperti ini sebenarnya dapat lebih disederhanakan lagi, yaitu dengan memisahkan dialog tersebut menjadi komponen terpisah dan memanggilnya hanya dengan fungsi tertentu, misalkan open() yang mengembalikan Promise.

Dengan cara di atas, maka Dialog anda akan menjadi lebih terstruktur, modular dan lebih sederhana dikarenakan Dialog tersebut dapat di-import di semua tempat dan lebih mudah karena hanya perlu menunggu respon dari Promise, apakah resolve atau reject.  Tidak perlu bingung lagi tombol apakah yang ditekan user, apakah OK atau SAVE atau CANCEL atau yang lain, melainkan cukup hanya melihat data yang dikembalikan jika resolve atau reject.

Berikut ini adalah contoh bagaimana cara untuk menggunakan dan menyederhanakan dialog agar menjadi promise-based komponen.

1. Memisahkan Dialog

Langkah pertama adalah memisahkan komponen Dialog yang anda buat. Kebiasaan saya pribadi adalah membuat folder bernama components di root folder yang berisi semua komponen global. Silahkan buat komponen Dialog anda (misalkan diberi nama MDialog) pada folder components tersebut atau pada folder lain yang anda inginkan. Kira-kira bentuk dari komponen MDialog tersebut adalah sebagai berikut.

Kode:

<template>
  <v-dialog v-model="dialog" width="600">
    <v-card>
      <v-card-title class="headline grey lighten-2" primary-title>
This is My Dialog
      </v-card-title> 
      <v-card-text>
Lorem ipsum dolor sit amet, consectetur 
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-btn color="default">Batal</v-btn>
        <v-spacer></v-spacer>
        <v-btn dark color="green">Ok</v-btn>
        <v-btn dark color="blue">No</v-btn>
        <v-btn dark color="purple">Ya</v-btn>
        <v-btn dark color="red">Tidak</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
 
<script>
export default {
  data: () => ({
    dialog: false,
  }),
  methods: {
  }
};
</script>

Komponen MDialog di atas akan kita buat agar dapat dipanggil hanya dengan 1 method/function saja. Misalkan method/function tersebut bernama open. Method open ini akan mengembalikan Promise dimana promise tersebut akan di-resolve jika user menekan tombol Ok, No, Ya dan Tidak dengan return berupa String yang sesuai dengan nama tombol, dan akan di-reject jika user menekan tombol Batal.

2. Menambahkan methods Open yang mengembalikan Promise

Tambahkan pada data, dua buah variable yaitu resolve dan reject. Dimana resolve akan digunakan untuk menyimpan function resolve dan reject untuk function reject dari object Promise.

<script>
export default {
  data: () => ({
    dialog: false,
    resolve : null,
    reject : null,
  })
};
</script>

Setelah itu tambahkan juga 1 buah method bernama open. Dimana pada method open tersebut akan secara otomatis membuat object Promise dan men-show dialog dengan cara men-set nilai data dialog dari false menjadi true.

<script>
export default {
  data: () => ({
    dialog: false,
    resolve : null,
    reject : null,
  }),
 
  methods:{
    open(){
      return new Promise((resolve, reject)=>{
        this.resolve = resolve
        this.reject = reject
 
        this.dialog = true
      })
    }
  }
};
</script>

Yang perlu kita perhatikan dari methods open ini adalah, konstruktor kelas Promise yang memiliki 1 argumen yaitu sebuah function dengan 2 buah argumen berupa function, yaitu resolve dan reject.

new Promise(executor);

Pada kode di atas, pada saat meng-inisialisasi object Promise, function resolve kita simpan ke dalam variable/data resolve dan function reject juga kita simpan ke dalam variable/data reject. Perhatikan juga bahwa methods open akan langsung mengembalikan (return) Promise tersebut.

Jika anda masih bingung dengan Promise, maka sebaiknya anda pelajari lebih lanjut tentang Promise, salah satunya dari link ini : developer.mozilla.org Promise.

---

Baca juga :
Cara install dan integrasi GrapesJS dengan Vue 2

---

Selanjutnya kita buat 2 buah method untuk menutup dialog sebagai resolve dan sebagai reject, misalkan kita beri nama accept dan cancel. Masing-masing methods tersebut menerima 1 argumen yang akan dikembalikan dalam Promise. Tujuan dari methods accept ini adalah menutup dialog dan memanggil function resolve sehingga Promise akan masuk ke then. Dan tujuan dari cancel adalah untuk menutup dialog dan memanggil function reject sehingga Promise akan masuk ke catch.

methods: {
    open() {
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
 
        this.dialog = true;
      });
    },
    accept(str) {
      this.dialog = false;
      this.resolve(str);
    },
    cancel(str) {
      this.dialog = false;
      this.reject(str);
    }
}

Selanjutnya kita pasang methods tersebut ke tombol-tombol yang sesuai.

<v-card-actions>
   <v-btn @click="cancel('batal')" color="default">Batal</v-btn>
   <v-spacer></v-spacer>
   <v-btn @click="accept('Ok')" dark color="green">Ok</v-btn>
   <v-btn @click="accept('No')" dark color="blue">No</v-btn>
   <v-btn @click="accept('Ya')" dark color="purple">Ya</v-btn>
   <v-btn @click="accept('Tidak')" dark color="red">Tidak</v-btn>
</v-card-actions>

Sampai di sini maka MDialog kita sudah selesai dan siap untuk digunakan.

3. Menggunakan komponen MDialog

Setelah komponen MDialog selesai, maka kini saatnya untuk menggunakan komponen tersebut. Pada contoh kali ini, komponen MDialog tersebut akan saya gunakan pada halaman utama dari aplikasi saya, yaitu pada App.vue (Ini hanya contoh dan tentu saja anda dapat menggunakan komponen MDialog anda di sembarang halaman).

Kira-kira seperti ini lah bentuk halaman utama aplikasi ini. Sangat sederhana, hanya ada 1 tombol untuk membuka Dialog dan 1 div untuk menampilkan hasil dari tombol yang ditekan user.

Kode :

<template>
  <v-app>
    <v-content>
      <v-container fill-height>
        <v-layout column fill-height align-center justify-center>
          <div class="body-2">Hasil dialog : {{hasil || '-'}}</div>
          <div>
            <v-btn color="primary">Open Dialog</v-btn>
          </div>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>
 
<script>
export default {
  name: "App",
  components: {},
  data: () => ({
    hasil: ""
  }),
  methods: {}
};
</script>

Yang akan kita lakukan adalah, jika user menekan tombol Open Dialog, maka dialog MDialog kita akan muncul. Kemudian apapun tombol yang ditekan user maka hasilnya akan ditampilkan di dalam div hasil tersebut di atas.

Langkah pertama adalah mendaftarkan komponen MDialog dengan terlebih dahulu meng-import file MDialog.

<script>
import MDialog from "./components/MDialog.vue";
export default {
  name: "App",
  components: {
    MDialog
  },
  data: () => ({
    hasil: ""
  }),
  methods: {}
};
</script>

Pastikan anda tidak lupa untuk menambahkan MDialog ke dalam components.

Selanjutnya tambahkan komponen MDialog ke dalam halaman/template. Silahkan tempatkan disembarang tempat, tetapi saya sarankan berada di paling bawah tetapi tetap harus ada di dalam 1 root komponen. Setelah itu tambahkan ref kepada MDialog tersebut, misalkan kita beri referensi bernama dlg.

<template>
  <v-app>
    <v-content>
    . . .
    </v-content>
 
    <MDialog ref="dlg"/>
 
  </v-app>
</template>

Dengan menambahkan referensi (ref) ini, maka komponen MDialog tersebut di atas dapat di panggil via script dengan nama referensinya. Jika anda lupa atau kurang paham tentang apa itu ref dan $refs, silahkan cek penjelasannya di link berikut ini : https://vuejs.org/v2/api/#ref.

Selanjutnya, kita buat 1 buah methods untuk memanggil dan menampilkan MDialog beserta hasilnya. Dan tempatkan methods tersebut pada tombol Open Dialog.

<template>
  . . .
  <v-btn @click="openDialog" color="primary">Open Dialog</v-btn>
  . . .
</template>
  . . .
  methods: {
    openDialog() {
      this.$refs.dlg
        .open()
        .then(res => {
          this.hasil = res;
        })
        .catch(res => {
          this.hasil = res;
        });
   }
}

Penjelasan:

this.$refs.open();

Statement di atas artinya kita memanggil komponen MDialog yang dalam hal ini dipanggil via $refs. Kemudian kita panggil methods open dari MDialog dimana methods open ini mengembalikan Promise.

 .then(res => {
     this.hasil = res;
 })
 .catch(res => {
     this.hasil = res;
});

then adalah rantai yang akan dipanggil oleh Promise jika Promise tersebut resolve (User menekan tombol Ok, No, Ya, Tidak. Dan catch adalah rantai yang akan dipanggil oleh Promise jika Promise tersebut di reject (User menekan tombol Batal). Hasil dari Promise tersebut kemudian ditampilkan ke dalam div.

Selesai.

Mudah-mudahan penjelasan ini tidak membingungkan dan anda dapat mengikuti setiap langkahnya serta dapat memahami dan menggunakan cara ini untuk keperluan anda. Jika ada yang kurang jelas atau ada informasi yang salah, jangan ragu-ragu untuk menuliskannya di dalam komentar.

Sekian, selamat mencoba dan semoga yang sedikit ini bermanfaat.

Catatan :
Penggunaan ref menjadi suatu keharusan jika anda menggunakan cara ini. Oleh karena itu anda harus mengetahui batasan dari penggunaan ref ini. Salah satunya adalah, ref menjadi tidak berfungsi jika ref berada di dalam kalang v-if. Setidaknya sampai dengan tulisan ini ditulis.

Hasil akhir dan kode lengkap.

Jika anda membuat web app dengan menggunakan Vuetify, maka secara default aplikasi anda akan menggunakan Material Icon. Selain Material Icon, Vuetify juga mendukung Font Icon Material Design Icon, Font Awesome 5 dan Font Awesome 4. Nah, berikut ini adalah cara mudah untuk mengubah Icon Font dari Material Icon menjadi Material Design Icon.

Secara umum ada 2 cara untuk meng-"embed" icon font tersebut, yaitu dengan secara online menggunakan link ke cdn tertentu atau secara offline dengan cara menginstall npm package tertentu.

---

Baca juga :
Vue+Vuetify : Menggunakan VDialog/v-dialog agar menjadi Promise based komponen

---

Cara paling mudah untuk menambahkan font Material Design Icon adalah dengan menggunakan link cdn, yaitu dengan menambahkan link di bawah ini ke dalam index.html.

          
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
          
        

Alternatif lain adalah dengan menginstall font Material Design Icon di lokal/offline dengan menggunakan npm package @mdi/font, dengan cara

          
yarn add @mdi/font -D
          

atau

          
npm install @mdi/font -D
          

Jika anda memilih untuk menginstall font Material Design Icon dengan npm seperti di atas, maka anda harus meng-import css dari font material design icon tersebut di dalam main.js atau file js utama, seperti contoh di bawah ini

          
// main.js
import Vue from "vue";
import App from "./App";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

// import mdi icon css jika anda menginstall font secara lokal
// via npm install @mdi/font
import '@mdi/font/css/materialdesignicons.css';
// import di atas tidak diperlukan jika menggunakan cdn
          
        

Setelah font Material Design Icon ter-"embed", baik dengan cdn ataupun npm package, maka selanjutnya adalah mengubah setting Vuetify agar menggunakan iconfont Material Design Icon (mdi).

          
Vue.use(Vuetify, {
  iconfont: "mdi"
});
          
        

mdi seperti halnya fa untuk Font Awesome adalah prefix untuk font Material design.

Selanjutnya, anda sudah bisa menggunkan font Material Design Icon pada v-icon dengan menambahkan prefix mdi di setiap v-icon. Seperti contoh di bawah ini.

          
<v-layout row fill-height align-center justify-center>
  <v-icon>mdi-xbox</v-icon>
  <v-icon>mdi-account</v-icon>
  <v-icon>mdi-android</v-icon>
  <v-icon>mdi-debian</v-icon>
  <v-icon>mdi-square-inc-cash</v-icon>
</v-layout>
          
        

Di bawah ini adalah source code lengkap-nya.

Sekian dan selamat mencoba.

Sumber : Vuetify