[add]

行事を追加

src/app/app.routes.ts

@@ -8,6 +8,7 @@ import { KakochoEdit } from './pages/kakocho-edit/kakocho-edit';
 import { MemorialList } from './pages/memorial-list/memorial-list';
 import { Search } from './pages/search/search';
 import { FamilyTree } from './pages/family-tree/family-tree';
+import { EventPage } from './pages/event/event';
 
 export const routes: Routes = [
   {
@@ -54,6 +55,10 @@ export const routes: Routes = [
     path: 'memorial-list',
     component: MemorialList,
   },
+  {
+    path: 'event',
+    component: EventPage,
+  },
   {
     path: 'search',
     component: Search,

src/app/models/event.ts

@@ -0,0 +1,15 @@
+export type EventType = '稚児行列' | '七五三' | '成人式' | '米寿';
+
+export type EventStatus = '案内済' | '未案内';
+
+export interface EventTarget {
+  id: string;
+  dankaId: string;
+  name: string;
+  householdName: string;
+  relationship: string;
+  birthDate: string;
+  age: number;
+  eventType: EventType;
+  status: EventStatus;
+}

src/app/pages/event/event.html

@@ -0,0 +1,102 @@
+<app-header></app-header>
+
+<div class="event-page">
+  <app-side-menu></app-side-menu>
+
+  <main class="event-main">
+    <section class="event-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="event-filter">
+              <span>行事</span>
+              @for (filter of eventTypeFilters; track filter.value) {
+                <button
+                  type="button"
+                  class="filter-button"
+                  [class.active]="selectedEventType === filter.value"
+                  (click)="changeEventType(filter.value)"
+                >
+                  {{ filter.label }}
+                </button>
+              }
+            </div>
+          </div>
+        </div>
+
+        <button type="button" class="reload-button" (click)="createEventTargetList()">
+          再表示
+        </button>
+      </div>
+
+      <div class="list-header-row">
+        <h2>対象 {{ eventTargets.length }} 名</h2>
+
+        <p>並び順: 行事 / 年齢 / 氏名</p>
+      </div>
+
+      <section class="event-table-section">
+        <div class="event-table">
+          <div class="event-table-header">
+            <div>氏名</div>
+            <div>檀家名</div>
+            <div>続柄</div>
+            <div>生年月日</div>
+            <div>年齢</div>
+            <div>対象行事</div>
+            <div>状態</div>
+          </div>
+
+          @if (eventTargets.length > 0) {
+            @for (target of eventTargets; track target.id) {
+              <div class="event-table-row">
+                <div class="person-name">
+                  {{ target.name }}
+                </div>
+                <div>
+                  {{ target.householdName }}
+                </div>
+                <div>
+                  {{ target.relationship }}
+                </div>
+                <div>
+                  {{ target.birthDate }}
+                </div>
+                <div>
+                  {{ target.age }}歳
+                </div>
+                <div class="event-type">
+                  {{ target.eventType }}
+                </div>
+                <div>
+                  <select
+                    class="status-select"
+                    [class.sent]="target.status === '案内済'"
+                    [ngModel]="target.status"
+                    (ngModelChange)="changeStatus(target, $event)"
+                    aria-label="状態"
+                  >
+                    @for (status of eventStatuses; track status) {
+                      <option [value]="status">{{ status }}</option>
+                    }
+                  </select>
+                </div>
+              </div>
+            }
+          } @else {
+            <div class="empty-message">
+              対象となる行事対象者はありません。
+            </div>
+          }
+        </div>
+      </section>
+    </section>
+  </main>
+</div>

src/app/pages/event/event.scss

@@ -0,0 +1,309 @@
+:host {
+  position: relative;
+  display: block;
+  min-height: 100vh;
+  background: #f4eee4;
+  color: #2f2720;
+}
+
+.event-page {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: #f4eee4;
+}
+
+.event-main {
+  flex: 1;
+  padding-right: 34px;
+  box-sizing: border-box;
+}
+
+.event-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: 12px;
+  min-width: 0;
+}
+
+.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: flex-start;
+  gap: 16px 28px;
+  flex-wrap: wrap;
+}
+
+.year-filter {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.year-filter label,
+.event-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;
+}
+
+.event-filter {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.event-filter span {
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+}
+
+.filter-button {
+  min-width: 86px;
+  height: 36px;
+  padding: 0 12px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #f1e7d8;
+  color: #2f2720;
+  font-size: 14px;
+  font-weight: 700;
+  white-space: nowrap;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.filter-button:hover {
+  background: #eadfce;
+}
+
+.filter-button.active {
+  background: #8a6543;
+  border-color: #8a6543;
+  color: #ffffff;
+}
+
+.reload-button {
+  flex: 0 0 auto;
+  width: 120px;
+  height: 48px;
+  margin-top: 34px;
+  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;
+}
+
+.event-table-section {
+  margin-top: 8px;
+}
+
+.event-table {
+  display: grid;
+  gap: 4px;
+}
+
+.event-table-header,
+.event-table-row {
+  display: grid;
+  grid-template-columns: 1.2fr 1.1fr 0.8fr 1fr 0.55fr 0.9fr 0.75fr;
+  align-items: center;
+  column-gap: 12px;
+}
+
+.event-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;
+}
+
+.event-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;
+}
+
+.event-table-row:hover {
+  background: #f6efe6;
+}
+
+.person-name,
+.event-type {
+  font-weight: 800;
+}
+
+.event-type {
+  color: #8a6543;
+}
+
+.status-select {
+  width: 100%;
+  max-width: 112px;
+  height: 34px;
+  padding: 0 10px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #7b6b5c;
+  font-size: 14px;
+  font-weight: 800;
+  box-sizing: border-box;
+  cursor: pointer;
+  outline: none;
+}
+
+.status-select.sent {
+  border-color: #8a6543;
+  background: #f1e7d8;
+  color: #8a6543;
+}
+
+.status-select:focus {
+  border-color: #8a6543;
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.15);
+}
+
+.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;
+}
+
+@media (max-width: 1100px) {
+  .page-title-row {
+    flex-direction: column;
+  }
+
+  .reload-button {
+    margin-top: 0;
+  }
+
+  .event-table {
+    overflow-x: auto;
+  }
+
+  .event-table-header,
+  .event-table-row {
+    min-width: 980px;
+  }
+}
+
+@media (max-width: 800px) {
+  .event-page {
+    flex-direction: column;
+  }
+
+  .event-main {
+    width: 100%;
+    padding: 16px 20px 32px;
+  }
+
+  .event-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;
+  }
+
+  .event-filter {
+    flex-wrap: wrap;
+  }
+
+  .list-header-row {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+  }
+}

src/app/pages/event/event.spec.ts

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

src/app/pages/event/event.ts

@@ -0,0 +1,120 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DankaService } from '../../services/dankaService';
+import { FamilyService } from '../../services/family-service';
+import { EventStatus, EventTarget, EventType } from '../../models/event';
+import { AppHeader } from '../../share/header/app-header';
+import { AppSideMenu } from '../../share/side-menu/app-side-menu';
+
+@Component({
+  selector: 'app-event',
+  imports: [AppHeader, AppSideMenu, FormsModule],
+  templateUrl: './event.html',
+  styleUrl: './event.scss',
+})
+export class EventPage {
+  eventTargets: EventTarget[] = [];
+  targetYear: number = new Date().getFullYear();
+  selectedEventType: EventType | 'all' = 'all';
+  eventStatuses: EventStatus[] = ['未案内', '案内済'];
+  eventTypeFilters: { label: string; value: EventType | 'all' }[] = [
+    { label: 'すべて', value: 'all' },
+    { label: '稚児行列', value: '稚児行列' },
+    { label: '七五三', value: '七五三' },
+    { label: '成人式', value: '成人式' },
+    { label: '米寿', value: '米寿' },
+  ];
+  private statusByTargetId: Record<string, EventStatus> = {};
+
+  constructor(
+    private dankaService: DankaService,
+    private familyService: FamilyService,
+  ) {
+    this.createEventTargetList();
+  }
+
+  createEventTargetList(): void {
+    this.eventTargets = [];
+
+    this.familyService.getFamilyList().forEach((family) => {
+      const birthDate = this.parseDate(family.birthDate);
+      if (!birthDate) {
+        return;
+      }
+
+      const age = this.targetYear - birthDate.getFullYear();
+      const eventTypes = this.getEventTypes(age);
+      if (eventTypes.length === 0) {
+        return;
+      }
+
+      const danka = this.dankaService.getDankaById(family.dankaId);
+      eventTypes.forEach((eventType) => {
+        if (this.selectedEventType !== 'all' && this.selectedEventType !== eventType) {
+          return;
+        }
+
+        const id = `${family.id}-${eventType}`;
+        this.eventTargets.push({
+          id,
+          dankaId: family.dankaId,
+          name: family.name,
+          householdName: danka?.householdName ?? '不明',
+          relationship: family.relationship || '未登録',
+          birthDate: family.birthDate,
+          age,
+          eventType,
+          status: this.statusByTargetId[id] ?? (Number(family.id) % 2 === 0 ? '案内済' : '未案内'),
+        });
+      });
+    });
+
+    this.eventTargets.sort(
+      (a, b) =>
+        this.getEventSortOrder(a.eventType) - this.getEventSortOrder(b.eventType) ||
+        a.age - b.age ||
+        a.name.localeCompare(b.name, 'ja'),
+    );
+  }
+
+  changeEventType(eventType: EventType | 'all'): void {
+    this.selectedEventType = eventType;
+    this.createEventTargetList();
+  }
+
+  changeStatus(target: EventTarget, status: EventStatus): void {
+    target.status = status;
+    this.statusByTargetId[target.id] = status;
+  }
+
+  private getEventTypes(age: number): EventType[] {
+    const eventTypes: EventType[] = [];
+
+    if (age >= 3 && age <= 12) {
+      eventTypes.push('稚児行列');
+    }
+    if ([3, 5, 7].includes(age)) {
+      eventTypes.push('七五三');
+    }
+    if (age === 20) {
+      eventTypes.push('成人式');
+    }
+    if (age === 88) {
+      eventTypes.push('米寿');
+    }
+
+    return eventTypes;
+  }
+
+  private getEventSortOrder(eventType: EventType): number {
+    return ['稚児行列', '七五三', '成人式', '米寿'].indexOf(eventType);
+  }
+
+  private parseDate(value: string): Date | null {
+    const [year, month, day] = value.split('-').map(Number);
+    if (!year || !month || !day) {
+      return null;
+    }
+    return new Date(year, month - 1, day);
+  }
+}

src/app/share/side-menu/app-side-menu.html

@@ -19,6 +19,10 @@
         年次法要
       </a>
 
+      <a routerLink="/event" routerLinkActive="active" class="menu-button">
+        行事
+      </a>
+
       <a routerLink="/search" routerLinkActive="active" class="menu-button">
         まとめて検索
       </a>