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

<app-header></app-header>


<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>{{ danka ? '檀家編集' : '檀家登録' }}</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>
                <div class="form-field">
                  <input
                    id="householdName"
                    type="text"
                    formControlName="householdName"
                  />
                  @if (dankaForm.get('householdName')?.invalid && dankaForm.get('householdName')?.touched) {
                    <p class="error-message">檀家名を入力してください。</p>
                  }
                </div>
              </div>

              <div class="form-row">
                <label for="householdFurigana">檀家名ふりがな</label>
                <input
                  id="householdFurigana"
                  type="text"
                  formControlName="householdFurigana"
                />
              </div>

              <div class="form-row">
                <label for="householder">施主名</label>
                <div class="form-field">
                  <input
                    id="householder"
                    type="text"
                    formControlName="householder"
                  />
                  @if (dankaForm.get('householder')?.invalid && dankaForm.get('householder')?.touched) {
                    <p class="error-message">施主名を入力してください。</p>
                  }
                </div>
              </div>

              <div class="form-row">
                <label for="householderFurigana">施主名ふりがな</label>
                <input
                  id="householderFurigana"
                  type="text"
                  formControlName="householderFurigana"
                />
              </div>

              <div class="form-row">
                <label for="postalCode">郵便番号</label>
                <div class="form-field">
                  <input
                    id="postalCode"
                    type="text"
                    formControlName="postalCode"
                  />
                  @if (dankaForm.get('postalCode')?.invalid && dankaForm.get('postalCode')?.touched) {
                    <p class="error-message">郵便番号を入力してください。</p>
                  }
                </div>
              </div>

              <div class="form-row">
                <label for="address">住所</label>
                <input
                  id="address"
                  type="text"
                  formControlName="address"
                />
              </div>

              <div class="form-row note-row">
                <label for="note">備考</label>
                <textarea
                  id="note"
                  formControlName="note"
                  rows="4"
                  placeholder="檀家に関する連絡事項や注意点を入力"
                ></textarea>
              </div>
            </div>
          </section>

          <section class="phone-edit-section">
            <div class="section-heading">
              <h2>電話番号（複数登録）</h2>
            </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="電話番号"/>
                    @if (phone.get('tel')?.invalid && phone.get('tel')?.touched) {
                      <p class="phone-error-message">
                        電話番号は数字とハイフンで入力してください。
                      </p>
                    }
                  </div>

                  <div>
                    <input type="text" formControlName="note" placeholder="備考"/>
                  </div>

                  <div class="phone-row-action">
                    <button type="button" class="remove-phone-button" [disabled]="phones.length === 1" (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">
          <div class="left-actions"></div>

          <div class="right-actions">
            @if (danka) {
              <button type="button" class="delete-button" (click)="deleteDanka()">
                削除
              </button>
            }
            <button type="button" class="cancel-button" [routerLink]="danka ? ['/danka-detail', danka.id] : ['/danka-list']">
              キャンセル
            </button>

            <button
              type="button"
              class="save-button"
              [disabled]="dankaForm.invalid"
              (click)="saveDanka()"
            >
              保存
            </button>
          </div>
        </div>
      </form>
    </section>
  </main>
</div>