diff --git a/src/components/table.vue b/src/components/table.vue
index f418a5fbc1b7054ff271ddb3cd2dace80d803b16..7f79403a52ce752a11963907a76e90f20943a919 100644
--- a/src/components/table.vue
+++ b/src/components/table.vue
@@ -12,7 +12,7 @@
{{ c.name}}
</th>
</template>
- <th class="text-blue">Aksi</th>
+ <th v-if="this.edit || this.delete" class="text-blue">Aksi</th>
</tr>
</thead>
<tbody>
@@ -36,8 +36,8 @@
</template>
<td style="text-align: center">
- <button @click="this.$emit('edit-entry', e[columns.Id.data])" class="btn btn-blue"> <i class="icon ion-android-create" style="font-size: 20px"></i> Edit </button>
- <button @click="this.$emit('delete-entry', e[columns.Id.data])" class="btn-red"> <i class="icon ion-ios-trash-outline" style="font-size: 23px"></i> </button>
+ <button v-if="this.edit" @click="this.$emit('edit-entry', e[columns.Id.data])" class="btn btn-blue"> <i class="icon ion-android-create" style="font-size: 20px"></i> Edit </button>
+ <button v-if="this.delete" @click="this.$emit('delete-entry', e[columns.Id.data])" class="btn-red"> <i class="icon ion-ios-trash-outline" style="font-size: 23px"></i> </button>
</td>
</tr>
</tbody>
@@ -77,6 +77,14 @@ export default {
//map nama kolom ke data
columns: Object,
filter: String,
+ edit: {
+ type: Boolean,
+ default: true
+ },
+ delete: {
+ type: Boolean,
+ default: true
+ },
},
data() {
return {
diff --git a/src/router/index.js b/src/router/index.js
index 4476ea8855b3cef9cb43f6eda406d98539a4cc08..f2e0d919bee631af270494280f66221a1bc4452a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,6 +12,7 @@ import AdminInsert from "../views/AdminInsert.vue";
import AdminEdit from "../views/AdminEdit.vue";
import KpiIndex from "../views/KpiIndex.vue";
import KpiCreate from "../views/KpiCreate.vue";
+import KpiManagerDetail from "../views/KpiManagerDetail.vue";
const routes = [
{
@@ -79,6 +80,11 @@ const routes = [
name: "KpiCreate",
component: KpiCreate,
},
+ {
+ path: "/manager/kpi/:id",
+ name: "KpiManagerDetail",
+ component: KpiManagerDetail,
+ },
];
const router = createRouter({
diff --git a/src/views/KpiCreate.vue b/src/views/KpiCreate.vue
index 33ef8cd4dcb9f0e7233ede6d2906794ea6aa53b2..ac47228f117c032492398111a693d5d407b4fdbc 100644
--- a/src/views/KpiCreate.vue
+++ b/src/views/KpiCreate.vue
@@ -75,7 +75,7 @@
<input v-model="weight" type="number" id="weightInput" class="form-control" required>
</div>
<div class="mb-3">
- <input class="form-check-input mt-1" type="checkbox" value="" id="CheckDefault">
+ <input v-model="inverted" class="form-check-input mt-1" type="checkbox" value="" id="CheckDefault" >
<label class="form-check-label text-blue ms-2" for="CheckDefault">Target Inverted </label>
</div>
diff --git a/src/views/KpiManagerDetail.vue b/src/views/KpiManagerDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..db1f059e36b668e328a5265c1308daf2fc59ca82
--- /dev/null
+++ b/src/views/KpiManagerDetail.vue
@@ -0,0 +1,241 @@
+<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">
+ <router-link :to="{ path: '/admin' }" 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-3">
+ <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">
+ <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="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="period_type"
+ class="form-select"
+ aria-label="Default select example"
+ id="typeInput"
+ disabled>
+ <option value="Harian" selected>Harian</option>
+ <option value="Mingguan">Mingguan</option>
+ <option value="Bulanan">Bulanan</option>
+ <option value="Custom">Custom</option>
+ </select>
+ </div>
+ <div v-show="period_type == 'Custom'" class="mb-3 me-3">
+ <label for="deadlineInput" class="text-blue"> Waktu Deadline </label>
+ <input v-model="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="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="target_type"
+ class="form-select"
+ aria-label="Default select example"
+ id="typeInput" disabled>
+ <option value="Angka" selected>Angka</option>
+ <option value="Persentase">Persentase</option>
+ </select>
+ </div>
+ <div class="mb-3">
+ <label for="targetInput" class="text-blue"> Target </label>
+ <input v-model="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="weight" type="number" id="weightInput" class="form-control" readonly>
+ </div>
+ <div class="mb-3">
+ <input v-model="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>
+ </form>
+ <div class="row p-3">
+ <h3 class="text-blue">Assignee</h3>
+ <hr class="my-2 " style="border: 1px solid #6992b4">
+ <div class="col">
+ <button class="btn float-end" data-bs-toggle="modal" data-bs-target="#exampleModal">Tambah Karyawan</button>
+ </div>
+ </div>
+ <div class="row p-3">
+ <Table
+ :data="assignees"
+ :columns="columns"
+ :filter="filter"
+ :edit= false
+ ></Table>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <!-- Modal -->
+ <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-centered">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title text-blue" id="exampleModalLabel">Assign Karyawan</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn">Simpan</button>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+
+import Header from "../components/header"
+import Sidebar from "../components/sidebar"
+import Table from "../components/table"
+import { HTTP } from '../http-common'
+
+
+export default {
+ name: "KpiManagerDetail",
+ components: {
+ Header,
+ Sidebar,
+ Table
+ },
+ data() {
+ return{
+ emp_id: 1,
+ kpi_name: "Kebersihan",
+ description: "Lingkungan Salman Bersih",
+ target: 100,
+ inverted: false,
+ target_type: "Persentase",
+ weight: 20,
+ period_type: "Harian",
+ deadline: "",
+ deadline_time: "23:00",
+ filter: "",
+ columns: {
+ Id : {
+ name : "Id",
+ data : "id",
+ hidden : true,
+ clickable : false
+ },
+ Nama : {
+ name : "Nama",
+ data : "name",
+ hidden : false,
+ clickable : false
+ },
+ },
+ assignees: [
+ {
+ id : 1,
+ name : "Asep"
+ }
+ ]
+ }
+ },
+ methods: {
+ insert(e){
+ e.preventDefault();
+ let data = {
+ username: this.username,
+ email: this.email,
+ password: this.password,
+ password_confirmation: this.password}
+ HTTP.post("register", data, {
+ headers:{
+ 'Content-Type': 'application/json'
+ }
+ }).then((res)=>{
+ if (res.status == 200){
+ alert("Admin berhasil ditambahkan")
+ document.getElementById("formAdmin").reset();
+ }
+ }).catch(()=>{
+ alert("Gagal menambahkan Admin")
+ })
+
+ }
+
+ },
+ mounted(){
+ }
+
+}
+</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