Skip to content

Commit 635bb45

Browse files
wsteixeirawsteixeira
committed
docs(upload): ajusta propriedade com strict ativado
A propriedade strictTemplates já vem configurado como true na versão atual do Angular e desta forma o exemplo apresenta erro de compilação. Fixes #1402
1 parent e50742f commit 635bb45

10 files changed

+112
-83
lines changed

‎projects/ui/src/lib/components/po-field/po-upload/po-upload-base.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ export abstract class PoUploadBaseComponent implements ControlValueAccessor, Val
255255
* two-way binding no componente deve se utilizar da seguinte forma:
256256
*
257257
* ```
258-
* <po-upload ... [ngModel]="UploadModel" (ngModelChange)="uploadModel = $event"> </po-upload>
258+
* <po-upload ... [ngModel]="uploadModel" (ngModelChange)="uploadModel = $event"> </po-upload>
259259
* ```
260260
*
261261
*/

‎projects/ui/src/lib/components/po-field/po-upload/po-upload.component.ts

+5
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@ import { PoUploadStatus } from './po-upload-status.enum';
4343
* <file name="sample-po-upload-resume/sample-po-upload-resume.component.ts"> </file>
4444
* </example>
4545
*
46+
* <example name="po-upload-resume-drag-drop" title="PO Upload - Resume - Drag & Drop">
47+
* <file name="sample-po-upload-resume-drag-drop/sample-po-upload-resume-drag-drop.component.html"> </file>
48+
* <file name="sample-po-upload-resume-drag-drop/sample-po-upload-resume-drag-drop.component.ts"> </file>
49+
* </example>
50+
*
4651
* <example name="po-upload-rs" title="PO Upload - Realize & Show">
4752
* <file name="sample-po-upload-rs/sample-po-upload-rs.component.html"> </file>
4853
* <file name="sample-po-upload-rs/sample-po-upload-rs.component.ts"> </file>

‎projects/ui/src/lib/components/po-field/po-upload/samples/sample-po-upload-labs/sample-po-upload-labs.component.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<po-upload
22
name="upload"
3-
[(ngModel)]="upload"
3+
[ngModel]="upload"
4+
(ngModelChange)="upload = $event"
45
[p-auto-upload]="properties.includes('autoupload')"
56
[p-directory]="properties.includes('directory')"
67
[p-disabled]="properties.includes('disabled')"
@@ -68,7 +69,7 @@
6869
p-clean
6970
p-help="Height of drag drop area"
7071
p-label="Drag Drop Height"
71-
p-min="160"
72+
[p-min]="160"
7273
>
7374
</po-number>
7475

@@ -135,8 +136,9 @@
135136
<po-checkbox-group
136137
class="po-md-12"
137138
name="properties"
138-
[(ngModel)]="properties"
139-
p-columns="4"
139+
[ngModel]="properties"
140+
(ngModelChange)="properties = $event"
141+
[p-columns]="4"
140142
p-help="Select any options"
141143
p-label="Properties"
142144
[p-options]="propertiesOptions"

‎projects/ui/src/lib/components/po-field/po-upload/samples/sample-po-upload-labs/sample-po-upload-labs.component.ts

+28-25
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,24 @@ import { PoCheckboxGroupOption, PoUploadFileRestrictions, PoUploadLiterals } fro
77
templateUrl: './sample-po-upload-labs.component.html'
88
})
99
export class SamplePoUploadLabsComponent implements OnInit {
10-
allowedExtensions: string;
11-
customLiterals: PoUploadLiterals;
12-
dragDropHeight: number;
13-
event: string;
14-
formField: string;
15-
help: string;
16-
label: string;
17-
literals: string;
18-
maxFiles: number;
19-
maxSize: number;
20-
minSize: number;
21-
properties: Array<string>;
22-
restrictions: PoUploadFileRestrictions;
23-
upload: Array<any>;
24-
url: string;
25-
headers: { [name: string]: string | Array<string> };
26-
headersLabs: string;
10+
allowedExtensions!: string;
11+
customLiterals!: PoUploadLiterals;
12+
dragDropHeight!: number | undefined;
13+
event!: string;
14+
formField!: string;
15+
help!: string;
16+
label!: string;
17+
literals!: string;
18+
maxFiles!: number | undefined;
19+
maxSize!: number | undefined;
20+
minSize!: number | undefined;
21+
properties!: Array<string>;
22+
restrictions!: PoUploadFileRestrictions;
23+
upload!: Array<any> | undefined;
24+
url!: string;
25+
headers!: { [name: string]: string | Array<string> };
26+
headersLabs!: string;
27+
2728
public readonly propertiesOptions: Array<PoCheckboxGroupOption> = [
2829
{ value: 'autoupload', label: 'Automatic upload' },
2930
{ value: 'directory', label: 'Directory' },
@@ -37,6 +38,8 @@ export class SamplePoUploadLabsComponent implements OnInit {
3738
{ value: 'sendButton', label: 'Hide Send Files Button' }
3839
];
3940

41+
constructor() {}
42+
4043
ngOnInit() {
4144
this.restore();
4245
}
@@ -78,13 +81,13 @@ export class SamplePoUploadLabsComponent implements OnInit {
7881
}
7982

8083
restore() {
81-
this.allowedExtensions = undefined;
82-
this.customLiterals = undefined;
84+
this.allowedExtensions = '';
85+
this.customLiterals = {};
8386
this.dragDropHeight = undefined;
84-
this.event = undefined;
85-
this.formField = undefined;
86-
this.label = undefined;
87-
this.help = undefined;
87+
this.event = '';
88+
this.formField = '';
89+
this.label = '';
90+
this.help = '';
8891
this.literals = '';
8992
this.maxFiles = undefined;
9093
this.maxSize = undefined;
@@ -93,8 +96,8 @@ export class SamplePoUploadLabsComponent implements OnInit {
9396
this.restrictions = {};
9497
this.upload = undefined;
9598
this.url = 'https://po-sample-api.herokuapp.com/v1/uploads/addFile';
96-
this.headers = undefined;
97-
this.headersLabs = undefined;
99+
this.headers = {};
100+
this.headersLabs = '';
98101
}
99102

100103
private getValueInBytes(value: number) {

‎projects/ui/src/lib/components/po-field/po-upload/samples/sample-po-upload-resume-drag-drop/sample-po-upload-resume-drag-drop.component.html

+10-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
</div>
55

66
<div class="po-row">
7-
<po-textarea class="po-md-12" name="biograph" [(ngModel)]="biograph" p-label="Biograph" p-required> </po-textarea>
7+
<po-textarea class="po-md-12" name="biograph" [(ngModel)]="biograph" p-label="Biograph" [p-required]="true">
8+
</po-textarea>
89
</div>
910

1011
<div class="po-row">
@@ -15,15 +16,16 @@
1516
<po-upload
1617
class="po-md-12"
1718
name="resume"
18-
[(ngModel)]="resume"
19-
p-drag-drop
20-
p-drag-drop-height="160"
19+
[ngModel]="resume"
20+
(ngModelChange)="resume = $event"
21+
[p-drag-drop]="true"
22+
[p-drag-drop-height]="160"
2123
p-label="Resume"
22-
p-required
24+
[p-required]="true"
2325
p-url="https://po-sample-api.herokuapp.com/v1/uploads/addFile"
24-
p-restrictions="{maxFileSize: '204800'}"
25-
(p-error)="resumeUploadError()"
26-
(p-success)="resumeUploadSuccess()"
26+
[p-restrictions]="{ maxFileSize: 204800 }"
27+
(p-error)="resumeUploadError($event)"
28+
(p-success)="resumeUploadSuccess($event)"
2729
>
2830
</po-upload>
2931
</div>

‎projects/ui/src/lib/components/po-field/po-upload/samples/sample-po-upload-resume-drag-drop/sample-po-upload-resume-drag-drop.component.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import { PoNotificationService } from '@po-ui/ng-components';
1010
export class SamplePoUploadResumeDragDropComponent implements OnInit {
1111
@ViewChild('formOpportunity', { static: true }) formOpportunity: UntypedFormControl;
1212

13-
biograph: string;
14-
linkedin: string;
15-
name: string;
16-
resume: string;
17-
uploadedResume: boolean;
13+
biograph!: string;
14+
linkedin!: string;
15+
name!: string;
16+
resume!: string;
17+
uploadedResume!: boolean;
1818

1919
constructor(private poNotification: PoNotificationService) {}
2020

@@ -29,11 +29,11 @@ export class SamplePoUploadResumeDragDropComponent implements OnInit {
2929
this.poNotification.success('You were applied successfully');
3030
}
3131

32-
resumeUploadError() {
32+
resumeUploadError(event: any) {
3333
this.uploadedResume = false;
3434
}
3535

36-
resumeUploadSuccess() {
36+
resumeUploadSuccess(event: any) {
3737
this.uploadedResume = true;
3838
}
3939
}

‎projects/ui/src/lib/components/po-field/po-upload/samples/sample-po-upload-resume/sample-po-upload-resume.component.html

+9-7
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
</div>
55

66
<div class="po-row">
7-
<po-textarea class="po-md-12" name="biograph" [(ngModel)]="biograph" p-label="Biograph" p-required> </po-textarea>
7+
<po-textarea class="po-md-12" name="biograph" [(ngModel)]="biograph" p-label="Biograph" [p-required]="true">
8+
</po-textarea>
89
</div>
910

1011
<div class="po-row">
@@ -15,20 +16,21 @@
1516
<po-upload
1617
class="po-md-12"
1718
name="resume"
18-
[(ngModel)]="resume"
19+
[ngModel]="resume"
20+
(ngModelChange)="resume = $event"
1921
p-label="Resume"
20-
p-required
22+
[p-required]="true"
2123
p-url="https://po-sample-api.herokuapp.com/v1/uploads/addFile"
22-
[p-restrictions]="{ maxFileSize: '204800' }"
23-
(p-error)="resumeUploadError()"
24-
(p-success)="resumeUploadSuccess()"
24+
[p-restrictions]="{ maxFileSize: 204800 }"
25+
(p-error)="resumeUploadError($event)"
26+
(p-success)="resumeUploadSuccess($event)"
2527
>
2628
</po-upload>
2729
</div>
2830

2931
<div class="po-row">
3032
<po-button
31-
class="po-md-4"
33+
class="po-md-4 po-mt-2"
3234
p-label="Apply"
3335
[p-disabled]="formOpportunity.invalid || !uploadedResume"
3436
(p-click)="apply()"

‎projects/ui/src/lib/components/po-field/po-upload/samples/sample-po-upload-resume/sample-po-upload-resume.component.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ import { PoNotificationService } from '@po-ui/ng-components';
88
templateUrl: 'sample-po-upload-resume.component.html'
99
})
1010
export class SamplePoUploadResumeComponent implements OnInit {
11-
@ViewChild('formOpportunity', { static: true }) formOpportunity: UntypedFormControl;
11+
@ViewChild('formOpportunity', { static: true }) formOpportunity!: UntypedFormControl;
1212

13-
biograph: string;
14-
linkedin: string;
15-
name: string;
16-
resume: string;
17-
uploadedResume: boolean;
13+
biograph!: string;
14+
linkedin!: string;
15+
name!: string;
16+
resume!: string;
17+
uploadedResume!: boolean;
1818

1919
constructor(private poNotification: PoNotificationService) {}
2020

@@ -29,11 +29,11 @@ export class SamplePoUploadResumeComponent implements OnInit {
2929
this.poNotification.success('You were applied successfully');
3030
}
3131

32-
resumeUploadError() {
32+
resumeUploadError(event: any) {
3333
this.uploadedResume = false;
3434
}
3535

36-
resumeUploadSuccess() {
36+
resumeUploadSuccess(event: any) {
3737
this.uploadedResume = true;
3838
}
3939
}

‎projects/ui/src/lib/components/po-field/po-upload/samples/sample-po-upload-rs/sample-po-upload-rs.component.html

+17-15
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@
22
<po-stepper
33
#stepper
44
class="po-lg-10 po-offset-lg-2 po-offset-xl-2"
5-
p-orientation="vertical"
6-
p-step-icons
7-
p-step-size="42"
5+
[p-orientation]="orientation"
6+
[p-step-icons]="true"
7+
[p-step-size]="42"
88
>
99
<po-step p-label="Welcome">
1010
<po-widget class="po-lg-8 po-mt-2" p-title="Realize & Show">
11-
<div class="tht-row">
11+
<div class="po-row">
1212
<div class="po-sm-12">
1313
<h1 class="po-font-title">Welcome, TOTVER!</h1>
1414
<p class="po-font-text-large">Let's submit your project?</p>
1515
</div>
1616
</div>
1717

18-
<div class="tht-row">
18+
<div class="po-row">
1919
<po-button class="po-sm-12 po-mt-2" p-label="Yes!" p-kind="primary" (p-click)="stepper.next()"> </po-button>
2020
</div>
2121
</po-widget>
@@ -51,12 +51,14 @@ <h1 class="po-font-title">Welcome, TOTVER!</h1>
5151
#upload
5252
class="po-sm-12"
5353
name="project"
54-
[(ngModel)]="project"
55-
p-hide-select-button
56-
p-hide-send-button
57-
p-required
54+
[ngModel]="project"
55+
(ngModelChange)="project = $event"
56+
[p-hide-select-button]="true"
57+
[p-hide-send-button]="true"
58+
[p-required]="true"
5859
p-url="https://po-sample-api.herokuapp.com/v1/uploads/addFile"
5960
[p-restrictions]="restrictions"
61+
(p-success)="eventSuccess($event)"
6062
>
6163
</po-upload>
6264
</div>
@@ -69,7 +71,7 @@ <h1 class="po-font-title">Welcome, TOTVER!</h1>
6971
p-label="Title"
7072
p-placeholder="Be creative"
7173
p-required
72-
[p-disabled]="project.length < 1"
74+
p-disabled="{{ project.length < 1 }}"
7375
>
7476
</po-input>
7577
</div>
@@ -80,19 +82,19 @@ <h1 class="po-font-title">Welcome, TOTVER!</h1>
8082
name="description"
8183
[(ngModel)]="description"
8284
p-label="Description"
83-
p-maxlength="140"
85+
[p-maxlength]="140"
8486
p-placeholder="Resume on few words"
85-
p-required
87+
[p-required]="true"
8688
[p-disabled]="project.length < 1"
8789
>
8890
</po-textarea>
8991
</div>
9092

91-
<div class="tht-row">
93+
<div class="po-row">
9294
<po-button
9395
class="po-sm-12 po-mt-2"
9496
p-label="Done"
95-
[p-disabled]="canSubmitProject()"
97+
[p-disabled]="!canSubmitProject()"
9698
(p-click)="submitProject()"
9799
>
98100
</po-button>
@@ -103,7 +105,7 @@ <h1 class="po-font-title">Welcome, TOTVER!</h1>
103105

104106
<po-step p-label="Confirm">
105107
<po-widget class="po-lg-8 po-mt-2" p-title="Realize & Show">
106-
<div class="tht-row" *ngIf="canSubmitProject()">
108+
<div class="po-row" *ngIf="canSubmitProject()">
107109
<div class="po-sm-12">
108110
<p class="po-font-text-large">Confirm informations</p>
109111
</div>

0 commit comments

Comments
 (0)