​

<style>

#app {

  font-family: Roboto, Helvetica, Arial, sans-serif;

}

</style>

<template>

  <MDBBtn @click="reloadDataset9" color="primary" class="mb-4">

    Reload data

    <MDBIcon icon="sync" class="ms-2" />

  </MDBBtn>

  <MDBDatatable :dataset="dataset9" :loading="loading9" @render="setActions" />

</template>

​

<script>

import { ref } from "vue";

import { MDBDatatable, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";

​

export default {

  name: "UsersDashboard",

  components: {

    MDBDatatable,

    MDBBtn,

    MDBIcon

  },

  setup() {

    const dataset9 = ref({

      columns: [

        { label: "ID", field: "userId" },

        { label: "Email", field: "email" },

        { label: "First Name", field: "firstName" },

        { label: "Last Name", field: "lastName" },

        { label: "Phone", field: "phone" },

        { label: "Contact", field: "contact", sort: false},

      ]

    });

    const loading9 = ref(false);

    const reloadDataset9 = () => {

      dataset9.value.rows = [];

      loading9.value = true;

​

      // timeout is for demonstration purposes only

      setTimeout(() => {

        fetch("http://localhost:8082/users")

            .then(response => response.json())

            .then(data => {

              dataset9.value.rows = data.map(user => ({

                ...user,

                // address: `${user.address.city}, ${user.address.street}`,

                // company: user.company.name

                contact: `

                <button class="call-btn btn btn-outline-primary btn-floating btn-sm" data-mdb-user="${user.userId}"><i class="fa fa-phone"></i></button>

                `

              }));

              loading9.value = false;

            });

      }, 2000);

    };

​

    const setActions = () => {

      document.getElementsByClassName("call-btn").forEach(btn => {

        btn.addEventListener("click", () => {

          //console.log(`call ${btn.attributes["data-mdb-user"].value}`);

          console.log(`call ${btn.attributes["data-mdb-user"].value}`);

        });

      });

    };

​

    return {

      dataset9,

      loading9,

      reloadDataset9,

      setActions,

    };

  }

};

</script>

​

<style scoped>

​

</style>