Skip to content

Commit 0434862

Browse files
lekhmanruslekhmanrus
committed
refactor: migrate to control flow
1 parent 75b6e99 commit 0434862

File tree

12 files changed

+456
-426
lines changed

12 files changed

+456
-426
lines changed

‎projects/templates/src/lib/components/po-modal-password-recovery/po-modal-password-recovery.component.html‎

Lines changed: 115 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -2,117 +2,134 @@
22
#recoveryModal
33
p-hide-close
44
p-size="auto"
5-
[ngSwitch]="modalType"
65
[p-components-size]="componentsSize"
76
[p-primary-action]="primaryAction"
87
[p-secondary-action]="secondaryAction"
98
[p-title]="modalTitle"
109
>
1110
<div class="po-modal-password-recovery-wrapper">
12-
<div *ngSwitchCase="'email'" class="po-modal-password-recovery-content po-row">
13-
<div class="po-modal-password-recovery-text po-md-12 po-mb-1">
14-
{{ emailModalPhrases.firstPhrase }}
15-
</div>
16-
<div class="po-mb-2 po-md-12">
17-
<form #emailForm="ngForm">
18-
<div *ngIf="modalPasswordRecoveryTypeAll">
19-
<po-radio-group
20-
name="type"
21-
[(ngModel)]="chosenTypeFormOption"
22-
[p-options]="typeFormOptions"
23-
[p-size]="componentsSize"
24-
(p-change)="getInputType($event)"
25-
>
26-
</po-radio-group>
11+
@switch (modalType) {
12+
@case ('email') {
13+
<div class="po-modal-password-recovery-content po-row">
14+
<div class="po-modal-password-recovery-text po-md-12 po-mb-1">
15+
{{ emailModalPhrases.firstPhrase }}
2716
</div>
17+
<div class="po-mb-2 po-md-12">
18+
<form #emailForm="ngForm">
19+
@if (modalPasswordRecoveryTypeAll) {
20+
<div>
21+
<po-radio-group
22+
name="type"
23+
[(ngModel)]="chosenTypeFormOption"
24+
[p-options]="typeFormOptions"
25+
[p-size]="componentsSize"
26+
(p-change)="getInputType($event)"
27+
>
28+
</po-radio-group>
29+
</div>
30+
}
2831

29-
<div class="po-mt-1">
30-
<po-email
31-
*ngIf="type === 'email' || type === 'all'"
32-
name="email"
33-
[(ngModel)]="email"
34-
p-required
35-
[p-label]="literals.insertEmail"
36-
[p-size]="componentsSize"
37-
(p-change-model)="formModelChangesCheck(emailForm)"
38-
>
39-
</po-email>
32+
<div class="po-mt-1">
33+
@if (type === 'email' || type === 'all') {
34+
<po-email
35+
name="email"
36+
[(ngModel)]="email"
37+
p-required
38+
[p-label]="literals.insertEmail"
39+
[p-size]="componentsSize"
40+
(p-change-model)="formModelChangesCheck(emailForm)"
41+
>
42+
</po-email>
43+
}
4044

41-
<po-input
42-
*ngIf="type === 'sms'"
43-
name="sms"
44-
[(ngModel)]="phone"
45-
p-icon="ICON_TELEPHONE"
46-
p-required
47-
[p-label]="literals.insertPhone"
48-
[p-mask]="phoneMask"
49-
[p-maxlength]="maxLength"
50-
[p-minlength]="minLength"
51-
[p-size]="componentsSize"
52-
(p-change-model)="formModelChangesCheck(emailForm)"
53-
>
54-
</po-input>
55-
</div>
45+
@if (type === 'sms') {
46+
<po-input
47+
name="sms"
48+
[(ngModel)]="phone"
49+
p-icon="ICON_TELEPHONE"
50+
p-required
51+
[p-label]="literals.insertPhone"
52+
[p-mask]="phoneMask"
53+
[p-maxlength]="maxLength"
54+
[p-minlength]="minLength"
55+
[p-size]="componentsSize"
56+
(p-change-model)="formModelChangesCheck(emailForm)"
57+
>
58+
</po-input>
59+
}
60+
</div>
5661

57-
<div class="po-field-container-bottom po-field-container-error-container">
58-
<po-modal-password-recovery-error-message
59-
*ngIf="invalidEmail && control.dirty"
60-
[p-text]="type === 'sms' ? literals.phoneErrorMessagePhrase : literals.emailErrorMessagePhrase"
61-
>
62-
</po-modal-password-recovery-error-message>
62+
<div class="po-field-container-bottom po-field-container-error-container">
63+
@if (invalidEmail && control.dirty) {
64+
<po-modal-password-recovery-error-message
65+
[p-text]="type === 'sms' ? literals.phoneErrorMessagePhrase : literals.emailErrorMessagePhrase"
66+
>
67+
</po-modal-password-recovery-error-message>
68+
}
69+
</div>
70+
</form>
71+
</div>
72+
<div class="po-modal-password-recovery-text po-md-12">
73+
{{ emailModalPhrases.secondPhrase }}
74+
@if (contactEmail) {
75+
<span>
76+
{{ literals.prepositionIn }}
77+
<a class="po-modal-password-recovery-link" href="mailto:{{ contactEmail }}" target="_self">
78+
{{ contactEmail }}
79+
</a>
80+
</span>
81+
}
82+
{{ endpoint }}
6383
</div>
64-
</form>
65-
</div>
66-
<div class="po-modal-password-recovery-text po-md-12">
67-
{{ emailModalPhrases.secondPhrase }}
68-
<span *ngIf="contactEmail">
69-
{{ literals.prepositionIn }}
70-
<a class="po-modal-password-recovery-link" href="mailto:{{ contactEmail }}" target="_self">
71-
{{ contactEmail }}
72-
</a>
73-
</span>
74-
{{ endpoint }}
75-
</div>
76-
</div>
84+
</div>
85+
}
7786

78-
<div #smsCodeModal *ngSwitchCase="'smsCode'" class="po-modal-password-recovery-content po-row">
79-
<div class="po-modal-password-recovery-text po-md-12 po-mb-1">{{ literals.sentSmsCodePhrase }}</div>
80-
<div class="po-mb-2 po-md-12">
81-
<form #smsCodeForm="ngForm">
82-
<po-input
83-
name="sms"
84-
[(ngModel)]="smsCode"
85-
p-maxlength="11"
86-
p-minlength="11"
87-
p-required
88-
[p-label]="literals.insertCode"
89-
[p-mask]="codeMask"
90-
[p-size]="componentsSize"
91-
(p-change-model)="formModelChangesCheck(smsCodeForm)"
92-
>
93-
</po-input>
94-
<div class="po-field-container-bottom po-field-container-error-container">
95-
<po-modal-password-recovery-error-message
96-
*ngIf="invalidEmail"
97-
[p-text]="smsCodeErrorMessage || this.literals.smsCodeErrorMessagePhrase"
98-
>
99-
</po-modal-password-recovery-error-message>
100-
<po-modal-password-recovery-error-message *ngIf="showCustomCodeError" [p-text]="codeError">
101-
</po-modal-password-recovery-error-message>
87+
@case ('smsCode') {
88+
<div #smsCodeModal class="po-modal-password-recovery-content po-row">
89+
<div class="po-modal-password-recovery-text po-md-12 po-mb-1">{{ literals.sentSmsCodePhrase }}</div>
90+
<div class="po-mb-2 po-md-12">
91+
<form #smsCodeForm="ngForm">
92+
<po-input
93+
name="sms"
94+
[(ngModel)]="smsCode"
95+
p-maxlength="11"
96+
p-minlength="11"
97+
p-required
98+
[p-label]="literals.insertCode"
99+
[p-mask]="codeMask"
100+
[p-size]="componentsSize"
101+
(p-change-model)="formModelChangesCheck(smsCodeForm)"
102+
>
103+
</po-input>
104+
<div class="po-field-container-bottom po-field-container-error-container">
105+
@if (invalidEmail) {
106+
<po-modal-password-recovery-error-message
107+
[p-text]="smsCodeErrorMessage || this.literals.smsCodeErrorMessagePhrase"
108+
>
109+
</po-modal-password-recovery-error-message>
110+
}
111+
@if (showCustomCodeError) {
112+
<po-modal-password-recovery-error-message [p-text]="codeError">
113+
</po-modal-password-recovery-error-message>
114+
}
115+
</div>
116+
</form>
102117
</div>
103-
</form>
104-
</div>
105-
<div class="po-modal-password-recovery-text po-md-12">
106-
{{ literals.sendAgainPhrase }}
107-
<span class="po-modal-password-recovery-link" (click)="resendSmsCode()">{{ literals.sendAgain }}</span>
108-
</div>
109-
</div>
118+
<div class="po-modal-password-recovery-text po-md-12">
119+
{{ literals.sendAgainPhrase }}
120+
<span class="po-modal-password-recovery-link" (click)="resendSmsCode()">{{ literals.sendAgain }}</span>
121+
</div>
122+
</div>
123+
}
110124

111-
<div #confirmationModal *ngSwitchCase="'confirmation'" class="po-modal-password-recovery-content po-row">
112-
<img class="po-modal-password-recovery-user-image po-mb-2" src="./assets/images/email-sent.svg" />
113-
<div class="po-modal-password-recovery-text">
114-
{{ literals.emailSentConfirmationPhrase }}
115-
</div>
116-
</div>
125+
@case ('confirmation') {
126+
<div #confirmationModal class="po-modal-password-recovery-content po-row">
127+
<img class="po-modal-password-recovery-user-image po-mb-2" src="./assets/images/email-sent.svg" />
128+
<div class="po-modal-password-recovery-text">
129+
{{ literals.emailSentConfirmationPhrase }}
130+
</div>
131+
</div>
132+
}
133+
}
117134
</div>
118135
</po-modal>

‎projects/ui/src/lib/components/po-calendar/po-calendar-wrapper/po-calendar-wrapper.component.html‎

Lines changed: 53 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="po-calendar-wrapper">
2-
<ng-container *ngIf="isDayVisible">
2+
@if (isDayVisible) {
33
<po-calendar-header
44
[p-hide-previous]="isEndPart"
55
[p-hide-next]="isStartPart && !responsive"
@@ -9,90 +9,92 @@
99
<span class="po-clickable po-mr-1" (click)="selectDisplayMode('month')">{{ displayMonth }}</span>
1010
<span class="po-clickable" (click)="selectDisplayMode('year')">{{ displayYear }}</span>
1111
</po-calendar-header>
12-
1312
<div class="po-calendar-content">
1413
<div class="po-calendar-labels">
15-
<div class="po-calendar-label" *ngFor="let weekDay of displayWeekDays">
16-
{{ weekDay }}
17-
</div>
14+
@for (weekDay of displayWeekDays; track weekDay) {
15+
<div class="po-calendar-label">
16+
{{ weekDay }}
17+
</div>
18+
}
1819
</div>
19-
2020
<div class="po-calendar-content-list-day">
21-
<div
22-
*ngFor="let day of displayDays"
23-
class="po-calendar-day"
24-
[ngClass]="getDayBackgroundColor(day)"
25-
(click)="onSelectDate(day)"
26-
(mouseenter)="onMouseEnter(day)"
27-
(mouseleave)="onMouseLeave()"
28-
attr-calendar
29-
>
30-
<span *ngIf="day !== 0" [ngClass]="getDayForegroundColor(day)">
31-
{{ day.getDate() }}
32-
</span>
33-
</div>
21+
@for (day of displayDays; track day) {
22+
<div
23+
class="po-calendar-day"
24+
[ngClass]="getDayBackgroundColor($any(day))"
25+
(click)="onSelectDate($any(day))"
26+
(mouseenter)="onMouseEnter(day)"
27+
(mouseleave)="onMouseLeave()"
28+
attr-calendar
29+
>
30+
@if (day !== 0) {
31+
<span [ngClass]="getDayForegroundColor($any(day))">
32+
{{ $any(day).getDate() }}
33+
</span>
34+
}
35+
</div>
36+
}
3437
</div>
3538
</div>
36-
</ng-container>
39+
}
3740

38-
<ng-container *ngIf="isMonthVisible">
41+
@if (isMonthVisible) {
3942
<po-calendar-header (p-previous)="updateYear(-1)" (p-next)="updateYear(1)">
4043
<span class="po-clickable" (click)="selectDisplayMode('year')">
4144
{{ displayYear }}
4245
</span>
4346
</po-calendar-header>
44-
4547
<div class="po-calendar-content">
4648
<div class="po-calendar-labels">
4749
<div class="po-calendar-label">
4850
{{ monthLabel }}
4951
</div>
5052
</div>
5153
<div class="po-calendar-content-list-month">
52-
<div
53-
*ngFor="let month of displayMonths; let i = index"
54-
class="po-calendar-month"
55-
[ngClass]="getBackgroundColor(i, displayMonthNumber)"
56-
(click)="onSelectMonth(displayYear, i)"
57-
attr-calendar
58-
>
59-
<span [ngClass]="getForegroundColor(i, displayMonthNumber)">
60-
{{ month }}
61-
</span>
62-
</div>
54+
@for (month of displayMonths; track month; let i = $index) {
55+
<div
56+
class="po-calendar-month"
57+
[ngClass]="getBackgroundColor(i, displayMonthNumber)"
58+
(click)="onSelectMonth(displayYear, i)"
59+
attr-calendar
60+
>
61+
<span [ngClass]="getForegroundColor(i, displayMonthNumber)">
62+
{{ month }}
63+
</span>
64+
</div>
65+
}
6366
</div>
6467
</div>
65-
</ng-container>
68+
}
6669

67-
<ng-container *ngIf="isYearVisible">
70+
@if (isYearVisible) {
6871
<po-calendar-header (p-previous)="updateYear(-10)" (p-next)="updateYear(10)">
6972
{{ displayStartDecade }} - {{ displayFinalDecade }}
7073
</po-calendar-header>
71-
7274
<div class="po-calendar-content">
7375
<div class="po-calendar-labels">
7476
<div class="po-calendar-label">
7577
{{ yearLabel }}
7678
</div>
7779
</div>
78-
7980
<div class="po-calendar-content-list-year">
80-
<div
81-
*ngFor="let year of displayDecade; let i = index"
82-
class="po-calendar-year"
83-
[ngClass]="getBackgroundColor(year, currentYear)"
84-
(click)="onSelectYear(year, displayMonthNumber)"
85-
attr-calendar
86-
>
87-
<span [ngClass]="getForegroundColor(year, currentYear)">
88-
{{ year }}
89-
</span>
90-
</div>
81+
@for (year of displayDecade; track year; let i = $index) {
82+
<div
83+
class="po-calendar-year"
84+
[ngClass]="getBackgroundColor(year, currentYear)"
85+
(click)="onSelectYear(year, displayMonthNumber)"
86+
attr-calendar
87+
>
88+
<span [ngClass]="getForegroundColor(year, currentYear)">
89+
{{ year }}
90+
</span>
91+
</div>
92+
}
9193
</div>
9294
</div>
93-
</ng-container>
95+
}
9496

95-
<ng-container *ngIf="!range">
97+
@if (!range) {
9698
<div class="po-calendar-footer">
9799
<div class="po-calendar-footer-today">
98100
<button
@@ -107,5 +109,5 @@
107109
</button>
108110
</div>
109111
</div>
110-
</ng-container>
112+
}
111113
</div>

0 commit comments

Comments
 (0)