From a535e9399c9d055773fff995beff3195ca3c1e5e Mon Sep 17 00:00:00 2001 From: dominik003 Date: Mon, 6 May 2024 17:30:59 +0200 Subject: [PATCH] refactor: Apply control flow to diagram cache This changes the previous usage of `ngIf` and `ngFor` to the new angular control flow introduced in angular v17. This not only improves code readability, but also allows better alignment and combination of conditions. To test this, we introduced diagram cache stories in #1549, which can be compared to the stories in this PR. --- .../model-diagram-dialog.component.html | 164 ++++++++---------- .../model-diagram-dialog.component.ts | 4 +- 2 files changed, 76 insertions(+), 92 deletions(-) diff --git a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html index e8933a5b8..83ac5b361 100644 --- a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html +++ b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html @@ -27,97 +27,83 @@

View diagrams

/> search - {{ filteredDiagrams.length }} diagram(s) found: - -
-
- - -
- error
- Diagram export has failed.
Please contact your diagram cache - administrator. -
-
- error
- Error loading the diagram from the server.
Please try again later. -
- If the problem persists, please contact your diagram cache - administrator. -
-
-
-
{{ diagram.name }}
-
UUID: {{ diagram.uuid }}
-
-
- -
-
-
- -
-
+ + @if (this.diagramMetadata?.diagrams?.length === 0) { Your model doesn't seem to contain diagrams. -
-
+ } @else if (filteredDiagrams === undefined) { +
+ @for (_ of loaderArray; track $index) { + + } +
+ } @else if (filteredDiagrams.length === 0) { No diagrams for the given filter found. Please remove your search query. -
+ } @else { + {{ filteredDiagrams.length }} diagram(s) found: +
+ @for (diagram of filteredDiagrams; track diagram.uuid) { +
+ @if (diagram.success) { + @if (!diagrams[diagram.uuid] || diagrams[diagram.uuid].loading) { + + } @else if (diagrams[diagram.uuid].content) { + + } + } @else { +
+ error
+ Diagram export has failed.
+ Please contact your diagram cache administrator. +
+ } + +
+
+
{{ diagram.name }}
+
UUID: {{ diagram.uuid }}
+
+
+ +
+ } +
+ } +
diff --git a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts index bd90dca95..abe850209 100644 --- a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts +++ b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { NgIf, NgFor, DatePipe } from '@angular/common'; +import { DatePipe } from '@angular/common'; import { Component, Inject, @@ -57,8 +57,6 @@ import { ModelDiagramCodeBlockComponent } from './model-diagram-code-block/model FormsModule, MatIcon, MatSuffix, - NgIf, - NgFor, MatTooltip, NgxSkeletonLoaderModule, MatButton,