[add]

家族情報の編集画面に関係の選択肢を追加

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

@@ -95,6 +95,67 @@
                 </div>
               </div>
 
+              <div class="form-row form-row-heading">
+                <label></label>
+                <div class="form-field">
+                  <h3 class="sub-section-title">家系図情報</h3>
+                  <p class="sub-section-description">
+                    家系図に反映する親子・配偶者の関係を設定します。
+                  </p>
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="fatherId">父</label>
+                <div class="form-field">
+                  <select
+                    id="fatherId"
+                    formControlName="fatherId"
+                  >
+                    <option value="">選択なし</option>
+                    @for (family of getFamilyOptions(); track family.id) {
+                      <option [value]="family.id">
+                        {{ family.name }}（{{ family.relationship }}）
+                      </option>
+                    }
+                  </select>
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="motherId">母</label>
+                <div class="form-field">
+                  <select
+                    id="motherId"
+                    formControlName="motherId"
+                  >
+                    <option value="">選択なし</option>
+                    @for (family of getFamilyOptions(); track family.id) {
+                      <option [value]="family.id">
+                        {{ family.name }}（{{ family.relationship }}）
+                      </option>
+                    }
+                  </select>
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="spouseId">配偶者</label>
+                <div class="form-field">
+                  <select
+                    id="spouseId"
+                    formControlName="spouseId"
+                  >
+                    <option value="">選択なし</option>
+                    @for (family of getFamilyOptions(); track family.id) {
+                      <option [value]="family.id">
+                        {{ family.name }}（{{ family.relationship }}）
+                      </option>
+                    }
+                  </select>
+                </div>
+              </div>
+
               <div class="form-row">
                 <label for="note">備考</label>
                 <div class="form-field">
@@ -105,6 +166,7 @@
                   ></textarea>
                 </div>
               </div>
+
             </div>
           </section>
 

src/app/pages/family-edit/family-edit.scss

@@ -148,6 +148,28 @@
   font-weight: 700;
 }
 
+.form-row-heading {
+  margin-top: 30px;
+}
+
+.form-row-heading label {
+  padding-top: 0;
+}
+
+.sub-section-title {
+  margin: 0;
+  color: #2f2720;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.sub-section-description {
+  margin: 6px 0 0;
+  color: #7b6b5c;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
 .phone-edit-section {
   min-height: 382px;
   padding: 30px 24px 22px;

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

@@ -22,9 +22,9 @@ import { Family } from '../../models/family';
 export class FamilyEdit {
   danka: Danka | undefined;
   family: Family | undefined;
+  families: Family[] = [];
   dankaId: string = '';
   familyId: string | null = null;
-  isEditing = false;
 
   constructor(
     private familyService: FamilyService,
@@ -33,6 +33,7 @@ export class FamilyEdit {
   ) {
     this.dankaId = this.route.snapshot.params['dankaId'];
     this.familyId = this.route.snapshot.params['familyId'];
+    this.families = this.familyService.getFamiliesByDankaId(this.dankaId);
     if (this.familyId) {
       this.family = this.familyService.getFamilyById(this.familyId);
       if (this.family) {
@@ -53,6 +54,9 @@ export class FamilyEdit {
     relationship: new FormControl(''),
     birthDate: new FormControl('', Validators.required),
     note: new FormControl(''),
+    fatherId: new FormControl(''),
+    motherId: new FormControl(''),
+    spouseId: new FormControl(''),
   });
 
   getAgeText() {
@@ -71,6 +75,10 @@ export class FamilyEdit {
     return `${age}歳`;
   }
 
+  getFamilyOptions(): Family[] {
+    return this.families.filter((family) => family.id !== this.familyId);
+  }
+
   saveFamily() {
     if (this.familyForm.invalid) {
       return;
@@ -87,9 +95,13 @@ export class FamilyEdit {
       relationship: formValue.relationship?.trim() ?? '',
       birthDate: formValue.birthDate?.trim() ?? '',
       note: formValue.note?.trim() ?? '',
+      fatherId: this.familyForm.value.fatherId ?? '',
+      motherId: this.familyForm.value.motherId ?? '',
+      spouseId: this.familyForm.value.spouseId ?? '',
     };
     this.familyService.saveFamily(updatedFamily);
-    this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });  }
+    this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });
+  }
 
   cancelFamilyEdit(): void {
     const dankaId = this.dankaId;