Merge branch 'feature/frontend-users' into 'develop'

Feature/frontend users

See merge request !10

frontend/.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
   },
   env: {
     browser: true,
+    jquery: true
   },
   extends: [
     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention

frontend/package.json

@@ -17,6 +17,7 @@
     "admin-lte": "^2.4.10",
     "axios": "^0.18.0",
     "datatables.net-bs": "^1.10.19",
+    "datatables.net-buttons-bs": "^1.5.6",
     "expose-loader": "^0.7.5",
     "jquery": "^3.3.1",
     "jquery-slimscroll": "^1.3.8",

frontend/src/components/modals/VADaftarUserCreate.vue

+<template>
+  <div class="modal fade" id="modal-create">
+    <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">&times;</span>
+          </button>
+          <h4 class="modal-title">Buat Akun</h4>
+        </div>
+        <div class="modal-body">
+          <form class="form-horizontal">
+            <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" v-model="userData.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" v-model="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" v-model="userData.username">
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="password" class="col-sm-3 control-label">Password</label>
+              <div class="col-sm-8">
+                <input class="form-control" type="password" id="password" v-model="userData.password">
+              </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" v-model="userData.role" id="role">
+                  <option v-for="role in roleData">{{ role }}</option>
+                </select>
+              </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" v-model="userData.dinas" :disabled="(roleData.indexOf(userData.role) < 2)">
+              </div>
+            </div>
+          </form>
+          <div class="response-box"></div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
+          <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="createUser">Buat akun</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'DaftarUserCreate',
+  data: function () {
+    return {
+      userData: {
+        'name': '',
+        'role': '',
+        'email': '',
+        'username': '',
+        'password': '',
+        'dinas': ''
+      },
+      roleData: ['Master Admin Diskominfo', 'Admin Diskominfo', 'Admin Dinas', 'Member Dinas']
+    }
+  },
+  methods: {
+    createUser () {
+      let vm = this
+
+      if (
+        (vm.userData.name.length === 0) ||
+        (vm.userData.role.length === 0) ||
+        (vm.userData.email.length === 0) ||
+        (vm.userData.username.length === 0) ||
+        (vm.userData.password.length === 0)
+      ) {
+        $('.response-box').append(
+          `
+          <div class="alert alert-danger alert-dismissible">
+            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+            <h4>
+              <i class="icon fa fa-ban"></i>
+              Error!
+            </h4>
+            Satu atau lebih kotak input kosong.
+          </div>
+          `
+        )
+      } else {
+        axios.post('http://localhost:8081/api/user/create', vm.userData, {withCredentials: true}).then((res) => {
+          this.$emit('success', vm.userData.username)
+        }, (error) => {
+          this.$emit('error', error)
+        })
+      }
+    }
+  }
+}
+</script>
+<style>
+  .alert-box {
+    text-align: left;
+  }
+</style>

frontend/src/components/modals/VADaftarUserDelete.vue

+<template>
+  <div class="modal fade" id="modal-delete">
+    <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">&times;</span>
+          </button>
+          <h4 class="modal-title">Hapus Entri</h4>
+        </div>
+        <div class="modal-body">
+          <p>Apakah anda yakin ingin menghapus entri dengan ID {{ userData.id }} dan nama {{ userData.name }} ?</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-danger" data-dismiss="modal" v-on:click="deleteData">Hapus</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'DaftarUserDelete',
+  props: {
+    userData: {
+      type: Object,
+      default () {
+        return {
+          'id': '',
+          'username': ''
+        }
+      }
+    }
+  },
+  methods: {
+    deleteData () {
+      let vm = this
+      axios.post('http://localhost:8081/api/user/delete', {'id': vm.userData.id}, {withCredentials: true}).then((res) => {
+        this.$emit('success', vm.userData)
+      }, (error) => {
+        this.$emit('error', error)
+      })
+    }
+  }
+}
+
+</script>

frontend/src/components/modals/VADaftarUserDetail.vue

+<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">&times;</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.name }}</dd>
+            <dt>Nama</dt>
+            <dd>{{ userData.name }}</dd>
+            <dt>Email</dt>
+            <dd>{{ userData.email }}</dd>
+            <dt>Username</dt>
+            <dd>{{ userData.username }}</dd>
+            <dt>Dinas</dt>
+            <dd>{{ userData.dinas }}</dd>
+          </dl>
+          <div class="response-box"></div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'DaftarUserDetail',
+  data: function () {
+    return {
+      userData: {
+        'id': '',
+        'name': '',
+        'email': '',
+        'username': '',
+        'dinas': '',
+        'role': {
+          'id': '',
+          'name': ''
+        }
+      }
+    }
+  },
+  props: {
+    userId: {
+      type: Number,
+      default () {
+        return -1
+      }
+    }
+  },
+  methods: {
+    getData () {
+      let vm = this
+      axios.post('http://localhost:8081/api/user/detail', {id: vm.userId}, {withCredentials: true}).then((res) => {
+        vm.userData = res.data.data.users
+      }, (error) => {
+        $('.response-box').append(
+          `
+          <div class="alert alert-danger alert-dismissible">
+            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+            <h4>
+              <i class="icon fa fa-ban"></i>
+              Error!
+            </h4>
+            Tidak dapat mengambil data lengkap pengguna (Error: ` + error + `).
+          </div>
+          `
+        )
+      })
+    }
+  },
+  watch: {
+    userId: function () {
+      this.getData()
+    }
+  }
+}
+</script>

frontend/src/components/modals/VADaftarUserEdit.vue

+<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">&times;</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" v-model="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" v-model="userData.role.name" id="role">
+                  <option v-for="role in roleData" :selected="userData.role.name === role">{{ role }}</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" v-model="userData.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" v-model="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" v-model="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" v-model="userData.dinas">
+              </div>
+            </div>
+          </form>
+        </div>
+        <div class="response-box"></div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="updateData">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'DaftarUserEdit',
+  data: function () {
+    return {
+      userData: {
+        'id': '',
+        'name': '',
+        'email': '',
+        'username': '',
+        'dinas': '',
+        'role': {
+          'id': '',
+          'name': ''
+        }
+      },
+      roleData: ['Master Admin Diskominfo', 'Admin Diskominfo', 'Admin Dinas', 'Member Dinas']
+    }
+  },
+  props: {
+    userId: {
+      type: Number,
+      default () {
+        return -1
+      }
+    }
+  },
+  methods: {
+    getData () {
+      let vm = this
+      axios.post('http://localhost:8081/api/user/detail', {id: vm.userId}, {withCredentials: true}).then((res) => {
+        vm.userData = res.data.data.users
+      }, (error) => {
+        $('.response-box').append(
+          `
+          <div class="alert alert-danger alert-dismissible">
+            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+            <h4>
+              <i class="icon fa fa-ban"></i>
+              Error!
+            </h4>
+            Tidak dapat mengambil data lengkap pengguna (Error: ` + error + `).
+          </div>
+          `
+        )
+      })
+    },
+    updateData () {
+      let vm = this
+      var postData = JSON.parse(JSON.stringify(vm.userData))
+      postData.role = vm.userData.role.name
+      axios.post('http://localhost:8081/api/user/edit', postData, {withCredentials: true}).then((res) => {
+        this.$emit('success', postData.id)
+      }, (error) => {
+        this.$emit('error', error)
+      })
+    }
+  },
+  watch: {
+    userId: function () {
+      this.getData()
+    }
+  }
+}
+</script>

frontend/src/lib/css.js

-import 'expose-loader?$!expose-loader?jQuery!jquery'
-import 'admin-lte'
-import 'bootstrap'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'admin-lte/dist/css/AdminLTE.min.css'
+import 'admin-lte/dist/css/skins/_all-skins.min.css'
+import 'font-awesome/css/font-awesome.min.css'
+import 'datatables.net-bs/css/dataTables.bootstrap.min.css'

frontend/src/lib/scripts.js

-import 'bootstrap/dist/css/bootstrap.min.css'
-import 'admin-lte/dist/css/AdminLTE.min.css'
-import 'admin-lte/dist/css/skins/_all-skins.min.css'
-import 'font-awesome/css/font-awesome.min.css'
-
-import 'datatables.net-bs/css/dataTables.bootstrap.min.css'
+import 'expose-loader?$!expose-loader?jQuery!jquery'
+import 'admin-lte'
+import 'bootstrap'

frontend/src/pages/daftar_user.vue

 <template>
-  <h1>Daftar User</h1>
+  <div>
+    <section class="content-header">
+      <h1>
+        Daftar User
+        <small>Pengaturan informasi pengguna</small>
+      </h1>
+    </section>
+    <section class="content">
+      <div class="alert-box"></div>
+      <div class="box">
+        <div class="box-header">
+          <h3 class="box-title">Daftar Pengguna JABAR-INOV-MONEV-2</h3>
+        </div>
+        <div class="box-body">
+          <div class="dataTables_wrapper form-inline dt-bootstrap">
+            <table id="user-table" class="table table-bordered table-striped dataTable">
+            </table>
+          </div>
+        </div>
+      </div>
+      <va-daftar-user-create v-on:success="successCreate" v-on:error="errorCreate"></va-daftar-user-create>
+      <va-daftar-user-edit :user-id="userId" v-on:success="successEdit" v-on:error="errorEdit"></va-daftar-user-edit>
+      <va-daftar-user-detail :user-id="userId"></va-daftar-user-detail>
+      <va-daftar-user-delete :user-data="userDataSimplified" v-on:success="successDelete" v-on:error="errorDelete"></va-daftar-user-delete>
+    </section>
+  </div>
 </template>
 <script>
+import VADaftarUserEdit from '../components/modals/VADaftarUserEdit.vue'
+import VADaftarUserDetail from '../components/modals/VADaftarUserDetail.vue'
+import VADaftarUserDelete from '../components/modals/VADaftarUserDelete.vue'
+import VADaftarUserCreate from '../components/modals/VADaftarUserCreate.vue'
+import axios from 'axios'
+import $ from 'jquery'
+require('datatables.net-bs')
+require('datatables.net-buttons-bs')
+/* global $ */
+
+$.fn.dataTable.ext.errMode = 'none'
+
 export default {
-  name: 'DaftarUser'
+  name: 'DaftarUser',
+  data: function () {
+    return {
+      userData: [],
+      userDataSimplified: {},
+      userId: -1
+    }
+  },
+  methods: {
+    getData () {
+      let vm = this
+      axios.post('http://localhost:8081/api/user/all', null, {withCredentials: true}).then((res) => {
+        vm.userData = res.data.data['users']
+      }, (error) => {
+        $('.alert-box').append(
+          `
+        <div class="alert alert-danger alert-dismissible">
+          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+          <h4>
+            <i class="icon fa fa-ban"></i>
+            Error!
+          </h4>
+          Cannot get user data: ` + error + `
+        </div>
+        `
+        )
+      })
+    },
+    successEdit (data) {
+      $('.alert-box').append(
+        `
+        <div class="alert alert-success alert-dismissible">
+          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+          <h4>
+            <i class="icon fa fa-check"></i>
+            Success!
+          </h4>
+          Updated entry with ID of ` + data + `
+        </div>
+        `
+      )
+
+      this.getData()
+    },
+    errorEdit (data) {
+      $('.alert-box').append(
+        `
+        <div class="alert alert-danger alert-dismissible">
+          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+          <h4>
+            <i class="icon fa fa-ban"></i>
+            Error!
+          </h4>
+          Cannot update entry: ` + data + `
+        </div>
+        `
+      )
+    },
+    successDelete (data) {
+      $('.alert-box').append(
+        `
+        <div class="alert alert-success alert-dismissible">
+          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+          <h4>
+            <i class="icon fa fa-check"></i>
+            Sukses!
+          </h4>
+          Berhasil menghapus entri dengan ID ` + data.id + ` dan nama ` + data.name + `
+        </div>
+        `
+      )
+
+      this.getData()
+    },
+    errorDelete (data) {
+      $('.alert-box').append(
+        `
+        <div class="alert alert-danger alert-dismissible">
+          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+          <h4>
+            <i class="icon fa fa-ban"></i>
+            Error!
+          </h4>
+          Gagal menghapus entri: ` + data + `
+        </div>
+        `
+      )
+    },
+    successCreate (data) {
+      $('.alert-box').append(
+        `
+          <div class="alert alert-success alert-dismissible">
+            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+            <h4>
+              <i class="icon fa fa-check"></i>
+              Sukses!
+            </h4>
+            Berhasil membuat akun baru atas nama ` + data + `
+          </div>
+          `
+      )
+
+      this.getData()
+    },
+    errorCreate (data) {
+      $('.alert-box').append(
+        `
+            <div class="alert alert-danger alert-dismissible">
+              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+              <h4>
+                <i class="icon fa fa-check"></i>
+                Error!
+              </h4>
+                Tidak bisa membuat akun. (Error: ` + data + `)
+            </div>
+            `
+      )
+    }
+  },
+  mounted: function () {
+    let vm = this
+    vm.getData()
+    vm.$nextTick(function () {
+      var table = $('#user-table').DataTable({
+        'initComplete': function (settings, json) {
+          $('#user-table_wrapper .col-sm-6:eq(1)').append(`
+            <div id="add-button">
+              <button type="button" class="btn btn-default table-actions" data-toggle="modal" data-target="#modal-create">+</button>
+            </div>
+          `)
+        },
+        'language': {
+          'emptyTable': 'Loading...'
+        },
+        'columns': [
+          {'data': 'id', 'title': 'ID'},
+          {'data': 'name', 'title': 'Nama'},
+          {'data': 'role.name', '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">
+              <div class="table-actions" data-toggle="modal" data-target="#modal-delete">
+                <i class="fa fa-trash fa-2x" id="delete" data-toggle="tooltip" title="Delete"></i>
+              </div>
+            </div>
+          `
+        }]
+      })
+
+      $('#user-table tbody').on('click', '#edit', function () {
+        var index = table.row($(this).parents('tr')).index()
+        vm.userId = vm.userData[index]['id']
+      })
+
+      $('#user-table tbody').on('click', '#detail', function () {
+        var index = table.row($(this).parents('tr')).index()
+        vm.userId = vm.userData[index]['id']
+      })
+
+      $('#user-table tbody').on('click', '#delete', function () {
+        var index = table.row($(this).parents('tr')).index()
+        vm.userDataSimplified = {'id': vm.userData[index]['id'], 'name': vm.userData[index]['name']}
+      })
+    })
+  },
+  watch: {
+    userData: function () {
+      var table = $('#user-table').DataTable()
+      table.clear().draw()
+      table.rows.add(this.userData).draw()
+    }
+  },
+  components: {
+    'va-daftar-user-edit': VADaftarUserEdit,
+    'va-daftar-user-detail': VADaftarUserDetail,
+    'va-daftar-user-delete': VADaftarUserDelete,
+    'va-daftar-user-create': VADaftarUserCreate
+  }
 }
 </script>
+
+<style>
+  .table-actions {
+    cursor: pointer
+  }
+  #add-button {
+    float: right
+  }
+</style>