diff --git a/src/components/kpiCard.vue b/src/components/kpiCard.vue
index 6a036c3f38363224961959407082bb5586d4c3ca..dc5d2d36b5feb61e69aa5907fc49351b42e8d47e 100644
--- a/src/components/kpiCard.vue
+++ b/src/components/kpiCard.vue
@@ -28,7 +28,7 @@ export default {
},
methods: {
detail(){
- this.$router.push({ name: "KpiManagerDetail", params: { id: this.kpi.id }});
+ this.$router.push({ name: "KpiDetail", params: { id: this.kpi.id }});
}
},
};
diff --git a/src/router/index.js b/src/router/index.js
index c6918968b32be11e48b2566825e5311639c638f5..98a19334aa96ff4db3116bb95cf5cb3467904344 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@ import KaryawanEdit from "../views/KaryawanEdit.vue";
import AdminInsert from "../views/AdminInsert.vue";
import AdminEdit from "../views/AdminEdit.vue";
import KpiIndex from "../views/KpiIndex.vue";
+import KpiDetail from "../views/KpiDetail.vue";
import KpiCreate from "../views/KpiCreate.vue";
import KpiManagerDetail from "../views/KpiManagerDetail.vue";
import Test from "../views/Test.vue";
@@ -84,7 +85,13 @@ const routes = [
{
path: "/kpi/:id",
name: "KpiDetail",
- component: KpiIndex,
+ component: KpiDetail,
+ },
+ {
+ path: "/kpi/:kpiId/responses",
+ name: "KpiResponses",
+ component: ResponseIndex,
+ props: { isManager: false }
},
{
path: "/manager/kpi/create",
@@ -114,7 +121,8 @@ const routes = [
{
path: "/manager/kpi/:kpiId/employees/:empId/responses",
name: "ResponseIndex",
- component: ResponseIndex
+ component: ResponseIndex,
+ props: { isManager: true }
},
{
path: "/manager/kpi/:kpiId/employees/:empId/responses/:responseId",
diff --git a/src/views/KpiCreate.vue b/src/views/KpiCreate.vue
index 5f251192772e5190a9ecf8b04ee95a75453a97bd..ccc33f29e874a0a604b891fc809378ccb6226422 100644
--- a/src/views/KpiCreate.vue
+++ b/src/views/KpiCreate.vue
@@ -25,7 +25,7 @@
</div>
<div class="mb-3 me-3">
<label for="deskripsiInput" class="text-blue"> Deskripsi </label>
- <input v-model="description" type="text" id="deskripsiInput" class="form-control" required>
+ <textarea v-model="description" id="deskripsiInput" class="form-control" required></textarea>
</div>
<div class="mb-3 me-3">
<label for="typeInput" class="text-blue"> Periode </label>
diff --git a/src/views/KpiDetail.vue b/src/views/KpiDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0b8a8635c773543b8c6f69fd3d5718241580fc15
--- /dev/null
+++ b/src/views/KpiDetail.vue
@@ -0,0 +1,225 @@
+<template>
+ <div class="container-fluid">
+ <div class="row flex-nowrap">
+ <Sidebar></Sidebar>
+ <div class="col ps-md-2 pt-2">
+ <Header></Header>
+ <div class="row p-3">
+ <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>
+ <router-link :to="{ path: '/kpi' }" style="text-decoration: none">
+ <p class="text-blue ms-1">kembali</p>
+ </router-link>
+ </div>
+ </div>
+ <div class="row p-3">
+ <div class="col">
+ <h1 class="text-blue">{{this.kpi.name}}</h1>
+ </div>
+ <hr class="my-2 " style="border: 1px solid #6992b4">
+ </div>
+ <form autocomplete="off" id="formAdmin">
+ <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>
+ <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>
+ <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>
+ <router-link :to="{ path: '/user/insert' }" style="text-decoration: none">
+ <button class="btn float-end">Responses</button>
+ </router-link>
+ </div>
+ </form>
+ <div class="row p-3">
+ <h1 class="text-blue">Buat Response</h1>
+ <hr class="my-2">
+ <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>
+ </div>
+ <div class="mb-3 me-3">
+ <label class="text-blue"> Deskripsi </label>
+ <textarea v-model="response.description" class="form-control" required></textarea>
+ </div>
+ <div class="mb-3 me-3">
+ <label class="text-blue"> Bukti </label>
+ <input type="file" accept="image/*" class="form-control" @change="onUpload" required>
+ </div>
+ <button type="submit" class="btn p-1" >Simpan</button>
+ </form>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+
+import Header from "../components/header"
+import Sidebar from "../components/sidebar"
+import { HTTP } from '../http-common'
+import 'vue-select/dist/vue-select.css'
+
+
+export default {
+ name: "KpiDetail",
+ components: {
+ Header,
+ Sidebar,
+ },
+ data() {
+ return{
+ kpi : {},
+ kpi_id: "",
+ response : {
+ kpi_id : -1,
+ actual : 0,
+ description : "",
+ status : "pending",
+ date : "",
+ images:[]
+ },
+ }
+ },
+ methods: {
+ getKpi(){
+ //get kpi dengan id kpi_id
+ 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"))
+ },
+ insert(e){
+ e.preventDefault();
+
+ let formData = new FormData();
+ formData.append("kpi_id", this.response.kpi_id);
+ formData.append("actual", this.response.actual);
+ formData.append("description", this.response.description);
+ formData.append("status", this.response.status);
+ formData.append("date", this.response.date);
+ formData.append("images[0]", this.response.images[0]);
+ HTTP.post("kpi-responses", formData).then(()=>{
+ alert("Berhasil Membuat Response")
+ }).catch((e)=>{
+ console.log(e.response.data)
+ alert("Gagal Membuat Response")
+ })
+ },
+ onUpload(e){
+ const file = e.target.files[0]
+ this.response.images = []
+ this.response.images.push(file)
+ // this.item.imageUrl = URL.createObjectURL(file)
+ }
+
+
+ },
+ mounted(){
+ this.kpi_id = this.$route.params.id
+ this.response.kpi_id = this.kpi_id
+ let today = new Date;
+ this.response.date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate()
+ this.getKpi()
+ }
+
+}
+</script>
+
+<style scoped>
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ background-color: #fff;
+}
+
+#back{
+ cursor: pointer;
+}
+
+.btn-blue {
+ background-color: #6992b4;
+ color: #f1f7fc;
+ border-radius: 8px;
+ margin-right: 5px;
+}
+
+.btn {
+ background-color: #6992b4;
+ color: #f1f7fc;
+ border-radius: 15px;
+ padding: 7px;
+ width: fit-content;
+}
+
+.btn-red {
+ background-color: #f4476b;
+ color: #f1f7fc;
+ border-radius: 8px;
+}
+
+.modal{
+ margin: auto
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/KpiManagerDetail.vue b/src/views/KpiManagerDetail.vue
index 06d1e2b1bbdbca291fd6d1c2db79930558fe2974..6c197b0d3c3609c93d949fddb0de3d49ca0be929 100644
--- a/src/views/KpiManagerDetail.vue
+++ b/src/views/KpiManagerDetail.vue
@@ -25,7 +25,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>
diff --git a/src/views/ResponseIndex.vue b/src/views/ResponseIndex.vue
index 83a19542bb76cb1e5a1a42badeeffbed19773f8c..3b68d40a51d2e24853afccd8860923bb9c3d1fa8 100644
--- a/src/views/ResponseIndex.vue
+++ b/src/views/ResponseIndex.vue
@@ -121,6 +121,9 @@ export default {
Sidebar,
TableR
},
+ props:{
+ isManager : Boolean
+ },
data(){
return{
filter: "",
@@ -161,6 +164,7 @@ export default {
this.slug = this.$route.params.empId
this.kpiId = this.$route.params.kpiId
this.getEmpId()
+ console.log(this.isManager)
},
methods: {
detailResponse(id){