[add]

檀家情報の編集画面を作成
IDごとに編集機能

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

@@ -0,0 +1,137 @@
+<app-header></app-header>
+
+<div class="breadcrumb">
+  ホーム &gt; 檀家（世帯） &gt; 編集
+</div>
+
+<div class="danka-edit-page">
+  <app-side-menu></app-side-menu>
+
+  <main class="danka-edit-main">
+    <section class="edit-panel">
+      <div class="page-title-area">
+        <h1>檀家（世帯）編集</h1>
+      </div>
+
+      <form [formGroup]="dankaForm" class="edit-form">
+        <div class="edit-content">
+          <section class="basic-edit-section">
+            <h2>基本情報</h2>
+
+            <div class="form-list">
+              <div class="form-row">
+                <label for="householdName">世帯名</label>
+                <input
+                  id="householdName"
+                  type="text"
+                  formControlName="householdName"
+                />
+              </div>
+
+              <div class="form-row">
+                <label for="householder">世帯主</label>
+                <input
+                  id="householder"
+                  type="text"
+                  formControlName="householder"
+                />
+              </div>
+
+              <div class="form-row">
+                <label for="postalCode">郵便番号</label>
+                <input
+                  id="postalCode"
+                  type="text"
+                  formControlName="postalCode"
+                />
+              </div>
+
+              <div class="form-row">
+                <label for="address">住所</label>
+                <input
+                  id="address"
+                  type="text"
+                  formControlName="address"
+                />
+              </div>
+            </div>
+          </section>
+
+          <section class="phone-edit-section">
+            <div class="section-heading">
+              <h2>電話番号（複数登録）</h2>
+              <p>番号と備考を複数登録できます。</p>
+            </div>
+
+            <div formArrayName="phones" class="phone-table">
+              <div class="phone-table-header">
+                <div>番号</div>
+                <div>備考</div>
+                <div>操作</div>
+              </div>
+
+              @for (phone of phones.controls; track $index; let i = $index) {
+                <div class="phone-table-row" [formGroupName]="i">
+                  <div>
+                    <input
+                      type="text"
+                      formControlName="tel"
+                      placeholder="電話番号"
+                    />
+                  </div>
+
+                  <div>
+                    <input
+                      type="text"
+                      formControlName="note"
+                      placeholder="備考"
+                    />
+                  </div>
+
+                  <div class="phone-row-action">
+                    <button
+                      type="button"
+                      class="remove-phone-button"
+                      (click)="removePhone(i)"
+                    >
+                      削除
+                    </button>
+                  </div>
+                </div>
+              }
+            </div>
+
+            <div class="phone-action">
+              <button
+                type="button"
+                class="add-phone-button"
+                (click)="addPhone()"
+              >
+                電話を追加
+              </button>
+            </div>
+          </section>
+        </div>
+
+        <div class="bottom-actions">
+          <button type="button" class="delete-button">
+            削除
+          </button>
+
+          <button type="button" class="cancel-button">
+            キャンセル
+          </button>
+
+          <button
+            type="button"
+            class="save-button"
+            (click)="saveDanka()"
+          >
+            保存
+          </button>
+        </div>
+      </form>
+    </section>
+  </main>
+</div>
+

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

@@ -0,0 +1,313 @@
+: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;
+}
+
+.danka-edit-page {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: #f4eee4;
+}
+
+.danka-edit-main {
+  flex: 1;
+  padding-right: 34px;
+  box-sizing: border-box;
+}
+
+.edit-panel {
+  min-height: 650px;
+  padding: 26px 34px 36px;
+  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;
+  color: #2f2720;
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+.edit-form {
+  display: block;
+  width: 100%;
+  margin: 0;
+  color: #2f2720;
+}
+
+.edit-form input,
+.edit-form button {
+  font-family: inherit;
+}
+
+.edit-content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 520px;
+  gap: 48px;
+  align-items: start;
+}
+
+.basic-edit-section,
+.phone-edit-section {
+  padding-top: 4px;
+}
+
+.basic-edit-section h2,
+.phone-edit-section h2,
+.support-box h2 {
+  margin: 0;
+  color: #2f2720;
+  font-size: 22px;
+  font-weight: 800;
+}
+
+.section-heading p {
+  margin: 6px 0 14px;
+  color: #7b6b5c;
+  font-size: 15px;
+}
+
+/* 基本情報 */
+.form-list {
+  margin-top: 14px;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 14px;
+}
+
+.form-row label {
+  color: #4b3c31;
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.form-row input {
+  width: 100%;
+  height: 54px;
+  padding: 0 14px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #fffdf9;
+  color: #2f2720;
+  font-size: 18px;
+  font-weight: 600;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.form-row input:focus {
+  border-color: #8a6543;
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.15);
+}
+
+/* 電話番号 */
+.phone-table {
+  width: 100%;
+}
+
+.phone-table-header,
+.phone-table-row {
+  display: grid;
+  grid-template-columns: 1.35fr 1.45fr 84px;
+  align-items: center;
+  column-gap: 10px;
+}
+
+.phone-table-header {
+  min-height: 38px;
+  padding: 0 10px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #eadfce;
+  color: #5a4a3c;
+  font-size: 15px;
+  font-weight: 800;
+  box-sizing: border-box;
+}
+
+.phone-table-row {
+  min-height: 56px;
+  margin-top: 4px;
+  padding: 6px 10px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #fffdf9;
+  color: #2f2720;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+
+.phone-table-row > div {
+  display: flex;
+  align-items: center;
+}
+
+.phone-table-row input {
+  width: 100%;
+  height: 38px;
+  padding: 0 10px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #2f2720;
+  font-size: 16px;
+  font-weight: 600;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.phone-table-row input:focus {
+  background: #ffffff;
+  box-shadow: inset 0 0 0 2px #8a6543;
+}
+
+.phone-table-row input::placeholder {
+  color: #9b8b7a;
+  font-weight: 500;
+}
+
+.phone-row-action {
+  justify-content: flex-end;
+}
+
+.remove-phone-button {
+  width: 68px;
+  height: 34px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #6a4a35;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.remove-phone-button:hover {
+  background: #f6efe6;
+}
+
+.phone-action {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.add-phone-button {
+  width: 170px;
+  height: 46px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #2f2720;
+  font-size: 16px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.add-phone-button:hover {
+  background: #f6efe6;
+}
+
+/* 入力補助 */
+.support-box {
+  min-height: 142px;
+  margin-top: 56px;
+  padding: 28px 30px;
+  border: 2px solid #d8caba;
+  border-radius: 24px;
+  background: #fffdf9;
+  box-sizing: border-box;
+}
+
+.support-box ul {
+  margin: 12px 0 0;
+  padding-left: 22px;
+  color: #6f6257;
+  font-size: 15px;
+  line-height: 1.65;
+}
+
+/* 下部ボタン */
+.bottom-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+  margin-top: 22px;
+}
+
+.delete-button,
+.cancel-button,
+.save-button {
+  min-width: 116px;
+  height: 52px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  font-size: 17px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.delete-button,
+.cancel-button {
+  background: #ffffff;
+  color: #2f2720;
+}
+
+.save-button {
+  background: #8a6543;
+  border-color: #8a6543;
+  color: #ffffff;
+}
+
+.delete-button:hover,
+.cancel-button:hover {
+  background: #f6efe6;
+}
+
+.save-button:hover {
+  background: #765639;
+}
+
+.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-edit/danka-edit.spec.ts

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

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

@@ -0,0 +1,72 @@
+import { Component, inject } from '@angular/core';
+import {
+  FormBuilder,
+  FormGroup,
+  FormControl,
+  FormArray,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { AppHeader } from '../../share/header/app-header';
+import { AppSideMenu } from '../../share/side-menu/app-side-menu';
+import { DankaService } from '../../services/dankaService';
+
+@Component({
+  selector: 'app-danka-edit',
+  imports: [AppHeader, AppSideMenu, ReactiveFormsModule],
+  templateUrl: './danka-edit.html',
+  styleUrl: './danka-edit.scss',
+})
+export class DankaEdit {
+  private dankaService = inject(DankaService);
+
+  dankaForm = new FormGroup({
+    householdName: new FormControl('鈴木家'),
+    householder: new FormControl('鈴木 太郎'),
+    postalCode: new FormControl('123-4567'),
+    address: new FormControl('市内 1-2-3'),
+    phones: new FormArray([
+      this.createPhoneForm('03-xxxx-xxxx', '自宅'),
+      this.createPhoneForm('090-xxxx-xxxx', '世帯主'),
+      this.createPhoneForm('0584-xx-xxxx', '寺報連絡'),
+    ]),
+  });
+
+  get phones() {
+    return this.dankaForm.get('phones') as FormArray;
+  }
+
+  createPhoneForm(string = '', note = '') {
+    return new FormGroup({
+      tel: new FormControl(string),
+      note: new FormControl(note),
+    });
+  }
+
+  addPhone() {
+    this.phones.push(this.createPhoneForm());
+  }
+
+  removePhone(index: number) {
+    this.phones.removeAt(index);
+  }
+
+  saveDanka() {
+    const formValue = this.dankaForm.value;
+
+    const updatedDanka = {
+      id: '1',
+      householdName: formValue.householdName ?? '',
+      householder: formValue.householder ?? '',
+      postalCode: formValue.postalCode ?? '',
+      address: formValue.address ?? '',
+      phones: (formValue.phones ?? []).map((phone) => ({
+        tel: phone.tel ?? '',
+        note: phone.note ?? '',
+      })),
+    };
+
+    this.dankaService.saveDanka(updatedDanka);
+    console.log(this.dankaService.getDankaList());
+  }
+}