[add]

年次法要のページを追加
対象年の対象者を表示
回忌タブによる切り替え表示を追加

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

@@ -0,0 +1,98 @@
+<app-header></app-header>
+
+<div class="breadcrumb">
+  ホーム &gt; 年次法要
+</div>
+
+<div class="memorial-list-page">
+  <app-side-menu></app-side-menu>
+
+  <main class="memorial-list-main">
+    <section class="memorial-panel">
+      <div class="page-title-row">
+        <div class="title-filter-area">
+          <h1>年次法要（回忌）一覧</h1>
+
+          <div class="filter-row">
+            <div class="year-filter">
+              <label for="targetYear">対象年</label>
+              <input id="targetYear" type="number" [(ngModel)]="targetYear"/>
+            </div>
+
+            <div class="memorial-filter">
+              <span>回忌</span>
+              @for (filter of memorialTypeFilters; track filter.value) {
+                <button
+                  type="button"
+                  class="filter-button"
+                  [class.active]="selectedMemorialType === filter.value"
+                  (click)="changeMemorialType(filter.value)"
+                >
+                  {{ filter.label }}
+                </button>
+              }
+            </div>
+          </div>
+        </div>
+
+        <button type="button" class="reload-button" (click)="createMemorialList()">
+          再表示
+        </button>
+      </div>
+
+      <div class="list-header-row">
+        <h2>対象 {{ memorialList.length }} 名</h2>
+
+        <p>並び順: 没年月日 / 氏名</p>
+      </div>
+
+      <section class="memorial-table-section">
+        <div class="memorial-table">
+          <div class="memorial-table-header">
+            <div>俗名</div>
+            <div>戒名</div>
+            <div>関係</div>
+            <div>檀家（世帯）</div>
+            <div>没年月日</div>
+            <div>回忌</div>
+            <div>詳細</div>
+          </div>
+
+          @if (memorialList.length > 0) {
+            @for (memorial of memorialList; track memorial.id) {
+              <div class="memorial-table-row">
+                <div class="person-name">
+                  {{ memorial.name }}
+                </div>
+                <div>
+                  {{ memorial.kaimyo }}
+                </div>
+                <div>
+                  {{ memorial.relationship }}
+                </div>
+                <div>
+                  {{ memorial.householdName }}
+                </div>
+                <div>
+                  {{ memorial.deathDate }}
+                </div>
+                <div class="memorial-type">
+                  {{ memorial.memorialType }}
+                </div>
+                <div>
+                  <a class="detail-link" [routerLink]="['/danka-detail', memorial.dankaId]" [queryParams]="{tab: 'kakocho'}">
+                    開く
+                  </a>
+                </div>
+              </div>
+            }
+          } @else {
+            <div class="empty-message">
+              対象となる法要はありません。
+            </div>
+          }
+        </div>
+      </section>
+    </section>
+  </main>
+</div>

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

@@ -0,0 +1,331 @@
+:host {
+  position: relative;
+  display: block;
+  min-height: 100vh;
+  background: #f4eee4;
+  color: #2f2720;
+}
+
+.breadcrumb {
+  position: absolute;
+  top: 28px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #7b6b5c;
+  font-size: 14px;
+  z-index: 2;
+}
+
+.memorial-list-page {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: #f4eee4;
+}
+
+.memorial-list-main {
+  flex: 1;
+  padding-right: 34px;
+  box-sizing: border-box;
+}
+
+.memorial-panel {
+  min-height: 650px;
+  padding: 26px 34px 36px;
+  background: #ffffff;
+  border: 2px solid #d8caba;
+  border-radius: 76px;
+  box-sizing: border-box;
+}
+
+.page-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24px;
+  margin-bottom: 22px;
+}
+
+.title-filter-area {
+  display: grid;
+  gap: 4px;
+}
+
+.page-title-row h1 {
+  margin: 0;
+  color: #2f2720;
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+  flex-wrap: wrap;
+}
+
+.year-filter {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.year-filter label,
+.memorial-filter span {
+  color: #4b3c31;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.year-filter input {
+  width: 96px;
+  height: 48px;
+  padding: 0 14px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #fffdf9;
+  color: #2f2720;
+  font-size: 17px;
+  font-weight: 700;
+  box-sizing: border-box;
+}
+
+.memorial-filter {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-button {
+  width: 108px;
+  height: 40px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #f1e7d8;
+  color: #2f2720;
+  font-size: 15px;
+  font-weight: 700;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.filter-button:hover {
+  background: #eadfce;
+}
+
+.filter-button.active {
+  background: #8a6543;
+  border-color: #8a6543;
+  color: #ffffff;
+}
+
+.reload-button {
+  width: 120px;
+  height: 48px;
+  margin-top: 30px;
+  border: 2px solid #8a6543;
+  border-radius: 6px;
+  background: #8a6543;
+  color: #ffffff;
+  font-size: 17px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.reload-button:hover {
+  background: #765639;
+}
+
+.list-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin: 18px 0 10px;
+}
+
+.list-header-row h2 {
+  margin: 0;
+  color: #2f2720;
+  font-size: 26px;
+  font-weight: 800;
+}
+
+.list-header-row p {
+  margin: 0;
+  color: #7b6b5c;
+  font-size: 14px;
+}
+
+.memorial-table-section {
+  margin-top: 8px;
+}
+
+.memorial-table {
+  display: grid;
+  gap: 4px;
+}
+
+.memorial-table-header,
+.memorial-table-row {
+  display: grid;
+  grid-template-columns: 1.2fr 1.4fr 0.8fr 1.2fr 1.1fr 0.8fr 0.7fr;
+  align-items: center;
+  column-gap: 12px;
+}
+
+.memorial-table-header {
+  min-height: 38px;
+  padding: 0 12px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #eadfce;
+  color: #5a4a3c;
+  font-size: 15px;
+  font-weight: 800;
+  box-sizing: border-box;
+}
+
+.memorial-table-row {
+  min-height: 58px;
+  padding: 0 12px;
+  border: 2px solid #d8caba;
+  border-radius: 10px;
+  background: #fffdf9;
+  color: #2f2720;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+
+.memorial-table-row:hover {
+  background: #f6efe6;
+}
+
+.person-name {
+  font-weight: 800;
+}
+
+.memorial-type {
+  color: #8a6543;
+  font-weight: 800;
+}
+
+.detail-link {
+  color: #3f6f45;
+  font-size: 15px;
+  font-weight: 800;
+  text-decoration: none;
+}
+
+.detail-link:hover {
+  text-decoration: underline;
+}
+
+.empty-message {
+  min-height: 58px;
+  padding: 18px 20px;
+  border: 2px solid #d8caba;
+  border-radius: 10px;
+  background: #fffdf9;
+  color: #7b6b5c;
+  font-size: 15px;
+  font-weight: 700;
+  box-sizing: border-box;
+}
+
+.notice-box {
+  margin-top: 26px;
+  padding: 18px 26px;
+  border: 2px solid #d8caba;
+  border-radius: 10px;
+  background: #fffdf9;
+  box-sizing: border-box;
+}
+
+.notice-box p {
+  margin: 0;
+  color: #7b6b5c;
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+.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;
+}
+
+@media (max-width: 1100px) {
+  .page-title-row {
+    flex-direction: column;
+  }
+
+  .reload-button {
+    margin-top: 0;
+  }
+
+  .memorial-table {
+    overflow-x: auto;
+  }
+
+  .memorial-table-header,
+  .memorial-table-row {
+    min-width: 980px;
+  }
+}
+
+@media (max-width: 800px) {
+  .breadcrumb {
+    position: static;
+    transform: none;
+    padding: 16px 20px 0;
+  }
+
+  .memorial-list-page {
+    flex-direction: column;
+  }
+
+  .memorial-list-main {
+    width: 100%;
+    padding: 16px 20px 32px;
+  }
+
+  .memorial-panel {
+    padding: 24px 20px 30px;
+    border-radius: 32px;
+  }
+
+  .page-title-row h1 {
+    font-size: 26px;
+  }
+
+  .filter-row {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .memorial-filter {
+    flex-wrap: wrap;
+  }
+
+  .list-header-row {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .bottom-note {
+    width: auto;
+    margin: 10px 20px 22px;
+  }
+}

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

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

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

@@ -0,0 +1,95 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { Memorial } from '../../models/memorial';
+import { DankaService } from '../../services/dankaService';
+import { KakochoService } from '../../services/kakocho-service';
+import { AppHeader } from '../../share/header/app-header';
+import { AppSideMenu } from '../../share/side-menu/app-side-menu';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-memorial-list',
+  imports: [AppHeader, AppSideMenu, RouterLink, FormsModule],
+  templateUrl: './memorial-list.html',
+  styleUrl: './memorial-list.scss',
+})
+export class MemorialList {
+  memorialList: Memorial[] = [];
+  targetYear: number = 2026;
+  selectedMemorialType = 'all';
+  memorialTypeFilters = [
+    { label: 'すべて', value: 'all' },
+    { label: '一周忌', value: '一周忌' },
+    { label: '三回忌', value: '三回忌' },
+    { label: '七回忌', value: '七回忌' },
+    { label: '十三回忌', value: '十三回忌' },
+  ];
+
+  constructor(
+    private dankaService: DankaService,
+    private kakochoService: KakochoService,
+  ) {
+    this.createMemorialList();
+  }
+
+  createMemorialList(): void {
+    this.memorialList = [];
+    const kakochoList = this.kakochoService.getKakochoList();
+
+    kakochoList.forEach((kakocho) => {
+      const deathYear = Number(kakocho.deathDate.slice(0, 4));
+      const yearDiff = this.targetYear - deathYear;
+      const memorialType = this.getMemorialType(yearDiff);
+
+      if (memorialType === '') {
+        return;
+      }
+
+      if (this.selectedMemorialType !== 'all' && this.selectedMemorialType !== memorialType) {
+        return;
+      }
+
+      const danka = this.dankaService.getDankaById(kakocho.dankaId);
+
+      const memorialTarget: Memorial = {
+        id: kakocho.id,
+        dankaId: kakocho.dankaId,
+        name: kakocho.name,
+        kaimyo: kakocho.kaimyo,
+        relationship: kakocho.relationship,
+        householdName: danka?.householdName ?? '不明',
+        deathDate: kakocho.deathDate,
+        memorialType: memorialType,
+      };
+      this.memorialList.push(memorialTarget);
+    });
+  }
+
+  changeMemorialType(memorialType: string): void {
+    this.selectedMemorialType = memorialType;
+    this.createMemorialList();
+  }
+
+  getMemorialType(yearDiff: number) {
+    switch (yearDiff) {
+      case 1:
+        return '一周忌';
+      case 2:
+        return '三回忌';
+      case 6:
+        return '七回忌';
+      case 12:
+        return '十三回忌';
+      case 16:
+        return '十七回忌';
+      case 22:
+        return '二十三回忌';
+      case 26:
+        return '二十七回忌';
+      case 32:
+        return '三十三回忌';
+      default:
+        return '';
+    }
+  }
+}