feat(rep-create-form.component): Vorlage erstellt.

- Mat-Datumsbereich-Eingabe hinzugefügt.
 - Klick-Ereignis der Erstellungsschaltfläche arrangiert

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/rep-create-form/rep-create-form.component.html

@@ -1 +1,25 @@
-<button mat-flat-button (click)="create()">Erstellen</button>
+<div class="dd-container">
+    <div class="dd-row input-row">
+        <mat-form-field class="w40p">
+            <mat-label>Geben Sie einen Datumsbereich ein</mat-label>
+            <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
+                <input matStartDate formControlName="start" placeholder="Start date">
+                <input matEndDate formControlName="end" placeholder="End date">
+            </mat-date-range-input>
+            <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
+            <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+            <mat-date-range-picker #picker></mat-date-range-picker>
+
+            @if (range.controls.start.hasError('matStartDateInvalid')) {
+            <mat-error>Ungültiges Startdatum</mat-error>
+            }
+            @if (range.controls.end.hasError('matEndDateInvalid')) {
+            <mat-error>Ungültiges Enddatum</mat-error>
+            }
+        </mat-form-field>
+        <button mat-fab extended (click)="create()" class="w20p">
+            <mat-icon>playlist_add</mat-icon>
+            Erstellen
+        </button>
+    </div>
+</div>

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/rep-create-form/rep-create-form.component.ts

@@ -1,13 +1,22 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { UserRep } from '../../../models/user-management.api.models';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { UserRepService } from '../../../services/api/user-representation.service';
 import { GroupUpdateFormComponent } from '../group-update-form/group-update-form.component';
+import { JsonPipe } from '@angular/common';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { provideNativeDateAdapter } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import Swal from 'sweetalert2';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-rep-create-form',
   standalone: true,
-  imports: [],
+  providers: [provideNativeDateAdapter()],
+  imports: [MatFormFieldModule, MatDatepickerModule, FormsModule, ReactiveFormsModule, JsonPipe, MatButtonModule, MatIconModule],
   templateUrl: './rep-create-form.component.html',
   styleUrl: './rep-create-form.component.scss'
 })
@@ -17,6 +26,10 @@ export class RepCreateFormComponent {
   readonly afterCreation: (any: any) => any;
   readonly userRepService: UserRepService = inject(UserRepService);
   readonly dialogRef: MatDialogRef<GroupUpdateFormComponent> = inject(MatDialogRef<GroupUpdateFormComponent>);
+  readonly range = new FormGroup({
+    start: new FormControl<Date | null>(null),
+    end: new FormControl<Date | null>(null),
+  });
 
   constructor() {
     const dialogData: { userRep: UserRep, afterCreation: (any: any) => any } = inject(MAT_DIALOG_DATA)
@@ -25,6 +38,19 @@ export class RepCreateFormComponent {
   }
 
   create() {
+    const validFrom = this.range.value.start;
+    const validTo = this.range.value.end;
+
+    if (!validFrom || !validTo)
+      Swal.fire({
+        icon: "error",
+        title: "Oops...",
+        text: "Bitte geben Sie einen gültigen Datumsbereich ein!",
+      });
+
+    this.userRep.validFrom = validFrom!;
+    this.userRep.validTo = validTo!;
+
     this.userRepService.create(this.userRep).subscribe({
       next: (res) => {
         this.afterCreation({ successful: res });

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/styles.scss

@@ -100,6 +100,6 @@ code {
 
 @for $i from 1 through 20 {
   .w#{$i * 5}p {
-    width: #{$i * 5 + "%"};
+    width: #{$i * 5 + "%"} !important;
   }
 }