AltitudeWeb/frontend/src/app/pages/forms/appeal/appeal.component.ts

import {Component, OnInit} from '@angular/core';
import {FormsComponent} from '../forms.component';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {AppealsService, MinecraftAppeal} from '@api';

@Component({
  selector: 'app-appeal',
  imports: [
    FormsComponent
  ],
  templateUrl: './appeal.component.html',
  styleUrl: './appeal.component.scss'
})
export class AppealComponent implements OnInit {

  public form: FormGroup<Appeal>;

  constructor(private appealApi: AppealsService) {
    this.form = new FormGroup({
      username: new FormControl('', {nonNullable: true, validators: [Validators.required]}),
      punishmentId: new FormControl('', {nonNullable: true, validators: [Validators.required]}),
      email: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.email]}),
      appeal: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.minLength(10)]})
    });
  }

  ngOnInit() {
  }

  public onSubmit() {
    if (this.form === undefined) {
      console.error('Form is undefined');
      return
    }
    if (this.form.valid) {
      this.sendForm()
    } else {
      // Mark all fields as touched to trigger validation display
      Object.keys(this.form.controls).forEach(field => {
        const control = this.form!.get(field);
        if (!(control instanceof FormGroup)) {
          console.error('Control [' + control + '] is not a FormGroup');
          return;
        }
        control.markAsTouched({onlySelf: true});
      });
    }
  }

  private sendForm() {
    const rawValue = this.form.getRawValue();
    const appeal: MinecraftAppeal = {
      appeal: rawValue.appeal,
      email: rawValue.email,
      punishmentId: parseInt(rawValue.punishmentId),
      username: rawValue.username,
      uuid: ''//TODO
    }
    this.appealApi.submitMinecraftAppeal(appeal).subscribe()
  }

}

interface Appeal {
  username: FormControl<string>;
  punishmentId: FormControl<string>;
  email: FormControl<string>;
  appeal: FormControl<string>;
}