391 lines
19 KiB
PHP
391 lines
19 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '글로벌 메뉴 수정')
|
|
|
|
@section('content')
|
|
<div class="max-w-4xl mx-auto">
|
|
<!-- 페이지 헤더 -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
|
<x-sidebar.menu-icon icon="menu" class="w-6 h-6" />
|
|
글로벌 메뉴 수정
|
|
</h1>
|
|
<p class="text-sm text-gray-500 mt-1">시스템 전체에서 사용되는 기본 메뉴를 수정합니다.</p>
|
|
</div>
|
|
<a href="{{ route('menus.global.index') }}" class="text-gray-600 hover:text-gray-800">
|
|
← 목록으로
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 폼 카드 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<form id="menuForm" action="/api/admin/global-menus/{{ $menu->id }}" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<!-- 부모 메뉴 -->
|
|
<div class="mb-4">
|
|
<label for="parent_id" class="block text-sm font-medium text-gray-700 mb-2">
|
|
부모 메뉴
|
|
</label>
|
|
<select name="parent_id" id="parent_id"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
|
|
<option value="">최상위 메뉴</option>
|
|
@foreach($parentMenus as $parent)
|
|
@if($parent->id != $menu->id)
|
|
<option value="{{ $parent->id }}" {{ $menu->parent_id == $parent->id ? 'selected' : '' }}>
|
|
{{ str_repeat('── ', $parent->depth ?? 0) }}{{ $parent->name }}
|
|
</option>
|
|
@endif
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 메뉴명 -->
|
|
<div class="mb-4">
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">
|
|
메뉴명 <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" name="name" id="name" required
|
|
value="{{ old('name', $menu->name) }}"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
|
|
</div>
|
|
|
|
<!-- URL -->
|
|
<div class="mb-4">
|
|
<label for="url" class="block text-sm font-medium text-gray-700 mb-2">
|
|
URL
|
|
</label>
|
|
<input type="text" name="url" id="url"
|
|
value="{{ old('url', $menu->url) }}"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
placeholder="/dashboard">
|
|
</div>
|
|
|
|
<!-- 아이콘 -->
|
|
@php
|
|
$currentIcon = old('icon', $menu->icon);
|
|
$sampleIcons = [
|
|
// 기본
|
|
'home', 'folder', 'menu', 'layout-dashboard', 'layout',
|
|
// 결재/문서
|
|
'file-check', 'file-edit', 'file-text', 'document-text', 'inbox',
|
|
'clipboard-check', 'clipboard-list',
|
|
// 게시판/보기
|
|
'layout-list', 'eye',
|
|
// 품목/재고
|
|
'package', 'box', 'archive', 'cube', 'warehouse', 'layers',
|
|
// 데이터베이스
|
|
'database',
|
|
// 사용자/인사
|
|
'users', 'user', 'user-group',
|
|
// 건물/회사
|
|
'building', 'building-2', 'landmark',
|
|
// 일정/시간
|
|
'calendar', 'calendar-check', 'calendar-days', 'clock',
|
|
// 금융/회계
|
|
'dollar-sign', 'credit-card', 'trending-up', 'trending-down', 'receipt',
|
|
// 차트/리포트
|
|
'bar-chart-3', 'chart-bar', 'pie-chart',
|
|
// 고객센터/커뮤니케이션
|
|
'headphones', 'megaphone', 'help-circle', 'message-circle', 'bell',
|
|
// 보안/권한
|
|
'shield', 'shield-check', 'lock', 'key', 'award',
|
|
// 상태/알림
|
|
'alert-circle', 'check-circle', 'check-square', 'x-circle',
|
|
'arrow-up-circle', 'arrow-down-circle',
|
|
// 기록/활동
|
|
'history', 'activity',
|
|
// 설정/조정
|
|
'cog', 'settings', 'sliders', 'adjustments', 'wrench',
|
|
// 개발/코드
|
|
'code', 'terminal', 'server', 'beaker',
|
|
// 유틸리티
|
|
'calculator', 'palette', 'map-pin', 'tag', 'collection',
|
|
'external-link', 'sparkles', 'lightning-bolt', 'puzzle',
|
|
// 물류/운송
|
|
'truck', 'car',
|
|
// 판매/생산
|
|
'shopping-cart', 'factory',
|
|
];
|
|
@endphp
|
|
<div class="mb-4">
|
|
<label for="icon" class="block text-sm font-medium text-gray-700 mb-2">
|
|
아이콘
|
|
</label>
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<div id="icon-preview" class="w-12 h-12 flex items-center justify-center border border-gray-300 rounded-lg bg-gray-50 text-gray-600">
|
|
@if($currentIcon && in_array($currentIcon, $sampleIcons))
|
|
<x-sidebar.menu-icon :icon="$currentIcon" class="w-6 h-6" />
|
|
@elseif($currentIcon)
|
|
<span class="text-xs text-gray-400">{{ $currentIcon }}</span>
|
|
@else
|
|
<x-sidebar.menu-icon icon="menu" class="w-6 h-6" />
|
|
@endif
|
|
</div>
|
|
<input type="text" name="icon" id="icon"
|
|
value="{{ $currentIcon }}"
|
|
class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
placeholder="아래에서 선택하거나 직접 입력">
|
|
</div>
|
|
<!-- 아이콘 샘플 그리드 -->
|
|
<div class="border border-gray-200 rounded-lg p-3 bg-gray-50">
|
|
<p class="text-xs text-gray-500 mb-2">사용 가능한 아이콘 (클릭하여 선택)</p>
|
|
<div class="grid grid-cols-6 sm:grid-cols-9 md:grid-cols-13 gap-1">
|
|
@foreach($sampleIcons as $iconKey)
|
|
<button type="button"
|
|
onclick="selectIcon('{{ $iconKey }}')"
|
|
class="icon-btn flex flex-col items-center gap-0.5 p-2 hover:bg-white hover:shadow-sm rounded-lg transition cursor-pointer border border-transparent hover:border-purple-300 group {{ $currentIcon === $iconKey ? 'bg-purple-50 border-purple-400' : '' }}"
|
|
data-icon="{{ $iconKey }}"
|
|
title="{{ $iconKey }}">
|
|
<x-sidebar.menu-icon :icon="$iconKey" class="w-5 h-5 text-gray-500 group-hover:text-purple-600" />
|
|
<span class="text-[9px] text-gray-400 group-hover:text-purple-600 truncate max-w-full leading-none">{{ $iconKey }}</span>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 정렬 순서 -->
|
|
<div class="mb-4">
|
|
<label for="sort_order" class="block text-sm font-medium text-gray-700 mb-2">
|
|
정렬 순서
|
|
</label>
|
|
<input type="number" name="sort_order" id="sort_order"
|
|
value="{{ old('sort_order', $menu->sort_order ?? 0) }}" min="0"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
|
|
</div>
|
|
|
|
<!-- 체크박스 그룹 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
|
<!-- 활성 상태 -->
|
|
<div class="flex items-center">
|
|
<input type="checkbox" name="is_active" id="is_active" value="1"
|
|
{{ old('is_active', $menu->is_active) ? 'checked' : '' }}
|
|
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
|
|
<label for="is_active" class="ml-2 text-sm text-gray-700">
|
|
활성 상태
|
|
</label>
|
|
</div>
|
|
|
|
<!-- 숨김 -->
|
|
<div class="flex items-center">
|
|
<input type="checkbox" name="hidden" id="hidden" value="1"
|
|
{{ old('hidden', $menu->hidden) ? 'checked' : '' }}
|
|
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
|
|
<label for="hidden" class="ml-2 text-sm text-gray-700">
|
|
숨김
|
|
</label>
|
|
</div>
|
|
|
|
<!-- 외부 링크 -->
|
|
<div class="flex items-center">
|
|
<input type="checkbox" name="is_external" id="is_external" value="1"
|
|
{{ old('is_external', $menu->is_external) ? 'checked' : '' }}
|
|
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
|
|
<label for="is_external" class="ml-2 text-sm text-gray-700">
|
|
외부 링크
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 외부 URL (is_external 체크 시 표시) -->
|
|
<div id="external-url-group" class="mb-4 {{ $menu->is_external ? '' : 'hidden' }}">
|
|
<label for="external_url" class="block text-sm font-medium text-gray-700 mb-2">
|
|
외부 URL
|
|
</label>
|
|
<input type="text" name="external_url" id="external_url"
|
|
value="{{ old('external_url', $menu->external_url) }}"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
placeholder="https://example.com">
|
|
</div>
|
|
|
|
<!-- 확장 옵션 섹션 -->
|
|
@php
|
|
$hasOptions = $menu->options && count($menu->options) > 0;
|
|
$currentSection = $menu->getSection() ?? 'main';
|
|
$currentMeta = $menu->getMeta();
|
|
$currentMetaJson = $currentMeta ? json_encode($currentMeta, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) : '';
|
|
@endphp
|
|
<div class="border-t border-gray-200 pt-4 mt-6 mb-4">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-sm font-semibold text-gray-700">
|
|
확장 옵션
|
|
@if($hasOptions)
|
|
<span class="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-700">{{ count($menu->options) }}</span>
|
|
@endif
|
|
</h3>
|
|
<button type="button" onclick="toggleOptionsSection()" class="text-xs text-purple-600 hover:text-purple-800">
|
|
<span id="options-toggle-text">접기</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="options-section" class="space-y-4">
|
|
<!-- section -->
|
|
<div>
|
|
<label for="option_section" class="block text-sm font-medium text-gray-700 mb-1">
|
|
section
|
|
</label>
|
|
<select name="option_section" id="option_section"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
|
|
<option value="main" {{ $currentSection === 'main' ? 'selected' : '' }}>main (기본)</option>
|
|
<option value="tools" {{ $currentSection === 'tools' ? 'selected' : '' }}>tools (도구)</option>
|
|
<option value="labs" {{ $currentSection === 'labs' ? 'selected' : '' }}>labs (실험실)</option>
|
|
</select>
|
|
<p class="text-xs text-gray-400 mt-1">사이드바 영역 구분. main: 메인 메뉴, tools: 개발도구 영역, labs: R&D 실험실 영역</p>
|
|
</div>
|
|
|
|
<!-- meta (JSON) -->
|
|
<div>
|
|
<label for="option_meta" class="block text-sm font-medium text-gray-700 mb-1">
|
|
meta <span class="text-xs text-gray-400">(JSON)</span>
|
|
</label>
|
|
<textarea name="option_meta" id="option_meta" rows="3"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 font-mono text-sm"
|
|
placeholder='{"tab": "S", "badge": "new"}'>{{ $currentMetaJson }}</textarea>
|
|
<p class="text-xs text-gray-400 mt-1">추가 메타 데이터 (JSON 형식). 탭 구분, 뱃지 표시 등 커스텀 속성 저장</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 버튼 그룹 -->
|
|
<div class="flex justify-end gap-4 mt-6">
|
|
<a href="{{ route('menus.global.index') }}"
|
|
class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
|
|
취소
|
|
</a>
|
|
<button type="submit"
|
|
class="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition">
|
|
수정
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// 아이콘 선택
|
|
window.selectIcon = function(iconKey) {
|
|
document.getElementById('icon').value = iconKey;
|
|
updateIconPreview(iconKey);
|
|
// 선택 상태 표시
|
|
document.querySelectorAll('.icon-btn').forEach(btn => {
|
|
btn.classList.remove('bg-purple-50', 'border-purple-400');
|
|
if (btn.dataset.icon === iconKey) {
|
|
btn.classList.add('bg-purple-50', 'border-purple-400');
|
|
}
|
|
});
|
|
};
|
|
|
|
// 아이콘 미리보기 업데이트
|
|
window.updateIconPreview = function(iconKey) {
|
|
const preview = document.getElementById('icon-preview');
|
|
const iconBtn = document.querySelector(`.icon-btn[data-icon="${iconKey}"]`);
|
|
if (iconBtn) {
|
|
const svg = iconBtn.querySelector('svg');
|
|
if (svg) {
|
|
const clonedSvg = svg.cloneNode(true);
|
|
clonedSvg.classList.remove('w-5', 'h-5');
|
|
clonedSvg.classList.add('w-6', 'h-6');
|
|
preview.innerHTML = '';
|
|
preview.appendChild(clonedSvg);
|
|
}
|
|
} else if (iconKey) {
|
|
preview.innerHTML = `<span class="text-xs text-gray-400">${iconKey}</span>`;
|
|
}
|
|
};
|
|
|
|
// 외부 링크 체크박스 토글
|
|
document.getElementById('is_external').addEventListener('change', function() {
|
|
const externalUrlGroup = document.getElementById('external-url-group');
|
|
if (this.checked) {
|
|
externalUrlGroup.classList.remove('hidden');
|
|
} else {
|
|
externalUrlGroup.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// 확장 옵션 섹션 토글
|
|
window.toggleOptionsSection = function() {
|
|
const section = document.getElementById('options-section');
|
|
const toggleText = document.getElementById('options-toggle-text');
|
|
if (section.classList.contains('hidden')) {
|
|
section.classList.remove('hidden');
|
|
toggleText.textContent = '접기';
|
|
} else {
|
|
section.classList.add('hidden');
|
|
toggleText.textContent = '펼치기';
|
|
}
|
|
};
|
|
|
|
// options 객체 생성
|
|
function buildOptionsObject() {
|
|
const options = {};
|
|
|
|
const section = document.getElementById('option_section').value;
|
|
if (section && section !== 'main') {
|
|
options.section = section;
|
|
}
|
|
|
|
const metaStr = document.getElementById('option_meta').value.trim();
|
|
if (metaStr) {
|
|
try {
|
|
options.meta = JSON.parse(metaStr);
|
|
} catch (e) {
|
|
showToast('meta 필드의 JSON 형식이 올바르지 않습니다.', 'error');
|
|
throw e;
|
|
}
|
|
}
|
|
|
|
return Object.keys(options).length > 0 ? options : null;
|
|
}
|
|
|
|
// 폼 제출 처리
|
|
document.getElementById('menuForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
const data = Object.fromEntries(formData.entries());
|
|
|
|
// option_ 접두사 필드 제거
|
|
delete data.option_section;
|
|
delete data.option_meta;
|
|
|
|
// options 객체 추가
|
|
try {
|
|
const options = buildOptionsObject();
|
|
if (options) {
|
|
data.options = options;
|
|
}
|
|
} catch (e) {
|
|
return; // JSON 파싱 에러
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/global-menus/{{ $menu->id }}', {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
showToast(result.message, 'success');
|
|
window.location.href = result.redirect;
|
|
} else {
|
|
showToast(result.message, 'error');
|
|
}
|
|
} catch (error) {
|
|
showToast('글로벌 메뉴 수정 중 오류가 발생했습니다.', 'error');
|
|
console.error(error);
|
|
}
|
|
});
|
|
</script>
|
|
@endpush |