TripLog/templates/nodes/_members.php

<?php
/**
 * 节点参与人面板
 * 依赖外部变量：$node、$members、$familyUsers、$roleTags（id=>name）、$emotions（emoji=>中文）
 *
 * 编辑走弹窗：点某个参与人旁的「编辑」，弹出预填好的表单（角色 / 心情 / 签到时间），
 * 提交目标仍是 members/store —— Members::save() 本来就是 upsert（同一节点同一人一条），
 * 所以「编辑已加入的人」不需要任何新接口。
 */
$members     = $members ?? [];
$familyUsers = $familyUsers ?? [];
$roleTags    = $roleTags ?? [];
$emotions    = $emotions ?? [];

$joinedIds = [];
foreach ($members as $m) {
    $joinedIds[(int)$m['user_id']] = true;
}
$notJoined = [];
foreach ($familyUsers as $u) {
    if (!isset($joinedIds[(int)$u['id']])) $notJoined[] = $u;
}

/* 上一次提交的原始值（flash_old 存的）只用来回填「刚才没保存成功的那个人」的表单，
   按 user_id 精确匹配，避免污染其他参与人的编辑弹窗。 */
$mOldFilled = !empty($_SESSION['_old']);
$mOldUid    = (string)old('user_id', '');
?>
<section class="panel" id="members">
    <h2 class="section-title">👥 参与人 (<?= count($members) ?>)</h2>

    <?php if (empty($members)): ?>
        <p class="muted">还没有添加参与人</p>
    <?php else: ?>
        <div class="member-list">
            <?php foreach ($members as $m):
                $mName = (string)($m['name'] ?? '');
                if ($mName === '') $mName = '已注销用户';
                $mUid = (int)$m['user_id'];
                $mUseOld = $mOldFilled && $mOldUid === (string)$mUid;
            ?>
                <div class="member-row">
                    <?php if (!empty($m['avatar'])): ?>
                        <img src="<?= e($m['avatar']) ?>" alt="" class="avatar-sm">
                    <?php else: ?>
                        <span class="avatar-sm avatar-placeholder"><?= e(mb_substr($mName, 0, 1)) ?></span>
                    <?php endif; ?>
                    <span class="member-name"><?= e($mName) ?></span>

                    <?php foreach ($m['role_tag_names'] as $tagName): ?>
                        <span class="member-role"><?= e($tagName) ?></span>
                    <?php endforeach; ?>

                    <?php if (!empty($m['emotion'])): ?>
                        <span class="member-emotion" title="<?= e($emotions[$m['emotion']] ?? '') ?>">
                            <?= e($m['emotion']) ?><?= e($emotions[$m['emotion']] ?? '') ?>
                        </span>
                    <?php endif; ?>

                    <?php if (!empty($m['check_in_time'])): ?>
                        <span class="member-checkin">✓ 签到 <?= date('m-d H:i', strtotime((string)$m['check_in_time'])) ?></span>
                    <?php endif; ?>

                    <button type="button" class="member-edit" data-edit-member="<?= $mUid ?>"
                            title="修改 <?= e($mName) ?> 的角色 / 心情 / 签到">编辑</button>

                    <form method="post" action="<?= url('members/destroy') ?>" class="member-del-form"
                          onsubmit="return confirm('把 <?= e($mName) ?> 从本节点移出？');">
                        <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
                        <input type="hidden" name="node_id" value="<?= (int)$node['id'] ?>">
                        <input type="hidden" name="user_id" value="<?= $mUid ?>">
                        <button type="submit" class="comment-del">移出</button>
                    </form>
                </div>

                <?php /* ── 该参与人的编辑弹窗（预填当前值） ───────────────── */ ?>
                <div class="modal" id="member-edit-<?= $mUid ?>" aria-hidden="true" role="dialog"
                     aria-label="编辑参与人 <?= e($mName) ?>">
                    <div class="modal-backdrop" data-close-member="1"></div>
                    <div class="modal-content">
                        <h3 class="modal-title">编辑参与人：<?= e($mName) ?></h3>
                        <p class="modal-hint">改完点「保存」即可，同一人只会有一条参与记录。</p>

                        <form method="post" action="<?= url('members/store') ?>" class="form form-plain">
                            <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
                            <input type="hidden" name="node_id" value="<?= (int)$node['id'] ?>">
                            <input type="hidden" name="user_id" value="<?= $mUid ?>">

                            <?php if (!empty($roleTags)): ?>
                                <div class="form-row">
                                    <label>角色标签（可多选）</label>
                                    <div class="check-grid">
                                        <?php $eSelTags = $mUseOld ? old_array('role_tag_ids') : array_map('strval', $m['role_tag_ids'] ?? []); ?>
                                        <?php foreach ($roleTags as $tagId => $tagName): ?>
                                            <label class="checkbox-label">
                                                <input type="checkbox" name="role_tag_ids[]" value="<?= (int)$tagId ?>"
                                                    <?= in_array((string)(int)$tagId, $eSelTags, true) ? ' checked' : '' ?>>
                                                <span><?= e($tagName) ?></span>
                                            </label>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            <?php else: ?>
                                <p class="muted" style="font-size:12px;">
                                    还没有角色标签，去
                                    <a href="<?= url('role_tags/index') ?>">角色标签管理</a>
                                    先建几个（例如：司机 / 摄影师 / 记账员）
                                </p>
                            <?php endif; ?>

                            <div class="form-row">
                                <label>心情（可选）</label>
                                <div class="emotion-grid">
                                    <?php $eSelEmotion = $mUseOld ? (string)old('emotion', '') : (string)($m['emotion'] ?? ''); ?>
                                    <label class="emotion-option">
                                        <input type="radio" name="emotion" value=""<?= $eSelEmotion === '' ? ' checked' : '' ?>>
                                        <span class="emotion-face">🚫</span>
                                        <span class="emotion-text">不记录</span>
                                    </label>
                                    <?php foreach ($emotions as $emoji => $label): ?>
                                        <label class="emotion-option" title="<?= e($label) ?>">
                                            <input type="radio" name="emotion" value="<?= e($emoji) ?>"<?= $eSelEmotion === (string)$emoji ? ' checked' : '' ?>>
                                            <span class="emotion-face"><?= e($emoji) ?></span>
                                            <span class="emotion-text"><?= e($label) ?></span>
                                        </label>
                                    <?php endforeach; ?>
                                </div>
                            </div>

                            <div class="form-row">
                                <label>签到时间（可选，留空表示未签到）</label>
                                <?php
                                $dtName    = 'check_in_time';
                                $dtValue   = $mUseOld ? old_dt('check_in_time', null) : ($m['check_in_time'] ?? null);
                                $dtRequired = false;
                                $dtId      = 'check-in-date-' . $mUid;
                                require __DIR__ . '/../_datetime.php';
                                ?>
                            </div>

                            <div class="form-actions">
                                <button type="submit" class="btn-primary">保存</button>
                                <button type="button" class="btn btn-sm" data-close-member="1">取消</button>
                            </div>
                        </form>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <?php if (!empty($notJoined)): ?>
        <form method="post" action="<?= url('members/addAll') ?>" style="display:inline"
              onsubmit="return confirm('把家庭里的 <?= count($familyUsers) ?> 位成员全部加入这个节点？');">
            <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
            <input type="hidden" name="node_id" value="<?= (int)$node['id'] ?>">
            <button type="submit" class="btn-sm">＋ 一键加入全家（<?= count($notJoined) ?> 人待加入）</button>
        </form>
    <?php endif; ?>

    <details class="inline-panel">
        <summary>＋ 添加参与人</summary>
        <form method="post" action="<?= url('members/store') ?>" class="form form-plain"
              data-old="<?= $mOldFilled ? '1' : '0' ?>">
            <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
            <input type="hidden" name="node_id" value="<?= (int)$node['id'] ?>">

            <div class="form-row">
                <label>成员 *</label>
                <select name="user_id" required>
                    <option value="">— 请选择 —</option>
                    <?php $mSelUser = (string)old('user_id', ''); ?>
                    <?php foreach ($familyUsers as $u): ?>
                        <option value="<?= (int)$u['id'] ?>"<?= $mSelUser === (string)(int)$u['id'] ? ' selected' : '' ?>>
                            <?= e($u['name']) ?><?= isset($joinedIds[(int)$u['id']]) ? '（已加入，保存将覆盖）' : '' ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>

            <?php if (!empty($roleTags)): ?>
                <div class="form-row">
                    <label>角色标签（可多选）</label>
                    <div class="check-grid">
                        <?php $mSelTags = old_array('role_tag_ids'); ?>
                        <?php foreach ($roleTags as $tagId => $tagName): ?>
                            <label class="checkbox-label">
                                <input type="checkbox" name="role_tag_ids[]" value="<?= (int)$tagId ?>"
                                    <?= in_array((string)(int)$tagId, $mSelTags, true) ? ' checked' : '' ?>>
                                <span><?= e($tagName) ?></span>
                            </label>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php else: ?>
                <p class="muted" style="font-size:12px;">
                    还没有角色标签，去
                    <a href="<?= url('role_tags/index') ?>">角色标签管理</a>
                    先建几个（例如：司机 / 摄影师 / 记账员）
                </p>
            <?php endif; ?>

            <div class="form-row">
                <label>心情（可选）</label>
                <div class="emotion-grid">
                    <?php $mSelEmotion = (string)old('emotion', ''); ?>
                    <label class="emotion-option">
                        <input type="radio" name="emotion" value=""<?= $mSelEmotion === '' ? ' checked' : '' ?>>
                        <span class="emotion-face">🚫</span>
                        <span class="emotion-text">不记录</span>
                    </label>
                    <?php foreach ($emotions as $emoji => $label): ?>
                        <label class="emotion-option" title="<?= e($label) ?>">
                            <input type="radio" name="emotion" value="<?= e($emoji) ?>"<?= $mSelEmotion === (string)$emoji ? ' checked' : '' ?>>
                            <span class="emotion-face"><?= e($emoji) ?></span>
                            <span class="emotion-text"><?= e($label) ?></span>
                        </label>
                    <?php endforeach; ?>
                </div>
            </div>

            <div class="form-row">
                <label>签到时间（可选，留空表示未签到）</label>
                <?php $dtName = 'check_in_time'; $dtValue = old_dt('check_in_time', null); $dtRequired = false; $dtId = 'check-in-date'; ?>
                <?php require __DIR__ . '/../_datetime.php'; ?>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn-primary">保存</button>
            </div>
        </form>
    </details>
</section>

<script>
(function () {
    'use strict';

    var openId = null;

    function modalOf(uid) {
        return document.getElementById('member-edit-' + uid);
    }

    function openModal(uid) {
        var modal = modalOf(uid);
        if (!modal) return;
        if (openId !== null) closeModal(openId);
        openId = uid;
        modal.classList.add('open');
        modal.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';
    }

    function closeModal(uid) {
        var modal = modalOf(uid);
        if (!modal) return;
        modal.classList.remove('open');
        modal.setAttribute('aria-hidden', 'true');
        document.body.style.overflow = '';
        if (openId === uid) openId = null;
    }

    document.addEventListener('click', function (ev) {
        var opener = ev.target.closest ? ev.target.closest('[data-edit-member]') : null;
        if (opener) {
            ev.preventDefault();
            openModal(opener.getAttribute('data-edit-member'));
            return;
        }
        var closer = ev.target.closest ? ev.target.closest('[data-close-member]') : null;
        if (closer && openId !== null) {
            ev.preventDefault();
            closeModal(openId);
        }
    });

    document.addEventListener('keydown', function (ev) {
        if (ev.key === 'Escape' && openId !== null) closeModal(openId);
    });
})();
</script>