hskwon
82dbb3cc71
- 필드 목록에 상태(활성/잠금), 설정(옵션/속성/검증/조건) 컬럼 추가 - Row 클릭 시 아코디언 형태로 JSON 데이터를 Key-Value 테이블로 표시 - 상세보기/수정 모달에 JSON 필드 편집 기능 추가 - 시스템 필드 시딩 탭에서 row 클릭 시 필드 관리 탭으로 이동 및 필터링 - JSON 렌더링용 _key-value-table partial 추가
1274 lines
67 KiB
PHP
1274 lines
67 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-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>
|
|
<option value="products">products</option>
|
|
<option value="materials">materials</option>
|
|
<option value="product_components">product_components</option>
|
|
<option value="material_inspections">material_inspections</option>
|
|
<option value="material_receipts">material_receipts</option>
|
|
</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-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>
|
|
<option value="products">products</option>
|
|
<option value="materials">materials</option>
|
|
<option value="product_components">product_components</option>
|
|
<option value="material_inspections">material_inspections</option>
|
|
<option value="material_receipts">material_receipts</option>
|
|
</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>
|
|
<option value="products">products</option>
|
|
<option value="materials">materials</option>
|
|
<option value="product_components">product_components</option>
|
|
<option value="material_inspections">material_inspections</option>
|
|
<option value="material_receipts">material_receipts</option>
|
|
</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>
|
|
@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 === 'errors') {
|
|
htmx.trigger('#error-logs', 'errorRefresh');
|
|
}
|
|
}
|
|
|
|
// 폼 제출 시 HTMX 이벤트 트리거
|
|
document.getElementById('customFilterForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
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');
|
|
}
|
|
</script>
|
|
@endpush
|