chore: More migration to new Angular control flow

frontend/src/app/projects/create-project/create-project.component.html

@@ -25,14 +25,15 @@ <h3 class="flex justify-center sm:hidden">Create new project</h3>
                   formControlName="name"
                   data-testId="input-name"
                 />
-                <mat-error *ngIf="form.controls.name.errors?.uniqueSlug">
-                  A project with a name similar to “{{
-                    form.controls.name.errors!.uniqueSlug.value
-                  }}” already exists.
-                </mat-error>
-                <mat-error *ngIf="form.controls.name.errors?.required">
-                  A project name is required.
-                </mat-error>
+                @if (form.controls.name.errors?.uniqueSlug) {
+                  <mat-error>
+                    A project with a name similar to “{{
+                      form.controls.name.errors!.uniqueSlug.value
+                    }}” already exists.
+                  </mat-error>
+                } @else if (form.controls.name.errors?.required) {
+                  <mat-error> A project name is required. </mat-error>
+                }
               </mat-form-field>
             </div>
             <div>
@@ -93,39 +94,40 @@ <h3 class="flex justify-center sm:hidden">Create new project</h3>
         <div class="hidden sm:inline">(Optional) Add team members</div>
       </ng-template>
       <h3 class="flex justify-center sm:hidden">(Optional) Add team members</h3>
-      <div *ngIf="projectService.project$ | async" class="flex justify-center">
-        <app-project-user-settings></app-project-user-settings>
-      </div>
-      <div *ngIf="projectService.project$ | async">
-        <div class="flex justify-between">
-          <div></div>
-          <div>
-            <div class="flex w-[312px] justify-end sm:w-[420px]">
-              <a
-                class="mt-[5px]"
-                mat-button
-                color="primary"
-                (click)="stepper.next()"
-                data-testId="button-skipAddMembers"
-              >
-                <ng-container
-                  *ngIf="
-                    projectUserService.nonAdminProjectUsers$ | async as users
-                  "
-                >
-                  {{
-                    !users || users.length === 0 ? "Skip for now" : "Continue"
-                  }}
-                </ng-container>
-                <mat-icon iconPositionEnd class="mat-icon-position right"
-                  >navigate_next</mat-icon
+      @if (projectService.project$ | async) {
+        <div class="flex justify-center">
+          <app-project-user-settings></app-project-user-settings>
+        </div>
+        <div>
+          <div class="flex justify-between">
+            <div></div>
+            <div>
+              <div class="flex w-[312px] justify-end sm:w-[420px]">
+                <a
+                  class="mt-[5px]"
+                  mat-button
+                  color="primary"
+                  (click)="stepper.next()"
+                  data-testId="button-skipAddMembers"
                 >
-              </a>
+                  @if (
+                    projectUserService.nonAdminProjectUsers$ | async;
+                    as users
+                  ) {
+                    {{
+                      !users || users.length === 0 ? "Skip for now" : "Continue"
+                    }}
+                  }
+                  <mat-icon iconPositionEnd class="mat-icon-position right"
+                    >navigate_next</mat-icon
+                  >
+                </a>
+              </div>
             </div>
+            <div></div>
           </div>
-          <div></div>
         </div>
-      </div>
+      }
     </mat-step>
 
     <mat-step>
@@ -156,20 +158,14 @@ <h3 class="flex justify-center pb-[5px] sm:hidden sm:pb-0">
               [color]="getColorByModelCreationStep()"
               data-testId="a-skipModelAndFinishProjectCreation"
             >
-              <span *ngIf="modelCreationStep === 'create-model'">
-                Abort model creation and finish
-              </span>
-              <span
-                *ngIf="
-                  modelCreationStep !== 'create-model' &&
-                  modelCreationStep !== 'complete'
-                "
-              >
-                Abort model creation and finish
-              </span>
-              <span *ngIf="modelCreationStep === 'complete'">
-                Finish project creation
-              </span>
+              @if (modelCreationStep === "create-model") {
+                <span> Abort model creation and finish </span>
+              } @else if (modelCreationStep === "complete") {
+                <span> Finish project creation </span>
+              } @else {
+                <span> Abort model creation and finish </span>
+              }
+
               <mat-icon iconPositionEnd class="mat-icon-position right"
                 >check</mat-icon
               >

frontend/src/app/projects/create-project/create-project.component.ts

@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { NgFor, AsyncPipe } from '@angular/common';
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import {
   FormControl,
@@ -32,7 +32,6 @@ import { ProjectWrapperService } from '../service/project.service';
 @Component({
   selector: 'app-create-project',
   templateUrl: './create-project.component.html',
-  styleUrls: ['./create-project.component.css'],
   standalone: true,
   imports: [
     MatStepper,
@@ -43,7 +42,6 @@ import { ProjectWrapperService } from '../service/project.service';
     MatFormField,
     MatLabel,
     MatInput,
-    NgIf,
     MatError,
     MatRadioGroup,
     NgFor,

frontend/src/app/projects/create-project/create-project.stories.ts

@@ -0,0 +1,82 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { userEvent, within } from '@storybook/test';
+import {
+  mockProject,
+  MockProjectWrapperService,
+} from '../../../storybook/project';
+import {
+  mockProjectUsers,
+  MockProjectUserService,
+} from '../../../storybook/project-users';
+import { ProjectUserService } from '../project-detail/project-users/service/project-user.service';
+import { ProjectWrapperService } from '../service/project.service';
+import { CreateProjectComponent } from './create-project.component';
+
+const meta: Meta<CreateProjectComponent> = {
+  title: 'Project Components / Create Project',
+  component: CreateProjectComponent,
+};
+
+export default meta;
+type Story = StoryObj<CreateProjectComponent>;
+
+export const CreateProject: Story = {
+  args: {},
+};
+
+export const AddTeamMembers: Story = {
+  args: {},
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: ProjectWrapperService,
+          useFactory: () =>
+            new MockProjectWrapperService(mockProject, [mockProject]),
+        },
+        {
+          provide: ProjectUserService,
+          useFactory: () =>
+            new MockProjectUserService('user', undefined, mockProjectUsers),
+        },
+      ],
+    }),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const nameField = canvas.getByTestId('input-name');
+    await userEvent.type(nameField, 'Test Project');
+    const createProject = canvas.getByTestId('button-create-project');
+    await userEvent.click(createProject);
+  },
+};
+
+export const AddModel: Story = {
+  args: {},
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: ProjectWrapperService,
+          useFactory: () =>
+            new MockProjectWrapperService(mockProject, [mockProject]),
+        },
+        {
+          provide: ProjectUserService,
+          useFactory: () =>
+            new MockProjectUserService('user', undefined, mockProjectUsers),
+        },
+      ],
+    }),
+  ],
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    await AddTeamMembers.play!(context);
+    const skipMembers = canvas.getByTestId('button-skipAddMembers');
+    await userEvent.click(skipMembers);
+  },
+};

frontend/src/app/projects/models/init-model/init-model.component.html

@@ -4,53 +4,56 @@
  -->
 
 <div class="wrapper flex justify-center">
-  <div
-    class="collab-card w-[350px] sm:min-w-[420px]"
-    *ngIf="modelService.model$ | async"
-  >
-    <form [formGroup]="form">
-      <mat-form-field class="w-full" appearance="fill">
-        <mat-label>Modelling tool</mat-label>
-        <input
-          matInput
-          [value]="(modelService.model$ | async)!.tool.name"
-          disabled
-        />
-      </mat-form-field>
-      <mat-form-field class="w-full" appearance="fill">
-        <mat-label>Version</mat-label>
-        <mat-select formControlName="version" id="version-selector">
-          <mat-option
-            *ngFor="let version of this.toolVersions"
-            [value]="version.id"
-          >
-            {{ version.name }}
-            <span *ngIf="version.config.is_recommended"> (recommended)</span>
-            <span *ngIf="version.config.is_deprecated"> (deprecated)</span>
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field class="w-full" appearance="fill">
-        <mat-label>Model nature</mat-label>
-        <mat-select formControlName="nature">
-          <mat-option
-            *ngFor="let nature of this.toolNatures"
-            [value]="nature.id"
-          >
-            {{ nature.name }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-    </form>
-    <div class="flex justify-end">
-      <button
-        mat-raised-button
-        color="primary"
-        [disabled]="!form.valid || buttonDisabled"
-        (click)="onSubmit()"
-      >
-        Save model
-      </button>
+  @if (modelService.model$ | async) {
+    <div class="collab-card w-[350px] sm:min-w-[420px]">
+      <form [formGroup]="form">
+        <mat-form-field class="w-full" appearance="fill">
+          <mat-label>Modelling tool</mat-label>
+          <input
+            matInput
+            [value]="(modelService.model$ | async)!.tool.name"
+            disabled
+          />
+        </mat-form-field>
+        <mat-form-field class="w-full" appearance="fill">
+          <mat-label>Version</mat-label>
+          <mat-select formControlName="version" id="version-selector">
+            <mat-option
+              *ngFor="let version of this.toolVersions"
+              [value]="version.id"
+            >
+              {{ version.name }}
+              @if (version.config.is_recommended) {
+                <span> (recommended)</span>
+              }
+              @if (version.config.is_deprecated) {
+                <span> (deprecated)</span>
+              }
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="w-full" appearance="fill">
+          <mat-label>Model nature</mat-label>
+          <mat-select formControlName="nature">
+            <mat-option
+              *ngFor="let nature of this.toolNatures"
+              [value]="nature.id"
+            >
+              {{ nature.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </form>
+      <div class="flex justify-end">
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!form.valid || buttonDisabled"
+          (click)="onSubmit()"
+        >
+          Save model
+        </button>
+      </div>
     </div>
-  </div>
+  }
 </div>

frontend/src/app/projects/models/init-model/init-model.component.ts

@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { NgFor, AsyncPipe } from '@angular/common';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import {
   FormControl,
@@ -27,17 +27,14 @@ import {
   Tool,
 } from 'src/app/openapi';
 import { ModelWrapperService } from 'src/app/projects/models/service/model.service';
-import { GitModelService } from '../../project-detail/model-overview/model-detail/git-model.service';
 import { ProjectWrapperService } from '../../service/project.service';
 
 @UntilDestroy()
 @Component({
   selector: 'app-init-model',
   templateUrl: './init-model.component.html',
-  styleUrls: ['./init-model.component.css'],
   standalone: true,
   imports: [
-    NgIf,
     FormsModule,
     ReactiveFormsModule,
     MatFormField,
@@ -65,7 +62,6 @@ export class InitModelComponent implements OnInit {
   constructor(
     public projectService: ProjectWrapperService,
     public modelService: ModelWrapperService,
-    public gitModelService: GitModelService,
     private toolsService: ToolsService,
   ) {}