Tanya Vue.js

index.html

        <section>
            <div class='mainwrapper'>
                  <left-panel v-bind:name='name' v-bind:username='username'/>

                <div class='mainpanel'>
                    <div class='contentpanel'>
<div class='row'>
	<div class='col-md-12'>
		<div class='spot-title-container'><h4>Users List</h4></div>
	</div>
</div>
<div class='row'>
	<div class='col-md-12'>
		<div class='panel panel-primary'>
			<div class='panel-heading'>
          	</div>
			<div class='panel-body'>
				<table class='table table-striped table-bordered responsive' id='users-table'>
					<thead>
						<tr>
							<th>Date</th>
                            <th>Username</th>
                            <th>Balance</th>
                            <th>Hashrate</th>
                            <th>Total Earning</th>
                            <th>Total Withdraw</th>
                            <th>Action</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for='(list, index) in users_list'>
							<td>{{ list.Date }}</td>
							<td>{{ list.Username }}</td>
                            <td>{{ list.Balance }}</td>
							<td>{{ list.Hashrate }}</td>
                            <td>{{ list.TotalEarning }}</td>
                            <td>{{ list.TotalWithdraw }}</td>
                            <td>
                                <button class='btn btn-primary btn-sm' v-on:click='editUser(index)'><i class='fa fa-edit'/> Edit</button>
                                <button class='btn btn-danger btn-sm' v-on:click='showRemoveUser(index)'><i class='fa fa-remove'/> Delete</button>
                            </td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

                    </div><!-- contentpanel -->
                    
                </div><!-- mainpanel -->
            </div><!-- mainwrapper -->
        </section>

<remove-modal ref='modalRemoveDetail' v-bind:users_selected='users_selected'/>

vue.js

function UserDetails(date, status, name, username, email, wallet, balance, hashrate, ref_balance, ref, shared_hashrate, litespeed_hashrate, ssd_hashrate, total_earning, total_withdraw) {
    this.Date = date;
    this.Status = status;
    this.Name = name;
    this.Username = username;
    this.Email = email;
    this.Wallet = wallet;
    this.Balance = balance;
    this.Hashrate = hashrate;
    this.RefBalance = ref_balance;
    this.Ref = ref;
    this.SharedHashrate = shared_hashrate;
    this.LitespeedHashrate = litespeed_hashrate;
    this.SSDHashrate = ssd_hashrate;
    this.TotalEarning = total_earning;
    this.TotalWithdraw = total_withdraw;
}

var modalRemoveDetail = Vue.component('remove-modal', {
    template: `
                <div id="modal-remove" class="modal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">User Delete Confirmation</h4>
                            </div>
                            <div class="modal-body">
                                <p>Are you sure want to remove "<b>{{ users_selected.Username }}</b>" ?</p>
                            </div>
                            <div class="modal-footer">
                                <button id="btn-remove" type="button" class="btn btn-success" v-on:click="removeUser"><i class="fa fa-check"></i> Remove</button>
                                <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-remove"></i> Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            `,
    props: {
        users_selected: {
            type: UserDetails,
            required: true
        }
    },
    data: function() {
        return {
            $modal: null
        }
    },
    methods: {
        show: function() {
            this.$modal.modal();
        },

        hide: function() {
            this.$modal.modal("hide");
        },

        removeUser: function() {
            $("#btn-remove").addClass("disabled");
            $("#btn-remove").html("Removing...");
            var vm = this;
            $.ajax({
                url: db_name + "?proses=adminDeleteUser&username=" + vm.users_selected.Username,
                dataType: "text",
                success: function(data) {
                    if (data == "success") {
                        vm.$parent.createAlert("Success", "User has been removed");
                        vm.hide();
                        setTimeout(function(){
                            window.location = "";
                        }, 3000)
                    }
                }
            })
        }
    },
    mounted: function() {
        var vm = this;
        vm.$modal = $('#modal-remove');
    }
});

var vueUsers = new Vue({
    el: "#vueWrapper",
    data: {
        name: "loading...",
        username: "loading...",
        users_list: [],
        users_selected: new UserDetails(null, null, null, null, null, null, null, null, null, null, null, null, null, null, null)
    },
    components: {
        'left-panel': left_panel,
        'remove-modal': modalRemoveDetail
    },

    methods: {
        createAlert: function(alert_title, alert_message) {
            jQuery.gritter.add({
                title: alert_title,
                text: alert_message,
                sticky: false,
                time: ''
            });
            return false
        },

        logout: function() {
            clearSession("hashvirtual_username");
        },

        showRemoveUser: function(selectIndex) {
            this.users_selected = this.users_list[selectIndex];
            this.$refs.modalRemoveDetail.show();
        },

        editUser: function(selectIndex) {

        }
    },

    mounted: function() {
        var vm = this;

        $.ajax({
            url: db_name + "?proses=adminGetData&db=Account",
            dataType: "text",
            success: function(data) {
                var list = $.parseJSON(data);
                vm.users_list = list;

                setTimeout(function() {
                    $("#users-table").DataTable({
                        "order": [
                            [0, "desc"]
                        ]
                    });
                }, 5);
            }
        })

        $.ajax({
            url: db_name + "?proses=getData&db=Admin&username=" + checkSession("hashvirtual_username"),
            dataType: "text",
            success: function(data) {
                var list = $.parseJSON(data);
                vm.name = list[0].Name;
                vm.username = "@" + list[0].Username;
            }
        })
    }
})

// END VUE