hyunho/MH-DashBoard-organization
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add monthly history controls for organization view

Browse Source
This commit is contained in:
hyunho
2026-03-30 10:08:00 +09:00
parent 2053791589
commit bbebe24763
4 changed files with 178 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
frontend/public/app.js
View File

@@ -11,6 +11,9 @@ const currentViewTitle = document.getElementById("current-view-title");
const globalDateControls = document.getElementById("global-date-controls");
const globalStartDateInput = document.getElementById("global-start-date");
const globalEndDateInput = document.getElementById("global-end-date");
const organizationHistoryControls = document.getElementById("organization-history-controls");
const organizationMonthSelect = document.getElementById("organization-month-select");
const organizationCompareBtn = document.getElementById("organization-compare-btn");
const navButtons = Array.from(document.querySelectorAll(".header-center [data-view]"));
const organizationFrame = document.getElementById("organization-frame");
const organizationStage = document.getElementById("organization-stage");
@@ -155,6 +158,89 @@ const globalDateState = {
endDate: "2026-01-31",
};
const organizationHistoryState = {
selectedMonth: "",
currentMonth: "",
};
function padDatePart(value) {
return String(value).padStart(2, "0");
}
function getCurrentMonthValue() {
const now = new Date();
return `${now.getFullYear()}-${padDatePart(now.getMonth() + 1)}`;
}
function getMonthLabel(monthValue) {
const [, month] = String(monthValue || "").split("-");
if (!month) return "";
const monthNumber = Number(month);
if (!Number.isInteger(monthNumber) || monthNumber <= 0) return "";
return `${monthNumber}월`;
}
function getMonthEndDate(monthValue) {
const [yearText, monthText] = String(monthValue || "").split("-");
const year = Number(yearText);
const month = Number(monthText);
if (!Number.isInteger(year) || !Number.isInteger(month) || month <= 0) return "";
const lastDay = new Date(year, month, 0);
return `${lastDay.getFullYear()}-${padDatePart(lastDay.getMonth() + 1)}-${padDatePart(lastDay.getDate())}`;
}
function getTodayDate() {
const now = new Date();
return `${now.getFullYear()}-${padDatePart(now.getMonth() + 1)}-${padDatePart(now.getDate())}`;
}
function syncOrganizationHistoryControls() {
if (!organizationHistoryControls) return;
const visible = currentView === "organization";
organizationHistoryControls.classList.toggle("hidden", !visible);
if (organizationCompareBtn) {
const isCurrentMonth = !organizationHistoryState.selectedMonth || organizationHistoryState.selectedMonth === organizationHistoryState.currentMonth;
organizationCompareBtn.classList.toggle("hidden", !visible || isCurrentMonth);
}
}
function initializeOrganizationMonthOptions() {
if (!organizationMonthSelect) return;
const now = new Date();
const year = now.getFullYear();
const monthCount = now.getMonth() + 1;
organizationMonthSelect.innerHTML = "";
for (let month = monthCount; month >= 1; month -= 1) {
const value = `${year}-${padDatePart(month)}`;
const option = document.createElement("option");
option.value = value;
option.textContent = month === monthCount ? `${month}월 (최신)` : `${month}월`;
organizationMonthSelect.append(option);
}
organizationHistoryState.currentMonth = `${year}-${padDatePart(monthCount)}`;
organizationHistoryState.selectedMonth = organizationHistoryState.currentMonth;
organizationMonthSelect.value = organizationHistoryState.selectedMonth;
syncOrganizationHistoryControls();
}
function postOrganizationHistoryState() {
if (!organizationFrame?.contentWindow) return;
const selectedMonth = organizationHistoryState.selectedMonth || organizationHistoryState.currentMonth;
const currentMonth = organizationHistoryState.currentMonth || getCurrentMonthValue();
const isHistorical = Boolean(selectedMonth) && selectedMonth !== currentMonth;
organizationFrame.contentWindow.postMessage(
{
source: "total-control",
type: "organization-history-view",
month: selectedMonth,
asOfDate: isHistorical ? getMonthEndDate(selectedMonth) : "",
historical: isHistorical,
},
window.location.origin,
);
syncOrganizationHistoryControls();
}
function getGlobalAsOfDate() {
return globalDateState.endDate || "";
}
@@ -188,7 +274,6 @@ function shouldShowGlobalDateControls() {
return currentView === "ledger"
|| currentView === "project"
|| currentView === "team"
|| currentView === "organization"
|| currentView === "seatmap-admin"
|| currentView === "seatmap-readonly";
}
@@ -196,6 +281,7 @@ function shouldShowGlobalDateControls() {
function syncGlobalDateControlVisibility() {
if (!globalDateControls) return;
globalDateControls.classList.toggle("hidden", !shouldShowGlobalDateControls());
syncOrganizationHistoryControls();
}
function syncGlobalDateControlInputs() {
@@ -244,7 +330,6 @@ async function ensureGlobalDateRangeLoaded() {
globalDateState.endDate = ends.length ? String(ends[ends.length - 1]).slice(0, 10) : "";
globalDateState.loaded = true;
syncGlobalDateControlInputs();
postGlobalDateRangeToFrame(organizationFrame);
postGlobalDateRangeToFrame(projectFrame);
postGlobalDateRangeToFrame(teamFrame);
} catch (error) {
@@ -1446,6 +1531,8 @@ function setActiveView(view) {
if (isOrganization && previousView !== "organization" && organizationFrame) {
const frameSrc = organizationFrame.dataset.src || organizationFrame.src;
organizationFrame.src = resolveAppUrl(frameSrc);
} else if (isOrganization) {
postOrganizationHistoryState();
}
if (isProject && previousView !== "project" && projectFrame) {
const frameSrc = projectFrame.dataset.src || projectFrame.src;
@@ -1547,7 +1634,6 @@ if (logoutBtn) {
if (globalStartDateInput) {
globalStartDateInput.addEventListener("change", () => {
globalDateState.startDate = globalStartDateInput.value || "";
postGlobalDateRangeToFrame(organizationFrame);
postGlobalDateRangeToFrame(projectFrame);
postGlobalDateRangeToFrame(teamFrame);
});
@@ -1556,7 +1642,6 @@ if (globalStartDateInput) {
if (globalEndDateInput) {
globalEndDateInput.addEventListener("change", () => {
globalDateState.endDate = globalEndDateInput.value || "";
postGlobalDateRangeToFrame(organizationFrame);
postGlobalDateRangeToFrame(projectFrame);
postGlobalDateRangeToFrame(teamFrame);
if (currentView === "seatmap-admin" || currentView === "seatmap-readonly") {
@@ -1567,7 +1652,7 @@ if (globalEndDateInput) {
}
organizationFrame?.addEventListener("load", () => {
postGlobalDateRangeToFrame(organizationFrame);
postOrganizationHistoryState();
});
projectFrame?.addEventListener("load", () => {
@@ -1591,6 +1676,32 @@ navButtons.forEach((button) => {
});
});
if (organizationMonthSelect) {
initializeOrganizationMonthOptions();
organizationMonthSelect.addEventListener("change", () => {
organizationHistoryState.selectedMonth = organizationMonthSelect.value || organizationHistoryState.currentMonth;
postOrganizationHistoryState();
});
}
if (organizationCompareBtn) {
organizationCompareBtn.addEventListener("click", () => {
if (!organizationFrame?.contentWindow) return;
const fromDate = getMonthEndDate(organizationHistoryState.selectedMonth);
const toDate = getTodayDate();
if (!fromDate) return;
organizationFrame.contentWindow.postMessage(
{
source: "total-control",
type: "open-history-compare",
fromDate,
toDate,
},
window.location.origin,
);
});
}
Object.values(seatMapDom).forEach((dom) => {
dom.officeTabs?.addEventListener("click", (event) => {
const button = event.target.closest("[data-seatmap-office]");

14
frontend/public/index.html
View File

@@ -13,7 +13,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;600;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/legacy/static/common.css">
<link rel="stylesheet" href="/styles.css?v=20260326-01">
<link rel="stylesheet" href="/styles.css?v=20260330-01">
</head>
<body>
<section id="login-panel" class="login-screen">
@@ -58,6 +58,14 @@
<input id="global-end-date" type="date" aria-label="종료일">
</label>
</div>
<div id="organization-history-controls" class="header-date-controls hidden">
<span class="header-date-label">조직 기준월</span>
<label class="header-date-field">
<select id="organization-month-select" aria-label="조직 기준월"></select>
</label>
<button id="organization-compare-btn" class="ghost-button ghost-button-soft hidden" type="button">조직도 변경사항 확인</button>
</div>
</div>
<div class="header-right">
@@ -85,7 +93,7 @@
<main class="dashboard-main">
<section id="organization-stage" class="main-stage">
<div class="stage-frame">
<iframe id="organization-frame" src="/legacy/organization?v=20260326-02" data-src="/legacy/organization?v=20260326-02" title="조직도 메인 화면"></iframe>
<iframe id="organization-frame" src="/legacy/organization?v=20260330-01" data-src="/legacy/organization?v=20260330-01" title="조직도 메인 화면"></iframe>
</div>
</section>
<section id="project-stage" class="main-stage" hidden>
@@ -205,6 +213,6 @@
</main>
</section>
<script src="/app.js?v=20260326-02"></script>
<script src="/app.js?v=20260330-01"></script>
</body>
</html>

11
frontend/public/styles.css
View File

@@ -306,6 +306,17 @@ body {
outline: none;
}
.header-date-field select {
border: 0;
background: transparent;
color: var(--color-text);
font-size: 12px;
font-weight: 700;
outline: none;
appearance: none;
padding-right: 8px;
}
.header-date-sep {
color: #94a3b8;
font-size: 12px;

43
legacy/static/organization.js
View File

@@ -8,6 +8,7 @@ let emptyStateMessage = '서버에 조직 데이터가 없습니다. 상단의
let photoPreviewObjectUrl = null;
let seatMapLayoutCache = null;
let activeAsOfDate = '';
let isHistoricalSnapshot = false;
const listViewState = {
mode: 'current',
snapshotDate: '',
@@ -165,7 +166,7 @@ async function loadMembers(message) {
if (message) {
emptyStateMessage = message;
}
const payload = await apiFetch('/api/members');
const payload = await apiFetch(withAsOf('/api/members'));
setMembers(payload.items || []);
if (!members.length) {
emptyStateMessage = '서버에 조직 데이터가 없습니다. 상단의 업로드 버튼으로 초기 데이터를 넣어주세요.';
@@ -185,7 +186,7 @@ async function loadSeatMapLayouts(force = false) {
if (!seatMap?.id) {
return null;
}
return await apiFetch(`/api/seat-maps/${seatMap.id}/layout`);
return await apiFetch(withAsOf(`/api/seat-maps/${seatMap.id}/layout`));
} catch {
return null;
}
@@ -643,6 +644,10 @@ function render() {
}
function toggleAdminMode(checked) {
if (checked && isHistoricalSnapshot) {
alert('월말 히스토리 조회 중에는 수정할 수 없습니다. 최신 월로 돌아간 뒤 수정해주세요.');
return;
}
isAdmin = checked;
const button = document.getElementById('admin-mode-btn');
if (isAdmin) {
@@ -670,7 +675,7 @@ function updateFabMenu() {
let html = '<button class="fab-sub shadow-xl" data-label="리스트" onclick="openListViewModal(event)">📋</button>';
html += '<button class="fab-sub shadow-xl" data-label="조직도 인쇄(A3)" onclick="printA3()">🖨️</button>';
html += '<button class="fab-sub shadow-xl" data-label="자리배치도" onclick="openSeatMapView(event)">🪑</button>';
if (isAdmin) {
if (isAdmin && !isHistoricalSnapshot) {
html += '<button class="fab-sub shadow-xl" data-label="조직현황 업로드" onclick="triggerUpload(event)">⬆️</button>';
html += '<button class="fab-sub shadow-xl" data-label="신규 구성원" onclick="openAddModal(event)">👤</button>';
html += '<button class="fab-sub shadow-xl" data-label="신규 팀/그룹/셀" onclick="openUnitAddModal(event)">🏢</button>';
@@ -678,6 +683,19 @@ function updateFabMenu() {
menu.innerHTML = html;
}
async function openHistoryCompareModal(fromDate, toDate) {
openListViewModal();
const fromInput = document.getElementById('list-compare-from');
const toInput = document.getElementById('list-compare-to');
if (fromInput) {
fromInput.value = fromDate || '';
}
if (toInput) {
toInput.value = toDate || '';
}
await loadCompareListView();
}
function openSeatMapView(event) {
event.stopPropagation();
document.getElementById('fab-container').classList.remove('active');
@@ -695,6 +713,25 @@ window.addEventListener('message', (event) => {
activeAsOfDate = String(data.endDate || '').slice(0, 10);
return;
}
if (data.type === 'organization-history-view') {
activeAsOfDate = String(data.asOfDate || '').slice(0, 10);
isHistoricalSnapshot = Boolean(data.historical);
if (isHistoricalSnapshot && isAdmin) {
toggleAdminMode(false);
} else {
updateFabMenu();
render();
}
seatMapLayoutCache = null;
loadMembers().catch(() => { });
return;
}
if (data.type === 'open-history-compare') {
openHistoryCompareModal(String(data.fromDate || ''), String(data.toDate || '')).catch((error) => {
alert(error.message || '변경 비교를 불러오지 못했습니다.');
});
return;
}
if (data.type === 'seatmap-layout-updated') {
handleSeatMapLayoutUpdated();
}