Guard and update create service created

rohitazadtil · rohitazadtil · commit c19664b36c9b · 2018-01-17T22:24:22.000+05:30
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -28,6 +28,7 @@ import { ProductServiceService } from './ram/product/product-service.service';
 import { SearchFilterPipe } from './share/custome/filter.pipe';
 import { StarRatingComponent } from './share/star-rating-component/star-rating-component';
 import { CapitalizePipe } from './share/custome/capitalizefirst.pipe';
+import { ProductEditGuard } from './ram/product/product-guard.service';
 
 
 
@@ -58,7 +59,9 @@ import { CapitalizePipe } from './share/custome/capitalizefirst.pipe';
       { path: 'home', component: HomeComponent },
       { path: 'product', component: ProductListComponent },
       { path: 'product/:id', component: ProductDetailsComponent },
-      { path: 'product/:edit/:id', component: ProductAddEditComponent },
+      { path: 'product/:edit/:id',
+        canDeactivate : [ProductEditGuard],
+        component: ProductAddEditComponent },
       { path: 'sign-up', component: SignUpFormComponent },
       { path: 'client-register', component: RegisterClientComponent },
       { path: 'contact', component: ContactComponent },
@@ -70,7 +73,8 @@ import { CapitalizePipe } from './share/custome/capitalizefirst.pipe';
     FormsModule
   ],
   providers: [
-    ProductServiceService
+    ProductServiceService,
+    ProductEditGuard
   ],
   bootstrap: [AppComponent]
 })
diff --git a/src/app/ram/product/product-add-edit/product-add-edit.component.html b/src/app/ram/product/product-add-edit/product-add-edit.component.html
@@ -1,6 +1,6 @@
 <div class='panel panel-primary'>
     <div class='panel-heading'>
-        <span *ngIf="moviesDetails">Edit Movie {{moviesDetails.title | capitalizeFirst : true}} </span>
+        <span *ngIf="moviesDetails"> {{pageTitle | capitalizeFirst : true}} </span>
     </div>
     <div class='panel-body'>
         <div class="row">
@@ -151,16 +151,33 @@
                                 </span>
                             </div>
                         </div>
-                        <div class="form-group">
-                            <label class="col-md-2" for="">Tags:-</label>
-                            <div class="col-md-8">
-                                <input type="text" 
-                                id=""
-                                formControlName="tags" 
-                                placeholder="Tags"
-                                class="form-control" />
+                        
+                        <div formArrayName="tags">
+                            <div class="row">
+                                <button class="col-md-offset-1 col-md-1 btn btn-primary"
+                                    type="button"
+                                    (click)="addTag()">
+                                    Add Tag
+                                </button>
                             </div>
+                            <div class="form-group"
+                                *ngFor="let tag of tags.controls; let i=index">
+                                <label class="col-md-2" 
+                                    [attr.for]="i">Tags:-</label>
+                                <div class="col-md-8">
+                                    <input type="text" 
+                                    [id]="i"
+                                    [formControlName]="i" 
+                                    placeholder="Tags"
+                                    class="form-control" />
+                                </div>
+                            </div>
+
                         </div>
+                        
+                        
+
+
                         <div class="form-group">
                             <div class="col-md-8 col-md-offset-2">
                                 <button [disabled]='!movieForm.valid' class="btn btn-primary pull-right" type="submit"><i class='fa fa-save'></i> Save</button>
diff --git a/src/app/ram/product/product-add-edit/product-add-edit.component.ts b/src/app/ram/product/product-add-edit/product-add-edit.component.ts
@@ -9,6 +9,7 @@ import 'rxjs/add/observable/merge';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 
+import { IProduct } from '../products';
 import { ProductServiceService } from '../product-service.service';
 import { GenericValidatorForms } from '../../../share/custome/generic.validator.forms';
 import { NumberValidators } from '../../../share/custome/number.validators';
@@ -22,11 +23,11 @@ export class ProductAddEditComponent implements OnInit, AfterViewInit, OnDestroy
 
   @ViewChildren(FormControlName, { read: ElementRef }) formInputElements: ElementRef[];
 
-  pageTitle:string = 'Page Title ';
+  pageTitle:string = '';
   rank:number;
   imgwidth:number = 100;
   errorMessage: string;
-  moviesDetails:any[];
+  moviesDetails:IProduct;
   private sub:Subscription;
 
   movieForm:FormGroup;
@@ -35,6 +36,12 @@ export class ProductAddEditComponent implements OnInit, AfterViewInit, OnDestroy
   displayMessage: { [key: string]: string } = {};
   private validationMessages: { [key: string]: { [key: string]: string } };
   private genericValidator: GenericValidatorForms;
+
+  get tags(): FormArray {
+      return <FormArray>this.movieForm.get('tags');
+  }
+
+
   constructor(
     private _route: ActivatedRoute,
     private _router: Router,
@@ -103,7 +110,7 @@ export class ProductAddEditComponent implements OnInit, AfterViewInit, OnDestroy
       budget:['', Validators.required],
       worldwideGross:['', Validators.required],
       rating:['', NumberValidators.range(1, 5)],
-      tags:['']
+      tags: this._fb.array([]),
 
     })
 
@@ -138,11 +145,48 @@ export class ProductAddEditComponent implements OnInit, AfterViewInit, OnDestroy
     this._service.getProductDetail(id).subscribe(
           data => {
             console.log(data);
-            this.moviesDetails = data;
+            
+            //this.moviesDetails = data;
+            this.onMovieRetrieved(data);
           },
           error => this.errorMessage = <any>error);
   }
 
+  onMovieRetrieved(data):void{
+    console.log(data);
+    // here set to data 
+    if (this.movieForm) {
+        this.movieForm.reset();
+    }
+    // here set to data fill 
+    this.moviesDetails = data;
+    
+    if (this.moviesDetails.id === 0) {
+        this.pageTitle = 'Add Movies ';
+    } else {
+        this.pageTitle = `Edit Movies: ${this.moviesDetails.title}`;
+    }
+
+    // Update the data on the form
+    this.movieForm.patchValue({
+        title: this.moviesDetails.title,
+        distributor: this.moviesDetails.distributor,
+        directedBy: this.moviesDetails.directedBy,
+        producedBy: this.moviesDetails.producedBy,
+        storyBy: this.moviesDetails.storyBy,
+        starring: this.moviesDetails.starring,
+        releaseDate: this.moviesDetails.releaseDate,
+        runningTime: this.moviesDetails.runningTime,
+        budget: this.moviesDetails.budget,
+        worldwideGross: this.moviesDetails.worldwideGross,
+        rating: this.moviesDetails.rating
+    });
+    this.movieForm.setControl('tags', this._fb.array(this.moviesDetails.tags || []));
+  }
+
+  addTag(): void {
+      this.tags.push(new FormControl());
+  }
   onBack():void{
     this._router.navigate(['/product']);
   }
@@ -153,7 +197,29 @@ export class ProductAddEditComponent implements OnInit, AfterViewInit, OnDestroy
 
   formUpdate() :void{
     console.log('click to form update ');
-    console.log(this.movieForm);
+   // console.log(this.movieForm);
+    if (this.movieForm.dirty && this.movieForm.valid) {
+        // Copy the form values over the product object values
+        let movieFormValue = Object.assign({}, this.moviesDetails, this.movieForm.value);
+
+        console.log(movieFormValue);
+        this._service.saveDetailsData(movieFormValue)
+            .subscribe(
+                () => this.onSaveComplete(),
+                (error: any) => this.errorMessage = <any>error
+            );
+    }
+     else if (!this.movieForm.dirty) {
+        this.onSaveComplete();
+    }
+  }
+
+  onSaveComplete(): void {
+      console.log('save completed form call');
+      // Reset the form to clear the flags
+      this.movieForm.reset();
+      this._router.navigate(['/product']);
   }
 
+
 }
diff --git a/src/app/ram/product/product-guard.service.ts b/src/app/ram/product/product-guard.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Router, CanDeactivate } from '@angular/router';
+
+import { ProductAddEditComponent } from '../product/product-add-edit/product-add-edit.component';
+
+
+@Injectable()
+export  class ProductEditGuard implements CanDeactivate<ProductAddEditComponent> {
+
+    canDeactivate(component: ProductAddEditComponent): boolean {
+        if (component.movieForm.dirty) {
+            let title = component.movieForm.get('title').value || 'New Product';
+            return confirm(`Navigate away and lose all changes to ${title}?`);
+        }
+        return true;
+    }
+}
diff --git a/src/app/ram/product/product-service.service.ts b/src/app/ram/product/product-service.service.ts
@@ -30,17 +30,43 @@ export class ProductServiceService {
     if (id === 0) {
       // return Observable.of(this.initializeProduct());
       return Observable.create((observer: any) => {
-          observer.next(this.initializeProduct());
-          observer.complete();
+        observer.next(this.initializeProduct());
+        observer.complete();
       });
     };
-      const url = `${this.baseUrl}/${id}`;
-      return this.http.get(url)
+    const url = `${this.baseUrl}/${id}`;
+    return this.http.get(url)
       .map(this.extractData)
       .do(data => console.log('getProductDetail: ' + JSON.stringify(data)))
       .catch(this.handleError);
-    
-    
+
+
+  }
+
+  // data update save service here
+  saveDetailsData(product: IProduct): Observable<IProduct> {
+    let headers = new Headers({ 'Content-Type': 'application/json' });
+    let options = new RequestOptions({ headers: headers });
+
+    if (product.id === 0) {
+      return this.createList(product, options);
+    }
+    return this.updateList(product, options);
+  }
+
+  private createList(product: IProduct, options: RequestOptions): Observable<IProduct> {
+    product.id = undefined;
+    return this.http.post(this.baseUrl, product, options)
+      .map(this.extractData)
+      .do(data => console.log('createList: ' + JSON.stringify(data)))
+      .catch(this.handleError);
+  }
+  private updateList(product: IProduct, options: RequestOptions): Observable<IProduct> {
+    const url = `${this.baseUrl}/${product.id}`;
+    return this.http.put(url, product, options)
+      .map(() => product)
+      .do(data => console.log('updateList: ' + JSON.stringify(data)))
+      .catch(this.handleError);
   }
 
 
@@ -59,22 +85,22 @@ export class ProductServiceService {
   initializeProduct(): IProduct {
     // Return an initialized object
     return {
-      id:0,
+      id: 0,
       rank: null,
       title: null,
       distributor: null,
       tags: [''],
       worldwideGross: null,
       img: null,
-      rating : null,
-      directedBy :null,
-      producedBy:null,
-      storyBy:null,
-      starring:null,
-      releaseDate:null,
-      runningTime:null,
-      budget:null
+      rating: null,
+      directedBy: null,
+      producedBy: null,
+      storyBy: null,
+      starring: null,
+      releaseDate: null,
+      runningTime: null,
+      budget: null
     };
-}
+  }
 
 }
