create cylinder

client/src/app/modules/cylinder/components/create-cylinder/create-cylinder.component.html

@@ -0,0 +1,30 @@
+<h2 mat-dialog-title>Neuen Zylinder anlegen</h2>
+<mat-dialog-content>
+    <form [formGroup]="createForm" class="flex flex-col gap-3">
+
+        <mat-form-field>
+            <mat-label>Name</mat-label>
+            <input type="text" matInput formControlName="name" maxlength="100">
+            @if ((createForm.controls.name.value || '').length > 20) {
+                <mat-hint>{{ (createForm.controls.name.value || '').length }} / 100 Zeichen</mat-hint>
+            } @else {
+                <mat-hint>Wie soll der Zylinder heißen?</mat-hint>
+            }
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>Schließanlage</mat-label>
+            <mat-select formControlName="system">
+                @for (item of systems; track $index) {
+                    <mat-option [value]="item">{{ item.name }}</mat-option>
+                }
+            </mat-select>
+            <mat-hint>Zu welcher Schließanlage gehört der Zylinder?</mat-hint>
+        </mat-form-field>
+
+    </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-button mat-dialog-close>Abbrechen</button>
+    <button mat-button (click)="save()" [disabled]="createForm.disabled || createForm.invalid">Speichern</button>
+</mat-dialog-actions>