feat: chapters first step

Author: Angular2Guy

frontend/src/angular/src/app/book-import/book-import.component.html

@@ -17,6 +17,16 @@
 <div class="base-container">
 
 <form [formGroup]="bookForm">
+<button mat-flat-button color="primary" i18n="@@bookImportAddChapter">Add Chapter</button>
+<ng-container formArrayName="chapters">
+@for(chaptersForm of chapters.controls;track chaptersForm) {
+	<div class="chapter-container" [formGroup]="chaptersForm">
+		<div>A</div>
+		<div>B</div>
+	</div>
+}
+</ng-container>
+
 <input type="file" class="file-input"
        (change)="onFileSelected($event)" #fileUpload>
 <div class="file-upload">

frontend/src/angular/src/app/book-import/book-import.component.scss

@@ -37,4 +37,8 @@
 
 .base-container {
 	margin: 20px 5px 0 5px;
+}
+
+.chapter-container {
+	display: flex;
 }

frontend/src/angular/src/app/book-import/book-import.component.ts

@@ -19,23 +19,26 @@ import { Book, ChapterPages } from '../model/book';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { CommonModule } from '@angular/common';
 
 enum FormGroupKey{
 	file='file',
-	chapters='chapters'	
+	chapters='chapters',
+	chapterStart='chapterStart',
+	chapterEnd='chapterEnd'
 }
 
 @Component({
   selector: 'app-book-import',
   standalone: true,
-  imports: [MatIconModule,MatToolbarModule,MatButtonModule,ReactiveFormsModule],
+  imports: [MatIconModule,MatToolbarModule,MatButtonModule,ReactiveFormsModule, CommonModule],
   templateUrl: './book-import.component.html',
   styleUrl: './book-import.component.scss'
 })
 export class BookImportComponent {
 	protected bookForm = new FormGroup({
 		[FormGroupKey.file]: new FormControl<File | null>(null, Validators.required),
-		[FormGroupKey.chapters]: new FormArray([])
+		[FormGroupKey.chapters]: new FormArray([this.createChapterGroupForm()])
 	});
 	private destroyRef = inject(DestroyRef);
 	protected FormGroupKey = FormGroupKey;
@@ -44,6 +47,17 @@ export class BookImportComponent {
 
 	constructor(private documentService: DocumentService) {}
 
+	get chapters() {
+		return this.bookForm.controls[FormGroupKey.chapters] as FormArray<FormGroup>;
+	}
+	
+	protected createChapterGroupForm(): FormGroup {
+		return new FormGroup({
+			[FormGroupKey.chapterStart]: new FormControl(0, Validators.required),
+			[FormGroupKey.chapterEnd]: new FormControl(0, Validators.required)
+		});
+	} 
+	
 	protected logout(): void {
 		console.log('logout');
 	}