From e1ae3c41e66174ee601f76ffc825c9aa96b3b330 Mon Sep 17 00:00:00 2001
From: Saladin21 <13519187@std.stei.itb.ac.id>
Date: Sat, 2 Apr 2022 23:55:37 +0700
Subject: [PATCH] add static page index karyawan and detail
---
src/components/table-2.vue | 17 +++-
src/router/index.js | 12 +++
src/views/ManagerKaryawanDetail.vue | 151 ++++++++++++++++++++++++++++
src/views/ManagerKaryawanIndex.vue | 98 ++++++++++++++++++
src/views/ManagerKpiIndex.vue | 2 +
5 files changed, 276 insertions(+), 4 deletions(-)
create mode 100644 src/views/ManagerKaryawanDetail.vue
create mode 100644 src/views/ManagerKaryawanIndex.vue
diff --git a/src/components/table-2.vue b/src/components/table-2.vue
index 7f2524d..2742b76 100644
--- a/src/components/table-2.vue
+++ b/src/components/table-2.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>
@@ -35,9 +35,9 @@
</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 v-if="this.edit || this.delete" style="text-align: center">
+ <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>
@@ -82,6 +82,15 @@ export default {
endpoint: String,
filter: String,
filter_column: String,
+ edit: {
+ type: Boolean,
+ default: true
+ },
+ delete: {
+ type: Boolean,
+ default: true
+ },
+
},
data() {
diff --git a/src/router/index.js b/src/router/index.js
index 862b265..c2a0124 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,6 +13,8 @@ import AdminEdit from "../views/AdminEdit.vue";
import KpiIndex from "../views/KpiIndex.vue";
import Test from "../views/Test.vue";
import ManagerKpiIndex from "../views/ManagerKpiIndex.vue";
+import ManagerKaryawanIndex from "../views/ManagerKaryawanIndex.vue";
+import ManagerKaryawanDetail from "../views/ManagerKaryawanDetail.vue";
const routes = [
{
@@ -80,6 +82,16 @@ const routes = [
name: "ManagerkpiIndex",
component: ManagerKpiIndex,
},
+ {
+ path: "/manager/karyawan",
+ name: "ManagerkaryawanIndex",
+ component: ManagerKaryawanIndex,
+ },
+ {
+ path: "/manager/karyawan/:id",
+ name: "ManagerKaryawanDetail",
+ component: ManagerKaryawanDetail,
+ },
{
path: "/test",
name: "test",
diff --git a/src/views/ManagerKaryawanDetail.vue b/src/views/ManagerKaryawanDetail.vue
new file mode 100644
index 0000000..fe68c84
--- /dev/null
+++ b/src/views/ManagerKaryawanDetail.vue
@@ -0,0 +1,151 @@
+<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: '/manager/karyawan' }" 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">NAMA</h1>
+ </div>
+ </div>
+ <form @submit="report" autocomplete="off" id="formReport">
+ <div class="row p-2">
+
+ <div class="col p-2">
+ <label for="startReport" class="text-blue"> Tanggal awal </label>
+ <input v-model="startReport" type="date" id="startReport" class="form-control" required>
+ </div>
+ <div class="col p-2">
+ <label for="endReport" class="text-blue"> Tanggal akhir </label>
+ <input v-model="endReport" type="date" id="endReport" class="form-control" required>
+ </div>
+ <div class="col p-2">
+ <button type="submit" class="btn-blue p-1 mt-3" >Buat Report</button>
+ </div>
+ </div>
+ </form>
+ <hr class="m-2">
+ <div class="row p-2">
+ <h2 class="text-blue">Daftar KPI</h2>
+ </div>
+ <div class="row p-2">
+ <div class="col-6 p-2">
+ <select
+ v-model="filter"
+ class="form-select"
+ aria-label="Default select example"
+ >
+ <option selected value="">Semua</option>
+ <option v-for="p in periods" :key="p" :value="p.data">{{p.name}}</option>
+ </select>
+ </div>
+ </div>
+ <div class="row p-2">
+ <Table2
+ :endpoint="'kpis'"
+ :columns="columns"
+ :filter="filter"
+ :filter_column="'period_type'"
+ :edit = "false"
+ :delete = "false"
+ @detail-entry="detailKaryawan"
+ ></Table2>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+
+import Table2 from "../components/table-2";
+import Header from "../components/header";
+import Sidebar from "../components/sidebar";
+// import { HTTP } from "../http-common";
+
+
+export default {
+ name: "ManagerKaryawanDetail",
+ components: {
+ Header,
+ Sidebar,
+ Table2
+ },
+ data(){
+ return{
+ filter: "",
+ columns: {
+ Id: {
+ name : "Id",
+ data : "id",
+ hidden : true,
+ clickable : false
+ },
+ Nama: {
+ name : "Nama",
+ data : "name",
+ hidden : false,
+ clickable : true
+ },
+ Periode: {
+ name : "Periode",
+ data : "period_type",
+ hidden : false,
+ clickable : false
+ },
+ },
+ periods: [
+ {name: "Harian",
+ data: "daily"},
+ {name: "Mingguan",
+ data: "weekly"},
+ {name: "Bulanan",
+ data: "monthly"},
+ {name: "Tahunan",
+ data: "yearly"},
+ {name: "Custom",
+ data: "custom"},
+ ],
+ }
+ },
+ methods: {
+ detailKaryawan(id){
+ //routing page detail
+ console.log(id)
+ }
+ }
+
+}
+</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: 8px;
+ margin-right: 5px;
+}
+
+
+
+</style>
\ No newline at end of file
diff --git a/src/views/ManagerKaryawanIndex.vue b/src/views/ManagerKaryawanIndex.vue
new file mode 100644
index 0000000..fcc8ee0
--- /dev/null
+++ b/src/views/ManagerKaryawanIndex.vue
@@ -0,0 +1,98 @@
+<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-2">
+ <div class="col">
+ <h1 class="text-blue">Daftar Karyawan</h1>
+ </div>
+ </div>
+ <div class="row p-2">
+ <Table2
+ :endpoint="'kpis'"
+ :columns="columns"
+ :filter="filter"
+ :filter_column="'period_type'"
+ :edit = "false"
+ :delete = "false"
+ @detail-entry="detailKaryawan"
+ ></Table2>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+
+import Table2 from "../components/table-2";
+import Header from "../components/header";
+import Sidebar from "../components/sidebar";
+// import { HTTP } from "../http-common";
+
+
+export default {
+ name: "ManagerKaryawanIndex",
+ components: {
+ Header,
+ Sidebar,
+ Table2
+ },
+ data(){
+ return{
+ filter: "",
+ columns: {
+ Id: {
+ name : "Id",
+ data : "id",
+ hidden : true,
+ clickable : false
+ },
+ Nama: {
+ name : "Nama",
+ data : "name",
+ hidden : false,
+ clickable : true
+ },
+ Periode: {
+ name : "Periode",
+ data : "period_type",
+ hidden : false,
+ clickable : false
+ },
+ }
+ }
+ },
+ methods: {
+ detailKaryawan(id){
+ //routing page detail
+ console.log(id)
+ }
+ }
+
+}
+</script>
+
+<style scoped>
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ background-color: #fff;
+}
+
+.btn {
+ background-color: #6992b4;
+ color: #f1f7fc;
+ border-radius: 15px;
+ padding: 7px;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/views/ManagerKpiIndex.vue b/src/views/ManagerKpiIndex.vue
index 327e09d..5daa7a3 100644
--- a/src/views/ManagerKpiIndex.vue
+++ b/src/views/ManagerKpiIndex.vue
@@ -27,6 +27,7 @@
</select>
</div>
</div>
+ <div class="row p-2">
<Table2
:endpoint="'kpis'"
:columns="columns"
@@ -36,6 +37,7 @@
@delete-entry="deleteKpi"
@detail-entry="detailKpi"
></Table2>
+ </div>
</div>
</div>
</div>
--
GitLab