In this post we will see how to create a CRUD app using Vue JS.
We will consume rest APIs using axios, display data in bootstrap table, add modal pop up window with dropdowns and date pickers.
Folder Structure of our Vue JS app:
index.html:
<!DOCTYPE html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <div id="app" class="container"> <h3 class="d-flex justify-content-center"> Vue JS Front End </h3> <h5 class="d-flex justify-content-center"> Employee Management Portal </h5> <nav class="navbar navbar-expand-sm bg-light navbar-dark"> <ul class="navbar-nav"> <li class="nav-item m-1"> <router-link class="btn btn-light btn-outline-primary" to="/home">Home</router-link> </li> <li class="nav-item m-1"> <router-link class="btn btn-light btn-outline-primary" to="/department">Department</router-link> </li> <li class="nav-item m-1"> <router-link class="btn btn-light btn-outline-primary" to="/employee">Employee</router-link> </li> </ul> </nav> <router-view></router-view> </div> <script src="variables.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script src="home.js"></script> <script src="department.js"> </script> <script src="employee.js"></script> <script src="app.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>
app.js:
const routes=[ {path:'/home',component:home}, {path:'/employee',component:employee}, {path:'/department',component:department} ] const router=new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app')
department.js:
const department={template:` <div> <button type="button" class="btn btn-primary m-2 fload-end" data-bs-toggle="modal" data-bs-target="#exampleModal" @click="addClick()"> Add Department </button> <table class="table table-striped"> <thead> <tr> <th> <div class="d-flex flex-row"> <input class="form-control m-2" v-model="DepartmentIdFilter" v-on:keyup="FilterFn()" placeholder="Filter"> <button type="button" class="btn btn-light" @click="sortResult('DepartmentId',true)"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-square-fill" viewBox="0 0 16 16"> <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"/> </svg> </button> <button type="button" class="btn btn-light" @click="sortResult('DepartmentId',false)"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-square-fill" viewBox="0 0 16 16"> <path d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"/> </svg> </button> </div> DepartmentId </th> <th> <div class="d-flex flex-row"> <input class="form-control m-2" v-model="DepartmentNameFilter" v-on:keyup="FilterFn()" placeholder="Filter"> <button type="button" class="btn btn-light" @click="sortResult('DepartmentName',true)"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-square-fill" viewBox="0 0 16 16"> <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"/> </svg> </button> <button type="button" class="btn btn-light" @click="sortResult('DepartmentName',false)"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-square-fill" viewBox="0 0 16 16"> <path d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"/> </svg> </button> </div> DepartmentName </th> <th> Options </th> </tr> </thead> <tbody> <tr v-for="dep in departments"> <td>{{dep.DepartmentId}}</td> <td>{{dep.DepartmentName}}</td> <td> <button type="button" class="btn btn-light mr-1" data-bs-toggle="modal" data-bs-target="#exampleModal" @click="editClick(dep)"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16"> <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/> <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/> </svg> </button> <button type="button" @click="deleteClick(dep.DepartmentId)" class="btn btn-light mr-1"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16"> <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/> </svg> </button> </td> </tr> </tbody> </thead> </table> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">{{modalTitle}}</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="input-group mb-3"> <span class="input-group-text">Department Name</span> <input type="text" class="form-control" v-model="DepartmentName"> </div> <button type="button" @click="createClick()" v-if="DepartmentId==0" class="btn btn-primary"> Create </button> <button type="button" @click="updateClick()" v-if="DepartmentId!=0" class="btn btn-primary"> Update </button> </div> </div> </div> </div> </div> `, data(){ return{ departments:[], modalTitle:"", DepartmentName:"", DepartmentId:0, DepartmentNameFilter:"", DepartmentIdFilter:"", departmentsWithoutFilter:[] } }, methods:{ refreshData(){ axios.get(variables.API_URL+"department") .then((response)=>{ this.departments=response.data; this.departmentsWithoutFilter=response.data; }); }, addClick(){ this.modalTitle="Add Department"; this.DepartmentId=0; this.DepartmentName=""; }, editClick(dep){ this.modalTitle="Edit Department"; this.DepartmentId=dep.DepartmentId; this.DepartmentName=dep.DepartmentName; }, createClick(){ axios.post(variables.API_URL+"department",{ DepartmentName:this.DepartmentName }) .then((response)=>{ this.refreshData(); alert(response.data); }); }, updateClick(){ axios.put(variables.API_URL+"department",{ DepartmentId:this.DepartmentId, DepartmentName:this.DepartmentName }) .then((response)=>{ this.refreshData(); alert(response.data); }); }, deleteClick(id){ if(!confirm("Are you sure?")){ return; } axios.delete(variables.API_URL+"department/"+id) .then((response)=>{ this.refreshData(); alert(response.data); }); }, FilterFn(){ var DepartmentIdFilter=this.DepartmentIdFilter; var DepartmentNameFilter=this.DepartmentNameFilter; this.departments=this.departmentsWithoutFilter.filter( function(el){ return el.DepartmentId.toString().toLowerCase().includes( DepartmentIdFilter.toString().trim().toLowerCase() )&& el.DepartmentName.toString().toLowerCase().includes( DepartmentNameFilter.toString().trim().toLowerCase() ) }); }, sortResult(prop,asc){ this.departments=this.departmentsWithoutFilter.sort(function(a,b){ if(asc){ return (a[prop]>b[prop])?1:((a[prop]<b[prop])?-1:0); } else{ return (b[prop]>a[prop])?1:((b[prop]<a[prop])?-1:0); } }) } }, mounted:function(){ this.refreshData(); } }
employee.js:
const employee={template:` <div> <button type="button" class="btn btn-primary m-2 fload-end" data-bs-toggle="modal" data-bs-target="#exampleModal" @click="addClick()"> Add Employee </button> <table class="table table-striped"> <thead> <tr> <th> Employee Id </th> <th> Employee Name </th> <th> Department </th> <th> DOJ </th> <th> Options </th> </tr> </thead> <tbody> <tr v-for="emp in employees"> <td>{{emp.EmployeeId}}</td> <td>{{emp.EmployeeName}}</td> <td>{{emp.Department}}</td> <td>{{emp.DateOfJoining}}</td> <td> <button type="button" class="btn btn-light mr-1" data-bs-toggle="modal" data-bs-target="#exampleModal" @click="editClick(emp)"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16"> <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/> <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/> </svg> </button> <button type="button" @click="deleteClick(emp.EmployeeId)" class="btn btn-light mr-1"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16"> <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/> </svg> </button> </td> </tr> </tbody> </thead> </table> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">{{modalTitle}}</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="d-flex flex-row bd-highlight mb-3"> <div class="p-2 w-50 bd-highlight"> <div class="input-group mb-3"> <span class="input-group-text">Name</span> <input type="text" class="form-control" v-model="EmployeeName"> </div> <div class="input-group mb-3"> <span class="input-group-text">Department</span> <select class="form-select" v-model="Department"> <option v-for="dep in departments"> {{dep.DepartmentName}} </option> </select> </div> <div class="input-group mb-3"> <span class="input-group-text">DOJ</span> <input type="date" class="form-control" v-model="DateOfJoining"> </div> </div> <div class="p-2 w-50 bd-highlight"> <img width="250px" height="250px" :src="PhotoPath+PhotoFileName"/> <input class="m-2" type="file" @change="imageUpload"> </div> </div> <button type="button" @click="createClick()" v-if="EmployeeId==0" class="btn btn-primary"> Create </button> <button type="button" @click="updateClick()" v-if="EmployeeId!=0" class="btn btn-primary"> Update </button> </div> </div> </div> </div> </div> `, data(){ return{ departments:[], employees:[], modalTitle:"", EmplpoyeeId:0, EmployeeName:"", Department:"", DateOfJoining:"", PhotoFileName:"anonymous.png", PhotoPath:variables.PHOTO_URL } }, methods:{ refreshData(){ axios.get(variables.API_URL+"employee") .then((response)=>{ this.employees=response.data; }); axios.get(variables.API_URL+"department") .then((response)=>{ this.departments=response.data; }); }, addClick(){ this.modalTitle="Add Employee"; this.EmployeeId=0; this.EmployeeName=""; this.Department="", this.DateOfJoining="", this.PhotoFileName="anonymous.png" }, editClick(emp){ this.modalTitle="Edit Employee"; this.EmployeeId=emp.EmployeeId; this.EmployeeName=emp.EmployeeName; this.Department=emp.Department, this.DateOfJoining=emp.DateOfJoining, this.PhotoFileName=emp.PhotoFileName }, createClick(){ axios.post(variables.API_URL+"employee",{ EmployeeName:this.EmployeeName, Department:this.Department, DateOfJoining:this.DateOfJoining, PhotoFileName:this.PhotoFileName }) .then((response)=>{ this.refreshData(); alert(response.data); }); }, updateClick(){ axios.put(variables.API_URL+"employee",{ EmployeeId:this.EmployeeId, EmployeeName:this.EmployeeName, Department:this.Department, DateOfJoining:this.DateOfJoining, PhotoFileName:this.PhotoFileName }) .then((response)=>{ this.refreshData(); alert(response.data); }); }, deleteClick(id){ if(!confirm("Are you sure?")){ return; } axios.delete(variables.API_URL+"employee/"+id) .then((response)=>{ this.refreshData(); alert(response.data); }); }, imageUpload(event){ let formData=new FormData(); formData.append('file',event.target.files[0]); axios.post( variables.API_URL+"employee/savefile", formData) .then((response)=>{ this.PhotoFileName=response.data; }); } }, mounted:function(){ this.refreshData(); } }
home.js:
const home={template:`<h1>This is Home</h1>`}
variables.js:
const variables={ API_URL:"http://localhost:49146/api/", PHOTO_URL:"http://localhost:49146/photos/" }
No comments:
Post a Comment