[update]

描画の修正

src/app/pages/dashboard/dashboard.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { KakochoService } from '../../services/kakocho-service';
 import { DankaService } from '../../services/dankaService';
 import { Danka } from '../../models/danka';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
+import { FormsModule } from '@angular/forms';
 
 interface UpcomingMemorial {
   id: string;
@@ -68,7 +69,7 @@ export class Dashboard {
         danka,
         nextMemorialLabel: await this.getNextMemorialLabel(danka.id),
         updatedAtLabel: this.formatUpdatedAt(danka.updatedAt),
-      }))
+      })),
     );
   }
 
@@ -142,7 +143,7 @@ export class Dashboard {
           type,
           status,
         };
-      })
+      }),
     );
 
     this.upcomingMemorials = results
@@ -186,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/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 { 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,6 +29,8 @@ export class Search implements OnInit{
   familyResults: Family[] = [];
   kakochoResults: Kakocho[] = [];
   totalResultCount = 0;
+  private searchTimer?: ReturnType<typeof setTimeout>;
+  private searchRequestId = 0;
 
   constructor(
     private dankaService: DankaService,
@@ -42,26 +44,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,52 +91,62 @@ 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 = [];
@@ -122,4 +154,31 @@ export class Search implements OnInit{
     this.kakochoResults = [];
     this.totalResultCount = 0;
   }
+
+  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;
+  }
 }