Initial commit

README.md

@@ -0,0 +1,3 @@
+# angular-ivy-pgvvxe
+
+[Edit on StackBlitz ⚡️](https://stackblitz.com/edit/angular-ivy-pgvvxe)

angular.json

@@ -0,0 +1,100 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "demo": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/demo",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "demo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "demo:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              "styles.css"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "demo"
+}

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "angular",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^13.2.0",
+    "@angular/common": "^13.2.0",
+    "@angular/compiler": "^13.2.0",
+    "@angular/core": "^13.2.0",
+    "@angular/forms": "^13.2.0",
+    "@angular/platform-browser": "^13.2.0",
+    "@angular/platform-browser-dynamic": "^13.2.0",
+    "@angular/router": "^13.2.0",
+    "@popperjs/core": "^2.10.2",
+    "bootstrap": "^5.1.3",
+    "rxjs": "^7.5.2",
+    "rxjs/operators": "*",
+    "tslib": "^2.3.1",
+    "zone.js": "^0.11.4"
+  },
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.1100.4",
+    "@angular/cli": "~11.0.4",
+    "@angular/compiler-cli": "~11.0.4",
+    "@types/jasmine": "~3.6.0",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.1.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.0.3",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~4.0.2"
+  }
+}

src/app/app-routing/app-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Routes, RouterModule } from '@angular/router';
+import { EmployeeCreateComponent } from '../employee-create/employee-create.component';
+import { EmployeeEditComponent } from '../employee-edit/employee-edit.component';
+import { EmployeeListComponent } from '../employee-list/employee-list.component';
+const routes: Routes = [
+  { path: '', pathMatch: 'full', redirectTo: 'create-employee' },
+  { path: 'create-employee', component: EmployeeCreateComponent },
+  { path: 'employees-list', component: EmployeeListComponent },
+  { path: 'employee-edit/:id', component: EmployeeEditComponent },
+];
+
+@NgModule({
+  imports: [
+    CommonModule, RouterModule.forRoot(routes)
+  ],
+  exports: [ RouterModule ],
+  declarations: []
+})
+export class AppRoutingModule { }

src/app/app.component.css

@@ -0,0 +1,3 @@
+p {
+  font-family: Lato;
+}

src/app/app.component.html

@@ -0,0 +1,5 @@
+<hello name="{{ name }}"></hello>
+<p>
+  Start editing to see some magic happen :)
+</p>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component, VERSION } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: './app.component.html',
+  styleUrls: [ './app.component.css' ]
+})
+export class AppComponent  {
+  name = 'Angular ' + VERSION.major;
+}

src/app/app.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { AppRoutingModule } from './app-routing/app-routing.module';
+
+import { AppComponent } from './app.component';
+import { HelloComponent } from './hello.component';
+import { EmployeeCreateComponent } from  './employee-create/employee-create.component';
+import { EmployeeListComponent } from './employee-list/employee-list.component';
+import { EmployeeEditComponent } from './employee-edit/employee-edit.component';
+
+@NgModule({
+  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, AppRoutingModule ],
+  exports:      [],
+  declarations: [ AppComponent, HelloComponent, EmployeeEditComponent, EmployeeListComponent, EmployeeCreateComponent ],
+  providers:    [],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }

src/app/employee-create/employee-create.component.html

@@ -0,0 +1,20 @@
+<div class="container custom-container">
+<div class="col-md-12">
+  <h3 class="mb-3 text-center">Create Employee</h3>
+  <div class="form-group">
+    <input type="text" [(ngModel)]="employeeDetails.firstname" class="form-control" placeholder="First name">
+  </div>
+  <div class="form-group">
+  <input type="text" [(ngModel)]="employeeDetails.lastname" class="form-control" placeholder="Last name">
+</div>
+  <div class="form-group">
+    <input type="text" [(ngModel)]="employeeDetails.email" class="form-control" placeholder="Email">
+  </div>
+  <div class="form-group">
+    <input type="text" [(ngModel)]="employeeDetails.phone" class="form-control" placeholder="Phone">
+  </div>
+  <div class="form-group">
+    <button class="btn btn-success btn-lg btn-block" (click)="addEmployee(employeeDetails)">Create Employee</button>
+  </div>
+</div>
+</div>

src/app/employee-create/employee-create.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { RestApiService } from '../shared/rest-api.service';
+@Component({
+  selector: 'app-employee-create',
+  templateUrl: './employee-create.component.html',
+  styleUrls: ['./employee-create.component.css'],
+})
+export class EmployeeCreateComponent implements OnInit {
+  @Input() employeeDetails = { firstname: '', lastname: '', email: '', phone: '' };
+  constructor(public restApi: RestApiService, public router: Router) {}
+  ngOnInit() {}
+  addEmployee(dataEmployee: any) {
+    this.restApi.createEmployee(this.employeeDetails).subscribe((data: {}) => {
+      this.router.navigate(['/employees-list']);
+    });
+  }
+}

src/app/employee-edit/employee-edit.component.html

@@ -0,0 +1,19 @@
+<div class="container custom-container">
+<div class="col-md-12">
+
+  <h3 class="mb-3 text-center">Update Employee</h3>
+  <div class="form-group">
+    <input type="text" [(ngModel)]="employeeData.name" class="form-control" placeholder="Name">
+  </div>
+  <div class="form-group">
+    <input type="text" [(ngModel)]="employeeData.email" class="form-control" placeholder="Email">
+  </div>
+  <div class="form-group">
+    <input type="text" [(ngModel)]="employeeData.phone" class="form-control" placeholder="Phone">
+  </div>
+  <div class="form-group">
+    <button class="btn btn-success btn-lg btn-block" (click)="updateEmployee()">Update Employee</button>
+  </div>
+
+</div>
+</div>

src/app/employee-edit/employee-edit.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { RestApiService } from "../shared/rest-api.service";
+import { ActivatedRoute, Router } from '@angular/router';
+@Component({
+  selector: 'app-employee-details',
+  templateUrl: './employee-edit.component.html',
+  styleUrls: ['./employee-edit.component.scss']
+})
+export class EmployeeEditComponent implements OnInit {
+  id = this.actRoute.snapshot.params['id'];
+  employeeData: any = {};
+  constructor(
+    public restApi: RestApiService,
+    public actRoute: ActivatedRoute,
+    public router: Router
+  ) { 
+  }
+  ngOnInit() { 
+    this.restApi.getEmployee(this.id).subscribe((data: {}) => {
+      this.employeeData = data;
+    })
+  }
+  // Update employee data
+  updateEmployee() {
+    if(window.confirm('Are you sure, you want to update?')){
+      this.restApi.updateEmployee(this.id, this.employeeData).subscribe(data => {
+        this.router.navigate(['/employees-list'])
+      })
+    }
+  }
+}

src/app/employee-list/employee-list.component.html

@@ -0,0 +1,41 @@
+<div class="container custom-container-2">
+<!-- Show it when there is no employee -->
+<div class="no-data text-center" *ngIf="Employee.length == 0">
+  <p>There is no employee added yet!</p>
+  <button class="btn btn-outline-primary" routerLink="/create-employee">
+    Add Empoyee
+  </button>
+</div>
+<!-- Employees list table, it hides when there is no employee -->
+<div *ngIf="Employee.length !== 0">
+  <h3 class="mb-3 text-center">Employees List</h3>
+  <div class="col-md-12">
+    <table class="table table-bordered">
+      <thead>
+        <tr>
+          <th scope="col">User Id</th>
+          <th scope="col">Name</th>
+          <th scope="col">Email</th>
+          <th scope="col">Phone</th>
+          <th scope="col">Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let employee of Employee">
+          <td>{{ employee.id }}</td>
+          <td>{{ employee.name }}</td>
+          <td>{{ employee.email }}</td>
+          <td>{{ employee.phone }}</td>
+          <td>
+            <span class="edit" routerLink="/employee-edit/{{ employee.id }}"
+              >Edit</span>
+            <span class="delete" (click)="deleteEmployee(employee.id)"
+              >Delete</span
+            >
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+</div>

src/app/employee-list/employee-list.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { RestApiService } from '../shared/rest-api.service';
+@Component({
+  selector: 'app-employee-list',
+  templateUrl: './employee-list.component.html',
+  styleUrls: ['./employee-list.component.scss'],
+})
+export class EmployeeListComponent implements OnInit {
+  Employee: any = [];
+  constructor(public restApi: RestApiService) {}
+  ngOnInit() {
+    this.loadEmployees();
+  }
+  // Get employees list
+  loadEmployees() {
+    return this.restApi.getEmployees().subscribe((data: {}) => {
+      this.Employee = data;
+    });
+  }
+  // Delete employee
+  deleteEmployee(id: any) {
+    if (window.confirm('Are you sure, you want to delete?')) {
+      this.restApi.deleteEmployee(id).subscribe((data) => {
+        this.loadEmployees();
+      });
+    }
+  }
+}