From b11e6dd72dfd126f076fb7aa1924b7937fc5617f Mon Sep 17 00:00:00 2001
From: Aulia Adila <13519100@std.stei.itb.ac.id>
Date: Wed, 30 Mar 2022 07:46:38 +0700
Subject: [PATCH] add dummy pop up on edit dept
---
src/components/Modal.vue | 1 +
src/views/DepartemenIndex.vue | 44 +++++++++++++++++++++++++----------
2 files changed, 33 insertions(+), 12 deletions(-)
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 2803083..94ed2b0 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,6 +1,7 @@
<script>
export default {
name: 'Modal',
+ props:{ type: String },
methods: {
close() {
this.$emit('close');
diff --git a/src/views/DepartemenIndex.vue b/src/views/DepartemenIndex.vue
index a5afe41..38d775e 100644
--- a/src/views/DepartemenIndex.vue
+++ b/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);
--
GitLab