検索機能を追加
検索クリアの処理を追加

src/app/app.routes.ts

@@ -5,7 +5,8 @@ import { DankaDetail } from './pages/danka-detail/danka-detail';
 import { DankaEdit } from './pages/danka-edit/danka-edit';
 import { FamilyEdit } from './pages/family-edit/family-edit';
 import { KakochoEdit } from './pages/kakocho-edit/kakocho-edit';
-import  {MemorialList} from './pages/memorial-list/memorial-list';
+import { MemorialList } from './pages/memorial-list/memorial-list';
+import { Search } from './pages/search/search';
 
 export const routes: Routes = [
   {
@@ -46,6 +47,10 @@ export const routes: Routes = [
   },
   {
     path: 'memorial-list',
-    component:MemorialList,
+    component: MemorialList,
+  },
+  {
+    path: 'search',
+    component: Search,
   },
 ];

src/app/pages/search/search.html

@@ -0,0 +1,140 @@
+<app-header></app-header>
+
+<div class="breadcrumb">
+  ホーム &gt; まとめて検索
+</div>
+
+<div class="search-page">
+  <app-side-menu></app-side-menu>
+
+  <main class="search-main">
+    <section class="search-panel">
+      <div class="page-title-row">
+        <h1>まとめて検索</h1>
+        <div class="top-action-list">
+          <button type="button" class="top-button" onclick="history.back()">
+            戻る
+          </button>
+          <a routerLink="/" class="top-button">
+            ホーム
+          </a>
+        </div>
+      </div>
+
+      <section class="search-condition-area">
+        <div class="search-input-row">
+          <div class="search-input-box">
+            <span class="search-icon">⌕</span>
+            <input type="text" [(ngModel)]="searchKeyword"
+                   placeholder="さとう / 佐藤 / 釈 / 2024 / 母 / 三回忌"
+                   (keydown.enter)="searchAll()"/>
+          </div>
+          <button type="button" class="search-button" (click)="searchAll()">
+            検索
+          </button>
+          <button type="button" class="filter-button-main" (click)="clearSearch()">
+            クリア
+          </button>
+          <a routerLink="/danka-list" class="back-list-button">
+            一覧へ戻る
+          </a>
+        </div>
+
+        <div class="search-filter-list">
+          @for (filter of searchTypeFilters; track filter.value) {
+            <button
+              type="button"
+              class="search-filter-button"
+              [class.active]="selectedSearchType === filter.value"
+              (click)="changeSearchType(filter.value)">
+              {{ filter.label }}
+            </button>
+          }
+        </div>
+      </section>
+
+      <section class="search-result-panel">
+        <h2>検索結果 {{ totalResultCount }} 件</h2>
+
+        @if (totalResultCount > 0) {
+          @if (dankaResults.length > 0) {
+            <section class="result-group">
+              <h3>檀家（世帯）</h3>
+
+              @for (danka of dankaResults; track danka.id) {
+                <a class="result-row danka-result-row"
+                   [routerLink]="['/danka-detail', danka.id]">
+                  <div class="result-main-text">
+                    {{ danka.householdName }}
+                  </div>
+                  <div>
+                    世帯主: {{ danka.householder }}
+                  </div>
+                  <div>
+                    住所: {{ danka.address }}
+                  </div>
+                  <div class="result-link-text">
+                    開く
+                  </div>
+                </a>
+              }
+            </section>
+          }
+
+          @if (familyResults.length > 0) {
+            <section class="result-group">
+              <h3>家族</h3>
+              @for (family of familyResults; track family.id) {
+                <a class="result-row family-result-row"
+                   [routerLink]="['/danka', family.dankaId, 'family', family.id, 'edit']">
+                  <div class="result-main-text">
+                    {{ family.name }}
+                  </div>
+                  <div>
+                    ふりがな: {{ family.furigana }}
+                  </div>
+                  <div>
+                    関係: {{ family.relationship }}
+                  </div>
+                  <div>
+                    生年月日: {{ family.birthDate || '未登録' }}
+                  </div>
+                </a>
+              }
+            </section>
+          }
+
+          @if (kakochoResults.length > 0) {
+            <section class="result-group">
+              <h3>過去帳</h3>
+
+              @for (kakocho of kakochoResults; track kakocho.id) {
+                <a class="result-row kakocho-result-row"
+                   [routerLink]="['/danka-detail', kakocho.dankaId]"
+                   [queryParams]="{ tab: 'kakocho' }">
+                  <div class="result-main-text">
+                    {{ kakocho.kaimyo }}
+                  </div>
+                  <div>
+                    俗名: {{ kakocho.name }}
+                  </div>
+                  <div>
+                    没年月日: {{ kakocho.deathDate }}
+                  </div>
+                  <div>
+                    {{ kakocho.note || '備考なし' }}
+                  </div>
+                </a>
+              }
+            </section>
+          }
+        } @else {
+          <div class="empty-result">
+            検索結果はありません。
+          </div>
+        }
+      </section>
+    </section>
+  </main>
+</div>
+

src/app/pages/search/search.scss

@@ -0,0 +1,359 @@
+: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;
+}
+
+.search-page {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: #f4eee4;
+}
+
+.search-main {
+  flex: 1;
+  padding-right: 34px;
+  box-sizing: border-box;
+}
+
+.search-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;
+}
+
+.page-title-row h1 {
+  margin: 0;
+  color: #2f2720;
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+.top-action-list {
+  display: flex;
+  gap: 8px;
+}
+
+.top-button {
+  width: 92px;
+  height: 36px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #2f2720;
+  font-size: 15px;
+  font-weight: 800;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.top-button:hover {
+  background: #f6efe6;
+}
+
+.search-condition-area {
+  margin-top: 8px;
+}
+
+.search-input-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 120px 140px 150px;
+  gap: 18px;
+  align-items: center;
+}
+
+.search-input-box {
+  height: 56px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #fffdf9;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  box-sizing: border-box;
+}
+
+.search-icon {
+  width: 30px;
+  color: #7b6b5c;
+  font-size: 24px;
+  font-weight: 800;
+}
+
+.search-input-box input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #2f2720;
+  font-size: 18px;
+  font-family: inherit;
+}
+
+.search-input-box input::placeholder {
+  color: #7b6b5c;
+}
+
+.search-button,
+.filter-button-main,
+.back-list-button {
+  height: 56px;
+  border-radius: 8px;
+  font-size: 18px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.search-button {
+  border: 2px solid #8a6543;
+  background: #8a6543;
+  color: #ffffff;
+}
+
+.search-button:hover {
+  background: #765639;
+}
+
+.filter-button-main,
+.back-list-button {
+  border: 2px solid #d8caba;
+  background: #ffffff;
+  color: #2f2720;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.filter-button-main:hover,
+.back-list-button:hover {
+  background: #f6efe6;
+}
+
+.search-filter-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.search-filter-button {
+  min-width: 120px;
+  height: 38px;
+  padding: 0 18px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #f1e7d8;
+  color: #2f2720;
+  font-size: 15px;
+  font-weight: 700;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.search-filter-button:hover {
+  background: #eadfce;
+}
+
+.search-filter-button.active {
+  background: #8a6543;
+  border-color: #8a6543;
+  color: #ffffff;
+}
+
+.search-result-panel {
+  margin-top: 16px;
+  padding: 28px 28px 34px;
+  border: 2px solid #d8caba;
+  border-radius: 62px;
+  background: #fffdf9;
+  box-sizing: border-box;
+}
+
+.search-result-panel h2 {
+  margin: 0 0 12px;
+  color: #2f2720;
+  font-size: 24px;
+  font-weight: 800;
+}
+
+.result-group {
+  margin-top: 16px;
+}
+
+.result-group h3 {
+  margin: 0 0 6px;
+  color: #6f6257;
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.result-row {
+  min-height: 56px;
+  margin-top: 6px;
+  padding: 0 12px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #2f2720;
+  text-decoration: none;
+  display: grid;
+  align-items: center;
+  column-gap: 18px;
+  box-sizing: border-box;
+}
+
+.result-row:hover {
+  background: #f6efe6;
+}
+
+.danka-result-row {
+  grid-template-columns: 1.1fr 1.4fr 1.8fr 80px;
+}
+
+.family-result-row {
+  grid-template-columns: 1.1fr 1.6fr 1.2fr 1.6fr;
+}
+
+.kakocho-result-row {
+  grid-template-columns: 1.2fr 1.4fr 1.4fr 1.2fr;
+}
+
+.result-main-text {
+  font-weight: 800;
+}
+
+.result-link-text {
+  color: #3f6f45;
+  font-weight: 800;
+}
+
+.empty-result {
+  min-height: 72px;
+  padding: 22px;
+  border: 2px solid #d8caba;
+  border-radius: 10px;
+  background: #ffffff;
+  color: #7b6b5c;
+  font-size: 16px;
+  font-weight: 700;
+  box-sizing: border-box;
+}
+
+.inside-note {
+  margin: 16px 0 0;
+  color: #7b6b5c;
+  font-size: 14px;
+}
+
+.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) {
+  .search-input-row {
+    grid-template-columns: 1fr 120px;
+  }
+
+  .filter-button-main,
+  .back-list-button {
+    width: 100%;
+  }
+
+  .search-result-panel {
+    border-radius: 36px;
+  }
+
+  .result-row {
+    overflow-x: auto;
+  }
+
+  .danka-result-row,
+  .family-result-row,
+  .kakocho-result-row {
+    min-width: 860px;
+  }
+}
+
+@media (max-width: 800px) {
+  .breadcrumb {
+    position: static;
+    transform: none;
+    padding: 16px 20px 0;
+  }
+
+  .search-page {
+    flex-direction: column;
+  }
+
+  .search-main {
+    width: 100%;
+    padding: 16px 20px 32px;
+  }
+
+  .search-panel {
+    padding: 24px 20px 30px;
+    border-radius: 32px;
+  }
+
+  .page-title-row {
+    flex-direction: column;
+  }
+
+  .page-title-row h1 {
+    font-size: 26px;
+  }
+
+  .search-input-row {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .search-filter-button {
+    flex: 1;
+    min-width: 100px;
+  }
+
+  .bottom-note {
+    width: auto;
+    margin: 10px 20px 22px;
+  }
+}

src/app/pages/search/search.spec.ts

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

src/app/pages/search/search.ts

@@ -0,0 +1,107 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormsModule } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { Danka } from '../../models/danka';
+import { Family } from '../../models/family';
+import { Kakocho } from '../../models/kakocho';
+import { DankaService } from '../../services/dankaService';
+import { FamilyService } from '../../services/family-service';
+import { KakochoService } from '../../services/kakocho-service';
+import { AppHeader } from '../../share/header/app-header';
+import { AppSideMenu } from '../../share/side-menu/app-side-menu';
+
+@Component({
+  selector: 'app-search',
+  imports: [AppHeader, AppSideMenu, FormsModule, RouterLink],
+  templateUrl: './search.html',
+  styleUrl: './search.scss',
+})
+export class Search {
+  searchKeyword = '';
+  selectedSearchType = 'all';
+  searchTypeFilters = [
+    { label: 'すべて', value: 'all' },
+    { label: '檀家（世帯）', value: 'danka' },
+    { label: '家族', value: 'family' },
+    { label: '過去帳', value: 'kakocho' },
+  ];
+  dankaResults: Danka[] = [];
+  familyResults: Family[] = [];
+  kakochoResults: Kakocho[] = [];
+  totalResultCount = 0;
+
+  constructor(
+    private dankaService: DankaService,
+    private familyService: FamilyService,
+    private kakochoService: KakochoService,
+  ) {}
+
+  //　フィルタータブの選択処理
+  changeSearchType(searchType: string): void {
+    this.selectedSearchType = searchType;
+    this.searchAll();
+  }
+
+  //　全検索の処理
+  searchAll() {
+    const keyword = this.searchKeyword.trim();
+    this.dankaResults = [];
+    this.familyResults = [];
+    this.kakochoResults = [];
+    this.totalResultCount = 0;
+    if (keyword === '') {
+      return;
+    }
+    // 檀家・家族・過去帳の情報を取得
+    const dankaList = this.dankaService.getDankaList();
+    const familyList = this.familyService.getFamilyList();
+    const kakochoList = this.kakochoService.getKakochoList();
+    //檀家のキーワード検索
+    if (this.selectedSearchType === 'all' || this.selectedSearchType === 'danka') {
+      this.dankaResults = dankaList.filter(
+        (danka) =>
+          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)),
+      );
+    }
+    //家族のキーワード検索
+    if (this.selectedSearchType === 'all' || this.selectedSearchType === 'family') {
+      this.familyResults = familyList.filter(
+        (family) =>
+          family.name.includes(keyword) ||
+          family.furigana.includes(keyword) ||
+          family.relationship.includes(keyword) ||
+          family.birthDate.includes(keyword) ||
+          family.note.includes(keyword),
+      );
+    }
+    //過去帳のキーワード検索
+    if (this.selectedSearchType === 'all' || this.selectedSearchType === 'kakocho') {
+      this.kakochoResults = kakochoList.filter(
+        (kakocho) =>
+          kakocho.name.includes(keyword) ||
+          kakocho.furigana.includes(keyword) ||
+          kakocho.relationship.includes(keyword) ||
+          kakocho.kaimyo.includes(keyword) ||
+          kakocho.deathDate.includes(keyword) ||
+          kakocho.ageAtDeath.includes(keyword) ||
+          kakocho.note.includes(keyword),
+      );
+    }
+    //検索結果の件数カウント
+    this.totalResultCount =
+      this.dankaResults.length + this.familyResults.length + this.kakochoResults.length;
+  }
+
+  clearSearch(): void {
+    this.searchKeyword = '';
+    this.selectedSearchType = 'all';
+    this.dankaResults = [];
+    this.familyResults = [];
+    this.kakochoResults = [];
+    this.totalResultCount = 0;
+  }
+}

src/app/services/family-service.ts

@@ -26,11 +26,6 @@ export class FamilyService {
     },
   ];
 
-  //サービスの家族一覧の取得
-  // getDankaList(): Danka[] {
-  //   return this.dankaList;
-  // }
-
   //檀家と紐づいている家族情報の取得
   getFamiliesByDankaId(dankaId: string): Family[] {
     return this.families.filter((family) => family.dankaId === dankaId);
@@ -58,4 +53,9 @@ export class FamilyService {
     }
     this.families.splice(index, 1);
   }
+
+  //家族情報を全件取得する処理
+  getFamilyList(): Family[] {
+    return this.families;
+  }
 }

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

@@ -23,9 +23,10 @@
         家系図
       </a>
 
-      <a routerLink="/user-setting" routerLinkActive="active" class="menu-button">
-        利用者設定
-      </a>
+<!--  ユーザー数が増えた際に実装    -->
+<!--      <a routerLink="/user-setting" routerLinkActive="active" class="menu-button">-->
+<!--        利用者設定-->
+<!--      </a>-->
     </nav>
   </div>
 </aside>