-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add employee details screen and crud operations
- Loading branch information
Showing
4 changed files
with
262 additions
and
8 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
165 changes: 164 additions & 1 deletion
165
angular-dotnetcore-mongodb/client/src/app/employee/employee.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,164 @@ | ||
| <p>employee works!</p> | ||
| <button | ||
| type="button" | ||
| class="btn btn-primary m-2 float-end" | ||
| data-bs-toggle="modal" | ||
| data-bs-target="#exampleModal" | ||
| (click)="addClick()" | ||
| > | ||
| Add Employee | ||
| </button> | ||
|
|
||
| <table class="table table-striped"> | ||
| <thead> | ||
| <tr> | ||
| <th>EmployeeId</th> | ||
| <th>EmployeeName</th> | ||
| <th>Department</th> | ||
| <th>DateOfJoining</th> | ||
| <th>Options</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr *ngFor="let emp of employees"> | ||
| <td>{{ emp.EmployeeId }}</td> | ||
| <td>{{ emp.EmployeeName }}</td> | ||
| <td>{{ emp.Department }}</td> | ||
| <td>{{ emp.DateOfJoining }}</td> | ||
| <td> | ||
| <button | ||
| type="button" | ||
| class="btn btn-warning mx-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" | ||
| class="btn btn-danger mx-1" | ||
| (click)="deleteClick(emp.EmployeeId)" | ||
| > | ||
| <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> | ||
| </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 btn-danger shadow mr-1" | ||
| data-bs-dismiss="modal" | ||
| > | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="16" | ||
| height="16" | ||
| fill="currentColor" | ||
| className="bi bi-x-lg" | ||
| viewBox="0 0 16 16" | ||
| > | ||
| <path | ||
| d="M1.293 1.293a1 1 0 0 1 1.414 0L8 6.586l5.293-5.293a1 1 0 1 1 1.414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 0 1 0-1.414z" | ||
| /> | ||
| </svg> | ||
| </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" | ||
| [(ngModel)]="EmployeeName" | ||
| /> | ||
| </div> | ||
| <div class="input-group mb-3"> | ||
| <span class="input-group-text">Department</span> | ||
| <select class="form-select" [(ngModel)]="Department"> | ||
| <option *ngFor="let dep of 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" | ||
| [(ngModel)]="DateOfJoining" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div class="d-flex flex-row bd-highlight mb-3"> | ||
| <img | ||
| width="250px" | ||
| height="250px" | ||
| [src]="PhotoPath + PhotoFileName" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <button | ||
| type="button" | ||
| (click)="createClick()" | ||
| *ngIf="EmployeeId == 0" | ||
| class="btn btn-primary" | ||
| > | ||
| Create | ||
| </button> | ||
|
|
||
| <button | ||
| type="button" | ||
| (click)="updateClick()" | ||
| *ngIf="EmployeeId != 0" | ||
| class="btn btn-primary" | ||
| > | ||
| Update | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
83 changes: 81 additions & 2 deletions
83
angular-dotnetcore-mongodb/client/src/app/employee/employee.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,94 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
| import { environment } from 'src/environments/environment'; | ||
| import { HttpClient } from '@angular/common/http'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-employee', | ||
| templateUrl: './employee.component.html', | ||
| styleUrls: ['./employee.component.css'] | ||
| styleUrls: ['./employee.component.css'], | ||
| }) | ||
| export class EmployeeComponent implements OnInit { | ||
| constructor(private http: HttpClient) {} | ||
|
|
||
| constructor() { } | ||
| departments: any = []; | ||
| employees: any = []; | ||
|
|
||
| modalTitle = ''; | ||
| EmployeeId = 0; | ||
| EmployeeName = ''; | ||
| Department = ''; | ||
| DateOfJoining = ''; | ||
| PhotoFileName = 'anonymous.png'; | ||
| PhotoPath = environment.PHOTO_URL; | ||
|
|
||
| ngOnInit(): void { | ||
| this.refreshList(); | ||
| } | ||
|
|
||
| refreshList() { | ||
| this.http.get<any>(environment.API_URL + 'employee').subscribe((data) => { | ||
| this.employees = data; | ||
| }); | ||
| this.http.get<any>(environment.API_URL + 'department').subscribe((data) => { | ||
| this.departments = data; | ||
| }); | ||
| } | ||
|
|
||
| addClick() { | ||
| this.modalTitle = 'Add Employee'; | ||
| this.EmployeeId = 0; | ||
| this.EmployeeName = ''; | ||
| this.Department = ''; | ||
| this.DateOfJoining = ''; | ||
| this.PhotoFileName = 'anonymous.png'; | ||
| } | ||
|
|
||
| editClick(emp: any) { | ||
| 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() { | ||
| var val = { | ||
| EmployeeName: this.EmployeeName, | ||
| Department: this.Department, | ||
| DateOfJoining: this.DateOfJoining, | ||
| PhotoFileName: this.PhotoFileName, | ||
| }; | ||
|
|
||
| this.http.post(environment.API_URL + 'employee', val).subscribe((res) => { | ||
| alert(res.toString()); | ||
| this.refreshList(); | ||
| }); | ||
| } | ||
|
|
||
| updateClick() { | ||
| var val = { | ||
| EmployeeId: this.EmployeeId, | ||
| EmployeeName: this.EmployeeName, | ||
| Department: this.Department, | ||
| DateOfJoining: this.DateOfJoining, | ||
| PhotoFileName: this.PhotoFileName, | ||
| }; | ||
|
|
||
| this.http.put(environment.API_URL + 'employee', val).subscribe((res) => { | ||
| alert(res.toString()); | ||
| this.refreshList(); | ||
| }); | ||
| } | ||
|
|
||
| deleteClick(id: any) { | ||
| if (confirm('Are you sure?')) { | ||
| this.http | ||
| .delete(environment.API_URL + 'employee/' + id) | ||
| .subscribe((res) => { | ||
| alert(res.toString()); | ||
| this.refreshList(); | ||
| }); | ||
| } | ||
| } | ||
| } |