Skip to content
This repository was archived by the owner on Nov 19, 2021. It is now read-only.

Commit 0ce2567

Browse files
author
Garcia Marin
committed
closable modal
1 parent d62b414 commit 0ce2567

File tree

6 files changed

+51
-59
lines changed

6 files changed

+51
-59
lines changed

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

+33-43
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,37 @@
1-
<filter-panel (filterValues) = "searchFilters($event)">
2-
<label> Number </label>
3-
<input type ="number" class="form-control">
4-
<label> State </label>
5-
<input type ="text" class="form-control">
6-
<label> Waiter </label>
7-
<input type ="text" class="form-control">
8-
</filter-panel>
1+
<div>
2+
<filter-panel (filterValues) = "searchFilters($event)">
3+
<label> Number </label>
4+
<input type ="number" class="form-control">
5+
<label> State </label>
6+
<input type ="text" class="form-control">
7+
<label> Waiter </label>
8+
<input type ="text" class="form-control">
9+
</filter-panel>
910

10-
<grid-table
11-
[headers] ="headers"
12-
[attributeNames] = "attributeNames"
13-
[dataInput] = "showTables"
14-
(objSelected) = "rowSelected($event)">
15-
</grid-table>
11+
<grid-table
12+
[headers] ="headers"
13+
[attributeNames] = "attributeNames"
14+
[dataInput] = "showTables"
15+
(objSelected) = "rowSelected($event)">
16+
</grid-table>
1617

17-
<div style="text-align:center">
18-
<button type="button" class="btn btn-pagination" data-toggle="modal" [disabled] = "myState === -1" data-target = "#myModal">Edit</button>
19-
<button type="button" class="btn btn-pagination" (click)="reserve()" [disabled] = "myState === 3 || myState === 2 || myState === -1">Reserve</button>
20-
<button type="button" class="btn btn-pagination" (click)="cancelReservation()" [disabled] = "myState === 0 || myState === 1 || myState === 2 || myState === -1">Cancel Reservation</button>
21-
<button type="button" class="btn btn-pagination" (click)="occupy()" [disabled] = "myState === 2 || myState === 0 || myState === 1 || myState === -1">Occupy</button>
22-
<button type="button" class="btn btn-pagination" (click)="free()" [disabled] = "myState === 1 || myState === -1">Free</button>
23-
24-
<div class="container">
25-
<div class="modal" id="myModal" role="dialog">
26-
<div class="modal-dialog modal-lm">
27-
<div class="modal-content">
28-
<div class="modal-header">
29-
<button type="button" class="close" data-dismiss="modal">&times;</button>
30-
<h3 class="modal-title" style="float:left;">Details for Table #{{selectedTable.number}}</h3>
31-
</div>
32-
<div class="modal-body">
33-
<tableDetails [parentTable]="selectedTable" (parentTableEvent)="selectedTable = $event" (resultEvent)="rowSelected($event)" [_commands]="_commands"></tableDetails>
34-
</div>
35-
</div>
36-
</div>
37-
</div>
38-
</div>
39-
</div>
18+
<div style="text-align:center">
19+
<button type="button" class="btn btn-pagination" [disabled] = "myState === -1" data-toggle="modal" data-target="prueba" (click)="openEditModal()">Edit</button>
20+
<button type="button" class="btn btn-pagination" (click)="reserve()" [disabled] = "myState === 3 || myState === 2 || myState === -1">Reserve</button>
21+
<button type="button" class="btn btn-pagination" (click)="cancelReservation()" [disabled] = "myState === 0 || myState === 1 || myState === 2 || myState === -1">Cancel Reservation</button>
22+
<button type="button" class="btn btn-pagination" (click)="occupy()" [disabled] = "myState === 2 || myState === 0 || myState === 1 || myState === -1">Occupy</button>
23+
<button type="button" class="btn btn-pagination" (click)="free()" [disabled] = "myState === 1 || myState === -1">Free</button>
24+
</div>
4025

41-
<div style="text-align:right">
42-
<pagination
43-
[list] = "tables"
44-
[rowsPerPage] = "tablesPerPage"
45-
(paginationList) = "pagination($event)">
46-
</pagination>
26+
<div style="text-align:right">
27+
<pagination [list] = "tables" [rowsPerPage] = "tablesPerPage" (paginationList) = "pagination($event)"></pagination>
28+
</div>
4729
</div>
30+
31+
<modal-dialog id="modal"
32+
*ngIf="hideModalDialog"
33+
[modal]=true
34+
[TITLE]=modalHeader
35+
style="position:absolute; left: 0px; top: 0px; width:100%; height:100%;">
36+
<tableDetails [parentTable]="selectedTable" (closeWindowEvent)="hideModalDialog = $event" (resultEvent)="rowSelected($event)" [_commands]="_commands"></tableDetails>
37+
</modal-dialog>

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,12 @@ export class CrudComponent{
3232

3333
public sortIconState:boolean = false;
3434
public sortIconStyle = ["glyphicon glyphicon-chevron-down","glyphicon glyphicon-chevron-down","glyphicon glyphicon-chevron-down"];
35-
public hideModalDialog = true;
35+
public hideModalDialog = false;
3636

3737
arr:Command[];
3838

3939
public myState;
40-
4140
public _commands:Command[];
42-
4341
public modalHeader:string;
4442

4543
constructor(
@@ -64,7 +62,8 @@ export class CrudComponent{
6462
}
6563

6664
openEditModal(){
67-
document.getElementById("modal").hidden = !document.getElementById("modal").hidden;
65+
this.hideModalDialog = true;
66+
//document.getElementById("modal").hidden = !document.getElementById("modal").hidden;
6867
}
6968

7069
openEdition(){

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ import { GridTableComponent } from '../../../oasp/oasp-ui/grid-table/view/Grid-t
1010
selector:'tableDetails',
1111
templateUrl:'app/components/details/view/Details.component.html',
1212
inputs:['parentTable', '_commands'],
13-
outputs:['resultEvent', 'parentTableEvent'],
13+
outputs:['resultEvent', 'closeWindowEvent'],
1414
directives:[PaginationComponent, GridTableComponent],
1515
})
1616

1717
export class DetailsComponent {
1818
resultEvent:EventEmitter<Table> = new EventEmitter<Table>();
19-
parentTableEvent = new EventEmitter<Table>();
19+
closeWindowEvent = new EventEmitter();
2020

2121
public _commands;
2222
public headers: string[] = ["Number","Title", "Status", "Price", "Comment"];
@@ -88,13 +88,13 @@ export class DetailsComponent {
8888
cancel(){
8989
this._commands = this.parentTable.commands;
9090
this.resultEvent.emit(this.parentTable);
91-
document.getElementById("modal").hidden = !document.getElementById("modal").hidden;
91+
this.closeWindowEvent.emit(false);
9292
}
9393

9494
submit(){
9595
this.parentTable.commands = this._commands;
9696
this.resultEvent.emit(this.parentTable);
97-
document.getElementById("modal").hidden = !document.getElementById("modal").hidden;
97+
this.closeWindowEvent.emit(false);
9898
}
9999

100100
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,6 @@ <h3 class="modal-title">{{title}}</h3>
1010
<div class="modal-body">
1111
<ng-content></ng-content>
1212
</div>
13+
1314
</div>
1415
</div>

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component,Input} from '@angular/core';
1+
import {Component,Input, EventEmitter} from '@angular/core';
22
import {ButtonBarComponent} from '../button-bar/button-bar.component'
33
import {DetailsComponent} from '../../../components/details/view/Details.component'
44
import {Table} from '../../../models/table/Table.model'
@@ -23,6 +23,7 @@ export class ModalDialogComponent {
2323
defaultButtonDefs:Object;
2424
defaultTitle:String = "OASP dialog title";
2525

26+
2627
public nameLogin = "login";
2728
public nameDetails = "tableDetails"
2829

‎oasp4js-sample/src/app/oasp/oasp-ui/table-pagination/Pagination.component.ts

+8-7
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,15 @@ export class PaginationComponent implements OnChanges{
2121
paginationList = new EventEmitter();
2222

2323
ngOnChanges(){
24-
if(this.rowsPerPage > this.list.length){
25-
this.rowsPerPage = this.list.length;
26-
}
27-
28-
this.showList = this.list.slice(this.rowsPerPage * (this.currentPage - 1), this.rowsPerPage * (this.currentPage - 1) + this.rowsPerPage);
24+
if(this.list){
25+
if(this.rowsPerPage > this.list.length){
26+
this.rowsPerPage = this.list.length;
27+
}
2928

30-
this.numberPages = Math.ceil(this.list.length / this.rowsPerPage);
31-
this.paginationList.emit(this.showList)
29+
this.showList = this.list.slice(this.rowsPerPage * (this.currentPage - 1), this.rowsPerPage * (this.currentPage - 1) + this.rowsPerPage);
30+
this.numberPages = Math.ceil(this.list.length / this.rowsPerPage);
31+
this.paginationList.emit(this.showList)
32+
}
3233
}
3334

3435
changePage(page: number, view: number){

0 commit comments

Comments
 (0)