[update]

再描画処理

src/app/pages/event/event.html

@@ -76,7 +76,11 @@
             <div>状態</div>
           </div>
 
-          @if (filteredEventTargets.length > 0) {
+          @if (isLoading) {
+            <div class="empty-message">
+              読み込み中です。
+            </div>
+          } @else if (filteredEventTargets.length > 0) {
             @for (target of filteredEventTargets; track target.id) {
               <div class="event-table-row">
                 <div>

src/app/pages/event/event.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { DankaService } from '../../services/dankaService';
 import { FamilyService } from '../../services/family-service';
@@ -15,6 +15,7 @@ import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 })
 export class EventPage implements OnInit{
   eventTargets: EventTarget[] = [];
+  isLoading = true;
   targetYear: number = new Date().getFullYear();
   selectedEventType: EventType | 'all' = 'all';
   selectedStatus: EventStatus | 'all' = 'all';
@@ -38,11 +39,13 @@ export class EventPage implements OnInit{
     { label: '未案内', value: '未案内' },
     { label: '案内済', value: '案内済' },
   ];
+  private eventRequestId = 0;
 
   constructor(
     private dankaService: DankaService,
     private familyService: FamilyService,
     private eventService: EventService,
+    private cdr: ChangeDetectorRef,
   ) { }
 
   ngOnInit(): void {
@@ -54,7 +57,15 @@ export class EventPage implements OnInit{
   }
 
   async createEventTargetList(): Promise<void> {
-    this.eventTargets = [];
+    const requestId = ++this.eventRequestId;
+    const targetYear = this.targetYear;
+    const selectedEventType = this.selectedEventType;
+    const eventTargets: EventTarget[] = [];
+
+    if (this.eventTargets.length === 0) {
+      this.isLoading = true;
+      this.cdr.detectChanges();
+    }
 
     const families = await this.familyService.getFamilyList();
 
@@ -62,7 +73,7 @@ export class EventPage implements OnInit{
       const birthDate = this.parseDate(family.birthDate);
       if (!birthDate) continue;
 
-      const age = this.targetYear - birthDate.getFullYear();
+      const age = targetYear - birthDate.getFullYear();
       const eventTypes = this.getEventTypes(age);
       if (eventTypes.length === 0) continue;
 
@@ -71,8 +82,8 @@ export class EventPage implements OnInit{
 
       for (const eventType of eventTypes) {
         if (
-          this.selectedEventType !== 'all' &&
-          this.selectedEventType !== eventType
+          selectedEventType !== 'all' &&
+          selectedEventType !== eventType
         ) {
           continue;
         }
@@ -82,14 +93,14 @@ export class EventPage implements OnInit{
         const defaultStatus: EventStatus =
           Number(family.id) % 2 === 0 ? '案内済' : '未案内';
 
-        this.eventTargets.push({
+        eventTargets.push({
           id,
           dankaId: family.dankaId,
           name: family.name,
           furigana: family.furigana,
           householdName: danka?.householdName ?? '不明',
           relationship: family.relationship || '未登録',
-          birthDate: family.birthDate,
+          birthDate: this.formatDateForValue(birthDate),
           age,
           eventType,
           note: family.note,
@@ -98,13 +109,19 @@ export class EventPage implements OnInit{
       }
     }
 
-    this.eventTargets.sort(
+    if (requestId !== this.eventRequestId) {
+      return;
+    }
+
+    this.eventTargets = eventTargets.sort(
       (a, b) =>
         this.getEventSortOrder(a.eventType) -
         this.getEventSortOrder(b.eventType) ||
         a.age - b.age ||
         a.name.localeCompare(b.name, 'ja'),
     );
+    this.isLoading = false;
+    this.cdr.detectChanges();
   }
 
   changeEventType(eventType: EventType | 'all'): void {
@@ -128,7 +145,7 @@ export class EventPage implements OnInit{
           target.eventType,
           target.note,
           target.status,
-        ].some((value) => value.includes(keyword));
+        ].some((value) => this.includesKeyword(value, keyword));
 
       return matchesStatus && matchesKeyword;
     });
@@ -162,11 +179,38 @@ export class EventPage implements OnInit{
     return ['稚児行列', '七五三', '成人式', '米寿'].indexOf(eventType);
   }
 
-  private parseDate(value: string): Date | null {
+  private parseDate(value: unknown): Date | null {
+    if (!value) {
+      return null;
+    }
+
+    if (value instanceof Date) {
+      return value;
+    }
+
+    if (typeof value === 'object' && 'toDate' in value && typeof value.toDate === 'function') {
+      return value.toDate();
+    }
+
+    if (typeof value !== 'string') {
+      return null;
+    }
+
     const [year, month, day] = value.split('-').map(Number);
     if (!year || !month || !day) {
       return null;
     }
     return new Date(year, month - 1, day);
   }
+
+  private includesKeyword(value: unknown, keyword: string): boolean {
+    return String(value ?? '').includes(keyword);
+  }
+
+  private formatDateForValue(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
 }

src/app/pages/memorial-list/memorial-list.html

@@ -69,7 +69,11 @@
             <div>詳細</div>
           </div>
 
-          @if (filteredMemorialList.length > 0) {
+          @if (isLoading) {
+            <div class="empty-message">
+              読み込み中です。
+            </div>
+          } @else if (filteredMemorialList.length > 0) {
             @for (memorial of filteredMemorialList; track memorial.id) {
               <div class="memorial-table-row">
                 <div class="person-name">

src/app/pages/memorial-list/memorial-list.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Memorial } from '../../models/memorial';
 import { DankaService } from '../../services/dankaService';
@@ -15,9 +15,11 @@ import { FormsModule } from '@angular/forms';
 })
 export class MemorialList implements OnInit{
   memorialList: Memorial[] = [];
+  isLoading = true;
   targetYear: number = new Date().getFullYear();
   selectedMemorialType = 'all';
   searchKeyword = '';
+  private memorialRequestId = 0;
   yearOptions: number[] = [
     this.targetYear - 1,
     this.targetYear,
@@ -45,6 +47,7 @@ export class MemorialList implements OnInit{
   constructor(
     private dankaService: DankaService,
     private kakochoService: KakochoService,
+    private cdr: ChangeDetectorRef,
   ) {
 
   }
@@ -57,20 +60,31 @@ export class MemorialList implements OnInit{
   }
 
   async createMemorialList(): Promise<void> {
-    this.memorialList = [];
+    const requestId = ++this.memorialRequestId;
+    const targetYear = this.targetYear;
+    const selectedMemorialType = this.selectedMemorialType;
+    const memorialList: Memorial[] = [];
+
+    if (this.memorialList.length === 0) {
+      this.isLoading = true;
+      this.cdr.detectChanges();
+    }
 
     const kakochoList = await this.kakochoService.getKakochoList();
 
     for (const kakocho of kakochoList) {
-      const deathYear = Number(kakocho.deathDate.slice(0, 4));
-      const yearDiff = this.targetYear - deathYear;
+      const deathDate = this.parseDate(kakocho.deathDate);
+      if (!deathDate) continue;
+
+      const deathYear = deathDate.getFullYear();
+      const yearDiff = targetYear - deathYear;
 
       const memorialType = this.getMemorialType(yearDiff);
       if (memorialType === '') continue;
 
       if (
-        this.selectedMemorialType !== 'all' &&
-        this.selectedMemorialType !== memorialType
+        selectedMemorialType !== 'all' &&
+        selectedMemorialType !== memorialType
       ) {
         continue;
       }
@@ -85,15 +99,19 @@ export class MemorialList implements OnInit{
         kaimyo: kakocho.kaimyo,
         relationship: kakocho.relationship,
         householdName: danka?.householdName ?? '不明',
-        deathDate: kakocho.deathDate,
+        deathDate: this.formatDateForValue(deathDate),
         memorialType,
         note: kakocho.note,
       };
 
-      this.memorialList.push(memorialTarget);
+      memorialList.push(memorialTarget);
     }
 
-    this.memorialList.sort((a, b) => {
+    if (requestId !== this.memorialRequestId) {
+      return;
+    }
+
+    this.memorialList = memorialList.sort((a, b) => {
       const deathDateA = new Date(a.deathDate).getTime();
       const deathDateB = new Date(b.deathDate).getTime();
 
@@ -103,6 +121,8 @@ export class MemorialList implements OnInit{
 
       return a.name.localeCompare(b.name, 'ja');
     });
+    this.isLoading = false;
+    this.cdr.detectChanges();
   }
 
   changeMemorialType(memorialType: string): void {
@@ -126,17 +146,21 @@ export class MemorialList implements OnInit{
         memorial.householdName,
         memorial.memorialType,
         memorial.note,
-      ].some((value) => value.includes(keyword)),
+      ].some((value) => this.includesKeyword(value, keyword)),
     );
   }
 
+  private includesKeyword(value: unknown, keyword: string): boolean {
+    return String(value ?? '').includes(keyword);
+  }
+
   formatDeathDate(deathDate: string): string {
-    const [, month, day] = deathDate.split('-').map(Number);
-    if (!month || !day) {
+    const date = this.parseDate(deathDate);
+    if (!date) {
       return '未登録';
     }
 
-    return `${month}月${day}日`;
+    return `${date.getMonth() + 1}月${date.getDate()}日`;
   }
 
   getMemorialType(yearDiff: number) {
@@ -173,4 +197,36 @@ export class MemorialList implements OnInit{
         return '';
     }
   }
+
+  private parseDate(value: unknown): Date | null {
+    if (!value) {
+      return null;
+    }
+
+    if (value instanceof Date) {
+      return value;
+    }
+
+    if (typeof value === 'object' && 'toDate' in value && typeof value.toDate === 'function') {
+      return value.toDate();
+    }
+
+    if (typeof value !== 'string') {
+      return null;
+    }
+
+    const [year, month, day] = value.split('-').map(Number);
+    if (!year || !month || !day) {
+      return null;
+    }
+
+    return new Date(year, month - 1, day);
+  }
+
+  private formatDateForValue(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
 }

src/app/pages/search/search.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { Danka } from '../../models/danka';
@@ -37,6 +37,7 @@ export class Search implements OnInit{
     private familyService: FamilyService,
     private kakochoService: KakochoService,
     private route: ActivatedRoute,
+    private cdr: ChangeDetectorRef,
   ) { }
 
   ngOnInit(): void {
@@ -153,6 +154,7 @@ export class Search implements OnInit{
     this.familyResults = [];
     this.kakochoResults = [];
     this.totalResultCount = 0;
+    this.cdr.detectChanges();
   }
 
   private includesKeyword(value: unknown, keyword: string): boolean {
@@ -180,5 +182,6 @@ export class Search implements OnInit{
       dankaResults.length +
       familyResults.length +
       kakochoResults.length;
+    this.cdr.detectChanges();
   }
 }