Added Create Movie Functionality

After/src/Api/clientsrc/app/app.component.ts

@@ -15,10 +15,11 @@ export class AppComponent implements OnInit {
 
   ngOnInit(): void {
     this.menuItems = [
-      {label: 'Home', icon: 'fa-home', routerLink: ['/'] },
-      {label: 'Add Customer', icon: 'fa-tasks', routerLink: ['/custAdd'] },
-      {label: 'List Customers', icon: 'fa-users', routerLink: ['/custList'] },
-      {label: 'List Movies', icon: 'fa-ticket', routerLink: ['/movieList'] }
+      { label: 'Home', icon: 'fa-home', routerLink: ['/'] },
+      { label: 'Add Customer', icon: 'fa-tasks', routerLink: ['/custAdd'] },
+      { label: 'List Customers', icon: 'fa-users', routerLink: ['/custList'] },
+      { label: 'Add Movie', icon: 'fa-tasks', routerLink: ['/movieAdd'] },
+      { label: 'List Movies', icon: 'fa-ticket', routerLink: ['/movieList'] }
     ];
   }
 }

After/src/Api/clientsrc/app/app.module.ts

@@ -13,6 +13,7 @@ import { CustomerService } from './customer.service';
 import { DataTableModule, SharedModule, ButtonModule, DialogModule, PanelModule, MenuModule } from 'primeng/primeng';
 import { CustomerFormComponent } from './customer-form/customer-form.component';
 import { CustomerEditComponent } from './customer-edit/customer-edit.component';
+import { MovieFormComponent } from './movie-form/movie-form.component';
 import { MovieListComponent } from './movie-list/movie-list.component';
 import { MovieService } from './movie.service';
 import { WipService } from './utils/wip.service';
@@ -23,6 +24,7 @@ import { WipService } from './utils/wip.service';
     CustomerListComponent,
     CustomerFormComponent,
     CustomerEditComponent,
+    MovieFormComponent,
     MovieListComponent
   ],
   imports: [
@@ -34,6 +36,7 @@ import { WipService } from './utils/wip.service';
       { path: 'welcome', component: AppComponent },
       { path: 'custList', component: CustomerListComponent },
       { path: 'movieList', component: MovieListComponent },
+      { path: 'movieAdd', component: MovieFormComponent },
       { path: 'custAdd', component: CustomerFormComponent },
       { path: 'custList/:id', component: CustomerEditComponent },
       { path: '', redirectTo: '/', pathMatch: 'full' },

After/src/Api/clientsrc/app/customer.service.ts

@@ -20,11 +20,9 @@ export class CustomerService {
   }
   createCustomer(customer: CreateCustomerDto): Observable<CustomerResult>  {
     return this.http.post<CustomerResult>('api/customers', customer);
-
   }
   updateCustomer(id: string, customer: CreateCustomerDto): Observable<CustomerResult>  {
     return this.http.put<CustomerResult>('api/customers/' + id, customer);
-
   }
   uniqueEmail(email: string): Observable<CustomerResult>  {
     const input = new CreateCustomerDto();

After/src/Api/clientsrc/app/movie-form/movie-form.component.css

@@ -0,0 +1 @@
+

After/src/Api/clientsrc/app/movie-form/movie-form.component.html

@@ -0,0 +1,46 @@
+<p-panel header="Add Movie">
+  <form novalidate (ngSubmit)="saveMovie()" [formGroup]="movieForm">
+    <div class="ui-g">
+      <label class="ui-g-2" for="name">Name: </label>
+      <!-- <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span> -->
+      <input class="ui-g-4" type="text" pInputText id="name" placeholder="Name (required)" formControlName="name" />
+      <span class="ui-g-6" *ngIf="(movieForm.get('name').touched ||
+        movieForm.get('name').dirty) &&
+        movieForm.get('name').errors">
+        <span *ngIf="movieForm.get('name').errors.required">
+          Please enter your name.
+        </span>
+        <span *ngIf="movieForm.get('name').errors.minlength">
+          The first name must be longer than 3 characters.
+        </span>
+      </span>
+    </div>
+    <div class="ui-g">
+      <label class="ui-g-2" for="LicensingModel">Licensing Model: </label>
+      <!-- <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span> -->
+      <input class="ui-g-4" type="text" pInputText id="LicensingModel" placeholder="Licensing Model" formControlName="LicensingModel" />
+      <span class="ui-g-6" *ngIf="(movieForm.get('LicensingModel').touched ||
+        movieForm.get('LicensingModel').dirty) &&
+        movieForm.get('LicensingModel').errors">
+        <span *ngIf="movieForm.get('LicensingModel').errors.required">
+          Please enter a licensing model.
+        </span>
+        <span *ngIf="movieForm.get('LicensingModel').errors.minlength">
+          The first name must be longer than 1 characters.
+        </span>
+      </span>
+    </div>
+    <div class="ui-g">
+      <button class="ui-g-2" type="submit" pButton icon="fa-check" label="Save" [disabled]='!movieForm.valid'></button>
+      <button class="ui-g-2" type="submit" pButton icon="fa-reset" label="Reset"></button>
+    </div>
+    <p-panel header="Debug Information">
+      <br>Dirty: {{ movieForm.dirty }}
+      <br>Touched: {{ movieForm.touched }}
+      <br>Valid: {{ movieForm.valid }}
+      <br>Value: {{ movieForm.value | json }}
+      <br>Licensing Model Errors: {{ movieForm.get('LicensingModel').errors | json }}
+    </p-panel>
+  </form>
+  <br>{{ message | json }}
+</p-panel>

After/src/Api/clientsrc/app/movie-form/movie-form.component.ts

@@ -0,0 +1,108 @@
+//originally copied from customer-form.component.ts
+
+import { Component, OnInit, AfterViewInit, OnDestroy, ViewChildren, ElementRef } from '@angular/core';
+import { Router } from '@angular/router';
+import { CreateMovieDto, MovieResult, Movie } from '../movie-result';
+import { MovieService } from '../movie.service';
+import { FormBuilder, FormGroup, FormControl, FormArray, Validators, FormControlName } from '@angular/forms';
+import { ValidateUniqueEmail } from '../utils/validateUniqueEmail';
+import { Subscription } from 'rxjs/Subscription';
+import { Envelope } from '../utils/Envelope';
+import { CommonValidators } from '../utils/common.validators';
+import { WipService } from '../utils/wip.service';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/observable/fromEvent';
+import 'rxjs/add/observable/merge';
+
+
+
+@Component({
+  selector: 'app-movie-form',
+  templateUrl: './movie-form.component.html',
+  styleUrls: ['./movie-form.component.css']
+})
+export class MovieFormComponent implements OnInit, AfterViewInit {
+  @ViewChildren(FormControlName, { read: ElementRef }) formInputElements: ElementRef[];
+
+  currMovie: CreateMovieDto;
+  movieForm: FormGroup;
+  message: string;
+  private sub: Subscription;
+  private formKey = 'MovieForm';
+
+
+  constructor(private router: Router, private fb: FormBuilder,
+    private movServ: MovieService, private wipServ: WipService) {
+    this.wipServ.StoreageEvents.subscribe(
+      value => { console.log(value); }
+    );
+
+  }
+
+  ngOnInit() {
+
+    this.movieForm = this.fb.group({
+      name: ['', [Validators.required,
+      Validators.minLength(3),
+      Validators.maxLength(50)]],
+      // re-use the create logic in value objects for validation See CommonValidators Class
+      LicensingModel: [0, [Validators.required,
+        Validators.minLength(1),
+      Validators.maxLength(2)]]
+    });
+
+    const oldForm = this.wipServ.loadWipEntity(this.formKey);
+    if (oldForm) {
+      this.movieForm.patchValue(oldForm);
+
+    }
+  }
+  ngAfterViewInit(): void {
+    // Watch for the blur event from any input element on the form.
+    const controlBlurs: Observable<any>[] = this.formInputElements
+      .map((formControl: ElementRef) => Observable.fromEvent(formControl.nativeElement, 'blur'));
+
+    // Merge the blur event observable with the valueChanges observable
+    Observable.merge(this.movieForm.valueChanges, ...controlBlurs).debounceTime(800).subscribe(value => {
+      this.wipServ.storeWipEntity(this.movieForm.value, this.formKey, 'Movie',
+        'Movie form data', this.router.routerState.snapshot.url);
+    });
+  }
+
+  saveMovie(mov: CreateMovieDto) {
+    if (this.movieForm.dirty && this.movieForm.valid) {
+      // Copy the form values over the movie object values
+      // this is the traditional way to do it.
+      // Maybe using the domain objects is what we really want
+      const c = Object.assign({}, mov, this.movieForm.value);
+      this.movServ.createMovie(c)
+        .subscribe(
+          (data) => {
+            console.log("Success " + c);
+            console.log(data);
+            this.message = 'Save complete.';
+            this.onSaveComplete();
+          },
+          (error: any) => {
+            console.log("Failure " + c);
+            console.log(error);
+            this.message = 'Error saving.';
+            this.onSaveComplete();
+          }
+        );
+    } else if (!this.movieForm.dirty) {
+      this.onSaveComplete();
+    }
+
+  }
+  onSaveComplete(): void {
+    this.movieForm.reset();
+    this.wipServ.removeWipEntity(this.formKey);
+  }
+  clearFormAndWip(): void {
+    this.movieForm.reset();
+    this.wipServ.removeWipEntity(this.formKey);
+  }
+}
+

After/src/Api/clientsrc/app/movie-list/movie-list.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { MovieDto } from '../movie-dtos';
 import { MovieService } from '../movie.service';
-import { Envelope } from '../utils/Envelope';
+import { MovieResult, Movie, CreateMovieDto } from '../movie-result';
 
 @Component({
   selector: 'app-movie-list',
@@ -10,7 +9,9 @@ import { Envelope } from '../utils/Envelope';
 })
 export class MovieListComponent implements OnInit {
 
-  movies: Envelope<MovieDto[]>;
+  movies: MovieResult;
+  newMovie: CreateMovieDto;
+  displayDialog: boolean;
 
   constructor(private movieServ: MovieService) { }
 
@@ -22,4 +23,9 @@ export class MovieListComponent implements OnInit {
     );
   }
 
+  addSimple() {
+    this.newMovie = new CreateMovieDto();
+    this.displayDialog = true;
+  }
+
 }

After/src/Api/clientsrc/app/movie-result.ts

@@ -0,0 +1,19 @@
+
+
+export interface Movie {
+  id: string;
+  name: string;
+  LicensingModel: number;
+}
+
+export interface MovieResult {
+  result: Movie[];
+  errorMessage?: any;
+  timeGenerated: Date;
+}
+
+export class CreateMovieDto {
+  public name: string;
+  public LicensingModel: number;
+}
+

After/src/Api/clientsrc/app/movie.service.ts

@@ -1,37 +1,30 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MovieResult, Movie, CreateMovieDto } from './movie-result';
 import { Observable } from 'rxjs/Observable';
-import { Envelope } from './utils/Envelope';
-import { MovieDto } from './movie-dtos';
-
-@Injectable()
-export class MovieService {
-
-  constructor(private http: HttpClient) { }
-
-
-  getMovies(): Observable<Envelope<MovieDto[]>> {
-    return this.http.get<Envelope<MovieDto[]>>('api/Movies');
-  }
-  // getCustomer(id: string): Observable<Envelope<Customer>> {
-  //   return this.http.get<Envelope<Customer>>('api/customers/' + id);
-  // }
-  // createCustomer(customer: CreateCustomerDto): Observable<CustomerResult>  {
-  //   return this.http.post<CustomerResult>('api/customers', customer);
-
-  // }
-  // updateCustomer(id: string, customer: CreateCustomerDto): Observable<CustomerResult>  {
-  //   return this.http.put<CustomerResult>('api/customers/' + id, customer);
-
-  // }
-  // uniqueEmail(email: string): Observable<CustomerResult>  {
-  //   const input = new CreateCustomerDto();
-  //   input.email = email;
-  //   return this.http.post<CustomerResult>('api/customers/email', input); 
-  // }
-  private handleError(error: any) {
-    console.log(error);
-    return Observable.throw(error.json());
-  }
-
-}
+import { Envelope } from './utils/Envelope';
+
+@Injectable()
+export class MovieService {
+
+  constructor(private http: HttpClient) { }
+
+
+  getMovies(): Observable<MovieResult> {
+    return this.http.get<MovieResult>('api/movies');
+  }
+  getMovie(id: string): Observable<Envelope<Movie>> {
+    return this.http.get<Envelope<Movie>>('api/movies/' + id);
+  }
+  createMovie(movie: CreateMovieDto): Observable<MovieResult>  {
+    return this.http.post<MovieResult>('api/movies', movie);
+  }
+  updateMovie(id: string, movie: CreateMovieDto): Observable<MovieResult>  {
+    return this.http.put<MovieResult>('api/movies/' + id, movie);
+  }
+  private handleError(error: any) {
+    console.log(error);
+    return Observable.throw(error.json());
+  }
+
+}