マスタ編集フォーム画面（入力部品＋バリデーション）

/* ===== マスタ編集フォーム画面 — style.css ===== */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --color-primary: #2B7FE8;
  --color-danger:  #D64545;
  --color-text:    #1E293B;
  --color-muted:   #64748B;
  --color-border:  #D0D7E0;
  --color-bg:      #F4F6F9;
  --color-card:    #FFFFFF;
  --label-width:   160px; /* フォームのラベル列の幅 */
}

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

/* ===== 画面レイアウト ===== */
.edit-screen {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.screen-title {
  font-size: 22px;
  margin: 0 0 16px;
}

.edit-form {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px;
}

/* ===== フォーム行（ラベル列＋入力列の2カラム） ===== */
.form-row {
  display: grid;
  grid-template-columns: var(--label-width) 1fr;
  gap: 8px 16px;
  align-items: start;
  margin-bottom: 18px;
}

.form-label {
  font-size: 14px;
  font-weight: 700;
  padding-top: 9px; /* 入力欄1行目のテキストと高さを揃える */
}

.required-mark { color: var(--color-danger); }

/* fieldset は display: grid が効かないブラウザがあるため、
   float でラベル列＋入力列の2カラムを再現する */
fieldset.form-row {
  display: block;
  border: none;
  padding: 0;
  margin: 0 0 18px;
  min-width: 0;
}

fieldset.form-row legend.form-label {
  float: left;
  width: var(--label-width);
  padding: 0;
}

fieldset.form-row .form-control {
  margin-left: calc(var(--label-width) + 16px);
}

/* ===== 入力部品 ===== */
.form-control input[type="text"],
.form-control textarea,
.form-control select {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.form-control textarea { resize: vertical; }

.form-control input:focus-visible,
.form-control textarea:focus-visible,
.form-control select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}

/* バリデーションエラー時は入力枠を赤くする */
.form-control .is-invalid { border-color: var(--color-danger); }

.field-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}

.field-error {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-danger);
}

/* ===== 文字数カウンター ===== */
.char-counter {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-muted);
  text-align: right;
}

/* 200文字を超えたら赤字で警告する */
.char-counter.over {
  color: var(--color-danger);
  font-weight: 700;
}

/* ===== ラジオボタン ===== */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 9px;
}

.radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}

.radio-group input[type="radio"] {
  accent-color: var(--color-primary);
}

/* ===== トグルスイッチ ===== */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
  cursor: pointer;
}

/* チェックボックス本体は視覚的に隠す（キーボード操作は残す） */
.toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.toggle-track {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 9999px;
  background: #C3CCD6;
  transition: background 0.2s;
}

.toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: left 0.2s;
}

.toggle input:checked + .toggle-track { background: var(--color-primary); }
.toggle input:checked + .toggle-track::after { left: 22px; }

.toggle input:focus-visible + .toggle-track {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.toggle-label-text { font-size: 14px; }

/* ===== フッターボタン ===== */
.form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid #E6EBF1;
}

.btn-primary,
.btn-secondary {
  padding: 10px 22px;
  font-size: 14px;
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-primary {
  color: #fff;
  background: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.btn-primary:hover { background: #1D6AD0; }

.btn-secondary {
  color: var(--color-muted);
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-bg);
  border-color: #9AA5B4;
}

/* ===== 確認ダイアログ ===== */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  animation: fade-in 0.15s ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dialog {
  width: calc(100% - 48px);
  max-width: 400px;
  padding: 24px 24px 20px;
  background: var(--color-card);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.dialog-message {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ===== トースト ===== */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 20;
  padding: 12px 20px;
  font-size: 14px;
  color: #fff;
  background: #1E293B;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  animation: toast-in 0.2s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* hidden 属性を確実に効かせる（display 指定との競合対策） */
.edit-screen [hidden] { display: none !important; }

/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; gap: 6px; }
  .form-label { padding-top: 0; }

  fieldset.form-row legend.form-label {
    float: none;
    width: auto;
    margin-bottom: 6px;
  }

  fieldset.form-row .form-control { margin-left: 0; }

  .radio-group,
  .toggle { padding-top: 0; }
}

/* =====================================================
   マスタ編集フォーム画面のスクリプト

   仕組み：保存時に validators の検証ルールを全件実行し、
   エラーがあればフィールド直下に表示して最初のエラーへ
   フォーカスを移す。エラーがなければ確認ダイアログ → トースト。

   変更有無（dirty）はフラグではなく「現在値と INITIAL_DATA の
   比較」で毎回判定する（手で元に戻したケースも正しく非dirty）。
   確認ダイアログは保存用・破棄用で1つを共用する。
   ===================================================== */

// ===== 設定値 =====
var NAME_MAX_LENGTH   = 50;   // 名称の最大文字数
var DESC_MAX_LENGTH   = 200;  // 説明の最大文字数
var TOAST_DURATION_MS = 3000; // トーストの表示時間
var CODE_PATTERN = /^[A-Za-z0-9-]+$/; // コードの書式（半角英数とハイフン）

// 初期値（編集対象の既存レコードを想定）
var INITIAL_DATA = {
  name: 'サンプルアイテムA',
  code: 'ITEM-001',
  description: '管理用のサンプルです。',
  type: 'タイプ1',
  visibility: 'all',   // all | limited | private
  enabled: true
};

// ===== DOM要素 =====
var form          = document.getElementById('editForm');
var nameInput     = document.getElementById('nameInput');
var codeInput     = document.getElementById('codeInput');
var descInput     = document.getElementById('descInput');
var typeSelect    = document.getElementById('typeSelect');
var enabledToggle = document.getElementById('enabledToggle');
var toggleText    = document.querySelector('.toggle-label-text');
var charCount     = document.getElementById('charCount');
var charCounter   = document.querySelector('.char-counter');
var cancelBtn     = document.getElementById('cancelBtn');

var dialogOverlay   = document.getElementById('dialogOverlay');
var dialogMessage   = document.getElementById('dialogMessage');
var dialogOkBtn     = document.getElementById('dialogOkBtn');
var dialogCancelBtn = document.getElementById('dialogCancelBtn');
var toastEl         = document.getElementById('toast');

// ===== バリデーション定義 =====
// フィールドを増やすときはこの配列に1件足すだけでよい
var validators = [
  {
    el: nameInput,
    rules: [
      { ok: function (v) { return v.trim() !== ''; },               message: '名称を入力してください' },
      { ok: function (v) { return v.length <= NAME_MAX_LENGTH; },   message: NAME_MAX_LENGTH + '文字以内で入力してください' }
    ]
  },
  {
    el: codeInput,
    rules: [
      { ok: function (v) { return v.trim() !== ''; },        message: 'コードを入力してください' },
      { ok: function (v) { return CODE_PATTERN.test(v); },   message: '半角英数字とハイフンで入力してください' }
    ]
  },
  {
    el: descInput,
    rules: [
      { ok: function (v) { return v.length <= DESC_MAX_LENGTH; }, message: DESC_MAX_LENGTH + '文字以内で入力してください' }
    ]
  },
  {
    el: typeSelect,
    rules: [
      { ok: function (v) { return v !== ''; }, message: '区分を選択してください' }
    ]
  }
];

// 全フィールドを検証し、エラーの一覧（{ el, message }）を返す
function validateAll() {
  var errors = [];
  validators.forEach(function (field) {
    for (var i = 0; i < field.rules.length; i++) {
      var rule = field.rules[i];
      if (!rule.ok(field.el.value)) {
        errors.push({ el: field.el, message: rule.message });
        break; // 1フィールドにつき最初に引っかかったルールだけ表示する
      }
    }
  });
  return errors;
}

// エラー一覧をフィールド直下に表示する（毎回リセットしてから表示し直す）
function showErrors(errors) {
  clearErrors();
  errors.forEach(function (error) {
    error.el.classList.add('is-invalid');
    var errorEl = document.querySelector('[data-error-for="' + error.el.id + '"]');
    errorEl.textContent = error.message;
    errorEl.hidden = false;
  });
}

// すべてのエラー表示を消す
function clearErrors() {
  document.querySelectorAll('.field-error').forEach(function (el) {
    el.hidden = true;
    el.textContent = '';
  });
  document.querySelectorAll('.is-invalid').forEach(function (el) {
    el.classList.remove('is-invalid');
  });
}

// ===== フォーム値の読み書き・dirty判定 =====
// 現在のフォーム値をひとまとめにして返す
function getFormData() {
  return {
    name: nameInput.value,
    code: codeInput.value,
    description: descInput.value,
    type: typeSelect.value,
    visibility: document.querySelector('input[name="visibility"]:checked').value,
    enabled: enabledToggle.checked
  };
}

// フォームに値を流し込む（初期表示と「破棄する」で共用）
function setFormData(data) {
  nameInput.value = data.name;
  codeInput.value = data.code;
  descInput.value = data.description;
  typeSelect.value = data.type;
  document.querySelector('input[name="visibility"][value="' + data.visibility + '"]').checked = true;
  enabledToggle.checked = data.enabled;
  updateCharCounter();
  updateToggleText();
}

// 変更有無は「現在値と初期値の比較」で判定する
// （フラグ方式と違い、変更して手で元に戻したケースも正しく「変更なし」になる）
function isDirty() {
  var current = getFormData();
  return Object.keys(INITIAL_DATA).some(function (key) {
    return current[key] !== INITIAL_DATA[key];
  });
}

// ===== 文字数カウンター =====
// 説明欄に入力 → 「12/200」をリアルタイム更新。超過で赤字にする
descInput.addEventListener('input', updateCharCounter);

function updateCharCounter() {
  var length = descInput.value.length;
  charCount.textContent = length;
  charCounter.classList.toggle('over', length > DESC_MAX_LENGTH);
}

// ===== トグルスイッチ =====
// トグル切り替え → 隣のテキストを「有効/無効」に追従させる
enabledToggle.addEventListener('change', updateToggleText);

function updateToggleText() {
  toggleText.textContent = enabledToggle.checked ? '有効' : '無効';
}

// ===== 保存フロー =====
// 「保存する」クリック（submit） → 全件バリデーション → OKなら確認ダイアログ
form.addEventListener('submit', function (e) {
  e.preventDefault(); // 実際のサーバー送信は行わない（UIデモ）

  var errors = validateAll();
  showErrors(errors);

  if (errors.length > 0) {
    // 最初のエラーフィールドへフォーカスとスクロールを移す
    errors[0].el.focus();
    errors[0].el.scrollIntoView({ block: 'center', behavior: 'smooth' });
    return;
  }

  openDialog('この内容で保存しますか？', '保存する', function () {
    // 保存成功とみなし、現在値を新しい初期値にする（これで非dirtyに戻る）
    INITIAL_DATA = getFormData();
    showToast('保存しました');
  });
});

// ===== キャンセルフロー =====
// 「キャンセル」クリック → 変更があるときだけ破棄確認を出す
cancelBtn.addEventListener('click', function () {
  if (!isDirty()) {
    showToast('変更はありません');
    return;
  }
  openDialog('編集内容が破棄されます。よろしいですか？', '破棄する', function () {
    setFormData(INITIAL_DATA);
    clearErrors();
  });
});

// ===== 確認ダイアログ（保存用・破棄用で1つを共用） =====
var dialogOkCallback = null; // OKボタンを押したときに実行する処理

// メッセージ・OKボタンの文言・OK時の処理を差し替えて開く
function openDialog(message, okLabel, onOk) {
  dialogMessage.textContent = message;
  dialogOkBtn.textContent = okLabel;
  dialogOkCallback = onOk;
  dialogOverlay.hidden = false;
  dialogOkBtn.focus();
}

function closeDialog() {
  dialogOverlay.hidden = true;
  dialogOkCallback = null;
}

dialogOkBtn.addEventListener('click', function () {
  var callback = dialogOkCallback;
  closeDialog();
  if (callback) { callback(); }
});

// 「戻る」 → 何もせずフォームへ戻る（入力は保持）
dialogCancelBtn.addEventListener('click', closeDialog);

// オーバーレイ自体のクリックだけで閉じる
// （e.target === overlay の判定でダイアログ内クリックの貫通を防ぐ）
dialogOverlay.addEventListener('click', function (e) {
  if (e.target === dialogOverlay) { closeDialog(); }
});

// ESCキー → ダイアログ表示中のみ閉じる
document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape' && !dialogOverlay.hidden) { closeDialog(); }
});

// ===== トースト =====
var toastTimerId = null;

// 3秒で自動的に消える。連続表示のときはタイマーを張り直す
function showToast(message) {
  toastEl.textContent = message;
  toastEl.hidden = false;
  if (toastTimerId) { clearTimeout(toastTimerId); }
  toastTimerId = setTimeout(function () {
    toastEl.hidden = true;
    toastTimerId = null;
  }, TOAST_DURATION_MS);
}

// ===== 初期化 =====
setFormData(INITIAL_DATA);