FamilyBook/templates/tasks/index.php

<?php
/**
 * 任务 · 看板（v12）：待办 / 进行中 / 已完成 三列。
 *
 * 拖动：卡片是 HTML5 draggable，松手时把「拖到哪一列、放在谁后面」写进一个隐藏表单再提交
 *      —— **没有 JS 时每列下方的 ← → 按钮同样能搬**（渐进增强：功能是有的，拖动只是更顺手）。
 *
 * ⚠️ 看板里只有父任务：子任务是挂在父任务下面的（点卡片进详情看/勾），
 *    混进看板会变成一堆没有上下文的小条目，"还剩几件"反而看不清。
 *
 * @param array $board  ['todo'=>[], 'doing'=>[], 'done'=>[]]
 * @param array $people 名册（选负责人 / 共享给别人）
 */
$canWrite = \App\Auth::canWrite();
$cols = [['todo', '待办'], ['doing', '进行中'], ['done', '已完成']];
?>
<div class="page-head">
  <h1>任务</h1>
  <span class="sub">共 <?= (int)$total ?> 项</span>
  <div class="actions">
    <?php if ($canWrite): ?>
      <button class="btn" type="button" id="taskAddBtn">新建任务</button>
    <?php else: ?>
      <span class="link-quiet">只读账号</span>
    <?php endif; ?>
  </div>
</div>

<?php if ($canWrite): ?>
  <div class="card card-pad" id="taskAddCard" hidden>
    <h2 class="cinema-h2">新建任务</h2>
    <form method="post" action="<?= e(url('tasks/create')) ?>">
      <?= csrf_field() ?>
      <div class="form-grid">
        <div class="field full">
          <label for="tk-title">要做什么 *</label>
          <input class="input" id="tk-title" name="title" required placeholder="如：周末大扫除">
        </div>
        <div class="field">
          <label for="tk-due">截止时间（有才会出现在日历里）</label>
          <input class="input" type="date" id="tk-due" name="due_date">
        </div>
        <div class="field">
          <label for="tk-assign">负责人</label>
          <select class="select" id="tk-assign" name="assignee_id">
            <option value="0">不指定</option>
            <?php foreach ($people as $p): ?>
              <option value="<?= (int)$p['id'] ?>"><?= e(person_name($p)) ?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="field">
          <label for="tk-repeat">循环</label>
          <select class="select" id="tk-repeat" name="repeat_rule">
            <?php foreach (\App\Task::REPEAT as $rk => $rv): ?>
              <option value="<?= e($rk) ?>"><?= e($rv) ?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="field">
          <label for="tk-share">共享给（可多选，任何人完成都算完成）</label>
          <select class="select" id="tk-share" name="shares[]" multiple size="3">
            <?php foreach ($people as $p): ?>
              <?php if ((int)$p['id'] === (int)\App\Auth::personId()) { continue; } ?>
              <option value="<?= (int)$p['id'] ?>"><?= e(person_name($p)) ?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="field full">
          <label for="tk-note">备注</label>
          <textarea class="input" id="tk-note" name="note" rows="2"></textarea>
        </div>
      </div>
      <div class="btn-row">
        <button class="btn" type="submit">新建</button>
        <button class="btn btn-ghost" type="button" id="taskAddCancel">收起</button>
      </div>
    </form>
  </div>
<?php endif; ?>

<?php /* 拖动的提交目标：JS 把 id / 目标列 / 参照顺序填进来再 submit。
        放在看板**外面**，避免被任何一张卡片的 form 套住。 */ ?>
<form method="post" action="<?= e(url('tasks/move')) ?>" id="taskMoveForm" class="hidden-form">
  <?= csrf_field() ?>
  <input type="hidden" name="id" id="mvId">
  <input type="hidden" name="status" id="mvStatus">
  <input type="hidden" name="before" id="mvBefore">
</form>

<div class="kanban">
  <?php foreach ($cols as [$key, $label]): ?>
    <section class="kb-col" data-status="<?= e($key) ?>">
      <header class="kb-head">
        <b><?= e($label) ?></b>
        <span class="kb-n"><?= count($board[$key] ?? []) ?></span>
      </header>
      <div class="kb-body" data-status="<?= e($key) ?>">
        <?php foreach (($board[$key] ?? []) as $t): ?>
          <?php
            $tid     = (int)$t['id'];
            $total   = (int)($t['child_total'] ?? 0);
            $doneN   = (int)($t['child_done'] ?? 0);
            $overdue = \App\Task::isOverdue($t['due_at'] ?? null) && $key !== 'done';
          ?>
          <div class="kb-card<?= $overdue ? ' is-overdue' : '' ?>" data-id="<?= $tid ?>"
               draggable="<?= $canWrite ? 'true' : 'false' ?>">
            <a class="kb-title" href="<?= e(url('tasks/show', ['id' => $tid])) ?>">
              <?= e((string)$t['title']) ?>
            </a>
            <div class="kb-meta">
              <?php if (($t['due_at'] ?? '') !== ''): ?>
                <span class="kb-due<?= $overdue ? ' is-late' : '' ?>">
                  <?= e(\App\Task::dueWord($t['due_at'] ?? null)) ?>
                </span>
              <?php endif; ?>
              <?php if (!empty($t['repeat_rule'])): ?>
                <span class="node-badge"><?= e(\App\Task::repeatWord($t['repeat_rule'])) ?></span>
              <?php endif; ?>
              <?php if ((int)($t['comment_count'] ?? 0) > 0): ?>
                <span class="kb-ico" title="评论">💬 <?= (int)$t['comment_count'] ?></span>
              <?php endif; ?>
              <?php if ((int)($t['attach_count'] ?? 0) > 0): ?>
                <span class="kb-ico" title="附件">📎 <?= (int)$t['attach_count'] ?></span>
              <?php endif; ?>
            </div>
            <?php if ($total > 0): ?>
              <div class="kb-sub">
                <span class="kb-bar"><i style="width: <?= (int)round($doneN * 100 / max(1, $total)) ?>%"></i></span>
                <span class="kb-sub-n"><?= $doneN ?>/<?= $total ?></span>
              </div>
            <?php endif; ?>
            <div class="kb-foot">
              <?php if (!empty($t['assignee_name'])): ?>
                <?= person_chip([
                    'id' => (int)$t['assignee_id'], 'name' => (string)$t['assignee_name'],
                    'my_nickname' => (string)($t['assignee_nick'] ?? ''),
                    'avatar' => $t['avatar'] ?? null, 'avatar_color' => $t['avatar_color'] ?? null,
                ]) ?>
              <?php endif; ?>
              <?php if ($canWrite): ?>
                <span class="kb-move">
                  <?php if ($key !== 'todo'): ?>
                    <button class="btn btn-ghost btn-sm" type="button"
                            data-move="left" data-id="<?= $tid ?>">←</button>
                  <?php endif; ?>
                  <?php if ($key !== 'done'): ?>
                    <button class="btn btn-ghost btn-sm" type="button"
                            data-move="right" data-id="<?= $tid ?>">→</button>
                  <?php endif; ?>
                </span>
              <?php endif; ?>
            </div>
          </div>
        <?php endforeach; ?>
        <?php if (!($board[$key] ?? [])): ?>
          <p class="empty-hint kb-empty">这一列是空的</p>
        <?php endif; ?>
      </div>
    </section>
  <?php endforeach; ?>
</div>

<script>
(function () {
  var addBtn = document.getElementById('taskAddBtn');
  var addCard = document.getElementById('taskAddCard');
  var addCancel = document.getElementById('taskAddCancel');
  if (addBtn && addCard) {
    addBtn.addEventListener('click', function () {
      addCard.hidden = !addCard.hidden;
      if (!addCard.hidden) { addCard.scrollIntoView({ block: 'nearest' }); }
    });
  }
  if (addCancel && addCard) { addCancel.addEventListener('click', function () { addCard.hidden = true; }); }

  /* ---- 左右搬（不需要拖也能用）---- */
  var order = ['todo', 'doing', 'done'];
  var form = document.getElementById('taskMoveForm');
  if (!form) return;
  function submitMove(id, status, before) {
    document.getElementById('mvId').value = id;
    document.getElementById('mvStatus').value = status;
    document.getElementById('mvBefore').value = before || '';
    form.submit();
  }
  Array.prototype.forEach.call(document.querySelectorAll('[data-move]'), function (btn) {
    btn.addEventListener('click', function () {
      var card = btn.closest('.kb-card');
      var from = card.closest('.kb-body').getAttribute('data-status');
      var i = order.indexOf(from) + (btn.getAttribute('data-move') === 'right' ? 1 : -1);
      submitMove(card.getAttribute('data-id'), order[i], '');
    });
  });

  /* ---- 拖动（渐进增强：拖不动还有上面的左右按钮）---- */
  var dragging = null;
  Array.prototype.forEach.call(document.querySelectorAll('.kb-card[draggable="true"]'), function (card) {
    card.addEventListener('dragstart', function (ev) {
      dragging = card;
      card.classList.add('is-dragging');
      if (ev.dataTransfer) { ev.dataTransfer.effectAllowed = 'move'; }
    });
    card.addEventListener('dragend', function () {
      card.classList.remove('is-dragging');
      dragging = null;
      Array.prototype.forEach.call(document.querySelectorAll('.kb-body.is-over'), function (el) {
        el.classList.remove('is-over');
      });
    });
  });
  Array.prototype.forEach.call(document.querySelectorAll('.kb-body'), function (body) {
    body.addEventListener('dragover', function (ev) {
      if (!dragging) return;
      ev.preventDefault();
      body.classList.add('is-over');
    });
    body.addEventListener('dragleave', function () { body.classList.remove('is-over'); });
    body.addEventListener('drop', function (ev) {
      if (!dragging) return;
      ev.preventDefault();
      body.classList.remove('is-over');
      /* 放在谁前面：找松手位置下方最近的那张卡（排除自己），没有就排到末尾 */
      var after = null;
      var kids = Array.prototype.slice.call(body.querySelectorAll('.kb-card'));
      for (var i = 0; i < kids.length; i++) {
        if (kids[i] === dragging) continue;
        var box = kids[i].getBoundingClientRect();
        if (ev.clientY < box.top + box.height / 2) { after = kids[i]; break; }
      }
      submitMove(dragging.getAttribute('data-id'), body.getAttribute('data-status'),
                 after ? after.getAttribute('data-id') : '');
    });
  });
})();
</script>