diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 70703491708437cadcfbb932456ba1963750f0ce..28030832ea2f94f62fcf99208d3dc60ebdafd7a0 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,34 +1,118 @@
<script>
-import DepartemenInsert from "../views/DepartemenInsert.vue"
+ export default {
+ name: 'Modal',
+ methods: {
+ close() {
+ this.$emit('close');
+ },
+ },
+ emits:['close'],
+ };
+</script>
-export default{
- components: {
- DepartemenInsert,
- },
- props:{},
- emits: ["add-dept"],
- setup (props, context) {
+<template>
+ <div class="modal-backdrop">
+ <div class="modal">
- //Push emit data to DepartemenIndex as parent
- var emitAddDept = (data) => {
- context.emit("add-dept", data);
- };
+ <header class="modal-header">
+ <slot name="header">
+ This is title
+ </slot>
+ <button type="button" class="btn-close" @click="close">
+ X
+ </button>
+ </header>
- return {emitAddDept};
- },
-};
+ <section class="modal-body">
+ <slot name="body">
+ This is body
+ </slot>
+ </section>
+ <!-- <footer class="modal-footer">
+ <slot name="footer">
+ This is footer
+ </slot>
+ <button type="button" class="btn-green" @click="close">
+ Close Modal
+ </button>
+ </footer> -->
+
+ </div>
+ </div>
+</template>
-</script>
+<style>
+ .modal-backdrop {
+ position: absolute;
+ top: 50%;
+ bottom: 0;
+ left: 50%;
+ right: 0;
+ transform: translate(-50%, -50%);
+ background-color: rgba(0, 0, 0, 0.3);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
-<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
+ .modal {
+ background: #FFFFFF;
+ box-shadow: 2px 2px 20px 1px;
+ /* overflow-x: auto; */
+ width: 50%;
+ height: 30%;
+ display: flex;
+ flex-direction: column;
+ top: 50%;
+ bottom: 0;
+ left: 50%;
+ right: 0;
+ transform: translate(-50%, -50%);
+ }
+
+ /* .modal-footer, */
+ .modal-header {
+ padding: 15px;
+ display: flex;
+ }
+
+
+ .modal-header {
+ position: relative;
+ border-bottom: 1px solid #eeeeee;
+ color: #4AAE9B;
+ justify-content: space-between;
+ }
+
+ /* .modal-footer {
+ border-top: 1px solid #eeeeee;
+ flex-direction: column;
+ justify-content: flex-end;
+ } */
+
+ .modal-body {
+ position: relative;
+ padding: 20px 10px;
+ }
+
+ .btn-close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ border: none;
+ font-size: 20px;
+ padding: 10px;
+ cursor: pointer;
+ font-weight: bold;
+ color: #4AAE9B;
+ background: transparent;
+ }
+
+ .btn-green {
+ color: white;
+ background: #4AAE9B;
+ border: 1px solid #4AAE9B;
+ border-radius: 2px;
+ }
+</style>
\ No newline at end of file
diff --git a/src/components/modal1.vue b/src/components/modal1.vue
deleted file mode 100644
index 1c19bde0faa8c4a6780f49bc52b08957a7396a62..0000000000000000000000000000000000000000
--- a/src/components/modal1.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<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/components/modals.html b/src/components/modals.html
deleted file mode 100644
index 00230d9eee488408fd9cee4270126505070bdf05..0000000000000000000000000000000000000000
--- a/src/components/modals.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<button
- type="button"
- class="btn btn-primary"
- data-bs-toggle="modal"
- data-bs-target="#exampleModal"
- data-bs-whatever="@mdo"
->
- Open modal for @mdo
-</button>
-<button
- type="button"
- class="btn btn-primary"
- data-bs-toggle="modal"
- data-bs-target="#exampleModal"
- data-bs-whatever="@fat"
->
- Open modal for @fat
-</button>
-<button
- type="button"
- class="btn btn-primary"
- data-bs-toggle="modal"
- data-bs-target="#exampleModal"
- data-bs-whatever="@getbootstrap"
->
- Open modal for @getbootstrap
-</button>
-
-<div
- class="modal fade"
- id="exampleModal"
- tabindex="-1"
- aria-labelledby="exampleModalLabel"
- aria-hidden="true"
->
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title" id="exampleModalLabel">New message</h5>
- <button
- type="button"
- class="btn-close"
- data-bs-dismiss="modal"
- aria-label="Close"
- ></button>
- </div>
- <div class="modal-body">
- <form>
- <div class="mb-3">
- <label for="recipient-name" class="col-form-label"
- >Recipient:</label
- >
- <input type="text" class="form-control" id="recipient-name" />
- </div>
- <div class="mb-3">
- <label for="message-text" class="col-form-label">Message:</label>
- <textarea class="form-control" id="message-text"></textarea>
- </div>
- </form>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
- Close
- </button>
- <button type="button" class="btn btn-primary">Send message</button>
- </div>
- </div>
- </div>
-</div>
-<script>
- var exampleModal = document.getElementById("exampleModal");
- exampleModal.addEventListener("show.bs.modal", function (event) {
- // Button that triggered the modal
- var button = event.relatedTarget;
- // Extract info from data-bs-* attributes
- var recipient = button.getAttribute("data-bs-whatever");
- // If necessary, you could initiate an AJAX request here
- // and then do the updating in a callback.
- //
- // Update the modal's content.
- var modalTitle = exampleModal.querySelector(".modal-title");
- var modalBodyInput = exampleModal.querySelector(".modal-body input");
-
- modalTitle.textContent = "New message to " + recipient;
- modalBodyInput.value = recipient;
- });
-</script>
diff --git a/src/views/DepartemenIndex-2.vue b/src/views/DepartemenIndex-2.vue
deleted file mode 100644
index 2879619c9671124966c1273047479245811bb36e..0000000000000000000000000000000000000000
--- a/src/views/DepartemenIndex-2.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<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 e9f56cda5bee957a87a1c232e978dad0be4fa269..a5afe4151a9f94e0569c5366119a04ea82bbb28f 100644
--- a/src/views/DepartemenIndex.vue
+++ b/src/views/DepartemenIndex.vue
@@ -12,8 +12,7 @@
<div class="col">
<button
class="btn float-end"
- data-bs-toggle="modal"
- data-bs-target="#exampleModal"
+ @click="showModal()"
>
Tambah Departemen
</button>
@@ -52,55 +51,34 @@
</div>
</div>
</div>
+ <Modal
+ v-show="isModalVisible"
+ @close="closeModal"
+ >
+ <template v-slot:header>
+ Tambah Departemen
+ </template>
+
+ <template v-slot:body>
+ <!-- fill with form -->
+
+ <form @submit="insert" autocomplete="off" id="formAddDept">
+ <label for="deptInput">Nama Departemen</label>
+ <input v-model="deptname" type="text" id="deptname-input" class="form-control">
+ <button type="submit" class="btn-blue p-1" >Simpan</button>
+ </form>
+
+ </template>
+ </Modal>
</div>
- <!-- Modal -->
- <div
- class="modal fade vertical-center"
- id="exampleModal"
- tabindex="-1"
- aria-labelledby="exampleModalLabel"
- aria-hidden="true"
- >
- <div class="modal-dialog modal-dialog-centered">
- <div class="modal-content m-2">
- <div class="modal-header me-3 p-2">
- <h5 class="modal-title m-1" id="exampleModalLabel">
- Tambah Departemen
- </h5>
- <button
- type="button"
- class="btn-close"
- data-bs-dismiss="modal"
- aria-label="Close"
- ></button>
- </div>
- <div class="modal-body p-2 m-2">
- <form>
- <div class="pb-3">
- <label for="recipient-name" class="col-form-label"
- >Nama Departemen</label
- >
- <input
- type="text"
- class="form-control text-muted"
- id="recipient-name"
- placeholder="Isi nama departemen"
- />
- </div>
- </form>
- </div>
- <div class="modal-footer p-2">
- <button type="button" class="btn btn-primary mx-auto" @click="updateDept">Tambah</button>
- </div>
- </div>
- </div>
- </div>
+
</template>
<script>
import Table from "../components/table";
import Header from "../components/header";
import Sidebar from "../components/sidebar";
+import Modal from "../components/modal";
export default {
name: "DepartemenIndex",
@@ -108,9 +86,12 @@ export default {
Table,
Header,
Sidebar,
+ Modal,
},
data() {
return {
+ isModalVisible: false,
+ deptname:"",
dept: [],
temp_dept: [
{
@@ -134,6 +115,23 @@ export default {
};
},
methods: {
+ showModal(){
+ this.isModalVisible = true;
+ },
+ closeModal(){
+ this.isModalVisible = false;
+ //console.log(this.isModalVisible)
+ },
+ insert(e){
+ e.preventDefault();
+ let formValue = this.deptname
+ console.log(formValue)
+ alert("Dept berhasil ditambahkan")
+ document.getElementById("formAddDept").reset();
+ },
+ // addDept(data){
+ // console.log(data);
+ // },
getDept() {
// di sini ambil data admin dari database
this.dept = this.temp_dept;
@@ -147,9 +145,9 @@ export default {
editDept(id) {
console.log(id);
},
- updateDept(event){
- console.log(event);
- }
+ // updateDept(event){
+ // console.log(event);
+ // }
},
mounted() {
this.getDept();
diff --git a/src/views/DepartemenInsert.vue b/src/views/DepartemenInsert.vue
deleted file mode 100644
index ac2e3b39c8e9576fd64cd403dd2be8590e0aea4d..0000000000000000000000000000000000000000
--- a/src/views/DepartemenInsert.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<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