diff --git a/src/views/KaryawanEdit.vue b/src/views/KaryawanEdit.vue
index 596ec0716e0601b884686843e38514575597aa6e..9fb3aaa3b90639c518f1a594480c2e9817b2d8de 100644
--- a/src/views/KaryawanEdit.vue
+++ b/src/views/KaryawanEdit.vue
@@ -31,10 +31,23 @@
</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" @change="getAtasan">
+ <!-- <input v-model="employee.department" list="dept" id="deptInput" class="form-control" @change="getAtasan">
<datalist id="dept">
<option v-for="d in this.dept" :key="d" :value="d.name"></option>
- </datalist>
+ </datalist> -->
+ <v-select v-model="dept_in"
+ :options="this.dept"
+ label="name"
+ >
+ <template #search="{attributes, events}">
+ <input
+ class="vs__search"
+ :required="!dept_in"
+ v-bind="attributes"
+ v-on="events"
+ />
+ </template>
+ </v-select>
</div>
<div class="mb-3 me-3">
<label for="jabatanInput" class="text-blue"> Jabatan </label>
@@ -46,10 +59,15 @@
</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">
+ <!-- <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>
+ </datalist> -->
+ <v-select v-model="atasan_in"
+ :options="this.atasan"
+ label="name"
+ >
+ </v-select>
</div>
<button type="submit" class="btn-blue p-1" >Simpan</button>
<router-link :to="{ path: '/user' }" style="text-decoration: none">
@@ -83,13 +101,16 @@
import Header from "../components/header"
import Sidebar from "../components/sidebar"
import { HTTP } from "../http-common";
+import vSelect from 'vue-select'
+import 'vue-select/dist/vue-select.css'
export default {
name: "KaryawanEdit",
components: {
Header,
- Sidebar
+ Sidebar,
+ vSelect
},
data() {
return{
@@ -100,7 +121,7 @@ export default {
nik: "",
dept_in: "",
jbt: "",
- atasan_in: "",
+ atasan_in: null,
username: "",
email: "",
password: "",
@@ -126,67 +147,6 @@ export default {
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,
nav_active : JSON.parse(localStorage.getItem('navActive')),
}
@@ -210,55 +170,30 @@ export default {
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)=>{
+ HTTP.get(`departments/${this.dept_in.id}/employees`).then((res)=>{
if (res.data.success == true){
this.atasan = []
res.data.data.forEach((a) => {
this.atasan.push({name: a.name, id: a.id})
})
+ console.log(this.atasan)
}
})
- }
- })
},
save(e){
e.preventDefault();
- //cek departemen
- if (this.deptId == null){
- alert("Departemen tidak ditemukan")
- return
- }
- //cari id atasan
let atasan_id = null
- console.log(this.employee.manager)
- if (this.employee.manager != "" ){
- this.atasan.forEach(a => {
- if (a.name == this.employee.manager){
- console.log("in")
- atasan_id = a.id
- this.employee.manager_id = a.id
- }
- });
- if (atasan_id == null){
- alert(`Atasan tidak ditemukan dalam departemen ${this.dept_in}`)
- return
- }
- }else if (this.employee.manager == ""){
- this.employee.manager_id = null
+ if (this.atasan_in != null){
+ atasan_id = this.atasan_in.id
}
- // 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,
+ manager_id : atasan_id,
+ department_id : this.dept_in.id,
nik : this.employee.nik,
name : this.employee.name,
position : this.employee.position,
@@ -295,10 +230,10 @@ export default {
let user = res.data.data
this.nama = user.name
this.nik = user.nik
- this.dept_in = user.department
- this.deptId = user.department_id
+ this.dept_in = {name: user.department, id:user.department_id}
this.jbt = user.position
this.atasan_id = user.manager_id
+ this.atasan_in = {name: this.employee.manager, id:this.employee.manager_id}
this.username = user.user.username
this.email = user.user.email
this.emp_id = user.id
@@ -316,6 +251,12 @@ export default {
this.id = this.$route.params.id
this.getData()
+ },
+ watch:{
+ dept_in(){
+ console.log("in")
+ this.getAtasan()
+ }
}
}
diff --git a/src/views/KaryawanInsert.vue b/src/views/KaryawanInsert.vue
index bde8be3c8e8829fa74b51c5a5eaee945aee24648..2d9543f44fc97ca73dae75f5305cdeb25aaf34dc 100644
--- a/src/views/KaryawanInsert.vue
+++ b/src/views/KaryawanInsert.vue
@@ -31,14 +31,13 @@
</div>
<div class="mb-3 me-3">
<label for="deptInput" class="text-blue"> Departemen </label>
- <input v-model="dept_in" list="dept" id="deptInput" class="form-control" @input="getAtasan">
+ <!-- <input v-model="dept_in" list="dept" id="deptInput" class="form-control" @input="getAtasan">
<datalist id="dept">
<option v-for="d in this.dept" :key="d" :value="d.name"></option>
- </datalist>
- <!-- <v-select v-model="dept_in"
+ </datalist> -->
+ <v-select v-model="dept_in"
:options="this.dept"
label="name"
- @closed="()=>(getAtasan())"
>
<template #search="{attributes, events}">
<input
@@ -47,8 +46,8 @@
v-bind="attributes"
v-on="events"
/>
- </template> -->
- <!-- </v-select> -->
+ </template>
+ </v-select>
</div>
<div class="mb-3 me-3">
<label for="jabatanInput" class="text-blue"> Jabatan </label>
@@ -60,10 +59,15 @@
</div>
<div class="mb-3 me-3">
<label for="atasanInput" class="text-blue"> Atasan </label>
- <input v-model="atasan_in" list="atasan" id="atasanInput" class="form-control">
+ <!-- <input v-model="atasan_in" list="atasan" id="atasanInput" class="form-control">
<datalist id="atasan">
<option v-for="a in this.atasan" :key="a" :value="a.name"></option>
- </datalist>
+ </datalist> -->
+ <v-select v-model="atasan_in"
+ :options="this.atasan"
+ label="name"
+ >
+ </v-select>
</div>
<button type="submit" class="btn-blue p-1" >Simpan</button>
<router-link :to="{ path: '/user' }" style="text-decoration: none">
@@ -97,7 +101,8 @@
import Header from "../components/header"
import Sidebar from "../components/sidebar"
import { HTTP } from "../http-common";
-// import vSelect from 'vue-select'
+import vSelect from 'vue-select'
+import 'vue-select/dist/vue-select.css'
export default {
@@ -105,7 +110,7 @@ export default {
components: {
Header,
Sidebar,
- // vSelect
+ vSelect
},
data() {
return{
@@ -116,7 +121,7 @@ export default {
nik: "",
dept_in: "",
jbt: "",
- atasan_in: "",
+ atasan_in: null,
username: "",
email: "",
password: "",
@@ -147,56 +152,29 @@ export default {
this.jabatan = this.temp_jabatan
},
getAtasan(){
- this.dept.forEach((d) => {
- if (d.name == this.dept_in){
- this.deptId = d.id
- // this.employee.department_id = d.id
- HTTP.get(`departments/${this.deptId}/employees`).then((res)=>{
+ HTTP.get(`departments/${this.dept_in.id}/employees`).then((res)=>{
if (res.data.success == true){
this.atasan = []
res.data.data.forEach((a) => {
this.atasan.push({name: a.name, id: a.id})
})
+ console.log(this.atasan)
}
})
- }
- })
- // console.log("in")
- // HTTP.get(`departments/${this.dept_in.id}/employees`).then((res)=>{
- // if (res.data.success == true){
- // this.atasan = []
- // res.data.data.forEach((a) => {
- // this.atasan.push({name: a.name, id: a.id})
- // })
- // }
- // })
},
insert(e){
e.preventDefault();
-
- //cek departemen
- if (this.deptId == null){
- alert("Departemen tidak ditemukan")
- return
- }
+ // let formValue = [this.nama, this.nik, this.deptId, this.jbt, atasan_id, this.username, this.email, this.password]
- //cari id atasan
let atasan_id = null
- this.atasan.forEach(a => {
- if (a.name == this.atasan_in){
- atasan_id = a.id
- }
- });
- if (atasan_id == null){
- alert(`Atasan tidak ditemukan dalam departemen ${this.dept_in}`)
- return
+ if (this.atasan_in != null){
+ atasan_id = this.atasan_in.id
}
- // let formValue = [this.nama, this.nik, this.deptId, this.jbt, atasan_id, this.username, this.email, this.password]
let data = {
manager_id : atasan_id,
- department_id : this.deptId,
+ department_id : this.dept_in.id,
nik : this.nik,
name : this.nama,
position : this.jbt,
@@ -227,6 +205,12 @@ export default {
mounted(){
this.getDept()
this.getJabatan()
+ },
+ watch:{
+ dept_in(){
+ console.log("in")
+ this.getAtasan()
+ }
}
}
diff --git a/src/views/KpiDetail.vue b/src/views/KpiDetail.vue
index 8efcac04512a8a4f330e4e3ebbd0e8ce10a062a5..fa650d63ba9a68d679ea8c21648300a6eef229c8 100644
--- a/src/views/KpiDetail.vue
+++ b/src/views/KpiDetail.vue
@@ -125,7 +125,7 @@
import Header from "../components/header"
import Sidebar from "../components/sidebar"
import { HTTP } from '../http-common'
-import 'vue-select/dist/vue-select.css'
+
export default {
@@ -133,6 +133,7 @@ export default {
components: {
Header,
Sidebar,
+
},
data() {
return{