add popup department

src/components/modals.html

+<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>

src/views/DepartemenIndex.vue

@@ -10,14 +10,20 @@
               <h1 class="text-blue">Daftar Departemen</h1>
             </div>
             <div class="col">
-              <button class="btn float-end">Tambah Departemen</button>
+              <button
+                class="btn float-end"
+                data-bs-toggle="modal"
+                data-bs-target="#exampleModal"
+              >
+                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
+                  <input
                     class="search-input p-1"
                     v-model="filter"
                     type="text"
@@ -47,6 +53,48 @@
       </div>
     </div>
   </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">Tambah</button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -137,4 +185,14 @@ export default {
 .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>