[add]

檀家一覧画面を作成
IDで一覧を取得
IDごとに各ページへ遷移

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

@@ -0,0 +1,82 @@
+<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="氏名・ふりがな・住所・電話番号で探す"
+          />
+        </div>
+
+        <button type="button" class="search-button">
+          検索
+        </button>
+
+        <button type="button" class="new-button">
+          新規登録
+        </button>
+
+        <button type="button" class="condition-button">
+          条件
+        </button>
+      </div>
+
+      <div class="filter-row">
+        <div class="filter-button-list">
+          <button type="button" class="filter-button active">
+            全件
+          </button>
+
+          <button type="button" class="filter-button">
+            過去帳あり
+          </button>
+
+          <button type="button" class="filter-button">
+            法要あり
+          </button>
+
+          <button type="button" class="filter-button">
+            電話番号あり
+          </button>
+        </div>
+
+        <p class="result-count">
+          表示 124 件 / 1-20 件目
+        </p>
+      </div>
+
+      <div class="list-content">
+        <div class="danka-table">
+          <div class="danka-table-header">
+            <div>世帯主</div>
+            <div>世帯名</div>
+            <div>住所</div>
+            <div>電話</div>
+            <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>
+
+      </div>
+    </section>
+  </main>
+</div>

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

@@ -0,0 +1,292 @@
+:host {
+  display: block;
+  min-height: 100vh;
+  background: #f4eee4;
+  color: #2f2720;
+}
+
+.danka-list-page {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: #f4eee4;
+}
+
+.danka-list-main {
+  flex: 1;
+  padding-right: 34px;
+  box-sizing: border-box;
+}
+
+.danka-list-panel {
+  position: relative;
+  min-height: 650px;
+  padding: 26px 36px 40px;
+  background: #ffffff;
+  border: 2px solid #d8caba;
+  border-radius: 76px;
+  box-sizing: border-box;
+}
+
+.page-title-area {
+  margin-bottom: 8px;
+}
+
+.page-title-area h1 {
+  margin: 0;
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 800;
+  color: #2f2720;
+  letter-spacing: 0.02em;
+}
+
+.search-area {
+  display: grid;
+  grid-template-columns: 1fr 140px 190px 110px;
+  gap: 18px;
+  align-items: center;
+  margin-bottom: 18px;
+}
+
+.search-box {
+  height: 58px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: #ffffff;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.search-icon {
+  width: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6f6257;
+  font-size: 34px;
+  line-height: 1;
+}
+
+.search-box input {
+  width: 100%;
+  height: 100%;
+  padding: 0 16px 0 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #2f2720;
+  font-size: 17px;
+  box-sizing: border-box;
+}
+
+.search-box input::placeholder {
+  color: #6f6257;
+}
+
+.search-button,
+.new-button,
+.condition-button {
+  height: 58px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  color: #2f2720;
+  font-size: 18px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.search-button {
+  background: #8a6543;
+  border-color: #8a6543;
+  color: #ffffff;
+}
+
+.new-button {
+  background: #e6d8c4;
+}
+
+.condition-button {
+  background: #ffffff;
+}
+
+.search-button:hover {
+  background: #765639;
+}
+
+.new-button:hover,
+.condition-button:hover {
+  background: #f6efe6;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+  padding-right: 24px;
+}
+
+.filter-button-list {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-button {
+  min-width: 140px;
+  height: 40px;
+  padding: 0 18px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #f4eee4;
+  color: #2f2720;
+  font-size: 16px;
+  font-weight: 700;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.filter-button.active {
+  background: #8a6543;
+  border-color: #8a6543;
+  color: #ffffff;
+}
+
+.filter-button:hover {
+  background: #eadfce;
+}
+
+.filter-button.active:hover {
+  background: #765639;
+}
+
+.result-count {
+  margin: 0;
+  color: #8a7d6d;
+  font-size: 15px;
+}
+
+.list-content {
+  position: relative;
+  padding-right: 172px;
+}
+
+.danka-table {
+  width: 100%;
+}
+
+.danka-table-header,
+.danka-table-row {
+  display: grid;
+  grid-template-columns: 1.5fr 1.1fr 2.8fr 1.25fr 0.65fr;
+  align-items: center;
+  column-gap: 16px;
+}
+
+.danka-table-header {
+  min-height: 40px;
+  padding: 0 12px;
+  background: #eadfce;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  box-sizing: border-box;
+  color: #5a4a3c;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.danka-table-row {
+  min-height: 66px;
+  margin-top: 4px;
+  padding: 0 12px;
+  background: #fbf7f1;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  box-sizing: border-box;
+  color: #2f2720;
+  font-size: 16px;
+  text-decoration: none;
+}
+
+.danka-table-row:hover {
+  background: #f3eadc;
+}
+
+.danka-table-row .strong {
+  font-weight: 800;
+}
+
+.help-panel {
+  position: absolute;
+  top: 0;
+  right: 18px;
+  width: 158px;
+  min-height: 446px;
+  padding: 28px 14px 18px;
+  background: #fffdf9;
+  border: 2px solid #d8caba;
+  border-radius: 24px;
+  box-sizing: border-box;
+}
+
+.help-panel h2 {
+  margin: 0 0 16px;
+  color: #2f2720;
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.help-panel ol {
+  margin: 0;
+  padding-left: 22px;
+  color: #6f6257;
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.help-title-secondary {
+  margin-top: 28px !important;
+}
+
+.help-button-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.help-button {
+  min-height: 46px;
+  padding: 0 8px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #2f2720;
+  font-size: 16px;
+  font-weight: 800;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.help-button:hover {
+  background: #f6efe6;
+}
+
+.bottom-note {
+  width: 700px;
+  margin: 18px 0 22px 36px;
+  padding: 4px 12px;
+  border: 2px solid #d8caba;
+  border-radius: 4px;
+  background: #eadfce;
+  color: #7b6b5c;
+  font-size: 14px;
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DankaList } from './danka-list';
+
+describe('DankaList', () => {
+  let component: DankaList;
+  let fixture: ComponentFixture<DankaList>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DankaList],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DankaList);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+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';
+
+@Component({
+  selector: 'app-danka-list',
+  imports: [AppHeader, AppSideMenu, RouterLink],
+  templateUrl: './danka-list.html',
+  styleUrl: './danka-list.scss',
+})
+export class DankaList {
+  dankaList: Danka[] = [];
+
+  constructor(private dankaService: DankaService) {
+    this.dankaList = this.dankaService.getDankaList();
+  }
+}