Skip to content

Commit d286418

Browse files
jacomyaljacomyal
committed
front: improves global nodes management panel
This commit handles various feedbacks from reviewers on PR: #613 Details: - Fixes some FR translations - Renames "visible nodes" as "matching nodes" - Caches the matching nodes array - Adds a confirmation modal when clicking the global checkbox
1 parent 849ba79 commit d286418

File tree

4 files changed

+95
-32
lines changed

4 files changed

+95
-32
lines changed

‎src/app/view/editor-edit-tools-view-component/global-nodes-management/global-nodes-management.component.html‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<section class="global-nodes-management">
22
<div class="search">
33
<input
4+
#globalNodesManagementQuery
45
sbbInput
56
type="search"
6-
[(ngModel)]="query"
7+
[value]="query"
8+
(input)="updateState({query: globalNodesManagementQuery.value})"
79
[placeholder]="
810
'app.view.editor-edit-tools-view-component.nodes-search-placeholder' | translate
911
"
1012
/>
1113
</div>
1214
<div class="nodes-list">
13-
@if (getVisibleNodes().length) {
15+
@if (matchingNodes.length) {
1416
<table>
1517
<thead>
1618
<tr>
@@ -20,23 +22,25 @@
2022
</th>
2123
}
2224
</tr>
23-
<tr>
24-
<td>
25-
<sbb-checkbox
26-
[checked]="!!getGlobalCheckboxStatus()"
27-
[indeterminate]="getGlobalCheckboxStatus() === undefined"
28-
(change)="toggleIsCollapsedOnAllVisibleNodes(!$event.checked)"
29-
/>
30-
</td>
31-
</tr>
25+
@if (matchingNodes.length > 1) {
26+
<tr>
27+
<td>
28+
<sbb-checkbox
29+
[checked]="!!getGlobalCheckboxStatus()"
30+
[indeterminate]="getGlobalCheckboxStatus() === undefined"
31+
(click)="onClickGlobalCheckbox($event)"
32+
/>
33+
</td>
34+
</tr>
35+
}
3236
</thead>
3337
<tbody>
34-
@for (node of getVisibleNodes(); track node.getId()) {
38+
@for (node of matchingNodes; track node.getId()) {
3539
<tr>
3640
<td class="offset">
3741
<sbb-checkbox
3842
[checked]="!node.getIsCollapsed()"
39-
(change)="node.setIsCollapsed(!$event.checked)"
43+
(change)="toggleIsCollapsed(node, !$event.checked)"
4044
/>
4145
</td>
4246
<td>{{ node.getBetriebspunktName() }}</td>

‎src/app/view/editor-edit-tools-view-component/global-nodes-management/global-nodes-management.component.ts‎

Lines changed: 64 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import {SbbInput} from "@sbb-esta/angular/input";
55

66
import {NodeService} from "../../../services/data/node.service";
77
import {I18nModule} from "../../../core/i18n/i18n.module";
8+
import {Node} from "../../../models/node.model";
9+
import {DataService} from "../../../services/data/data.service";
10+
import {UiInteractionService} from "../../../services/ui/ui.interaction.service";
11+
import {ConfirmationDialogParameter} from "../../dialogs/confirmation-dialog/confirmation-dialog.component";
812

913
function normalizeStr(str: string): string {
1014
return str
@@ -23,32 +27,39 @@ function normalizeStr(str: string): string {
2327
})
2428
export class GlobalNodesManagementComponent {
2529
query: string;
30+
allNodes: Node[];
31+
matchingNodes: Node[];
2632

27-
constructor(private nodeService: NodeService) {
33+
constructor(
34+
private dataService: DataService,
35+
private nodeService: NodeService,
36+
private uiInteractionService: UiInteractionService,
37+
) {
2838
this.query = "";
39+
this.allNodes = this.nodeService.getNodes();
40+
this.nodeService.nodes.subscribe((nodes) => this.updateState({nodes}));
2941
}
3042

31-
toggleIsCollapsedOnAllVisibleNodes(newValue: boolean) {
32-
this.getVisibleNodes().forEach((node) => {
33-
node.setIsCollapsed(newValue);
34-
});
35-
}
43+
updateState({nodes = this.allNodes, query = this.query}: {nodes?: Node[]; query?: string}) {
44+
// Save state locally
45+
this.query = query;
46+
this.allNodes = nodes;
3647

37-
getVisibleNodes() {
38-
const allNodes = this.nodeService.getNodes();
3948
const normalizedQuery = normalizeStr(this.query);
40-
if (!normalizedQuery) return allNodes;
4149

42-
return allNodes.filter(
43-
(node) =>
44-
normalizeStr(node.getFullName()).includes(normalizedQuery) ||
45-
normalizeStr(node.getBetriebspunktName()).includes(normalizedQuery),
46-
);
50+
this.matchingNodes = normalizedQuery
51+
? this.allNodes.filter(
52+
(node) =>
53+
normalizeStr(node.getFullName()).includes(normalizedQuery) ||
54+
normalizeStr(node.getBetriebspunktName()).includes(normalizedQuery),
55+
)
56+
: this.allNodes;
4757
}
58+
4859
getGlobalCheckboxStatus(): boolean | undefined {
4960
let allCollapsed = true;
5061
let noneCollapsed = true;
51-
this.getVisibleNodes().every((node) => {
62+
this.matchingNodes.every((node) => {
5263
const isCollapsed = node.getIsCollapsed();
5364
allCollapsed = allCollapsed && isCollapsed;
5465
noneCollapsed = noneCollapsed && !isCollapsed;
@@ -61,4 +72,42 @@ export class GlobalNodesManagementComponent {
6172
if (noneCollapsed) return true;
6273
return undefined;
6374
}
75+
76+
toggleIsCollapsed(node: Node, isCollapsed: boolean) {
77+
node.setIsCollapsed(isCollapsed);
78+
this.dataService.triggerViewUpdate();
79+
}
80+
onClickGlobalCheckbox(event: MouseEvent) {
81+
event.preventDefault();
82+
event.stopPropagation();
83+
84+
const currentGlobalCheckboxStatus = this.getGlobalCheckboxStatus();
85+
const newCheckboxStatus = !currentGlobalCheckboxStatus;
86+
const newIsCollapsed = !newCheckboxStatus;
87+
88+
const allNodesImpacted = this.allNodes.length === this.matchingNodes.length;
89+
const impactedNodesCount = this.matchingNodes.length;
90+
91+
const apply = () => {
92+
this.matchingNodes.forEach((node) => {
93+
node.setIsCollapsed(newIsCollapsed);
94+
});
95+
};
96+
97+
const dialogTitle = $localize`:@@app.view.editor-edit-tools-view-component.global-nodes-management:Global nodes management`;
98+
const dialogContent = newIsCollapsed
99+
? allNodesImpacted
100+
? $localize`:@@app.view.editor-edit-tools-view-component.confirm-collapse-all:Are you sure you want to collapse all nodes?`
101+
: $localize`:@@app.view.editor-edit-tools-view-component.confirm-collapse-matching:Are you sure you want to collapse the ${impactedNodesCount}:count: nodes matching "${this.query}:query:"?`
102+
: allNodesImpacted
103+
? $localize`:@@app.view.editor-edit-tools-view-component.confirm-expand-all:Are you sure you want to expand all nodes?`
104+
: $localize`:@@app.view.editor-edit-tools-view-component.confirm-expand-matching:Are you sure you want to expand the ${impactedNodesCount}:count: nodes matching "${this.query}:query:"?`;
105+
const confirmationDialogParameter = new ConfirmationDialogParameter(dialogTitle, dialogContent);
106+
107+
this.uiInteractionService
108+
.showConfirmationDiagramDialog(confirmationDialogParameter)
109+
.subscribe((confirmed: boolean) => {
110+
if (confirmed) apply();
111+
});
112+
}
64113
}

‎src/assets/i18n/en.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -340,7 +340,12 @@
340340
},
341341
"nodes-search-placeholder": "Search for names or trigrams",
342342
"nodes-expanded": "Expanded",
343-
"nodes-no-result": "There is no node matching the query."
343+
"nodes-no-result": "There is no node matching the query.",
344+
"global-nodes-management": "Global nodes management",
345+
"confirm-expand-all": "Are you sure you want to expand all nodes?",
346+
"confirm-expand-matching": "Are you sure you want to expand the {$count} nodes matching \"{$query}\"?",
347+
"confirm-collapse-all": "Are you sure you want to collapse all nodes?",
348+
"confirm-collapse-matching": "Are you sure you want to collapse the {$count} nodes matching \"{$query}\"?"
344349
},
345350
"editor-filter-view": {
346351
"filter": "Filter",

‎src/assets/i18n/fr.json‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -337,9 +337,14 @@
337337
"notes": "Notes",
338338
"nodes": "Noeuds"
339339
},
340-
"nodes-search-placeholder": "Rechercher par noms ou trigrammes",
341-
"nodes-expanded": "Agrandis",
342-
"nodes-no-result": "Aucun noeud ne correspond à cette recherche."
340+
"nodes-search-placeholder": "Rechercher par nom ou trigramme",
341+
"nodes-expanded": "Développés",
342+
"nodes-no-result": "Aucun noeud ne correspond à cette recherche.",
343+
"global-nodes-management": "Gestion globale des noeuds",
344+
"confirm-expand-all": "Êtes-vous sûr(e) de vouloir développer tous les noeuds ?",
345+
"confirm-expand-matching": "Êtes-vous sûr(e) de vouloir développer les {$count} noeuds qui contiennent «{$query}» ?",
346+
"confirm-collapse-all": "Êtes-vous sûr(e) de vouloir réduire tous les noeuds ?",
347+
"confirm-collapse-matching": "Êtes-vous sûr(e) de vouloir réduire les {$count} noeuds qui contiennent «{$query}» ?"
343348
},
344349
"editor-filter-view": {
345350
"filter": "Filtres",

0 commit comments

Comments
 (0)