From 62ea8edb431bedbdd90cd2df752cd3d83c2dde62 Mon Sep 17 00:00:00 2001
From: Saladin21 <13519187@std.stei.itb.ac.id>
Date: Sat, 16 Apr 2022 20:32:13 +0700
Subject: [PATCH] adjust modal
---
src/components/table-response.vue | 5 ++-
src/views/KpiCreate.vue | 4 +-
src/views/KpiDetail.vue | 2 +-
src/views/ResponseDetail.vue | 5 ++-
src/views/ResponseIndex.vue | 74 ++++++++++++++++++++++++++++---
5 files changed, 78 insertions(+), 12 deletions(-)
diff --git a/src/components/table-response.vue b/src/components/table-response.vue
index f7157d6..181bd29 100644
--- a/src/components/table-response.vue
+++ b/src/components/table-response.vue
@@ -12,7 +12,7 @@
{{ c.name}}
</th>
</template>
- <th class="text-blue">Aksi</th>
+ <th v-if="isManager" class="text-blue">Aksi</th>
</tr>
</thead>
<tbody>
@@ -35,7 +35,7 @@
</template>
</template>
- <td v-if="e.status == 'pending'" style="text-align: center">
+ <td v-if="e.status == 'pending' && isManager" style="text-align: center">
<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>
@@ -100,6 +100,7 @@ export default {
type: Boolean,
default: true
},
+ isManager: Boolean,
},
data() {
return {
diff --git a/src/views/KpiCreate.vue b/src/views/KpiCreate.vue
index ccc33f2..18201ff 100644
--- a/src/views/KpiCreate.vue
+++ b/src/views/KpiCreate.vue
@@ -68,11 +68,11 @@
</div>
<div class="mb-3">
<label for="targetInput" class="text-blue"> Target </label>
- <input v-model="target" type="number" id="tarrgetInput" class="form-control" required>
+ <input v-model="target" type="number" min="0" id="tarrgetInput" class="form-control" required>
</div>
<div class="mb-3">
<label for="weightInput" class="text-blue"> Bobot </label>
- <input v-model="weight" type="number" id="weightInput" class="form-control" required>
+ <input v-model="weight" type="number" min="0" id="weightInput" class="form-control" required>
</div>
<div class="mb-3">
<input v-model="inverted" class="form-check-input mt-1" type="checkbox" value="" id="CheckDefault" >
diff --git a/src/views/KpiDetail.vue b/src/views/KpiDetail.vue
index 0b8a863..1286c06 100644
--- a/src/views/KpiDetail.vue
+++ b/src/views/KpiDetail.vue
@@ -88,7 +88,7 @@
<form @submit="insert" autocomplete="off">
<div class="mb-3 me-3">
<label class="text-blue"> Nilai Aktual </label>
- <input v-model="response.actual" type="number" class="form-control" required>
+ <input v-model="response.actual" type="number" min="0" class="form-control" required>
</div>
<div class="mb-3 me-3">
<label class="text-blue"> Deskripsi </label>
diff --git a/src/views/ResponseDetail.vue b/src/views/ResponseDetail.vue
index 588a496..1940324 100644
--- a/src/views/ResponseDetail.vue
+++ b/src/views/ResponseDetail.vue
@@ -62,6 +62,8 @@
import Header from "../components/header"
import Sidebar from "../components/sidebar"
import CommentCard from "../components/commentCard"
+// import VueFinalModal from 'vue-final-modal'
+
export default {
@@ -69,7 +71,8 @@ export default {
components: {
Header,
Sidebar,
- CommentCard
+ CommentCard,
+ // VueFinalModal
},
data(){
return{
diff --git a/src/views/ResponseIndex.vue b/src/views/ResponseIndex.vue
index 83eabdd..058a5f5 100644
--- a/src/views/ResponseIndex.vue
+++ b/src/views/ResponseIndex.vue
@@ -4,7 +4,16 @@
<Sidebar current_page = "About"></Sidebar>
<div class="col ps-md-2 pt-2">
<Header></Header>
- <div class="row p-3">
+ <div v-if="isManager" class="row p-3">
+ <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>
+ </div>
+ </router-link>
+ </div>
+ <div v-else class="row p-3">
+ <!-- Ganti Path -->
<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>
@@ -32,7 +41,7 @@
</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>
+ <textarea v-model="kpi.description" id="deskripsiInput" class="form-control" readonly></textarea>
</div>
<div class="mb-3 me-3">
<label for="typeInput" class="text-blue"> Periode </label>
@@ -84,6 +93,26 @@
</div>
</div>
+ <!-- Button trigger modal -->
+ <button v-if="isManager" hidden="hidden" type="button" class="btn" data-bs-toggle="modal" data-bs-target="#adjustModal" id="modalButton">
+ Launch modal
+ </button>
+ <div v-if="isManager" 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="responseAdj.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>
<div class="row p-2">
<div class="col">
<h3 class="text-blue">Responses</h3>
@@ -97,6 +126,7 @@
:filter_column="'status'"
:default_sort = "'status'"
:refresh = "refresh"
+ :isManager="isManager"
@detail-entry="detailResponse"
@approve="approve"
@reject="reject"
@@ -114,6 +144,7 @@ import TableR from "../components/table-response";
import Header from "../components/header";
import Sidebar from "../components/sidebar";
import { HTTP } from "../http-common";
+// import {VueFinalModal} from 'vue-final-modal';
export default {
@@ -121,7 +152,8 @@ export default {
components: {
Header,
Sidebar,
- TableR
+ TableR,
+ // VueFinalModal
},
props:{
isManager : Boolean
@@ -161,17 +193,23 @@ export default {
endpoint:"",
kpi:{},
refresh:true,
+ showModal : false,
+ responseAdj : {actual : 0}
}
},
created(){
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.slug, responseId:id }});
+ if (this.isManager){
+ this.$router.push({ name: "ResponseDetail", params: { kpiId: this.kpiId, empId:this.slug, responseId:id }});
+ }
},
getEmpId(){
HTTP.get(`employees/${this.slug}`).then((res)=>{
@@ -198,7 +236,7 @@ export default {
}
HTTP.put(`kpi-responses/${id}`, response).then(()=>{
this.refresh = !this.refresh
- }).catch((e)=> {console.log(e.response.data)})
+ }).catch(()=> {alert("Gagal Mengubah Status")})
})
},
approve(id){
@@ -208,7 +246,25 @@ export default {
this.changeStatus(id, "rejected")
},
adjust(id){
- console.log(id)
+ HTTP.get(`kpi-responses/${id}`).then((res)=>{
+ let kpiRes = res.data.data
+ kpiRes.status = "approved"
+ this.responseAdj = {
+ "kpi_id": kpiRes.kpi_id,
+ "actual" : kpiRes.actual,
+ "description" : kpiRes.description,
+ "status" : kpiRes.status,
+ "date" : kpiRes.date
+ }
+ console.log(this.responseAdj)
+ document.getElementById("modalButton").click()
+ })
+ },
+ saveAdj(){
+ console.log(this.responseAdj)
+ HTTP.put(`kpi-responses/${this.responseAdj.kpi_id}`, this.responseAdj).then(()=>{
+ this.refresh = !this.refresh
+ }).catch(()=> {alert("Gagal Mengubah Nilai")})
}
}
@@ -234,5 +290,11 @@ body {
padding: 7px;
}
+.btn-red {
+ background-color: #f4476b;
+ color: #f1f7fc;
+ border-radius: 15px;
+ padding: 7px;
+}
</style>
\ No newline at end of file
--
GitLab