[add]

家系図タブの家系図表示と処理を追加

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

@@ -67,60 +67,60 @@
             </nav>
           </div>
           @if (selectedTab === 'basic') {
-          <button
-            type="button"
-            class="edit-button"
-            [routerLink]="['/danka-edit', danka.id]"
-          >
-            編集
-          </button>
+            <button
+              type="button"
+              class="edit-button"
+              [routerLink]="['/danka-edit', danka.id]"
+            >
+              編集
+            </button>
           }
 
           @if (selectedTab === 'kakocho') {
-          <button
-            type="button"
-            class="add-button"
-            [routerLink]="['/kakocho-edit', danka.id]"
-          >
-            故人を登録
-          </button>
-
-          <button
-            type="button"
-            class="edit-button"
-            [routerLink]="['/kakocho-edit', danka.id, kakocholist[0].id]"
-          >
-            編集
-          </button>
+            <button
+              type="button"
+              class="add-button"
+              [routerLink]="['/kakocho-edit', danka.id]"
+            >
+              故人を登録
+            </button>
+
+            <button
+              type="button"
+              class="edit-button"
+              [routerLink]="['/kakocho-edit', danka.id, kakocholist[0].id]"
+            >
+              編集
+            </button>
           }
 
         </div>
 
         <section class="family-summary">
           @if (selectedTab === 'basic') {
-          <div class="family-name-area">
-            <p class="family-name">{{ danka.householdName }}</p>
-            <p class="family-head">世帯主: {{ danka.householder }}</p>
-          </div>
+            <div class="family-name-area">
+              <p class="family-name">{{ danka.householdName }}</p>
+              <p class="family-head">世帯主: {{ danka.householder }}</p>
+            </div>
 
-          <div class="family-address">
-            <p>郵便番号 〒{{ danka.postalCode }}</p>
-            <p>住所 {{ danka.address }}</p>
-          </div>
+            <div class="family-address">
+              <p>郵便番号 〒{{ danka.postalCode }}</p>
+              <p>住所 {{ danka.address }}</p>
+            </div>
 
-          <button type="button" class="memo-button">
-            回忌を見る
-          </button>
+            <button type="button" class="memo-button">
+              回忌を見る
+            </button>
           }
 
           @if (selectedTab === 'kakocho') {
-          <div class="family-name-area">
-            <p class="family-name">{{ danka.householdName }}の過去帳{{ kakocholist.length }} 名</p>
-          </div>
+            <div class="family-name-area">
+              <p class="family-name">{{ danka.householdName }}の過去帳{{ kakocholist.length }} 名</p>
+            </div>
 
-          <button type="button" class="memo-button">
-            年次法要を見る
-          </button>
+            <button type="button" class="memo-button">
+              年次法要を見る
+            </button>
           }
         </section>
 
@@ -355,20 +355,227 @@
                 <div class="empty-family-message">
                   登録されている家族情報はありません。
                 </div>
-              }              
+              }
             </p>
           </section>
         }
 
         @if (selectedTab === 'familyTree') {
-          <section class="coming-soon-section">
+          <section class="family-tree-tab-content">
             <div class="section-heading">
               <h2>家系図</h2>
+              <p>
+                家族情報に登録された親子・配偶者の関係をもとに表示します。
+              </p>
             </div>
 
-            <p class="empty-family-message">
-              家系図はこれから実装します。
-            </p>
+            @if (families.length > 0) {
+              <div class="family-tree-layout">
+                <section class="family-tree-area">
+                  <div class="family-tree-toolbar">
+                    <div>
+                      <p class="family-tree-title">
+                        {{ danka.householdName }}の家系図
+                      </p>
+                      <p class="family-tree-caption">
+                        人物カードを選択すると、右側に関係情報が表示されます。
+                      </p>
+                    </div>
+
+                    <div class="family-tree-action-list">
+                      <button type="button" class="tree-action-button"
+                              [routerLink]="['/danka', danka.id, 'family-new']">
+                        親子を追加
+                      </button>
+
+                      <button type="button" class="tree-action-button"
+                              [routerLink]="['/danka', danka.id, 'family-new']">
+                        配偶者を追加
+                      </button>
+                    </div>
+                  </div>
+
+                  @if (selectedFamily) {
+                    <div class="family-tree-diagram">
+
+                      <div class="tree-generation parent-generation">
+                        @if (getFather(selectedFamily)) {
+                          <button
+                            type="button"
+                            class="family-tree-card small"
+                            (click)="selectFamily(getFather(selectedFamily)!)">
+                            <span class="tree-card-name">{{ getFather(selectedFamily)?.name }}</span>
+                            <span class="tree-card-relationship">父</span>
+                          </button>
+                        }
+                        @if (getMother(selectedFamily)) {
+                          <button type="button" class="family-tree-card small"
+                                  (click)="selectFamily(getMother(selectedFamily)!)">
+                            <span class="tree-card-name">{{ getMother(selectedFamily)?.name }}</span>
+                            <span class="tree-card-relationship">母</span>
+                          </button>
+                        }
+                      </div>
+
+                      <div class="tree-generation main-generation">
+                        <button type="button"
+                                class="family-tree-card active main-person">
+                          <span class="tree-card-name">
+                            {{ selectedFamily.name }}
+                          </span>
+                          <span class="tree-card-relationship">
+                            {{ selectedFamily.relationship || '関係未登録' }}
+                          </span>
+                          <span class="tree-card-birth">
+                            {{ selectedFamily.birthDate || '生年月日未登録' }}
+                          </span>
+                        </button>
+
+                        @if (getSpouse(selectedFamily)) {
+                          <button
+                            type="button"
+                            class="family-tree-card spouse-person"
+                            (click)="selectFamily(getSpouse(selectedFamily)!)">
+                            <span class="tree-card-name">
+                              {{ getSpouse(selectedFamily)?.name }}
+                            </span>
+                            <span class="tree-card-relationship">配偶者</span>
+                            <span class="tree-card-birth">
+                              {{ getSpouse(selectedFamily)?.birthDate || '生年月日未登録' }}
+                            </span>
+                          </button>
+                        }
+                      </div>
+
+                      <div class="tree-generation child-generation">
+                        @if (getChildren(selectedFamily).length > 0) {
+                          @for (child of getChildren(selectedFamily); track child.id) {
+                            <button
+                              type="button"
+                              class="family-tree-card small"
+                              (click)="selectFamily(child)">
+                              <span class="tree-card-name">
+                                {{ child.name }}
+                              </span>
+                              <span class="tree-card-relationship">
+                                {{ child.relationship || '子' }}
+                              </span>
+                            </button>
+                          }
+                        } @else {
+                          <p class="tree-empty-text">
+                            子どもの登録はありません。
+                          </p>
+                        }
+                      </div>
+                    </div>
+                    <div class="family-tree-member-list">
+                      <p class="member-list-title">人物一覧</p>
+
+                      <div class="member-chip-list">
+                        @for (family of families; track family.id) {
+                          <button
+                            type="button"
+                            class="member-chip"
+                            [class.active]="selectedFamily?.id === family.id"
+                            (click)="selectFamily(family)"
+                          >
+                            {{ family.name }}
+                          </button>
+                        }
+                      </div>
+                    </div>
+                  } @else {
+                    <p class="empty-family-message">
+                      人物カードを選択してください。
+                    </p>
+                  }
+                </section>
+
+                <aside class="family-tree-side-panel">
+                  <h3>選択中の人物情報</h3>
+
+                  @if (selectedFamily) {
+                    <div class="selected-person-card">
+                      <p class="selected-person-name">
+                        {{ selectedFamily.name }}
+                      </p>
+
+                      <p class="selected-person-sub">
+                        {{ selectedFamily.furigana || 'ふりがな未登録' }}
+                      </p>
+                    </div>
+
+                    <div class="selected-info-list">
+                      <div class="selected-info-row">
+                        <span>関係</span>
+                        <strong>{{ selectedFamily.relationship || '未登録' }}</strong>
+                      </div>
+
+                      <div class="selected-info-row">
+                        <span>生年月日</span>
+                        <strong>{{ selectedFamily.birthDate || '未登録' }}</strong>
+                      </div>
+
+                      <div class="selected-info-row">
+                        <span>父</span>
+                        <strong>{{ getFather(selectedFamily)?.name || '未登録' }}</strong>
+                      </div>
+
+                      <div class="selected-info-row">
+                        <span>母</span>
+                        <strong>{{ getMother(selectedFamily)?.name || '未登録' }}</strong>
+                      </div>
+
+                      <div class="selected-info-row">
+                        <span>配偶者</span>
+                        <strong>{{ getSpouse(selectedFamily)?.name || '未登録' }}</strong>
+                      </div>
+
+                      <div class="selected-info-row children-row">
+                        <span>子</span>
+                        <strong>
+                          @if (getChildren(selectedFamily).length > 0) {
+                            @for (child of getChildren(selectedFamily); track child.id) {
+                              <span class="child-name">
+                        {{ child.name }}
+                      </span>
+                            }
+                          } @else {
+                            未登録
+                          }
+                        </strong>
+                      </div>
+                    </div>
+
+                    <div class="selected-person-actions">
+                      <a
+                        class="selected-person-button"
+                        [routerLink]="['/danka', danka.id, 'family', selectedFamily.id, 'edit']"
+                      >
+                        個人情報を編集
+                      </a>
+
+                      <button
+                        type="button"
+                        class="selected-person-button secondary"
+                        (click)="selectedTab = 'kakocho'"
+                      >
+                        過去帳を確認
+                      </button>
+                    </div>
+                  } @else {
+                    <p class="empty-family-message">
+                      人物カードを選択してください。
+                    </p>
+                  }
+                </aside>
+              </div>
+            } @else {
+              <div class="empty-family-message">
+                登録されている家族情報はありません。
+              </div>
+            }
           </section>
         }
       } @else {

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

@@ -566,6 +566,395 @@
   margin-top: 24px;
 }
 
+/* =========================
+   家系図タブ
+========================= */
+
+.family-tree-tab-content {
+  margin-top: 24px;
+}
+
+.family-tree-tab-content .section-heading {
+  margin-bottom: 16px;
+}
+
+.family-tree-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: 24px;
+  align-items: start;
+}
+
+.family-tree-area {
+  min-height: 460px;
+  padding: 22px;
+  background: #fffaf3;
+  border: 2px solid #d8c2aa;
+  border-radius: 18px;
+  box-sizing: border-box;
+}
+
+.family-tree-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 18px;
+  margin-bottom: 22px;
+}
+
+.family-tree-title {
+  margin: 0;
+  color: #2f2720;
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.family-tree-caption {
+  margin: 4px 0 0;
+  color: #7b6b5c;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.family-tree-action-list {
+  display: flex;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.tree-action-button {
+  min-width: 112px;
+  height: 38px;
+  padding: 0 14px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #2f2720;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.tree-action-button:hover {
+  background: #f6efe6;
+}
+
+.family-tree-card-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 14px;
+}
+
+.family-tree-card {
+  min-height: 112px;
+  padding: 16px 18px;
+  border: 2px solid #d8c2aa;
+  border-radius: 14px;
+  background: #ffffff;
+  color: #2f2720;
+  text-align: left;
+  cursor: pointer;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.family-tree-card:hover {
+  background: #f6efe6;
+}
+
+.family-tree-card.active {
+  border-color: #8a6543;
+  background: #eadfce;
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.16);
+}
+
+.tree-card-name {
+  color: #5d3b24;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.tree-card-relationship {
+  color: #2f2720;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.tree-card-birth {
+  color: #7b6b5c;
+  font-size: 13px;
+}
+
+.family-tree-side-panel {
+  min-height: 460px;
+  padding: 24px 22px;
+  background: #fffdf9;
+  border: 2px solid #d8caba;
+  border-radius: 36px;
+  box-sizing: border-box;
+}
+
+.family-tree-side-panel h3 {
+  margin: 0 0 16px;
+  color: #2f2720;
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.selected-person-card {
+  margin-bottom: 18px;
+  padding: 16px 18px;
+  background: #eadfce;
+  border: 2px solid #d8caba;
+  border-radius: 14px;
+  box-sizing: border-box;
+}
+
+.selected-person-name {
+  margin: 0;
+  color: #2f2720;
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.selected-person-sub {
+  margin: 4px 0 0;
+  color: #7b6b5c;
+  font-size: 14px;
+}
+
+.selected-info-list {
+  display: grid;
+  gap: 10px;
+}
+
+.selected-info-row {
+  display: grid;
+  grid-template-columns: 82px 1fr;
+  gap: 10px;
+  align-items: start;
+  padding: 10px 12px;
+  background: #ffffff;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.selected-info-row span {
+  color: #7b6b5c;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.selected-info-row strong {
+  color: #2f2720;
+  font-size: 15px;
+  font-weight: 800;
+  line-height: 1.6;
+}
+
+.children-row strong {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.child-name {
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: #f1e7d8;
+  color: #5d3b24;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.selected-person-actions {
+  display: grid;
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.selected-person-button {
+  min-height: 42px;
+  border: 2px solid #8a6543;
+  border-radius: 6px;
+  background: #8a6543;
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: 800;
+  text-decoration: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.selected-person-button:hover {
+  background: #765639;
+}
+
+.selected-person-button.secondary {
+  background: #ffffff;
+  color: #8a6543;
+}
+
+.selected-person-button.secondary:hover {
+  background: #f6efe6;
+}
+
+/* =========================
+   家系図 図式レイアウト
+========================= */
+
+.family-tree-diagram {
+  min-height: 330px;
+  padding: 28px 18px;
+  background: #fffdf9;
+  border: 2px dashed #d8c2aa;
+  border-radius: 18px;
+  box-sizing: border-box;
+  display: grid;
+  gap: 34px;
+}
+
+.tree-generation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 18px;
+  position: relative;
+}
+
+.parent-generation {
+  padding-bottom: 8px;
+}
+
+.main-generation {
+  padding: 8px 0;
+}
+
+.child-generation {
+  padding-top: 8px;
+  flex-wrap: wrap;
+}
+
+.family-tree-card.small {
+  min-height: 86px;
+  max-width: 180px;
+}
+
+.family-tree-card.main-person {
+  min-width: 210px;
+}
+
+.family-tree-card.spouse-person {
+  min-width: 190px;
+}
+
+/* 本人と配偶者の間の線 */
+.main-generation .main-person::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: -20px;
+  width: 20px;
+  height: 2px;
+  background: #8a6543;
+}
+
+/* カードを線の基準にする */
+.main-generation .family-tree-card {
+  position: relative;
+}
+
+/* 親世代から本人世代への縦線 */
+.parent-generation::after {
+  content: "";
+  position: absolute;
+  bottom: -28px;
+  left: 50%;
+  width: 2px;
+  height: 28px;
+  background: #d8c2aa;
+  transform: translateX(-50%);
+}
+
+/* 本人世代から子世代への縦線 */
+.main-generation::after {
+  content: "";
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  width: 2px;
+  height: 30px;
+  background: #d8c2aa;
+  transform: translateX(-50%);
+}
+
+/* 子どもがいない場合の文言 */
+.tree-empty-text {
+  margin: 0;
+  padding: 12px 18px;
+  background: #ffffff;
+  border: 2px solid #d8c2aa;
+  border-radius: 10px;
+  color: #7b6b5c;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.family-tree-member-list {
+  margin-top: 18px;
+  padding: 16px 18px;
+  background: #ffffff;
+  border: 2px solid #d8c2aa;
+  border-radius: 14px;
+  box-sizing: border-box;
+}
+
+.member-list-title {
+  margin: 0 0 10px;
+  color: #5d3b24;
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.member-chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.member-chip {
+  min-height: 34px;
+  padding: 6px 12px;
+  border: 2px solid #d8caba;
+  border-radius: 999px;
+  background: #fffdf9;
+  color: #2f2720;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.member-chip:hover {
+  background: #f6efe6;
+}
+
+.member-chip.active {
+  border-color: #8a6543;
+  background: #8a6543;
+  color: #ffffff;
+}
+
 /* 家族表が狭い画面では横スクロール */
 @media (max-width: 800px) {
   .family-list-summary {
@@ -585,4 +974,59 @@
   .family-support-area {
     grid-template-columns: 1fr;
   }
-}
+
+  //家系図タブ
+  .family-tree-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .family-tree-toolbar {
+    flex-direction: column;
+  }
+
+  .family-tree-action-list {
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .tree-action-button {
+    width: 100%;
+  }
+
+  .family-tree-side-panel {
+    border-radius: 28px;
+  }
+
+  .selected-info-row {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+
+  .family-tree-diagram {
+    padding: 22px 12px;
+    gap: 26px;
+  }
+
+  .tree-generation {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .family-tree-card.small,
+  .family-tree-card.main-person,
+  .family-tree-card.spouse-person {
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+  }
+
+  .main-generation .main-person::after {
+    display: none;
+  }
+
+  .parent-generation::after,
+  .main-generation::after {
+    height: 20px;
+    bottom: -22px;
+  }
+}

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

@@ -22,6 +22,7 @@ export class DankaDetail {
   currentYear = new Date().getFullYear();
 
   selectedTab: 'basic' | 'family' | 'kakocho' | 'familyTree' = 'basic';
+  selectedFamily: Family | undefined = undefined;
 
   constructor(
     private dankaService: DankaService,
@@ -43,6 +44,7 @@ export class DankaDetail {
     if (id) {
       this.danka = this.dankaService.getDankaById(id);
       this.families = this.familyService.getFamiliesByDankaId(id);
+      this.selectedFamily = this.families[0];
       this.kakocholist = this.kakochoService.getKakochoByDankaId(id);
     }
     console.log(this.danka);
@@ -50,6 +52,7 @@ export class DankaDetail {
     console.log(tab);
   }
 
+  //年齢計算の処理
   getAge(birthDate: string) {
     if (birthDate === '') {
       return '-';
@@ -68,11 +71,38 @@ export class DankaDetail {
     console.log(this.kakocholist);
   }
 
+  //回忌計算の処理
   getKaiki(deathDate: string): number {
-    return (
-      this.currentYear -
-      new Date(deathDate).getFullYear() +
-      1
+    return this.currentYear - new Date(deathDate).getFullYear() + 1;
+  }
+
+  //家系図の処理
+  selectFamily(family: Family): void {
+    this.selectedFamily = family;
+  }
+
+  getFamilyById(id: string): Family | undefined {
+    if (!id) {
+      return undefined;
+    }
+    return this.families.find((family) => family.id === id);
+  }
+
+  getFather(family: Family): Family | undefined {
+    return this.getFamilyById(family.fatherId);
+  }
+
+  getMother(family: Family): Family | undefined {
+    return this.getFamilyById(family.motherId);
+  }
+
+  getSpouse(family: Family): Family | undefined {
+    return this.getFamilyById(family.spouseId);
+  }
+
+  getChildren(family: Family): Family[] {
+    return this.families.filter(
+      (child) => child.fatherId === family.id || child.motherId === family.id,
     );
   }
 }