diff --git a/src/components/dropdown.vue b/src/components/dropdown.vue
index 814abf6eacb9711a1149c6f46f01ef50359d456f..aaee0dd5ebb12aa31855e070669ac9036636416f 100644
--- a/src/components/dropdown.vue
+++ b/src/components/dropdown.vue
@@ -3,7 +3,6 @@
<div id="start-button">
<button
href="#"
- class="ms-1"
style="border: none; background-color:transparent"
@click="toggleVisibility"
@@ -56,9 +55,9 @@ export default{
// this.bgColor = "white";
}
else if (this.type === "addUser"){
- this.top = 10.25;
- this.right = 3;
- this.left = -4.5;
+ this.top = 10.5;
+ this.right = 0.5;
+ this.left = 8;
}
}
},
@@ -80,7 +79,7 @@ export default{
<style scoped>
.fade-enter-active,
.fade-leave-active {
- transition: all 0.1s ease-in-out;
+ transition: all 0.2s ease-in-out;
}
.fade-enter-from,
diff --git a/src/components/modal.vue b/src/components/modal.vue
index 3dbd2ea0bf60e96b854bb68e9d4de13a55de33e3..1032414291668f62268411b7aceabdb1bb53ba0a 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -58,8 +58,8 @@
border: 1px solid #6992b4;
/* overflow-x: auto; */
overflow: hidden;
- width: 50%;
- height: 30%;
+ width: 35%;
+ height: 195px;
display: flex;
flex-direction: column;
top: 50%;
@@ -81,8 +81,9 @@
}
.modal-body {
- position: relative;
+ /* position: relative; */
padding: 18px 10px;
+ /* height: 20%; */
}
.btn-close {
diff --git a/src/views/UserIndex.vue b/src/views/UserIndex.vue
index dc493273e6b8000a62419f8727140788880b29ff..67a51d6cf94f860247ad6ac53c985ae0ff207e42 100644
--- a/src/views/UserIndex.vue
+++ b/src/views/UserIndex.vue
@@ -12,9 +12,20 @@
<h1 class="text-blue">Daftar Karyawan</h1>
</div>
<div class="col">
- <router-link :to="{ path: '/user/insert' }" style="text-decoration: none">
- <button class="btn float-end">Tambah Karyawan</button>
- </router-link>
+ <!-- <router-link :to="{ path: '/user/insert' }" style="text-decoration: none"> -->
+ <!-- <button @click="showModal()" class="btn float-end">Tambah Karyawan</button> -->
+ <!-- </router-link> -->
+ <Dropdown type="addUser" class="float-end">
+ <template v-slot:start-button-item>
+ <button class="btn float-end">Tambah Karyawan</button>
+ </template>
+ <template v-slot:item-1 >
+ <button class="btn-blue" @click="toAddIndividu">+ Individu</button>
+ </template>
+ <template v-slot:item-2 >
+ <button class="btn-blue" @click="showModal()">+ File CSV</button>
+ </template>
+ </Dropdown>
</div>
</div>
<div class="row p-2">
@@ -88,6 +99,45 @@
</div>
</div>
</div>
+ <Modal class="adduser-modal"
+ v-show="isModalVisible"
+ @close="closeModal"
+ >
+ <template v-slot:header>Upload File CSV</template>
+ <template v-slot:body>
+ <!-- upload csv -->
+ <!-- open modal, upload, post -->
+ <form id="upload-form" @submit="uploadCSV">
+ <div class="flex items-center p-2">
+
+ <p style="font-size: 12.5px">Masukkan CSV dengan nama kolom: </p>
+ <p style="font-size: 12.5px" class="mb-4"> <b>name, nik, email, department_id, position, nik_manager </b>(opsional)<b>, username, email,</b> dan <b>password</b></p>
+ <div class="row">
+ <div class="col">
+ <input type="file" @input="onInput" name="employees">
+ </div>
+ <div class="col">
+ <button
+ type="submit"
+ class="btn-blue-ori float-end"
+ >
+ Upload
+ </button>
+ </div>
+ <div class="col">
+ <button
+ type="button"
+ class="btn-red ms-3"
+ @click="closeModal"
+ >
+ Cancel
+ </button>
+ </div>
+ </div>
+ </div>
+ </form>
+ </template>
+ </Modal>
</div>
</template>
@@ -95,6 +145,8 @@
import Table2 from "../components/table-2";
import Header from "../components/header";
import Sidebar from "../components/sidebar";
+import Modal from "../components/modal";
+import Dropdown from "../components/dropdown";
import { HTTP } from "../http-common";
export default {
@@ -103,9 +155,13 @@ export default {
Table2,
Header,
Sidebar,
+ Modal,
+ Dropdown
},
data() {
return {
+ file: null,
+ isModalVisible: false,
users: [],
depts: [],
columns: {
@@ -163,6 +219,30 @@ export default {
};
},
methods: {
+ uploadCSV(e){
+ e.preventDefault();
+ let formData = new FormData();
+ console.log(this.file);
+ formData.append("employees",this.file);
+ console.log(formData);
+ HTTP.post("register-employee-csv", formData, {
+ headers:{
+ 'Content-Type': 'multipart/form-data'
+ }
+ }).then((res)=>{
+ if (res.status == 200){
+ alert("File berhasil diupload")
+ document.getElementById("upload-form").reset();
+ }
+ }).catch((e)=>{
+ console.log(e.response.data);
+ alert("Gagal meng-upload file");
+ })
+ //this.closeModal();
+ },
+ onInput(e){
+ this.file = e.target.files[0];
+ },
getDept(){
HTTP.get("departments?page=1").then((res)=>{
if (res.data.success == true){
@@ -212,6 +292,19 @@ export default {
},
editUser(id){
this.$router.push({ name: "KaryawanEdit", params: { id: id }});
+ },
+ showModal(){
+ this.isModalVisible = true;
+ },
+ closeModal(){
+ this.isModalVisible = false;
+ },
+ toAddIndividu(){
+ this.$router.push({ path: '/user/insert'});
+
+ },
+ toAddCSV(){
+ console.log("add csv");
}
},
mounted() {
@@ -252,4 +345,32 @@ export default {
.search-input:focus{
outline: none;
}
+.btn-red {
+background: #f4476b;
+border-radius: 16px;
+color: white;
+border: none;
+padding: 3% 18% 3% 18%;
+}
+.btn-blue-ori {
+background: #6992b4;
+border-radius: 16px;
+color: white;
+border: none;
+padding: 3% 18% 3% 18%;
+}
+.btn-blue {
+ background: white;
+ border-radius: 15px;
+ color: #6992b4;
+ border: solid;
+ border-color: #6992b4;
+ padding: 2% 13% 2% 10%;
+ transition-duration: 0.4s;
+ cursor: pointer;
+}
+.btn-blue:hover {
+ background: #6992b4; /* Green */
+ color: white;
+}
</style>