hskwon
15a2cff453
- pagination.blade.php: data-server-value 속성 추가, 즉시 실행 스크립트로 서버값 강제 설정 - pagination.js: htmx:afterSwap에서 쿠키값 대신 서버값(data-server-value) 우선 사용 - item-fields: 페이지네이션 추가, handlePageChange/handlePerPageChange 핸들러 구현 - 디버그 코드 제거
2100 lines
107 KiB
PHP
2100 lines
107 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '품목기준 필드 관리')
|
|
|
|
@section('content')
|
|
<div class="container mx-auto max-w-7xl">
|
|
<!-- 헤더 -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800">품목기준 필드 관리</h1>
|
|
<p class="text-sm text-gray-500 mt-1">테넌트별 품목관련 테이블의 필드를 관리합니다. 시스템 필드 시딩 및 커스텀 필드를 추가할 수 있습니다.</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<!-- AI 문의하기 버튼 -->
|
|
<button onclick="openAiInquiryModal()"
|
|
class="bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
AI에게 문의하기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 탭 네비게이션 -->
|
|
<div class="mb-6 border-b border-gray-200">
|
|
<nav class="-mb-px flex space-x-8">
|
|
<button id="tab-seeding" onclick="switchTab('seeding')"
|
|
class="tab-btn border-b-2 border-blue-500 text-blue-600 py-4 px-1 text-sm font-medium">
|
|
시스템 필드 시딩
|
|
</button>
|
|
<button id="tab-custom" onclick="switchTab('custom')"
|
|
class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-4 px-1 text-sm font-medium">
|
|
필드 관리
|
|
</button>
|
|
<button id="tab-sysdefs" onclick="switchTab('sysdefs')"
|
|
class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-4 px-1 text-sm font-medium">
|
|
시스템 필드 정의
|
|
</button>
|
|
<button id="tab-errors" onclick="switchTab('errors')"
|
|
class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-4 px-1 text-sm font-medium flex items-center gap-2">
|
|
오류 로그
|
|
<span id="error-badge" class="hidden bg-red-500 text-white text-xs rounded-full px-2 py-0.5">0</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- 시딩 탭 컨텐츠 -->
|
|
<div id="content-seeding" class="tab-content">
|
|
<!-- 전체 시딩/초기화 버튼 -->
|
|
<div class="mb-4 flex justify-end gap-2">
|
|
<button onclick="seedAll()"
|
|
class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
|
|
전체 시딩
|
|
</button>
|
|
<button onclick="resetAll()"
|
|
class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
|
|
전체 초기화
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 시딩 상태 테이블 (HTMX로 로드) -->
|
|
<div id="seeding-status"
|
|
hx-get="/api/admin/item-fields/seeding-status"
|
|
hx-trigger="load, seedingRefresh from:body"
|
|
hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
|
|
class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
<!-- 로딩 스피너 -->
|
|
<div class="flex justify-center items-center p-12">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 커스텀 필드 탭 컨텐츠 -->
|
|
<div id="content-custom" class="tab-content hidden">
|
|
<!-- 필터 및 추가 버튼 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
|
|
<form id="customFilterForm" class="flex flex-wrap gap-4 items-end">
|
|
<!-- 필드 유형 필터 (버튼 그룹) -->
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">필드 유형</label>
|
|
<input type="hidden" name="field_category" id="field_category_input" value="">
|
|
<div class="inline-flex rounded-lg border border-gray-300 overflow-hidden">
|
|
<button type="button" onclick="setFieldCategory('')"
|
|
class="field-category-btn px-3 py-2 text-sm font-medium bg-gray-800 text-white"
|
|
data-value="">
|
|
전체
|
|
</button>
|
|
<button type="button" onclick="setFieldCategory('system')"
|
|
class="field-category-btn px-3 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 border-l border-gray-300"
|
|
data-value="system">
|
|
<span class="inline-flex items-center">
|
|
<svg class="w-3 h-3 mr-1 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
시스템
|
|
</span>
|
|
</button>
|
|
<button type="button" onclick="setFieldCategory('custom')"
|
|
class="field-category-btn px-3 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 border-l border-gray-300"
|
|
data-value="custom">
|
|
<span class="inline-flex items-center">
|
|
<svg class="w-3 h-3 mr-1 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
|
</svg>
|
|
커스텀
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 소스 테이블 필터 -->
|
|
<div class="w-48">
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">소스 테이블</label>
|
|
<select name="source_table" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono">
|
|
<option value="">전체</option>
|
|
@foreach($sourceTables as $table => $label)
|
|
<option value="{{ $table }}">{{ $table }} ({{ $label }})</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 필드 타입 필터 -->
|
|
<div class="w-40">
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">필드 타입</label>
|
|
<select name="field_type" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option value="">전체</option>
|
|
<option value="textbox">텍스트</option>
|
|
<option value="number">숫자</option>
|
|
<option value="dropdown">드롭다운</option>
|
|
<option value="checkbox">체크박스</option>
|
|
<option value="date">날짜</option>
|
|
<option value="textarea">텍스트영역</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 검색 -->
|
|
<div class="flex-1 min-w-[200px]">
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">검색</label>
|
|
<input type="text" name="search"
|
|
placeholder="필드키, 필드명..."
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<!-- 검색 버튼 -->
|
|
<button type="submit"
|
|
class="bg-gray-800 hover:bg-gray-900 text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors">
|
|
검색
|
|
</button>
|
|
|
|
<!-- 추가 버튼 -->
|
|
<button type="button" onclick="openCreateModal()"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
|
|
+ 커스텀 필드 추가
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 커스텀 필드 테이블 (HTMX로 로드) -->
|
|
<div id="custom-fields"
|
|
hx-get="/api/admin/item-fields/custom-fields"
|
|
hx-trigger="customRefresh from:body"
|
|
hx-include="#customFilterForm"
|
|
hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
|
|
class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
<!-- 로딩 스피너 (탭 전환 시 자동 로드) -->
|
|
<div class="flex justify-center items-center p-12">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 시스템 필드 정의 탭 컨텐츠 -->
|
|
<div id="content-sysdefs" class="tab-content hidden">
|
|
<!-- 필터 및 추가 버튼 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
|
|
<form id="sysDefsFilterForm" class="flex flex-wrap gap-4 items-end">
|
|
<!-- 소스 테이블 필터 -->
|
|
<div class="w-48">
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">소스 테이블</label>
|
|
<select name="source_table" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono">
|
|
<option value="">전체</option>
|
|
@foreach($sourceTables as $table => $label)
|
|
<option value="{{ $table }}">{{ $table }} ({{ $label }})</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 검색 -->
|
|
<div class="flex-1 min-w-[200px]">
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">검색</label>
|
|
<input type="text" name="search"
|
|
placeholder="필드키, 필드명..."
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<!-- 검색 버튼 -->
|
|
<button type="submit"
|
|
class="bg-gray-800 hover:bg-gray-900 text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors">
|
|
검색
|
|
</button>
|
|
|
|
<!-- 테이블 추가 버튼 -->
|
|
<button type="button" onclick="openSourceTableModal()"
|
|
class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
|
|
+ 테이블 추가
|
|
</button>
|
|
|
|
<!-- 필드 정의 추가 버튼 -->
|
|
<button type="button" onclick="openSysDefCreateModal()"
|
|
class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
|
|
+ 필드 정의 추가
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 시스템 필드 정의 테이블 (HTMX로 로드) -->
|
|
<div id="system-definitions"
|
|
hx-get="/api/admin/item-fields/system-definitions"
|
|
hx-trigger="sysDefsRefresh from:body"
|
|
hx-include="#sysDefsFilterForm"
|
|
hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
|
|
class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
<!-- 로딩 스피너 (탭 전환 시 자동 로드) -->
|
|
<div class="flex justify-center items-center p-12">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 오류 로그 탭 컨텐츠 -->
|
|
<div id="content-errors" class="tab-content hidden">
|
|
<!-- 오류 로그 테이블 (HTMX로 로드) -->
|
|
<div id="error-logs"
|
|
hx-get="/api/admin/item-fields/error-logs"
|
|
hx-trigger="load, errorRefresh from:body"
|
|
hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
|
|
class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
<!-- 로딩 스피너 -->
|
|
<div class="flex justify-center items-center p-12">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 커스텀 필드 추가 모달 -->
|
|
<div id="createModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
|
|
<div class="flex items-center justify-center min-h-screen px-4">
|
|
<div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeCreateModal()"></div>
|
|
<div class="relative bg-white rounded-lg shadow-xl max-w-lg w-full p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-bold text-gray-800">커스텀 필드 추가</h3>
|
|
<button onclick="closeCreateModal()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="createForm" onsubmit="submitCreateForm(event)">
|
|
<!-- 소스 테이블 -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">소스 테이블 <span class="text-red-500">*</span></label>
|
|
<select name="source_table" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono">
|
|
<option value="">선택하세요</option>
|
|
@foreach($sourceTables as $table => $label)
|
|
<option value="{{ $table }}">{{ $table }} ({{ $label }})</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 필드 키 -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">필드 키 <span class="text-red-500">*</span></label>
|
|
<input type="text" name="field_key" required
|
|
pattern="^[a-zA-Z0-9_]+$"
|
|
maxlength="100"
|
|
placeholder="예: custom_field_1, 96_item_name"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<p class="text-xs text-gray-500 mt-1">영문, 숫자, 밑줄(_)만 사용 가능 (최대 100자)</p>
|
|
</div>
|
|
|
|
<!-- 필드명 -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">필드명 <span class="text-red-500">*</span></label>
|
|
<input type="text" name="field_name" required
|
|
placeholder="예: 커스텀필드1"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<!-- 필드 타입 -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">필드 타입 <span class="text-red-500">*</span></label>
|
|
<select name="field_type" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option value="">선택하세요</option>
|
|
<option value="textbox">텍스트</option>
|
|
<option value="number">숫자</option>
|
|
<option value="dropdown">드롭다운</option>
|
|
<option value="checkbox">체크박스</option>
|
|
<option value="date">날짜</option>
|
|
<option value="textarea">텍스트영역</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 필수 여부 -->
|
|
<div class="mb-4">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" name="is_required" value="1" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
|
|
<span class="ml-2 text-sm text-gray-700">필수 입력</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- 기본값 -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">기본값</label>
|
|
<input type="text" name="default_value"
|
|
placeholder="기본값 (선택사항)"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<!-- 버튼 -->
|
|
<div class="flex justify-end gap-2 mt-6">
|
|
<button type="button" onclick="closeCreateModal()"
|
|
class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
|
|
취소
|
|
</button>
|
|
<button type="submit"
|
|
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors">
|
|
추가
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI 문의하기 모달 -->
|
|
<div id="aiInquiryModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
|
|
<div class="flex items-center justify-center min-h-screen px-4">
|
|
<div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeAiInquiryModal()"></div>
|
|
<div class="relative bg-white rounded-lg shadow-xl max-w-3xl w-full p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-bold text-gray-800 flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
AI에게 문의하기
|
|
</h3>
|
|
<button onclick="closeAiInquiryModal()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="aiInquiryContent">
|
|
<!-- 로딩 상태 -->
|
|
<div id="aiInquiryLoading" class="flex justify-center items-center p-8">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
|
|
<span class="ml-3 text-gray-600">오류 보고서 생성 중...</span>
|
|
</div>
|
|
|
|
<!-- 오류 없음 -->
|
|
<div id="aiInquiryNoError" class="hidden p-8 text-center">
|
|
<div class="text-green-500 mb-2">
|
|
<svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<p class="text-gray-600">저장된 오류 로그가 없습니다.</p>
|
|
<p class="text-sm text-gray-500 mt-1">시딩 중 오류가 발생하면 여기에 보고서가 생성됩니다.</p>
|
|
</div>
|
|
|
|
<!-- 보고서 내용 -->
|
|
<div id="aiInquiryReport" class="hidden">
|
|
<div class="mb-4 p-3 bg-purple-50 rounded-lg text-sm text-purple-700">
|
|
아래 보고서를 복사하여 AI에게 붙여넣으면 오류 원인과 해결 방법을 문의할 수 있습니다.
|
|
</div>
|
|
<div class="relative">
|
|
<textarea id="aiReportText" readonly
|
|
class="w-full h-96 p-4 border border-gray-300 rounded-lg text-sm font-mono bg-gray-50 focus:outline-none resize-none"></textarea>
|
|
<button onclick="copyReportToClipboard()"
|
|
class="absolute top-2 right-2 px-3 py-1 bg-white border border-gray-300 rounded text-xs text-gray-600 hover:bg-gray-100 transition-colors flex items-center gap-1">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
복사
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 버튼 -->
|
|
<div class="flex justify-end gap-2 mt-6">
|
|
<button type="button" onclick="closeAiInquiryModal()"
|
|
class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
|
|
닫기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 필드 상세보기 모달 -->
|
|
<div id="detailModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
|
|
<div class="flex items-center justify-center min-h-screen px-4">
|
|
<div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeDetailModal()"></div>
|
|
<div class="relative bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
|
|
<div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
|
|
<h3 class="text-lg font-bold text-gray-800">필드 상세정보</h3>
|
|
<button onclick="closeDetailModal()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<!-- 기본 정보 -->
|
|
<div class="mb-6">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
기본 정보
|
|
</h4>
|
|
<div class="grid grid-cols-2 gap-4 bg-gray-50 rounded-lg p-4">
|
|
<div>
|
|
<span class="text-xs text-gray-500">필드 키</span>
|
|
<p id="detail_field_key" class="text-sm font-mono font-medium mt-1">-</p>
|
|
</div>
|
|
<div>
|
|
<span class="text-xs text-gray-500">필드명</span>
|
|
<p id="detail_field_name" class="text-sm font-medium mt-1">-</p>
|
|
</div>
|
|
<div>
|
|
<span class="text-xs text-gray-500">소스 테이블</span>
|
|
<p id="detail_source_table" class="text-sm font-mono mt-1">-</p>
|
|
</div>
|
|
<div>
|
|
<span class="text-xs text-gray-500">필드 타입</span>
|
|
<p id="detail_field_type" class="text-sm mt-1">-</p>
|
|
</div>
|
|
<div>
|
|
<span class="text-xs text-gray-500">저장 방식</span>
|
|
<p id="detail_storage_type" class="text-sm mt-1">-</p>
|
|
</div>
|
|
<div>
|
|
<span class="text-xs text-gray-500">카테고리</span>
|
|
<p id="detail_category" class="text-sm mt-1">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 상태 정보 -->
|
|
<div class="mb-6">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
상태
|
|
</h4>
|
|
<div class="flex flex-wrap gap-4 bg-gray-50 rounded-lg p-4">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs text-gray-500">필수:</span>
|
|
<span id="detail_is_required" class="text-sm">-</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs text-gray-500">활성:</span>
|
|
<span id="detail_is_active" class="text-sm">-</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs text-gray-500">잠금:</span>
|
|
<span id="detail_is_locked" class="text-sm">-</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs text-gray-500">공통:</span>
|
|
<span id="detail_is_common" class="text-sm">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 기본값/Placeholder -->
|
|
<div class="mb-6">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
입력 설정
|
|
</h4>
|
|
<div class="grid grid-cols-2 gap-4 bg-gray-50 rounded-lg p-4">
|
|
<div>
|
|
<span class="text-xs text-gray-500">기본값</span>
|
|
<p id="detail_default_value" class="text-sm mt-1">-</p>
|
|
</div>
|
|
<div>
|
|
<span class="text-xs text-gray-500">Placeholder</span>
|
|
<p id="detail_placeholder" class="text-sm mt-1">-</p>
|
|
</div>
|
|
<div class="col-span-2">
|
|
<span class="text-xs text-gray-500">설명</span>
|
|
<p id="detail_description" class="text-sm mt-1">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Options (JSON) -->
|
|
<div id="detail_options_section" class="mb-6 hidden">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
|
|
<svg class="w-4 h-4 mr-1 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
|
</svg>
|
|
옵션 (Options)
|
|
<span class="ml-2 text-xs text-gray-400">드롭다운 선택 항목 등</span>
|
|
</h4>
|
|
<pre id="detail_options" class="bg-gray-900 text-green-400 p-4 rounded-lg text-xs overflow-x-auto max-h-48"></pre>
|
|
</div>
|
|
|
|
<!-- Properties (JSON) -->
|
|
<div id="detail_properties_section" class="mb-6 hidden">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
|
|
<svg class="w-4 h-4 mr-1 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
속성 (Properties)
|
|
<span class="ml-2 text-xs text-gray-400">멀티컬럼, 추가 설정 등</span>
|
|
</h4>
|
|
<pre id="detail_properties" class="bg-gray-900 text-cyan-400 p-4 rounded-lg text-xs overflow-x-auto max-h-48"></pre>
|
|
</div>
|
|
|
|
<!-- Validation Rules (JSON) -->
|
|
<div id="detail_validation_section" class="mb-6 hidden">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
|
|
<svg class="w-4 h-4 mr-1 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
유효성 검사 (Validation Rules)
|
|
</h4>
|
|
<pre id="detail_validation_rules" class="bg-gray-900 text-yellow-400 p-4 rounded-lg text-xs overflow-x-auto max-h-48"></pre>
|
|
</div>
|
|
|
|
<!-- Display Condition (JSON) -->
|
|
<div id="detail_display_condition_section" class="mb-6 hidden">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
|
|
<svg class="w-4 h-4 mr-1 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
표시 조건 (Display Condition)
|
|
</h4>
|
|
<pre id="detail_display_condition" class="bg-gray-900 text-pink-400 p-4 rounded-lg text-xs overflow-x-auto max-h-48"></pre>
|
|
</div>
|
|
|
|
<!-- 시간 정보 -->
|
|
<div class="mb-6">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
시간 정보
|
|
</h4>
|
|
<div class="grid grid-cols-2 gap-4 bg-gray-50 rounded-lg p-4 text-xs">
|
|
<div>
|
|
<span class="text-gray-500">생성일:</span>
|
|
<span id="detail_created_at" class="ml-2">-</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-gray-500">수정일:</span>
|
|
<span id="detail_updated_at" class="ml-2">-</span>
|
|
</div>
|
|
<div id="detail_locked_info" class="col-span-2 hidden">
|
|
<span class="text-gray-500">잠금 정보:</span>
|
|
<span id="detail_locked_at" class="ml-2 text-orange-600">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sticky bottom-0 bg-white border-t border-gray-200 px-6 py-4 flex justify-end gap-2">
|
|
<button type="button" onclick="closeDetailModal()"
|
|
class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
|
|
닫기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 커스텀 필드 수정 모달 -->
|
|
<div id="editModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
|
|
<div class="flex items-center justify-center min-h-screen px-4">
|
|
<div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeEditModal()"></div>
|
|
<div class="relative bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
|
<div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
|
|
<h3 class="text-lg font-bold text-gray-800">필드 수정</h3>
|
|
<button onclick="closeEditModal()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="editForm" onsubmit="submitEditForm(event)" class="p-6">
|
|
<input type="hidden" name="id" id="edit_id">
|
|
<input type="hidden" name="storage_type" id="edit_storage_type">
|
|
|
|
<!-- 기본 정보 섹션 -->
|
|
<div class="mb-6">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3 pb-2 border-b">기본 정보</h4>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<!-- 소스 테이블 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">소스 테이블</label>
|
|
<select name="source_table" id="edit_source_table" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 font-mono">
|
|
<option value="">미지정</option>
|
|
@foreach($sourceTables as $table => $label)
|
|
<option value="{{ $table }}">{{ $table }} ({{ $label }})</option>
|
|
@endforeach
|
|
</select>
|
|
<p id="edit_source_table_hint" class="text-xs text-gray-500 mt-1 hidden">시스템 필드는 변경 불가</p>
|
|
</div>
|
|
|
|
<!-- 필드 키 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">필드 키</label>
|
|
<input type="text" name="field_key" id="edit_field_key"
|
|
placeholder="예: custom_field_1"
|
|
pattern="^[a-zA-Z0-9_]+$"
|
|
maxlength="100"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 font-mono">
|
|
<p id="edit_field_key_hint" class="text-xs text-gray-500 mt-1 hidden">시스템 필드는 변경 불가</p>
|
|
<p id="edit_field_key_policy" class="text-xs text-gray-500 mt-1">영문, 숫자, _ (최대 100자)</p>
|
|
</div>
|
|
|
|
<!-- 필드명 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">필드명 <span class="text-red-500">*</span></label>
|
|
<input type="text" name="field_name" id="edit_field_name" required
|
|
placeholder="필드 표시명"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<!-- 필드 타입 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">필드 타입 <span class="text-red-500">*</span></label>
|
|
<select name="field_type" id="edit_field_type" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option value="textbox">텍스트</option>
|
|
<option value="number">숫자</option>
|
|
<option value="dropdown">드롭다운</option>
|
|
<option value="checkbox">체크박스</option>
|
|
<option value="date">날짜</option>
|
|
<option value="textarea">텍스트영역</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 기본값 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">기본값</label>
|
|
<input type="text" name="default_value" id="edit_default_value"
|
|
placeholder="기본값 (선택)"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<!-- Placeholder -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Placeholder</label>
|
|
<input type="text" name="placeholder" id="edit_placeholder"
|
|
placeholder="입력 안내 문구"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<!-- 설명 -->
|
|
<div class="col-span-2">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">설명</label>
|
|
<textarea name="description" id="edit_description" rows="2"
|
|
placeholder="필드 설명 (선택)"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 상태 설정 섹션 -->
|
|
<div class="mb-6">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3 pb-2 border-b">상태 설정</h4>
|
|
<div class="flex flex-wrap gap-6">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" name="is_required" id="edit_is_required" value="1" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
|
|
<span class="ml-2 text-sm text-gray-700">필수 입력</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" name="is_active" id="edit_is_active" value="1" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
|
|
<span class="ml-2 text-sm text-gray-700">활성화</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" name="is_locked" id="edit_is_locked" value="1" class="rounded border-gray-300 text-orange-600 focus:ring-orange-500">
|
|
<span class="ml-2 text-sm text-gray-700">잠금</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JSON 필드 섹션 -->
|
|
<div class="mb-6">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3 pb-2 border-b flex items-center justify-between">
|
|
<span>고급 설정 (JSON)</span>
|
|
<button type="button" onclick="toggleJsonHelp()" class="text-xs text-blue-600 hover:text-blue-800">
|
|
입력 도움말
|
|
</button>
|
|
</h4>
|
|
|
|
<!-- JSON 도움말 -->
|
|
<div id="jsonHelp" class="hidden mb-4 p-3 bg-blue-50 rounded-lg text-xs text-blue-800">
|
|
<p class="font-medium mb-2">JSON 입력 예시:</p>
|
|
<div class="space-y-2 font-mono">
|
|
<p><strong>옵션 (드롭다운용):</strong> [{"label": "옵션1", "value": "opt1"}, {"label": "옵션2", "value": "opt2"}]</p>
|
|
<p><strong>속성 (멀티컬럼):</strong> {"multiColumn": true, "columnCount": 2, "columnNames": ["가로", "세로"]}</p>
|
|
<p><strong>유효성:</strong> {"minLength": 1, "maxLength": 100, "pattern": "^[a-zA-Z]+$"}</p>
|
|
<p><strong>표시조건:</strong> {"targetType": "field", "fieldConditions": [{"fieldKey": "type", "expectedValue": "A"}]}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Options -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
|
|
<span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
|
|
옵션 (Options)
|
|
<span class="ml-2 text-xs text-gray-400">드롭다운 선택 항목</span>
|
|
</label>
|
|
<textarea name="options" id="edit_options" rows="3"
|
|
placeholder='[{"label": "옵션1", "value": "opt1"}]'
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 font-mono"></textarea>
|
|
</div>
|
|
|
|
<!-- Properties -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
|
|
<span class="w-2 h-2 bg-cyan-500 rounded-full mr-2"></span>
|
|
속성 (Properties)
|
|
<span class="ml-2 text-xs text-gray-400">멀티컬럼, 추가 설정</span>
|
|
</label>
|
|
<textarea name="properties" id="edit_properties" rows="3"
|
|
placeholder='{"multiColumn": true, "columnCount": 2}'
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 font-mono"></textarea>
|
|
</div>
|
|
|
|
<!-- Validation Rules -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
|
|
<span class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span>
|
|
유효성 검사 (Validation Rules)
|
|
</label>
|
|
<textarea name="validation_rules" id="edit_validation_rules" rows="3"
|
|
placeholder='{"minLength": 1, "maxLength": 100}'
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 font-mono"></textarea>
|
|
</div>
|
|
|
|
<!-- Display Condition -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
|
|
<span class="w-2 h-2 bg-pink-500 rounded-full mr-2"></span>
|
|
표시 조건 (Display Condition)
|
|
</label>
|
|
<textarea name="display_condition" id="edit_display_condition" rows="3"
|
|
placeholder='{"targetType": "field", "fieldConditions": [...]}'
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 font-mono"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 필드 정보 표시 -->
|
|
<div id="edit_field_info" class="mb-4 p-3 bg-gray-50 rounded-lg text-xs text-gray-600">
|
|
<div class="flex justify-between">
|
|
<span>저장 방식:</span>
|
|
<span id="edit_storage_type_display" class="font-medium">-</span>
|
|
</div>
|
|
<div class="flex justify-between mt-1">
|
|
<span>생성일:</span>
|
|
<span id="edit_created_at" class="font-medium">-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 버튼 -->
|
|
<div class="flex justify-end gap-2 pt-4 border-t">
|
|
<button type="button" onclick="closeEditModal()"
|
|
class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
|
|
취소
|
|
</button>
|
|
<button type="submit"
|
|
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors">
|
|
저장
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 시스템 필드 정의 추가/수정 모달 -->
|
|
<div id="sysDefModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
|
|
<div class="flex items-center justify-center min-h-screen px-4">
|
|
<div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeSysDefModal()"></div>
|
|
<div class="relative bg-white rounded-lg shadow-xl max-w-lg w-full p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 id="sysDefModalTitle" class="text-lg font-bold text-gray-800">시스템 필드 정의 추가</h3>
|
|
<button onclick="closeSysDefModal()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="sysDefForm" onsubmit="submitSysDefForm(event)">
|
|
<input type="hidden" name="id" id="sysDef_id">
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<!-- 소스 테이블 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">소스 테이블 <span class="text-red-500">*</span></label>
|
|
<select name="source_table" id="sysDef_source_table" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 font-mono">
|
|
<option value="">선택하세요</option>
|
|
@foreach($sourceTables as $table => $label)
|
|
<option value="{{ $table }}" data-label="{{ $label }}">{{ $table }} ({{ $label }})</option>
|
|
@endforeach
|
|
<option value="_new">+ 새 테이블 추가</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 소스 테이블 라벨 -->
|
|
<div id="newSourceTableGroup" class="hidden">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">새 테이블명</label>
|
|
<input type="text" id="sysDef_new_source_table" placeholder="테이블명 (영문)"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 font-mono">
|
|
</div>
|
|
|
|
<div id="sourceLabelGroup">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">테이블 라벨 <span class="text-red-500">*</span></label>
|
|
<input type="text" name="source_table_label" id="sysDef_source_table_label" required
|
|
placeholder="예: 품목"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mt-4">
|
|
<!-- 필드 키 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">필드 키 <span class="text-red-500">*</span></label>
|
|
<input type="text" name="field_key" id="sysDef_field_key" required
|
|
pattern="^[a-zA-Z0-9_]+$"
|
|
maxlength="100"
|
|
placeholder="예: product_code"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 font-mono">
|
|
<p class="text-xs text-gray-500 mt-1">영문, 숫자, _ 만 사용</p>
|
|
</div>
|
|
|
|
<!-- 필드명 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">필드명 <span class="text-red-500">*</span></label>
|
|
<input type="text" name="field_name" id="sysDef_field_name" required
|
|
maxlength="100"
|
|
placeholder="예: 제품코드"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mt-4">
|
|
<!-- 필드 타입 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">필드 타입 <span class="text-red-500">*</span></label>
|
|
<select name="field_type" id="sysDef_field_type" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
|
<option value="textbox">텍스트</option>
|
|
<option value="number">숫자</option>
|
|
<option value="dropdown">드롭다운</option>
|
|
<option value="checkbox">체크박스</option>
|
|
<option value="date">날짜</option>
|
|
<option value="textarea">텍스트영역</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 순서 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">순서</label>
|
|
<input type="number" name="order_no" id="sysDef_order_no"
|
|
min="0"
|
|
placeholder="자동 설정"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 기본값 -->
|
|
<div class="mt-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">기본값</label>
|
|
<input type="text" name="default_value" id="sysDef_default_value"
|
|
placeholder="기본값 (선택사항)"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
|
</div>
|
|
|
|
<!-- 체크박스 옵션 -->
|
|
<div class="mt-4 flex flex-wrap gap-6">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" name="is_required" id="sysDef_is_required" value="1" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
|
|
<span class="ml-2 text-sm text-gray-700">필수 입력</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" name="is_seed_default" id="sysDef_is_seed_default" value="1" checked class="rounded border-gray-300 text-green-600 focus:ring-green-500">
|
|
<span class="ml-2 text-sm text-gray-700">기본 시딩 대상</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- 옵션 (JSON) -->
|
|
<div id="sysDefOptionsGroup" class="mt-4 hidden">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">옵션 (드롭다운용 JSON)</label>
|
|
<textarea name="options" id="sysDef_options" rows="3"
|
|
placeholder='[{"label": "옵션1", "value": "opt1"}, {"label": "옵션2", "value": "opt2"}]'
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 font-mono"></textarea>
|
|
</div>
|
|
|
|
<!-- 버튼 -->
|
|
<div class="flex justify-end gap-2 mt-6">
|
|
<button type="button" onclick="closeSysDefModal()"
|
|
class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
|
|
취소
|
|
</button>
|
|
<button type="submit"
|
|
class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium transition-colors">
|
|
저장
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 소스 테이블 추가 모달 (DB 테이블 선택) -->
|
|
<div id="sourceTableModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
|
|
<div class="flex items-center justify-center min-h-screen px-4">
|
|
<div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeSourceTableModal()"></div>
|
|
<div class="relative bg-white rounded-lg shadow-xl max-w-2xl w-full p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-bold text-gray-800">소스 테이블 추가</h3>
|
|
<button onclick="closeSourceTableModal()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 검색 -->
|
|
<div class="mb-4">
|
|
<div class="relative">
|
|
<input type="text" id="srcTbl_search" placeholder="테이블명으로 검색..."
|
|
class="w-full px-3 py-2 pl-10 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 font-mono"
|
|
oninput="filterDatabaseTables()">
|
|
<svg class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex items-center gap-4 mt-2">
|
|
<label class="flex items-center text-xs text-gray-600">
|
|
<input type="checkbox" id="srcTbl_unregisteredOnly" class="mr-1" checked onchange="loadDatabaseTables()">
|
|
등록되지 않은 테이블만
|
|
</label>
|
|
<span id="srcTbl_tableCount" class="text-xs text-gray-500"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 테이블 목록 -->
|
|
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden">
|
|
<div class="max-h-64 overflow-y-auto" id="srcTbl_tableList">
|
|
<div class="p-8 text-center text-gray-500">
|
|
<svg class="w-8 h-8 mx-auto mb-2 animate-spin text-gray-400" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<p class="text-sm">테이블 목록을 불러오는 중...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 선택된 테이블 정보 -->
|
|
<div id="srcTbl_selectedInfo" class="hidden mb-4 p-4 bg-emerald-50 border border-emerald-200 rounded-lg">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div>
|
|
<span class="text-sm font-medium text-emerald-700">선택된 테이블:</span>
|
|
<code id="srcTbl_selectedTable" class="ml-2 px-2 py-0.5 bg-emerald-100 text-emerald-800 rounded font-mono text-sm"></code>
|
|
</div>
|
|
<button type="button" onclick="clearSelectedTable()" class="text-emerald-600 hover:text-emerald-800 text-xs">
|
|
선택 해제
|
|
</button>
|
|
</div>
|
|
<!-- 라벨 입력 -->
|
|
<div class="mb-3">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">테이블 라벨 (한글) <span class="text-red-500">*</span></label>
|
|
<input type="text" id="srcTbl_source_table_label" required
|
|
maxlength="50"
|
|
placeholder="예: 제품, 주문, 자재"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
|
|
</div>
|
|
<!-- 컬럼 목록 -->
|
|
<div>
|
|
<p class="text-xs font-medium text-gray-600 mb-2">컬럼 목록</p>
|
|
<div id="srcTbl_columns" class="flex flex-wrap gap-1 max-h-24 overflow-y-auto">
|
|
<!-- 컬럼 목록이 여기 표시됨 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 안내 -->
|
|
<div class="p-3 bg-gray-50 rounded-lg text-xs text-gray-600 mb-4">
|
|
<p class="font-medium mb-1">안내</p>
|
|
<p>데이터베이스에 있는 테이블 중 필드 관리에 등록할 테이블을 선택하세요.</p>
|
|
<p class="mt-1 text-gray-500">시스템 테이블(migrations, sessions 등)은 표시되지 않습니다.</p>
|
|
</div>
|
|
|
|
<!-- 버튼 -->
|
|
<div class="flex justify-end gap-2">
|
|
<button type="button" onclick="closeSourceTableModal()"
|
|
class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
|
|
취소
|
|
</button>
|
|
<button type="button" onclick="submitSourceTableForm()"
|
|
id="srcTbl_submitBtn"
|
|
disabled
|
|
class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-medium transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed">
|
|
등록
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
<script>
|
|
// 탭 전환
|
|
function switchTab(tab) {
|
|
// 탭 버튼 스타일 변경
|
|
document.querySelectorAll('.tab-btn').forEach(btn => {
|
|
btn.classList.remove('border-blue-500', 'text-blue-600');
|
|
btn.classList.add('border-transparent', 'text-gray-500');
|
|
});
|
|
document.getElementById('tab-' + tab).classList.remove('border-transparent', 'text-gray-500');
|
|
document.getElementById('tab-' + tab).classList.add('border-blue-500', 'text-blue-600');
|
|
|
|
// 컨텐츠 표시/숨김
|
|
document.querySelectorAll('.tab-content').forEach(content => {
|
|
content.classList.add('hidden');
|
|
});
|
|
document.getElementById('content-' + tab).classList.remove('hidden');
|
|
|
|
// 탭별 데이터 로드
|
|
if (tab === 'custom') {
|
|
htmx.trigger('#custom-fields', 'customRefresh');
|
|
} else if (tab === 'sysdefs') {
|
|
htmx.trigger('#system-definitions', 'sysDefsRefresh');
|
|
} else if (tab === 'errors') {
|
|
htmx.trigger('#error-logs', 'errorRefresh');
|
|
}
|
|
}
|
|
|
|
// 폼 제출 시 HTMX 이벤트 트리거
|
|
document.getElementById('customFilterForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
htmx.trigger('#custom-fields', 'customRefresh');
|
|
});
|
|
|
|
// 페이지 변경 핸들러 (pagination 컴포넌트에서 호출)
|
|
window.handlePageChange = function(page) {
|
|
const form = document.getElementById('customFilterForm');
|
|
if (form) {
|
|
// hidden input으로 page 값 설정
|
|
let pageInput = form.querySelector('input[name="page"]');
|
|
if (!pageInput) {
|
|
pageInput = document.createElement('input');
|
|
pageInput.type = 'hidden';
|
|
pageInput.name = 'page';
|
|
form.appendChild(pageInput);
|
|
}
|
|
pageInput.value = page;
|
|
|
|
// customRefresh 이벤트 트리거
|
|
htmx.trigger('#custom-fields', 'customRefresh');
|
|
}
|
|
};
|
|
|
|
// 페이지당 항목 수 변경 핸들러 (pagination 컴포넌트에서 호출)
|
|
window.handlePerPageChange = function(perPage) {
|
|
const form = document.getElementById('customFilterForm');
|
|
if (form) {
|
|
// hidden input으로 per_page 값 설정
|
|
let perPageInput = form.querySelector('input[name="per_page"]');
|
|
if (!perPageInput) {
|
|
perPageInput = document.createElement('input');
|
|
perPageInput.type = 'hidden';
|
|
perPageInput.name = 'per_page';
|
|
form.appendChild(perPageInput);
|
|
}
|
|
perPageInput.value = perPage;
|
|
|
|
// 페이지는 1로 리셋
|
|
let pageInput = form.querySelector('input[name="page"]');
|
|
if (!pageInput) {
|
|
pageInput = document.createElement('input');
|
|
pageInput.type = 'hidden';
|
|
pageInput.name = 'page';
|
|
form.appendChild(pageInput);
|
|
}
|
|
pageInput.value = 1;
|
|
|
|
// customRefresh 이벤트 트리거
|
|
htmx.trigger('#custom-fields', 'customRefresh');
|
|
}
|
|
};
|
|
|
|
// 시딩 새로고침
|
|
function refreshSeeding() {
|
|
htmx.trigger('#seeding-status', 'seedingRefresh');
|
|
}
|
|
|
|
// 시딩 탭에서 필드 관리 탭으로 이동 (source_table 필터링)
|
|
window.goToFieldManagement = function(sourceTable) {
|
|
// 1. 소스 테이블 필터 설정
|
|
const sourceTableSelect = document.querySelector('#customFilterForm select[name="source_table"]');
|
|
if (sourceTableSelect) {
|
|
sourceTableSelect.value = sourceTable;
|
|
}
|
|
|
|
// 2. 필드 유형을 '시스템'으로 설정
|
|
setFieldCategory('system');
|
|
|
|
// 3. 필드 관리 탭으로 전환 (데이터 로드 포함)
|
|
switchTab('custom');
|
|
};
|
|
|
|
// 오류 처리 공통 함수
|
|
function handleSeedingResponse(data) {
|
|
if (data.success) {
|
|
showToast(data.message, 'success');
|
|
} else {
|
|
showToast(data.message, 'error');
|
|
}
|
|
|
|
// 오류가 있으면 오류 탭 배지 업데이트 및 표시
|
|
if (data.has_errors || data.error_count > 0) {
|
|
updateErrorBadge(data.error_count || data.errors?.length || 1);
|
|
showToast(`${data.error_count || 1}건의 오류가 발생했습니다. 오류 로그 탭을 확인하세요.`, 'warning');
|
|
}
|
|
|
|
refreshSeeding();
|
|
htmx.trigger('#error-logs', 'errorRefresh');
|
|
}
|
|
|
|
// 오류 배지 업데이트
|
|
function updateErrorBadge(count) {
|
|
const badge = document.getElementById('error-badge');
|
|
if (count > 0) {
|
|
badge.textContent = count;
|
|
badge.classList.remove('hidden');
|
|
} else {
|
|
badge.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// 단일 테이블 시딩
|
|
window.seedTable = function(sourceTable) {
|
|
showConfirm('이 테이블의 시스템 필드를 시딩하시겠습니까?', () => {
|
|
fetch('/api/admin/item-fields/seed', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify({ source_table: sourceTable })
|
|
})
|
|
.then(response => response.json())
|
|
.then(handleSeedingResponse)
|
|
.catch(err => showToast('오류가 발생했습니다.', 'error'));
|
|
}, { title: '시딩 확인', icon: 'question' });
|
|
};
|
|
|
|
// 단일 테이블 초기화
|
|
window.resetTable = function(sourceTable) {
|
|
showConfirm('이 테이블의 시스템 필드를 초기화(삭제 후 재시딩)하시겠습니까?', () => {
|
|
fetch('/api/admin/item-fields/reset', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify({ source_table: sourceTable })
|
|
})
|
|
.then(response => response.json())
|
|
.then(handleSeedingResponse)
|
|
.catch(err => showToast('오류가 발생했습니다.', 'error'));
|
|
}, { title: '초기화 확인', icon: 'warning' });
|
|
};
|
|
|
|
// 전체 시딩
|
|
function seedAll() {
|
|
showConfirm('모든 테이블의 시스템 필드를 시딩하시겠습니까?', () => {
|
|
fetch('/api/admin/item-fields/seed-all', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(handleSeedingResponse)
|
|
.catch(err => showToast('오류가 발생했습니다.', 'error'));
|
|
}, { title: '전체 시딩 확인', icon: 'question' });
|
|
}
|
|
|
|
// 전체 초기화
|
|
function resetAll() {
|
|
showConfirm('모든 테이블의 시스템 필드를 초기화(삭제 후 재시딩)하시겠습니까?\n\n주의: 기존 시스템 필드가 모두 삭제됩니다.', () => {
|
|
fetch('/api/admin/item-fields/reset-all', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(handleSeedingResponse)
|
|
.catch(err => showToast('오류가 발생했습니다.', 'error'));
|
|
}, { title: '전체 초기화 확인', icon: 'warning' });
|
|
}
|
|
|
|
// 커스텀 필드 추가 모달 열기
|
|
function openCreateModal() {
|
|
document.getElementById('createModal').classList.remove('hidden');
|
|
}
|
|
|
|
// 커스텀 필드 추가 모달 닫기
|
|
function closeCreateModal() {
|
|
document.getElementById('createModal').classList.add('hidden');
|
|
document.getElementById('createForm').reset();
|
|
}
|
|
|
|
// 커스텀 필드 추가 폼 제출
|
|
function submitCreateForm(e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const formData = new FormData(form);
|
|
const data = {};
|
|
formData.forEach((value, key) => {
|
|
if (key === 'is_required') {
|
|
data[key] = true;
|
|
} else {
|
|
data[key] = value;
|
|
}
|
|
});
|
|
if (!data.is_required) {
|
|
data.is_required = false;
|
|
}
|
|
|
|
fetch('/api/admin/item-fields/custom-fields', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast(data.message, 'success');
|
|
closeCreateModal();
|
|
htmx.trigger('#custom-fields', 'customRefresh');
|
|
} else {
|
|
showToast(data.message, 'error');
|
|
}
|
|
})
|
|
.catch(err => showToast('오류가 발생했습니다.', 'error'));
|
|
}
|
|
|
|
// 커스텀 필드 삭제
|
|
window.deleteCustomField = function(id, name) {
|
|
showDeleteConfirm(`"${name}" 커스텀 필드`, () => {
|
|
fetch(`/api/admin/item-fields/custom-fields/${id}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast(data.message, 'success');
|
|
htmx.trigger('#custom-fields', 'customRefresh');
|
|
} else {
|
|
showToast(data.message, 'error');
|
|
}
|
|
})
|
|
.catch(err => showToast('오류가 발생했습니다.', 'error'));
|
|
});
|
|
};
|
|
|
|
// 오류 로그 초기화
|
|
window.clearErrorLogs = function() {
|
|
showConfirm('모든 오류 로그를 초기화하시겠습니까?', () => {
|
|
fetch('/api/admin/item-fields/error-logs', {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast(data.message, 'success');
|
|
htmx.trigger('#error-logs', 'errorRefresh');
|
|
updateErrorBadge(0);
|
|
} else {
|
|
showToast(data.message, 'error');
|
|
}
|
|
})
|
|
.catch(err => showToast('오류가 발생했습니다.', 'error'));
|
|
}, { title: '로그 초기화', icon: 'warning' });
|
|
};
|
|
|
|
// AI 문의하기 모달 열기
|
|
function openAiInquiryModal() {
|
|
document.getElementById('aiInquiryModal').classList.remove('hidden');
|
|
document.getElementById('aiInquiryLoading').classList.remove('hidden');
|
|
document.getElementById('aiInquiryNoError').classList.add('hidden');
|
|
document.getElementById('aiInquiryReport').classList.add('hidden');
|
|
|
|
// 오류 보고서 가져오기
|
|
fetch('/api/admin/item-fields/error-report', {
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById('aiInquiryLoading').classList.add('hidden');
|
|
|
|
if (data.success) {
|
|
document.getElementById('aiInquiryReport').classList.remove('hidden');
|
|
document.getElementById('aiReportText').value = data.report;
|
|
} else {
|
|
document.getElementById('aiInquiryNoError').classList.remove('hidden');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
document.getElementById('aiInquiryLoading').classList.add('hidden');
|
|
document.getElementById('aiInquiryNoError').classList.remove('hidden');
|
|
});
|
|
}
|
|
|
|
// AI 문의하기 모달 닫기
|
|
function closeAiInquiryModal() {
|
|
document.getElementById('aiInquiryModal').classList.add('hidden');
|
|
}
|
|
|
|
// 보고서 클립보드 복사
|
|
function copyReportToClipboard() {
|
|
const textarea = document.getElementById('aiReportText');
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
showToast('보고서가 클립보드에 복사되었습니다.', 'success');
|
|
}
|
|
|
|
// 상세보기 모달 열기
|
|
window.openDetailModal = function(field) {
|
|
const modal = document.getElementById('detailModal');
|
|
const typeLabels = {
|
|
'textbox': '텍스트',
|
|
'number': '숫자',
|
|
'dropdown': '드롭다운',
|
|
'checkbox': '체크박스',
|
|
'date': '날짜',
|
|
'textarea': '텍스트영역'
|
|
};
|
|
|
|
// 기본 정보
|
|
document.getElementById('detail_field_key').textContent = field.field_key || '-';
|
|
document.getElementById('detail_field_name').textContent = field.field_name || '-';
|
|
document.getElementById('detail_source_table').textContent = field.source_table || '-';
|
|
document.getElementById('detail_field_type').textContent = typeLabels[field.field_type] || field.field_type || '-';
|
|
document.getElementById('detail_storage_type').textContent = field.storage_type === 'column' ? '시스템 (컬럼)' : '커스텀 (JSON)';
|
|
document.getElementById('detail_category').textContent = field.category || '-';
|
|
|
|
// 상태
|
|
document.getElementById('detail_is_required').innerHTML = field.is_required ? '<span class="text-green-600 font-medium">예</span>' : '<span class="text-gray-400">아니오</span>';
|
|
document.getElementById('detail_is_active').innerHTML = field.is_active ? '<span class="text-green-600 font-medium">활성</span>' : '<span class="text-gray-400">비활성</span>';
|
|
document.getElementById('detail_is_locked').innerHTML = field.is_locked ? '<span class="text-orange-600 font-medium">잠금</span>' : '<span class="text-gray-400">미잠금</span>';
|
|
document.getElementById('detail_is_common').innerHTML = field.is_common ? '<span class="text-blue-600 font-medium">공통</span>' : '<span class="text-gray-400">개별</span>';
|
|
|
|
// 입력 설정
|
|
document.getElementById('detail_default_value').textContent = field.default_value || '-';
|
|
document.getElementById('detail_placeholder').textContent = field.placeholder || '-';
|
|
document.getElementById('detail_description').textContent = field.description || '-';
|
|
|
|
// JSON 필드들
|
|
const showJsonSection = (sectionId, elementId, data) => {
|
|
const section = document.getElementById(sectionId);
|
|
const element = document.getElementById(elementId);
|
|
if (data) {
|
|
try {
|
|
const parsed = typeof data === 'string' ? JSON.parse(data) : data;
|
|
element.textContent = JSON.stringify(parsed, null, 2);
|
|
section.classList.remove('hidden');
|
|
} catch (e) {
|
|
element.textContent = data;
|
|
section.classList.remove('hidden');
|
|
}
|
|
} else {
|
|
section.classList.add('hidden');
|
|
}
|
|
};
|
|
|
|
showJsonSection('detail_options_section', 'detail_options', field.options);
|
|
showJsonSection('detail_properties_section', 'detail_properties', field.properties);
|
|
showJsonSection('detail_validation_section', 'detail_validation_rules', field.validation_rules);
|
|
showJsonSection('detail_display_condition_section', 'detail_display_condition', field.display_condition);
|
|
|
|
// 시간 정보
|
|
document.getElementById('detail_created_at').textContent = field.created_at ? new Date(field.created_at).toLocaleString('ko-KR') : '-';
|
|
document.getElementById('detail_updated_at').textContent = field.updated_at ? new Date(field.updated_at).toLocaleString('ko-KR') : '-';
|
|
|
|
// 잠금 정보
|
|
const lockedInfo = document.getElementById('detail_locked_info');
|
|
if (field.is_locked && field.locked_at) {
|
|
document.getElementById('detail_locked_at').textContent = `${new Date(field.locked_at).toLocaleString('ko-KR')} (ID: ${field.locked_by || '-'})`;
|
|
lockedInfo.classList.remove('hidden');
|
|
} else {
|
|
lockedInfo.classList.add('hidden');
|
|
}
|
|
|
|
modal.classList.remove('hidden');
|
|
};
|
|
|
|
// 상세보기 모달 닫기
|
|
function closeDetailModal() {
|
|
document.getElementById('detailModal').classList.add('hidden');
|
|
}
|
|
|
|
// JSON 도움말 토글
|
|
function toggleJsonHelp() {
|
|
document.getElementById('jsonHelp').classList.toggle('hidden');
|
|
}
|
|
|
|
// 수정 모달 열기
|
|
window.openEditModal = function(field) {
|
|
const modal = document.getElementById('editModal');
|
|
const isSystemField = field.storage_type === 'column';
|
|
|
|
// 기본 필드 채우기
|
|
document.getElementById('edit_id').value = field.id;
|
|
document.getElementById('edit_storage_type').value = field.storage_type;
|
|
document.getElementById('edit_source_table').value = field.source_table || '';
|
|
document.getElementById('edit_field_key').value = field.field_key || '';
|
|
document.getElementById('edit_field_name').value = field.field_name;
|
|
document.getElementById('edit_field_type').value = field.field_type;
|
|
document.getElementById('edit_default_value').value = field.default_value || '';
|
|
document.getElementById('edit_placeholder').value = field.placeholder || '';
|
|
document.getElementById('edit_description').value = field.description || '';
|
|
|
|
// 체크박스
|
|
document.getElementById('edit_is_required').checked = field.is_required;
|
|
document.getElementById('edit_is_active').checked = field.is_active;
|
|
document.getElementById('edit_is_locked').checked = field.is_locked;
|
|
|
|
// JSON 필드 (문자열로 변환)
|
|
const formatJson = (data) => {
|
|
if (!data) return '';
|
|
try {
|
|
const parsed = typeof data === 'string' ? JSON.parse(data) : data;
|
|
return JSON.stringify(parsed, null, 2);
|
|
} catch (e) {
|
|
return data;
|
|
}
|
|
};
|
|
|
|
document.getElementById('edit_options').value = formatJson(field.options);
|
|
document.getElementById('edit_properties').value = formatJson(field.properties);
|
|
document.getElementById('edit_validation_rules').value = formatJson(field.validation_rules);
|
|
document.getElementById('edit_display_condition').value = formatJson(field.display_condition);
|
|
|
|
// 시스템 필드인 경우 source_table, field_key 비활성화
|
|
document.getElementById('edit_source_table').disabled = isSystemField;
|
|
document.getElementById('edit_field_key').disabled = isSystemField;
|
|
document.getElementById('edit_source_table_hint').classList.toggle('hidden', !isSystemField);
|
|
document.getElementById('edit_field_key_hint').classList.toggle('hidden', !isSystemField);
|
|
document.getElementById('edit_field_key_policy').classList.toggle('hidden', isSystemField);
|
|
|
|
// 필드 정보 표시
|
|
document.getElementById('edit_storage_type_display').textContent =
|
|
isSystemField ? '시스템 필드 (컬럼)' : '커스텀 필드 (JSON)';
|
|
document.getElementById('edit_created_at').textContent =
|
|
field.created_at ? new Date(field.created_at).toLocaleString('ko-KR') : '-';
|
|
|
|
// JSON 도움말 숨기기
|
|
document.getElementById('jsonHelp').classList.add('hidden');
|
|
|
|
modal.classList.remove('hidden');
|
|
};
|
|
|
|
// 수정 모달 닫기
|
|
function closeEditModal() {
|
|
document.getElementById('editModal').classList.add('hidden');
|
|
document.getElementById('editForm').reset();
|
|
}
|
|
|
|
// JSON 파싱 헬퍼 (빈 문자열이면 null 반환)
|
|
function parseJsonField(value) {
|
|
if (!value || value.trim() === '') return null;
|
|
try {
|
|
return JSON.parse(value);
|
|
} catch (e) {
|
|
showToast('JSON 형식이 올바르지 않습니다: ' + e.message, 'error');
|
|
throw e;
|
|
}
|
|
}
|
|
|
|
// 수정 폼 제출
|
|
function submitEditForm(e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const formData = new FormData(form);
|
|
const id = formData.get('id');
|
|
const storageType = formData.get('storage_type');
|
|
const isSystemField = storageType === 'column';
|
|
|
|
// JSON 필드 파싱 시도
|
|
let options, properties, validationRules, displayCondition;
|
|
try {
|
|
options = parseJsonField(formData.get('options'));
|
|
properties = parseJsonField(formData.get('properties'));
|
|
validationRules = parseJsonField(formData.get('validation_rules'));
|
|
displayCondition = parseJsonField(formData.get('display_condition'));
|
|
} catch (e) {
|
|
return; // JSON 파싱 에러 시 중단
|
|
}
|
|
|
|
const data = {
|
|
field_name: formData.get('field_name'),
|
|
field_type: formData.get('field_type'),
|
|
is_required: formData.get('is_required') === '1',
|
|
is_active: formData.get('is_active') === '1',
|
|
is_locked: formData.get('is_locked') === '1',
|
|
default_value: formData.get('default_value') || null,
|
|
placeholder: formData.get('placeholder') || null,
|
|
description: formData.get('description') || null,
|
|
options: options,
|
|
properties: properties,
|
|
validation_rules: validationRules,
|
|
display_condition: displayCondition
|
|
};
|
|
|
|
// 커스텀 필드인 경우에만 source_table, field_key 포함
|
|
if (!isSystemField) {
|
|
data.source_table = formData.get('source_table') || null;
|
|
data.field_key = formData.get('field_key') || null;
|
|
}
|
|
|
|
fetch(`/api/admin/item-fields/custom-fields/${id}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast(data.message, 'success');
|
|
closeEditModal();
|
|
htmx.trigger('#custom-fields', 'customRefresh');
|
|
} else {
|
|
showToast(data.message, 'error');
|
|
}
|
|
})
|
|
.catch(err => showToast('오류가 발생했습니다.', 'error'));
|
|
}
|
|
|
|
// 필드 유형 버튼 그룹 선택
|
|
function setFieldCategory(value) {
|
|
// hidden input 값 업데이트
|
|
document.getElementById('field_category_input').value = value;
|
|
|
|
// 버튼 스타일 업데이트
|
|
document.querySelectorAll('.field-category-btn').forEach(btn => {
|
|
if (btn.dataset.value === value) {
|
|
btn.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-50');
|
|
btn.classList.add('bg-gray-800', 'text-white');
|
|
} else {
|
|
btn.classList.remove('bg-gray-800', 'text-white');
|
|
btn.classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-50');
|
|
}
|
|
});
|
|
|
|
// 즉시 검색 실행
|
|
htmx.trigger('#custom-fields', 'customRefresh');
|
|
}
|
|
|
|
// =========================================================================
|
|
// 시스템 필드 정의 관리 (System Field Definitions CRUD)
|
|
// =========================================================================
|
|
|
|
// 시스템 필드 정의 필터 폼 제출
|
|
document.getElementById('sysDefsFilterForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
htmx.trigger('#system-definitions', 'sysDefsRefresh');
|
|
});
|
|
|
|
// 소스 테이블 드롭다운 변경 (새 테이블 입력 필드 표시/숨김)
|
|
document.getElementById('sysDef_source_table').addEventListener('change', function(e) {
|
|
const newTableGroup = document.getElementById('newSourceTableGroup');
|
|
const labelGroup = document.getElementById('sourceLabelGroup');
|
|
const labelInput = document.getElementById('sysDef_source_table_label');
|
|
|
|
if (this.value === '_new') {
|
|
newTableGroup.classList.remove('hidden');
|
|
labelInput.value = '';
|
|
labelInput.removeAttribute('readonly');
|
|
} else {
|
|
newTableGroup.classList.add('hidden');
|
|
document.getElementById('sysDef_new_source_table').value = '';
|
|
|
|
// 기존 테이블 선택 시 라벨 자동 채우기
|
|
const selectedOption = this.options[this.selectedIndex];
|
|
if (selectedOption && selectedOption.dataset.label) {
|
|
labelInput.value = selectedOption.dataset.label;
|
|
}
|
|
}
|
|
});
|
|
|
|
// 필드 타입 변경 시 옵션 필드 표시/숨김
|
|
document.getElementById('sysDef_field_type').addEventListener('change', function(e) {
|
|
const optionsGroup = document.getElementById('sysDefOptionsGroup');
|
|
if (this.value === 'dropdown') {
|
|
optionsGroup.classList.remove('hidden');
|
|
} else {
|
|
optionsGroup.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// 시스템 필드 정의 추가 모달 열기
|
|
function openSysDefCreateModal() {
|
|
document.getElementById('sysDefModalTitle').textContent = '시스템 필드 정의 추가';
|
|
document.getElementById('sysDefForm').reset();
|
|
document.getElementById('sysDef_id').value = '';
|
|
document.getElementById('sysDef_is_seed_default').checked = true;
|
|
document.getElementById('newSourceTableGroup').classList.add('hidden');
|
|
document.getElementById('sysDefOptionsGroup').classList.add('hidden');
|
|
document.getElementById('sysDefModal').classList.remove('hidden');
|
|
}
|
|
|
|
// 시스템 필드 정의 모달 닫기
|
|
function closeSysDefModal() {
|
|
document.getElementById('sysDefModal').classList.add('hidden');
|
|
document.getElementById('sysDefForm').reset();
|
|
}
|
|
|
|
// 시스템 필드 정의 수정 모달 열기
|
|
window.openSysDefEditModal = function(def) {
|
|
document.getElementById('sysDefModalTitle').textContent = '시스템 필드 정의 수정';
|
|
document.getElementById('sysDef_id').value = def.id;
|
|
document.getElementById('sysDef_source_table').value = def.source_table;
|
|
document.getElementById('sysDef_source_table_label').value = def.source_table_label || '';
|
|
document.getElementById('sysDef_field_key').value = def.field_key;
|
|
document.getElementById('sysDef_field_name').value = def.field_name;
|
|
document.getElementById('sysDef_field_type').value = def.field_type;
|
|
document.getElementById('sysDef_order_no').value = def.order_no || '';
|
|
document.getElementById('sysDef_default_value').value = def.default_value || '';
|
|
document.getElementById('sysDef_is_required').checked = def.is_required;
|
|
document.getElementById('sysDef_is_seed_default').checked = def.is_seed_default;
|
|
|
|
// 옵션 필드 처리
|
|
const optionsGroup = document.getElementById('sysDefOptionsGroup');
|
|
if (def.field_type === 'dropdown') {
|
|
optionsGroup.classList.remove('hidden');
|
|
if (def.options) {
|
|
try {
|
|
const opts = typeof def.options === 'string' ? JSON.parse(def.options) : def.options;
|
|
document.getElementById('sysDef_options').value = JSON.stringify(opts, null, 2);
|
|
} catch (e) {
|
|
document.getElementById('sysDef_options').value = def.options;
|
|
}
|
|
}
|
|
} else {
|
|
optionsGroup.classList.add('hidden');
|
|
}
|
|
|
|
document.getElementById('newSourceTableGroup').classList.add('hidden');
|
|
document.getElementById('sysDefModal').classList.remove('hidden');
|
|
};
|
|
|
|
// 시스템 필드 정의 폼 제출 (추가/수정)
|
|
function submitSysDefForm(e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const formData = new FormData(form);
|
|
const id = formData.get('id');
|
|
const isEdit = id && id !== '';
|
|
|
|
// 소스 테이블 처리 (새 테이블 추가 시)
|
|
let sourceTable = formData.get('source_table');
|
|
if (sourceTable === '_new') {
|
|
sourceTable = document.getElementById('sysDef_new_source_table').value;
|
|
if (!sourceTable) {
|
|
showToast('새 테이블명을 입력하세요.', 'error');
|
|
return;
|
|
}
|
|
}
|
|
|
|
// 옵션 JSON 파싱
|
|
let options = null;
|
|
const optionsText = formData.get('options');
|
|
if (optionsText && optionsText.trim()) {
|
|
try {
|
|
options = JSON.parse(optionsText);
|
|
} catch (e) {
|
|
showToast('옵션 JSON 형식이 올바르지 않습니다: ' + e.message, 'error');
|
|
return;
|
|
}
|
|
}
|
|
|
|
const data = {
|
|
source_table: sourceTable,
|
|
source_table_label: formData.get('source_table_label'),
|
|
field_key: formData.get('field_key'),
|
|
field_name: formData.get('field_name'),
|
|
field_type: formData.get('field_type'),
|
|
order_no: formData.get('order_no') ? parseInt(formData.get('order_no')) : null,
|
|
default_value: formData.get('default_value') || null,
|
|
is_required: formData.get('is_required') === '1',
|
|
is_seed_default: formData.get('is_seed_default') === '1',
|
|
options: options
|
|
};
|
|
|
|
const url = isEdit
|
|
? `/api/admin/item-fields/system-definitions/${id}`
|
|
: '/api/admin/item-fields/system-definitions';
|
|
const method = isEdit ? 'PUT' : 'POST';
|
|
|
|
fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast(data.message, 'success');
|
|
closeSysDefModal();
|
|
htmx.trigger('#system-definitions', 'sysDefsRefresh');
|
|
} else {
|
|
showToast(data.message || '저장에 실패했습니다.', 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error:', err);
|
|
showToast('오류가 발생했습니다.', 'error');
|
|
});
|
|
}
|
|
|
|
// 시스템 필드 정의 삭제
|
|
window.deleteSysDefField = function(id, name) {
|
|
showDeleteConfirm(`"${name}" 시스템 필드 정의`, () => {
|
|
fetch(`/api/admin/item-fields/system-definitions/${id}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast(data.message, 'success');
|
|
htmx.trigger('#system-definitions', 'sysDefsRefresh');
|
|
} else {
|
|
showToast(data.message || '삭제에 실패했습니다.', 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error:', err);
|
|
showToast('오류가 발생했습니다.', 'error');
|
|
});
|
|
});
|
|
};
|
|
|
|
// =========================================================================
|
|
// 소스 테이블 관리
|
|
// =========================================================================
|
|
|
|
// DB 테이블 목록 캐시
|
|
let databaseTablesCache = [];
|
|
let selectedDbTable = null;
|
|
|
|
// 소스 테이블 추가 모달 열기
|
|
function openSourceTableModal() {
|
|
document.getElementById('sourceTableModal').classList.remove('hidden');
|
|
document.getElementById('srcTbl_search').value = '';
|
|
document.getElementById('srcTbl_source_table_label').value = '';
|
|
document.getElementById('srcTbl_unregisteredOnly').checked = true;
|
|
clearSelectedTable();
|
|
loadDatabaseTables();
|
|
}
|
|
|
|
// 소스 테이블 모달 닫기
|
|
function closeSourceTableModal() {
|
|
document.getElementById('sourceTableModal').classList.add('hidden');
|
|
selectedDbTable = null;
|
|
}
|
|
|
|
// DB 테이블 목록 로드
|
|
function loadDatabaseTables() {
|
|
const unregisteredOnly = document.getElementById('srcTbl_unregisteredOnly').checked;
|
|
const listContainer = document.getElementById('srcTbl_tableList');
|
|
|
|
// 로딩 표시
|
|
listContainer.innerHTML = `
|
|
<div class="p-8 text-center text-gray-500">
|
|
<svg class="w-8 h-8 mx-auto mb-2 animate-spin text-gray-400" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<p class="text-sm">테이블 목록을 불러오는 중...</p>
|
|
</div>
|
|
`;
|
|
|
|
fetch(`/api/admin/item-fields/database-tables?unregistered_only=${unregisteredOnly}`, {
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
databaseTablesCache = data.data;
|
|
renderDatabaseTables(data.data);
|
|
document.getElementById('srcTbl_tableCount').textContent = `총 ${data.total}개 테이블`;
|
|
} else {
|
|
listContainer.innerHTML = `<div class="p-8 text-center text-red-500 text-sm">테이블 목록을 불러오지 못했습니다.</div>`;
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error:', err);
|
|
listContainer.innerHTML = `<div class="p-8 text-center text-red-500 text-sm">오류가 발생했습니다.</div>`;
|
|
});
|
|
}
|
|
|
|
// 테이블 목록 검색 필터
|
|
function filterDatabaseTables() {
|
|
const search = document.getElementById('srcTbl_search').value.toLowerCase();
|
|
const filtered = databaseTablesCache.filter(t => t.table.toLowerCase().includes(search));
|
|
renderDatabaseTables(filtered);
|
|
document.getElementById('srcTbl_tableCount').textContent = `${filtered.length}개 검색됨`;
|
|
}
|
|
|
|
// 테이블 목록 렌더링
|
|
function renderDatabaseTables(tables) {
|
|
const listContainer = document.getElementById('srcTbl_tableList');
|
|
|
|
if (tables.length === 0) {
|
|
listContainer.innerHTML = `
|
|
<div class="p-8 text-center text-gray-500">
|
|
<svg class="w-10 h-10 mx-auto mb-2 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
|
|
</svg>
|
|
<p class="text-sm">등록 가능한 테이블이 없습니다.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
let html = '<div class="divide-y divide-gray-100">';
|
|
tables.forEach(t => {
|
|
const statusBadge = t.is_registered
|
|
? '<span class="px-2 py-0.5 bg-gray-100 text-gray-500 text-xs rounded">등록됨</span>'
|
|
: '<span class="px-2 py-0.5 bg-emerald-100 text-emerald-700 text-xs rounded">등록 가능</span>';
|
|
|
|
const typeLabels = [...new Set(t.columns.map(c => c.type_label))].slice(0, 4);
|
|
const typeBadges = typeLabels.map(label =>
|
|
`<span class="px-1.5 py-0.5 bg-blue-50 text-blue-600 text-xs rounded">${label}</span>`
|
|
).join(' ');
|
|
|
|
html += `
|
|
<div class="p-3 hover:bg-gray-50 cursor-pointer transition-colors ${t.is_registered ? 'opacity-50' : ''}"
|
|
onclick="${t.is_registered ? '' : `selectDatabaseTable('${t.table}')`}">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<code class="font-mono text-sm font-medium text-gray-800">${t.table}</code>
|
|
${statusBadge}
|
|
</div>
|
|
<div class="flex items-center gap-2 text-xs text-gray-500">
|
|
<span>${t.column_count}개 컬럼</span>
|
|
<span class="text-gray-300">|</span>
|
|
${typeBadges}
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
html += '</div>';
|
|
listContainer.innerHTML = html;
|
|
}
|
|
|
|
// 테이블 선택
|
|
function selectDatabaseTable(tableName) {
|
|
selectedDbTable = tableName;
|
|
|
|
// 선택된 테이블 정보 표시
|
|
document.getElementById('srcTbl_selectedInfo').classList.remove('hidden');
|
|
document.getElementById('srcTbl_selectedTable').textContent = tableName;
|
|
document.getElementById('srcTbl_submitBtn').disabled = false;
|
|
|
|
// 컬럼 정보 로드
|
|
const columnsContainer = document.getElementById('srcTbl_columns');
|
|
columnsContainer.innerHTML = '<span class="text-gray-400 text-xs">로딩 중...</span>';
|
|
|
|
fetch(`/api/admin/item-fields/database-tables/${tableName}/columns`, {
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
columnsContainer.innerHTML = data.columns.map(col => {
|
|
// COMMENT가 있으면 표시, 없으면 컬럼명만
|
|
const displayName = col.comment
|
|
? `<span class="font-medium text-gray-700">${col.comment}</span> <span class="font-mono text-gray-400">${col.name}</span>`
|
|
: `<span class="font-mono">${col.name}</span>`;
|
|
return `
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs ${getColumnTypeColor(col.type)}">
|
|
${displayName}
|
|
<span class="ml-1 text-gray-400">(${col.type_label})</span>
|
|
</span>
|
|
`;
|
|
}).join('');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error:', err);
|
|
columnsContainer.innerHTML = '<span class="text-red-500 text-xs">컬럼 정보를 불러올 수 없습니다.</span>';
|
|
});
|
|
|
|
// 테이블명 기반 기본 라벨 제안
|
|
const suggestedLabel = tableName
|
|
.replace(/_/g, ' ')
|
|
.replace(/\b\w/g, c => c.toUpperCase());
|
|
document.getElementById('srcTbl_source_table_label').value = suggestedLabel;
|
|
document.getElementById('srcTbl_source_table_label').focus();
|
|
}
|
|
|
|
// 컬럼 타입별 색상
|
|
function getColumnTypeColor(type) {
|
|
const colors = {
|
|
'integer': 'bg-blue-100 text-blue-700',
|
|
'bigint': 'bg-blue-100 text-blue-700',
|
|
'smallint': 'bg-blue-100 text-blue-700',
|
|
'decimal': 'bg-indigo-100 text-indigo-700',
|
|
'float': 'bg-indigo-100 text-indigo-700',
|
|
'string': 'bg-gray-100 text-gray-700',
|
|
'varchar': 'bg-gray-100 text-gray-700',
|
|
'text': 'bg-yellow-100 text-yellow-700',
|
|
'boolean': 'bg-green-100 text-green-700',
|
|
'date': 'bg-orange-100 text-orange-700',
|
|
'datetime': 'bg-orange-100 text-orange-700',
|
|
'timestamp': 'bg-orange-100 text-orange-700',
|
|
'json': 'bg-purple-100 text-purple-700',
|
|
};
|
|
return colors[type] || 'bg-gray-100 text-gray-600';
|
|
}
|
|
|
|
// 테이블 선택 해제
|
|
function clearSelectedTable() {
|
|
selectedDbTable = null;
|
|
document.getElementById('srcTbl_selectedInfo').classList.add('hidden');
|
|
document.getElementById('srcTbl_selectedTable').textContent = '';
|
|
document.getElementById('srcTbl_columns').innerHTML = '';
|
|
document.getElementById('srcTbl_source_table_label').value = '';
|
|
document.getElementById('srcTbl_submitBtn').disabled = true;
|
|
}
|
|
|
|
// 소스 테이블 폼 제출
|
|
function submitSourceTableForm() {
|
|
if (!selectedDbTable) {
|
|
showToast('테이블을 선택하세요.', 'error');
|
|
return;
|
|
}
|
|
|
|
const label = document.getElementById('srcTbl_source_table_label').value.trim();
|
|
if (!label) {
|
|
showToast('테이블 라벨을 입력하세요.', 'error');
|
|
document.getElementById('srcTbl_source_table_label').focus();
|
|
return;
|
|
}
|
|
|
|
const data = {
|
|
source_table: selectedDbTable,
|
|
source_table_label: label
|
|
};
|
|
|
|
fetch('/api/admin/item-fields/source-tables', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast(data.message, 'success');
|
|
closeSourceTableModal();
|
|
// 페이지 새로고침으로 소스 테이블 드롭다운 갱신
|
|
location.reload();
|
|
} else {
|
|
showToast(data.message || '등록에 실패했습니다.', 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error:', err);
|
|
showToast('오류가 발생했습니다.', 'error');
|
|
});
|
|
}
|
|
|
|
// 소스 테이블 필드명 동기화 (DB COMMENT로 업데이트)
|
|
window.syncTableFieldNames = function(sourceTable) {
|
|
if (!confirm(`"${sourceTable}" 테이블의 필드명을 DB COMMENT에서 동기화하시겠습니까?`)) {
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/admin/item-fields/source-tables/${sourceTable}/sync-field-names`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast(data.message, 'success');
|
|
htmx.trigger('#system-definitions', 'sysDefsRefresh');
|
|
} else {
|
|
showToast(data.message || '동기화에 실패했습니다.', 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error:', err);
|
|
showToast('오류가 발생했습니다.', 'error');
|
|
});
|
|
};
|
|
|
|
// 소스 테이블 삭제
|
|
window.deleteSourceTable = function(sourceTable, tableLabel) {
|
|
showDeleteConfirm(`"${tableLabel}" 테이블과 모든 필드 정의`, () => {
|
|
fetch(`/api/admin/item-fields/source-tables/${sourceTable}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast(data.message, 'success');
|
|
// 페이지 새로고침으로 소스 테이블 드롭다운 갱신
|
|
location.reload();
|
|
} else {
|
|
showToast(data.message || '삭제에 실패했습니다.', 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error:', err);
|
|
showToast('오류가 발생했습니다.', 'error');
|
|
});
|
|
});
|
|
};
|
|
</script>
|
|
@endpush
|