diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index 33c34473ade6058037f041d69d6bb28cf075636e..a1ba89c257d53cc4863cbf62308282efa541b7f0 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -31,13 +31,13 @@
<template v-for="n in Object.keys(nav_list)" :key="n">
<li class="nav-item w-100">
<router-link
- :to="{ path: nav_list[n] }"
+ :to="{ name: nav_list[n] }"
v-if="n == this.current_page"
class="nav-link text-blue pl-4 selected-nav"
>{{ n }}</router-link
>
<router-link
- :to="{ path: nav_list[n] }"
+ :to="{ name: nav_list[n] }"
v-else
class="nav-link text-blue pl-4"
>{{ n }}</router-link
@@ -60,9 +60,11 @@ export default {
data() {
return {
nav_list: {
- Karyawan: "/user",
- Admin: "/admin",
- Departemen: "/departemen",
+ Karyawan: "User",
+ Admin: "Admin",
+ Departemen: "Departemen",
+ KPI: "ManagerkpiIndex",
+ Bawahan: "ManagerkaryawanIndex"
},
isActive: true,
};
diff --git a/src/components/table-2.vue b/src/components/table-2.vue
index 2742b764d021033973c122343427927ccf85ac36..10cc597e831863a53d8c3c945670b1fd38223c16 100644
--- a/src/components/table-2.vue
+++ b/src/components/table-2.vue
@@ -82,6 +82,10 @@ export default {
endpoint: String,
filter: String,
filter_column: String,
+ default_sort: {
+ type: String,
+ default: ""
+ },
edit: {
type: Boolean,
default: true
@@ -90,14 +94,13 @@ export default {
type: Boolean,
default: true
},
-
-
+ key: Number,
},
data() {
return {
pagination: [],
sorted: {
- column: this.columns.Id.data,
+ column: '',
asc: true,
},
entries: [],
@@ -107,6 +110,11 @@ export default {
};
},
mounted() {
+ if (this.default_sort != ""){
+ this.sorted.column = this.default_sort
+ }else{
+ this.sorted.column = this.columns.Id.data
+ }
this.getData()
},
watch: {
diff --git a/src/router/index.js b/src/router/index.js
index 73232584641d938abe454eb53b241191cfde718d..95314beaecbf50a05d9b1960038a58cbb85c5051 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,6 +17,8 @@ import Test from "../views/Test.vue";
import ManagerKpiIndex from "../views/ManagerKpiIndex.vue";
import ManagerKaryawanIndex from "../views/ManagerKaryawanIndex.vue";
import ManagerKaryawanDetail from "../views/ManagerKaryawanDetail.vue";
+import ResponseIndex from "../views/ResponseIndex.vue";
+import ResponseDetail from "../views/ResponseDetail.vue";
const routes = [
{
@@ -104,6 +106,16 @@ const routes = [
name: "ManagerKaryawanDetail",
component: ManagerKaryawanDetail,
},
+ {
+ path: "/manager/kpi/:kpiId/employees/:empId/responses",
+ name: "ResponseIndex",
+ component: ResponseIndex
+ },
+ {
+ path: "/manager/kpi/:kpiId/employees/:empId/responses/:responseId",
+ name: "ResponseDetail",
+ component: ResponseDetail
+ },
{
path: "/test",
name: "test",
diff --git a/src/views/KpiCreate.vue b/src/views/KpiCreate.vue
index 13c5f9026409a97cf341a3184287ea3a515c0704..5f251192772e5190a9ecf8b04ee95a75453a97bd 100644
--- a/src/views/KpiCreate.vue
+++ b/src/views/KpiCreate.vue
@@ -5,7 +5,7 @@
<div class="col ps-md-2 pt-2">
<Header></Header>
<div class="row p-3">
- <router-link :to="{ path: '/admin' }" style="text-decoration: none">
+ <router-link :to="{ path: '/manager/kpi' }" 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>
@@ -63,7 +63,7 @@
aria-label="Default select example"
id="typeInput">
<option value="number" selected>Angka</option>
- <option value="Persentase">Persentase</option>
+ <option value="percentage">Persentase</option>
</select>
</div>
<div class="mb-3">
diff --git a/src/views/KpiManagerDetail.vue b/src/views/KpiManagerDetail.vue
index 858cfca3068cc4ef9040927ae814181d6eb81a15..143ea79aa2522c4ae78c598556d62cea5efd956b 100644
--- a/src/views/KpiManagerDetail.vue
+++ b/src/views/KpiManagerDetail.vue
@@ -5,7 +5,7 @@
<div class="col ps-md-2 pt-2">
<Header></Header>
<div class="row p-3">
- <router-link :to="{ path: '/admin' }" style="text-decoration: none">
+ <router-link :to="{ path: '/manager/kpi' }" 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>
@@ -13,7 +13,7 @@
</router-link>
</div>
<div class="row p-3">
- <h1 class="text-blue">{{this.kpi.kpi_name}}</h1>
+ <h1 class="text-blue">{{this.kpi.name}}</h1>
<hr class="my-4 " style="border: 1px solid #6992b4">
</div>
<form @submit="insert" autocomplete="off" id="formAdmin">
@@ -21,7 +21,7 @@
<div class="col">
<div class="mb-3 me-3">
<label for="NameInput" class="text-blue"> Nama </label>
- <input v-model="kpi.kpi_name" type="text" id="NameInput" class="form-control" readonly>
+ <input v-model="kpi.name" type="text" id="NameInput" class="form-control" readonly>
</div>
<div class="mb-3 me-3">
<label for="deskripsiInput" class="text-blue"> Deskripsi </label>
@@ -59,7 +59,7 @@
aria-label="Default select example"
id="typeInput" disabled>
<option value="number" selected>Angka</option>
- <option value="precentage">Persentase</option>
+ <option value="percentage">Persentase</option>
</select>
</div>
<div class="mb-3">
@@ -71,7 +71,7 @@
<input v-model="kpi.weight" type="number" id="weightInput" class="form-control" readonly>
</div>
<div class="mb-3">
- <input v-model="kpi.inverted" class="form-check-input mt-1" type="checkbox" value="" id="CheckDefault" disabled>
+ <input v-model="kpi.is_score_inverted" class="form-check-input mt-1" type="checkbox" value="" id="CheckDefault" disabled>
<label class="form-check-label text-blue ms-2" for="CheckDefault">Target Inverted </label>
</div>
@@ -128,16 +128,16 @@ export default {
data() {
return{
temp_kpi : {
- emp_id: 1,
- kpi_name: "Kebersihan",
+ employee_id: 1,
+ name: "Kebersihan",
description: "Lingkungan Salman Bersih",
target: 100,
- inverted: false,
- target_type: "Persentase",
+ is_score_inverted: false,
+ target_type: "number",
weight: 20,
- period_type: "Harian",
+ period_type: "daily",
deadline: "",
- deadline_time: "23:00",
+ deadline_time: "23:59",
},
kpi : {},
filter: "",
@@ -231,12 +231,12 @@ export default {
//get assignee ke backend then getBawahan
},
getKpi(){
- this.kpi = this.temp_kpi
//get kpi dengan id kpi_id
- // HTTP.get(`kpis/${this.kpi_id}`).then((res)=>{
- // console.log(res.data)
- // this.kpi = res.data
- // }).catch(()=> alert("Error loading page"))
+ HTTP.get(`kpis/${this.kpi_id}`).then((res)=>{
+ console.log(res.data.data)
+ this.kpi = res.data.data
+ this.kpi.deadline_time = this.kpi.deadline_time.replace(".", ":")
+ }).catch(()=> alert("Error loading page"))
}
},
diff --git a/src/views/ManagerKaryawanDetail.vue b/src/views/ManagerKaryawanDetail.vue
index 5a42511101a7a7650476f10eeba75bb59c7b93ed..5061b6ecd198b363ebcd83386ada989167ccb890 100644
--- a/src/views/ManagerKaryawanDetail.vue
+++ b/src/views/ManagerKaryawanDetail.vue
@@ -127,8 +127,7 @@ export default {
},
methods: {
openResponses(idKpi){
- //routing ke halaman response
- console.log(idKpi)
+ this.$router.push({ name: "ResponseIndex", params: { kpiId: idKpi, empId:this.id}});
},
report(){
//download report
diff --git a/src/views/ManagerKpiIndex.vue b/src/views/ManagerKpiIndex.vue
index 5daa7a35cb6d48f957ab500aaef05ab44f6679ce..b444f2da0669095e2d06f81a27b97b7ed25ca8aa 100644
--- a/src/views/ManagerKpiIndex.vue
+++ b/src/views/ManagerKpiIndex.vue
@@ -9,8 +9,7 @@
<h1 class="text-blue">Daftar KPI</h1>
</div>
<div class="col">
- <!-- Ganti Path -->
- <router-link :to="{ path: '/user/insert' }" style="text-decoration: none">
+ <router-link :to="{ path: '/manager/kpi/create' }" style="text-decoration: none">
<button class="btn float-end">Buat KPI</button>
</router-link>
</div>
@@ -33,6 +32,7 @@
:columns="columns"
:filter="filter"
:filter_column="'period_type'"
+ :key = "componentKey"
@edit-entry="editKpi"
@delete-entry="deleteKpi"
@detail-entry="detailKpi"
@@ -92,13 +92,16 @@ export default {
data: "yearly"},
{name: "Custom",
data: "custom"},
- ]
+ ],
+ componentKey : 1,
}
},
methods: {
deleteKpi(id){
if (confirm("Yakin akan menghapus KPI?")){
- HTTP.delete(`kpis/${id}`).catch(()=>{
+ HTTP.delete(`kpis/${id}`).then(()=>{
+ this.componentKey += 1
+ }).catch(()=>{
alert("Gagal Menghapus KPI")
})
}
@@ -109,7 +112,7 @@ export default {
},
detailKpi(id){
//routing page detail
- console.log(id)
+ this.$router.push({ name: "KpiManagerDetail", params: { id: id }});
}
}
diff --git a/src/views/ResponseDetail.vue b/src/views/ResponseDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6994551bb9e3c326fda7c946faeae42050f690c5
--- /dev/null
+++ b/src/views/ResponseDetail.vue
@@ -0,0 +1,41 @@
+<template>
+ <div class="container-fluid">
+ <div class="row flex-nowrap">
+ <Sidebar current_page = "About"></Sidebar>
+ <div class="col ps-md-2 pt-2">
+ <Header></Header>
+ <!-- isi mulai di sini -->
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+
+import Header from "../components/header"
+import Sidebar from "../components/sidebar"
+
+
+export default {
+ name: "ResponseDetail",
+ components: {
+ Header,
+ Sidebar
+ },
+}
+</script>
+
+<style scoped>
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ background-color: #fff;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/views/ResponseIndex.vue b/src/views/ResponseIndex.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d627c4b4c866f50ac80b5dd3766f1ef4681d31d8
--- /dev/null
+++ b/src/views/ResponseIndex.vue
@@ -0,0 +1,120 @@
+<template>
+ <div class="container-fluid">
+ <div class="row flex-nowrap">
+ <Sidebar current_page = "About"></Sidebar>
+ <div class="col ps-md-2 pt-2">
+ <Header></Header>
+ <div class="row p-3">
+ <router-link :to="{ path: `/manager/employees/${this.empId}` }" 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-2">
+ <div class="col">
+ <h1 class="text-blue">Nama KPI</h1>
+ </div>
+ </div>
+ <div class="row p-2">
+ <Table2
+ :endpoint="`kpis/${this.kpiId}/employees/${this.empId}/kpi-responses`"
+ :columns="columns"
+ :filter="filter"
+ :filter_column="'status'"
+ :edit = "false"
+ :delete = "false"
+ :default_sort = "'status'"
+ @detail-entry="detailResponse"
+ ></Table2>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+
+import Table2 from "../components/table-2";
+import Header from "../components/header";
+import Sidebar from "../components/sidebar";
+// import { HTTP } from "../http-common";
+
+
+export default {
+ name: "ResponseIndex",
+ components: {
+ Header,
+ Sidebar,
+ Table2
+ },
+ data(){
+ return{
+ filter: "",
+ columns: {
+ Id: {
+ name : "Id",
+ data : "id",
+ hidden : true,
+ clickable : false
+ },
+ Tanggal: {
+ name : "Tanggal",
+ data : "date",
+ hidden : false,
+ clickable : true
+ },
+ Nila: {
+ name : "Nilai",
+ data : "actual",
+ hidden : false,
+ clickable : false
+ },
+ Status: {
+ name : "Status",
+ data : "status",
+ hidden : false,
+ clickable : false
+ },
+ },
+ empId:-1,
+ kpiId:-1,
+ }
+ },
+ created(){
+ this.empId = this.$route.params.empId
+ this.kpiId = this.$route.params.kpiId
+ console.log(this.empId, this.kpiId)
+ },
+ methods: {
+ detailResponse(id){
+ //routing page detail
+ this.$router.push({ name: "ResponseDetail", params: { kpiId: this.kpiId, empId:this.empId, responseId:id }});
+ }
+ }
+
+}
+</script>
+
+<style scoped>
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ background-color: #fff;
+}
+
+.btn {
+ background-color: #6992b4;
+ color: #f1f7fc;
+ border-radius: 15px;
+ padding: 7px;
+}
+
+
+</style>
\ No newline at end of file