feat: adds global nodes management form

src/app/app.module.ts

@@ -107,6 +107,7 @@ import {I18nModule} from "./core/i18n/i18n.module";
 import {OriginDestinationComponent} from "./services/analytics/origin-destination/components/origin-destination.component";
 import {SbbToggleModule} from "@sbb-esta/angular/toggle";
 import {ToggleSwitchButtonComponent} from "./view/toggle-switch-button/toggle-switch-button.component";
+import {GlobalNodesManagementComponent} from "./view/editor-edit-tools-view-component/global-nodes-management/global-nodes-management.component";
 
 @NgModule({
   declarations: [
@@ -242,6 +243,7 @@ import {ToggleSwitchButtonComponent} from "./view/toggle-switch-button/toggle-sw
     SbbBreadcrumbModule,
     SbbAutocompleteModule,
     I18nModule,
+    GlobalNodesManagementComponent,
   ],
   bootstrap: environment.customElement ? [] : [AppComponent],
   providers: [

src/app/view/editor-edit-tools-view-component/editor-edit-tools-view.component.html

@@ -29,6 +29,13 @@ <h2 class="SummaryTitle">{{ "app.view.editor-edit-tools-view-component.edit" | t
     </sbb-accordion>
   </sbb-expansion-panel>
 
+  <sbb-expansion-panel [expanded]="false" [hideToggle]="false" [disabled]="!getVariantIsWritable()">
+    <sbb-expansion-panel-header>{{
+      "app.view.editor-edit-tools-view-component.nodes" | translate
+    }}</sbb-expansion-panel-header>
+    <sbb-global-nodes-management />
+  </sbb-expansion-panel>
+
   <sbb-expansion-panel
     [expanded]="getVariantIsWritable() && !getAreMultiObjectSelected()"
     [disabled]="!getVariantIsWritable()"

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

@@ -0,0 +1,52 @@
+<section class="global-nodes-management">
+  <div class="search">
+    <input
+      sbbInput
+      type="search"
+      [(ngModel)]="query"
+      [placeholder]="
+        'app.view.editor-edit-tools-view-component.nodes-search-placeholder' | translate
+      "
+    />
+  </div>
+  <div class="nodes-list">
+    @if (getVisibleNodes().length) {
+      <table>
+        <thead>
+          <tr>
+            @for (column of ["nodes-expanded", "nodes"]; track column) {
+              <th scope="col">
+                {{ "app.view.editor-edit-tools-view-component." + column | translate }}
+              </th>
+            }
+          </tr>
+          <tr>
+            <td>
+              <sbb-checkbox
+                [checked]="!!getGlobalCheckboxStatus()"
+                [indeterminate]="getGlobalCheckboxStatus() === undefined"
+                (change)="toggleIsCollapsedOnAllVisibleNodes(!$event.checked)"
+              />
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          @for (node of getVisibleNodes(); track node.getId()) {
+            <tr>
+              <td class="offset">
+                <sbb-checkbox
+                  [checked]="!node.getIsCollapsed()"
+                  (change)="node.setIsCollapsed(!$event.checked)"
+                />
+              </td>
+              <td>{{ node.getBetriebspunktName() }}</td>
+              <td>{{ node.getFullName() }}</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    } @else {
+      <p>{{ "app.view.editor-edit-tools-view-component.nodes-no-result" | translate }}</p>
+    }
+  </div>
+</section>

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

@@ -0,0 +1,59 @@
+.global-nodes-management {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: stretch;
+
+  .search {
+    position: relative;
+
+    input {
+      width: 100%;
+    }
+    .sbb-icon {
+      position: absolute;
+      right: 5px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  .nodes-list {
+    overflow-x: auto;
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+
+      th,
+      td {
+        font-family: var(--sbb-font-light);
+        font-weight: var(--sbb-font-weight-normal);
+        padding: 8px 0;
+        white-space: nowrap;
+        vertical-align: middle;
+      }
+
+      th {
+        text-align: start;
+      }
+      tbody tr {
+        border-top: var(--sbb-border-width-thin) solid var(--sbb-expansion-panel-border-color-open);
+      }
+      td.offset {
+        padding-left: 10px;
+      }
+      tbody td:last-child {
+        width: 99%;
+      }
+      thead th:not(:last-child) {
+        padding-right: 13px;
+      }
+
+      .sbb-checkbox {
+        display: block;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,64 @@
+import {Component} from "@angular/core";
+import {FormsModule} from "@angular/forms";
+import {SbbCheckbox} from "@sbb-esta/angular/checkbox";
+import {SbbInput} from "@sbb-esta/angular/input";
+
+import {NodeService} from "../../../services/data/node.service";
+import {I18nModule} from "../../../core/i18n/i18n.module";
+
+function normalizeStr(str: string): string {
+  return str
+    .toLowerCase()
+    .trim()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "");
+}
+
+@Component({
+  selector: "sbb-global-nodes-management",
+  standalone: true,
+  imports: [FormsModule, SbbCheckbox, SbbInput, I18nModule],
+  templateUrl: "./global-nodes-management.component.html",
+  styleUrl: "./global-nodes-management.component.scss",
+})
+export class GlobalNodesManagementComponent {
+  query: string;
+
+  constructor(private nodeService: NodeService) {
+    this.query = "";
+  }
+
+  toggleIsCollapsedOnAllVisibleNodes(newValue: boolean) {
+    this.getVisibleNodes().forEach((node) => {
+      node.setIsCollapsed(newValue);
+    });
+  }
+
+  getVisibleNodes() {
+    const allNodes = this.nodeService.getNodes();
+    const normalizedQuery = normalizeStr(this.query);
+    if (!normalizedQuery) return allNodes;
+
+    return allNodes.filter(
+      (node) =>
+        normalizeStr(node.getFullName()).includes(normalizedQuery) ||
+        normalizeStr(node.getBetriebspunktName()).includes(normalizedQuery),
+    );
+  }
+  getGlobalCheckboxStatus(): boolean | undefined {
+    let allCollapsed = true;
+    let noneCollapsed = true;
+    this.getVisibleNodes().every((node) => {
+      const isCollapsed = node.getIsCollapsed();
+      allCollapsed = allCollapsed && isCollapsed;
+      noneCollapsed = noneCollapsed && !isCollapsed;
+
+      // If both allCollapsed and noneCollapsed fail, stop iterating
+      return allCollapsed || noneCollapsed;
+    });
+
+    if (allCollapsed) return false;
+    if (noneCollapsed) return true;
+    return undefined;
+  }
+}

src/assets/i18n/en.json

@@ -337,7 +337,10 @@
           "trainruns": "Trainruns",
           "notes": "Notes",
           "nodes": "Nodes"
-        }
+        },
+        "nodes-search-placeholder": "Search for names or trigrams",
+        "nodes-expanded": "Expanded",
+        "nodes-no-result": "There is no node matching the query."
       },
       "editor-filter-view": {
         "filter": "Filter",

src/assets/i18n/fr.json

@@ -336,7 +336,10 @@
           "trainruns": "Trajets de train",
           "notes": "Notes",
           "nodes": "Noeuds"
-        }
+        },
+        "nodes-search-placeholder": "Rechercher par noms ou trigrammes",
+        "nodes-expanded": "Agrandis",
+        "nodes-no-result": "Aucun noeud ne correspond à cette recherche."
       },
       "editor-filter-view": {
         "filter": "Filtres",