diff --git a/package-lock.json b/package-lock.json
index 5b210b03d8b571be4a6fb1439e459faa6da85468..0607ceb5ba6dd73e90ef38b932146c76f8a2fa18 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
"axios": "^0.25.0",
"bootstrap": "^5.1.3",
"core-js": "^3.6.5",
+ "jquery": "^3.6.0",
"vue": "^3.0.0",
"vue-router": "^4.0.12"
},
@@ -8500,6 +8501,11 @@
"integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
"dev": true
},
+ "node_modules/jquery": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+ "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+ },
"node_modules/js-message": {
"version": "1.0.7",
"resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
@@ -21955,6 +21961,11 @@
"integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
"dev": true
},
+ "jquery": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+ "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+ },
"js-message": {
"version": "1.0.7",
"resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
diff --git a/package.json b/package.json
index 19533c04b4d95b9df0dc545b57ba20e7b1b97701..e0e5151d372051ae0fa0ffed26276e4e02a87deb 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"axios": "^0.25.0",
"bootstrap": "^5.1.3",
"core-js": "^3.6.5",
+ "jquery": "^3.6.0",
"vue": "^3.0.0",
"vue-router": "^4.0.12"
},
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..70703491708437cadcfbb932456ba1963750f0ce
--- /dev/null
+++ b/src/components/Modal.vue
@@ -0,0 +1,34 @@
+<script>
+import DepartemenInsert from "../views/DepartemenInsert.vue"
+
+export default{
+ components: {
+ DepartemenInsert,
+ },
+ props:{},
+ emits: ["add-dept"],
+ setup (props, context) {
+
+ //Push emit data to DepartemenIndex as parent
+ var emitAddDept = (data) => {
+ context.emit("add-dept", data);
+ };
+
+ return {emitAddDept};
+ },
+};
+
+
+</script>
+
+<template>
+ <div class="modal">
+ <div class="modal-content">
+ <h1>Type</h1>
+ <div v-if="type === 'AddDept'">
+ <DepartemenInsert @add-dept="emitAddDept"/>
+ </div>
+ <button @click="$emit('close-modal')">Cancel</button>
+ </div>
+ </div>
+</template>
\ No newline at end of file
diff --git a/src/components/modal1.vue b/src/components/modal1.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c19bde0faa8c4a6780f49bc52b08957a7396a62
--- /dev/null
+++ b/src/components/modal1.vue
@@ -0,0 +1,25 @@
+<template>
+<!-- Modal -->
+ <div class="modal fade" id="modalAddDept" tabindex="-1" role="dialog" aria-labelledby="modalAddDept_" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-centered" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ <div class="form-group">
+ <input type="text" placeholder="Nama Departemen">
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
\ No newline at end of file
diff --git a/src/views/DepartemenIndex-2.vue b/src/views/DepartemenIndex-2.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2879619c9671124966c1273047479245811bb36e
--- /dev/null
+++ b/src/views/DepartemenIndex-2.vue
@@ -0,0 +1,198 @@
+<template>
+ <div class="container-fluid">
+ <div class="row flex-nowrap">
+ <Sidebar current_page="Departemen"></Sidebar>
+ <div class="col ps-md-2 pt-2">
+ <Header></Header>
+ <div class="row p-3">
+ <div class="row p-2">
+ <div class="col">
+ <h1 class="text-blue">Daftar Departemen</h1>
+ </div>
+ <div class="col">
+ <button
+ class="btn float-end"
+ @click="handleOpen('type-addDept')"
+ >
+ Tambah Departemen
+ </button>
+ </div>
+ </div>
+ <div class="row p-2">
+ <div class="search float-end col-3">
+ <div class="row">
+ <div class="col-10">
+ <input
+ class="search-input p-1"
+ v-model="filter"
+ type="text"
+ placeholder="Pencarian"
+ />
+ </div>
+ <div class="col">
+ <i
+ class="icon ion-ios-search text-blue float-end px-1"
+ style="font-size: 23px"
+ ></i>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row p-2">
+ <Table
+ :data="dept"
+ :columns="columns"
+ :filter="filter"
+ @delete-entry="deleteDept"
+ @edit-entry="editDept"
+ @detail-entry="detailDept"
+ ></Table>
+ </div>
+ </div>
+ </div>
+ <div v-if="modalOpen">
+ <Modal
+ @close-modal="handleClose()"
+ @add-dept="handleSubmit"
+ :type="modalName"
+ />
+ </div>
+ </div>
+</template>
+
+<script>
+import {ref} from "vue";
+import Table from "../components/table";
+import Header from "../components/header";
+import Sidebar from "../components/sidebar";
+import Modal from "../components/modal"
+
+export default {
+ name: "DepartemenIndex",
+ components: {
+ Table,
+ Header,
+ Sidebar,
+ Modal,
+ },
+ setup() {
+ //init
+ const modalOpen = ref(false);
+ const modalName = ref("");
+
+ const handleOpen = (type) => {
+ switch (type) {
+ case "type-addDept":
+ modalName = "AddDept";
+ break;
+ // case "type-editDept":
+ // modalName = "EditDept";
+ // break;
+ }
+ modalOpen = true;
+ }
+
+ const handleClose = () => {
+ modalOpen = false;
+ modalName = "";
+ };
+
+ const handleSubmit = (data) => {
+ //tambah data
+ console.log(data);
+ };
+
+ return { modalOpen, modalName, handleOpen, handleClose, handleSubmit};
+
+ },
+ data() {
+ return {
+ dept: [],
+ temp_dept: [
+ {
+ id: 1,
+ nama: "Keuangan",
+ },
+ {
+ id: 2,
+ nama: "Marketing",
+ },
+ {
+ id: 3,
+ nama: "Operasional",
+ },
+ ],
+ columns: {
+ No: "id",
+ Nama: "nama",
+ },
+ filter: "",
+ };
+ },
+ methods: {
+ getDept() {
+ // di sini ambil data admin dari database
+ this.dept = this.temp_dept;
+ },
+ detailDept(id) {
+ console.log(id);
+ },
+ deleteDept(id) {
+ console.log(id);
+ },
+ editDept(id) {
+ console.log(id);
+ },
+ updateDept(event){
+ console.log(event);
+ }
+ },
+ mounted() {
+ this.getDept();
+ },
+};
+</script>
+
+<style scoped>
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+.btn {
+ background-color: #6992b4;
+ color: #f1f7fc;
+ border-radius: 15px;
+ padding: 7px;
+}
+
+.icon {
+ padding-left: 2px;
+}
+
+.search {
+ border: 1px solid;
+ border-color: #6992b4;
+ border-radius: 5px;
+}
+.search-input {
+ border: none;
+ border-color: transparent;
+ width: 100%;
+}
+.search-input:focus {
+ outline: none;
+}
+.modal {
+ width: 600px;
+ max-width: 100%;
+ position: absolute;
+ float: left;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ margin: auto;
+}
+</style>
diff --git a/src/views/DepartemenIndex.vue b/src/views/DepartemenIndex.vue
index badfde9d63d6d9b4c9fb3e8ecaa8685fba196b51..e9f56cda5bee957a87a1c232e978dad0be4fa269 100644
--- a/src/views/DepartemenIndex.vue
+++ b/src/views/DepartemenIndex.vue
@@ -90,7 +90,7 @@
</form>
</div>
<div class="modal-footer p-2">
- <button type="button" class="btn btn-primary mx-auto">Tambah</button>
+ <button type="button" class="btn btn-primary mx-auto" @click="updateDept">Tambah</button>
</div>
</div>
</div>
@@ -147,6 +147,9 @@ export default {
editDept(id) {
console.log(id);
},
+ updateDept(event){
+ console.log(event);
+ }
},
mounted() {
this.getDept();
diff --git a/src/views/DepartemenInsert.vue b/src/views/DepartemenInsert.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ac2e3b39c8e9576fd64cd403dd2be8590e0aea4d
--- /dev/null
+++ b/src/views/DepartemenInsert.vue
@@ -0,0 +1,30 @@
+<script>
+import {ref} from "vue";
+
+export default{
+ emits:["add-dept"],
+ setup(_, context) {
+ // Bind form data
+ const namadept = ref(null);
+
+ //push emit data to modal as parent
+ const addDept = () => {
+ const data = {
+ namadept,
+ };
+ context.emit("add-dept", data);
+ //Reset form data
+ namadept = null;
+ },
+
+ return { namadept, addDept }
+ }
+};
+
+</script>
+
+<template>
+ <label for="add-departemen">Nama Departemen</label>
+ <input id="add-departemen" type="text" v-model="namadept" />
+ <button @click="addDept()">Tambah</button>
+</template>
\ No newline at end of file