add dummy pop up on edit dept

src/components/Modal.vue

 <script>
   export default {
     name: 'Modal',
+    props:{ type: String },
     methods: {
       close() {
         this.$emit('close');

src/views/DepartemenIndex.vue

@@ -12,7 +12,7 @@
             <div class="col">
               <button
                 class="btn float-end"
-                @click="showModal()"
+                @click="showModal('addDept')"
               >
                 Tambah Departemen
               </button>
@@ -55,19 +55,28 @@
 			v-show="isModalVisible"
 			@close="closeModal"
 		>
+
+      <!-- <div v-if="type === 'addDept'"> -->
+      
 			<template v-slot:header>
-			Tambah Departemen
+        <template v-if="type === 'addDept'"> Tambah Departemen </template>
+        <template v-if="type === 'editDept'"> Edit Departemen </template>
+        
+			
 			</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 v-if="type === 'addDept'">
+          <form @submit="insert" autocomplete="off" id="formAddDept">
+            <label for="deptInput">Nama Departemen</label>
+            <input v-model="deptnameadd" type="text" id="deptname-input" class="form-control">
+            <button type="submit" class="btn-blue p-1" >Simpan</button>
+          </form> 
+        </template>
+        <template v-if="type === 'editDept'">
+          test edit 
+        </template>
 			</template>
 	</Modal>
   </div>
@@ -90,8 +99,9 @@ export default {
   },
   data() {
     return {
+      type:"",
       isModalVisible: false,
-			deptname:"",
+			deptnameadd:"",
       dept: [],
       temp_dept: [
         {
@@ -115,7 +125,15 @@ export default {
     };
   },
   methods: {
-    showModal(){
+    showModal(type){
+      switch(type){
+        case "addDept":
+          this.type = "addDept";
+          break
+        case "editDept":
+          this.type = "editDept";
+          break
+      }
 			this.isModalVisible = true;
 		},
 		closeModal(){
@@ -124,7 +142,7 @@ export default {
 		},
 		insert(e){
 			e.preventDefault();
-			let formValue = this.deptname
+			let formValue = this.deptnameadd
 			console.log(formValue)
 			alert("Dept berhasil ditambahkan")
 			document.getElementById("formAddDept").reset();
@@ -144,6 +162,8 @@ export default {
     },
     editDept(id) {
       console.log(id);
+      this.showModal("editDept");
+
     },
     // updateDept(event){
     //   console.log(event);