added

src/app/app.routes.ts

@@ -27,7 +27,11 @@ export const routes: Routes = [
     component: DankaEdit,
   },
   {
-    path: 'kakocho-edit/:id',
+    path: 'kakocho-edit/:dankaId',
     component: KakochoEdit,
-  }  
+  },
+  {
+    path: 'kakocho-edit/:dankaId/:kakochoId',
+    component: KakochoEdit,
+  }
 ];

src/app/pages/danka-detail/danka-detail.html

@@ -66,6 +66,15 @@
               </button>
             </nav>
           </div>
+          @if (selectedTab === 'basic') {
+          <button
+            type="button"
+            class="edit-button"
+            [routerLink]="['/danka-edit', danka.id]"
+          >
+            編集
+          </button>
+          }
 
           @if (selectedTab === 'kakocho') {
           <button
@@ -75,15 +84,16 @@
           >
             故人を登録
           </button>
-          }
 
           <button
             type="button"
             class="edit-button"
-            [routerLink]="['/danka-edit', danka.id]"
+            [routerLink]="['/kakocho-edit', danka.id, kakocholist[0].id]"
           >
             編集
           </button>
+          }
+
         </div>
 
         <section class="family-summary">

src/app/pages/kakocho-edit/kakocho-edit.html

@@ -1,7 +1,11 @@
 <app-header></app-header>
 
 <div class="breadcrumb">
-  ホーム &gt; 檀家（世帯） &gt; 編集
+  @if (kakocho) {
+    ホーム &gt; 檀家（世帯） &gt; 過去帳 &gt; 故人を編集
+  } @else {
+    ホーム &gt; 檀家（世帯） &gt; 過去帳 &gt; 故人を追加
+  }
 </div>
 
 <div class="danka-edit-page">
@@ -9,139 +13,148 @@
 
   <main class="danka-edit-main">
     <section class="edit-panel">
+
       <div class="page-title-area">
-        <h1>檀家（世帯）編集</h1>
+        <h1>
+          @if (kakocho) {
+            故人を編集
+          } @else {
+            故人を追加
+          }
+        </h1>
       </div>
 
-      <form [formGroup]="dankaForm" class="edit-form">
+      <form [formGroup]="kakochoForm" class="edit-form">
+
         <div class="edit-content">
+
           <section class="basic-edit-section">
             <h2>基本情報</h2>
 
             <div class="form-list">
+
+              <!-- 名前 -->
               <div class="form-row">
-                <label for="householdName">世帯名</label>
+                <label for="name">名前</label>
+
                 <div class="form-field">
                   <input
-                    id="householdName"
+                    id="name"
                     type="text"
-                    formControlName="householdName"
+                    formControlName="name"
                   />
-                  @if (dankaForm.get('householdName')?.invalid && dankaForm.get('householdName')?.touched) {
-                    <p class="error-message">世帯名を入力してください。</p>
+
+                  @if (kakochoForm.get('name')?.invalid && kakochoForm.get('name')?.touched) {
+                    <p class="error-message">
+                      名前を入力してください。
+                    </p>
                   }
                 </div>
               </div>
 
+              <!-- ふりがな -->
               <div class="form-row">
-                <label for="householder">世帯主</label>
-                <div class="form-field">
-                  <input
-                    id="householder"
-                    type="text"
-                    formControlName="householder"
-                  />
-                  @if (dankaForm.get('householder')?.invalid && dankaForm.get('householder')?.touched) {
-                    <p class="error-message">世帯主を入力してください。</p>
-                  }
-                </div>
+                <label for="furigana">ふりがな</label>
+
+                <input
+                  id="furigana"
+                  type="text"
+                  formControlName="furigana"
+                />
               </div>
 
+              <!-- 続柄 -->
               <div class="form-row">
-                <label for="postalCode">郵便番号</label>
-                <div class="form-field">
-                  <input
-                    id="postalCode"
-                    type="text"
-                    formControlName="postalCode"
-                  />
-                  @if (dankaForm.get('postalCode')?.invalid && dankaForm.get('postalCode')?.touched) {
-                    <p class="error-message">郵便番号を入力してください。</p>
-                  }
-                </div>
+                <label for="relationship">続柄</label>
+
+                <input
+                  id="relationship"
+                  type="text"
+                  formControlName="relationship"
+                />
               </div>
 
+              <!-- 戒名 -->
               <div class="form-row">
-                <label for="address">住所</label>
+                <label for="kaimyo">戒名</label>
+
                 <input
-                  id="address"
+                  id="kaimyo"
                   type="text"
-                  formControlName="address"
+                  formControlName="kaimyo"
                 />
               </div>
-            </div>
-          </section>
 
-          <section class="phone-edit-section">
-            <div class="section-heading">
-              <h2>電話番号（複数登録）</h2>
-              <p>番号と備考を複数登録できます。</p>
-            </div>
+              <!-- 没年月日 -->
+              <div class="form-row">
+                <label for="deathDate">没年月日</label>
 
-            <div formArrayName="phones" class="phone-table">
-              <div class="phone-table-header">
-                <div>番号</div>
-                <div>備考</div>
-                <div>操作</div>
+                <input
+                  id="deathDate"
+                  type="date"
+                  formControlName="deathDate"
+                />
               </div>
 
-              @for (phone of phones.controls; track $index; let i = $index) {
-                <div class="phone-table-row" [formGroupName]="i">
-                  <div>
-                    <input type="text" formControlName="tel" placeholder="電話番号"/>
-                    @if (phone.get('tel')?.invalid && phone.get('tel')?.touched) {
-                      <p class="phone-error-message">
-                        電話番号は数字とハイフンで入力してください。
-                      </p>
-                    }
-                  </div>
-
-                  <div>
-                    <input type="text" formControlName="note" placeholder="備考"/>
-                  </div>
-
-                  <div class="phone-row-action">
-                    <button type="button" class="remove-phone-button" [disabled]="phones.length === 1" (click)="removePhone(i)">
-                      削除
-                    </button>
-                  </div>
-                </div>
-              }
+              <!-- 行年 -->
+              <div class="form-row">
+                <label for="ageAtDeath">行年</label>
 
-            </div>
+                <input
+                  id="ageAtDeath"
+                  type="text"
+                  formControlName="ageAtDeath"
+                />
+              </div>
+
+              <!-- 備考 -->
+              <div class="form-row">
+                <label for="note">備考</label>
+
+                <textarea
+                  id="note"
+                  formControlName="note"
+                ></textarea>
+              </div>
 
-            <div class="phone-action">
-              <button
-                type="button"
-                class="add-phone-button"
-                (click)="addPhone()"
-              >
-                電話を追加
-              </button>
             </div>
           </section>
+
         </div>
 
         <div class="bottom-actions">
-          <button type="button" class="delete-button" (click)="deleteDanka()">
-            削除
-          </button>
 
-          <button type="button" class="cancel-button" [routerLink]="['/danka-detail', danka?.id]">
+          @if (kakocho) {
+            <button
+              type="button"
+              class="delete-button"
+              (click)="deleteKakocho()"
+            >
+              削除
+            </button>
+          }
+
+          <button
+            type="button"
+            class="cancel-button"
+            [routerLink]="['/kakocho-list']"
+          >
             キャンセル
           </button>
 
           <button
             type="button"
             class="save-button"
-            [disabled]="dankaForm.invalid"
-            (click)="saveDanka()"
+            [disabled]="kakochoForm.invalid"
+            (click)="saveKakocho()"
           >
             保存
           </button>
+
         </div>
+
       </form>
+
     </section>
   </main>
-</div>
-
+</div>

src/app/pages/kakocho-edit/kakocho-edit.ts

@@ -1,124 +1,158 @@
-import { Component, inject } from '@angular/core';
+import { Component } from '@angular/core';
 import {
   FormBuilder,
   FormGroup,
-  FormControl,
-  FormArray,
   ReactiveFormsModule,
   Validators,
 } from '@angular/forms';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+
+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 { KakochoService } from '../../services/kakocho-service';
+
 import { Danka } from '../../models/danka';
+import { Kakocho } from '../../models/kakocho';
 
 @Component({
   selector: 'app-kakocho-edit',
-  imports: [AppHeader, AppSideMenu, ReactiveFormsModule, RouterLink],
+  imports: [
+    AppHeader,
+    AppSideMenu,
+    ReactiveFormsModule,
+    RouterLink,
+  ],
   templateUrl: './kakocho-edit.html',
   styleUrl: './kakocho-edit.scss',
 })
 export class KakochoEdit {
-  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('', '')]),
-  });
+  danka?: Danka;
+  kakocho?: Kakocho;
+
+  kakochoForm: FormGroup;
 
   constructor(
+    private fb: FormBuilder,
     private dankaService: DankaService,
+    private kakochoService: KakochoService,
     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();
+    // フォーム初期化
+    this.kakochoForm = this.fb.group({
+      name: ['', Validators.required],
+      furigana: [''],
+      relationship: [''],
+      kaimyo: [''],
+      deathDate: [''],
+      ageAtDeath: [''],
+      note: [''],
+    });
 
-        for (const phone of this.danka.phones) {
-          this.phones.push(this.createPhoneForm(phone.tel, phone.note));
-        }
-      }
+    // 檀家ID
+    const dankaId = this.route.snapshot.params['dankaId'];
+
+    if (dankaId) {
+      this.danka =
+        this.dankaService.getDankaById(dankaId);
     }
-    console.log(this.danka);
-  }
 
-  get phones() {
-    return this.dankaForm.get('phones') as FormArray;
-  }
+    // 編集対象ID
+    const kakochoId =
+      this.route.snapshot.params['kakochoId'];
 
-  createPhoneForm(tel = '', note = '') {
-    return new FormGroup({
-      tel: new FormControl(tel, [Validators.pattern(/^[0-9-]+$/)]),
-      note: new FormControl(note),
-    });
-  }
+    // 編集モード
+    if (kakochoId) {
 
-  addPhone() {
-    this.phones.push(this.createPhoneForm());
-  }
+      this.kakocho =
+        this.kakochoService.getKakochoById(kakochoId);
+
+      if (this.kakocho) {
+
+        this.kakochoForm.patchValue({
+          name: this.kakocho.name,
+          furigana: this.kakocho.furigana,
+          relationship: this.kakocho.relationship,
+          kaimyo: this.kakocho.kaimyo,
+          deathDate: this.kakocho.deathDate,
+          ageAtDeath: this.kakocho.ageAtDeath,
+          note: this.kakocho.note,
+        });
 
-  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 = {
-      id: dankaId,
-      householdName: formValue.householdName?.trim() ?? '',
-      householder: formValue.householder?.trim() ?? '',
-      postalCode: formValue.postalCode?.trim() ?? '',
-      address: formValue.address?.trim() ?? '',
-      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]);
+  saveKakocho(): void {
+
+    // form値取得
+    const formValue = this.kakochoForm.value;
+
+    // 編集
+    if (this.kakocho) {
+
+      const updatedKakocho: Kakocho = {
+        ...this.kakocho,
+        ...formValue,
+      };
+
+      this.kakochoService.updateKakocho(
+        updatedKakocho
+      );
+
     } else {
-      this.router.navigateByUrl('/danka-list');
+
+      // 新規追加
+      const newKakocho: Kakocho = {
+        id: crypto.randomUUID(),
+
+        dankaId: this.danka?.id ?? '',
+
+        familyId: '',
+
+        name: formValue.name,
+        furigana: formValue.furigana,
+        relationship: formValue.relationship,
+        kaimyo: formValue.kaimyo,
+        deathDate: formValue.deathDate,
+        ageAtDeath: formValue.ageAtDeath,
+        note: formValue.note,
+      };
+
+      this.kakochoService.addKakocho(
+        newKakocho
+      );
     }
+
+    // 一覧へ戻る
+    this.router.navigate([
+      '/danka-detail',
+      this.danka?.id,
+    ]);
   }
 
-  //削除の処理
-  deleteDanka() {
-    if (!this.danka) {
+  deleteKakocho(): void {
+
+    if (!this.kakocho) {
       return;
     }
 
-    const deleteDankaId = this.danka.id;
-    this.dankaService.deleteDanka(deleteDankaId);
-    console.log(this.dankaService.getDankaById(this.danka.id));
-    this.router.navigateByUrl('/danka-list');
+    this.kakochoService.deleteKakocho(
+      this.kakocho.id
+    );
+
+    this.router.navigate([
+      '/danka-detail',
+      this.danka?.id,
+    ]);
   }
-}
+}

src/app/services/kakocho-service.ts

@@ -35,4 +35,38 @@ export class KakochoService {
   getKakochoByDankaId(dankaId: string): Kakocho[] {
     return this.kakochoList.filter((kakocho) => kakocho.dankaId === dankaId);
   }
+
+  // 一覧取得
+  getKakochoList(): Kakocho[] {
+    return this.kakochoList;
+  }
+
+  // 1件取得
+  getKakochoById(id: string): Kakocho | undefined {
+    return this.kakochoList.find(item => item.id === id);
+  }
+
+  // 新規登録
+  addKakocho(data: Kakocho): void {
+    this.kakochoList.push(data);
+  }
+
+  // 更新
+  updateKakocho(updatedData: Kakocho): void {
+
+    const index = this.kakochoList.findIndex(
+      item => item.id === updatedData.id
+    );
+
+    if (index !== -1) {
+      this.kakochoList[index] = updatedData;
+    }
+  }
+
+  // 削除
+  deleteKakocho(id: string): void {
+    this.kakochoList = this.kakochoList.filter(
+      item => item.id !== id
+    );
+  }  
 }