diff --git a/src/components/commentCard.vue b/src/components/commentCard.vue
index adb544912912e856ee8ec491865df5a4174baf8a..8bdc3082f26b1ca9ae5b75ebc24fbb3258a0e0bd 100644
--- a/src/components/commentCard.vue
+++ b/src/components/commentCard.vue
@@ -5,7 +5,14 @@
</div>
<div class="card-footer">
- <p class=" text-blue">{{comment.created_at}}</p>
+ <div class="row">
+ <div class="col">
+ <p class=" text-blue">{{comment.employee_name}}</p>
+ </div>
+ <div class="col">
+ <p class="text-blue float-end">{{comment.created_at}}</p>
+ </div>
+ </div>
</div>
</div>
</template>
diff --git a/src/components/table-response.vue b/src/components/table-response.vue
index 181bd2929753249aba9b899b74a42a4be74e64dc..9d0b8322124fa2c89ebd9f3f250efc7e767bd122 100644
--- a/src/components/table-response.vue
+++ b/src/components/table-response.vue
@@ -25,20 +25,25 @@
:key="e.id"
>
<template v-for="c in columns" :key="c">
- <template v-if="!c.hidden">
- <td v-if="c.clickable" @click="this.$emit('detail-entry', e[columns.Id.data])" class="clickable">
+ <template v-if="!c.hidden && c.name!='Bukti'">
+ <td v-if="c.clickable " @click="this.$emit('detail-entry', e[columns.Id.data])" class="clickable">
{{ e[c.data] }}
</td>
<td v-else >
{{ e[c.data]}}
</td>
</template>
+ <td v-if="c.name=='Bukti'" >
+ <a :href="e[c.data][0].image">link</a>
+ </td>
</template>
- <td v-if="e.status == 'pending' && isManager" style="text-align: center">
+ <td v-if="isManager" style="text-align: center">
+ <template v-if="e.status == 'pending'">
<button @click="this.$emit('approve', e[columns.Id.data])" class="btn-green mx-2">Approve</button>
<button @click="this.$emit('adjust', e[columns.Id.data])" class="btn-blue mx-2">Adjust</button>
<button @click="this.$emit('reject', e[columns.Id.data])" class="btn-reject mx-2">Reject</button>
+ </template>
</td>
</tr>
</tbody>
@@ -76,6 +81,7 @@ import { HTTP } from '../http-common'
// import axios from 'axios';
export default {
+ components: {},
name: "TableR",
props: {
//map nama kolom ke data
diff --git a/src/router/index.js b/src/router/index.js
index 98a19334aa96ff4db3116bb95cf5cb3467904344..40b597cc21b59d2f4a62ddd2f94658f952b04884 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -20,6 +20,7 @@ import ManagerKaryawanIndex from "../views/ManagerKaryawanIndex.vue";
import ManagerKaryawanDetail from "../views/ManagerKaryawanDetail.vue";
import ResponseIndex from "../views/ResponseIndex.vue";
import ResponseDetail from "../views/ResponseDetail.vue";
+import ResponseEmployee from "../views/ResponseEmployee.vue";
const routes = [
{
@@ -93,6 +94,11 @@ const routes = [
component: ResponseIndex,
props: { isManager: false }
},
+ {
+ path: "/kpi/:kpiId/responses/:responseId",
+ name: "ResponseEmployee",
+ component: ResponseEmployee,
+ },
{
path: "/manager/kpi/create",
name: "KpiCreate",
diff --git a/src/views/KpiDetail.vue b/src/views/KpiDetail.vue
index 1286c069fa3be46d923ae6606f9b44238e798bc2..0a0cf8a07bd6164f68a2cd2ac873a5b79f831241 100644
--- a/src/views/KpiDetail.vue
+++ b/src/views/KpiDetail.vue
@@ -77,9 +77,9 @@
<label class="form-check-label text-blue ms-2" for="CheckDefault">Target Inverted </label>
</div>
</div>
- <router-link :to="{ path: '/user/insert' }" style="text-decoration: none">
- <button class="btn float-end">Responses</button>
- </router-link>
+ <div>
+ <button @click="responses" class="btn float-end">Responses</button>
+ </div>
</div>
</form>
<div class="row p-3">
@@ -166,6 +166,9 @@ export default {
this.response.images = []
this.response.images.push(file)
// this.item.imageUrl = URL.createObjectURL(file)
+ },
+ responses(){
+ this.$router.push({ path: `/kpi/${this.kpi_id}/responses`})
}
diff --git a/src/views/ResponseDetail.vue b/src/views/ResponseDetail.vue
index 19403249880af618301cc900bce54e5ad02568eb..8787d51a2dc4c94ccd3cbebb66b5b979bc158b21 100644
--- a/src/views/ResponseDetail.vue
+++ b/src/views/ResponseDetail.vue
@@ -13,7 +13,17 @@
</router-link>
</div>
<div class="row p-2">
- <h1 class="text-blue">{{kpi.name}}</h1>
+ <div class="col">
+ <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-2">
<div class="mb-3 me-3">
<label for="dateInput" class="text-blue"> Tanggal </label>
<input v-model="response.date" type="text" id="dateInput" class="form-control" readonly>
@@ -28,16 +38,21 @@
</div>
<div class="mb-3 me-3">
<label for="NameInput" class="text-blue"> Deskripsi </label>
- <input v-model="response.description" type="text" id="NameInput" class="form-control" readonly>
+ <textarea v-model="response.description" type="text" id="NameInput" class="form-control" readonly> </textarea>
</div>
<div class="mb-3 me-3">
<label for="NameInput" class="text-blue"> Status </label>
<input v-model="response.status" type="text" id="NameInput" class="form-control" readonly>
</div>
- <div class="col">
- <button class="btn-reject float-end mx-2">Reject</button>
- <button class="btn-blue float-end mx-2">Adjust</button>
- <button class="btn-green float-end mx-2">Approve</button>
+ <div class="mb-3 me-3">
+ <label for="NameInput" class="text-blue"> Bukti: </label>
+ <a class="mx-2" :href="response.images[0].image">link</a>
+ </div>
+ <div v-if="response.status == 'pending'" class="col">
+ <!-- <div class="col"> -->
+ <button @click="reject" class="btn-reject float-end mx-2">Reject</button>
+ <button @click="adjust" class="btn-blue float-end mx-2">Adjust</button>
+ <button @click="Reject" class="btn-green float-end mx-2">Approve</button>
</div>
</div>
<hr class="m-2">
@@ -46,7 +61,7 @@
<h1 class="text-blue">Komentar</h1>
</div>
<div class="col">
- <button class="btn-blue float-end">Buat Komentar</button>
+ <button class="btn-blue float-end" data-bs-toggle="modal" data-bs-target="#commentModal" id="commentButton">Buat Komentar</button>
</div>
</div>
<template v-for="c in comments" :key="c">
@@ -55,6 +70,43 @@
</div>
</div>
</div>
+ <!-- Adjust Modal -->
+ <button hidden="hidden" type="button" class="btn" data-bs-toggle="modal" data-bs-target="#adjustModal" id="modalButton">
+ Launch modal
+ </button>
+ <div class="modal fade" id="adjustModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-centered mx-auto">
+ <div class="modal-content">
+ <div class="modal-body">
+ <div class="mb-3 me-3 p-2">
+ <label class="text-blue"> Nilai Aktual </label>
+ <input v-model="response.actual" type="number" min="0" class="form-control" required>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn-red m-2" data-bs-dismiss="modal">Tutup</button>
+ <button type="submit" class="btn m-2" data-bs-dismiss="modal" @click="saveAdj">Simpan</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Comment Modal -->
+ <div class="modal fade" id="commentModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-centered mx-auto">
+ <div class="modal-content">
+ <div class="modal-body">
+ <div class="mb-3 me-3 p-2">
+ <label class="text-blue"> Komentar </label>
+ <textarea v-model="newComment" type="number" min="0" class="form-control" required></textarea>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn-red m-2" data-bs-dismiss="modal">Tutup</button>
+ <button type="submit" class="btn m-2" data-bs-dismiss="modal" @click="postComment">Simpan</button>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
@@ -62,9 +114,7 @@
import Header from "../components/header"
import Sidebar from "../components/sidebar"
import CommentCard from "../components/commentCard"
-// import VueFinalModal from 'vue-final-modal'
-
-
+import { HTTP } from "../http-common";
export default {
name: "ResponseDetail",
@@ -88,25 +138,85 @@ export default {
date: "10-23-2021",
actual: 10,
description: "Deskripsi",
- status: "Pending"
+ status: "Pending",
+ images: [{image: ""}]
},
kpi:{
name: "Nama KPI",
target: 20
- }
-
+ },
+ emp: {},
+ responseAdj:{},
+ newComment:""
}
},
created(){
this.empId = this.$route.params.empId
this.kpiId = this.$route.params.kpiId
this.responseId = this.$route.params.responseId
+ this.getEmpId()
+ this.getResponse()
this.getComments()
},
methods: {
getComments(){
- this.comments.push(this.temp_comment)
- this.comments.push(this.temp_comment)
+ // this.comments.push(this.temp_comment)
+ // this.comments.push(this.temp_comment)
+ HTTP.get(`kpi-responses/${this.responseId}/comments`).then((res)=>{
+ this.comments = res.data.data.data
+ })
+ },
+ getEmpId(){
+ HTTP.get(`employees/${this.empId}`).then((res)=>{
+ this.emp = res.data.data
+ this.getKpiName()
+ })
+ },
+ getKpiName(){
+ HTTP.get(`kpis/${this.kpiId}`).then(res=>{
+ this.kpi = res.data.data
+ })
+ },
+ getResponse(){
+ HTTP.get(`kpi-responses/${this.responseId}`).then((res)=>{
+ this.response = res.data.data
+ }).catch(()=>{alert("Error loading page")})
+ },
+ changeStatus(id, status){
+ let response = {
+ "kpi_id": this.response.kpi_id,
+ "actual" : this.responseId.actual,
+ "description" : this.responseId.description,
+ "status" : status,
+ "date" : this.responseId.date
+ }
+ HTTP.put(`kpi-responses/${id}`, response).then(()=>{
+ this.refresh = !this.refresh
+ }).catch(()=> {alert("Gagal Mengubah Status")})
+ },
+ approve(){
+ this.changeStatus(this.responseId, "approved")
+ },
+ reject(){
+ this.changeStatus(this.responseId, "rejected")
+ },
+ adjust(){
+ document.getElementById("modalButton").click()
+ },
+ saveAdj(){
+ HTTP.put(`kpi-responses/${this.responseId}`, this.responseAdj).then(()=>{
+ this.refresh = !this.refresh
+ }).catch(()=> {alert("Gagal Mengubah Nilai")})
+ },
+ postComment(){
+ let comment = {
+ kpi_response_id : this.responseId,
+ comment : this.newComment
+ }
+ HTTP.post(`kpi-comments`, comment).then(()=>{
+ this.getComments()
+ this.newComment = ""
+ }).catch(()=> {alert("Gagal membuat komentar")})
}
},
}
@@ -144,4 +254,18 @@ body {
border-radius: 15px;
padding: 7px;
}
+
+.btn {
+ background-color: #6992b4;
+ color: #f1f7fc;
+ border-radius: 15px;
+ padding: 7px;
+}
+
+.btn-red {
+ background-color: #f4476b;
+ color: #f1f7fc;
+ border-radius: 15px;
+ padding: 7px;
+}
</style>
\ No newline at end of file
diff --git a/src/views/ResponseEmployee.vue b/src/views/ResponseEmployee.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d2e52d7b672c625457d093949634f0250c666430
--- /dev/null
+++ b/src/views/ResponseEmployee.vue
@@ -0,0 +1,218 @@
+<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: `/kpi/${this.kpiId}/responses` }" 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">{{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-2">
+ <div class="mb-3 me-3">
+ <label for="dateInput" class="text-blue"> Tanggal </label>
+ <input v-model="response.date" type="text" id="dateInput" class="form-control" readonly>
+ </div>
+ <div class="mb-3 me-3">
+ <label for="NameInput" class="text-blue"> Target </label>
+ <input v-model="kpi.target" type="text" id="NameInput" class="form-control" readonly>
+ </div>
+ <div class="mb-3 me-3">
+ <label for="NameInput" class="text-blue"> Aktual </label>
+ <input v-model="response.actual" type="text" id="NameInput" class="form-control" readonly>
+ </div>
+ <div class="mb-3 me-3">
+ <label for="NameInput" class="text-blue"> Deskripsi </label>
+ <textarea v-model="response.description" type="text" id="NameInput" class="form-control" readonly> </textarea>
+ </div>
+ <div class="mb-3 me-3">
+ <label for="NameInput" class="text-blue"> Status </label>
+ <input v-model="response.status" type="text" id="NameInput" class="form-control" readonly>
+ </div>
+ <div class="mb-3 me-3">
+ <label for="NameInput" class="text-blue"> Bukti: </label>
+ <a class="mx-2" :href="response.images[0].image">link</a>
+ </div>
+ </div>
+ <hr class="m-2">
+ <div class="row p-2">
+ <div class="col">
+ <h1 class="text-blue">Komentar</h1>
+ </div>
+ <div class="col">
+ <button class="btn-blue float-end" data-bs-toggle="modal" data-bs-target="#commentModal" id="commentButton">Buat Komentar</button>
+ </div>
+ </div>
+ <template v-for="c in comments" :key="c">
+ <CommentCard :comment="c"></CommentCard>
+ </template>
+ </div>
+ </div>
+ </div>
+ <!-- Comment Modal -->
+ <div class="modal fade" id="commentModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-centered mx-auto">
+ <div class="modal-content">
+ <div class="modal-body">
+ <div class="mb-3 me-3 p-2">
+ <label class="text-blue"> Komentar </label>
+ <textarea v-model="newComment" type="number" min="0" class="form-control" required></textarea>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn-red m-2" data-bs-dismiss="modal">Tutup</button>
+ <button type="submit" class="btn m-2" data-bs-dismiss="modal" @click="postComment">Simpan</button>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+
+import Header from "../components/header"
+import Sidebar from "../components/sidebar"
+import CommentCard from "../components/commentCard"
+import { HTTP } from "../http-common";
+
+export default {
+ name: "ResponseEmployee",
+ components: {
+ Header,
+ Sidebar,
+ CommentCard,
+ // VueFinalModal
+ },
+ data(){
+ return{
+ temp_comment:{
+ comment : "Tolong diperbaiki lagi",
+ created_at : "10-23-2021"
+ },
+ comments: [],
+ empId: 0,
+ responseId: 0,
+ kpiId: 0,
+ response: {
+ date: "10-23-2021",
+ actual: 10,
+ description: "Deskripsi",
+ status: "Pending",
+ images: [{image: ""}]
+ },
+ kpi:{
+ name: "Nama KPI",
+ target: 20
+ },
+ emp: {},
+ responseAdj:{},
+ newComment:""
+ }
+ },
+ created(){
+ this.kpiId = this.$route.params.kpiId
+ this.responseId = this.$route.params.responseId
+ this.getEmpId()
+ this.getResponse()
+ this.getComments()
+ },
+ methods: {
+ getComments(){
+ // this.comments.push(this.temp_comment)
+ // this.comments.push(this.temp_comment)
+ HTTP.get(`kpi-responses/${this.responseId}/comments`).then((res)=>{
+ this.comments = res.data.data.data
+ })
+ },
+ getEmpId(){
+ HTTP.get('users/profile').then((res)=>{
+ this.emp = res.data.data.profile
+ this.getKpiName()
+ })
+ },
+ getKpiName(){
+ HTTP.get(`kpis/${this.kpiId}`).then(res=>{
+ this.kpi = res.data.data
+ })
+ },
+ getResponse(){
+ HTTP.get(`kpi-responses/${this.responseId}`).then((res)=>{
+ this.response = res.data.data
+ }).catch(()=>{alert("Error loading page")})
+ },
+ postComment(){
+ let comment = {
+ kpi_response_id : this.responseId,
+ comment : this.newComment
+ }
+ HTTP.post(`kpi-comments`, comment).then(()=>{
+ this.getComments()
+ this.newComment = ""
+ }).catch(()=> {alert("Gagal membuat komentar")})
+ }
+ },
+}
+</script>
+
+<style scoped>
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ background-color: #fff;
+}
+
+.btn-blue {
+ background-color: #6992b4;
+ color: #f1f7fc;
+ border-radius: 15px;
+ padding: 7px;
+}
+
+.btn-green {
+ background-color: #3CB371;
+ color: #f1f7fc;
+ border-radius: 15px;
+ padding: 7px;
+}
+
+.btn-reject {
+ background: #f4476b;
+ color: #f1f7fc;
+ border-radius: 15px;
+ padding: 7px;
+}
+
+.btn {
+ background-color: #6992b4;
+ color: #f1f7fc;
+ border-radius: 15px;
+ padding: 7px;
+}
+
+.btn-red {
+ background-color: #f4476b;
+ color: #f1f7fc;
+ border-radius: 15px;
+ padding: 7px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ResponseIndex.vue b/src/views/ResponseIndex.vue
index 058a5f5884f5fb198aec20508834fcfca0a43339..2b53667cc074f0c4eb62f5076862887b78e86727 100644
--- a/src/views/ResponseIndex.vue
+++ b/src/views/ResponseIndex.vue
@@ -14,7 +14,7 @@
</div>
<div v-else class="row p-3">
<!-- Ganti Path -->
- <router-link :to="{ path: `/manager/employees/${this.slug}` }" style="text-decoration: none">
+ <router-link :to="{ path: `/kpi/${this.kpiId}` }" 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>
@@ -32,7 +32,6 @@
<h3 class="text-blue">{{this.kpi.name}}</h3>
</div>
</div>
-
<div class="row p-3">
<div class="col">
<div class="mb-3 me-3">
@@ -186,6 +185,12 @@ export default {
hidden : false,
clickable : false
},
+ Bukti: {
+ name : "Bukti",
+ data : "images",
+ hidden : false,
+ clickable : false
+ },
},
emp:{},
kpiId:-1,
@@ -194,14 +199,16 @@ export default {
kpi:{},
refresh:true,
showModal : false,
- responseAdj : {actual : 0}
+ responseAdj : {actual : 0},
+ responseId : -1,
}
},
created(){
- this.slug = this.$route.params.empId
+ if(this.isManager){
+ this.slug = this.$route.params.empId
+ }
this.kpiId = this.$route.params.kpiId
this.getEmpId()
-
},
methods: {
@@ -209,13 +216,22 @@ export default {
//routing page detail
if (this.isManager){
this.$router.push({ name: "ResponseDetail", params: { kpiId: this.kpiId, empId:this.slug, responseId:id }});
+ }else{
+ this.$router.push({ name: "ResponseEmployee", params: { kpiId: this.kpiId, responseId:id }});
}
},
getEmpId(){
- HTTP.get(`employees/${this.slug}`).then((res)=>{
- this.emp = res.data.data
- this.getKpiName()
- })
+ if (this.isManager){
+ HTTP.get(`employees/${this.slug}`).then((res)=>{
+ this.emp = res.data.data
+ this.getKpiName()
+ })
+ }else{
+ HTTP.get('users/profile').then((res)=>{
+ this.emp = res.data.data.profile
+ this.getKpiName()
+ })
+ }
},
getKpiName(){
HTTP.get(`kpis/${this.kpiId}`).then(res=>{
@@ -256,13 +272,12 @@ export default {
"status" : kpiRes.status,
"date" : kpiRes.date
}
- console.log(this.responseAdj)
+ this.responseId = id
document.getElementById("modalButton").click()
})
},
saveAdj(){
- console.log(this.responseAdj)
- HTTP.put(`kpi-responses/${this.responseAdj.kpi_id}`, this.responseAdj).then(()=>{
+ HTTP.put(`kpi-responses/${this.responseId}`, this.responseAdj).then(()=>{
this.refresh = !this.refresh
}).catch(()=> {alert("Gagal Mengubah Nilai")})
}