kaimyo-management/src/app/pages/danka-edit/danka-edit.ts

import { Component, inject } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  FormControl,
  FormArray,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { AppHeader } from '../../share/header/app-header';
import { AppSideMenu } from '../../share/side-menu/app-side-menu';
import { DankaService } from '../../services/dankaService';
import { Danka } from '../../models/danka';

@Component({
  selector: 'app-danka-edit',
  imports: [AppHeader, AppSideMenu, ReactiveFormsModule, RouterLink],
  templateUrl: './danka-edit.html',
  styleUrl: './danka-edit.scss',
})
export class DankaEdit {
  danka: Danka | undefined;

  dankaForm = new FormGroup({
    householdName: new FormControl('', [Validators.required]),
    householder: new FormControl('', [Validators.required]),
    postalCode: new FormControl('', Validators.pattern(/^\d{3}-\d{4}$/)),
    address: new FormControl(''),
    phones: new FormArray([this.createPhoneForm('', '')]),
  });

  constructor(
    private dankaService: DankaService,
    private route: ActivatedRoute,
    private router: Router,
  ) {
    const id = this.route.snapshot.params['id'];
    if (id) {
      this.danka = this.dankaService.getDankaById(id);

      if (this.danka) {
        this.dankaForm.patchValue({
          householdName: this.danka.householdName,
          householder: this.danka.householder,
          postalCode: this.danka.postalCode,
          address: this.danka.address,
        });

        this.phones.clear();

        for (const phone of this.danka.phones) {
          this.phones.push(this.createPhoneForm(phone.tel, phone.note));
        }
      }
    }
    console.log(this.danka);
  }

  get phones() {
    return this.dankaForm.get('phones') as FormArray;
  }

  createPhoneForm(tel = '', note = '') {
    return new FormGroup({
      tel: new FormControl(tel, [Validators.pattern(/^[0-9-]+$/)]),
      note: new FormControl(note),
    });
  }

  addPhone() {
    this.phones.push(this.createPhoneForm());
  }

  removePhone(index: number) {
    if(this.phones.length > 1) {
      this.phones.removeAt(index);
    }
  }

  //保存の処理
  saveDanka() {
    if (this.dankaForm.invalid) {
      this.dankaForm.markAllAsTouched();
      return;
    }
    const formValue = this.dankaForm.value;
    const isEdit = !!this.danka;
    const dankaId = isEdit ? this.danka!.id : Date.now().toString();
    const updatedDanka: Danka = {
      id: dankaId,
      householdName: formValue.householdName?.trim() ?? '',
      householder: formValue.householder?.trim() ?? '',
      postalCode: formValue.postalCode?.trim() ?? '',
      address: formValue.address?.trim() ?? '',
      updatedAt: this.formatDateForSave(new Date()),
      phones: (formValue.phones ?? [])
        .map((phone) => ({
          tel: phone.tel?.trim() ?? '',
          note: phone.note?.trim() ?? '',
        }))
        .filter((phone) => phone.tel !== '' || phone.note !== ''),
    };

    this.dankaService.saveDanka(updatedDanka);

    if (isEdit) {
      this.router.navigate(['/danka-detail', dankaId]);
    } else {
      this.router.navigateByUrl('/danka-list');
    }
  }

  private formatDateForSave(date: Date): string {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }

  //削除の処理
  deleteDanka() {
    if (!this.danka) {
      return;
    }

    const deleteDankaId = this.danka.id;
    this.dankaService.deleteDanka(deleteDankaId);
    console.log(this.dankaService.getDankaById(this.danka.id));
    this.router.navigateByUrl('/danka-list');
  }
}