style(project): 아사나 느낌 색상/카드 디자인 + 사이드바·리스트·타임라인 개편
색상/폰트/카드/사이드바/리스트/타임라인이 아사나와 다르다는 피드백 반영.
- 보라 포인트 컬러(--pj-accent) 도입 — 기본 검정 버튼/활성 탭을 이걸로
교체(erp.css 등 다른 모듈은 안 건드림, .pj- 클래스 범위 안에서만).
- 카드(.pj-card, .pj-project-card)·보드 컬럼 라운드/그림자 키워 아사나
카드 느낌으로.
- 왼쪽 사이드바 — 프로젝트마다 업무를 중첩해서 보여주던 트리를 걷어내고
아사나처럼 "프로젝트 이름 목록만"으로 단순화. 폴더 아이콘 대신 프로젝트
색 + 첫 글자 아바타.
- 리스트 뷰("이 프로젝트" 스코프) — 세션이 컬럼이 아니라 아사나처럼 그룹
구분선이 되도록 개편(세션별로 묶어서 보여주고 접기/펼치기, 개수 표시).
"전체 프로젝트" 스코프는 세션이 프로젝트마다 달라 그룹화 의미가 없으므로
기존 프로젝트/세션 컬럼 있는 평범한 정렬 테이블 유지.
- 타임라인 — "이 프로젝트" 스코프에서는 프로젝트가 아니라 세션별로 행(스윔
레인)을 나눔(아사나 타임라인=섹션 단위). "전체 프로젝트"는 기존처럼
프로젝트별.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
+149
-127
@@ -926,18 +926,35 @@
|
||||
const projById = {};
|
||||
projectsMeta.forEach(function (p) { projById[p.id] = p; });
|
||||
|
||||
// 프로젝트별로 업무를 묶어 그룹(행) 생성
|
||||
const byProj = {};
|
||||
dated.forEach(function (t) { (byProj[t.project_id] = byProj[t.project_id] || []).push(t); });
|
||||
// "이 프로젝트" 스코프는 세션별로 행을 나눈다(아사나 타임라인=섹션 스윔레인).
|
||||
// "전체 프로젝트"는 예전처럼 프로젝트별로 나눈다(세션이 프로젝트마다 달라
|
||||
// 하나로 묶을 수 없다).
|
||||
const groupBySession = viewScope === "project";
|
||||
const byGroup = {};
|
||||
dated.forEach(function (t) {
|
||||
const gid = groupBySession ? String(t.stage_id || "none") : String(t.project_id);
|
||||
(byGroup[gid] = byGroup[gid] || []).push(t);
|
||||
});
|
||||
let groupOrder = Object.keys(byGroup);
|
||||
if (groupBySession) {
|
||||
const sessionOrder = (stagesByProject[projectId] || []).slice()
|
||||
.sort(function (a, b) { return a.sort_order - b.sort_order; })
|
||||
.map(function (s) { return String(s.id); });
|
||||
groupOrder = sessionOrder.filter(function (id) { return byGroup[id]; });
|
||||
if (byGroup.none) groupOrder.push("none");
|
||||
}
|
||||
|
||||
const items = [];
|
||||
const groupRows = [];
|
||||
Object.keys(byProj).forEach(function (pid) {
|
||||
const list = byProj[pid];
|
||||
const grp = "P" + pid;
|
||||
const meta = projById[pid] || {};
|
||||
const projColor = list[0].project_color || meta.color || "#4573d2";
|
||||
groupRows.push({ id: grp, content: list[0].project_name || meta.name || "프로젝트" });
|
||||
groupOrder.forEach(function (gid) {
|
||||
const list = byGroup[gid];
|
||||
const grp = (groupBySession ? "S" : "P") + gid;
|
||||
const meta = groupBySession ? {} : (projById[gid] || {});
|
||||
const groupColor = list[0].project_color || meta.color || "#4573d2";
|
||||
const groupName = groupBySession
|
||||
? (gid === "none" ? "미지정" : (list[0].stage_name || "세션"))
|
||||
: (list[0].project_name || meta.name || "프로젝트");
|
||||
groupRows.push({ id: grp, content: escapeHtml(groupName) });
|
||||
let minMs = Infinity, maxMs = -Infinity;
|
||||
list.forEach(function (t) {
|
||||
const s = t.start_date || t.due_date;
|
||||
@@ -951,24 +968,25 @@
|
||||
content: (t.title || "") + (t.comment_count ? " 💬" + t.comment_count : ""),
|
||||
start: startISO, end: isRange ? endISO : undefined,
|
||||
type: isRange ? "range" : "point",
|
||||
style: "background-color:" + (t.completed_at ? "#9aa5b1" : projColor) + ";color:#fff;border:none;",
|
||||
style: "background-color:" + (t.completed_at ? "#9aa5b1" : groupColor) + ";color:#fff;border:none;",
|
||||
});
|
||||
const sm = new Date(startISO).getTime();
|
||||
const em = new Date(endISO).getTime();
|
||||
if (sm < minMs) minMs = sm;
|
||||
if (em > maxMs) maxMs = em;
|
||||
});
|
||||
// 배경(프로젝트 전체 일정) = 프로젝트 자체 시작/마감일 우선, 없으면 업무 최소~최대.
|
||||
let bgStart = meta.start_date ? new Date(meta.start_date + "T00:00:00").getTime() : minMs;
|
||||
let bgEnd = meta.due_date ? new Date(meta.due_date + "T00:00:00").getTime() : maxMs;
|
||||
// 업무가 프로젝트 기간 밖에 있어도 가려지지 않게 범위를 넓힌다.
|
||||
// 배경(전체 일정) = 프로젝트 모드일 때만 프로젝트 자체 시작/마감일 우선,
|
||||
// 세션 모드는 세션에 자체 기간이 없으므로 업무 최소~최대만 쓴다.
|
||||
let bgStart = (!groupBySession && meta.start_date) ? new Date(meta.start_date + "T00:00:00").getTime() : minMs;
|
||||
let bgEnd = (!groupBySession && meta.due_date) ? new Date(meta.due_date + "T00:00:00").getTime() : maxMs;
|
||||
// 업무가 그 기간 밖에 있어도 가려지지 않게 범위를 넓힌다.
|
||||
bgStart = Math.min(bgStart, minMs);
|
||||
bgEnd = Math.max(bgEnd, maxMs);
|
||||
bgEnd += 86400000; // 마지막 날 하루를 덮도록 +1일
|
||||
items.push({
|
||||
id: "bg" + pid, group: grp, type: "background",
|
||||
id: "bg" + grp, group: grp, type: "background",
|
||||
start: new Date(bgStart), end: new Date(bgEnd),
|
||||
style: "background-color:" + projColor + "22;",
|
||||
style: "background-color:" + groupColor + "22;",
|
||||
});
|
||||
});
|
||||
const groups = new vis.DataSet(groupRows);
|
||||
@@ -1324,7 +1342,9 @@
|
||||
}
|
||||
|
||||
// ── 리스트 (정렬·컬럼 너비 조절) ──
|
||||
const LIST_COLS = [
|
||||
// "전체 프로젝트" 스코프 — 세션이 프로젝트마다 달라 그룹화 의미가 없으므로
|
||||
// 예전처럼 프로젝트·세션을 컬럼으로 둔 평범한 정렬 테이블.
|
||||
const LIST_COLS_ALL = [
|
||||
{ key: "project", label: "프로젝트", text: function (t) { return t.project_name || "-"; }, sort: function (t) { return (t.project_name || "").toLowerCase(); } },
|
||||
{ key: "title", label: "업무", text: function (t) { return t.title; }, sort: function (t) { return (t.title || "").toLowerCase(); } },
|
||||
{ key: "assignee", label: "담당자", text: function (t) { return t.assignee_email ? idOf(t.assignee_email) : "-"; }, sort: function (t) { return idOf(t.assignee_email || ""); } },
|
||||
@@ -1333,6 +1353,10 @@
|
||||
{ key: "start", label: "시작", text: function (t) { return t.start_date || "-"; }, sort: function (t) { return t.start_date || ""; } },
|
||||
{ key: "due", label: "마감", text: function (t) { return t.due_date || "-"; }, sort: function (t) { return t.due_date || ""; } },
|
||||
];
|
||||
// "이 프로젝트" 스코프 — 아사나 리스트 뷰처럼 세션이 컬럼이 아니라 그룹
|
||||
// 구분선이 된다(renderListGrouped). 그래서 세션 컬럼은 뺀다.
|
||||
const LIST_COLS_PROJECT = LIST_COLS_ALL.filter(function (c) { return c.key !== "project" && c.key !== "stage"; });
|
||||
function listCols() { return viewScope === "project" ? LIST_COLS_PROJECT : LIST_COLS_ALL; }
|
||||
let listSort = { key: null, dir: 1 };
|
||||
function listWidths() { try { return JSON.parse(localStorage.getItem("pj_list_widths") || "{}"); } catch (_) { return {}; } }
|
||||
function saveListWidth(key, w) { const m = listWidths(); m[key] = w; try { localStorage.setItem("pj_list_widths", JSON.stringify(m)); } catch (_) {} }
|
||||
@@ -1350,13 +1374,25 @@
|
||||
});
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
const table = el("pj-list");
|
||||
table.classList.add("pj-table-fixed");
|
||||
const widths = listWidths();
|
||||
function sortRows(rows, cols) {
|
||||
if (!listSort.key) return rows;
|
||||
const col = cols.find(function (c) { return c.key === listSort.key; });
|
||||
if (!col) return rows;
|
||||
rows.sort(function (a, b) {
|
||||
let va = col.sort(a), vb = col.sort(b);
|
||||
if (va == null) va = -Infinity;
|
||||
if (vb == null) vb = -Infinity;
|
||||
if (va < vb) return -listSort.dir;
|
||||
if (va > vb) return listSort.dir;
|
||||
return 0;
|
||||
});
|
||||
return rows;
|
||||
}
|
||||
|
||||
function renderListHead(table, cols) {
|
||||
const widths = listWidths();
|
||||
const trh = document.createElement("tr");
|
||||
LIST_COLS.forEach(function (col) {
|
||||
cols.forEach(function (col) {
|
||||
const th = document.createElement("th");
|
||||
th.dataset.key = col.key;
|
||||
if (widths[col.key]) th.style.width = widths[col.key] + "px";
|
||||
@@ -1376,38 +1412,93 @@
|
||||
const thead = table.querySelector("thead");
|
||||
thead.innerHTML = "";
|
||||
thead.appendChild(trh);
|
||||
}
|
||||
|
||||
let rows = visibleTasks();
|
||||
if (listSort.key) {
|
||||
const col = LIST_COLS.find(function (c) { return c.key === listSort.key; });
|
||||
rows.sort(function (a, b) {
|
||||
let va = col.sort(a), vb = col.sort(b);
|
||||
if (va == null) va = -Infinity;
|
||||
if (vb == null) vb = -Infinity;
|
||||
if (va < vb) return -listSort.dir;
|
||||
if (va > vb) return listSort.dir;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
function taskRow(t, cols) {
|
||||
const tr = document.createElement("tr");
|
||||
if (t.completed_at) tr.className = "is-done";
|
||||
// 행 배경 = 프로젝트 색 연하게(10%) — 다른 프로젝트에서 온(멀티호밍) 업무를
|
||||
// 구분하기 위함. 이 프로젝트 고유 업무는 색이 다 같아 사실상 안 보인다.
|
||||
const pc = t.project_color || "#4573d2";
|
||||
tr.style.background = pc + "14";
|
||||
tr.innerHTML = cols.map(function (c) {
|
||||
let inner = escapeHtml(String(c.text(t)));
|
||||
if (c.key === "title") inner += cmtBadge(t);
|
||||
if (c.key === "assignee" && t.assignee_email) {
|
||||
inner = '<span class="pj-assignee">' + avatarHtml(t.assignee_email, "pj-gicon-sm") + escapeHtml(idOf(t.assignee_email)) + "</span>";
|
||||
}
|
||||
return "<td>" + inner + "</td>";
|
||||
}).join("");
|
||||
if (canManage) { tr.style.cursor = "pointer"; tr.addEventListener("click", function () { openTaskModal(t); }); }
|
||||
return tr;
|
||||
}
|
||||
|
||||
function listCollapsedSet() {
|
||||
try { return new Set(JSON.parse(localStorage.getItem("pj_list_collapsed") || "[]")); }
|
||||
catch (_) { return new Set(); }
|
||||
}
|
||||
function toggleListCollapsed(key) {
|
||||
const s = listCollapsedSet();
|
||||
if (s.has(key)) s.delete(key); else s.add(key);
|
||||
try { localStorage.setItem("pj_list_collapsed", JSON.stringify(Array.from(s))); } catch (_) {}
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
const table = el("pj-list");
|
||||
table.classList.add("pj-table-fixed");
|
||||
const cols = listCols();
|
||||
renderListHead(table, cols);
|
||||
const tbody = table.querySelector("tbody");
|
||||
tbody.innerHTML = "";
|
||||
rows.forEach(function (t) {
|
||||
const tr = document.createElement("tr");
|
||||
if (t.completed_at) tr.className = "is-done";
|
||||
// 행 배경 = 프로젝트 색 연하게(10%)
|
||||
const pc = t.project_color || "#4573d2";
|
||||
tr.style.background = pc + "14";
|
||||
tr.innerHTML = LIST_COLS.map(function (c) {
|
||||
let inner = escapeHtml(String(c.text(t)));
|
||||
if (c.key === "title") inner += cmtBadge(t);
|
||||
if (c.key === "assignee" && t.assignee_email) {
|
||||
inner = '<span class="pj-assignee">' + avatarHtml(t.assignee_email, "pj-gicon-sm") + escapeHtml(idOf(t.assignee_email)) + "</span>";
|
||||
}
|
||||
return "<td>" + inner + "</td>";
|
||||
}).join("");
|
||||
if (canManage) { tr.style.cursor = "pointer"; tr.addEventListener("click", function () { openTaskModal(t); }); }
|
||||
tbody.appendChild(tr);
|
||||
|
||||
if (viewScope !== "project") {
|
||||
sortRows(visibleTasks(), cols).forEach(function (t) { tbody.appendChild(taskRow(t, cols)); });
|
||||
return;
|
||||
}
|
||||
|
||||
// ── 아사나 리스트 뷰처럼 세션을 그룹 구분선으로 ──
|
||||
renderListGrouped(tbody, cols);
|
||||
}
|
||||
|
||||
function renderListGrouped(tbody, cols) {
|
||||
const vis = visibleTasks();
|
||||
const sessions = (stagesByProject[projectId] || []).slice()
|
||||
.sort(function (a, b) { return a.sort_order - b.sort_order; });
|
||||
const collapsed = listCollapsedSet();
|
||||
const colSpan = cols.length;
|
||||
|
||||
function addGroup(key, name, groupTasks) {
|
||||
const head = document.createElement("tr");
|
||||
head.className = "pj-list-group-row";
|
||||
const isCollapsed = collapsed.has(key);
|
||||
const td = document.createElement("td");
|
||||
td.colSpan = colSpan;
|
||||
td.className = "pj-list-group-head";
|
||||
td.innerHTML =
|
||||
'<span class="pj-list-group-caret material-symbols-outlined">' +
|
||||
(isCollapsed ? "chevron_right" : "expand_more") + "</span>" +
|
||||
'<span class="pj-list-group-name">' + escapeHtml(name) + "</span>" +
|
||||
'<span class="pj-list-group-count">' + groupTasks.length + "</span>";
|
||||
td.addEventListener("click", function () { toggleListCollapsed(key); renderList(); });
|
||||
head.appendChild(td);
|
||||
tbody.appendChild(head);
|
||||
if (!isCollapsed) sortRows(groupTasks.slice(), cols).forEach(function (t) { tbody.appendChild(taskRow(t, cols)); });
|
||||
}
|
||||
|
||||
sessions.forEach(function (s) {
|
||||
addGroup("s" + s.id, s.name, vis.filter(function (t) { return t.stage_id === s.id; }));
|
||||
});
|
||||
const unstaged = vis.filter(function (t) { return !t.stage_id; });
|
||||
if (unstaged.length) addGroup("none", "미지정", unstaged);
|
||||
if (!sessions.length && !unstaged.length) {
|
||||
const tr = document.createElement("tr");
|
||||
const td = document.createElement("td");
|
||||
td.colSpan = colSpan;
|
||||
td.className = "pj-empty-sm";
|
||||
td.textContent = "세션이 없습니다.";
|
||||
tr.appendChild(td);
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
}
|
||||
|
||||
function mergeTask(task) {
|
||||
@@ -1673,8 +1764,6 @@
|
||||
if (id) res = await api("PUT", "/project/api/tasks/" + id, payload);
|
||||
else res = await api("POST", "/project/api/projects/" + projectId + "/tasks", payload);
|
||||
mergeTask(res.task);
|
||||
// 새 업무는 해당 프로젝트 트리를 펼쳐 바로 보이게.
|
||||
if (!id) treeSaveOpen((res.task && res.task.project_id) || projectId, true);
|
||||
closeModal(taskModal);
|
||||
refreshActiveView();
|
||||
} catch (e) { alert("저장 실패: " + e.message); }
|
||||
@@ -1694,73 +1783,21 @@
|
||||
} catch (e) { alert("삭제 실패: " + e.message); }
|
||||
});
|
||||
|
||||
// ── 프로젝트 트리 (아사나식) — tasks 로부터 클라이언트 렌더(업무 추가 즉시 반영) ──
|
||||
function setTreeOpen(li, open) {
|
||||
const children = li.querySelector(":scope > .pj-tree-children");
|
||||
const caret = li.querySelector(":scope > .pj-tree-row > .pj-tree-caret");
|
||||
if (!children) return;
|
||||
children.hidden = !open;
|
||||
if (caret) { caret.setAttribute("aria-expanded", open ? "true" : "false"); caret.classList.toggle("is-open", open); }
|
||||
}
|
||||
function treeOpenSet() {
|
||||
try { return new Set(JSON.parse(localStorage.getItem("pj_tree_open") || "[]")); }
|
||||
catch (_) { return new Set(); }
|
||||
}
|
||||
function treeSaveOpen(id, open) {
|
||||
const s = treeOpenSet();
|
||||
if (open) s.add(String(id)); else s.delete(String(id));
|
||||
try { localStorage.setItem("pj_tree_open", JSON.stringify(Array.from(s))); } catch (_) {}
|
||||
}
|
||||
|
||||
function treeTaskLi(t, pid) {
|
||||
return '<li class="pj-tree-li pj-tree-task"><div class="pj-tree-row" style="--pj-indent: 1">' +
|
||||
'<span class="pj-tree-caret-spacer"></span>' +
|
||||
'<a class="pj-tree-link pj-tree-tasklink" href="/project/p/' + pid + '?task=' + t.id +
|
||||
'" data-project="' + pid + '" data-task="' + t.id + '">' +
|
||||
'<span class="pj-tree-icon material-symbols-outlined" style="color:' + (t.project_color || "#4573d2") + '">' +
|
||||
(t.completed_at ? "task_alt" : "radio_button_unchecked") + "</span>" +
|
||||
'<span class="pj-tree-name ' + (t.completed_at ? "pj-tree-done" : "") + '">' + escapeHtml(t.title || "") + "</span>" +
|
||||
"</a></div></li>";
|
||||
}
|
||||
// ── 프로젝트 트리(사이드바) — 아사나처럼 프로젝트 이름만 나열한다(업무 목록은
|
||||
// 안 보여준다 — 업무는 가운데 화면에서만 본다). 색상 원(첫 글자) 아이콘.
|
||||
function treeProjLi(p) {
|
||||
const ptasks = tasks.filter(function (t) { return t.project_id === p.id; });
|
||||
const has = ptasks.length > 0;
|
||||
const caret = has
|
||||
? '<button type="button" class="pj-tree-caret" aria-expanded="false" title="펼치기/접기"><span class="material-symbols-outlined">chevron_right</span></button>'
|
||||
: '<span class="pj-tree-caret-spacer"></span>';
|
||||
const del = isAdmin
|
||||
? '<span class="pj-tree-acts"><button type="button" class="pj-icon-btn pj-tree-del" data-id="' + p.id +
|
||||
'" data-name="' + escapeHtml(p.name) + '" data-creator="' + escapeHtml(p.created_by || "") + '" title="프로젝트 삭제">×</button></span>'
|
||||
: "";
|
||||
let h = '<li class="pj-tree-li" data-id="' + p.id + '"><div class="pj-tree-row ' + (p.id === projectId ? "is-active" : "") + '">' +
|
||||
caret + '<a class="pj-tree-link" href="/project/p/' + p.id + '">' +
|
||||
'<span class="pj-tree-icon material-symbols-outlined" style="color:' + (p.color || "#4573d2") + '">folder</span>' +
|
||||
'<span class="pj-tree-name">' + escapeHtml(p.name) + "</span></a>" + del + "</div>";
|
||||
if (has) h += '<div class="pj-tree-children" hidden><ul class="pj-tree">' +
|
||||
ptasks.map(function (t) { return treeTaskLi(t, p.id); }).join("") + "</ul></div>";
|
||||
return h + "</li>";
|
||||
const initial = escapeHtml((p.name || "?").trim().charAt(0).toUpperCase() || "?");
|
||||
return '<li class="pj-tree-li" data-id="' + p.id + '"><div class="pj-tree-row ' +
|
||||
(p.id === projectId ? "is-active" : "") + '">' +
|
||||
'<a class="pj-tree-link" href="/project/p/' + p.id + '">' +
|
||||
'<span class="pj-tree-avatar" style="background:' + (p.color || "#4573d2") + '">' + initial + "</span>" +
|
||||
'<span class="pj-tree-name">' + escapeHtml(p.name) + "</span></a>" + del + "</div></li>";
|
||||
}
|
||||
function wireTreeHandlers(rootUl) {
|
||||
// 좌측 트리의 업무 클릭 — 이미 로드된 tasks 배열에서 바로 찾아 팝업(페이지 이동 없음).
|
||||
rootUl.querySelectorAll(".pj-tree-tasklink").forEach(function (a) {
|
||||
a.addEventListener("click", function (e) {
|
||||
const tid = a.dataset.task;
|
||||
const t = tasks.find(function (x) { return String(x.id) === String(tid); });
|
||||
if (!t) return; // 못 찾으면 기존 링크 이동으로 폴백
|
||||
e.preventDefault();
|
||||
openTaskModal(t);
|
||||
});
|
||||
});
|
||||
rootUl.querySelectorAll(".pj-tree-caret").forEach(function (caret) {
|
||||
caret.addEventListener("click", function (e) {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
const li = caret.closest(".pj-tree-li");
|
||||
const children = li.querySelector(":scope > .pj-tree-children");
|
||||
const open = children.hidden;
|
||||
setTreeOpen(li, open);
|
||||
treeSaveOpen(li.dataset.id, open);
|
||||
});
|
||||
});
|
||||
rootUl.querySelectorAll(".pj-tree-del").forEach(function (b) {
|
||||
b.addEventListener("click", async function (e) {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
@@ -1774,26 +1811,11 @@
|
||||
});
|
||||
});
|
||||
}
|
||||
function restoreTreeState() {
|
||||
const openSet = treeOpenSet();
|
||||
document.querySelectorAll(".pj-tree-li").forEach(function (li) {
|
||||
if (openSet.has(String(li.dataset.id))) setTreeOpen(li, true);
|
||||
});
|
||||
const active = document.querySelector(".pj-tree-row.is-active");
|
||||
let box = active ? active.closest(".pj-tree-children") : null;
|
||||
while (box) {
|
||||
box.hidden = false;
|
||||
const li = box.closest(".pj-tree-li");
|
||||
if (li) setTreeOpen(li, true);
|
||||
box = li ? (li.parentElement ? li.parentElement.closest(".pj-tree-children") : null) : null;
|
||||
}
|
||||
}
|
||||
function renderTree() {
|
||||
const rootUl = el("pj-tree-root");
|
||||
if (!rootUl) return;
|
||||
rootUl.innerHTML = projectsMeta.map(treeProjLi).join("");
|
||||
wireTreeHandlers(rootUl);
|
||||
restoreTreeState();
|
||||
}
|
||||
renderTree();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user