diff --git a/src/components/table-2.vue b/src/components/table-2.vue
index 9bd4807087858d092e1ecb30ad8412f54fb2b3ae..ef636107f4ca285b207ef32ed5afe5d3c766d061 100644
--- a/src/components/table-2.vue
+++ b/src/components/table-2.vue
@@ -4,6 +4,17 @@
<thead>
<tr>
<template v-for="c in columns" :key="c">
+ <template v-if="c.hasOwnProperty('child')">
+ <template v-for="child in c.child" :key="child">
+ <th
+ v-if="!child.hidden"
+ @click="sort(child.data)"
+ class="text-blue clickable"
+ >
+ {{ child.name}}
+ </th>
+ </template>
+ </template>
<th
v-if="!c.hidden"
@click="sort(c.data)"
@@ -18,13 +29,22 @@
<tbody>
<tr
- v-for="e in this.entries.slice(
- (this.page - 1) * this.entry_per_page,
- this.page * this.entry_per_page
- )"
+ v-for="e in this.entries"
:key="e.id"
>
<template v-for="c in columns" :key="c">
+ <template v-if="c.hasOwnProperty('child')">
+ <template v-for="child in c.child" :key="child">
+ <template v-if="!child.hidden">
+ <td v-if="child.clickable" @click="this.$emit('detail-entry', e[columns.Id.data])" class="clickable">
+ {{ e[c.data][child.data] }}
+ </td>
+ <td v-else >
+ {{ e[c.data][child.data]}}
+ </td>
+ </template>
+ </template>
+ </template>
<template v-if="!c.hidden">
<td v-if="c.clickable" @click="this.$emit('detail-entry', e[columns.Id.data])" class="clickable">
{{ e[c.data] }}
@@ -86,6 +106,10 @@ export default {
type: String,
default: ""
},
+ include: {
+ type: String,
+ default: ""
+ },
edit: {
type: Boolean,
default: true
@@ -95,6 +119,7 @@ export default {
default: true
},
key: Number,
+
},
data() {
return {
@@ -135,7 +160,7 @@ export default {
if (!this.sorted.asc){
sortCol = `-${sortCol}`
}
- HTTP.get(`${this.endpoint}?page=${this.page}&sort=${sortCol}&filter[${this.filter_column}]=${this.filter}`).then((res)=>{
+ HTTP.get(`${this.endpoint}?include=${this.include}&page=${this.page}&sort=${sortCol}&filter[${this.filter_column}]=${this.filter}`).then((res)=>{
if (res.status == 200){
// console.log(res.data)
this.entries = res.data.data.data
@@ -151,7 +176,12 @@ export default {
if (column === this.sorted.column) {
this.sorted.asc = !this.sorted.asc;
} else {
- this.sorted.column = column;
+ if (column == 'department'){
+ this.sorted.column = "department_id";
+ }else{
+ this.sorted.column = column;
+ }
+
this.sorted.asc = true
}
this.page = 1
diff --git a/src/router/index.js b/src/router/index.js
index 40b597cc21b59d2f4a62ddd2f94658f952b04884..6f091a3097359618a0945dd1e2323e6ecc50ec1d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,7 @@ import AdminIndex from "../views/AdminIndex.vue";
import KaryawanInsert from "../views/KaryawanInsert.vue";
import DepartemenIndex from "../views/DepartemenIndex.vue";
import KaryawanEdit from "../views/KaryawanEdit.vue";
+import KaryawanDetail from "../views/KaryawanDetail.vue";
import AdminInsert from "../views/AdminInsert.vue";
import AdminEdit from "../views/AdminEdit.vue";
import KpiIndex from "../views/KpiIndex.vue";
@@ -68,6 +69,11 @@ const routes = [
name: "KaryawanEdit",
component: KaryawanEdit,
},
+ {
+ path: "/user/:id",
+ name: "KaryawanDetail",
+ component: KaryawanDetail,
+ },
{
path: "/admin/insert",
name: "AdminInsert",
diff --git a/src/views/AdminIndex.vue b/src/views/AdminIndex.vue
index ac9255ebacfbb159905b40f37727fb5f209f0f30..10e371870f16748f206ba9583c73c4b2408ff161 100644
--- a/src/views/AdminIndex.vue
+++ b/src/views/AdminIndex.vue
@@ -37,14 +37,16 @@
</div>
</div>
<div class="row p-2">
- <Table
- :data="admins"
- :columns="columns"
- :filter="filter"
- @delete-entry="deleteAdmin"
- @edit-entry="editAdmin"
- @detail-entry="detailAdmin"
- ></Table>
+ <Table2
+ :endpoint="'admins'"
+ :columns="columns"
+ :filter="filter"
+ :filter_column="'username'"
+ :key = "0"
+ @edit-entry="editAdmin"
+ @delete-entry="deleteAdmin"
+ @detail-entry="detailAdmin"
+ ></Table2>
</div>
</div>
</div>
@@ -52,7 +54,7 @@
</template>
<script>
-import Table from "../components/table";
+import Table2 from "../components/table-2";
import Header from "../components/header";
import Sidebar from "../components/sidebar";
import { HTTP } from "../http-common";
@@ -60,64 +62,13 @@ import { HTTP } from "../http-common";
export default {
name: "AdminIndex",
components: {
- Table,
+ Table2,
Header,
Sidebar,
},
data() {
return {
admins: [],
- temp_admins: [
- {
- id: 1,
- nama: "Budi",
- username: "budi",
- email: "budi@example.com",
- tanggal: "02-15-2020",
- },
- {
- id: 2,
- nama: "Asep",
- username: "asep",
- email: "asep@example.com",
- tanggal: "02-12-2020",
- },
- {
- id: 3,
- nama: "Yana",
- username: "yana",
- email: "yana@example.com",
- tanggal: "02-10-2020",
- },
- {
- id: 4,
- nama: "Yusuf",
- username: "yusuf",
- email: "yusuf@example.com",
- tanggal: "02-10-2020",
- },
- {
- id: 5,
- nama: "Siti",
- username: "siti",
- email: "siti@example.com",
- tanggal: "02-10-2020",
- },
- {
- id: 6,
- nama: "Yuni",
- username: "yuni",
- email: "yuni@example.com",
- tanggal: "02-10-2020",
- },
- {
- id: 7,
- nama: "Hadi",
- username: "hadi",
- email: "hadi@example.com",
- tanggal: "02-10-2020",
- },
- ],
columns: {
Id: {
name : "Id",
diff --git a/src/views/DepartemenIndex.vue b/src/views/DepartemenIndex.vue
index f5ef49314fa619013337e701bedd4009758388a2..803c7e0b4966b85790a9ade60c58e6a3dc776271 100644
--- a/src/views/DepartemenIndex.vue
+++ b/src/views/DepartemenIndex.vue
@@ -35,14 +35,16 @@
</div>
</div>
<div class="row p-2">
- <Table
- :data="dept"
- :columns="columns"
- :filter="filter"
- @delete-entry="deleteDept"
- @edit-entry="editDept"
- @detail-entry="detailDept"
- ></Table>
+ <Table2
+ :endpoint="'departments'"
+ :columns="columns"
+ :filter="filter"
+ :filter_column="'name'"
+ :key = "0"
+ @edit-entry="editDept"
+ @delete-entry="deleteDept"
+ @detail-entry="detailDept"
+ ></Table2>
</div>
</div>
</div>
@@ -50,7 +52,7 @@
</template>
<script>
-import Table from "../components/table";
+import Table2 from "../components/table-2";
import Header from "../components/header";
import Sidebar from "../components/sidebar";
import { HTTP } from "../http-common";
@@ -58,7 +60,7 @@ import { HTTP } from "../http-common";
export default {
name: "DepartemenIndex",
components: {
- Table,
+ Table2,
Header,
Sidebar,
},
diff --git a/src/views/KaryawanDetail.vue b/src/views/KaryawanDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3ec1e818cc31ac704702cac11486ff3816805a99
--- /dev/null
+++ b/src/views/KaryawanDetail.vue
@@ -0,0 +1,339 @@
+<template>
+ <div class="container-fluid">
+ <div class="row flex-nowrap">
+ <Sidebar></Sidebar>
+ <div class="col ps-md-2 pt-2">
+ <Header></Header>
+ <div class="row p-3">
+ <router-link :to="{ path: '/user' }" style="text-decoration: none">
+ <div class="d-flex flex-row justify-content-start align-items-center illustration" id="back">
+ <i class="icon ion-chevron-left text-blue" style="font-size: 20px"></i>
+ <p class="text-blue ms-1">kembali</p>
+ </div>
+ </router-link>
+ </div>
+ <div class="row p-3">
+ <h1 class="text-blue">Data Karyawan</h1>
+ <hr class="my-4 " style="border: 1px solid #6992b4">
+ </div>
+ <form @submit="save" autocomplete="off" id="formKaryawan">
+ <div class="row p-3">
+ <div class="col">
+ <div class="mb-3 me-3">
+ <label for="namaInput" class="text-blue"> Nama </label>
+ <input v-model="this.employee.name" type="text" id="namaInput" class="form-control" readonly>
+ </div>
+ <div class="mb-3 me-3">
+ <label for="nikInput" class="text-blue"> NIK </label>
+ <input v-model="employee.nik" type="text" id="nikInput" class="form-control" readonly>
+ </div>
+ <div class="mb-3 me-3">
+ <label for="deptInput" class="text-blue"> Departemen </label>
+ <input v-model="employee.department" list="dept" id="deptInput" class="form-control" readonly>
+ <datalist id="dept">
+ <option v-for="d in this.dept" :key="d" :value="d.name"></option>
+ </datalist>
+ </div>
+ <div class="mb-3 me-3">
+ <label for="jabatanInput" class="text-blue"> Jabatan </label>
+ <input v-model="employee.position" id="jabatanInput" class="form-control" readonly>
+ <!-- <input v-model="jbt" list="jabatan" id="jabatanInput" class="form-control" required>
+ <datalist id="jabatan">
+ <option v-for="j in this.jabatan" :key="j" :value="j"></option>
+ </datalist> -->
+ </div>
+ <div class="mb-3 me-3">
+ <label for="atasanInput" class="text-blue"> Atasan </label>
+ <input v-model="employee.manager" list="atasan" id="atasanInput" class="form-control">
+ <datalist id="atasan">
+ <option v-for="a in this.atasan" :key="a.id" :value="a.name"></option>
+ </datalist>
+ </div>
+ </div>
+ <div class="col">
+ <div class="mb-3">
+ <label for="usernameInput" class="text-blue"> Username </label>
+ <input v-model="employee.user.username" type="text" id="usernameInput" class="form-control" readonly>
+ </div>
+ <div class="mb-3">
+ <label for="emailInput" class="text-blue"> Email </label>
+ <input v-model="employee.user.email" type="email" id="emailInput" class="form-control" readonly>
+ </div>
+ <div class="mb-3">
+ <label for="passwordInput" class="text-blue"> Kata Sandi </label>
+ <input v-model="password" type="password" id="passwordInput" class="form-control">
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+
+import Header from "../components/header"
+import Sidebar from "../components/sidebar"
+import { HTTP } from "../http-common";
+
+
+export default {
+ name: "KaryawanDetail",
+ components: {
+ Header,
+ Sidebar
+ },
+ data() {
+ return{
+ dept: [],
+ jabatan: [],
+ atasan: [],
+ nama: "",
+ nik: "",
+ dept_in: "",
+ jbt: "",
+ atasan_in: "",
+ username: "",
+ email: "",
+ password: "",
+ emp_id:-1,
+ id: -1,
+ deptId: null,
+ atasanId: -1,
+ employee: {
+ user_id: "",
+ manager_id: "",
+ department_id: "",
+ manager: "",
+ department: "",
+ nik: "",
+ name: "",
+ slug: "",
+ position: "",
+ email: "",
+ username: "",
+ password:"",
+ user : {
+ email: "",
+ username: ""
+ }
+ },
+ temp_dept: ["Keuangan", "Marketing", "Operasional"],
+ temp_atasan: ["Yusuf", "Budi"],
+ temp_jabatan: ["Manager", "Staf"],
+ temp_users: [
+ {
+ id: 1,
+ nama: "Budi",
+ email: "budi@example.com",
+ jabatan: "manager",
+ departemen: "keuangan",
+ tanggal: "02-15-2020",
+ },
+ {
+ id: 2,
+ nama: "Asep",
+ email: "asep@example.com",
+ jabatan: "staf",
+ departemen: "marketing",
+ tanggal: "02-12-2020",
+ },
+ {
+ id: 3,
+ nama: "Yana",
+ email: "yana@example.com",
+ jabatan: "staf",
+ departemen: "keuangan",
+ tanggal: "02-10-2020",
+ },
+ {
+ id: 4,
+ nama: "Yusuf",
+ email: "yusuf@example.com",
+ jabatan: "staf",
+ departemen: "keuangan",
+ tanggal: "02-10-2020",
+ },
+ {
+ id: 5,
+ nama: "Siti",
+ email: "siti@example.com",
+ jabatan: "staf",
+ departemen: "keuangan",
+ tanggal: "02-10-2020",
+ },
+ {
+ id: 6,
+ nama: "Yuni",
+ email: "yuni@example.com",
+ jabatan: "staf",
+ departemen: "keuangan",
+ tanggal: "02-10-2020",
+ },
+ {
+ id: 7,
+ nama: "Hadi",
+ email: "hadi@example.com",
+ jabatan: "staf",
+ departemen: "keuangan",
+ tanggal: "02-10-2020",
+ },
+ ],
+ dept_last_page : 1,
+ }
+ },
+ methods: {
+ getDept(){
+ HTTP.get("departments?page=1").then((res)=>{
+ if (res.data.success == true){
+ this.dept = res.data.data.data
+ this.dept_last_page = res.data.data.last_page
+ for (let i=2;i<=this.dept_last_page;i++){
+ HTTP.get(`departments?page=${i}`).then((res)=>{
+ if (res.data.success == true){
+ this.dept = this.dept.concat(res.data.data.data)
+ }})
+ }
+
+ }})
+ },
+ getJabatan(){
+ this.jabatan = this.temp_jabatan
+ },
+ getAtasan(){
+ this.dept.forEach((d) => {
+ if (d.name == this.employee.department){
+ this.deptId = d.id
+ this.employee.department_id = d.id
+ HTTP.get(`departments/${this.deptId}/employees?except=${this.emp_id}`).then((res)=>{
+ if (res.data.success == true){
+ this.atasan = []
+ res.data.data.forEach((a) => {
+ this.atasan.push({name: a.name, id: a.id})
+ })
+ }
+ })
+ }
+ })
+ },
+ save(e){
+ e.preventDefault();
+
+ //cek departemen
+ if (this.deptId == null){
+ alert("Departemen tidak ditemukan")
+ return
+ }
+
+ //cari id atasan
+ let atasan_id = null
+ this.atasan.forEach(a => {
+ if (a.name == this.employee.manager){
+ atasan_id = a.id
+ this.employee.manager_id = a.id
+ }
+ });
+ if (atasan_id == null){
+ alert(`Atasan tidak ditemukan dalam departemen ${this.dept_in}`)
+ return
+ }
+ // let formValue = [this.nama, this.nik, this.deptId, this.jbt, atasan_id, this.username, this.email, this.password]
+
+
+ let data = {
+ user_id : this.employee.user_id,
+ manager_id : this.employee.manager_id,
+ department_id : this.employee.department_id,
+ nik : this.employee.nik,
+ name : this.employee.name,
+ position : this.employee.position,
+ email : this.employee.user.email,
+ username : this.employee.user.username,
+ password : this.password,
+ slug : this.employee.slug
+ }
+
+ HTTP.put(`employees/${this.id}`, data, {
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ }).then((res)=>{
+ console.log(res)
+ alert("Data Karyawan berhasil diedit")
+ }).catch(error => {
+ console.log("ERR:: ",error.response.data);
+
+ });
+
+
+ console.log(data)
+
+ //di sini simpen data ke backend
+
+ },
+ getData(){
+ // di sini ambil data user dari backend
+ HTTP.get(`employees/${this.id}?include=user`).then((res)=>{
+ if (res.data.success){
+ this.employee = res.data.data
+ console.log(res.data.data)
+ let user = res.data.data
+ this.nama = user.name
+ this.nik = user.nik
+ this.dept_in = user.department
+ this.deptId = user.dept_id
+ this.jbt = user.position
+ this.atasan_id = user.manager_id
+ this.username = user.user.username
+ this.email = user.user.email
+ this.emp_id = user.id
+ this.getAtasan()
+ }
+ })
+
+ }
+
+
+ },
+ mounted(){
+ // this.getDept()
+ // this.getJabatan()
+ this.id = this.$route.params.id
+ this.getData()
+
+ }
+
+}
+</script>
+
+<style scoped>
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ background-color: #fff;
+}
+
+#back{
+ cursor: pointer;
+}
+
+.btn-blue {
+ background-color: #6992b4;
+ color: #f1f7fc;
+ border-radius: 8px;
+ margin-right: 5px;
+}
+
+.btn-red {
+ background-color: #f4476b;
+ color: #f1f7fc;
+ border-radius: 8px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/KaryawanEdit.vue b/src/views/KaryawanEdit.vue
index 66e7a60c5b99c86c916d30b99decbf13135ae792..8ef90dba8f2929f33d5a5b7f297843cb3d89b7ad 100644
--- a/src/views/KaryawanEdit.vue
+++ b/src/views/KaryawanEdit.vue
@@ -184,17 +184,24 @@ export default {
tanggal: "02-10-2020",
},
],
+ dept_last_page : 1,
}
},
methods: {
getDept(){
- // this.dept = this.temp_dept
- HTTP.get("departments").then((res)=>{
- if (res.data.success == true){
- console.log(res.data.data)
- this.dept = res.data.data
- }})
- },
+ HTTP.get("departments?page=1").then((res)=>{
+ if (res.data.success == true){
+ this.dept = res.data.data.data
+ this.dept_last_page = res.data.data.last_page
+ for (let i=2;i<=this.dept_last_page;i++){
+ HTTP.get(`departments?page=${i}`).then((res)=>{
+ if (res.data.success == true){
+ this.dept = this.dept.concat(res.data.data.data)
+ }})
+ }
+
+ }})
+ },
getJabatan(){
this.jabatan = this.temp_jabatan
},
@@ -271,7 +278,7 @@ export default {
},
getData(){
// di sini ambil data user dari backend
- HTTP.get(`employees/${this.id}`).then((res)=>{
+ HTTP.get(`employees/${this.id}?include=user`).then((res)=>{
if (res.data.success){
this.employee = res.data.data
console.log(res.data.data)
diff --git a/src/views/KpiDetail.vue b/src/views/KpiDetail.vue
index 0a0cf8a07bd6164f68a2cd2ac873a5b79f831241..c57967ed67a4859874762fdb4022dac97eccc792 100644
--- a/src/views/KpiDetail.vue
+++ b/src/views/KpiDetail.vue
@@ -78,7 +78,7 @@
</div>
</div>
<div>
- <button @click="responses" class="btn float-end">Responses</button>
+ <button @click="responses " class="btn float-end">Responses</button>
</div>
</div>
</form>
diff --git a/src/views/UserIndex.vue b/src/views/UserIndex.vue
index 12494f3ac1b6602501d362623a26d5eeafd71bbb..20ab5831ae188a27a5e1355e691d99105998f388 100644
--- a/src/views/UserIndex.vue
+++ b/src/views/UserIndex.vue
@@ -18,14 +18,14 @@
<div class="row p-2">
<div class="col p-2">
<select
- v-if="filter_type == 'Departemen'"
+ v-if="filter_type == 'department_id'"
@change="getUsers"
v-model="selected_filter"
class="form-select"
aria-label="Default select example"
>
- <option selected>Semua</option>
- <option v-for="d in depts" :key="d.id" :value="d.name">{{d.name}}</option>
+ <option value="" selected>Semua</option>
+ <option v-for="d in depts" :key="d.id" :value="d.id">{{d.name}}</option>
</select>
<select
v-else
@@ -34,9 +34,8 @@
class="form-select"
aria-label="Default select example"
>
- <option selected>Semua</option>
- <option value="Manager">Manager</option>
- <option value="Staf">Staf</option>
+ <option value="" selected>Semua</option>
+ <option v-for="j in jabatan" :key="j" :value="j">{{j}}</option>
</select>
</div>
<div class="col p-2">
@@ -45,12 +44,12 @@
class="form-select"
aria-label="Default select example"
>
- <option selected>Departemen</option>
- <option value="Jabatan">Jabatan</option>
+ <option value="department_id" selected>Departemen</option>
+ <option value="position">Jabatan</option>
</select>
</div>
<div class="col p-2">
- <div class="search float-end">
+ <!-- <div class="search float-end">
<div class="row">
<div class="col-10">
<input
@@ -67,11 +66,22 @@
></i>
</div>
</div>
- </div>
+ </div> -->
</div>
</div>
<div class="row p-2">
- <Table :data="users" :columns="columns" :filter="filter" @delete-entry="deleteUser" @edit-entry="editUser" @detail-entry="detailUser"></Table>
+ <Table2
+ :endpoint="'employees'"
+ :columns="columns"
+ :filter="selected_filter"
+ :filter_column="filter_type"
+ :key = "componentKey"
+ :default_sort="'name'"
+ :include="'user'"
+ @edit-entry="editUser"
+ @delete-entry="deleteUser"
+ @detail-entry="detailUser"
+ ></Table2>
</div>
</div>
</div>
@@ -80,7 +90,7 @@
</template>
<script>
-import Table from "../components/table";
+import Table2 from "../components/table-2";
import Header from "../components/header";
import Sidebar from "../components/sidebar";
import { HTTP } from "../http-common";
@@ -88,7 +98,7 @@ import { HTTP } from "../http-common";
export default {
name: "UserIndex",
components: {
- Table,
+ Table2,
Header,
Sidebar,
},
@@ -109,12 +119,6 @@ export default {
hidden : false,
clickable : true
},
- Email: {
- name : "Email",
- data : "email",
- hidden : false,
- clickable : false
- },
Jabatan: {
name : "Jabatan",
data : "position",
@@ -127,40 +131,55 @@ export default {
hidden : false,
clickable : false
},
- Tanggal: {
- name : "Tanggal",
- data : "tanggal",
- hidden : false,
- clickable : false
- },
+ User: {
+ name : "User",
+ data : 'user',
+ hidden : true,
+ clickable : false,
+ child : {
+ Email: {
+ name : "Email",
+ data : "email",
+ hidden : false,
+ clickable : false
+ },
+ Tanggal: {
+ name : "Tanggal",
+ data : "created_at",
+ hidden : false,
+ clickable : false
+ },
+ }
+ }
},
filter: "",
- filter_type: "Departemen",
- selected_filter: "Semua",
+ filter_type: "department_id",
+ selected_filter: "",
+ dept_last_page: 1,
+ jabatan: []
};
},
methods: {
- getUsers() {
-
- // di sini ambil data user dari database
- HTTP.get("employees").then((response) => {
- if (response.data.success == true){
- this.users = response.data.data
- this.users.forEach(val => {
- val.email = val.user.email
- val.tanggal = val.user.created_at
- })
- this.filter_user()
- }
- })
- // this.users = this.temp_users;
- },
getDept(){
- HTTP.get("departments").then((res)=>{
+ HTTP.get("departments?page=1").then((res)=>{
if (res.data.success == true){
- this.depts = res.data.data
+ this.depts = res.data.data.data
+ this.dept_last_page = res.data.data.last_page
+ for (let i=2;i<=this.dept_last_page;i++){
+ HTTP.get(`departments?page=${i}`).then((res)=>{
+ if (res.data.success == true){
+ this.depts = this.depts.concat(res.data.data.data)
+ }})
+ }
+
}})
},
+ getJabatan(){
+ HTTP.get("employee-positions").then((res)=>{
+ this.jabatan = res.data.data
+ })
+ console.log(this.jabatan)
+ },
filter_user() {
if (this.selected_filter != "Semua") {
@@ -172,7 +191,7 @@ export default {
}
},
detailUser(id){
- console.log(id)
+ this.$router.push({ name: "KaryawanDetail", params: { id: id }});
},
deleteUser(id){
if (confirm("Yakin akan menghapus karyawan?")){
@@ -193,8 +212,8 @@ export default {
}
},
mounted() {
- this.getUsers()
this.getDept()
+ this.getJabatan()
},
};
</script>