diff --git a/package-lock.json b/package-lock.json
index 5b210b03d8b571be4a6fb1439e459faa6da85468..67f7720d8f38f07390dc4520e8c0863b2ca5b714 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
"bootstrap": "^5.1.3",
"core-js": "^3.6.5",
"vue": "^3.0.0",
- "vue-router": "^4.0.12"
+ "vue-router": "^4.0.12",
+ "vue-select": "^4.0.0-beta.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
@@ -14013,6 +14014,14 @@
"vue": "^3.0.0"
}
},
+ "node_modules/vue-select": {
+ "version": "4.0.0-beta.3",
+ "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-4.0.0-beta.3.tgz",
+ "integrity": "sha512-sXufbTDluz26a39UUZE9jeh9Hojnn8zr9qDDUlVEBc7E0F+h3+Nzy8YzyFHuVNrrYLmK0zrPkb7hWFulAEW41Q==",
+ "peerDependencies": {
+ "vue": "3.x"
+ }
+ },
"node_modules/vue-style-loader": {
"version": "4.1.3",
"resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -26596,6 +26605,12 @@
"@vue/devtools-api": "^6.0.0-beta.18"
}
},
+ "vue-select": {
+ "version": "4.0.0-beta.3",
+ "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-4.0.0-beta.3.tgz",
+ "integrity": "sha512-sXufbTDluz26a39UUZE9jeh9Hojnn8zr9qDDUlVEBc7E0F+h3+Nzy8YzyFHuVNrrYLmK0zrPkb7hWFulAEW41Q==",
+ "requires": {}
+ },
"vue-style-loader": {
"version": "4.1.3",
"resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
diff --git a/package.json b/package.json
index 19533c04b4d95b9df0dc545b57ba20e7b1b97701..cda5f0833934a0a709220525a6d1b9386e641527 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
"bootstrap": "^5.1.3",
"core-js": "^3.6.5",
"vue": "^3.0.0",
- "vue-router": "^4.0.12"
+ "vue-router": "^4.0.12",
+ "vue-select": "^4.0.0-beta.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
diff --git a/src/router/index.js b/src/router/index.js
index f2e0d919bee631af270494280f66221a1bc4452a..7bc9277e022dbded363f52defd9648707924a087 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,5 @@
import { createRouter, createWebHistory } from "vue-router";
-import Home from "../views/Home.vue";
+// import Home from "../views/Home.vue";
import uProfil from "../views/uProfil.vue";
import aProfil from "../views/aProfil.vue";
import Login from "../views/Login.vue";
@@ -18,7 +18,7 @@ const routes = [
{
path: "/",
name: "Home",
- component: Home,
+ component: Login,
},
{
path: "/login",
diff --git a/src/views/KpiManagerDetail.vue b/src/views/KpiManagerDetail.vue
index db1f059e36b668e328a5265c1308daf2fc59ca82..1ff4c6f80241094d844e76ef9d44d02334b31f27 100644
--- a/src/views/KpiManagerDetail.vue
+++ b/src/views/KpiManagerDetail.vue
@@ -82,7 +82,14 @@
<h3 class="text-blue">Assignee</h3>
<hr class="my-2 " style="border: 1px solid #6992b4">
<div class="col">
- <button class="btn float-end" data-bs-toggle="modal" data-bs-target="#exampleModal">Tambah Karyawan</button>
+ <v-select multiple v-model="selected_employee"
+ :options="employees"
+ label="name"
+ :selectable="(option) => !assignees.some(assignee => assignee.employee_id === option.employee_id)">
+ </v-select>
+ </div>
+ <div class="col">
+ <button @click="assign" class="btn float-end">Assign KPI</button>
</div>
</div>
<div class="row p-3">
@@ -91,30 +98,13 @@
:columns="columns"
:filter="filter"
:edit= false
+ @delete-entry="detach"
></Table>
</div>
</div>
</div>
</div>
-
- <!-- Modal -->
- <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
- <div class="modal-dialog modal-dialog-centered">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title text-blue" id="exampleModalLabel">Assign Karyawan</h5>
- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
- </div>
- <div class="modal-body">
- ...
- </div>
- <div class="modal-footer">
- <button type="button" class="btn">Simpan</button>
- </div>
- </div>
- </div>
- </div>
</template>
<script>
@@ -122,7 +112,9 @@
import Header from "../components/header"
import Sidebar from "../components/sidebar"
import Table from "../components/table"
-import { HTTP } from '../http-common'
+// import { HTTP } from '../http-common'
+import vSelect from 'vue-select'
+import 'vue-select/dist/vue-select.css'
export default {
@@ -130,7 +122,8 @@ export default {
components: {
Header,
Sidebar,
- Table
+ Table,
+ vSelect
},
data() {
return{
@@ -148,7 +141,7 @@ export default {
columns: {
Id : {
name : "Id",
- data : "id",
+ data : "employee_id",
hidden : true,
clickable : false
},
@@ -159,39 +152,73 @@ export default {
clickable : false
},
},
- assignees: [
+ assignees: [],
+ temp_assignees: [
{
- id : 1,
- name : "Asep"
+ employee_id : 1,
+ name : "Budi"
}
- ]
+ ],
+ employees: [],
+ selected_employee: [],
+ temp_employees: [
+ {
+ employee_id: 1,
+ name: "Budi",
+ },
+ {
+ employee_id: 2,
+ name: "Asep",
+ },
+ {
+ employee_id: 3,
+ name: "Yana",
+ },
+ {
+ employee_id: 4,
+ name: "Yusuf",
+ },
+ {
+ employee_id: 5,
+ name: "Siti",
+ },
+ {
+ employee_id: 6,
+ name: "Yuni",
+ },
+ {
+ employee_id: 7,
+ name: "Hadi",
+ },
+ ],
}
},
methods: {
- insert(e){
- e.preventDefault();
- let data = {
- username: this.username,
- email: this.email,
- password: this.password,
- password_confirmation: this.password}
- HTTP.post("register", data, {
- headers:{
- 'Content-Type': 'application/json'
- }
- }).then((res)=>{
- if (res.status == 200){
- alert("Admin berhasil ditambahkan")
- document.getElementById("formAdmin").reset();
- }
- }).catch(()=>{
- alert("Gagal menambahkan Admin")
+ assign(){
+ //for all selected_employee attach kpi
+ //tambahin ke employees
+ this.selected_employee.forEach((emp) => {
+ this.assignees.push(emp)
})
-
+ this.selected_employee = []
+ },
+ detach(id){
+ //detach kpi ke backend
+ this.assignees = this.assignees.filter(x => x.employee_id != id)
+ },
+ getBawahan(){
+ //get bawahan ke backend
+ this.employees = this.temp_employees
+ },
+ getAssignee(){
+ this.assignees = this.temp_assignees
+ this.getBawahan()
+ //get assignee ke backend then getBawahan
}
},
mounted(){
+ this.getAssignee()
}
}
diff --git a/src/views/Login.vue b/src/views/Login.vue
index d5e03ed71ed0484f38fa7bf5a1889b7fb6cd17b5..049e6735a56c711eb85cebb2fc2ce2f0bc44a0e2 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -109,7 +109,7 @@ export default {
})
.then((response) => {
if (response.data.success) {
- this.$router.push({ name: "Home" });
+ this.$router.push({ name: "User" });
}
})
.catch(() => alert("username atau password salah"));