[
  {
    "path": ".editorconfig",
    "content": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.ts]\nquote_type = single\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": ".gitignore",
    "content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/dist\n/tmp\n/out-tsc\n# Only exists if Bazel was run\n/bazel-out\n\n# dependencies\n/node_modules\n\n# profiling files\nchrome-profiler-events*.json\nspeed-measure-plugin*.json\n\n# IDEs and editors\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# IDE - VSCode\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n.history/*\n\n# misc\n/.sass-cache\n/connect.lock\n/coverage\n/libpeerconnection.log\nnpm-debug.log\nyarn-error.log\ntestem.log\n/typings\n\n# System Files\n.DS_Store\nThumbs.db\n"
  },
  {
    "path": "README.md",
    "content": "# Employeemanagerapp\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.5.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).\n"
  },
  {
    "path": "angular.json",
    "content": "{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"employeemanagerapp\": {\n      \"projectType\": \"application\",\n      \"schematics\": {},\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:browser\",\n          \"options\": {\n            \"outputPath\": \"dist/employeemanagerapp\",\n            \"index\": \"src/index.html\",\n            \"main\": \"src/main.ts\",\n            \"polyfills\": \"src/polyfills.ts\",\n            \"tsConfig\": \"tsconfig.app.json\",\n            \"aot\": true,\n            \"assets\": [\n              \"src/favicon.ico\",\n              \"src/assets\"\n            ],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"production\": {\n              \"fileReplacements\": [\n                {\n                  \"replace\": \"src/environments/environment.ts\",\n                  \"with\": \"src/environments/environment.prod.ts\"\n                }\n              ],\n              \"optimization\": true,\n              \"outputHashing\": \"all\",\n              \"sourceMap\": false,\n              \"extractCss\": true,\n              \"namedChunks\": false,\n              \"extractLicenses\": true,\n              \"vendorChunk\": false,\n              \"buildOptimizer\": true,\n              \"budgets\": [\n                {\n                  \"type\": \"initial\",\n                  \"maximumWarning\": \"2mb\",\n                  \"maximumError\": \"5mb\"\n                },\n                {\n                  \"type\": \"anyComponentStyle\",\n                  \"maximumWarning\": \"6kb\",\n                  \"maximumError\": \"10kb\"\n                }\n              ]\n            }\n          }\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"options\": {\n            \"browserTarget\": \"employeemanagerapp:build\"\n          },\n          \"configurations\": {\n            \"production\": {\n              \"browserTarget\": \"employeemanagerapp:build:production\"\n            }\n          }\n        },\n        \"extract-i18n\": {\n          \"builder\": \"@angular-devkit/build-angular:extract-i18n\",\n          \"options\": {\n            \"browserTarget\": \"employeemanagerapp:build\"\n          }\n        },\n        \"test\": {\n          \"builder\": \"@angular-devkit/build-angular:karma\",\n          \"options\": {\n            \"main\": \"src/test.ts\",\n            \"polyfills\": \"src/polyfills.ts\",\n            \"tsConfig\": \"tsconfig.spec.json\",\n            \"karmaConfig\": \"karma.conf.js\",\n            \"assets\": [\n              \"src/favicon.ico\",\n              \"src/assets\"\n            ],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          }\n        },\n        \"lint\": {\n          \"builder\": \"@angular-devkit/build-angular:tslint\",\n          \"options\": {\n            \"tsConfig\": [\n              \"tsconfig.app.json\",\n              \"tsconfig.spec.json\",\n              \"e2e/tsconfig.json\"\n            ],\n            \"exclude\": [\n              \"**/node_modules/**\"\n            ]\n          }\n        },\n        \"e2e\": {\n          \"builder\": \"@angular-devkit/build-angular:protractor\",\n          \"options\": {\n            \"protractorConfig\": \"e2e/protractor.conf.js\",\n            \"devServerTarget\": \"employeemanagerapp:serve\"\n          },\n          \"configurations\": {\n            \"production\": {\n              \"devServerTarget\": \"employeemanagerapp:serve:production\"\n            }\n          }\n        }\n      }\n    }},\n  \"defaultProject\": \"employeemanagerapp\"\n}\n"
  },
  {
    "path": "browserslist",
    "content": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For additional information regarding the format and rule options, please see:\n# https://github.com/browserslist/browserslist#queries\n\n# You can see what browsers were selected by your queries by running:\n#   npx browserslist\n\n> 0.5%\nlast 2 versions\nFirefox ESR\nnot dead\nnot IE 9-11 # For IE 9-11 support, remove 'not'."
  },
  {
    "path": "e2e/protractor.conf.js",
    "content": "// @ts-check\n// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/blob/master/lib/config.ts\n\nconst { SpecReporter } = require('jasmine-spec-reporter');\n\n/**\n * @type { import(\"protractor\").Config }\n */\nexports.config = {\n  allScriptsTimeout: 11000,\n  specs: [\n    './src/**/*.e2e-spec.ts'\n  ],\n  capabilities: {\n    browserName: 'chrome'\n  },\n  directConnect: true,\n  baseUrl: 'http://localhost:4200/',\n  framework: 'jasmine',\n  jasmineNodeOpts: {\n    showColors: true,\n    defaultTimeoutInterval: 30000,\n    print: function() {}\n  },\n  onPrepare() {\n    require('ts-node').register({\n      project: require('path').join(__dirname, './tsconfig.json')\n    });\n    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));\n  }\n};"
  },
  {
    "path": "e2e/src/app.e2e-spec.ts",
    "content": "import { AppPage } from './app.po';\nimport { browser, logging } from 'protractor';\n\ndescribe('workspace-project App', () => {\n  let page: AppPage;\n\n  beforeEach(() => {\n    page = new AppPage();\n  });\n\n  it('should display welcome message', () => {\n    page.navigateTo();\n    expect(page.getTitleText()).toEqual('employeemanagerapp app is running!');\n  });\n\n  afterEach(async () => {\n    // Assert that there are no errors emitted from the browser\n    const logs = await browser.manage().logs().get(logging.Type.BROWSER);\n    expect(logs).not.toContain(jasmine.objectContaining({\n      level: logging.Level.SEVERE,\n    } as logging.Entry));\n  });\n});\n"
  },
  {
    "path": "e2e/src/app.po.ts",
    "content": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n  navigateTo(): Promise<unknown> {\n    return browser.get(browser.baseUrl) as Promise<unknown>;\n  }\n\n  getTitleText(): Promise<string> {\n    return element(by.css('app-root .content span')).getText() as Promise<string>;\n  }\n}\n"
  },
  {
    "path": "e2e/tsconfig.json",
    "content": "{\n  \"extends\": \"../tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"../out-tsc/e2e\",\n    \"module\": \"commonjs\",\n    \"target\": \"es5\",\n    \"types\": [\n      \"jasmine\",\n      \"jasminewd2\",\n      \"node\"\n    ]\n  }\n}\n"
  },
  {
    "path": "karma.conf.js",
    "content": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-file.html\n\nmodule.exports = function (config) {\n  config.set({\n    basePath: '',\n    frameworks: ['jasmine', '@angular-devkit/build-angular'],\n    plugins: [\n      require('karma-jasmine'),\n      require('karma-chrome-launcher'),\n      require('karma-jasmine-html-reporter'),\n      require('karma-coverage-istanbul-reporter'),\n      require('@angular-devkit/build-angular/plugins/karma')\n    ],\n    client: {\n      clearContext: false // leave Jasmine Spec Runner output visible in browser\n    },\n    coverageIstanbulReporter: {\n      dir: require('path').join(__dirname, './coverage/employeemanagerapp'),\n      reports: ['html', 'lcovonly', 'text-summary'],\n      fixWebpackSourcePaths: true\n    },\n    reporters: ['progress', 'kjhtml'],\n    port: 9876,\n    colors: true,\n    logLevel: config.LOG_INFO,\n    autoWatch: true,\n    browsers: ['Chrome'],\n    singleRun: false,\n    restartOnFileChange: true\n  });\n};\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"employeemanagerapp\",\n  \"version\": \"0.0.0\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\",\n    \"test\": \"ng test\",\n    \"lint\": \"ng lint\",\n    \"e2e\": \"ng e2e\"\n  },\n  \"private\": true,\n  \"dependencies\": {\n    \"@angular/animations\": \"~9.1.6\",\n    \"@angular/common\": \"~9.1.6\",\n    \"@angular/compiler\": \"~9.1.6\",\n    \"@angular/core\": \"~9.1.6\",\n    \"@angular/forms\": \"~9.1.6\",\n    \"@angular/platform-browser\": \"~9.1.6\",\n    \"@angular/platform-browser-dynamic\": \"~9.1.6\",\n    \"@angular/router\": \"~9.1.6\",\n    \"rxjs\": \"~6.5.4\",\n    \"tslib\": \"^1.10.0\",\n    \"zone.js\": \"~0.10.2\"\n  },\n  \"devDependencies\": {\n    \"@angular-devkit/build-angular\": \"~0.901.5\",\n    \"@angular/cli\": \"~9.1.5\",\n    \"@angular/compiler-cli\": \"~9.1.6\",\n    \"@types/node\": \"^12.11.1\",\n    \"@types/jasmine\": \"~3.5.0\",\n    \"@types/jasminewd2\": \"~2.0.3\",\n    \"codelyzer\": \"^5.1.2\",\n    \"jasmine-core\": \"~3.5.0\",\n    \"jasmine-spec-reporter\": \"~4.2.1\",\n    \"karma\": \"~5.0.0\",\n    \"karma-chrome-launcher\": \"~3.1.0\",\n    \"karma-coverage-istanbul-reporter\": \"~2.1.0\",\n    \"karma-jasmine\": \"~3.0.1\",\n    \"karma-jasmine-html-reporter\": \"^1.4.2\",\n    \"protractor\": \"~5.4.3\",\n    \"ts-node\": \"~8.3.0\",\n    \"tslint\": \"~6.1.0\",\n    \"typescript\": \"~3.8.3\"\n  }\n}\n"
  },
  {
    "path": "src/app/app.component.css",
    "content": ""
  },
  {
    "path": "src/app/app.component.html",
    "content": "<nav class=\"navbar navbar-expand-lg navbar-dark bg-dark\">\n  <a class=\"navbar-brand\" style=\"color:white;\">Employee Manager</a>\n  <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarColor02\" aria-controls=\"navbarColor02\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n  <span class=\"navbar-toggler-icon\"></span>\n  </button>\n  <div class=\"collapse navbar-collapse\" id=\"navbarColor02\">\n     <ul class=\"navbar-nav mr-auto\">\n        <li class=\"nav-item active\">\n           <a class=\"nav-link\" (click)=\"onOpenModal(null, 'add')\">Add Employee <span class=\"sr-only\">(current)</span></a>\n        </li>\n     </ul>\n     <form class=\"form-inline my-2 my-lg-0\">\n        <input type=\"search\" (ngModelChange)=\"searchEmployees(key.value)\" #key=\"ngModel\" ngModel\n         name=\"key\" id=\"searchName\" class=\"form-control mr-sm-2\" placeholder=\"Search employees...\" required>\n     </form>\n  </div>\n</nav>\n<div class=\"container\" id=\"main-container\">\n<div class=\"row\">\n  <div *ngFor=\"let employee of employees\" class=\"col-md-6 col-xl-3\">\n     <div class=\"card m-b-30\">\n        <div class=\"card-body row\">\n           <div class=\"col-6\">\n              <a href=\"\"><img src=\"{{employee?.imageUrl}}\" alt=\"\" class=\"img-fluid rounded-circle w-60\"></a>\n           </div>\n           <div class=\"col-6 card-title align-self-center mb-0\">\n              <h5>{{employee?.name}}</h5>\n              <p class=\"m-0\">{{employee?.jobTitle}}</p>\n           </div>\n        </div>\n        <ul class=\"list-group list-group-flush\">\n           <li class=\"list-group-item\"><i class=\"fa fa-envelope float-right\"></i>{{employee?.email}}</li>\n           <li class=\"list-group-item\"><i class=\"fa fa-phone float-right\"></i>Phone : {{employee?.phone}}</li>\n        </ul>\n        <div class=\"card-body\">\n           <div class=\"float-right btn-group btn-group-sm\">\n              <a (click)=\"onOpenModal(employee, 'edit')\" class=\"btn btn-primary tooltips\" data-placement=\"top\" data-original-title=\"Edit\"><i class=\"fa fa-pencil\"></i> </a>\n              <a (click)=\"onOpenModal(employee, 'delete')\" class=\"btn btn-secondary tooltips\" data-placement=\"top\" data-original-title=\"Delete\"><i class=\"fa fa-times\"></i></a>\n           </div>\n        </div>\n     </div>\n  </div>\n</div>\n\n<!-- Add Employee Modal -->\n<div class=\"modal fade\" id=\"addEmployeeModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"addEmployeeModalLabel\" aria-hidden=\"true\">\n  <div class=\"modal-dialog\" role=\"document\">\n    <div class=\"modal-content\">\n       <div class=\"modal-header\">\n          <h5 class=\"modal-title\" id=\"addEmployeeModalLabel\">Add Employee</h5>\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n          <span aria-hidden=\"true\">&times;</span>\n          </button>\n       </div>\n       <div class=\"modal-body\">\n          <form #addForm=\"ngForm\" (ngSubmit)=\"onAddEmloyee(addForm)\">\n          <div class=\"form-group\">\n             <label for=\"name\">Name</label>\n             <input type=\"text\" ngModel name=\"name\" class=\"form-control\" id=\"name\" placeholder=\"Name\" required>\n          </div>\n          <div class=\"form-group\">\n             <label for=\"email\">Email Address</label>\n             <input type=\"email\" ngModel name=\"email\" class=\"form-control\" id=\"email\" placeholder=\"Email\" required>\n          </div>\n          <div class=\"form-group\">\n             <label for=\"phone\">Job title</label>\n             <input type=\"text\" ngModel name=\"jobTitle\" class=\"form-control\" id=\"jobTile\" placeholder=\"Job title\" required>\n          </div>\n          <div class=\"form-group\">\n             <label for=\"phone\">Phone</label>\n             <input type=\"text\" ngModel name=\"phone\" class=\"form-control\" id=\"phone\" placeholder=\"Phone\" required>\n          </div>\n          <div class=\"form-group\">\n             <label for=\"phone\">Image URL</label>\n             <input type=\"text\" ngModel name=\"imageUrl\" class=\"form-control\" id=\"imageUrl\" placeholder=\"Image URL\" required>\n          </div>\n          <div class=\"modal-footer\">\n             <button type=\"button\" id=\"add-employee-form\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button>\n             <button [disabled]=\"addForm.invalid\" type=\"submit\" class=\"btn btn-primary\" >Save changes</button>\n          </div>\n          </form>\n       </div>\n    </div>\n  </div>\n  </div>\n\n<!-- Edit Modal -->\n<div class=\"modal fade\" id=\"updateEmployeeModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"employeeEditModalLabel\" aria-hidden=\"true\">\n  <div class=\"modal-dialog\" role=\"document\">\n     <div class=\"modal-content\">\n        <div class=\"modal-header\">\n           <h5 class=\"modal-title\" id=\"updateEmployeeModalLabel\">Edit Employee {{editEmployee?.name}}</h5>\n           <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n           <span aria-hidden=\"true\">&times;</span>\n           </button>\n        </div>\n        <div class=\"modal-body\">\n           <form #editForm=\"ngForm\">\n              <div class=\"form-group\">\n                 <label for=\"name\">Name</label>\n                 <input type=\"text\" ngModel=\"{{editEmployee?.name}}\" name=\"name\" class=\"form-control\" id=\"name\" aria-describedby=\"emailHelp\" placeholder=\"Name\">\n              </div>\n              <input type=\"hidden\" ngModel=\"{{editEmployee?.id}}\" name=\"id\" class=\"form-control\" id=\"id\" placeholder=\"Email\">\n              <input type=\"hidden\" ngModel=\"{{editEmployee?.employeeCode}}\" name=\"userCode\" class=\"form-control\" id=\"userCode\" placeholder=\"Email\">\n              <div class=\"form-group\">\n                 <label for=\"email\">Email Address</label>\n                 <input type=\"email\" ngModel=\"{{editEmployee?.email}}\" name=\"email\" class=\"form-control\" id=\"email\" placeholder=\"Email\">\n              </div>\n              <div class=\"form-group\">\n                 <label for=\"phone\">Job title</label>\n                 <input type=\"text\" ngModel=\"{{editEmployee?.jobTitle}}\" name=\"jobTitle\" class=\"form-control\" id=\"jobTitle\" placeholder=\"Job title\">\n              </div>\n              <div class=\"form-group\">\n                 <label for=\"phone\">Phone</label>\n                 <input type=\"text\" ngModel=\"{{editEmployee?.phone}}\" name=\"phone\" class=\"form-control\" id=\"phone\" name=\"phone\" placeholder=\"Phone\">\n              </div>\n              <div class=\"form-group\">\n                 <label for=\"phone\">Image URL</label>\n                 <input type=\"text\" ngModel=\"{{editEmployee?.imageUrl}}\" name=\"imageUrl\" class=\"form-control\" id=\"imageUrl\" placeholder=\"Image URL\">\n              </div>\n              <div class=\"modal-footer\">\n                 <button type=\"button\" id=\"\" data-dismiss=\"modal\" class=\"btn btn-secondary\">Close</button>\n                 <button (click)=\"onUpdateEmloyee(editForm.value)\" data-dismiss=\"modal\" class=\"btn btn-primary\" >Save changes</button>\n              </div>\n           </form>\n        </div>\n     </div>\n  </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal fade\" id=\"deleteEmployeeModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"deleteModelLabel\" aria-hidden=\"true\">\n  <div class=\"modal-dialog\" role=\"document\">\n     <div class=\"modal-content\">\n        <div class=\"modal-header\">\n           <h5 class=\"modal-title\" id=\"deleteModelLabel\">Delete Employee</h5>\n           <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n           <span aria-hidden=\"true\">&times;</span>\n           </button>\n        </div>\n        <div class=\"modal-body\">\n           <p>Are you sure you want to delete employee {{deleteEmployee?.name}}?</p>\n           <div class=\"modal-footer\">\n              <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">No</button>\n              <button (click)=\"onDeleteEmloyee(deleteEmployee?.id)\" class=\"btn btn-danger\" data-dismiss=\"modal\">Yes</button>\n           </div>\n        </div>\n     </div>\n  </div>\n</div>\n</div>\n\n<!-- Notification for no employees -->\n<div *ngIf=\"employees?.length == 0\" class=\"col-lg-12 col-md-12 col-xl-12\">\n<div class=\"alert alert-info\" role=\"alert\">\n  <h4 class=\"alert-heading\">NO EMPLOYEES!</h4>\n  <p>No Employees were found.</p>\n</div>\n</div>\n"
  },
  {
    "path": "src/app/app.component.spec.ts",
    "content": "import { TestBed, async } from '@angular/core/testing';\nimport { AppComponent } from './app.component';\n\ndescribe('AppComponent', () => {\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [\n        AppComponent\n      ],\n    }).compileComponents();\n  }));\n\n  it('should create the app', () => {\n    const fixture = TestBed.createComponent(AppComponent);\n    const app = fixture.componentInstance;\n    expect(app).toBeTruthy();\n  });\n\n  it(`should have as title 'employeemanagerapp'`, () => {\n    const fixture = TestBed.createComponent(AppComponent);\n    const app = fixture.componentInstance;\n    expect(app.title).toEqual('employeemanagerapp');\n  });\n\n  it('should render title', () => {\n    const fixture = TestBed.createComponent(AppComponent);\n    fixture.detectChanges();\n    const compiled = fixture.nativeElement;\n    expect(compiled.querySelector('.content span').textContent).toContain('employeemanagerapp app is running!');\n  });\n});\n"
  },
  {
    "path": "src/app/app.component.ts",
    "content": "import { Component, OnInit } from '@angular/core';\nimport { Employee } from './employee';\nimport { EmployeeService } from './employee.service';\nimport { HttpErrorResponse } from '@angular/common/http';\nimport { NgForm } from '@angular/forms';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent implements OnInit {\n  public employees: Employee[];\n  public editEmployee: Employee;\n  public deleteEmployee: Employee;\n\n  constructor(private employeeService: EmployeeService){}\n\n  ngOnInit() {\n    this.getEmployees();\n  }\n\n  public getEmployees(): void {\n    this.employeeService.getEmployees().subscribe(\n      (response: Employee[]) => {\n        this.employees = response;\n        console.log(this.employees);\n      },\n      (error: HttpErrorResponse) => {\n        alert(error.message);\n      }\n    );\n  }\n\n  public onAddEmloyee(addForm: NgForm): void {\n    document.getElementById('add-employee-form').click();\n    this.employeeService.addEmployee(addForm.value).subscribe(\n      (response: Employee) => {\n        console.log(response);\n        this.getEmployees();\n        addForm.reset();\n      },\n      (error: HttpErrorResponse) => {\n        alert(error.message);\n        addForm.reset();\n      }\n    );\n  }\n\n  public onUpdateEmloyee(employee: Employee): void {\n    this.employeeService.updateEmployee(employee).subscribe(\n      (response: Employee) => {\n        console.log(response);\n        this.getEmployees();\n      },\n      (error: HttpErrorResponse) => {\n        alert(error.message);\n      }\n    );\n  }\n\n  public onDeleteEmloyee(employeeId: number): void {\n    this.employeeService.deleteEmployee(employeeId).subscribe(\n      (response: void) => {\n        console.log(response);\n        this.getEmployees();\n      },\n      (error: HttpErrorResponse) => {\n        alert(error.message);\n      }\n    );\n  }\n\n  public searchEmployees(key: string): void {\n    console.log(key);\n    const results: Employee[] = [];\n    for (const employee of this.employees) {\n      if (employee.name.toLowerCase().indexOf(key.toLowerCase()) !== -1\n      || employee.email.toLowerCase().indexOf(key.toLowerCase()) !== -1\n      || employee.phone.toLowerCase().indexOf(key.toLowerCase()) !== -1\n      || employee.jobTitle.toLowerCase().indexOf(key.toLowerCase()) !== -1) {\n        results.push(employee);\n      }\n    }\n    this.employees = results;\n    if (results.length === 0 || !key) {\n      this.getEmployees();\n    }\n  }\n\n  public onOpenModal(employee: Employee, mode: string): void {\n    const container = document.getElementById('main-container');\n    const button = document.createElement('button');\n    button.type = 'button';\n    button.style.display = 'none';\n    button.setAttribute('data-toggle', 'modal');\n    if (mode === 'add') {\n      button.setAttribute('data-target', '#addEmployeeModal');\n    }\n    if (mode === 'edit') {\n      this.editEmployee = employee;\n      button.setAttribute('data-target', '#updateEmployeeModal');\n    }\n    if (mode === 'delete') {\n      this.deleteEmployee = employee;\n      button.setAttribute('data-target', '#deleteEmployeeModal');\n    }\n    container.appendChild(button);\n    button.click();\n  }\n\n\n\n}\n"
  },
  {
    "path": "src/app/app.module.ts",
    "content": "import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\nimport { EmployeeService } from './employee.service';\nimport { HttpClientModule } from '@angular/common/http';import { FormsModule } from '@angular/forms';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    HttpClientModule, FormsModule\n  ],\n  providers: [EmployeeService],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n"
  },
  {
    "path": "src/app/employee.service.ts",
    "content": "import { Injectable } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { Observable } from 'rxjs';\nimport { Employee } from './employee';\nimport { environment } from 'src/environments/environment';\n\n@Injectable({providedIn: 'root'})\nexport class EmployeeService {\n  private apiServerUrl = environment.apiBaseUrl;\n\n  constructor(private http: HttpClient){}\n\n  public getEmployees(): Observable<Employee[]> {\n    return this.http.get<Employee[]>(`${this.apiServerUrl}/employee/all`);\n  }\n\n  public addEmployee(employee: Employee): Observable<Employee> {\n    return this.http.post<Employee>(`${this.apiServerUrl}/employee/add`, employee);\n  }\n\n  public updateEmployee(employee: Employee): Observable<Employee> {\n    return this.http.put<Employee>(`${this.apiServerUrl}/employee/update`, employee);\n  }\n\n  public deleteEmployee(employeeId: number): Observable<void> {\n    return this.http.delete<void>(`${this.apiServerUrl}/employee/delete/${employeeId}`);\n  }\n}\n"
  },
  {
    "path": "src/app/employee.ts",
    "content": "export interface Employee {\n  id: number;\n  name: string;\n  email: string;\n  jobTitle: string;\n  phone: string;\n  imageUrl: string;\n  employeeCode: string;\n}\n"
  },
  {
    "path": "src/assets/.gitkeep",
    "content": ""
  },
  {
    "path": "src/environments/environment.prod.ts",
    "content": "export const environment = {\n  production: true\n};\n"
  },
  {
    "path": "src/environments/environment.ts",
    "content": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.\n// The list of file replacements can be found in `angular.json`.\n\nexport const environment = {\n  production: false,\n  apiBaseUrl: 'http://localhost:8080'\n};\n\n/*\n * For easier debugging in development mode, you can import the following file\n * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.\n *\n * This import should be commented out in production mode because it will have a negative impact\n * on performance if an error is thrown.\n */\n// import 'zone.js/dist/zone-error';  // Included with Angular CLI.\n"
  },
  {
    "path": "src/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Employeemanagerapp</title>\n  <base href=\"/\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <link rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\">\n</head>\n<body>\n  <app-root></app-root>\n\n<script src=\"https://code.jquery.com/jquery-3.3.1.slim.min.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js\"></script>\n<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "src/main.ts",
    "content": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n  enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n  .catch(err => console.error(err));\n"
  },
  {
    "path": "src/polyfills.ts",
    "content": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfills to this file.\n *\n * This file is divided into 2 sections:\n *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.\n *   2. Application imports. Files imported after ZoneJS that should be loaded before your main\n *      file.\n *\n * The current setup is for so-called \"evergreen\" browsers; the last versions of browsers that\n * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),\n * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.\n *\n * Learn more in https://angular.io/guide/browser-support\n */\n\n/***************************************************************************************************\n * BROWSER POLYFILLS\n */\n\n/** IE10 and IE11 requires the following for NgClass support on SVG elements */\n// import 'classlist.js';  // Run `npm install --save classlist.js`.\n\n/**\n * Web Animations `@angular/platform-browser/animations`\n * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.\n * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).\n */\n// import 'web-animations-js';  // Run `npm install --save web-animations-js`.\n\n/**\n * By default, zone.js will patch all possible macroTask and DomEvents\n * user can disable parts of macroTask/DomEvents patch by setting following flags\n * because those flags need to be set before `zone.js` being loaded, and webpack\n * will put import in the top of bundle, so user need to create a separate file\n * in this directory (for example: zone-flags.ts), and put the following flags\n * into that file, and then add the following code before importing zone.js.\n * import './zone-flags';\n *\n * The flags allowed in zone-flags.ts are listed here.\n *\n * The following flags will work for all browsers.\n *\n * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame\n * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick\n * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames\n *\n *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js\n *  with the following flag, it will bypass `zone.js` patch for IE/Edge\n *\n *  (window as any).__Zone_enable_cross_context_check = true;\n *\n */\n\n/***************************************************************************************************\n * Zone JS is required by default for Angular itself.\n */\nimport 'zone.js/dist/zone';  // Included with Angular CLI.\n\n\n/***************************************************************************************************\n * APPLICATION IMPORTS\n */\n"
  },
  {
    "path": "src/styles.css",
    "content": "@import 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css';\n@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css';\n\nbody {\n  background: #f5f5f5;\n}\n\na {\n  cursor: pointer;\n}\n\n.navbar {\n  margin-bottom: 30px;\n}\n\n.card {\n  border: none;\n  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);\n  margin-bottom: 30px;\n}\n\n.w-60 {\n  width: 60px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin: 0 0 10px;\n  font-weight: 600;\n}\n\n.social-links li a {\n  -webkit-border-radius: 50%;\n  background-color: rgba(89, 206, 181, .85);\n  border-radius: 50%;\n  color: #fff;\n  display: inline-block;\n  height: 30px;\n  line-height: 30px;\n  text-align: center;\n  width: 30px;\n  font-size: 12px;\n}\n\na {\n  color: #707070;\n}\ni {\ncolor: white;\n}\n\na {\ncolor: white;\n}\n"
  },
  {
    "path": "src/test.ts",
    "content": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/zone-testing';\nimport { getTestBed } from '@angular/core/testing';\nimport {\n  BrowserDynamicTestingModule,\n  platformBrowserDynamicTesting\n} from '@angular/platform-browser-dynamic/testing';\n\ndeclare const require: {\n  context(path: string, deep?: boolean, filter?: RegExp): {\n    keys(): string[];\n    <T>(id: string): T;\n  };\n};\n\n// First, initialize the Angular testing environment.\ngetTestBed().initTestEnvironment(\n  BrowserDynamicTestingModule,\n  platformBrowserDynamicTesting()\n);\n// Then we find all the tests.\nconst context = require.context('./', true, /\\.spec\\.ts$/);\n// And load the modules.\ncontext.keys().map(context);\n"
  },
  {
    "path": "tsconfig.app.json",
    "content": "{\n  \"extends\": \"./tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"./out-tsc/app\",\n    \"types\": []\n  },\n  \"files\": [\n    \"src/main.ts\",\n    \"src/polyfills.ts\"\n  ],\n  \"include\": [\n    \"src/**/*.d.ts\"\n  ]\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compileOnSave\": false,\n  \"compilerOptions\": {\n    \"baseUrl\": \"./\",\n    \"outDir\": \"./dist/out-tsc\",\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"downlevelIteration\": true,\n    \"experimentalDecorators\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"importHelpers\": true,\n    \"target\": \"es2015\",\n    \"lib\": [\n      \"es2018\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"fullTemplateTypeCheck\": true,\n    \"strictInjectionParameters\": true\n  }\n}\n"
  },
  {
    "path": "tsconfig.spec.json",
    "content": "{\n  \"extends\": \"./tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"./out-tsc/spec\",\n    \"types\": [\n      \"jasmine\",\n      \"node\"\n    ]\n  },\n  \"files\": [\n    \"src/test.ts\",\n    \"src/polyfills.ts\"\n  ],\n  \"include\": [\n    \"src/**/*.spec.ts\",\n    \"src/**/*.d.ts\"\n  ]\n}\n"
  },
  {
    "path": "tslint.json",
    "content": "{\n  \"extends\": \"tslint:recommended\",\n  \"rules\": {\n    \"align\": {\n      \"options\": [\n        \"parameters\",\n        \"statements\"\n      ]\n    },\n    \"array-type\": false,\n    \"arrow-return-shorthand\": true,\n    \"curly\": true,\n    \"deprecation\": {\n      \"severity\": \"warning\"\n    },\n    \"component-class-suffix\": true,\n    \"contextual-lifecycle\": true,\n    \"directive-class-suffix\": true,\n    \"directive-selector\": [\n      true,\n      \"attribute\",\n      \"app\",\n      \"camelCase\"\n    ],\n    \"component-selector\": [\n      true,\n      \"element\",\n      \"app\",\n      \"kebab-case\"\n    ],\n    \"eofline\": true,\n    \"import-blacklist\": [\n      true,\n      \"rxjs/Rx\"\n    ],\n    \"import-spacing\": true,\n    \"indent\": {\n      \"options\": [\n        \"spaces\"\n      ]\n    },\n    \"max-classes-per-file\": false,\n    \"max-line-length\": [\n      true,\n      140\n    ],\n    \"member-ordering\": [\n      true,\n      {\n        \"order\": [\n          \"static-field\",\n          \"instance-field\",\n          \"static-method\",\n          \"instance-method\"\n        ]\n      }\n    ],\n    \"no-console\": [\n      true,\n      \"debug\",\n      \"info\",\n      \"time\",\n      \"timeEnd\",\n      \"trace\"\n    ],\n    \"no-empty\": false,\n    \"no-inferrable-types\": [\n      true,\n      \"ignore-params\"\n    ],\n    \"no-non-null-assertion\": true,\n    \"no-redundant-jsdoc\": true,\n    \"no-switch-case-fall-through\": true,\n    \"no-var-requires\": false,\n    \"object-literal-key-quotes\": [\n      true,\n      \"as-needed\"\n    ],\n    \"quotemark\": [\n      true,\n      \"single\"\n    ],\n    \"semicolon\": {\n      \"options\": [\n        \"always\"\n      ]\n    },\n    \"space-before-function-paren\": {\n      \"options\": {\n        \"anonymous\": \"never\",\n        \"asyncArrow\": \"always\",\n        \"constructor\": \"never\",\n        \"method\": \"never\",\n        \"named\": \"never\"\n      }\n    },\n    \"typedef-whitespace\": {\n      \"options\": [\n        {\n          \"call-signature\": \"nospace\",\n          \"index-signature\": \"nospace\",\n          \"parameter\": \"nospace\",\n          \"property-declaration\": \"nospace\",\n          \"variable-declaration\": \"nospace\"\n        },\n        {\n          \"call-signature\": \"onespace\",\n          \"index-signature\": \"onespace\",\n          \"parameter\": \"onespace\",\n          \"property-declaration\": \"onespace\",\n          \"variable-declaration\": \"onespace\"\n        }\n      ]\n    },\n    \"variable-name\": {\n      \"options\": [\n        \"ban-keywords\",\n        \"check-format\",\n        \"allow-pascal-case\"\n      ]\n    },\n    \"whitespace\": {\n      \"options\": [\n        \"check-branch\",\n        \"check-decl\",\n        \"check-operator\",\n        \"check-separator\",\n        \"check-type\",\n        \"check-typecast\"\n      ]\n    },\n    \"no-conflicting-lifecycle\": true,\n    \"no-host-metadata-property\": true,\n    \"no-input-rename\": true,\n    \"no-inputs-metadata-property\": true,\n    \"no-output-native\": true,\n    \"no-output-on-prefix\": true,\n    \"no-output-rename\": true,\n    \"no-outputs-metadata-property\": true,\n    \"template-banana-in-box\": true,\n    \"template-no-negated-async\": true,\n    \"use-lifecycle-interface\": true,\n    \"use-pipe-transform-interface\": true\n  },\n  \"rulesDirectory\": [\n    \"codelyzer\"\n  ]\n}"
  }
]