From f836b55347cafe482ad1fa0c30d6b87d265309c0 Mon Sep 17 00:00:00 2001
From: kevinfernaldy <kevin.fernaldy@gmail.com>
Date: Sun, 14 Apr 2019 23:15:36 +0700
Subject: [PATCH] Created individual modals
* Also added AJAX request support
---
.../components/modals/VADaftarUserDelete.vue | 0
.../components/modals/VADaftarUserDetail.vue | 49 +++++
.../components/modals/VADaftarUserEdit.vue | 77 +++++++
frontend/src/lib/scripts.js | 1 +
frontend/src/pages/daftar_user.vue | 198 +++++++-----------
5 files changed, 205 insertions(+), 120 deletions(-)
create mode 100644 frontend/src/components/modals/VADaftarUserDelete.vue
create mode 100644 frontend/src/components/modals/VADaftarUserDetail.vue
create mode 100644 frontend/src/components/modals/VADaftarUserEdit.vue
diff --git a/frontend/src/components/modals/VADaftarUserDelete.vue b/frontend/src/components/modals/VADaftarUserDelete.vue
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/modals/VADaftarUserDetail.vue b/frontend/src/components/modals/VADaftarUserDetail.vue
new file mode 100644
index 0000000..9ea172b
--- /dev/null
+++ b/frontend/src/components/modals/VADaftarUserDetail.vue
@@ -0,0 +1,49 @@
+<template>
+ <div class="modal fade" id="modal-detail">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ <h4 class="modal-title">Informasi Detil</h4>
+ </div>
+ <div class="modal-body">
+ <dl class="dl-horizontal">
+ <dt>ID</dt>
+ <dd>{{ userData.id }}</dd>
+ <dt>Role</dt>
+ <dd>{{ userData.role }}</dd>
+ <dt>Nama</dt>
+ <dd>{{ userData.nama }}</dd>
+ <dt>Email</dt>
+ <dd>{{ userData.role }}</dd>
+ <dt>Username</dt>
+ <dd>{{ userData.username }}</dd>
+ <dt>Dinas</dt>
+ <dd>{{ userData.dinas }}</dd>
+ </dl>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'DaftarUserDetail',
+ props: {
+ userData: {
+ type: Object,
+ default () {
+ return {
+ name: ''
+ }
+ }
+ }
+ }
+}
+</script>
diff --git a/frontend/src/components/modals/VADaftarUserEdit.vue b/frontend/src/components/modals/VADaftarUserEdit.vue
new file mode 100644
index 0000000..e72c46d
--- /dev/null
+++ b/frontend/src/components/modals/VADaftarUserEdit.vue
@@ -0,0 +1,77 @@
+<template>
+ <div class="modal fade" id="modal-edit">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ <h4 class="modal-title">Edit Entry</h4>
+ </div>
+ <div class="modal-body">
+ <form class="form-horizontal">
+ <div class="form-group">
+ <label for="user-id" class="col-sm-3 control-label">ID</label>
+ <div class="col-sm-8">
+ <input class="form-control" id="user-id" :value="userData.id">
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="role" class="col-sm-3 control-label">Role</label>
+ <div class="col-sm-8">
+ <select class="form-control" id="role">
+ <option>Admin diskominfo</option>
+ <option>Member diskominfo</option>
+ </select>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="name" class="col-sm-3 control-label">Nama</label>
+ <div class="col-sm-8">
+ <input class="form-control" id="name" :value="userData.nama">
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="email" class="col-sm-3 control-label">Email</label>
+ <div class="col-sm-8">
+ <input type="email" class="form-control" id="email" :value="userData.email">
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="username" class="col-sm-3 control-label">Username</label>
+ <div class="col-sm-8">
+ <input class="form-control" id="username" :value="userData.username">
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="dinas" class="col-sm-3 control-label">Dinas</label>
+ <div class="col-sm-8">
+ <input class="form-control" id="dinas" :value="userData.dinas">
+ </div>
+ </div>
+ </form>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'DaftarUserEdit',
+ props: {
+ userData: {
+ type: Object,
+ default () {
+ return {
+ name: ''
+ }
+ }
+ }
+ }
+}
+</script>
diff --git a/frontend/src/lib/scripts.js b/frontend/src/lib/scripts.js
index 8baa4f5..8398587 100644
--- a/frontend/src/lib/scripts.js
+++ b/frontend/src/lib/scripts.js
@@ -1,3 +1,4 @@
import 'expose-loader?$!expose-loader?jQuery!jquery'
import 'admin-lte'
import 'bootstrap'
+import axios from 'axios'
diff --git a/frontend/src/pages/daftar_user.vue b/frontend/src/pages/daftar_user.vue
index 899ee05..53f283a 100644
--- a/frontend/src/pages/daftar_user.vue
+++ b/frontend/src/pages/daftar_user.vue
@@ -18,139 +18,97 @@
</div>
</div>
</div>
- <div class="modal fade" id="modal-edit">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
- <h4 class="modal-title">Edit Entry</h4>
- </div>
- <div class="modal-body">
- <form class="form-horizontal">
- <div class="form-group">
- <label for="user_id" class="col-sm-3 control-label">ID</label>
- <div class="col-sm-8">
- <input class="form-control" id="user_id">
- </div>
- </div>
- <div class="form-group">
- <label for="role" class="col-sm-3 control-label">Role</label>
- <div class="col-sm-8">
- <select class="form-control" id="role">
- <option>Admin diskominfo</option>
- <option>Member diskominfo</option>
- </select>
- </div>
- </div>
- <div class="form-group">
- <label for="name" class="col-sm-3 control-label">Nama</label>
- <div class="col-sm-8">
- <input class="form-control" id="name">
- </div>
- </div>
- <div class="form-group">
- <label for="email" class="col-sm-3 control-label">Email</label>
- <div class="col-sm-8">
- <input type="email" class="form-control" id="email">
- </div>
- </div>
- <div class="form-group">
- <label for="username" class="col-sm-3 control-label">Username</label>
- <div class="col-sm-8">
- <input class="form-control" id="username">
- </div>
- </div>
- <div class="form-group">
- <label for="password" class="col-sm-3 control-label">Password</label>
- <div class="col-sm-8">
- <input type="password" class="form-control" id="password">
- </div>
- </div>
- <div class="form-group">
- <label for="dinas" class="col-sm-3 control-label">Dinas</label>
- <div class="col-sm-8">
- <input class="form-control" id="dinas">
- </div>
- </div>
- </form>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary">Save changes</button>
- </div>
- </div>
- </div>
- </div>
+ <va-daftar-user-edit :userData="passedUserData"></va-daftar-user-edit>
+ <va-daftar-user-detail :userData="passedUserData"></va-daftar-user-detail>
</section>
</div>
</template>
<script>
-require('jquery')
+import VADaftarUserEdit from '../components/modals/VADaftarUserEdit.vue'
+import VADaftarUserDetail from '../components/modals/VADaftarUserDetail.vue'
+import axios from 'axios'
require('datatables.net-bs')
-$(document).ready(function() {
- var table = $('#user-table').DataTable({
- 'columns': [
- {'data': 'id', 'title': 'ID'},
- {'data': 'nama', 'title': 'Nama'},
- {'data': 'role', 'title': 'Role'},
- {'data': 'dinas', 'title': 'Dinas'},
- {'title': 'Action'}
- ],
- 'columnDefs': [{
- 'targets': -1,
- 'data': null,
- 'defaultContent': `
- <div class="col-sm-3">
- <i class="fa fa-info-circle fa-2x" data-toggle="tooltip modal" title="Details"></i>
- </div>
- <div class="col-sm-3">
- <div class="table-actions" data-toggle="modal" data-target="#modal-edit">
- <i class="fa fa-edit fa-2x" data-toggle="tooltip" title="Edit"></i>
- </div>
- </div>
- <div class="col-sm-3">
- <i class="fa fa-trash fa-2x" data-toggle="tooltip" title="Delete"></i>
- </div>
- `
- }]
- });
-
- table.rows.add([
- {
- 'id': '1',
- 'role': 'Admin Diskominfo',
- 'nama': 'Kevin',
- 'email': 'WWW@YYY.ZZZ',
- 'username': 'kevinfe',
- 'password': '#HASHED#',
- 'dinas': 'Diskominfo'
+export default {
+ name: 'DaftarUser',
+ data: function () {
+ return {
+ userData: [],
+ passedUserData: {}
+ }
+ },
+ methods: {
+ getData() {
+ let vm = this
+ axios.get('http://localhost:8081/getusers').then((res) => {
+ vm.userData = res.data
+ }, (error) => {
+ console.log('error')
+ })
}
-
- ]).draw();
+ },
+ mounted: function () {
+ let vm = this
+ vm.getData()
+ vm.$nextTick(function () {
+ var table = $('#user-table').DataTable({
+ 'columns': [
+ {'data': 'id', 'title': 'ID'},
+ {'data': 'nama', 'title': 'Nama'},
+ {'data': 'role', 'title': 'Role'},
+ {'data': 'dinas', 'title': 'Dinas'},
+ {'title': 'Action'}
+ ],
+ 'columnDefs': [{
+ 'targets': -1,
+ 'data': null,
+ 'defaultContent': `
+ <div class="col-sm-3">
+ <div class="table-actions" data-toggle="modal" data-target="#modal-detail">
+ <i class="fa fa-info-circle fa-2x" id="detail" data-toggle="tooltip modal" title="Details"></i>
+ </div>
+ </div>
+ <div class="col-sm-3">
+ <div class="table-actions" data-toggle="modal" data-target="#modal-edit">
+ <i class="fa fa-edit fa-2x" id="edit" data-toggle="tooltip" title="Edit"></i>
+ </div>
+ </div>
+ <div class="col-sm-3">
+ <i class="fa fa-trash fa-2x" id="delete" data-toggle="tooltip" title="Delete"></i>
+ </div>
+ `
+ }]
+ })
- $('#user-table tbody').on('click', 'i', function() {
- var data = table.row($(this).parents('tr')).data();
- $(function() {
- $('#user_id').val(data['id']);
- $('#name').val(data['nama']);
- $('#email').val(data['email']);
- $('#username').val(data['username']);
- $('#password').val(data['password']);
- $('#dinas').val(data['dinas']);
- })
- });
-});
+ $('#user-table tbody').on('click', '#edit', function() {
+ var index = table.row($(this).parents('tr')).index()
+ console.log(index)
+ vm.passedUserData = vm.userData[index]
+ })
-export default {
- name: 'DaftarUser'
+ $('#user-table tbody').on('click', '#detail', function() {
+ var index = table.row($(this).parents('tr')).index()
+ console.log(index)
+ vm.passedUserData = vm.userData[index]
+ })
+ })
+ },
+ watch: {
+ userData: function () {
+ var table = $('#user-table').DataTable()
+ table.rows.add(this.userData).draw()
+ console.log(this.userData)
+ }
+ },
+ components: {
+ 'va-daftar-user-edit': VADaftarUserEdit,
+ 'va-daftar-user-detail': VADaftarUserDetail
+ }
}
</script>
<style>
.table-actions {
- cursor: pointer;
+ cursor: pointer
}
</style>
--
GitLab