add veterinarians components (list/add/edit) close spring-petclinic#4

src/app/vets/vet-add/vet-add.component.html

@@ -1,6 +1,6 @@
 <!--
   ~ /*
-  ~  * Copyright 2016-2017 the original author or authors.
+  ~  * Copyright 2016-2018 the original author or authors.
   ~  *
   ~  * Licensed under the Apache License, Version 2.0 (the "License");
   ~  * you may not use this file except in compliance with the License.
@@ -16,6 +16,50 @@
   ~  */
   -->
 
-<p>
-  vet-add works!
-</p>
+<div class="container-fluid">
+  <div class="container xd-container">
+    <h2>New Veterinarian</h2>
+    <form id="vet" class="form-horizontal" (ngSubmit)="onSubmit(vetForm.value)" #vetForm="ngForm">
+      <div class="form-group" hidden="true">
+        <input type="text" hidden="true" class="form-control" id="id" [(ngModel)]="vet.id" name="id"/>
+      </div>
+      <div class="form-group has-feedback" [class.has-success]="firstName.dirty && firstName.valid" [class.has-error]="firstName.dirty &&  !firstName.valid">
+        <label for="firstName" class="col-sm-2 control-label">First Name</label>
+        <div class="col-sm-10">
+          <input type="text" class="form-control" id="firstName" [(ngModel)]="vet.firstName" minlength="2" required name="firstName" #firstName="ngModel"/>
+          <span class="glyphicon form-control-feedback" [class.glyphicon-ok]="firstName.valid" [class.glyphicon-remove]="!firstName.valid" aria-hidden="true"></span>
+          <span class="help-block" *ngIf="firstName.dirty && firstName.hasError('required')">First name is required</span>
+          <span class="help-block" *ngIf="firstName.dirty && firstName.hasError('minlength')">First name must be at least 2 characters long</span>
+        </div>
+      </div>
+      <div class="form-group has-feedback" [class.has-success]="lastName.dirty && lastName.valid" [class.has-error]="lastName.dirty && !lastName.valid">
+        <label for="lastName" class="col-sm-2 control-label">Last Name</label>
+        <div class="col-sm-10">
+          <input type="text" class="form-control" id="lastName" [(ngModel)]="vet.lastName" name="lastName" minlength="2" required #lastName="ngModel"/>
+          <span class="glyphicon form-control-feedback" [class.glyphicon-ok]="lastName.valid" [class.glyphicon-remove]="!lastName.valid" aria-hidden="true"></span>
+          <span class="help-block" *ngIf="lastName.dirty && lastName.hasError('required')">Last name is required</span>
+          <span class="help-block" *ngIf="lastName.dirty && lastName.hasError('minlength')">Last name must be at least 2 characters long</span>
+        </div>
+      </div>
+      <div class="control-group">
+        <div class="form-group ">
+          <label for="specialties" class="col-sm-2 control-label">Type </label>
+          <div class="col-sm-10">
+            <select id="specialties" name="specialties" class="form-control" [(ngModel)]="selected_specialty">
+              <option *ngFor="let spec of specialties_list" [ngValue]="spec">
+                {{ spec.name }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="col-sm-offset-2 col-sm-10">
+          <br/>
+          <button class="btn btn-default" type="button" (click)="gotoVetList()">< Back</button>
+          <button class="btn btn-default" type="submit">Save Vet</button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>

src/app/vets/vet-add/vet-add.component.ts

@@ -1,6 +1,6 @@
 /*
  *
- *  * Copyright 2016-2017 the original author or authors.
+ *  * Copyright 2016-2018 the original author or authors.
  *  *
  *  * Licensed under the Apache License, Version 2.0 (the "License");
  *  * you may not use this file except in compliance with the License.
@@ -21,18 +21,52 @@
  */
 
 import {Component, OnInit} from '@angular/core';
+import {Specialty} from '../../specialties/specialty';
+import {SpecialtyService} from 'app/specialties/specialty.service';
+import {Vet} from '../vet';
+import {Router} from '@angular/router';
+import {VetService} from '../vet.service';
 
 @Component({
   selector: 'app-vet-add',
   templateUrl: './vet-add.component.html',
   styleUrls: ['./vet-add.component.css']
 })
 export class VetAddComponent implements OnInit {
+  vet: Vet;
+  specialties_list: Specialty[];
+  selected_specialty: Specialty;
+  errorMessage: string;
 
-  constructor() {
+  constructor(private specialtyService: SpecialtyService, private vetService: VetService, private router: Router) {
+    this.vet = <Vet>{};
+    this.selected_specialty = <Specialty>{};
+    this.specialties_list = [];
   }
 
   ngOnInit() {
+    this.specialtyService.getSpecialties().subscribe(
+      specialties => this.specialties_list = specialties,
+      error => this.errorMessage = <any>error
+    );
   }
 
+  onSubmit(vet: Vet){
+    vet.id = null;
+    vet.specialties = [];
+    if (this.selected_specialty.id !== undefined) {
+      vet.specialties.push(this.selected_specialty);
+    }
+    this.vetService.addVet(vet).subscribe(
+      new_vet => {
+        this.vet = new_vet;
+        this.gotoVetList();
+      },
+      error => this.errorMessage = <any>error
+    );
+  }
+
+  gotoVetList() {
+    this.router.navigate(['/vets']);
+  }
 }

src/app/vets/vet-edit/vet-edit.component.html

@@ -1,6 +1,6 @@
 <!--
   ~ /*
-  ~  * Copyright 2016-2017 the original author or authors.
+  ~  * Copyright 2016-2018 the original author or authors.
   ~  *
   ~  * Licensed under the Apache License, Version 2.0 (the "License");
   ~  * you may not use this file except in compliance with the License.
@@ -16,6 +16,50 @@
   ~  */
   -->
 
-<p>
-  vet-edit works!
-</p>
+<div class="container-fluid">
+  <div class="container xd-container">
+    <h2>Edit Veterinarian</h2>
+    <form id="vet_form" class="form-horizontal" (ngSubmit)="onSubmit(vetEditForm.value)" [formGroup]="vetEditForm">
+      <div class="form-group" hidden="true">
+        <input type="text" hidden="true" class="form-control" id="id" name="id" formControlName="id"/>
+      </div>
+      <div class="form-group has-feedback" [class.has-success]="firstNameCtrl.dirty && firstNameCtrl.valid" [class.has-error]="firstNameCtrl.dirty &&  !firstNameCtrl.valid">
+        <label for="firstName" class="col-sm-2 control-label">First Name</label>
+        <div class="col-sm-10">
+          <input type="text" class="form-control" id="firstName" name="firstName" formControlName="firstName"/>
+          <span class="glyphicon form-control-feedback" [class.glyphicon-ok]="firstNameCtrl.valid" [class.glyphicon-remove]="!firstNameCtrl.valid" aria-hidden="true"></span>
+          <span class="help-block" *ngIf="firstNameCtrl.dirty && firstNameCtrl.hasError('required')">First name is required</span>
+          <span class="help-block" *ngIf="firstNameCtrl.dirty && firstNameCtrl.hasError('minlength')">First name must be at least 2 characters long</span>
+        </div>
+      </div>
+      <div class="form-group has-feedback" [class.has-success]="lastNameCtrl.dirty && lastNameCtrl.valid" [class.has-error]="lastNameCtrl.dirty && !lastNameCtrl.valid">
+        <label for="lastName" class="col-sm-2 control-label">Last Name</label>
+        <div class="col-sm-10">
+          <input type="text" class="form-control" id="lastName" name="lastName" formControlName="lastName"/>
+          <span class="glyphicon form-control-feedback" [class.glyphicon-ok]="lastNameCtrl.valid" [class.glyphicon-remove]="!lastNameCtrl.valid" aria-hidden="true"></span>
+          <span class="help-block" *ngIf="lastNameCtrl.dirty && lastNameCtrl.hasError('required')">Last name is required</span>
+          <span class="help-block" *ngIf="lastNameCtrl.dirty && lastNameCtrl.hasError('minlength')">Last name must be at least 2 characters long</span>
+        </div>
+      </div>
+      <div class="control-group">
+        <div class="form-group ">
+          <label for="spec" class="col-sm-2 control-label">Specialties</label>
+            <mat-form-field class="col-sm-10">
+              <mat-select  [compareWith]="compareSpecFn" id="spec" name="specialties" formControlName="specialties" multiple>
+                <mat-option *ngFor="let specialty of spec_list" [value]="specialty">
+                  {{ specialty.name }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="col-sm-offset-2 col-sm-10">
+          <br/>
+          <button class="btn btn-default" type="button" (click)="gotoVetList()">< Back</button>
+          <button class="btn btn-default" type="submit" [disabled]="vetEditForm.invalid">Save Vet</button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>

src/app/vets/vet-edit/vet-edit.component.ts

@@ -1,6 +1,6 @@
 /*
  *
- *  * Copyright 2016-2017 the original author or authors.
+ *  * Copyright 2016-2018 the original author or authors.
  *  *
  *  * Licensed under the Apache License, Version 2.0 (the "License");
  *  * you may not use this file except in compliance with the License.
@@ -21,18 +21,85 @@
  */
 
 import {Component, OnInit} from '@angular/core';
+import {Vet} from '../vet';
+import {VetService} from '../vet.service';
+import {ActivatedRoute, Router} from '@angular/router';
+import {SpecialtyService} from '../../specialties/specialty.service';
+import {Specialty} from '../../specialties/specialty';
+import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 
 @Component({
   selector: 'app-vet-edit',
   templateUrl: './vet-edit.component.html',
   styleUrls: ['./vet-edit.component.css']
 })
 export class VetEditComponent implements OnInit {
+  vetEditForm: FormGroup;
+  idCtrl: FormControl;
+  firstNameCtrl: FormControl;
+  lastNameCtrl: FormControl;
+  specialtiesCtrl: FormControl;
+  vet: Vet;
+  spec_list: Specialty[];
+  errorMessage: string;
 
-  constructor() {
+  constructor(private formBuilder: FormBuilder, private specialtyService: SpecialtyService,
+              private vetService: VetService, private route: ActivatedRoute, private router: Router) {
+    this.vet = <Vet>{};
+    this.spec_list = <Specialty[]>[];
+    this.buildForm();
+  }
+
+  buildForm() {
+    this.idCtrl = new FormControl(null);
+    this.firstNameCtrl = new FormControl('', [Validators.required, Validators.minLength(2)]);
+    this.lastNameCtrl = new FormControl('', [Validators.required, Validators.minLength(2)]);
+    this.specialtiesCtrl = new FormControl(null);
+    this.vetEditForm = this.formBuilder.group({
+      id: this.idCtrl,
+      firstName: this.firstNameCtrl,
+      lastName: this.lastNameCtrl,
+      specialties: this.specialtiesCtrl
+    });
+  }
+
+  compareSpecFn(c1: Specialty, c2: Specialty): boolean {
+    return c1 && c2 ? c1.id === c2.id : c1 === c2;
+  }
+
+  initFormValues() {
+    this.idCtrl.setValue(this.vet.id);
+    this.firstNameCtrl.setValue(this.vet.firstName);
+    this.lastNameCtrl.setValue(this.vet.lastName);
+    this.specialtiesCtrl.setValue(this.vet.specialties);
   }
 
   ngOnInit() {
+    // we use SpecResolver and VetResolver (get data before init component)
+    this.spec_list = this.route.snapshot.data['specs'];
+    this.vet = this.route.snapshot.data['vet'];
+    this.vet.specialties = this.route.snapshot.data['vet'].specialties;
+    this.initFormValues();
+  }
+
+  onSubmit(vet: Vet){
+    const that = this;
+    this.vetService.updateVet(vet.id.toString(), vet).subscribe(
+      get_result,
+      error => this.errorMessage = <any> error);
+
+      function get_result(update_status) {
+      if (update_status.status === 204) {
+        console.log('update success');
+        that.gotoVetList();
+      } else {
+        return console.log('update failed');
+      }
+    }
+  }
+
+  gotoVetList() {
+    this.router.navigate(['/vets']);
   }
 
 }

src/app/vets/vet-list/vet-list.component.ts

@@ -23,6 +23,8 @@
 import {Component, OnInit} from '@angular/core';
 import {Vet} from '../vet';
 import {VetService} from '../vet.service';
+import {Router} from '@angular/router';
+import {Pet} from '../../pets/pet';
 
 @Component({
   selector: 'app-vet-list',
@@ -32,8 +34,9 @@ import {VetService} from '../vet.service';
 export class VetListComponent implements OnInit {
   vets: Vet[];
   errorMessage: string;
+  response_status: number;
 
-  constructor(private vetService: VetService) {
+  constructor(private vetService: VetService, private router: Router) {
     this.vets = [];
   }
 
@@ -43,12 +46,26 @@ export class VetListComponent implements OnInit {
       error => this.errorMessage = <any> error);
   }
 
+  deleteVet(vet: Vet) {
+    this.vetService.deleteVet(vet.id.toString()).subscribe(
+      response => {
+        this.response_status = response;
+        if (this.response_status === 204) {
+          this.vets = this.vets.filter(current_item => !(current_item.id === vet.id));
+        }
+      },
+      error => this.errorMessage = <any> error);
+  }
+
   gotoHome() {
-    // TODO not completed
+    this.router.navigate(['/welcome']);
   }
 
   addVet() {
-    // TODO not completed
+    this.router.navigate(['/vets/add']);
   }
 
+  editVet(vet: Vet) {
+    this.router.navigate(['/vets', vet.id, 'edit']);
+  }
 }