modal pagination and details.service 2

Author: cbeldacap

oasp4js-sample/npm-debug.log.2104448695

@@ -30,9 +30,9 @@
 </div>
 
 <modal-dialog id="modal"
-  [hidden]=true
+  *ngIf="hideModalDialog"
   [modal]=true
   [TITLE]=modalHeader
   style="position:absolute; left: 0px; top: 0px; width:100%; height:100%;">
-  <tableDetails [parentTable]="selectedTable" (parentTableEvent)="selectedTable = $event" (resultEvent)="rowSelected($event)" [_commands]="_commands"></tableDetails>
+  <tableDetails [parentTable]="selectedTable" (closeWindowEvent)="hideModalDialog = $event" (resultEvent)="rowSelected($event)" [_commands]="_commands"></tableDetails>
 </modal-dialog>

oasp4js-sample/src/app/components/crud/view/Crud.component.html

@@ -32,14 +32,12 @@ export class CrudComponent{
 
   public sortIconState:boolean = false;
   public sortIconStyle = ["glyphicon glyphicon-chevron-down","glyphicon glyphicon-chevron-down","glyphicon glyphicon-chevron-down"];
-  public hideModalDialog = true;
+  public hideModalDialog = false;
 
   arr:Command[];
 
   public myState;
-
   public _commands:Command[];
-
   public modalHeader:string;
 
   constructor(
@@ -64,7 +62,8 @@ export class CrudComponent{
   }
 
   openEditModal(){
-    document.getElementById("modal").hidden = !document.getElementById("modal").hidden;
+    this.hideModalDialog = true;
+    //document.getElementById("modal").hidden = !document.getElementById("modal").hidden;
   }
 
   openEdition(){

oasp4js-sample/src/app/components/crud/view/Crud.component.ts

@@ -10,14 +10,14 @@ import {GridTableComponent} from '../../../oasp/oasp-ui/grid-table/view/Grid-tab
   selector:'tableDetails',
   templateUrl:'app/components/details/view/Details.component.html',
   inputs:['parentTable', '_commands'],
-  outputs:['resultEvent', 'parentTableEvent'],
   providers:[DetailsService],
+  outputs:['resultEvent', 'closeWindowEvent'],
   directives:[PaginationComponent, GridTableComponent],
 })
 
 export class DetailsComponent implements OnChanges{
   resultEvent:EventEmitter<Table> = new EventEmitter<Table>();
-  parentTableEvent = new EventEmitter<Table>();
+  closeWindowEvent = new EventEmitter();
 
   constructor(private detailsService:DetailsService){}
 
@@ -55,7 +55,7 @@ export class DetailsComponent implements OnChanges{
   }
 
   clickedRow(valor){
-    if(this.selectedCommand === valor){
+    if(!valor){
       this.resetValues();
     } else {
       this.selectedCommand = valor;
@@ -81,14 +81,18 @@ export class DetailsComponent implements OnChanges{
 
   cancel(){
     this.resultEvent.emit(this.parentTable);
-    document.getElementById("modal").hidden = !document.getElementById("modal").hidden;
+    this.closeWindowEvent.emit(false);
   }
 
   submit(){
     this.parentTable.commands = this.detailsService.commands;
     this.resultEvent.emit(this.parentTable);
+<<<<<<< HEAD
     this.detailsService.resetCommands();
     document.getElementById("modal").hidden = !document.getElementById("modal").hidden;
+=======
+    this.closeWindowEvent.emit(false);
+>>>>>>> 0ce25674b04094f8acc27cd440d4e31fc3b69785
   }
 
 }

oasp4js-sample/src/app/components/details/view/Details.component.ts

@@ -10,5 +10,6 @@ <h3 class="modal-title">{{title}}</h3>
 	  <div class="modal-body">
 			<ng-content></ng-content>
 	  </div>
+
 	</div>
 </div>

oasp4js-sample/src/app/oasp/oasp-ui/modal-dialog/modal-dialog.component.html

@@ -1,4 +1,4 @@
-import {Component,Input} from '@angular/core';
+import {Component,Input, EventEmitter} from '@angular/core';
 import {ButtonBarComponent} from '../button-bar/button-bar.component'
 import {DetailsComponent} from '../../../components/details/view/Details.component'
 import {Table} from '../../../models/table/Table.model'
@@ -23,6 +23,7 @@ export class ModalDialogComponent {
   defaultButtonDefs:Object;
   defaultTitle:String = "OASP dialog title";
 
+
   public nameLogin = "login";
   public nameDetails = "tableDetails"
 

oasp4js-sample/src/app/oasp/oasp-ui/modal-dialog/modal-dialog.component.ts

@@ -21,14 +21,15 @@ export class PaginationComponent implements OnChanges{
   paginationList = new EventEmitter();
 
   ngOnChanges(){
-    if(this.rowsPerPage > this.list.length){
-      this.rowsPerPage = this.list.length;
-    }
-
-    this.showList = this.list.slice(this.rowsPerPage * (this.currentPage - 1), this.rowsPerPage * (this.currentPage - 1) + this.rowsPerPage);
+    if(this.list){
+      if(this.rowsPerPage > this.list.length){
+        this.rowsPerPage = this.list.length;
+      }
 
-    this.numberPages = Math.ceil(this.list.length / this.rowsPerPage);
-    this.paginationList.emit(this.showList)
+      this.showList = this.list.slice(this.rowsPerPage * (this.currentPage - 1), this.rowsPerPage * (this.currentPage - 1) + this.rowsPerPage);
+      this.numberPages = Math.ceil(this.list.length / this.rowsPerPage);
+      this.paginationList.emit(this.showList)
+    }
   }
 
   changePage(page: number, view: number){