diff --git a/src/components/kpiCard.vue b/src/components/kpiCard.vue
index e63b0f6bd4e0df534b8787f706b1d02d38997f1b..6a036c3f38363224961959407082bb5586d4c3ca 100644
--- a/src/components/kpiCard.vue
+++ b/src/components/kpiCard.vue
@@ -1,5 +1,5 @@
<template>
- <div class="card mx-3 my-1 bground-light">
+ <div class="card mx-3 my-1 bground-light clickable" @click="detail">
<div class="card-body">
<h5 class="card-title">{{kpi.name}}</h5>
<p class="card-subtitle text-blue">{{kpi.description}}</p>
@@ -27,7 +27,9 @@ export default {
};
},
methods: {
-
+ detail(){
+ this.$router.push({ name: "KpiManagerDetail", params: { id: this.kpi.id }});
+ }
},
};
</script>
diff --git a/src/components/table-2.vue b/src/components/table-2.vue
index 62ba655b3ee4ce1655da9a896d7e725cc69b6f7d..9bd4807087858d092e1ecb30ad8412f54fb2b3ae 100644
--- a/src/components/table-2.vue
+++ b/src/components/table-2.vue
@@ -43,7 +43,7 @@
</tbody>
</table>
<nav aria-label="Page navigation">
- <ul class="pagination justify-content-end">
+ <ul class="pagination justify-content-end clickable">
<li v-if="this.page > 1" class="page-item">
<div class="page-link" @click="prevPage()">Previous</div>
</li>
diff --git a/src/components/table-response.vue b/src/components/table-response.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e0431ff6f8c6fa53dacbffd7a419f41a8f45813c
--- /dev/null
+++ b/src/components/table-response.vue
@@ -0,0 +1,220 @@
+<template>
+ <div class="table-responsive">
+ <table class="table table-bordered">
+ <thead>
+ <tr>
+ <template v-for="c in columns" :key="c">
+ <th
+ v-if="!c.hidden"
+ @click="sort(c.data)"
+ class="text-blue clickable"
+ >
+ {{ c.name}}
+ </th>
+ </template>
+ <th class="text-blue">Aksi</th>
+ </tr>
+ </thead>
+ <tbody>
+
+ <tr
+ v-for="e in this.entries.slice(
+ (this.page - 1) * this.entry_per_page,
+ this.page * this.entry_per_page
+ )"
+ :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">
+ {{ e[c.data] }}
+ </td>
+ <td v-else >
+ {{ e[c.data]}}
+ </td>
+ </template>
+ </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>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <nav aria-label="Page navigation">
+ <ul class="pagination justify-content-end clickable">
+ <li v-if="this.page > 1" class="page-item">
+ <div class="page-link" @click="prevPage()">Previous</div>
+ </li>
+ <li v-else class="page-item disabled">
+ <div class="page-link">Previous</div>
+ </li>
+ <template v-for="p in this.pagination" :key="p">
+ <li v-if="this.page == p" class="page-item disabled">
+ <div class="page-link">{{ p }}</div>
+ </li>
+ <li v-else class="page-item">
+ <div class="page-link" @click="goPage(p)">{{ p }}</div>
+ </li>
+ </template>
+ <li v-if="this.page < this.page_num" class="page-item">
+ <div class="page-link" @click="nextPage()">Next</div>
+ </li>
+ <li v-else class="page-item disabled">
+ <div class="page-link">Next</div>
+ </li>
+ </ul>
+ </nav>
+ </div>
+</template>
+
+<script>
+
+import { HTTP } from '../http-common'
+// import axios from 'axios';
+
+export default {
+ name: "TableR",
+ props: {
+ //map nama kolom ke data
+ columns: Object,
+ endpoint: String,
+ filter: String,
+ filter_column: String,
+ default_sort: {
+ type: String,
+ default: ""
+ },
+ edit: {
+ type: Boolean,
+ default: true
+ },
+ delete: {
+ type: Boolean,
+ default: true
+ },
+ key: Number,
+ },
+ data() {
+ return {
+ pagination: [],
+ sorted: {
+ column: '',
+ asc: true,
+ },
+ entries: [],
+ entry_per_page: 10,
+ page: 1,
+ page_num: 0,
+ };
+ },
+ mounted() {
+ if (this.default_sort != ""){
+ this.sorted.column = this.default_sort
+ }else{
+ this.sorted.column = this.columns.Id.data
+ }
+ if (this.endpoint != ""){
+ this.getData()
+ }
+
+ },
+ watch: {
+ filter() {
+ this.page = 1
+ this.getData()
+ },
+ endpoint(){
+ this.getData()
+ }
+ },
+ methods: {
+ getData(){
+ let sortCol = this.sorted.column
+ if (!this.sorted.asc){
+ sortCol = `-${sortCol}`
+ }
+ 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)
+ this.entries = res.data.data.data
+ this.page = res.data.data.current_page
+ this.entry_per_page = res.data.data.per_page
+ this.page_num = res.data.data.last_page
+ this.updatePagination();
+ }
+ })
+ },
+ sort(column) {
+ console.log("sort "+ column)
+ if (column === this.sorted.column) {
+ this.sorted.asc = !this.sorted.asc;
+ } else {
+ this.sorted.column = column;
+ this.sorted.asc = true
+ }
+ this.page = 1
+ this.getData()
+ },
+ nextPage() {
+ if (this.page < this.page_num) {
+ this.page += 1;
+ this.getData()
+ }
+ },
+ prevPage() {
+ if (this.page > 1) {
+ this.page -= 1;
+ this.getData()
+ }
+ },
+ goPage(i) {
+ this.page = i;
+ this.getData()
+ },
+ updatePagination() {
+ this.pagination = [];
+ for (let i = this.page - 2; i <= this.page + 2; i++) {
+ if (i <= this.page_num && i > 0) {
+ this.pagination.push(i);
+ }
+ }
+ },
+ },
+};
+</script>
+
+<style scoped>
+li {
+ padding: 0;
+}
+
+.table-bordered td,
+.table-bordered th,
+.table-bordered thead {
+ border: 1px solid #6992b4 !important;
+}
+
+.btn-blue {
+ background-color: #6992b4;
+ color: #f1f7fc;
+ border-radius: 15px;
+ padding: 5px;
+ margin-right: 5px;
+ vertical-align:middle
+}
+
+.btn-red {
+ background-color: #f4476b;
+ color: #f1f7fc;
+ border-radius: 8px;
+ padding-left: 5px;
+ padding-right: 5px;
+ vertical-align:middle
+}
+
+th{
+ text-align: center;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 95314beaecbf50a05d9b1960038a58cbb85c5051..c6918968b32be11e48b2566825e5311639c638f5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -81,6 +81,11 @@ const routes = [
name: "kpiIndex",
component: KpiIndex,
},
+ {
+ path: "/kpi/:id",
+ name: "KpiDetail",
+ component: KpiIndex,
+ },
{
path: "/manager/kpi/create",
name: "KpiCreate",
diff --git a/src/views/KpiIndex.vue b/src/views/KpiIndex.vue
index 2449e5b8a06e11180b3bfc1b7209d274ee6c608a..cfb15412989a64cb88be37dd2df4fcaa485a776e 100644
--- a/src/views/KpiIndex.vue
+++ b/src/views/KpiIndex.vue
@@ -10,18 +10,45 @@
v-model="filter"
class="form-select"
aria-label="Default select example"
- @change="getKpi">
- <option value="Harian" selected>Harian</option>
- <option value="Mingguan">Mingguan</option>
- <option value="Bulanan">Bulanan</option>
- <option value="Custom">Custom</option>
+ @change="changeFilter">
+ <option value="daily" selected>Harian</option>
+ <option value="weekly">Mingguan</option>
+ <option value="monthly">Bulanan</option>
+ <option value="custom">Custom</option>
</select>
</div>
<template v-for="kpi in kpis" :key="kpi">
<KpiCard :kpi="kpi"></KpiCard>
</template>
+ <div v-if="this.page_num>1" class="row p-3">
+ <nav aria-label="Page navigation">
+ <ul class="pagination justify-content-end">
+ <li v-if="this.page > 1" class="page-item">
+ <div class="page-link p-2" @click="prevPage()">Previous</div>
+ </li>
+ <li v-else class="page-item disabled">
+ <div class="page-link p-2">Previous</div>
+ </li>
+ <template v-for="p in this.pagination" :key="p">
+ <li v-if="this.page == p" class="page-item disabled">
+ <div class="page-link p-2">{{ p }}</div>
+ </li>
+ <li v-else class="page-item">
+ <div class="page-link p-2" @click="goPage(p)">{{ p }}</div>
+ </li>
+ </template>
+ <li v-if="this.page < this.page_num" class="page-item">
+ <div class="page-link p-2" @click="nextPage()">Next</div>
+ </li>
+ <li v-else class="page-item disabled">
+ <div class="page-link p-2">Next</div>
+ </li>
+ </ul>
+ </nav>
+ </div>
</div>
</div>
+
</div>
</template>
@@ -30,6 +57,7 @@
import Header from "../components/header"
import Sidebar from "../components/sidebar"
import KpiCard from "../components/kpiCard"
+import { HTTP } from '../http-common'
export default {
@@ -52,19 +80,52 @@ export default {
deadline: null,
deadline_time: "23:00",
},
- filter:"Harian",
+ filter:"daily",
kpis: [],
-
+ page : 1,
+ page_num : 0,
+ entry_per_page: 10,
+ pagination: [],
}
},
methods: {
getKpi(){
- this.kpis = []
- this.kpis.push(this.temp_kpi)
- this.kpis.push(this.temp_kpi)
- this.kpis.push(this.temp_kpi)
- this.kpis.push(this.temp_kpi)
+ HTTP.get(`kpis/assigned?page=${this.page}&filter[period_type]=${this.filter}`).then((res)=>{
+ this.kpis = res.data.data.data
+ this.page = res.data.data.current_page
+ this.entry_per_page = res.data.data.per_page
+ this.page_num = res.data.data.last_page
+ this.updatePagination();
+ })
+ },
+ changeFilter(){
+ this.page = 1
+ this.getKpi()
+ },
+ nextPage() {
+ if (this.page < this.page_num) {
+ this.page += 1;
+ this.getKpi()
}
+ },
+ prevPage() {
+ if (this.page > 1) {
+ this.page -= 1;
+ this.getKpi()
+ }
+ },
+ goPage(i) {
+ this.page = i;
+ this.getKpi()
+ },
+ updatePagination() {
+ this.pagination = [];
+ for (let i = this.page - 2; i <= this.page + 2; i++) {
+ if (i <= this.page_num && i > 0) {
+ this.pagination.push(i);
+ }
+ }
+ },
},
mounted(){
this.getKpi()
@@ -84,5 +145,9 @@ body {
background-color: #fff;
}
+li {
+ padding: 0;
+}
+
</style>
\ No newline at end of file
diff --git a/src/views/ManagerKaryawanIndex.vue b/src/views/ManagerKaryawanIndex.vue
index 87b4512f71a6f1510e2eeeae1627c8bf847be711..2902c65b3478b0b15cbe073f65611f84e05f6357 100644
--- a/src/views/ManagerKaryawanIndex.vue
+++ b/src/views/ManagerKaryawanIndex.vue
@@ -47,7 +47,7 @@ export default {
columns: {
Id: {
name : "Id",
- data : "id",
+ data : "slug",
hidden : true,
clickable : false
},
diff --git a/src/views/ResponseIndex.vue b/src/views/ResponseIndex.vue
index 4dfd58dded7d6c3df5a6d76f3cd6215715bd8115..83a19542bb76cb1e5a1a42badeeffbed19773f8c 100644
--- a/src/views/ResponseIndex.vue
+++ b/src/views/ResponseIndex.vue
@@ -90,7 +90,7 @@
</div>
</div>
<div class="row p-2">
- <Table2
+ <TableR
:endpoint="endpoint"
:columns="columns"
:filter="filter"
@@ -99,7 +99,7 @@
:delete = "false"
:default_sort = "'status'"
@detail-entry="detailResponse"
- ></Table2>
+ ></TableR>
</div>
</div>
</div>
@@ -108,7 +108,7 @@
<script>
-import Table2 from "../components/table-2";
+import TableR from "../components/table-response";
import Header from "../components/header";
import Sidebar from "../components/sidebar";
import { HTTP } from "../http-common";
@@ -119,7 +119,7 @@ export default {
components: {
Header,
Sidebar,
- Table2
+ TableR
},
data(){
return{