diff --git a/src/components/table-2.vue b/src/components/table-2.vue
index 10cc597e831863a53d8c3c945670b1fd38223c16..62ba655b3ee4ce1655da9a896d7e725cc69b6f7d 100644
--- a/src/components/table-2.vue
+++ b/src/components/table-2.vue
@@ -115,12 +115,18 @@ export default {
}else{
this.sorted.column = this.columns.Id.data
}
+ if (this.endpoint != ""){
this.getData()
+ }
+
},
watch: {
filter() {
this.page = 1
this.getData()
+ },
+ endpoint(){
+ this.getData()
}
},
methods: {
@@ -131,7 +137,7 @@ export default {
}
HTTP.get(`${this.endpoint}?page=${this.page}&sort=${sortCol}&filter[${this.filter_column}]=${this.filter}`).then((res)=>{
if (res.status == 200){
- console.log(res.data)
+ // console.log(res.data)
this.entries = res.data.data.data
this.page = res.data.data.current_page
this.entry_per_page = res.data.data.per_page
diff --git a/src/views/KpiManagerDetail.vue b/src/views/KpiManagerDetail.vue
index e7e913158ed1e199af3ef7847d42c16320f7f504..f02a9d7fef2b5526ed91123b2d2498ee8b0a4f4c 100644
--- a/src/views/KpiManagerDetail.vue
+++ b/src/views/KpiManagerDetail.vue
@@ -41,7 +41,7 @@
<option value="custom">Custom</option>
</select>
</div>
- <div v-show="period_type == 'Custom'" class="mb-3 me-3">
+ <div v-show="kpi.period_type == 'Custom'" class="mb-3 me-3">
<label for="deadlineInput" class="text-blue"> Waktu Deadline </label>
<input v-model="kpi.deadline" type="date" id="deadlineInput" class="form-control" readonly>
</div>
@@ -99,6 +99,7 @@
:filter="filter"
:edit= false
@delete-entry="detach"
+ @detail-entry="detail"
></Table>
</div>
@@ -153,7 +154,7 @@ export default {
name : "Nama",
data : "name",
hidden : false,
- clickable : false
+ clickable : true
},
},
assignees: [],
@@ -223,7 +224,10 @@ export default {
},
getBawahan(){
//get bawahan ke backend
- this.employees = this.temp_employees
+ // this.employees = this.temp_employees
+ HTTP.get("managed-employees").then((res)=>{
+ this.employees = res.data.data
+ })
},
getKpi(){
//get kpi dengan id kpi_id
@@ -233,6 +237,10 @@ export default {
this.kpi.deadline_time = this.kpi.deadline_time.replace(".", ":")
this.assignees = this.kpi.employees
}).catch(()=> alert("Error loading page"))
+ },
+ detail(id){
+ let emp = this.employees.find(e => e.id == id)
+ this.$router.push({ name: "ManagerKaryawanDetail", params: { id: emp.slug }})
}
},
diff --git a/src/views/ManagerKaryawanDetail.vue b/src/views/ManagerKaryawanDetail.vue
index 5061b6ecd198b363ebcd83386ada989167ccb890..5cdda1cd98bfb91abe2d8074bbaa011f0ab0243f 100644
--- a/src/views/ManagerKaryawanDetail.vue
+++ b/src/views/ManagerKaryawanDetail.vue
@@ -14,7 +14,7 @@
</div>
<div class="row p-2">
<div class="col">
- <h1 class="text-blue">NAMA</h1>
+ <h1 class="text-blue">{{emp.name}}</h1>
</div>
</div>
<form @submit="report" autocomplete="off" id="formReport">
@@ -50,9 +50,8 @@
</div>
</div>
<div class="row p-2">
- <!-- Ganti endpoint -->
<Table2
- :endpoint="'kpis'"
+ :endpoint="endpoint"
:columns="columns"
:filter="filter"
:filter_column="'period_type'"
@@ -71,7 +70,7 @@
import Table2 from "../components/table-2";
import Header from "../components/header";
import Sidebar from "../components/sidebar";
-// import { HTTP } from "../http-common";
+import { HTTP } from "../http-common";
export default {
@@ -117,20 +116,32 @@ export default {
data: "custom"},
],
id: -1,
+ slug: "",
emp: {
name : "Nama Karyawan"
},
+ endpoint:"",
+ startReport : "",
+ endReport:"",
}
},
- mounted(){
- this.id = this.$route.params.id
+ created(){
+ this.slug = this.$route.params.id
+ this.getEmp()
},
methods: {
openResponses(idKpi){
- this.$router.push({ name: "ResponseIndex", params: { kpiId: idKpi, empId:this.id}});
+ this.$router.push({ name: "ResponseIndex", params: { kpiId: idKpi, empId:this.slug}});
},
report(){
//download report
+ },
+ getEmp(){
+ HTTP.get(`employees/${this.slug}`).then((res)=>{
+ this.emp = res.data.data
+ this.endpoint = `kpis/assigned/${this.emp.id}`
+ console.log(this.emp)
+ }).catch(()=> {alert("Error loading page")})
}
}
diff --git a/src/views/ResponseIndex.vue b/src/views/ResponseIndex.vue
index a0779798ce210c8f4476ebc83df1d352fbdcb7fd..4dfd58dded7d6c3df5a6d76f3cd6215715bd8115 100644
--- a/src/views/ResponseIndex.vue
+++ b/src/views/ResponseIndex.vue
@@ -5,7 +5,7 @@
<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">
+ <router-link :to="{ path: `/manager/employees/${this.slug}` }" 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>
@@ -14,12 +14,84 @@
</div>
<div class="row p-2">
<div class="col">
- <h1 class="text-blue">Nama KPI</h1>
+ <h1 class="text-blue">{{this.emp.name}}</h1>
+ </div>
+ </div>
+ <hr class="m-2">
+ <div class="row px-2">
+ <div class="col">
+ <h3 class="text-blue">{{this.kpi.name}}</h3>
+ </div>
+ </div>
+
+ <div class="row p-3">
+ <div class="col">
+ <div class="mb-3 me-3">
+ <label for="NameInput" class="text-blue"> Nama </label>
+ <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>
+ <input v-model="kpi.description" type="text" id="deskripsiInput" class="form-control" readonly>
+ </div>
+ <div class="mb-3 me-3">
+ <label for="typeInput" class="text-blue"> Periode </label>
+ <select
+ v-model="kpi.period_type"
+ class="form-select"
+ aria-label="Default select example"
+ id="typeInput"
+ disabled>
+ <option value="daily" selected>Harian</option>
+ <option value="weekly">Mingguan</option>
+ <option value="monthly">Bulanan</option>
+ <option value="custom">Custom</option>
+ </select>
+ </div>
+ <div v-show="kpi.period_type == 'Custom'" class="mb-3 me-3">
+ <label for="deadlineInput" class="text-blue"> Waktu Deadline </label>
+ <input v-model="kpi.deadline" type="date" id="deadlineInput" class="form-control" readonly>
+ </div>
+ <div class="mb-3 me-3">
+ <label for="deadlineTimeInput" class="text-blue"> Waktu Deadline </label>
+ <input v-model="kpi.deadline_time" type="time" id="deadlineTimeInput" class="form-control" readonly>
+ </div>
+ </div>
+ <div class="col">
+ <div class="mb-3">
+ <label for="typeInput" class="text-blue"> Jenis Target </label>
+ <select
+ v-model="kpi.target_type"
+ class="form-select"
+ aria-label="Default select example"
+ id="typeInput" disabled>
+ <option value="number" selected>Angka</option>
+ <option value="percentage">Persentase</option>
+ </select>
+ </div>
+ <div class="mb-3">
+ <label for="targetInput" class="text-blue"> Target </label>
+ <input v-model="kpi.target" type="number" id="tarrgetInput" class="form-control" readonly>
+ </div>
+ <div class="mb-3">
+ <label for="weightInput" class="text-blue"> Bobot </label>
+ <input v-model="kpi.weight" type="number" id="weightInput" class="form-control" readonly>
+ </div>
+ <div class="mb-3">
+ <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>
+
+ </div>
+ </div>
+ <div class="row p-2">
+ <div class="col">
+ <h3 class="text-blue">Responses</h3>
</div>
</div>
<div class="row p-2">
<Table2
- :endpoint="`kpis/${this.kpiId}/employees/${this.empId}/kpi-responses`"
+ :endpoint="endpoint"
:columns="columns"
:filter="filter"
:filter_column="'status'"
@@ -39,7 +111,7 @@
import Table2 from "../components/table-2";
import Header from "../components/header";
import Sidebar from "../components/sidebar";
-// import { HTTP } from "../http-common";
+import { HTTP } from "../http-common";
export default {
@@ -78,18 +150,34 @@ export default {
clickable : false
},
},
- empId:-1,
+ emp:{},
kpiId:-1,
+ slug: "",
+ endpoint:"",
+ kpi:{},
}
},
created(){
- this.empId = this.$route.params.empId
+ this.slug = this.$route.params.empId
this.kpiId = this.$route.params.kpiId
+ this.getEmpId()
},
methods: {
detailResponse(id){
//routing page detail
this.$router.push({ name: "ResponseDetail", params: { kpiId: this.kpiId, empId:this.empId, responseId:id }});
+ },
+ getEmpId(){
+ HTTP.get(`employees/${this.slug}`).then((res)=>{
+ this.emp = res.data.data
+ this.getKpiName()
+ })
+ },
+ getKpiName(){
+ HTTP.get(`kpis/${this.kpiId}`).then(res=>{
+ this.kpi = res.data.data
+ this.endpoint = `kpis/${this.kpi.id}/employees/${this.emp.id}/kpi-responses`
+ })
}
}