Skip to content

Commit 6c929e8

Browse files
author
Nicolas Romanetti
committed
Upgrade to Angular 5, Material 5 and PrimeNg 5.
Use the new HttpClient
1 parent 67d1a40 commit 6c929e8

14 files changed

+176
-163
lines changed

‎.travis.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ install:
2929
- rm web/src/app/app.module.ts web/src/app/app.component.* web/src/styles.css
3030
- mvn -Pdb,metadata,gen generate-sources
3131
- cd web
32-
- npm install --save @angular/material@2.0.0-beta.8 @angular/cdk@2.0.0-beta.8
32+
- npm install --save @angular/material @angular/cdk
3333
- npm install --save @angular/animations
34-
- npm install --save primeng@4.1.3
34+
- npm install --save primeng@5.0.2
3535
- npm install --save font-awesome
3636
- cd ..
3737
script:

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ to **reverse your relational database schema** and **generate** the Angular + Sp
77
to access your database content. The generated code covers much more areas than a simple Hello World app (search,
88
pagination, validation, auto-complete, etc.)
99

10-
To generate an application from our sample database, follow the instructions from the [quickstart][] folder.
10+
**To generate an application from our sample database, follow the instructions from the [quickstart][] folder.**
1111

1212
Take a look at the generated code for yourself. Out of this
1313
[sample SQL schema](https://github.com/jaxio/celerio-angular-quickstart/blob/master/quickstart-conf/01-create.sql)
@@ -55,7 +55,7 @@ Here is the folder organization:
5555
The generated Angular CRUD web app uses the following technologies/frameworks:
5656

5757
* [Angular Cli](http://cli.angular.io/) a command line interface for Angular
58-
* [Angular 4.2](http://angular.io/) web framework: we try to always use the most recent version
58+
* [Angular 5](http://angular.io/) web framework: we try to always use the most recent version
5959
* [TypeScript](https://www.typescriptlang.org/): much easier than JavaScript...
6060
* [PrimeNG](http://primefaces.org/primeng/): Angular components library, we leverage file upload, auto-complete, calendar, tri-state checkbox, server-side pagination, etc.
6161
* [Angular Material](https://material.angular.io/): Material Design components for Angular apps

‎pack-angular/celerio/pack-angular/web/src/app/app.component.spec.ts.p.vm‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
$output.file("web/src/app/app.component.spec.ts")##
22
import { TestBed, async } from '@angular/core/testing';
33
import { NO_ERRORS_SCHEMA } from '@angular/core';
4-
import { Observable } from 'rxjs/Observable';
4+
import { Observable } from 'rxjs/Rx';
55

66
import { AppComponent } from './app.component';
77
import { AuthService } from "./service/auth.service";

‎pack-angular/celerio/pack-angular/web/src/app/app.component.ts.p.vm‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -107,8 +107,8 @@ export class AppComponent implements OnInit {
107107
{label: "Source code", icon: 'fa-github-alt', url: "https://github.com/jaxio/celerio-angular-quickstart"},
108108
{label: "Celerio Documentation", icon: 'fa-external-link', url: "http://www.jaxio.com/documentation/celerio/"},
109109
{label: "Angular Cli", icon: 'fa-external-link', url: "https://cli.angular.io/"},
110-
{label: "Angular 4", icon: 'fa-external-link', url: "https://angular.io/"},
111-
{label: "Material 2", icon: 'fa-external-link', url: "https://material.angular.io/"},
110+
{label: "Angular 5", icon: 'fa-external-link', url: "https://angular.io/"},
111+
{label: "Material 5", icon: 'fa-external-link', url: "https://material.angular.io/"},
112112
{label: "PrimeNG Showcase", icon: 'fa-external-link', url: "http://www.primefaces.org/primeng"},
113113
{label: "TypeScript", icon: 'fa-external-link', url: "https://www.typescriptlang.org/"},
114114
{label: "Spring Boot", icon: 'fa-external-link', url: "http://projects.spring.io/spring-boot/"},
@@ -158,12 +158,4 @@ export class AppComponent implements OnInit {
158158
}
159159
);
160160
}
161-
162-
// sample method from angular doc
163-
private handleError (error: any) {
164-
let errMsg = (error.message) ? error.message :
165-
error.status ? `Status: ${d}{error.status} - Text: ${d}{error.statusText}` : 'Server error';
166-
console.error(errMsg); // log to console instead
167-
return Observable.throw(errMsg);
168-
}
169161
}

‎pack-angular/celerio/pack-angular/web/src/app/app.module.ts.p.vm‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { BrowserModule } from '@angular/platform-browser';
33
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
44
import { NgModule } from '@angular/core';
55
import { FormsModule } from '@angular/forms';
6-
import { HttpModule } from '@angular/http';
6+
import { HttpClientModule } from '@angular/common/http';
77
import { RouterModule } from '@angular/router';
8-
import { MaterialModule, MdDatepickerModule, MdNativeDateModule } from '@angular/material';
8+
import { MatDatepickerModule, MatNativeDateModule, MatDialogModule, MatCardModule, MatIconModule, MatSelectModule, MatTabsModule, MatInputModule, MatButtonModule } from '@angular/material';
99
import { ConfirmDialogModule, FileUploadModule, PanelModule, GrowlModule, MenubarModule, DialogModule, ButtonModule, AutoCompleteModule, DataTableModule, SharedModule, DropdownModule,PickListModule,CheckboxModule,TriStateCheckboxModule, InputTextModule,InputTextareaModule,CalendarModule,PasswordModule,TabViewModule } from 'primeng/primeng';
1010
import { ConfirmationService } from 'primeng/primeng';
1111
import { AppComponent } from './app.component';
@@ -45,12 +45,18 @@ import { ${entity.model.type}CompleteComponent } from './entities/$entity.model.
4545
BrowserModule,
4646
BrowserAnimationsModule,
4747
FormsModule,
48-
HttpModule,
48+
HttpClientModule,
4949

5050
// angular material,
51-
MaterialModule,
52-
MdDatepickerModule,
53-
MdNativeDateModule,
51+
MatDatepickerModule,
52+
MatNativeDateModule,
53+
MatDialogModule,
54+
MatCardModule,
55+
MatIconModule,
56+
MatSelectModule,
57+
MatTabsModule,
58+
MatInputModule,
59+
MatButtonModule,
5460

5561
// primeng
5662
ConfirmDialogModule,

‎pack-angular/celerio/pack-angular/web/src/app/entities/entity-detail.component.html.e.vm‎

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -28,30 +28,30 @@ $output.file("web/src/app/entities/${entity.model.var}/${entity.model.var}-detai
2828
#macro(mderror $attribute)
2929

3030
#if($attribute.isRequired())
31-
<md-error *ngIf="!${attribute.var}.valid && ${attribute.var}.dirty && ${attribute.var}.errors['required']">
31+
<mat-error *ngIf="!${attribute.var}.valid && ${attribute.var}.dirty && ${attribute.var}.errors['required']">
3232
$attribute.labels.label is required.
33-
</md-error>
33+
</mat-error>
3434
#end
3535
#if($attribute.columnConfig.hasMin() && $attribute.isString())
36-
<md-error *ngIf="!${attribute.var}.valid && ${attribute.var}.dirty && ${attribute.var}.errors['minlength']">
36+
<mat-error *ngIf="!${attribute.var}.valid && ${attribute.var}.dirty && ${attribute.var}.errors['minlength']">
3737
$attribute.labels.label must have at least $attribute.columnConfig.min characters.
38-
</md-error>
38+
</mat-error>
3939
#end
4040
#if($attribute.isEmail())
41-
<md-error *ngIf="!${attribute.var}.valid && ${attribute.var}.dirty && ${attribute.var}.errors['validateEmail']">
41+
<mat-error *ngIf="!${attribute.var}.valid && ${attribute.var}.dirty && ${attribute.var}.errors['validateEmail']">
4242
$attribute.labels.label is invalid. Expecting a valid email address.
43-
</md-error>
43+
</mat-error>
4444
#end
4545
#if($attribute.isUrl())
46-
<md-error *ngIf="!${attribute.var}.valid && ${attribute.var}.dirty && ${attribute.var}.errors['pattern']">
46+
<mat-error *ngIf="!${attribute.var}.valid && ${attribute.var}.dirty && ${attribute.var}.errors['pattern']">
4747
$attribute.labels.label is invalid. Expecting a valid URL.
48-
</md-error>
48+
</mat-error>
4949
#end
5050
#end
5151
## -- [/MACROS]
52-
<md-card *ngIf="$entity.model.var" ngForm #${entity.model.var}Form="ngForm">
53-
<md-card-title>$entity.model.type Details</md-card-title>
54-
<md-card-content>
52+
<mat-card *ngIf="$entity.model.var" ngForm #${entity.model.var}Form="ngForm">
53+
<mat-card-title>$entity.model.type Details</mat-card-title>
54+
<mat-card-content>
5555
<div class="ui-g alignlabels">
5656
## ---------------------------------------------------------
5757
#foreach($attr in $entity.formAttributes.flatUp.list)
@@ -68,55 +68,55 @@ $output.file("web/src/app/entities/${entity.model.var}/${entity.model.var}-detai
6868
<div class="ui-g-12 ui-md-2 ui-lg-1"><label for="$attr.var" #requiredclass($attr)>$attr.labels.label</label></div>
6969
#if($attr.springMvc.isPassword())
7070
<div class="ui-g-12 ui-md-10 ui-lg-5">
71-
<md-input-container style="width: 90%">
72-
<input mdInput type="password" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) name="$attr.var" ${p}$attr.var="ngModel"/>
71+
<mat-input-container style="width: 90%">
72+
<input matInput type="password" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) name="$attr.var" ${p}$attr.var="ngModel"/>
7373
#mderror($attr)
74-
</md-input-container>
74+
</mat-input-container>
7575
#elseif($attr.isHtml())
7676
todo html
7777
#elseif($attr.isTextArea())
7878
<div class="ui-g-12 ui-md-10 ui-lg-5">
79-
<md-input-container style="width: 90%">
80-
<textarea mdInput id="$attr.var" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) autoResize="true" name="$attr.var" ${p}$attr.var="ngModel"></textarea>
79+
<mat-input-container style="width: 90%">
80+
<textarea matInput id="$attr.var" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) autoResize="true" name="$attr.var" ${p}$attr.var="ngModel"></textarea>
8181
#mderror($attr)
82-
</md-input-container>
82+
</mat-input-container>
8383
#elseif($attr.isEnum())
8484
<div class="ui-g-12 ui-md-10 ui-lg-5">
85-
<md-select [(ngModel)]="$valuePath" name="$attr.var" ${p}$attr.var="ngModel" style="width: 90%">
86-
<md-option *ngFor="let ${attr.var}Option of ${attr.var}Options" [value]="${attr.var}Option.value">{{ ${attr.var}Option.label }}</md-option>
87-
</md-select>
85+
<mat-select [(ngModel)]="$valuePath" name="$attr.var" ${p}$attr.var="ngModel" style="width: 90%">
86+
<mat-option *ngFor="let ${attr.var}Option of ${attr.var}Options" [value]="${attr.var}Option.value">{{ ${attr.var}Option.label }}</mat-option>
87+
</mat-select>
8888
#elseif($attr.isEmail())
8989
<div class="ui-g-12 ui-md-10 ui-lg-5">
90-
<md-input-container style="width: 90%">
91-
<input mdInput id="$attr.var" type="email" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) validateEmail name="$attr.var" ${p}$attr.var="ngModel"/>
90+
<mat-input-container style="width: 90%">
91+
<input matInput id="$attr.var" type="email" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) validateEmail name="$attr.var" ${p}$attr.var="ngModel"/>
9292
#mderror($attr)
93-
</md-input-container>
93+
</mat-input-container>
9494
#elseif($attr.isUrl())
9595
<div class="ui-g-12 ui-md-10 ui-lg-5">
96-
<md-input-container style="width: 90%">
97-
<input mdInput id="$attr.var" type="url" pattern="^http.*" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) name="$attr.var" ${p}$attr.var="ngModel"/>
96+
<mat-input-container style="width: 90%">
97+
<input matInput id="$attr.var" type="url" pattern="^http.*" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) name="$attr.var" ${p}$attr.var="ngModel"/>
9898
#mderror($attr)
99-
</md-input-container>
99+
</mat-input-container>
100100
#elseif($attr.isString())
101101
<div class="ui-g-12 ui-md-10 ui-lg-5">
102-
<md-input-container style="width: 90%">
103-
<input mdInput id="$attr.var" type="text" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) name="$attr.var" ${p}$attr.var="ngModel"/>
102+
<mat-input-container style="width: 90%">
103+
<input matInput id="$attr.var" type="text" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) name="$attr.var" ${p}$attr.var="ngModel"/>
104104
#mderror($attr)
105-
</md-input-container>
105+
</mat-input-container>
106106
#elseif($attr.isNumeric())
107107
<div class="ui-g-12 ui-md-10 ui-lg-5">
108-
<md-input-container style="width: 90%">
109-
<input mdInput id="$attr.var" type="number" [(ngModel)]="$valuePath" #required($attr) name="$attr.var" ${p}$attr.var="ngModel" />
108+
<mat-input-container style="width: 90%">
109+
<input matInput id="$attr.var" type="number" [(ngModel)]="$valuePath" #required($attr) name="$attr.var" ${p}$attr.var="ngModel" />
110110
#mderror($attr)
111-
</md-input-container>
111+
</mat-input-container>
112112
#elseif($attr.isDate() && !$attr.isVersion())
113113
#if($attr.isJavaUtilOnlyDate() || $attr.isLocalDate())
114114
<div class="ui-g-12 ui-md-10 ui-lg-5">
115-
<md-input-container>
116-
<input mdInput id="$attr.var" [mdDatepicker]="${attr.var}Picker" [(ngModel)]="$valuePath" #required($attr) name="$attr.var" ${p}$attr.var="ngModel">
117-
<button mdSuffix [mdDatepickerToggle]="${attr.var}Picker"></button>
118-
</md-input-container>
119-
<md-datepicker ${pound}${attr.var}Picker></md-datepicker>
115+
<mat-input-container>
116+
<input matInput id="$attr.var" [matDatepicker]="${attr.var}Picker" [(ngModel)]="$valuePath" #required($attr) name="$attr.var" ${p}$attr.var="ngModel">
117+
<mat-datepicker-toggle matSuffix [for]="${attr.var}Picker"></mat-datepicker-toggle>
118+
</mat-input-container>
119+
<mat-datepicker ${pound}${attr.var}Picker></mat-datepicker>
120120
#elseif($attr.isLocalDateTime() || $attr.isInstant())
121121
<div class="ui-g-12 ui-md-10 ui-lg-5">
122122
<p-calendar [(ngModel)]="$valuePath" dateFormat="yy-mm-dd" showTime="true" [ngModelOptions]="{standalone: true}"></p-calendar>
@@ -142,55 +142,55 @@ $output.file("web/src/app/entities/${entity.model.var}/${entity.model.var}-detai
142142
</p>
143143
#else
144144
<div class="ui-g-12 ui-md-10 ui-lg-5">
145-
<md-input-container style="width: 90%">
146-
<input mdInput id="$attr.var" type="text" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) name="$attr.var" ${p}$attr.var="ngModel"/>
145+
<mat-input-container style="width: 90%">
146+
<input matInput id="$attr.var" type="text" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) name="$attr.var" ${p}$attr.var="ngModel"/>
147147
#mderror($attr)
148-
</md-input-container>
148+
</mat-input-container>
149149
#end
150150
</div>
151151
#end ##---------- [/NON VERSION]
152152
#end ## foreach(....
153153
## ---------------------------------------------------------
154154
</div>
155-
</md-card-content>
156-
<md-card-actions>
157-
<button md-raised-button *ngIf="sub" (click)="onCancel()"><md-icon>cancel</md-icon>Cancel</button>
158-
<button md-raised-button (click)="onSave()" [disabled]="!${entity.model.var}Form.form.valid"><md-icon>save</md-icon>Save</button>
159-
</md-card-actions>
160-
</md-card>
155+
</mat-card-content>
156+
<mat-card-actions>
157+
<button mat-raised-button *ngIf="sub" (click)="onCancel()"><mat-icon>cancel</mat-icon>Cancel</button>
158+
<button mat-raised-button (click)="onSave()" [disabled]="!${entity.model.var}Form.form.valid"><mat-icon>save</mat-icon>Save</button>
159+
</mat-card-actions>
160+
</mat-card>
161161
##
162162
## TABS FOR RELATIONS
163163
##
164164
#if($entity.inverseOneToOne.flatUp.size > 0 || $entity.oneToMany.flatUp.size > 0 || $entity.manyToMany.flatUp.size > 0)
165165
<br/>
166-
<md-card *ngIf="$entity.model.var && ${entity.model.var}.$identifiableProperty.var">
167-
<md-card-subtitle>$entity.model.type db relations</md-card-subtitle>
168-
<md-card-content>
169-
<md-tab-group>
166+
<mat-card *ngIf="$entity.model.var && ${entity.model.var}.$identifiableProperty.var">
167+
<mat-card-subtitle>$entity.model.type db relations</mat-card-subtitle>
168+
<mat-card-content>
169+
<mat-tab-group>
170170
#end
171171
#foreach ($relation in $entity.inverseOneToOne.flatUp.list)
172-
<md-tab label="$relation.to.varsUp">
172+
<mat-tab label="$relation.to.varsUp">
173173
<${relation.toEntity.model.var}-list [$relation.from.var]="${entity.model.var}" sub="true"></${relation.toEntity.model.var}-list>
174-
</md-tab>
174+
</mat-tab>
175175
#end
176176
#foreach ($relation in $entity.oneToMany.flatUp.list)
177-
<md-tab label="$relation.to.varsUp">
177+
<mat-tab label="$relation.to.varsUp">
178178
<${relation.toEntity.model.var}-list *ngIf="show$relation.to.varsUp" [$relation.from.var]="$entity.model.var" sub="true" [header]="'$relation.to.varsUp of this $entity.model.var'" (onAddNewClicked)="show$relation.to.varsUp = false"></${relation.toEntity.model.var}-list>
179179
<${relation.toEntity.model.var}-detail *ngIf="!show$relation.to.varsUp" [$relation.from.var]="$entity.model.var" sub="true" (onSaveClicked)="show$relation.to.varsUp = true" (onCancelClicked)="show$relation.to.varsUp = true"></${relation.toEntity.model.var}-detail>
180-
</md-tab>
180+
</mat-tab>
181181
#end
182182
#foreach ($relation in $entity.manyToMany.flatUp.list)
183-
<md-tab label="$relation.to.varsUp">
183+
<mat-tab label="$relation.to.varsUp">
184184
<p-pickList [source]="source$relation.to.varsUp" [target]="${entity.model.var}.$relation.to.vars" sourceHeader="Available" targetHeader="Selected" [responsive]="true">
185185
<ng-template let-$relation.to.var pTemplate="item">
186186
#foreach($attr in $relation.toEntity.printerAttributes.flatUp.list){{ ${relation.to.var}.${attr.var} }} #end
187187
</ng-template>
188188
</p-pickList>
189-
</md-tab>
189+
</mat-tab>
190190
#end
191191

192192
#if($entity.inverseOneToOne.flatUp.size > 0 || $entity.oneToMany.flatUp.size > 0 || $entity.manyToMany.flatUp.size > 0)
193-
</md-tab-group>
194-
</md-card-content>
195-
</md-card>
193+
</mat-tab-group>
194+
</mat-card-content>
195+
</mat-card>
196196
#end

0 commit comments

Comments
 (0)