了解、「家単位フォーム登録モード」起動。
これから memberForm.js（＝家レベルの登録・編集モーダル）を設計します。
| 機能 | 内容 |
|---|---|
| 📥 新規登録 | 家を新しく追加（repositoryId が必要） |
| ✏️ 編集対応 | 既存の house 情報（memoなど）を編集可能 |
| 🧾 入力項目 | memo, omairiMemo, displayGroup, tags |
| 🔁 再表示 | 登録・編集後はリストを再読み込み |
public/
└── javascripts/
└── admin/
└── members/
├── memberForm.js ← ここを新規作成
// public/javascripts/admin/members/memberForm.js
export function openMemberForm({ repositoryId, member = null, onSave }) {
const modal = document.createElement("div");
modal.classList.add("modal");
modal.innerHTML = `
<div class="modal-content">
<h5>${member ? "家の編集" : "家を追加"}</h5>
<div class="row">
<div class="input-field col s12">
<textarea id="memo" class="materialize-textarea">${member?.memo || ""}</textarea>
<label for="memo">メモ</label>
</div>
<div class="input-field col s12">
<textarea id="omairiMemo" class="materialize-textarea">${member?.omairiMemo || ""}</textarea>
<label for="omairiMemo">お参りメモ</label>
</div>
<!-- displayGroup / tags は別UIがあれば連携 -->
</div>
</div>
<div class="modal-footer">
<button class="modal-close btn-flat">キャンセル</button>
<button id="save-member-btn" class="btn green">保存</button>
</div>
`;
document.body.appendChild(modal);
const instance = M.Modal.init(modal, { onCloseEnd: () => modal.remove() });
instance.open();
document.getElementById("save-member-btn").addEventListener("click", async () => {
const memo = document.getElementById("memo").value;
const omairiMemo = document.getElementById("omairiMemo").value;
const payload = {
repository: repositoryId,
memo,
omairiMemo,
};
try {
const response = await fetch(
member ? `/admin/members/${member._id}` : `/admin/members`,
{
method: member ? "PUT" : "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}
);
const result = await response.json();
if (!response.ok || !result.success) {
throw new Error(result.message || "保存に失敗しました");
}
M.toast({ html: "保存しました", classes: "green" });
instance.close();
onSave(); // リロードなど
} catch (err) {
console.error("保存失敗:", err);
M.toast({ html: "エラー: " + err.message, classes: "red" });
}
});
}
import { openMemberForm } from "./memberForm.js";
// ボタン作成
const addMemberBtn = document.createElement("button");
addMemberBtn.classList.add("btn", "blue", "darken-1");
addMemberBtn.innerHTML = `<i class="material-icons left">add</i> 家を追加`;
addMemberBtn.addEventListener("click", () => {
openMemberForm({
repositoryId: repo._id,
onSave: () => {
select.dispatchEvent(new Event("change")); // 表示リロード
},
});
});
listContainer.appendChild(addMemberBtn);
| Method | URL | 処理内容 |
|---|---|---|
| POST | /admin/members |
新規作成 |
| PUT | /admin/members/:id |
既存更新 |
displayGroup セレクト連携も追加可能tags 入力・自動補完対応次にやるべきことは？
▶ familyMemberForm.js（家族の編集）
▶ kaimyouForm.js（戒名編集）
▶ tagやdisplayGroupセレクトをモーダルに埋め込む
どこから進めますか？
Click here to try a new GPT!