470 lines
18 KiB
PHP
470 lines
18 KiB
PHP
<?php
|
|
$types = $types ?? [];
|
|
$list = $list ?? [];
|
|
$mtIdx = (int) ($mtIdx ?? 0);
|
|
$mtCode = (string) ($mtCode ?? '');
|
|
$levelNames = $levelNames ?? [];
|
|
$superAdminLevel = \Config\Roles::LEVEL_SUPER_ADMIN;
|
|
?>
|
|
<section class="border-b border-gray-300 p-2 shrink-0 bg-control-panel">
|
|
<div class="flex flex-wrap items-center justify-between gap-y-2">
|
|
<span class="text-sm font-bold text-gray-700">메뉴 관리</span>
|
|
<div class="flex items-center gap-2">
|
|
<?php if (! empty($types)): ?>
|
|
<form method="get" action="<?= base_url('admin/menus') ?>" class="flex items-center gap-2">
|
|
<label class="text-sm font-medium text-gray-700">메뉴 종류</label>
|
|
<select name="mt_idx" onchange="this.form.submit()" class="border border-gray-300 rounded pl-2 pr-7 py-1 text-sm min-w-[8rem]">
|
|
<?php foreach ($types as $t): ?>
|
|
<option value="<?= (int) $t->mt_idx ?>" <?= $mtIdx === (int) $t->mt_idx ? 'selected' : '' ?>><?= esc($t->mt_name) ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</form>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="flex gap-4 mt-2 flex-wrap">
|
|
<div class="border border-gray-300 bg-white rounded p-4 flex-1 min-w-0" style="min-width: 320px;">
|
|
<h3 class="text-sm font-bold text-gray-700 mb-2">메뉴 목록</h3>
|
|
<?php if ($mtIdx <= 0): ?>
|
|
<p class="text-sm text-gray-600">메뉴 종류를 선택하세요.</p>
|
|
<?php elseif (empty($list)): ?>
|
|
<p class="text-sm text-gray-600">등록된 메뉴가 없습니다. 아래에서 등록하세요.</p>
|
|
<?php else: ?>
|
|
<form id="menu-move-form" method="post" action="<?= base_url('admin/menus/move') ?>">
|
|
<?= csrf_field() ?>
|
|
<input type="hidden" name="mt_idx" value="<?= $mtIdx ?>"/>
|
|
<table class="data-table w-full">
|
|
<thead>
|
|
<tr>
|
|
<th class="w-20 text-center text-xs font-medium text-gray-600">순서변경</th>
|
|
<th class="w-10">#</th>
|
|
<th>메뉴명</th>
|
|
<th>링크</th>
|
|
<th>노출 대상</th>
|
|
<th>사용</th>
|
|
<th class="w-24">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($list as $i => $row): ?>
|
|
<tr class="menu-row" data-mm-idx="<?= (int) $row->mm_idx ?>" data-mm-pidx="<?= (int) $row->mm_pidx ?>" data-mm-dep="<?= (int) $row->mm_dep ?>">
|
|
<td class="text-center align-middle">
|
|
<span class="menu-drag-handle cursor-move text-gray-400 select-none" title="드래그해서 순서를 변경하세요">↕</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<input type="hidden" name="mm_idx[]" value="<?= (int) $row->mm_idx ?>"/>
|
|
<span class="menu-order-no"><?= (int) $row->mm_num + 1 ?></span>
|
|
</td>
|
|
<td class="text-left pl-2" style="padding-left: <?= (int) $row->mm_dep * 12 + 8 ?>px;">
|
|
<?php $dep = (int) $row->mm_dep; ?>
|
|
<span class="text-xs text-gray-400">
|
|
<?php if ($dep === 0): ?>
|
|
●
|
|
<?php elseif ($dep === 1): ?>
|
|
└
|
|
<?php else: ?>
|
|
└─
|
|
<?php endif; ?>
|
|
</span>
|
|
<span class="ml-1"><?= esc($row->mm_name) ?></span>
|
|
</td>
|
|
<td class="text-left pl-2 text-xs"><?= esc($row->mm_link) ?></td>
|
|
<td class="text-left pl-2 text-xs">
|
|
<?php
|
|
if ((string) $row->mm_level === '') {
|
|
echo '전체';
|
|
} else {
|
|
$levels = array_filter(explode(',', $row->mm_level), fn ($lv) => (int) trim($lv) !== $superAdminLevel);
|
|
$labels = array_map(fn ($lv) => $levelNames[trim($lv)] ?? trim($lv), $levels);
|
|
echo esc(implode(', ', $labels) ?: '전체');
|
|
}
|
|
?>
|
|
</td>
|
|
<td class="text-center"><?= (string) $row->mm_is_view === 'Y' ? 'Y' : 'N' ?></td>
|
|
<td class="text-center">
|
|
<button type="button"
|
|
class="text-blue-600 hover:underline text-sm menu-edit"
|
|
data-id="<?= (int) $row->mm_idx ?>"
|
|
data-name="<?= esc($row->mm_name) ?>"
|
|
data-link="<?= esc($row->mm_link) ?>"
|
|
data-level="<?= esc($row->mm_level) ?>"
|
|
data-view="<?= (string) $row->mm_is_view ?>"
|
|
data-dep="<?= (int) $row->mm_dep ?>">
|
|
수정
|
|
</button>
|
|
<?php if ($dep === 0): ?>
|
|
<button type="button"
|
|
class="text-green-700 hover:underline text-sm ml-1 menu-add-child"
|
|
data-id="<?= (int) $row->mm_idx ?>"
|
|
data-dep="<?= (int) $row->mm_dep ?>">
|
|
하위 메뉴 추가
|
|
</button>
|
|
<?php endif; ?>
|
|
<form action="<?= base_url('admin/menus/delete/' . (int) $row->mm_idx) ?>" method="post" class="inline ml-1" onsubmit="return confirm('이 메뉴를 삭제하시겠습니까?');">
|
|
<?= csrf_field() ?>
|
|
<button type="submit" class="text-red-600 hover:underline text-sm">삭제</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
<div class="mt-2">
|
|
<button type="submit" class="bg-gray-600 text-white px-3 py-1 rounded text-sm">순서 적용</button>
|
|
</div>
|
|
</form>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="border border-gray-300 bg-white rounded p-4 w-80 shrink-0">
|
|
<h3 class="text-sm font-bold text-gray-700 mb-2" id="form-title">메뉴 등록</h3>
|
|
<form id="menu-form" method="post" action="<?= base_url('admin/menus/store') ?>">
|
|
<?= csrf_field() ?>
|
|
<input type="hidden" name="mt_idx" value="<?= $mtIdx ?>"/>
|
|
<input type="hidden" name="mm_pidx" value="0"/>
|
|
<input type="hidden" name="mm_dep" value="0"/>
|
|
<input type="hidden" name="mm_idx_edit" id="mm_idx_edit" value=""/>
|
|
|
|
<div class="space-y-2 mb-3">
|
|
<label class="block text-sm font-medium text-gray-700">메뉴명</label>
|
|
<input type="text" name="mm_name" id="mm_name" required class="border border-gray-300 rounded px-2 py-1 w-full text-sm" placeholder="예: 대시보드"/>
|
|
</div>
|
|
<div class="space-y-2 mb-3">
|
|
<label class="block text-sm font-medium text-gray-700">링크</label>
|
|
<input type="text" name="mm_link" id="mm_link" class="border border-gray-300 rounded px-2 py-1 w-full text-sm" placeholder="예: admin/users"/>
|
|
</div>
|
|
<div class="space-y-2 mb-3">
|
|
<label class="block text-sm font-medium text-gray-700">노출 대상</label>
|
|
<?php if ($mtCode === 'admin'): ?>
|
|
<p class="text-sm text-gray-600">관리자 메뉴는 <b>지자체관리자</b>에게만 노출됩니다. (고정)</p>
|
|
<?php else: ?>
|
|
<div class="flex flex-wrap gap-x-4 gap-y-1">
|
|
<label class="inline-flex items-center gap-1">
|
|
<input type="checkbox" name="mm_level_all" id="mm_level_all" value="1" checked/>
|
|
<span class="text-sm">전체</span>
|
|
</label>
|
|
<?php foreach ($levelNames as $lv => $name): ?>
|
|
<?php if ((int) $lv === $superAdminLevel) { continue; } ?>
|
|
<label class="inline-flex items-center gap-1 mm-level-label">
|
|
<input type="checkbox" name="mm_level[]" value="<?= (int) $lv ?>" class="mm-level-cb"/>
|
|
<span class="text-sm"><?= esc($name) ?></span>
|
|
</label>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="space-y-2 mb-3">
|
|
<label class="inline-flex items-center gap-1">
|
|
<input type="checkbox" name="mm_is_view" value="1" id="mm_is_view" checked/>
|
|
<span class="text-sm">노출</span>
|
|
</label>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button type="submit" class="bg-btn-search text-white px-4 py-1.5 rounded text-sm" id="btn-submit">등록</button>
|
|
<button type="button" class="bg-gray-200 text-gray-700 px-4 py-1.5 rounded text-sm" id="btn-cancel-edit" style="display:none;">취소</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
tr.menu-row.dragging {
|
|
opacity: 0.35;
|
|
}
|
|
body.menu-row-dragging {
|
|
user-select: none;
|
|
cursor: move;
|
|
}
|
|
tr.menu-drop-placeholder td {
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
.menu-drop-placeholder-box {
|
|
margin: 4px 0;
|
|
height: 34px;
|
|
border: 2px dashed #60a5fa;
|
|
border-radius: 6px;
|
|
background: #eff6ff;
|
|
color: #1d4ed8;
|
|
font-size: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function(){
|
|
const form = document.getElementById('menu-form');
|
|
const formTitle = document.getElementById('form-title');
|
|
const btnSubmit = document.getElementById('btn-submit');
|
|
const btnCancel = document.getElementById('btn-cancel-edit');
|
|
const editIdInput = document.getElementById('mm_idx_edit');
|
|
const mmPidxInput = form.querySelector('[name="mm_pidx"]');
|
|
const mmDepInput = form.querySelector('[name="mm_dep"]');
|
|
const levelAll = document.getElementById('mm_level_all');
|
|
const levelCbs = document.querySelectorAll('.mm-level-cb');
|
|
const isAdminType = '<?= esc($mtCode) ?>' === 'admin';
|
|
const moveForm = document.getElementById('menu-move-form');
|
|
const tbody = moveForm ? moveForm.querySelector('tbody') : null;
|
|
let draggingRow = null;
|
|
|
|
if (!isAdminType && levelAll) {
|
|
// "전체" 체크 시: 다른 체크 해제
|
|
levelAll.addEventListener('change', function(){
|
|
if (levelAll.checked) {
|
|
levelCbs.forEach(function(cb){ cb.checked = false; });
|
|
}
|
|
});
|
|
|
|
// 다른 체크 선택 시: "전체" 자동 해제
|
|
levelCbs.forEach(function(cb){
|
|
cb.addEventListener('change', function(){
|
|
if (cb.checked) levelAll.checked = false;
|
|
});
|
|
});
|
|
|
|
form.addEventListener('submit', function(){
|
|
if (!levelAll.checked) {
|
|
var checked = [];
|
|
levelCbs.forEach(function(cb){ if (cb.checked) checked.push(cb.value); });
|
|
if (checked.length === 0) levelAll.checked = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('.menu-edit').forEach(function(btn){
|
|
btn.addEventListener('click', function(){
|
|
const id = this.dataset.id;
|
|
const name = this.dataset.name;
|
|
const link = this.dataset.link || '';
|
|
const level = (this.dataset.level || '').toString().trim();
|
|
const view = this.dataset.view || 'Y';
|
|
const dep = parseInt(this.dataset.dep || '0', 10);
|
|
form.action = '<?= base_url('admin/menus/update/') ?>' + id;
|
|
form.querySelector('[name="mm_name"]').value = name;
|
|
form.querySelector('[name="mm_link"]').value = link;
|
|
mmPidxInput.value = '0';
|
|
mmDepInput.value = String(dep);
|
|
if (!isAdminType && levelAll) {
|
|
levelAll.checked = (level === '');
|
|
levelCbs.forEach(function(cb){
|
|
cb.checked = level !== '' && level.split(',').indexOf(cb.value) >= 0;
|
|
cb.setAttribute('name', 'mm_level[]');
|
|
});
|
|
if (level !== '' && !Array.prototype.some.call(levelCbs, function(cb){ return cb.checked; })) {
|
|
levelAll.checked = true;
|
|
levelCbs.forEach(function(cb){ cb.checked = false; });
|
|
}
|
|
}
|
|
form.querySelector('[name="mm_is_view"]').checked = (view === 'Y');
|
|
editIdInput.value = id;
|
|
formTitle.textContent = '메뉴 수정';
|
|
btnSubmit.textContent = '수정';
|
|
btnCancel.style.display = 'inline-block';
|
|
});
|
|
});
|
|
|
|
// 하위 메뉴 추가
|
|
document.querySelectorAll('.menu-add-child').forEach(function(btn){
|
|
btn.addEventListener('click', function(){
|
|
const parentId = this.dataset.id;
|
|
const parentDep = parseInt(this.dataset.dep || '0', 10);
|
|
form.action = '<?= base_url('admin/menus/store') ?>';
|
|
form.reset();
|
|
form.querySelector('[name="mt_idx"]').value = '<?= $mtIdx ?>';
|
|
mmPidxInput.value = parentId;
|
|
mmDepInput.value = String(parentDep + 1);
|
|
editIdInput.value = '';
|
|
formTitle.textContent = '하위 메뉴 등록';
|
|
btnSubmit.textContent = '등록';
|
|
btnCancel.style.display = 'inline-block';
|
|
// 노출 기본값 재설정
|
|
form.querySelector('[name="mm_is_view"]').checked = true;
|
|
if (!isAdminType && levelAll) {
|
|
levelAll.checked = true;
|
|
levelCbs.forEach(function(cb){
|
|
cb.checked = false;
|
|
cb.setAttribute('name', 'mm_level[]');
|
|
});
|
|
}
|
|
document.getElementById('mm_name').focus();
|
|
});
|
|
});
|
|
|
|
btnCancel.addEventListener('click', function(){
|
|
form.action = '<?= base_url('admin/menus/store') ?>';
|
|
form.reset();
|
|
form.querySelector('[name="mt_idx"]').value = '<?= $mtIdx ?>';
|
|
mmPidxInput.value = '0';
|
|
mmDepInput.value = '0';
|
|
form.querySelector('[name="mm_is_view"]').checked = true;
|
|
if (!isAdminType && levelAll) {
|
|
levelAll.checked = true;
|
|
levelCbs.forEach(function(cb){ cb.checked = false; cb.setAttribute('name', 'mm_level[]'); });
|
|
}
|
|
editIdInput.value = '';
|
|
formTitle.textContent = '메뉴 등록';
|
|
btnSubmit.textContent = '등록';
|
|
btnCancel.style.display = 'none';
|
|
});
|
|
|
|
// 메뉴 목록 행 드래그 정렬 (마우스 이벤트 기반)
|
|
if (tbody) {
|
|
const colCount = document.querySelectorAll('.data-table thead th').length || 7;
|
|
const makePlaceholder = function() {
|
|
const tr = document.createElement('tr');
|
|
tr.className = 'menu-drop-placeholder';
|
|
const td = document.createElement('td');
|
|
td.colSpan = colCount;
|
|
td.innerHTML = '<div class="menu-drop-placeholder-box">여기에 놓기</div>';
|
|
tr.appendChild(td);
|
|
return tr;
|
|
};
|
|
|
|
const refreshOrderNos = function() {
|
|
tbody.querySelectorAll('tr.menu-row').forEach(function(row, idx){
|
|
const noEl = row.querySelector('.menu-order-no');
|
|
if (noEl) noEl.textContent = String(idx + 1);
|
|
});
|
|
};
|
|
|
|
let placeholderRow = null;
|
|
let originalOrderIds = [];
|
|
let rafId = null;
|
|
let lastClientY = 0;
|
|
let draggingActive = false;
|
|
|
|
const collectCurrentOrderIds = function() {
|
|
return Array.prototype.slice.call(tbody.querySelectorAll('tr.menu-row')).map(function(row){
|
|
const idInput = row.querySelector('input[name="mm_idx[]"]');
|
|
return idInput ? idInput.value : '';
|
|
}).filter(Boolean);
|
|
};
|
|
|
|
const restoreOrderByIds = function(ids) {
|
|
if (!ids.length) return;
|
|
const rowMap = {};
|
|
tbody.querySelectorAll('tr.menu-row').forEach(function(row){
|
|
const idInput = row.querySelector('input[name="mm_idx[]"]');
|
|
if (idInput) rowMap[idInput.value] = row;
|
|
});
|
|
ids.forEach(function(id){
|
|
if (rowMap[id]) tbody.appendChild(rowMap[id]);
|
|
});
|
|
refreshOrderNos();
|
|
};
|
|
|
|
const updatePlaceholderPosition = function() {
|
|
rafId = null;
|
|
if (!draggingActive || !draggingRow || !placeholderRow) return;
|
|
const rows = Array.prototype.slice.call(tbody.querySelectorAll('tr.menu-row:not(.dragging)'));
|
|
let placed = false;
|
|
for (var i = 0; i < rows.length; i += 1) {
|
|
var box = rows[i].getBoundingClientRect();
|
|
var triggerY = box.top + (box.height * 0.25);
|
|
if (lastClientY < triggerY) {
|
|
if (placeholderRow !== rows[i]) {
|
|
tbody.insertBefore(placeholderRow, rows[i]);
|
|
}
|
|
placed = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!placed) {
|
|
tbody.appendChild(placeholderRow);
|
|
}
|
|
};
|
|
|
|
const onMouseMove = function(e) {
|
|
if (!draggingActive) return;
|
|
lastClientY = e.clientY;
|
|
if (!rafId) {
|
|
rafId = window.requestAnimationFrame(updatePlaceholderPosition);
|
|
}
|
|
};
|
|
|
|
const clearDragState = function() {
|
|
if (rafId) {
|
|
window.cancelAnimationFrame(rafId);
|
|
rafId = null;
|
|
}
|
|
document.body.classList.remove('menu-row-dragging');
|
|
window.removeEventListener('mousemove', onMouseMove);
|
|
window.removeEventListener('mouseup', onMouseUp);
|
|
if (draggingRow) {
|
|
draggingRow.classList.remove('dragging');
|
|
}
|
|
if (placeholderRow && placeholderRow.parentNode) {
|
|
placeholderRow.parentNode.removeChild(placeholderRow);
|
|
}
|
|
placeholderRow = null;
|
|
draggingRow = null;
|
|
draggingActive = false;
|
|
};
|
|
|
|
var onMouseUp = function() {
|
|
if (!draggingActive || !draggingRow || !placeholderRow) {
|
|
clearDragState();
|
|
return;
|
|
}
|
|
var prevRow = placeholderRow.previousElementSibling;
|
|
tbody.insertBefore(draggingRow, placeholderRow);
|
|
refreshOrderNos();
|
|
|
|
var draggedDep = parseInt(draggingRow.dataset.mmDep || '0', 10);
|
|
var draggedPidx = parseInt(draggingRow.dataset.mmPidx || '0', 10);
|
|
|
|
if (draggedDep > 0) {
|
|
var valid = false;
|
|
if (prevRow && prevRow.classList.contains('menu-row')) {
|
|
var prevIdx = parseInt(prevRow.dataset.mmIdx || '0', 10);
|
|
var prevPidx = parseInt(prevRow.dataset.mmPidx || '0', 10);
|
|
if (prevRow === draggingRow) {
|
|
valid = true;
|
|
} else if (prevIdx === draggedPidx || prevPidx === draggedPidx) {
|
|
valid = true;
|
|
}
|
|
}
|
|
if (!valid) {
|
|
alert('하위 메뉴는 다른 상위 메뉴에는 들어갈 수 없습니다.');
|
|
restoreOrderByIds(originalOrderIds);
|
|
clearDragState();
|
|
return;
|
|
}
|
|
}
|
|
|
|
const approved = window.confirm('변경한 순서를 적용할까요?');
|
|
if (!approved) {
|
|
restoreOrderByIds(originalOrderIds);
|
|
} else {
|
|
moveForm.submit();
|
|
}
|
|
clearDragState();
|
|
};
|
|
|
|
tbody.querySelectorAll('.menu-drag-handle').forEach(function(handle){
|
|
handle.addEventListener('mousedown', function(e){
|
|
if (e.button !== 0) return;
|
|
const row = handle.closest('tr.menu-row');
|
|
if (!row) return;
|
|
e.preventDefault();
|
|
originalOrderIds = collectCurrentOrderIds();
|
|
draggingRow = row;
|
|
placeholderRow = makePlaceholder();
|
|
draggingActive = true;
|
|
row.classList.add('dragging');
|
|
document.body.classList.add('menu-row-dragging');
|
|
tbody.insertBefore(placeholderRow, row.nextSibling);
|
|
lastClientY = e.clientY;
|
|
updatePlaceholderPosition();
|
|
window.addEventListener('mousemove', onMouseMove, { passive: true });
|
|
window.addEventListener('mouseup', onMouseUp);
|
|
});
|
|
});
|
|
}
|
|
})();
|
|
</script>
|