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

<app-header></app-header>

<div class="danka-list-page">
  <app-side-menu></app-side-menu>

  <main class="danka-list-main">
    <section class="danka-list-panel">
      <div class="page-title-area">
        <h1>檀家一覧</h1>
      </div>

      <div class="search-area">
        <div class="search-box">
          <span class="search-icon">⌕</span>
          <input
            type="text"
            placeholder="氏名・ふりがな・住所・電話番号で探す"
            [(ngModel)]="searchKeyword"
            (keydown.enter)="searchDanka()"
          />
        </div>

        <button type="button" class="search-button" (click)="searchDanka()">
          検索
        </button>

        <button type="button" class="new-button" (click)="clearDanka()">
          クリア
        </button>
      </div>

      <div class="filter-row">
        <div class="filter-button-list">
          @for (kanaRow of kanaRows; track kanaRow.value) {
            <button
              type="button"
              class="filter-button"
              [class.active]="selectedKanaRow === kanaRow.value"
              (click)="filterByKanaRow(kanaRow.value)"
            >
              {{ kanaRow.label }}
            </button>
          }
        </div>

        <p class="result-count">
          表示 {{ filterDankaList.length }} 件 / 全 {{ dankaList.length }} 件
        </p>
      </div>

      <div class="list-content">
        <div class="danka-table">
          <div class="danka-table-header">
            <div>施主名</div>
            <div>檀家名</div>
            <div>住所</div>
            <div>電話</div>
          </div>

          @if (filterDankaList.length === 0) {
            <div class="empty-message">該当する檀家はありません。</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>
            </a>
          }
        </div>
      </div>
    </section>
  </main>
</div>