Skip to content

Commit 83d73ee

Browse files
freddidierRTEfreddidierRTE
committed
Update frontend with new angular control flow syntax
Signed-off-by: freddidierRTE <[email protected]>
1 parent 0a6ea20 commit 83d73ee

File tree

64 files changed

+655
-496
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+655
-496
lines changed

‎frontend/src/app/components/activityarea/ActivityAreaComponent.html‎

Lines changed: 53 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,22 @@
88

99
<div class="opfab-activityarea-title" translate>{{ titleI18nKey }}</div>
1010

11-
<of-spinner *ngIf="!isScreenLoaded"></of-spinner>
12-
<div *ngIf="activityAreaPage?.activityAreaClusters?.length === 0">
11+
@if (!isScreenLoaded) {
12+
<of-spinner></of-spinner>
13+
} @if (activityAreaPage?.activityAreaClusters?.length === 0) {
14+
<div>
1315
<div id="opfab-no-activityarea" style="text-align: center; font-size: 20px; padding-top: 100px" translate>
1416
activityArea.noAreaAvailable
1517
</div>
1618
</div>
17-
<div id="opfab-activity-areas" *ngIf="activityAreaPage?.activityAreaClusters?.length" #opfabActivityAreaScreen>
19+
} @if (activityAreaPage?.activityAreaClusters?.length) {
20+
<div id="opfab-activity-areas" #opfabActivityAreaScreen>
1821
<form [formGroup]="activityAreaForm">
1922
<div class="opfab-activityarea-container">
20-
<div class="opfab-activityarea-clusters" *ngFor="let cluster of activityAreaPage.activityAreaClusters">
21-
<div *ngIf="cluster.name !== ' '">
23+
@for (cluster of activityAreaPage.activityAreaClusters; track cluster) {
24+
<div class="opfab-activityarea-clusters">
25+
@if (cluster.name !== ' ') {
26+
<div>
2227
<label class="opfab-checkbox">
2328
<span class="opfab-activityarea-cluster-name">{{ cluster.name }} &nbsp;</span>
2429
<input
@@ -29,9 +34,11 @@
2934
<span class="opfab-checkbox-checkmark" style="margin-top: 6px; margin-left: 6px"></span>
3035
</label>
3136
</div>
37+
}
3238

3339
<table class="opfab-activityarea-table" aria-describedby="activity area table">
34-
<tr *ngFor="let line of cluster.lines">
40+
@for (line of cluster.lines; track line) {
41+
<tr>
3542
<th class="opfab-table-line" style="width: 60%">
3643
<label class="opfab-checkbox opfab-activityarea-checkbox">
3744
<input
@@ -44,46 +51,54 @@
4451
</label>
4552
</th>
4653
<td>
47-
<ng-template #connected>
48-
<div class="opfab-tooltip" style="float: left; margin-top: -12px">
49-
<span
50-
class="opfab-rounded-badge opfab-blue-background opfab-activityarea-badge"
51-
style="display: inline"
52-
>{{ line.connectedUsers.length }} </span
53-
>&nbsp;&nbsp;<span
54-
[id]="'table-line-' + line.entityId"
55-
class="opfab-activityarea-table-line"
56-
style="overflow: hidden"
57-
>{{ line.connectedUsersText }}
58-
</span>
59-
<span
60-
*ngIf="isEllipsisActive('table-line-' + line.entityId)"
61-
class="opfab-tooltip-content bottom"
62-
style="margin-top: 0px; z-index: 1; text-align: left">
63-
<div *ngFor="let user of line.connectedUsers">&nbsp; {{ user }} &nbsp;</div>
64-
</span>
65-
</div>
66-
</ng-template>
67-
<ng-template #disconnected>
68-
<span class="opfab-rounded-badge opfab-grey-background opfab-activityarea-badge"
69-
>0</span
70-
></ng-template
71-
>
7254
<ng-template #usersDropdown>
73-
<div *ngFor="let user of line.connectedUsers">&nbsp; {{ user }} &nbsp;</div>
55+
@for (user of line.connectedUsers; track user) {
56+
<div>&nbsp; {{ user }} &nbsp;</div>
57+
}
7458
</ng-template>
75-
<span *ngIf="line.connectedUsers.length > 0; then connected; else disconnected"></span>
59+
@if (line.connectedUsers.length > 0) {
60+
61+
<div class="opfab-tooltip" style="float: left; margin-top: -12px">
62+
<span
63+
class="opfab-rounded-badge opfab-blue-background opfab-activityarea-badge"
64+
style="display: inline"
65+
>{{ line.connectedUsers.length }} </span
66+
>&nbsp;&nbsp;<span
67+
[id]="'table-line-' + line.entityId"
68+
class="opfab-activityarea-table-line"
69+
style="overflow: hidden"
70+
>{{ line.connectedUsersText }}
71+
</span>
72+
@if (isEllipsisActive('table-line-' + line.entityId)) {
73+
<span
74+
class="opfab-tooltip-content bottom"
75+
style="margin-top: 0px; z-index: 1; text-align: left">
76+
@for (user of line.connectedUsers; track user) {
77+
<div>&nbsp; {{ user }} &nbsp;</div>
78+
}
79+
</span>
80+
}
81+
</div>
82+
83+
} @else {
84+
85+
<span class="opfab-rounded-badge opfab-grey-background opfab-activityarea-badge">0</span>
86+
}
7687
</td>
7788
</tr>
89+
}
7890
</table>
7991
</div>
92+
}
8093
</div>
8194

8295
<br />
8396

84-
<div *ngIf="displaySendResultError">
97+
@if (displaySendResultError) {
98+
<div>
8599
<h4 translate style="text-align: center" class="text-danger">{{ messageAfterSavingSettings }}</h4>
86100
</div>
101+
}
87102
<div style="text-align: center; width: 100%">
88103
<button
89104
id="opfab-activityarea-btn-confirm"
@@ -97,8 +112,10 @@ <h4 translate style="text-align: center" class="text-danger">{{ messageAfterSavi
97112
</div>
98113
</form>
99114
</div>
115+
}
100116

101117
<div class="my-3">
102-
<of-spinner *ngIf="saveSettingsInProgress" [seeInModal]="true" loadingText="activityArea.savingInProgress">
103-
</of-spinner>
118+
@if (saveSettingsInProgress) {
119+
<of-spinner [seeInModal]="true" loadingText="activityArea.savingInProgress"> </of-spinner>
120+
}
104121
</div>

‎frontend/src/app/components/activityarea/ActivityAreaComponent.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ import {ActivityAreaPage} from 'app/components/activityarea/view/ActivityAreaPag
1414
import {Subject, firstValueFrom, takeUntil} from 'rxjs';
1515
import {ModalService} from '@ofServices/modal/ModalService';
1616
import {TranslateModule} from '@ngx-translate/core';
17-
import {NgIf, NgFor} from '@angular/common';
17+
1818
import {SpinnerComponent} from '../share/spinner/SpinnerComponent';
1919
import {I18n} from '../../model/I18n';
2020

2121
@Component({
2222
selector: 'of-activityarea',
2323
templateUrl: './ActivityAreaComponent.html',
2424
styleUrls: ['./ActivityAreaComponent.scss'],
25-
imports: [TranslateModule, NgIf, SpinnerComponent, FormsModule, ReactiveFormsModule, NgFor]
25+
imports: [TranslateModule, SpinnerComponent, FormsModule, ReactiveFormsModule]
2626
})
2727
export class ActivityAreaComponent implements OnInit, OnDestroy {
2828
@Input() titleI18nKey = 'activityArea.title';

‎frontend/src/app/components/archives/components/archived-card-detail/ArchivedCardDetailComponent.html‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,25 @@
1919
<span translate>feed.received</span>
2020
{{ getFormattedDate(card.publishDate) }} <span translate> feed.at </span>
2121
<span>{{ getFormattedTime(card.publishDate) }}</span>
22-
<span *ngIf="fromEntityOrRepresentativeSelectedCard" translate> feed.from </span>
22+
@if (fromEntityOrRepresentativeSelectedCard) {
23+
<span translate> feed.from </span>
24+
}
2325
<span>{{ fromEntityOrRepresentativeSelectedCard }}</span>
24-
<span *ngIf="!!card.deletionDate">
26+
@if (!!card.deletionDate) {
27+
<span>
2528
<span style="margin-left: 10px; margin-right: 10px">-</span>
2629
<span translate>feed.deleted</span>
2730
{{ getFormattedDate(card.deletionDate) }} <span translate> feed.at </span>
2831
{{ getFormattedTime(card.deletionDate) }}
2932
</span>
33+
}
3034
<br />
3135
<span translate> feed.businessPeriod </span>
32-
{{ getFormattedDateAndTime(card.startDate) }} - {{ getFormattedDateAndTime(card.endDate) }}
33-
<br *ngIf="entityRecipientsForFooter.length > 0" />
34-
{{ entityRecipientsForFooter }}
35-
<br *ngIf="entityRecipientsForInformationForFooter.length > 0" />
36-
{{ entityRecipientsForInformationForFooter }}
36+
{{ getFormattedDateAndTime(card.startDate) }} - {{ getFormattedDateAndTime(card.endDate) }} @if
37+
(entityRecipientsForFooter.length > 0) {
38+
<br />
39+
} {{ entityRecipientsForFooter }} @if (entityRecipientsForInformationForFooter.length > 0) {
40+
<br />
41+
} {{ entityRecipientsForInformationForFooter }}
3742
</span>
3843
</div>

‎frontend/src/app/components/archives/components/archived-card-detail/ArchivedCardDetailComponent.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,13 @@ import {DateTimeFormatterService} from 'app/services/dateTimeFormatter/DateTimeF
1515
import {EntitiesService} from '@ofServices/entities/EntitiesService';
1616
import {Utilities} from '../../../../utils/Utilities';
1717
import {SimplifiedCardViewComponent} from '../../../share/simplified-card-view/SimplifiedCardViewComponent';
18-
import {NgIf} from '@angular/common';
1918

2019
@Component({
2120
selector: 'of-archived-card-detail',
2221
templateUrl: './ArchivedCardDetailComponent.html',
2322
styleUrls: ['./ArchivedCardDetailComponent.scss'],
2423
changeDetection: ChangeDetectionStrategy.OnPush,
25-
imports: [SimplifiedCardViewComponent, TranslateModule, NgIf]
24+
imports: [SimplifiedCardViewComponent, TranslateModule]
2625
})
2726
export class ArchivedCardDetailComponent implements OnInit {
2827
private readonly translate = inject(TranslateService);

‎frontend/src/app/components/card/components/card-actions/CardActionsComponent.html‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,28 @@
66
<!-- SPDX-License-Identifier: MPL-2.0 -->
77
<!-- This file is part of the OperatorFabric project. -->
88

9-
<div class="opfab-right-menu-item" *ngIf="showCreateCopyButton">
9+
@if (showCreateCopyButton) {
10+
<div class="opfab-right-menu-item">
1011
<a id="opfab-card-create-copy" class="opfab-right-menu-link" (click)="createCopy()">
1112
<div class="opfab-menu-icon opfab-icon-copy"></div>
1213
<div translate>{{ 'button.createCopy' }}</div>
1314
</a>
1415
</div>
15-
16-
<div class="opfab-right-menu-item" *ngIf="showEditButton">
16+
} @if (showEditButton) {
17+
<div class="opfab-right-menu-item">
1718
<a id="opfab-card-edit" class="opfab-right-menu-link" (click)="editCard()">
1819
<div class="opfab-menu-icon opfab-icon-edit"></div>
1920
<div translate>{{ 'button.edit' }}</div>
2021
</a>
2122
</div>
22-
23-
<div class="opfab-right-menu-item" *ngIf="showDeleteButton">
23+
} @if (showDeleteButton) {
24+
<div class="opfab-right-menu-item">
2425
<a id="opfab-card-delete" class="opfab-right-menu-link" (click)="openDeleteConfirmationModal()">
2526
<div class="opfab-menu-icon opfab-icon-trash"></div>
2627
<div translate>{{ 'button.delete' }}</div>
2728
</a>
2829
</div>
30+
}
2931

3032
<ng-template #userCardEdition let-modal>
3133
<div class="modal-header">
@@ -63,4 +65,6 @@
6365
</div>
6466
</ng-template>
6567

66-
<of-spinner *ngIf="deleteInProgress" [seeInModal]="true" loadingText="shared.deleteInProgress"> </of-spinner>
68+
@if (deleteInProgress) {
69+
<of-spinner [seeInModal]="true" loadingText="shared.deleteInProgress"> </of-spinner>
70+
}

‎frontend/src/app/components/card/components/card-actions/CardActionsComponent.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import {ServerResponseStatus} from 'app/server/ServerResponse';
3333
import {LoggerService} from 'app/services/logs/LoggerService';
3434
import {ModalService} from '@ofServices/modal/ModalService';
3535
import {I18n} from 'app/model/I18n';
36-
import {NgIf} from '@angular/common';
36+
3737
import {TranslateModule} from '@ngx-translate/core';
3838
import {UserCardComponent} from '../../../usercard/UserCardComponent';
3939
import {SpinnerComponent} from '../../../share/spinner/SpinnerComponent';
@@ -45,7 +45,7 @@ import {NavigationService, PageType} from '@ofServices/navigation/NavigationServ
4545
selector: 'of-card-actions',
4646
templateUrl: './CardActionsComponent.html',
4747
styleUrls: ['./CardActionsComponent.scss'],
48-
imports: [NgIf, TranslateModule, UserCardComponent, SpinnerComponent]
48+
imports: [TranslateModule, UserCardComponent, SpinnerComponent]
4949
})
5050
export class CardActionsComponent implements OnInit, OnChanges, OnDestroy {
5151
private readonly modalService = inject(NgbModal);

‎frontend/src/app/components/card/components/card-body/CardBodyComponent.html‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
<ul class="opfab-card-header opfab-line-undertab">
1212
<li class="opfab-menu-item-right">
1313
<span>
14-
<div *ngIf="isThereEnoughSpaceToShowCard()" style="display: flex">
14+
@if (isThereEnoughSpaceToShowCard()) {
15+
<div style="display: flex">
1516
<of-card-actions
1617
style="display: flex"
1718
[card]="this.card"
@@ -20,18 +21,15 @@
2021
[templateInitialized]="this.templateInitialized"
2122
(closeCardDetail)="closeDetails()">
2223
</of-card-actions>
23-
<div
24-
id="opfab-card-detail-fullscreen-button"
25-
*ngIf="!fullscreen && showMaxAndReduceButton"
26-
class="opfab-max-and-reduce-icons">
24+
@if (!fullscreen && showMaxAndReduceButton) {
25+
<div id="opfab-card-detail-fullscreen-button" class="opfab-max-and-reduce-icons">
2726
<div class="opfab-menu-icon opfab-icon-maximize" (click)="setFullScreen(true)"></div>
2827
</div>
29-
<div
30-
id="opfab-card-detail-fullscreen-button"
31-
*ngIf="fullscreen && showMaxAndReduceButton"
32-
class="opfab-max-and-reduce-icons">
28+
} @if (fullscreen && showMaxAndReduceButton) {
29+
<div id="opfab-card-detail-fullscreen-button" class="opfab-max-and-reduce-icons">
3330
<div class="opfab-menu-icon opfab-icon-reduce" (click)="setFullScreen(false)"></div>
3431
</div>
32+
}
3533
<div
3634
id="opfab-close-card"
3735
class="opfab-close-card-link"
@@ -40,7 +38,8 @@
4038
&times;
4139
</div>
4240
</div>
43-
<div *ngIf="!isThereEnoughSpaceToShowCard()" style="display: flex">
41+
} @if (!isThereEnoughSpaceToShowCard()) {
42+
<div style="display: flex">
4443
<div
4544
id="opfab-close-card"
4645
class="opfab-close-card-link"
@@ -49,6 +48,7 @@
4948
&times;
5049
</div>
5150
</div>
51+
}
5252
</span>
5353
</li>
5454
<li class="opfab-tab opfab-menu-item-left" data-toggle="tab">
@@ -60,14 +60,16 @@
6060
<div style="padding-right: 3px">
6161
<!-- padding is necessary to see box shadow-->
6262

63-
<div *ngIf="showDetailCardHeader" class="opfab-card-response-header">
63+
@if (showDetailCardHeader) {
64+
<div class="opfab-card-response-header">
6465
<of-card-header
6566
[card]="this.card"
6667
[childCards]="this.childCards"
6768
[cardState]="this.cardState"
6869
[lttdExpiredIsTrue]="this.lttdExpiredIsTrue">
6970
</of-card-header>
7071
</div>
72+
}
7173

7274
<of-template-rendering
7375
[card]="card"
@@ -85,12 +87,11 @@
8587

8688
<div style="text-align: center; width: 100%">
8789
<div id="opfab-card-detail-footer">
88-
<div
89-
style="text-align: left; margin-top: 5px"
90-
*ngIf="displayCardAcknowledgedFooter()"
91-
class="opfab-card-response-header">
90+
@if (displayCardAcknowledgedFooter()) {
91+
<div style="text-align: left; margin-top: 5px" class="opfab-card-response-header">
9292
<of-card-acks-footer style="display: flex" [card]="this.card"></of-card-acks-footer>
9393
</div>
94+
}
9495

9596
<div style="display: flex">
9697
<of-card-footer-text [card]="this.card" [childCards]="this.childCards">
@@ -104,13 +105,14 @@
104105
[isResponseLocked]="this.isResponseLocked"
105106
(unlockAnswerEvent)="this.unlockAnswer()">
106107
</of-card-response>
108+
@if (areAcknowledgmentDataReady()) {
107109
<of-card-ack
108-
*ngIf="areAcknowledgmentDataReady()"
109110
[card]="this.card"
110111
[cardState]="this.cardState"
111112
[lttdExpiredIsTrue]="this.lttdExpiredIsTrue"
112113
(closeCardDetail)="closeDetailsAfterAcknowledgment()">
113114
</of-card-ack>
115+
}
114116
</div>
115117
</div>
116118
</div>

‎frontend/src/app/components/card/components/card-body/CardBodyComponent.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import {SelectedCardService} from '@ofServices/selectedCard/SelectedCardService'
3737
import {CardsService} from '@ofServices/cards/CardsService';
3838
import {OpfabStore} from '../../../../store/OpfabStore';
3939
import {CardAction} from 'app/model/CardAction';
40-
import {NgIf} from '@angular/common';
40+
4141
import {CardActionsComponent} from '../card-actions/CardActionsComponent';
4242
import {CardHeaderComponent} from '../card-header/CardHeaderComponent';
4343
import {TemplateRenderingComponent} from '../../../share/template-rendering/TemplateRenderingComponent';
@@ -57,7 +57,6 @@ import {NavigationService, PageType} from '@ofServices/navigation/NavigationServ
5757
styleUrls: ['./CardBodyComponent.scss'],
5858
encapsulation: ViewEncapsulation.None,
5959
imports: [
60-
NgIf,
6160
CardActionsComponent,
6261
CardHeaderComponent,
6362
TemplateRenderingComponent,

0 commit comments

Comments
 (0)