[add]

檀家一覧の全件タブと電話番号ありのタブ切り替えの処理

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

@@ -15,14 +15,15 @@
           <input
             type="text"
             placeholder="氏名・ふりがな・住所・電話番号で探す"
+            [(ngModel)]="searchKeyword"
           />
         </div>
 
-        <button type="button" class="search-button">
+        <button type="button" class="search-button" (click)="searchDanka()">
           検索
         </button>
 
-        <button type="button" class="new-button">
+        <button type="button" class="new-button" routerLink="/danka-new">
           新規登録
         </button>
 
@@ -33,7 +34,7 @@
 
       <div class="filter-row">
         <div class="filter-button-list">
-          <button type="button" class="filter-button active">
+          <button type="button" class="filter-button" [class.active]="selectedFilter === 'all'" (click)="showAllDanka()">
             全件
           </button>
 
@@ -45,13 +46,13 @@
             法要あり
           </button>
 
-          <button type="button" class="filter-button">
+          <button type="button" class="filter-button" [class.active]="selectedFilter === 'phone'" (click)="filterPhoneAvailable()">
             電話番号あり
           </button>
         </div>
 
         <p class="result-count">
-          表示 124 件 / 1-20 件目
+          表示 {{ filterDankaList.length }} 件 / 全 {{ dankaList.length }} 件
         </p>
       </div>
 
@@ -65,16 +66,16 @@
             <div>家族</div>
           </div>
 
-          @for (danka of dankaList; track danka.id) {
-            <a class="danka-table-row" [routerLink]="['/danka-detail', danka.id]">
-              <div class="strong">{{ danka.householder }}</div>
-              <div>{{ danka.householdName }}</div>
-              <div>{{ danka.address }}</div>
-              <div>{{ danka.phones[0]?.tel }}</div>
-              <div>{{ danka.phones.length }}件</div>
-            </a>
-          }
-        </div>
+            @for (danka of filterDankaList; track danka.id) {
+              <a class="danka-table-row" [routerLink]="['/danka-detail', danka.id]">
+                <div class="strong">{{ danka.householder }}</div>
+                <div>{{ danka.householdName }}</div>
+                <div>{{ danka.address }}</div>
+                <div>{{ danka.phones[0]?.tel }}</div>
+                <div>{{ danka.phones.length }}件</div>
+              </a>
+            }
+          </div>
 
       </div>
     </section>

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

@@ -4,17 +4,65 @@ import { DankaService } from '../../services/dankaService';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 import { Danka } from '../../models/danka';
+import { FormsModule } from '@angular/forms';
+import { findIndex } from 'rxjs';
 
 @Component({
   selector: 'app-danka-list',
-  imports: [AppHeader, AppSideMenu, RouterLink],
+  imports: [AppHeader, AppSideMenu, RouterLink, FormsModule],
   templateUrl: './danka-list.html',
   styleUrl: './danka-list.scss',
 })
 export class DankaList {
   dankaList: Danka[] = [];
+  filterDankaList: Danka[] = [];
+  searchKeyword: string = '';
+  dankaDisplay: number = 0;
+  selectedFilter = 'all';
 
   constructor(private dankaService: DankaService) {
     this.dankaList = this.dankaService.getDankaList();
   }
+
+  //全件タグで絞り込み
+  showAllDanka() {
+    this.selectedFilter = 'all';
+    this.searchKeyword = '';
+    this.filterDankaList = this.dankaList;
+    this.dankaDisplay = this.filterDankaList.length;
+  }
+
+  //電話番号タグで絞り込み
+  filterPhoneAvailable() {
+    this.selectedFilter = 'phone';
+    //電話番号タブに該当する檀家を表示
+    this.filterDankaList = this.dankaList.filter((danka) => {
+      return danka.phones.some((phone) => phone.tel.trim() !== '');
+    });
+    this.dankaDisplay = this.filterDankaList.length;
+  }
+
+  //検索処理
+  searchDanka() {
+    this.selectedFilter = 'search';
+    //検索欄に入力された値から余白を削除
+    const keyword = this.searchKeyword.trim();
+    //検索欄が空の場合は檀家の一覧を表示
+    if (keyword === '') {
+      this.filterDankaList = this.dankaList;
+      return;
+    }
+    //検索欄に値がある場合は値に該当する内容を表示
+    this.filterDankaList = this.dankaList.filter((danka) => {
+      return (
+        danka.householdName.includes(keyword) ||
+        danka.householder.includes(keyword) ||
+        danka.postalCode.includes(keyword) ||
+        danka.address.includes(keyword) ||
+        danka.phones.some((phone) => phone.tel.includes(keyword) || phone.note.includes(keyword))
+      );
+    });
+    this.dankaDisplay = this.filterDankaList.length;
+    console.log(this.dankaDisplay);
+  }
 }

src/app/services/dankaService.ts

@@ -23,6 +23,23 @@ export class DankaService {
         },
       ],
     },
+    {
+      id: '2',
+      householdName: '古田家',
+      householder: '古田 太郎',
+      postalCode: '234-4567',
+      address: '市内 1-2-3',
+      phones: [
+        {
+          tel: '03-xxxx-xxxx',
+          note: '寺報連絡',
+        },
+        {
+          tel: '090-xxxx-xxxx',
+          note: '世帯主',
+        },
+      ],
+    }
   ];
 
   //サービスの檀家一覧の取得
@@ -53,6 +70,4 @@ export class DankaService {
     }
     this.dankaList.splice(index, 1);
   }
-
-
 }