[add]

檀家詳細ページを追加

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

     bottom: -22px;
   }
 }
-
-.family-tree-svg-container {
-  width: 100%;
-  height: 700px;
-
-  overflow: auto;
-
-  border: 1px solid #ddd;
-}
-.family-tree-svg-container {
-
-  width: 100%;
-
-  height: 700px;
-
-  overflow: hidden;
-
-  border: 1px solid #ddd;
-}
-.family-node {
-
-  cursor: pointer;
-
-}
-
-.family-text {
-
-  cursor: pointer;
-
-}
-
-.family-tree-svg-container svg {
-  width: 100%;
-  height: 100%;
-}
-
-.family-text {
-  writing-mode: vertical-rl;
-  text-orientation: upright;
-}

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

 import { Component } from '@angular/core';
-import {
-  ElementRef,
-  ViewChild,
-  AfterViewInit
-} from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { DankaService } from '../../services/dankaService';
 import { FamilyService } from '../../services/family-service';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 import { MarriageRelationService } from '../../services/marriage-relation-service';
-import {
-  FamilyTreeBuilderService,
-  FamilyTreeNode
-} from '../../services/family-tree-builder';
-import {
-  FamilyTreeLayoutService
-} from '../../services/family-tree-layout';
-
-import {
-  LayoutNode
-} from '../../models/layoutnode';
-import svgPanZoom from 'svg-pan-zoom';
-import { FamilyUnitLayout } from '../../models/family-unit-layout';
-import { FamilyUnitLayoutService } from '../../services/family-unit-layout';
+import { FormsModule } from '@angular/forms';
+import { EventStatus, EventTarget, EventType } from '../../models/event';
 
 interface NextMemorial {
   name: string;
 
 @Component({
   selector: 'app-danka-detail',
-  imports: [AppHeader, AppSideMenu, RouterLink],
+  imports: [AppHeader, AppSideMenu, RouterLink, FormsModule],
   templateUrl: './danka-detail.html',
   styleUrl: './danka-detail.scss',
 })
-export class DankaDetail implements AfterViewInit {
+export class DankaDetail {
   danka: Danka | undefined;
   families: Family[] = [];
   kakocholist: Kakocho[] = [];
   marriageRelations: MarriageRelation[] = [];
   nextMemorial: NextMemorial | undefined;
   currentYear = new Date().getFullYear();
-  treeNodes: FamilyTreeNode[] = [];
-  layoutNodes: LayoutNode[] = [];
-  layoutNodeMap = new Map<string, LayoutNode>();
-  unitLayouts: FamilyUnitLayout[] = [];
-  unitLayoutMap = new Map<string, FamilyUnitLayout>();
-  deathDateMap = new Map<string, Kakocho>();
-  private kakochoByNameMap = new Map<string, Kakocho>();
-
-  selectedTab: 'basic' | 'family' | 'kakocho' | 'familyTree' = 'basic';
-  selectedFamily: Family | undefined = undefined;
-
-  @ViewChild('familyTreeSvg')
-  familyTreeSvg?: ElementRef<SVGSVGElement>;
-  private panZoomInstance: any;
+  familySearchKeyword = '';
+  eventSearchKeyword = '';
+  eventStatuses: EventStatus[] = ['未案内', '案内済'];
+  private eventStatusByTargetId: Record<string, EventStatus> = {};
 
-  readonly PERSON_WIDTH = 90;
-  readonly PERSON_HEIGHT = 140;
-  readonly SPOUSE_GAP = 30;
-
-  viewBox = '0 0 6000 6000';
-  readonly DEATH_FONT_SIZE = 10;
-  readonly DEATH_LINE_HEIGHT = 10; // 少し余白込み
+  selectedTab: 'basic' | 'family' | 'kakocho' | 'event' | 'familyTree' = 'basic';
+  selectedFamily: Family | undefined = undefined;
 
   constructor(
     private dankaService: DankaService,
     private kakochoService: KakochoService,
     private marriageRelationService: MarriageRelationService,
     private route: ActivatedRoute,
-    private familyTreeBuilder: FamilyTreeBuilderService,
-    private familyTreeLayout: FamilyTreeLayoutService,
-    private familyUnitLayout: FamilyUnitLayoutService,
   ) {
     const tab = this.route.snapshot.queryParams['tab'];
     if (tab === 'family') {
       this.selectedTab = 'family';
     } else if (tab === 'kakocho') {
       this.selectedTab = 'kakocho';
+    } else if (tab === 'event') {
+      this.selectedTab = 'event';
     } else if (tab === 'familyTree') {
       this.selectedTab = 'familyTree';
     }
       this.selectedFamily = this.families[0];
       this.kakocholist = this.kakochoService.getKakochoByDankaId(id);
       this.nextMemorial = this.getNextMemorial();
-
-      this.treeNodes =
-        this.familyTreeBuilder.build(
-          this.families,
-          this.marriageRelations
-        );
-
-      const units =
-        this.familyTreeBuilder.buildFamilyUnits(
-          this.treeNodes
-        );
-
-      const unitTree =
-        this.familyTreeBuilder.buildFamilyUnitTree(
-          units
-        );
-
-      const unitRoots =
-        this.familyTreeBuilder.getUnitRoots(
-          unitTree
-        );
-
-      this.unitLayouts =
-        this.familyUnitLayout.buildLayout(
-          unitRoots
-        );
-
-      const roots =
-        this.familyTreeBuilder.getRoots(
-          this.treeNodes
-        );
-
-      this.layoutNodes =
-        this.familyTreeLayout.buildLayout(
-          roots
-        );
-
-      this.rebuildLayoutNodeMap();
-
-      this.unitLayouts =
-        this.familyUnitLayout.buildLayout(
-          unitRoots
-        );
-
-      this.rebuildUnitLayoutMap();
-
-      this.calculateViewBox();
-
-      this.kakocholist.forEach(kakocho => {
-
-        if (kakocho.familyId) {
-
-          this.deathDateMap.set(
-            kakocho.familyId,
-            kakocho
-          );
-
-        }
-
-      });
-
-      this.kakocholist.forEach(k => {
-
-        const key = this.normalizeName(k.name) + '_' + k.dankaId;
-
-        this.kakochoByNameMap.set(key, k);
-
-      });
-
     }
   }
-  ngAfterViewInit(): void {
-    if (!this.familyTreeSvg) {
-      return;
-    }
-
-    this.panZoomInstance = svgPanZoom(
-      this.familyTreeSvg.nativeElement,
-      {
-        fit: true,
-        center: true,
-        zoomEnabled: true,
-        panEnabled: true,
-
-        minZoom: 0.1,
-        maxZoom: 50
-      }
-    );
-  }
-
-  initializePanZoom(): void {
 
-    if (!this.familyTreeSvg) {
-      console.log('SVGなし');
-      return;
+  getAge(birthDate: string): string {
+    if (birthDate === '') {
+      return '-';
     }
 
-    console.log('SVGあり');
+    const birth = new Date(birthDate);
+    const today = new Date();
+    const thisYearBirthday = new Date(today.getFullYear(), birth.getMonth(), birth.getDate());
 
+    let age = today.getFullYear() - birth.getFullYear();
 
-    if (!this.familyTreeSvg) {
-      return;
+    if (thisYearBirthday > today) {
+      age--;
     }
 
-    if (this.panZoomInstance) {
-      return;
+    return age.toString();
+  }
+
+  get filteredFamilies(): Family[] {
+    const keyword = this.familySearchKeyword.trim();
+    if (!keyword) {
+      return this.families;
     }
 
-    this.panZoomInstance = svgPanZoom(
-      this.familyTreeSvg.nativeElement,
-      {
-        zoomEnabled: true,
-        panEnabled: true,
-        fit: true,
-        center: true,
-      }
+    return this.families.filter((family) =>
+      [
+        family.name,
+        family.furigana,
+        family.birthDate,
+        family.relationship,
+        family.note,
+      ].some((value) => value.includes(keyword)),
     );
-
   }
-  openFamilyTreeTab(): void {
-
-    this.selectedTab = 'familyTree';
 
-    setTimeout(() => {
-      this.initializePanZoom();
-    });
+  getFamilyEventLabels(family: Family): string {
+    const birthDate = this.parseDate(family.birthDate);
+    if (!birthDate) {
+      return '-';
+    }
 
+    const age = this.currentYear - birthDate.getFullYear();
+    const eventTypes = this.getEventTypes(age);
+    return eventTypes.length > 0 ? eventTypes.join('、') : '-';
   }
 
-  getAge(birthDate: string): string {
-    if (birthDate === '') {
-      return '-';
+  get eventTargets(): EventTarget[] {
+    if (!this.danka) {
+      return [];
     }
 
-    const birth = new Date(birthDate);
-    const today = new Date();
-    const thisYearBirthday = new Date(today.getFullYear(), birth.getMonth(), birth.getDate());
+    return this.families
+      .flatMap((family) => {
+        const birthDate = this.parseDate(family.birthDate);
+        if (!birthDate) {
+          return [];
+        }
 
-    let age = today.getFullYear() - birth.getFullYear();
+        const age = this.currentYear - birthDate.getFullYear();
+        return this.getEventTypes(age).map((eventType) => {
+          const id = `${family.id}-${eventType}`;
+          return {
+            id,
+            dankaId: family.dankaId,
+            name: family.name,
+            furigana: family.furigana,
+            householdName: this.danka?.householdName ?? '不明',
+            relationship: family.relationship || '未登録',
+            birthDate: family.birthDate,
+            age,
+            eventType,
+            note: family.note,
+            status:
+              this.eventStatusByTargetId[id] ?? (Number(family.id) % 2 === 0 ? '案内済' : '未案内'),
+          };
+        });
+      })
+      .sort(
+        (a, b) =>
+          this.getEventSortOrder(a.eventType) - this.getEventSortOrder(b.eventType) ||
+          a.age - b.age ||
+          a.name.localeCompare(b.name, 'ja'),
+      );
+  }
 
-    if (thisYearBirthday > today) {
-      age--;
+  get filteredEventTargets(): EventTarget[] {
+    const keyword = this.eventSearchKeyword.trim();
+    if (!keyword) {
+      return this.eventTargets;
     }
 
-    return age.toString();
+    return this.eventTargets.filter((target) =>
+      [
+        target.name,
+        target.furigana,
+        target.householdName,
+        target.relationship,
+        target.birthDate,
+        target.age.toString(),
+        target.eventType,
+        target.note,
+        target.status,
+      ].some((value) => value.includes(keyword)),
+    );
+  }
+
+  changeEventStatus(target: EventTarget, status: EventStatus): void {
+    target.status = status;
+    this.eventStatusByTargetId[target.id] = status;
   }
 
   getKaiki(deathDate: string): number {
     }
   }
 
+  private getEventTypes(age: number): EventType[] {
+    const eventTypes: EventType[] = [];
+
+    if (age >= 3 && age <= 12) {
+      eventTypes.push('稚児行列');
+    }
+    if ([3, 5, 7].includes(age)) {
+      eventTypes.push('七五三');
+    }
+    if (age === 20) {
+      eventTypes.push('成人式');
+    }
+    if (age === 88) {
+      eventTypes.push('米寿');
+    }
+
+    return eventTypes;
+  }
+
+  private getEventSortOrder(eventType: EventType): number {
+    return ['稚児行列', '七五三', '成人式', '米寿'].indexOf(eventType);
+  }
+
   private getNextMemorial(): NextMemorial | undefined {
     const today = this.toDateOnly(new Date());
 
     }
     return '不明';
   }
-
-  getLayoutNode(
-    familyId: string
-  ): LayoutNode | undefined {
-
-    return this.layoutNodeMap.get(
-      familyId
-    );
-
-  }
-  getCurrentMarriageLines() {
-
-    return this.marriageRelations.filter(
-      x => x.status === 'current'
-    );
-
-  }
-
-  private rebuildLayoutNodeMap(): void {
-
-    this.layoutNodeMap.clear();
-
-    this.layoutNodes.forEach(node => {
-
-      this.layoutNodeMap.set(
-        node.familyId,
-        node
-      );
-
-    });
-
-  }
-
-  private rebuildUnitLayoutMap(): void {
-
-    this.unitLayoutMap.clear();
-
-    this.unitLayouts.forEach(layout => {
-
-      this.unitLayoutMap.set(
-        layout.node.unit.id,
-        layout
-      );
-
-    });
-
-  }
-
-  getUnitLayout(
-    unitId: string
-  ): FamilyUnitLayout | undefined {
-
-    return this.unitLayoutMap.get(
-      unitId
-    );
-
-  }
-
-  getCenterX(layout: FamilyUnitLayout): number {
-
-    return (
-      layout.x +
-      this.PERSON_WIDTH +
-      this.SPOUSE_GAP / 2
-    );
-
-  }
-
-  getTopCenterY(
-    layout: FamilyUnitLayout
-  ): number {
-
-    return layout.y;
-
-  }
-
-  getBottomCenterY(
-    layout: FamilyUnitLayout
-  ): number {
-
-    return (
-      layout.y +
-      this.PERSON_HEIGHT
-    );
-
-  }
-
-  getMiddleY(
-    parent: FamilyUnitLayout,
-    child: FamilyUnitLayout
-  ): number {
-
-    return (
-      this.getBottomCenterY(parent)
-      +
-      child.y
-    ) / 2;
-
-  }
-
-  getHusbandX(
-    layout: FamilyUnitLayout
-  ): number {
-
-    if (!layout.node.unit.wife) {
-      return (
-        layout.x +
-        (this.PERSON_WIDTH + this.SPOUSE_GAP) / 2
-      );
-    }
-
-    return layout.x;
-
-  }
-
-  getWifeX(
-    layout: FamilyUnitLayout
-  ): number {
-
-    if (!layout.node.unit.husband) {
-      return (
-        layout.x +
-        (this.PERSON_WIDTH + this.SPOUSE_GAP) / 2
-      );
-    }
-
-    return (
-      layout.x +
-      this.PERSON_WIDTH +
-      this.SPOUSE_GAP
-    );
-
-  }
-
-  getHusbandTextX(
-    layout: FamilyUnitLayout
-  ): number {
-
-    return (
-      this.getHusbandX(layout)
-      + this.PERSON_WIDTH / 2
-    );
-
-  }
-
-  getWifeTextX(
-    layout: FamilyUnitLayout
-  ): number {
-
-    return (
-      this.getWifeX(layout)
-      + this.PERSON_WIDTH / 2
-    );
-  }
-
-  private calculateViewBox(): void {
-
-    if (this.unitLayouts.length === 0) {
-      return;
-    }
-
-    const minX = Math.min(
-      ...this.unitLayouts.map(x => x.x)
-    );
-
-    const minY = Math.min(
-      ...this.unitLayouts.map(x => x.y)
-    );
-
-    const maxX = Math.max(
-      ...this.unitLayouts.map(
-        x => x.x + this.PERSON_WIDTH * 2 + this.SPOUSE_GAP
-      )
-    );
-
-    const maxY = Math.max(
-      ...this.unitLayouts.map(
-        x => x.y + this.PERSON_HEIGHT
-      )
-    );
-
-    const padding = 100;
-
-    this.viewBox =
-      `${minX - padding}
-     ${minY - padding}
-     ${maxX - minX + padding * 2}
-     ${maxY - minY + padding * 2}`;
-  }
-
-  getKakochoByFamilyId(
-    familyId: string
-  ): Kakocho | undefined {
-
-    return this.deathDateMap.get(
-      familyId
-    );
-
-  }
-
-  getKakochoByFamily(family: Family): Kakocho | undefined {
-
-    const key =
-      this.normalizeName(family.name) + '_' + family.dankaId;
-
-    return this.kakochoByNameMap.get(key);
-
-  }
-
-  getDeathWareki(family: Family): string {
-
-    const kakocho = this.getKakochoByFamily(family);
-
-    if (!kakocho?.deathDate) return '';
-
-    const date = new Date(kakocho.deathDate);
-
-    const wareki = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
-      era: 'long',
-      year: 'numeric',
-    }).format(date);
-
-    return `${wareki}${date.getMonth() + 1}月${date.getDate()}日没`;
-  }
-
-  getAgeAtDeathText(family: Family): string {
-
-    const kakocho = this.getKakochoByFamily(family);
-
-    if (!kakocho?.ageAtDeath) return '';
-
-    return `享年${kakocho.ageAtDeath}歳`;
-  }
-
-  getDeathDate(family: Family): string {
-
-    const kakocho = this.getKakochoByFamily(family);
-
-    return kakocho?.deathDate ?? '';
-
-  }
-
-  /**
-   * 縦書きテキストの高さを概算する
-   */
-  getVerticalTextHeight(text: string | null | undefined): number {
-    if (!text) return 0;
-
-    // 縦書きは基本「1文字＝1行」
-    return text.length * this.DEATH_LINE_HEIGHT;
-  }
-
-  /**
-   * テキストをカード下に揃えるためのY座標
-   */
-  getDeathTextY(layout: FamilyUnitLayout, text: string | null | undefined): number {
-
-    const height = this.getVerticalTextHeight(text);
-
-    return (
-      layout.y +
-      this.PERSON_HEIGHT - 5 - height
-    );
-  }
-
 }