create new title

src/app/modules/songs/song/new/new.component.html

@@ -0,0 +1,18 @@
+<app-card closeLink="../" heading="Neues Lied">
+
+  <div [formGroup]="form" class="split">
+    <mat-form-field appearance="outline">
+      <mat-label>Nummer</mat-label>
+      <input formControlName="number" matInput>
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+      <mat-label>Titel</mat-label>
+      <input autofocus formControlName="title" matInput>
+    </mat-form-field>
+  </div>
+
+  <app-button-row>
+    <app-button (click)="onSave()" [icon]="faSave">Anlegen</app-button>
+  </app-button-row>
+</app-card>
+

src/app/modules/songs/song/new/new.component.less

@@ -0,0 +1,5 @@
+.split {
+  display: grid;
+  grid-template-columns: 70px auto;
+  column-gap: 20px;
+}

src/app/modules/songs/song/new/new.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {NewComponent} from './new.component';
+
+describe('NewComponent', () => {
+  let component: NewComponent;
+  let fixture: ComponentFixture<NewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [NewComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/songs/song/new/new.component.ts

@@ -0,0 +1,47 @@
+import {Component, OnInit} from '@angular/core';
+import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {autoComplete, Unsubscriber} from 'ngx-hocs-unsubscriber';
+import {SongService} from '../../services/song.service';
+import {Song} from '../../services/song';
+import {Router} from '@angular/router';
+
+@Unsubscriber()
+@Component({
+  selector: 'app-new',
+  templateUrl: './new.component.html',
+  styleUrls: ['./new.component.less']
+})
+export class NewComponent implements OnInit {
+  public faSave = faSave;
+  public form: FormGroup;
+
+  constructor(private songService: SongService, private router: Router) {
+  }
+
+  public ngOnInit(): void {
+    this.form = new FormGroup({
+      number: new FormControl(null, Validators.required),
+      title: new FormControl(null, Validators.required),
+    })
+
+    this.songService.list$().pipe(autoComplete(this)).subscribe(songs => {
+      const freeSongnumber = this.getFreeSongNumber(songs);
+      this.form.controls.number.setValue(freeSongnumber);
+    })
+  }
+
+  public async onSave(): Promise<void> {
+    const number = this.form.value.number;
+    const title = this.form.value.title;
+    const newSongId = await this.songService.new(number, title);
+    await this.router.navigateByUrl('/songs/' + newSongId + '/edit');
+  }
+
+  private getFreeSongNumber(songs: Song[]): Number {
+    const numbers = songs.map(_ => _.number);
+    for (let i = 1; i < Number.MAX_SAFE_INTEGER; i++) {
+      if (!numbers.some(_ => _ === i)) return i;
+    }
+  }
+}

src/app/modules/songs/song/new/new.module.ts

@@ -0,0 +1,27 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {NewComponent} from './new.component';
+import {CardModule} from '../../../../widget-modules/components/card/card.module';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {ButtonRowModule} from '../../../../widget-modules/components/button-row/button-row.module';
+import {ButtonModule} from '../../../../widget-modules/components/button/button.module';
+import {AutofocusModule} from '../../../../widget-modules/directives/autofocus/autofocus.module';
+
+
+@NgModule({
+  declarations: [NewComponent],
+  imports: [
+    CommonModule,
+    CardModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ButtonRowModule,
+    ButtonModule,
+    AutofocusModule
+  ]
+})
+export class NewModule {
+}