再描画処理

src/app/pages/dashboard/dashboard.ts

@@ -69,7 +69,7 @@ export class Dashboard {
         danka,
         nextMemorialLabel: await this.getNextMemorialLabel(danka.id),
         updatedAtLabel: this.formatUpdatedAt(danka.updatedAt),
-      }))
+      })),
     );
   }
 
@@ -143,7 +143,7 @@ export class Dashboard {
           type,
           status,
         };
-      })
+      }),
     );
 
     this.upcomingMemorials = results
@@ -187,8 +187,7 @@ export class Dashboard {
 
   private async getNextMemorialLabel(dankaId: string): Promise<string> {
     const today = this.toDateOnly(new Date());
-    const nextMemorial = (await this.kakochoService
-      .getKakochoByDankaId(dankaId))
+    const nextMemorial = (await this.kakochoService.getKakochoByDankaId(dankaId))
       .map((kakocho) => {
         const deathDate = this.parseDate(kakocho.deathDate);
         if (!deathDate) {

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.html

@@ -13,11 +13,12 @@
         <div class="search-input-row">
           <div class="search-input-box">
             <span class="search-icon">⌕</span>
-            <input type="text" [(ngModel)]="searchKeyword"
+            <input type="text" [ngModel]="searchKeyword"
+                   (ngModelChange)="onSearchKeywordChange($event)"
                    placeholder="三回忌 / 〇〇歳 / 2024 /"
-                   (keydown.enter)="searchAll()"/>
+                   (keydown.enter)="submitSearch()"/>
           </div>
-          <button type="button" class="search-button" (click)="searchAll()">
+          <button type="button" class="search-button" (click)="submitSearch()">
             検索
           </button>
           <button type="button" class="filter-button-main" (click)="clearSearch()">

src/app/pages/search/search.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormsModule } from '@angular/forms';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { Danka } from '../../models/danka';
 import { Family } from '../../models/family';
 import { Kakocho } from '../../models/kakocho';
@@ -29,12 +29,15 @@ export class Search implements OnInit{
   familyResults: Family[] = [];
   kakochoResults: Kakocho[] = [];
   totalResultCount = 0;
+  private searchTimer?: ReturnType<typeof setTimeout>;
+  private searchRequestId = 0;
 
   constructor(
     private dankaService: DankaService,
     private familyService: FamilyService,
     private kakochoService: KakochoService,
     private route: ActivatedRoute,
+    private cdr: ChangeDetectorRef,
   ) { }
 
   ngOnInit(): void {
@@ -42,26 +45,46 @@ export class Search implements OnInit{
 
     if (keyword) {
       this.searchKeyword = keyword;
-      this.searchAll();
+      this.submitSearch();
     }
   }
 
   //　フィルタータブの選択処理
   changeSearchType(searchType: string): void {
     this.selectedSearchType = searchType;
+    this.submitSearch();
+  }
+
+  onSearchKeywordChange(keyword: string): void {
+    this.searchKeyword = keyword;
+
+    if (this.searchTimer) {
+      clearTimeout(this.searchTimer);
+    }
+
+    this.searchTimer = setTimeout(() => {
+      this.searchAll();
+    }, 250);
+  }
+
+  submitSearch(): void {
+    if (this.searchTimer) {
+      clearTimeout(this.searchTimer);
+    }
+
     this.searchAll();
   }
 
   //　全検索の処理
   async searchAll(): Promise<void> {
+    const requestId = ++this.searchRequestId;
     const keyword = this.searchKeyword.trim();
+    const searchType = this.selectedSearchType;
 
-    this.dankaResults = [];
-    this.familyResults = [];
-    this.kakochoResults = [];
-    this.totalResultCount = 0;
-
-    if (keyword === '') return;
+    if (keyword === '') {
+      this.setSearchResults([], [], [], requestId);
+      return;
+    }
 
     const [dankaList, familyList, kakochoList] = await Promise.all([
       this.dankaService.getDankaList(),
@@ -69,57 +92,96 @@ export class Search implements OnInit{
       this.kakochoService.getKakochoList(),
     ]);
 
+    if (requestId !== this.searchRequestId) {
+      return;
+    }
+
+    let dankaResults: Danka[] = [];
+    let familyResults: Family[] = [];
+    let kakochoResults: Kakocho[] = [];
+
     // 檀家検索
-    if (this.selectedSearchType === 'all' || this.selectedSearchType === 'danka') {
-      this.dankaResults = dankaList.filter((danka) =>
-        danka.householdName.includes(keyword) ||
-        danka.householder.includes(keyword) ||
-        danka.postalCode.includes(keyword) ||
-        danka.address.includes(keyword) ||
-        danka.phones.some(
+    if (searchType === 'all' || searchType === 'danka') {
+      dankaResults = dankaList.filter((danka) =>
+        this.includesKeyword(danka.householdName, keyword) ||
+        this.includesKeyword(danka.householder, keyword) ||
+        this.includesKeyword(danka.postalCode, keyword) ||
+        this.includesKeyword(danka.address, keyword) ||
+        this.getPhones(danka).some(
           (phone) =>
-            phone.tel.includes(keyword) ||
-            phone.note.includes(keyword)
+            this.includesKeyword(phone.tel, keyword) ||
+            this.includesKeyword(phone.note, keyword)
         )
       );
     }
 
     // 家族検索
-    if (this.selectedSearchType === 'all' || this.selectedSearchType === 'family') {
-      this.familyResults = familyList.filter((family) =>
-        family.name.includes(keyword) ||
-        family.furigana.includes(keyword) ||
-        family.relationship.includes(keyword) ||
-        family.birthDate.includes(keyword) ||
-        family.note.includes(keyword)
+    if (searchType === 'all' || searchType === 'family') {
+      familyResults = familyList.filter((family) =>
+        this.includesKeyword(family.name, keyword) ||
+        this.includesKeyword(family.furigana, keyword) ||
+        this.includesKeyword(family.relationship, keyword) ||
+        this.includesKeyword(family.birthDate, keyword) ||
+        this.includesKeyword(family.note, keyword)
       );
     }
 
     // 過去帳検索
-    if (this.selectedSearchType === 'all' || this.selectedSearchType === 'kakocho') {
-      this.kakochoResults = kakochoList.filter((kakocho) =>
-        kakocho.name.includes(keyword) ||
-        kakocho.furigana.includes(keyword) ||
-        kakocho.relationship.includes(keyword) ||
-        kakocho.kaimyo.includes(keyword) ||
-        kakocho.deathDate.includes(keyword) ||
-        kakocho.ageAtDeath.includes(keyword) ||
-        kakocho.note.includes(keyword)
+    if (searchType === 'all' || searchType === 'kakocho') {
+      kakochoResults = kakochoList.filter((kakocho) =>
+        this.includesKeyword(kakocho.name, keyword) ||
+        this.includesKeyword(kakocho.furigana, keyword) ||
+        this.includesKeyword(kakocho.relationship, keyword) ||
+        this.includesKeyword(kakocho.kaimyo, keyword) ||
+        this.includesKeyword(kakocho.deathDate, keyword) ||
+        this.includesKeyword(kakocho.ageAtDeath, keyword) ||
+        this.includesKeyword(kakocho.note, keyword)
       );
     }
 
-    this.totalResultCount =
-      this.dankaResults.length +
-      this.familyResults.length +
-      this.kakochoResults.length;
+    this.setSearchResults(dankaResults, familyResults, kakochoResults, requestId);
   }
 
   clearSearch(): void {
+    if (this.searchTimer) {
+      clearTimeout(this.searchTimer);
+    }
+
+    this.searchRequestId++;
     this.searchKeyword = '';
     this.selectedSearchType = 'all';
     this.dankaResults = [];
     this.familyResults = [];
     this.kakochoResults = [];
     this.totalResultCount = 0;
+    this.cdr.detectChanges();
+  }
+
+  private includesKeyword(value: unknown, keyword: string): boolean {
+    return String(value ?? '').includes(keyword);
+  }
+
+  private getPhones(danka: Danka) {
+    return Array.isArray(danka.phones) ? danka.phones : [];
+  }
+
+  private setSearchResults(
+    dankaResults: Danka[],
+    familyResults: Family[],
+    kakochoResults: Kakocho[],
+    requestId: number,
+  ): void {
+    if (requestId !== this.searchRequestId) {
+      return;
+    }
+
+    this.dankaResults = dankaResults;
+    this.familyResults = familyResults;
+    this.kakochoResults = kakochoResults;
+    this.totalResultCount =
+      dankaResults.length +
+      familyResults.length +
+      kakochoResults.length;
+    this.cdr.detectChanges();
   }
 }