Merge branch 'feature/family-info'

# Conflicts:
#	src/app/app.routes.ts
#	src/app/pages/danka-detail/danka-detail.ts

src/app/app.routes.ts

@@ -3,6 +3,8 @@ import { Dashboard } from './pages/dashboard/dashboard';
 import { DankaList } from './pages/danka-list/danka-list';
 import { DankaDetail } from './pages/danka-detail/danka-detail';
 import { DankaEdit } from './pages/danka-edit/danka-edit';
+import {FamilyEdit} from './pages/family-edit/family-edit';
+
 import { KakochoEdit } from './pages/kakocho-edit/kakocho-edit';
 
 export const routes: Routes = [
@@ -26,6 +28,15 @@ export const routes: Routes = [
     path: 'danka-edit/:id',
     component: DankaEdit,
   },
+  {
+    path: 'danka/:dankaId/family-new',
+    component: FamilyEdit,
+  },
+  {
+    path: 'danka/:dankaId/family/:familyId/edit',
+    component: FamilyEdit,
+  },
+  },
   {
     path: 'kakocho-edit/:dankaId',
     component: KakochoEdit,

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

@@ -257,6 +257,7 @@
                     <div>年齢</div>
                     <div>生年月日</div>
                     <div>備考</div>
+                    <div>操作</div>
                   </div>
 
                   @for (family of families; track family.id) {
@@ -274,7 +275,7 @@
                       </div>
 
                       <div>
-                        -
+                        {{ getAge(family.birthDate) }}
                       </div>
 
                       <div>
@@ -284,6 +285,14 @@
                       <div>
                         {{ family.note || '' }}
                       </div>
+                      <div class="family-table-action">
+                        <a
+                          class="family-edit-link"
+                          [routerLink]="['/danka', danka.id, 'family', family.id, 'edit']"
+                        >
+                          編集
+                        </a>
+                      </div>
                     </div>
                   }
                 </div>

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

@@ -462,11 +462,37 @@
 .family-table-header,
 .family-table-row {
   display: grid;
-  grid-template-columns: 1.2fr 1.2fr 0.8fr 0.6fr 1fr 1.4fr;
+  grid-template-columns: 1.1fr 1.1fr 0.8fr 0.6fr 1fr 1.2fr 80px;
   gap: 10px;
   align-items: center;
 }
 
+.family-table-action {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.family-edit-link {
+  width: 64px;
+  height: 34px;
+  border: 2px solid #8a6543;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #8a6543;
+  font-size: 14px;
+  font-weight: 800;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.family-edit-link:hover {
+  background: #f6efe6;
+}
+
 .family-table-header {
   padding: 12px 14px;
   background: #efe4d6;
@@ -553,7 +579,7 @@
 
   .family-table-header,
   .family-table-row {
-    min-width: 760px;
+    min-width: 880px;
   }
 
   .family-support-area {

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { DankaService } from '../../services/dankaService';
 import { FamilyService } from '../../services/family-service';
 import { Danka } from '../../models/danka';
@@ -29,6 +29,16 @@ export class DankaDetail {
     private kakochoService: KakochoService,
     private route: ActivatedRoute,
   ) {
+    //遷移先からタブ情報を取得
+    const tab = this.route.snapshot.queryParams['tab'];
+    if (tab === 'family') {
+      this.selectedTab = 'family';
+    } else if (tab === 'kakocho') {
+      this.selectedTab = 'kakocho';
+    } else if (tab === 'familyTree') {
+      this.selectedTab = 'familyTree';
+    }
+    //遷移先のIDから該当の世帯と家族基本を取得
     const id = this.route.snapshot.params['id'];
     if (id) {
       this.danka = this.dankaService.getDankaById(id);
@@ -37,6 +47,24 @@ export class DankaDetail {
     }
     console.log(this.danka);
     console.log(this.families);
+    console.log(tab);
+  }
+
+  getAge(birthDate: string) {
+    if (birthDate === '') {
+      return '-';
+    }
+
+    const birth = new Date(birthDate);
+    const today: Date = new Date();
+    const thisYearBirthday = new Date(today.getFullYear(), birth.getMonth(), birth.getDate());
+
+    let age = today.getFullYear() - birth.getFullYear();
+
+    if (thisYearBirthday > today) {
+      age--;
+    }
+    return age.toString();
     console.log(this.kakocholist);
   }
 

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

@@ -0,0 +1,150 @@
+<app-header></app-header>
+
+<div class="breadcrumb">
+  ホーム &gt; 檀家（世帯） &gt; 家族 &gt; 編集
+</div>
+
+<div class="danka-edit-page">
+  <app-side-menu></app-side-menu>
+
+  <main class="danka-edit-main">
+    <section class="edit-panel">
+      <div class="page-title-area">
+        <h1>家族（個人）編集</h1>
+      </div>
+
+      <form [formGroup]="familyForm" class="edit-form">
+        <div class="edit-content">
+          <section class="basic-edit-section">
+            <h2>個人情報</h2>
+
+            <div class="form-list">
+              <div class="form-row">
+                <label for="name">氏名</label>
+                <div class="form-field">
+                  <input
+                    id="name"
+                    type="text"
+                    formControlName="name"
+                  />
+                  @if (familyForm.get('name')?.invalid && familyForm.get('name')?.touched) {
+                    <p class="error-message">氏名を入力してください。</p>
+                  }
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="furigana">ふりがな</label>
+                <div class="form-field">
+                  <input
+                    id="furigana"
+                    type="text"
+                    formControlName="furigana"
+                  />
+                  @if (familyForm.get('furigana')?.invalid && familyForm.get('furigana')?.touched) {
+                    <p class="error-message">ふりがなを入力してください。</p>
+                  }
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="relationship">世帯主との関係</label>
+                <div class="form-field">
+                  <select
+                    id="relationship"
+                    formControlName="relationship"
+                  >
+                    <option value="">選択してください</option>
+                    <option value="世帯主">世帯主</option>
+                    <option value="配偶者">配偶者</option>
+                    <option value="父">父</option>
+                    <option value="母">母</option>
+                    <option value="長男">長男</option>
+                    <option value="長女">長女</option>
+                    <option value="次男">次男</option>
+                    <option value="次女">次女</option>
+                    <option value="その他">その他</option>
+                  </select>
+
+                  @if (familyForm.get('relationship')?.invalid && familyForm.get('relationship')?.touched) {
+                    <p class="error-message">世帯主との関係を選択してください。</p>
+                  }
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="birthDate">生年月日</label>
+                <div class="form-field">
+                  <input
+                    id="birthDate"
+                    type="date"
+                    formControlName="birthDate"
+                  />
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="age">年齢</label>
+                <div class="form-field">
+                  <input
+                    id="age"
+                    type="text"
+                    [value]="getAgeText()"
+                    readonly
+                  />
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="note">備考</label>
+                <div class="form-field">
+                  <textarea
+                    id="note"
+                    formControlName="note"
+                    rows="4"
+                  ></textarea>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section class="phone-edit-section">
+            <div class="householder-area">
+              <h3>この方を世帯主にする</h3>
+
+              <button
+                type="button"
+                class="set-householder-button"
+                (click)="setAsHouseholder()"
+              >
+                世帯主に設定
+              </button>
+            </div>
+          </section>
+        </div>
+
+        <div class="bottom-actions">
+          <button
+            type="button"
+            class="delete-button"
+            (click)="deleteFamily()">
+            削除
+          </button>
+
+          <button type="button" class="cancel-button" (click)="cancelFamilyEdit()">
+            キャンセル
+          </button>
+
+          <button
+            type="button"
+            class="save-button"
+            [disabled]="familyForm.invalid"
+            (click)="saveFamily()"
+          >
+            保存
+          </button>
+        </div>
+      </form>
+    </section>
+  </main>
+</div>

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

@@ -0,0 +1,324 @@
+:host {
+  position: relative;
+  display: block;
+  min-height: 100vh;
+  background: #f4eee4;
+  color: #2f2720;
+}
+
+.breadcrumb {
+  position: absolute;
+  top: 28px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #7b6b5c;
+  font-size: 14px;
+  z-index: 2;
+}
+
+.danka-edit-page {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: #f4eee4;
+}
+
+.danka-edit-main {
+  flex: 1;
+  padding-right: 34px;
+  box-sizing: border-box;
+}
+
+.edit-panel {
+  min-height: 650px;
+  padding: 26px 34px 36px;
+  background: #ffffff;
+  border: 2px solid #d8caba;
+  border-radius: 76px;
+  box-sizing: border-box;
+}
+
+.page-title-area {
+  margin-bottom: 28px;
+}
+
+.page-title-area h1 {
+  margin: 0;
+  color: #2f2720;
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+.edit-form {
+  width: 100%;
+}
+
+.edit-content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 500px;
+  gap: 48px;
+  align-items: start;
+}
+
+.basic-edit-section {
+  padding-left: 8px;
+}
+
+.basic-edit-section h2,
+.section-heading h2 {
+  margin: 0 0 18px;
+  color: #2f2720;
+  font-size: 22px;
+  font-weight: 800;
+}
+
+.section-heading {
+  margin-bottom: 18px;
+}
+
+.section-heading p {
+  margin: 3px 0 0;
+  color: #7b6b5c;
+  font-size: 14px;
+}
+
+.form-list {
+  width: 650px;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 150px 1fr;
+  align-items: start;
+  column-gap: 18px;
+  margin-top: 14px;
+}
+
+.form-row label {
+  padding-top: 10px;
+  color: #4b3c31;
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.form-field {
+  width: 100%;
+}
+
+.form-row input,
+.form-row select,
+.form-row textarea {
+  width: 100%;
+  min-height: 46px;
+  padding: 8px 12px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #fffdf9;
+  color: #2f2720;
+  font-size: 17px;
+  font-family: inherit;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.form-row textarea {
+  min-height: 104px;
+  resize: vertical;
+  line-height: 1.6;
+}
+
+.form-row input:focus,
+.form-row select:focus,
+.form-row textarea:focus {
+  border-color: #8a6543;
+  background: #ffffff;
+}
+
+.form-row input[readonly] {
+  background: #f6efe6;
+  color: #7b6b5c;
+}
+
+.error-message {
+  margin: 6px 0 0;
+  color: #9a3f32;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.phone-edit-section {
+  min-height: 382px;
+  padding: 30px 24px 22px;
+  border: 2px solid #d8caba;
+  border-radius: 62px;
+  background: #fffdf9;
+  box-sizing: border-box;
+}
+
+.family-edit-guide {
+  padding: 18px 22px;
+  border: 2px solid #d8caba;
+  border-radius: 14px;
+  background: #ffffff;
+  box-sizing: border-box;
+}
+
+.family-edit-guide ul {
+  margin: 0;
+  padding-left: 20px;
+  color: #7b6b5c;
+  font-size: 15px;
+  line-height: 2;
+}
+
+.householder-area {
+  margin-top: 28px;
+  padding: 22px 26px;
+  border: 2px solid #d8caba;
+  border-radius: 14px;
+  background: #eadfce;
+  box-sizing: border-box;
+}
+
+.householder-area h3 {
+  margin: 0 0 14px;
+  color: #2f2720;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.set-householder-button {
+  width: 170px;
+  height: 42px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #2f2720;
+  font-size: 16px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.set-householder-button:hover {
+  background: #f6efe6;
+}
+
+.bottom-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 14px;
+  margin-top: 72px;
+}
+
+.delete-button,
+.cancel-button,
+.save-button {
+  width: 120px;
+  height: 46px;
+  border-radius: 6px;
+  font-size: 17px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.delete-button,
+.cancel-button {
+  border: 2px solid #d8caba;
+  background: #ffffff;
+  color: #2f2720;
+}
+
+.delete-button:hover {
+  border-color: #9a3f32;
+  color: #9a3f32;
+}
+
+.cancel-button:hover {
+  background: #f6efe6;
+}
+
+.save-button {
+  border: 2px solid #8a6543;
+  background: #8a6543;
+  color: #ffffff;
+}
+
+.save-button:hover {
+  background: #765639;
+}
+
+.save-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 画面幅が狭い場合 */
+@media (max-width: 1100px) {
+  .edit-content {
+    grid-template-columns: 1fr;
+    gap: 28px;
+  }
+
+  .form-list {
+    width: 100%;
+  }
+
+  .bottom-actions {
+    margin-top: 40px;
+  }
+}
+
+@media (max-width: 800px) {
+  .breadcrumb {
+    position: static;
+    transform: none;
+    padding: 16px 20px 0;
+  }
+
+  .danka-edit-page {
+    flex-direction: column;
+  }
+
+  .danka-edit-main {
+    width: 100%;
+    padding: 16px 20px 32px;
+  }
+
+  .edit-panel {
+    padding: 24px 20px 30px;
+    border-radius: 32px;
+  }
+
+  .page-title-area h1 {
+    font-size: 26px;
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
+    row-gap: 6px;
+  }
+
+  .form-row label {
+    padding-top: 0;
+  }
+
+  .phone-edit-section {
+    border-radius: 28px;
+  }
+
+  .bottom-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .delete-button,
+  .cancel-button,
+  .save-button {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FamilyEdit } from './family-edit';
+
+describe('FamilyEdit', () => {
+  let component: FamilyEdit;
+  let fixture: ComponentFixture<FamilyEdit>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FamilyEdit],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FamilyEdit);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,109 @@
+import { Component, inject } from '@angular/core';
+import {
+  FormBuilder,
+  FormGroup,
+  FormControl,
+  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 { FamilyService } from '../../services/family-service';
+import { Danka } from '../../models/danka';
+import { Family } from '../../models/family';
+
+@Component({
+  selector: 'app-family-edit',
+  imports: [AppHeader, AppSideMenu, ReactiveFormsModule],
+  templateUrl: './family-edit.html',
+  styleUrl: './family-edit.scss',
+})
+export class FamilyEdit {
+  danka: Danka | undefined;
+  family: Family | undefined;
+  dankaId: string = '';
+  familyId: string | null = null;
+  isEditing = false;
+
+  constructor(
+    private familyService: FamilyService,
+    private route: ActivatedRoute,
+    private router: Router,
+  ) {
+    this.dankaId = this.route.snapshot.params['dankaId'];
+    this.familyId = this.route.snapshot.params['familyId'];
+    if (this.familyId) {
+      this.family = this.familyService.getFamilyById(this.familyId);
+      if (this.family) {
+        this.familyForm.patchValue({
+          furigana: this.family.furigana,
+          name: this.family.name,
+          relationship: this.family.relationship,
+          birthDate: this.family.birthDate,
+          note: this.family.note,
+        });
+      }
+    }
+  }
+
+  familyForm = new FormGroup({
+    furigana: new FormControl('', [Validators.required]),
+    name: new FormControl('', [Validators.required]),
+    relationship: new FormControl(''),
+    birthDate: new FormControl('', Validators.required),
+    note: new FormControl(''),
+  });
+
+  getAgeText() {
+    const birthDate = this.familyForm.get('birthDate')?.value;
+    if (!birthDate) {
+      return;
+    }
+    const birth = new Date(birthDate);
+    const today = new Date();
+    let age = today.getFullYear() - birth.getFullYear();
+    const thisYearsBirthday = new Date(today.getFullYear(), birth.getMonth(), birth.getDate());
+
+    if (thisYearsBirthday > today) {
+      age--;
+    }
+    return `${age}歳`;
+  }
+
+  saveFamily() {
+    if (this.familyForm.invalid) {
+      return;
+    }
+
+    const familyId = this.familyId ?? Date.now().toString();
+    const dankaId = this.dankaId;
+    const formValue = this.familyForm.value;
+    const updatedFamily = {
+      id: familyId,
+      dankaId: dankaId,
+      furigana: formValue.furigana?.trim() ?? '',
+      name: formValue.name?.trim() ?? '',
+      relationship: formValue.relationship?.trim() ?? '',
+      birthDate: formValue.birthDate?.trim() ?? '',
+      note: formValue.note?.trim() ?? '',
+    };
+    this.familyService.saveFamily(updatedFamily);
+    this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });  }
+
+  cancelFamilyEdit(): void {
+    const dankaId = this.dankaId;
+    this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });
+  }
+
+  deleteFamily() {
+    const dankaId = this.dankaId;
+    if (!this.familyId) {
+      return;
+    }
+    this.familyService.deleteFamily(this.familyId);
+    this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });
+  }
+
+  setAsHouseholder() {}
+}

src/app/services/family-service.ts

@@ -31,11 +31,31 @@ export class FamilyService {
   //   return this.dankaList;
   // }
 
+  //檀家と紐づいている家族情報の取得
   getFamiliesByDankaId(dankaId: string): Family[] {
     return this.families.filter((family) => family.dankaId === dankaId);
   }
-  // getFamilyById(id: string);
-  // addFamily(family: Family);
-  // updateFamily(family: Family);
-  // deleteFamily(id: string);
+
+  //家族の情報を取得
+  getFamilyById(id: string): Family | undefined {
+    return this.families.find((family) => family.id === id);
+  }
+
+  //家族の情報を更新
+  saveFamily(updateFamily: Family) {
+    const index = this.families.findIndex((families) => families.id === updateFamily.id);
+    if (index === -1) {
+      this.families.push(updateFamily);
+      return;
+    }
+    this.families[index] = updateFamily;
+  }
+  //家族の情報を削除
+  deleteFamily(id: string | undefined) {
+    const index = this.families.findIndex((family) => family.id === id);
+    if (index === -1) {
+      return;
+    }
+    this.families.splice(index, 1);
+  }
 }