Skip to content

Commit d8bc7ae

Browse files
author
Nicolas Romanetti
committed
cosmetic: more material 2 use
1 parent edb9ca4 commit d8bc7ae

File tree

3 files changed

+98
-64
lines changed

3 files changed

+98
-64
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { NgModule } from '@angular/core';
55
import { FormsModule } from '@angular/forms';
66
import { HttpModule } from '@angular/http';
77
import { RouterModule } from '@angular/router';
8-
import { MaterialModule } from '@angular/material';
8+
import { MaterialModule, MdDatepickerModule, MdNativeDateModule } 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';
@@ -49,6 +49,8 @@ import { ${entity.model.type}CompleteComponent } from './entities/$entity.model.
4949

5050
// angular material,
5151
MaterialModule,
52+
MdDatepickerModule,
53+
MdNativeDateModule,
5254

5355
// primeng
5456
ConfirmDialogModule,

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

Lines changed: 91 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,51 @@ $output.file("web/src/app/entities/${entity.model.var}/${entity.model.var}-detai
22
## -- [MACRO]
33
#macro(xToOneEdit $relation)
44
<div class="ui-grid-row">
5-
<div class="ui-grid-col-2"><label for="$relation.to.var">${relation.labels.label}#{if}($relation.isMandatory())*#{end}</label></div>
5+
<div class="ui-grid-col-2"><label for="$relation.to.var">${relation.labels.label}#{if}($relation.isMandatory()) *#{end}</label></div>
66
<div class="ui-grid-col-4">
77
<${relation.toEntity.model.var}-auto-complete [(ngModel)]="${entity.model.var}.${relation.to.var}" id="${relation.to.var}" name="${relation.to.var}" [disabled]="sub"></${relation.toEntity.model.var}-auto-complete>
88
</div>
9-
<div class="ui-grid-col-1" *ngIf="!sub">
10-
<button pButton id="goto${relation.to.varUp}" type="button" (click)="goto${relation.to.varUp}()" *ngIf="${entity.model.var}.${relation.to.var}" icon="fa-pencil" label="Edit"></button>
9+
<div class="ui-grid-col-1">
10+
<button pButton id="goto${relation.to.varUp}" type="button" (click)="goto${relation.to.varUp}()" *ngIf="!sub && ${entity.model.var}.${relation.to.var}" icon="fa-pencil" label="Edit"></button>
1111
</div>
12-
<div class="ui-grid-col-1" *ngIf="!sub">
13-
<button pButton id="clear${relation.to.varUp}" type="button" (click)="clear${relation.to.varUp}()" *ngIf="${entity.model.var}.${relation.to.var}" icon="fa-chain-broken" label="Clear"></button>
12+
<div class="ui-grid-col-1">
13+
<button pButton id="clear${relation.to.varUp}" type="button" (click)="clear${relation.to.varUp}()" *ngIf="!sub && ${entity.model.var}.${relation.to.var}" icon="fa-chain-broken" label="Clear"></button>
1414
</div>
1515
</div>
1616
#end
1717
#macro(required $attribute)
18-
#if($attribute.isRequired() && $attribute.isString()) required placeholder="Required"#end
18+
#if($attribute.isRequired() && $attribute.isString()) required #end
1919
#end
2020
#macro(minlength $attribute)
2121
#if($attribute.columnConfig.hasMin()) minlength="$attribute.columnConfig.min"#end
2222
#end
2323
#macro(asterisk $attribute)
2424
#if($attribute.isRequired()) *#end
2525
#end
26+
#macro(mderror $attribute)
27+
28+
#if($attribute.isRequired() && $attribute.isString())
29+
<md-error *ngIf="!${attribute.var}.valid && ${attribute.var}.dirty && ${attribute.var}.errors['required']">
30+
$attribute.labels.label is required.
31+
</md-error>
32+
#end
33+
#if($attribute.columnConfig.hasMin() && $attribute.isString())
34+
<md-error *ngIf="!${attribute.var}.valid && ${attribute.var}.dirty && ${attribute.var}.errors['minlength']">
35+
$attribute.labels.label must have at least $attribute.columnConfig.min characters.
36+
</md-error>
37+
#end
38+
#if($attribute.isEmail())
39+
<md-error *ngIf="!${attribute.var}.valid && ${attribute.var}.dirty && ${attribute.var}.errors['validateEmail']">
40+
$attribute.labels.label is invalid. Expecting a valid email address.
41+
</md-error>
42+
#end
43+
#if($attribute.isUrl())
44+
<md-error *ngIf="!${attribute.var}.valid && ${attribute.var}.dirty && ${attribute.var}.errors['pattern']">
45+
$attribute.labels.label is invalid. Expecting a valid URL.
46+
</md-error>
47+
#end
48+
#end
2649
## -- [/MACROS]
27-
<div class="ContentSideSections Implementation">
2850
<md-card *ngIf="$entity.model.var" ngForm #${entity.model.var}Form="ngForm">
2951
<md-card-title>$entity.model.type Details</md-card-title>
3052
<md-card-content>
@@ -43,84 +65,91 @@ $output.file("web/src/app/entities/${entity.model.var}/${entity.model.var}-detai
4365
#end
4466
<div class="ui-grid-row">
4567
<div class="ui-grid-col-2"><label for="$attr.var">$attr.labels.label #asterisk($attr)</label></div>
46-
<div class="ui-grid-col-6">
4768
#if($attr.springMvc.isPassword())
48-
<input type="password" pPassword [(ngModel)]="$valuePath" name="$attr.var" ${p}$attr.var="ngModel"/>
69+
<div class="ui-grid-col-2">
70+
<md-input-container style="width: 100%">
71+
<input mdInput type="password" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) name="$attr.var" ${p}$attr.var="ngModel"/>
72+
#mderror($attr)
73+
</md-input-container>
4974
#elseif($attr.isHtml())
5075
todo html
5176
#elseif($attr.isTextArea())
52-
<textarea pInputTextarea id="$attr.var" [(ngModel)]="$valuePath" autoResize="true" name="$attr.var" ${p}$attr.var="ngModel"></textarea>
77+
<div class="ui-grid-col-6">
78+
<md-input-container style="width: 100%">
79+
<textarea mdInput id="$attr.var" [(ngModel)]="$valuePath" autoResize="true" name="$attr.var" ${p}$attr.var="ngModel"></textarea>
80+
#mderror($attr)
81+
</md-input-container>
5382
#elseif($attr.isEnum())
54-
<p-dropdown [options]="${attr.var}Options" [(ngModel)]="$valuePath" name="$attr.var" ${p}$attr.var="ngModel"></p-dropdown>
83+
<div class="ui-grid-col-2">
84+
<md-select [(ngModel)]="$valuePath" name="$attr.var" ${p}$attr.var="ngModel" style="width: 100%">
85+
<md-option *ngFor="let ${attr.var}Option of ${attr.var}Options" [value]="${attr.var}Option.value">{{ ${attr.var}Option.label }}</md-option>
86+
</md-select>
5587
#elseif($attr.isEmail())
56-
<input pInputText id="$attr.var" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) validateEmail name="$attr.var" ${p}$attr.var="ngModel"/>
88+
<div class="ui-grid-col-3">
89+
<md-input-container style="width: 100%">
90+
<input mdInput id="$attr.var" type="email" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) validateEmail name="$attr.var" ${p}$attr.var="ngModel"/>
91+
#mderror($attr)
92+
</md-input-container>
5793
#elseif($attr.isUrl())
58-
<input pInputText id="$attr.var" pattern="^http.*" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) name="$attr.var" ${p}$attr.var="ngModel"/>
94+
<div class="ui-grid-col-4">
95+
<md-input-container style="width: 100%">
96+
<input mdInput id="$attr.var" type="url" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) name="$attr.var" ${p}$attr.var="ngModel"/>
97+
#mderror($attr)
98+
</md-input-container>
5999
#elseif($attr.isString())
60-
<input pInputText id="$attr.var" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) name="$attr.var" ${p}$attr.var="ngModel"/>
100+
<div class="ui-grid-col-4">
101+
<md-input-container style="width: 100%">
102+
<input mdInput id="$attr.var" type="text" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) name="$attr.var" ${p}$attr.var="ngModel"/>
103+
#mderror($attr)
104+
</md-input-container>
61105
#elseif($attr.isNumeric())
62-
<input pInputText id="$attr.var" type="number" [(ngModel)]="$valuePath" #required($attr) name="$attr.var" ${p}$attr.var="ngModel" />
106+
<div class="ui-grid-col-2">
107+
<md-input-container style="width: 100%">
108+
<input mdInput id="$attr.var" type="number" [(ngModel)]="$valuePath" #required($attr) name="$attr.var" ${p}$attr.var="ngModel" />
109+
#mderror($attr)
110+
</md-input-container>
63111
#elseif($attr.isDate() && !$attr.isVersion())
64-
#if($attr.isJavaUtilOnlyDate())
65-
<p-calendar [(ngModel)]="$valuePath" dateFormat="yy-mm-dd" [ngModelOptions]="{standalone: true}"></p-calendar>
66-
#elseif($attr.isJavaUtilDateAndTime())
67-
date and time not supported yet
68-
#elseif($attr.isLocalDate())
69-
<p-calendar [(ngModel)]="$valuePath" dateFormat="yy-mm-dd" [ngModelOptions]="{standalone: true}"></p-calendar>
112+
#if($attr.isJavaUtilOnlyDate() || $attr.isLocalDate())
113+
<div class="ui-grid-col-2">
114+
<md-input-container>
115+
<input mdInput id="$attr.var" [mdDatepicker]="${attr.var}Picker" [(ngModel)]="$valuePath" #required($attr) name="$attr.var" ${p}$attr.var="ngModel">
116+
<button mdSuffix [mdDatepickerToggle]="${attr.var}Picker"></button>
117+
</md-input-container>
118+
<md-datepicker ${pound}${attr.var}Picker></md-datepicker>
70119
#elseif($attr.isLocalDateTime() || $attr.isInstant())
71-
<p-calendar [(ngModel)]="$valuePath" dateFormat="yy-mm-dd" showTime="true" [ngModelOptions]="{standalone: true}"></p-calendar>
120+
<div class="ui-grid-col-2">
121+
<p-calendar [(ngModel)]="$valuePath" dateFormat="yy-mm-dd" showTime="true" [ngModelOptions]="{standalone: true}"></p-calendar>
72122
#else
123+
<div class="ui-grid-col-2">
73124
Date type not supported, do it manually and send us the solution!
74125
#end
75126
#elseif($attr.isBoolean())
76-
<p-triStateCheckbox [(ngModel)]="$valuePath" name="$attr.var"></p-triStateCheckbox>{{$valuePath}}
127+
<div class="ui-grid-col-2">
128+
<p-triStateCheckbox [(ngModel)]="$valuePath" name="$attr.var"></p-triStateCheckbox>{{$valuePath}}
77129
#elseif($attr.isFile() && $attr.filename)
78-
<ul *ngIf="${entity.model.var}.${attr.filename.var}">
79-
<li><a href="/api/${entity.model.vars}/{{${entity.model.var}.${identifiableProperty.var}}}/download/${attr.var}">Download {{${entity.model.var}.${attr.filename.var}}}</a></li>
80-
<li>Content-Type: {{${entity.model.var}.${attr.fileContentType.var}}}</li>
81-
<li>Size in bytes: {{${entity.model.var}.${attr.fileSize.var}}}</li>
82-
</ul>
130+
<div class="ui-grid-col-8">
131+
<ul *ngIf="${entity.model.var}.${attr.filename.var}">
132+
<li><a href="/api/${entity.model.vars}/{{${entity.model.var}.${identifiableProperty.var}}}/download/${attr.var}">Download {{${entity.model.var}.${attr.filename.var}}}</a></li>
133+
<li>Content-Type: {{${entity.model.var}.${attr.fileContentType.var}}}</li>
134+
<li>Size in bytes: {{${entity.model.var}.${attr.fileSize.var}}}</li>
135+
</ul>
83136

84-
<p-fileUpload *ngIf="${entity.model.var}.${identifiableProperty.var}" name="${attr.var}" url="/api/${entity.model.vars}/{{${entity.model.var}.${identifiableProperty.var}}}/upload/${attr.var}" (onUpload)="on${attr.varUp}Upload(${d}event)" >
85-
</p-fileUpload>
86-
<p *ngIf="!${entity.model.var}.${identifiableProperty.var}">
87-
Please save the form before being able to upload a file
88-
</p>
137+
<p-fileUpload *ngIf="${entity.model.var}.${identifiableProperty.var}" name="${attr.var}" url="/api/${entity.model.vars}/{{${entity.model.var}.${identifiableProperty.var}}}/upload/${attr.var}" (onUpload)="on${attr.varUp}Upload(${d}event)" >
138+
</p-fileUpload>
139+
<p *ngIf="!${entity.model.var}.${identifiableProperty.var}">
140+
Please save the form before being able to upload a file
141+
</p>
89142
#else
90-
91-
<input pInputText id="$attr.var" [(ngModel)]="$valuePath" #required($attr) name="$attr.var" #name="ngModel"/>
92-
#end
93-
</div>
94143
<div class="ui-grid-col-4">
95-
#if($attr.isRequired() && $attr.isString() && !$attr.isPassword())
96-
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!${attr.var}.valid && ${attr.var}.dirty && ${attr.var}.errors['required']">
97-
<i class="fa fa-close"></i>
98-
$attr.labels.label is required
99-
</div>
100-
#end
101-
#if($attr.columnConfig.hasMin() && $attr.isString() && !$attr.isPassword())
102-
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!${attr.var}.valid && ${attr.var}.dirty && ${attr.var}.errors['minlength']">
103-
<i class="fa fa-close"></i>
104-
$attr.labels.label must have at least $attr.columnConfig.min characters.
105-
</div>
106-
#end
107-
#if($attr.isEmail())
108-
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!${attr.var}.valid && ${attr.var}.dirty && ${attr.var}.errors['validateEmail']">
109-
<i class="fa fa-close"></i>
110-
$attr.labels.label is invalid. Expecting a valid email address.
111-
</div>
112-
#end
113-
#if($attr.isUrl())
114-
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!${attr.var}.valid && ${attr.var}.dirty && ${attr.var}.errors['pattern']">
115-
<i class="fa fa-close"></i>
116-
$attr.labels.label is invalid. Expecting an URL starting with 'http'.
117-
</div>
144+
<md-input-container style="width: 100%">
145+
<input mdInput id="$attr.var" type="text" [(ngModel)]="$valuePath" #required($attr) #minlength($attr) name="$attr.var" ${p}$attr.var="ngModel"/>
146+
#mderror($attr)
147+
</md-input-container>
118148
#end
119149
</div>
120150
</div>
151+
#end ##---------- [/NON VERSION]
121152
#end ## foreach(....
122-
##---------- [/NON VERSION]
123-
#end
124153
## ---------------------------------------------------------
125154
</div>
126155
</md-card-content>
@@ -164,4 +193,3 @@ $output.file("web/src/app/entities/${entity.model.var}/${entity.model.var}-detai
164193
</md-card-content>
165194
</md-card>
166195
#end
167-
</div>

‎pack-angular/celerio/pack-angular/web/src/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,7 @@ button.ui-button.ui-state-default {
2525
padding-bottom: 0em;
2626
padding-left: 0em;
2727
}
28+
29+
.ui-grid-row {
30+
align-items: center;
31+
}

0 commit comments

Comments
 (0)