Add warning - modal for deleting claim, fixed selected claims number in claims

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@42928 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/claims/claims.component.html

@@ -15,7 +15,7 @@
   <div *ngIf="selected.length>0">
     <p>You have selected {{selected.length}} claim(s)</p>
   </div>
-  <button class="btn btn-default" (click)="selectAll()">Select All</button> <button class="btn btn-default" (click)="deselectAll()">Deselect All</button> <button class="btn btn-default" (click)="delete()">Delete</button>
+  <button class="btn btn-default" (click)="selectAll()">Select All</button> <button class="btn btn-default" (click)="deselectAll()">Deselect All</button> <button class="btn btn-default" (click)="confirmOpen()">Delete</button>
 </div>
 <div *ngIf="resultsNum">
   <paging  [currentPage]="page" [totalResults]="resultsNum"  [navigateTo]="navigateTo" [size]="size" [params]="getParameters()" > </paging>
@@ -89,3 +89,5 @@
   </tbody>
 </table>
 </div>
+<alert (alertOutput)="confirmClose($event)">
+</alert>

src/app/claims/claims.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {JSONP_PROVIDERS}  from '@angular/http';
 import {Observable}       from 'rxjs/Observable';
 import { RouteParams, RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
@@ -9,10 +9,11 @@ import {ClaimTextFilterPipe} from '../pipes/claimTextFilter.pipe';
 import {ClaimTypeFilterPipe} from '../pipes/claimTypeFilter.pipe';
 import {PagingFormatter} from '../common/pagingFormatter.component';
 import {ClaimEntityFormatter} from '../common/claimEntityFormatter.component';
+import {Alert} from '../common/modal/alert';
 
 @Component({
     selector: 'claims',
-    directives: [...ROUTER_DIRECTIVES, PagingFormatter, ClaimEntityFormatter],
+    directives: [...ROUTER_DIRECTIVES, PagingFormatter, ClaimEntityFormatter, Alert],
     templateUrl: 'src/app/claims/claims.component.html',
     providers:[ ClaimsService, JSONP_PROVIDERS],
     pipes: [ClaimTextFilterPipe, ClaimTypeFilterPipe]
@@ -70,6 +71,8 @@ export class ClaimsComponent {
 
   //params for pagingFormatter to use when navigate to page
   params;
+  @ViewChild(Alert) alert;
+
 
   getClaims () {
     this.selectAllClaims = false;
@@ -272,29 +275,54 @@ export class ClaimsComponent {
    }
    selectAll(){
      this.selectAllClaims = true;
+     this.selected = this.claims;
    }
    deselectAll(){
      this.selectAllClaims = false;
+     this.selected = [];
    }
 
+     confirmOpen(){
+       this.alert.cancelButton = true;
+       this.alert.okButton = true;
+       this.alert.alertTitle = "Delete "+this.selected.length+" claim(s)";
+       this.alert.message = this.selected.length+" claims will be deleted. Do you want to proceed? ";
+       this.alert.okButtonText = "Yes";
+       this.alert.cancelButtonText = "No";
+       this.alert.open();
+     }
+      confirmClose(data){
+       this.delete();
+     }
    delete(){
      for (var i = 0; i < this.selected.length; i++){
         var id  =this.selected[i].id;
         var selected  =this.selected[i].id;
         console.warn("Deleting claim with id:"+id);
-        // this._claimService.deleteClaimById(id);
-        this._claimService.deleteClaimById(id,selected).subscribe(
-           res =>  {
-             console.info('Delete response'+res.code );
-             console.warn("Deleted claim with id:"+ id);
-             var index:number =this.claims.indexOf(selected);
-             console.info('Index'+index );
-             this.selected.splice(i, 1);
-             if (index > -1) {
-                   this.claims.splice(index, 1);
-            }
-          });
+         this.deleteById(id);
+         //TODO for multiple concurrent
         }
-
     }
+    deleteById(id:string){
+
+         console.warn("Deleting claim with id:"+id);
+         // this._claimService.deleteClaimById(id);
+         this._claimService.deleteClaimById(id).subscribe(
+            res =>  {
+              console.info('Delete response'+res.code );
+              console.warn("Deleted claim with id:"+ id);
+              //remove this claim from the
+             let newClaims=this.claims;
+             for (var _i = 0; _i < this.claims.length; _i++) {
+                 let claim = this.claims[_i];
+                 if(claim['id'] == id){
+                       newClaims.splice(_i, 1);
+                 }
+              }
+              //TODO should call getClaims???
+              this.claims = newClaims;
+
+           });
+         }
+
 }

src/app/common/modal/alert.ts

@@ -0,0 +1,111 @@
+import {Component, ViewEncapsulation, ComponentRef, DynamicComponentLoader,ElementRef, Input, EventEmitter, Output} from '@angular/core';
+import {Open} from './open.component';
+
+@Component({
+  selector: 'alert',
+  template: `
+  <div class="modal fade" [open]="!isOpen" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+    <div class="modal-dialog" role="">
+      <div class="modal-content">
+        <div class="modal-header" [hidden]=!alertHeader>
+          <button type="button" class="close" data-dismiss="modal" (click)='cancel()' aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal-title text-center" id="myModalLabel">{{alertTitle}}</h4>
+        </div>
+        <div class="modal-body">
+          <div [hidden]=!alertMessage>
+          {{message}}
+          </div>
+        </div>
+        <div class="modal-footer" [hidden]=!alertFooter>
+        <span [hidden]=!okButton >
+          <button class="btn btn-primary" (click)="ok()">{{okButtonText}}</button>
+          </span>
+          <span [hidden]=!cancelButton>
+          <button class="btn btn-primary" (click)="cancel()">{{cancelButtonText}}</button>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  `,
+  providers: [],
+  directives: [Open],
+  encapsulation: ViewEncapsulation.None,
+  pipes: []
+})
+/**
+  * API to an open alert window.
+  */
+export class Alert{
+  /**
+     * Caption for the title.
+     */
+  public alertTitle:string;
+  /**
+     * Describes if the alert contains Ok Button.
+     * The default Ok button will close the alert and emit the callback.
+     * Defaults to true.
+     */
+  public okButton:boolean = true;
+  /**
+     * Caption for the OK button.
+     * Default: Ok
+     */
+  public okButtonText:string= 'Ok';
+  /**
+     * Describes if the alert contains cancel Button.
+     * The default Cancelbutton will close the alert.
+     * Defaults to true.
+     */
+  public cancelButton:boolean = true;
+  /**
+     * Caption for the Cancel button.
+     * Default: Cancel
+     */
+  public cancelButtonText:string = 'Cancel';
+  /**
+     * if the alertMessage is true it will show the contentString inside alert body.
+     */
+  public alertMessage:boolean = true;
+  /**
+     * Some message/content can be set in message which will be shown in alert body.
+     */
+  public message:string;
+  /**
+    * if the value is true alert footer will be visible or else it will be hidden.
+    */
+  public alertFooter:boolean= true;
+  /**
+    * shows alert header if the value is true.
+    */
+  public alertHeader:boolean = true;
+  /**
+    * if the value is true alert will be visible or else it will be hidden.
+    */
+  public isOpen:boolean=false;
+  /**
+    * Emitted when a ok button was clicked
+    * or when Ok method is called.
+    */
+  @Output() public alertOutput:EventEmitter<any> = new EventEmitter();
+  constructor(public dcl:DynamicComponentLoader, public _elementRef: ElementRef){}
+  /**
+       * Opens a alert window creating backdrop.
+       */
+  open(){
+    this.isOpen= true;
+  }
+  /**
+     *  ok method closes the modal and emits modalOutput.
+     */
+  ok(){
+    this.isOpen = false;
+    this.alertOutput.emit(true);
+  }
+  /**
+     *  cancel method closes the moda.
+     */
+  cancel(){
+    this.isOpen = false;
+  }
+}

src/app/common/modal/open.component.ts

@@ -0,0 +1,55 @@
+import {Directive, Input, HostBinding} from '@angular/core';
+
+// todo: add animate
+// todo: add init and on change
+@Directive({selector: '[open]'})
+export class Open {
+  @HostBinding('style.display')
+  private display:string;
+  @HostBinding('class.in')
+  @HostBinding('attr.aria-expanded')
+  private isExpanded:boolean = true;
+
+  @Input()
+  private set open(value:boolean) {
+    this.isExpanded = value;
+    this.toggle();
+  }
+
+  private get open():boolean {
+    return this.isExpanded;
+  }
+
+  constructor() {
+  }
+  init() {
+    this.isExpanded = false;
+    this.display = 'none';
+  }
+  toggle() {
+    if (this.isExpanded) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  hide() {
+    this.isExpanded = false;
+    this.display = 'none';
+    if (typeof document !== 'undefined') {
+      let backDrop = document.getElementsByClassName("modal-backdrop");
+      if(backDrop.length>0){
+        document.body.removeChild(backDrop[0]);
+      }
+    }
+  }
+
+  show() {
+    let backDrop = document.createElement('div');
+    backDrop.className="modal-backdrop fade in";
+    document.body.appendChild(backDrop);
+    this.isExpanded = true;
+    this.display = 'block';
+  }
+}

src/app/services/claims.service.ts

@@ -50,7 +50,7 @@ export class ClaimsService {
      return this.getClaimRequest(size,page,url);
   }
 
-  deleteClaimById(claimId:string, claim:any):any{
+  deleteClaimById(claimId:string):any{
     console.warn('Trying to delete claim with id : '+claimId);
     let url = this.baseUrl +"claims/"+claimId;
     console.warn('Delete url: '+url);