517 lines
22 KiB
PHP
517 lines
22 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '기안 수정')
|
|
|
|
@section('content')
|
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800">기안 수정</h1>
|
|
<p class="text-sm text-gray-500 mt-1">{{ $approval->document_number }}</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<a href="{{ route('approvals.show', $approval->id) }}" class="text-gray-600 hover:text-gray-800 text-sm px-3 py-2 border rounded-lg">
|
|
상세보기
|
|
</a>
|
|
<a href="{{ route('approvals.drafts') }}" class="text-gray-600 hover:text-gray-800 text-sm px-3 py-2 border rounded-lg">
|
|
기안함
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
@if($approval->status === 'rejected')
|
|
<div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6 rounded" style="max-width: 960px; margin-left: auto; margin-right: auto;">
|
|
<div class="flex items-center">
|
|
<span class="text-red-700 font-medium">반려됨</span>
|
|
</div>
|
|
@php
|
|
$rejectedStep = $approval->steps->firstWhere('status', 'rejected');
|
|
@endphp
|
|
@if($rejectedStep)
|
|
<p class="text-sm text-red-600 mt-1">
|
|
{{ $rejectedStep->approver_name ?? '' }} ({{ $rejectedStep->acted_at?->format('Y-m-d H:i') }}):
|
|
{{ $rejectedStep->comment }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<div class="mx-auto" style="max-width: 960px;">
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">문서 내용</h2>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">양식 <span class="text-red-500">*</span></label>
|
|
<select id="form_id" 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">
|
|
@foreach($forms as $form)
|
|
<option value="{{ $form->id }}" {{ $approval->form_id == $form->id ? 'selected' : '' }}>{{ $form->name }}</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" id="title" maxlength="200" value="{{ $approval->title }}"
|
|
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">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<label class="block text-sm font-medium text-gray-700">결재선</label>
|
|
<div class="flex items-center gap-2">
|
|
<select id="quick-line-select" onchange="applyQuickLine(this.value)"
|
|
class="px-2 py-1.5 border border-gray-300 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
style="min-width: 160px;">
|
|
<option value="">결재선 선택</option>
|
|
@foreach($lines as $line)
|
|
<option value="{{ $line->id }}" {{ ($approval->line_id ?? '') == $line->id ? 'selected' : '' }}>
|
|
{{ $line->name }} ({{ count($line->steps ?? []) }}단계)
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
<button type="button" onclick="openApprovalLineModal()"
|
|
class="px-3 py-1.5 bg-blue-50 text-blue-600 hover:bg-blue-100 rounded-lg text-xs font-medium transition whitespace-nowrap">
|
|
세부 설정
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="approval-line-summary" class="p-3 bg-gray-50 rounded-lg border border-gray-200 flex items-center">
|
|
<span class="text-sm text-gray-400">결재선이 설정되지 않았습니다.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="inline-flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" id="is_urgent" {{ $approval->is_urgent ? 'checked' : '' }}
|
|
class="rounded border-gray-300 text-red-600 focus:ring-red-500">
|
|
<span class="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 class="inline-flex items-center gap-1 ml-3 cursor-pointer">
|
|
<input type="checkbox" id="useEditor" onchange="toggleEditor()"
|
|
class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
|
|
<span class="text-xs text-gray-500 font-normal">편집기</span>
|
|
</label>
|
|
</label>
|
|
<textarea id="body" rows="12"
|
|
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"
|
|
style="min-height: 300px;">{{ $approval->body }}</textarea>
|
|
<div id="quill-container" style="display: none; min-height: 300px;"></div>
|
|
</div>
|
|
|
|
{{-- 액션 버튼 --}}
|
|
<div class="border-t pt-4 mt-4 flex gap-2 justify-end">
|
|
<button onclick="updateApproval('save')"
|
|
class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition text-sm font-medium">
|
|
저장
|
|
</button>
|
|
<button onclick="updateApproval('submit')"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition text-sm font-medium">
|
|
{{ $approval->status === 'rejected' ? '재상신' : '상신' }}
|
|
</button>
|
|
@if($approval->isDeletable())
|
|
<button onclick="deleteApproval()"
|
|
class="bg-red-100 hover:bg-red-200 text-red-700 px-6 py-2 rounded-lg transition text-sm font-medium">
|
|
삭제
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 결재선 모달 --}}
|
|
<div id="approval-line-modal" style="display: none;" class="fixed inset-0 z-50">
|
|
<div class="absolute inset-0 bg-black/50" onclick="closeApprovalLineModal()"></div>
|
|
<div class="relative flex items-center justify-center min-h-full p-4">
|
|
<div class="bg-white rounded-xl shadow-2xl w-full overflow-hidden relative" style="max-width: 720px;">
|
|
<button type="button" onclick="closeApprovalLineModal()"
|
|
class="absolute top-3 right-3 z-10 p-1 text-gray-400 hover:text-gray-600 transition bg-white rounded-full shadow-sm">
|
|
<svg class="w-5 h-5" 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 class="overflow-y-auto" style="max-height: 70vh;">
|
|
@php
|
|
$initialSteps = $approval->steps->map(fn($s) => [
|
|
'user_id' => $s->approver_id,
|
|
'user_name' => $s->approver_name ?? ($s->approver?->name ?? ''),
|
|
'department' => $s->approver_department ?? '',
|
|
'position' => $s->approver_position ?? '',
|
|
'step_type' => $s->step_type,
|
|
])->toArray();
|
|
@endphp
|
|
@include('approvals.partials._approval-line-editor', [
|
|
'lines' => $lines,
|
|
'initialSteps' => $initialSteps,
|
|
'selectedLineId' => $approval->line_id ?? '',
|
|
])
|
|
</div>
|
|
<div class="px-5 py-3 border-t border-gray-200 flex justify-end">
|
|
<button type="button" onclick="closeApprovalLineModal()"
|
|
class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition">
|
|
확인
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet">
|
|
<style>
|
|
#quill-container .ql-editor { min-height: 260px; font-size: 0.875rem; }
|
|
#quill-container .ql-toolbar { border-radius: 0.5rem 0.5rem 0 0; border-color: #d1d5db; }
|
|
#quill-container .ql-container { border-radius: 0 0 0.5rem 0.5rem; border-color: #d1d5db; }
|
|
#summary-sortable .step-card {
|
|
cursor: grab;
|
|
position: relative;
|
|
margin-right: 24px;
|
|
user-select: none;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
#summary-sortable .step-card:last-child { margin-right: 0; }
|
|
#summary-sortable .step-card:not(:last-child)::after {
|
|
content: '→';
|
|
position: absolute;
|
|
right: -18px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #d1d5db;
|
|
font-size: 14px;
|
|
pointer-events: none;
|
|
}
|
|
#summary-sortable .step-card:hover {
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
transform: translateY(-1px);
|
|
}
|
|
#summary-sortable .step-card:active { cursor: grabbing; }
|
|
#summary-sortable .step-card.sortable-ghost { opacity: 0.3; }
|
|
#summary-sortable .step-card.sortable-chosen {
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
|
|
<script>
|
|
let quillInstance = null;
|
|
var summarySortableInstance = null;
|
|
const formBodyTemplates = @json($forms->pluck('body_template', 'id'));
|
|
const linesData = @json($lines);
|
|
|
|
function escapeHtml(str) {
|
|
if (!str) return '';
|
|
const div = document.createElement('div');
|
|
div.appendChild(document.createTextNode(str));
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function toggleEditor() {
|
|
const useEditor = document.getElementById('useEditor').checked;
|
|
const textarea = document.getElementById('body');
|
|
const container = document.getElementById('quill-container');
|
|
|
|
if (useEditor) {
|
|
container.style.display = '';
|
|
textarea.style.display = 'none';
|
|
if (!quillInstance) {
|
|
quillInstance = new Quill('#quill-container', {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: [
|
|
[{ 'header': [1, 2, 3, false] }],
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
[{ 'color': [] }, { 'background': [] }],
|
|
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
|
|
[{ 'align': [] }],
|
|
['blockquote', 'code-block'],
|
|
['link'],
|
|
['clean'],
|
|
],
|
|
},
|
|
placeholder: '기안 내용을 입력하세요...',
|
|
});
|
|
}
|
|
const text = textarea.value.trim();
|
|
if (text) {
|
|
if (/<[a-z][\s\S]*>/i.test(text)) {
|
|
quillInstance.root.innerHTML = text;
|
|
} else {
|
|
quillInstance.setText(text);
|
|
}
|
|
}
|
|
} else {
|
|
container.style.display = 'none';
|
|
textarea.style.display = '';
|
|
if (quillInstance) {
|
|
const html = quillInstance.root.innerHTML;
|
|
textarea.value = (html === '<p><br></p>') ? '' : html;
|
|
}
|
|
}
|
|
}
|
|
|
|
function getBodyContent() {
|
|
const useEditor = document.getElementById('useEditor')?.checked;
|
|
if (useEditor && quillInstance) {
|
|
const html = quillInstance.root.innerHTML;
|
|
return (html === '<p><br></p>') ? '' : html;
|
|
}
|
|
return document.getElementById('body').value;
|
|
}
|
|
|
|
function openApprovalLineModal() {
|
|
document.getElementById('approval-line-modal').style.display = '';
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeApprovalLineModal() {
|
|
document.getElementById('approval-line-modal').style.display = 'none';
|
|
document.body.style.overflow = '';
|
|
updateApprovalLineSummary();
|
|
|
|
// 모달 내부 결재선 선택과 외부 드롭다운 동기화
|
|
const editorEl = document.getElementById('approval-line-editor');
|
|
if (editorEl && editorEl._x_dataStack) {
|
|
document.getElementById('quick-line-select').value = editorEl._x_dataStack[0].selectedLineId || '';
|
|
}
|
|
}
|
|
|
|
function updateApprovalLineSummary() {
|
|
const editorEl = document.getElementById('approval-line-editor');
|
|
if (!editorEl || !editorEl._x_dataStack) return;
|
|
|
|
const steps = editorEl._x_dataStack[0].steps;
|
|
const summaryEl = document.getElementById('approval-line-summary');
|
|
|
|
if (summarySortableInstance) { summarySortableInstance.destroy(); summarySortableInstance = null; }
|
|
|
|
if (!steps || steps.length === 0) {
|
|
summaryEl.className = 'p-3 bg-gray-50 rounded-lg border border-gray-200 flex items-center';
|
|
summaryEl.innerHTML = '<span class="text-sm text-gray-400">결재선이 설정되지 않았습니다.</span>';
|
|
return;
|
|
}
|
|
|
|
const typeCounters = { approval: 0, agreement: 0, reference: 0 };
|
|
const typeLabels = { approval: '결재', agreement: '합의', reference: '참조' };
|
|
const typeBg = { approval: 'bg-blue-50 border-blue-100', agreement: 'bg-green-50 border-green-100', reference: 'bg-gray-100 border-gray-200' };
|
|
const typeLabelColor = { approval: 'text-blue-600', agreement: 'text-green-600', reference: 'text-gray-500' };
|
|
|
|
const cards = [];
|
|
steps.forEach(function(s, i) {
|
|
typeCounters[s.step_type] = (typeCounters[s.step_type] || 0) + 1;
|
|
var count = typeCounters[s.step_type];
|
|
var label = typeLabels[s.step_type] || s.step_type;
|
|
var bg = typeBg[s.step_type] || typeBg.reference;
|
|
var labelColor = typeLabelColor[s.step_type] || typeLabelColor.reference;
|
|
var stepLabel = s.step_type === 'reference' ? label : count + '차 ' + label;
|
|
var position = s.position || '';
|
|
|
|
cards.push(
|
|
'<div class="step-card text-center px-3 py-2 rounded-lg border ' + bg + '" data-index="' + i + '" style="min-width: 72px;">' +
|
|
'<div class="text-xs font-medium ' + labelColor + '">' + escapeHtml(stepLabel) + '</div>' +
|
|
(position ? '<div class="text-xs text-gray-400 mt-0.5">' + escapeHtml(position) + '</div>' : '') +
|
|
'<div class="text-sm font-semibold text-gray-800 mt-0.5">' + escapeHtml(s.user_name) + '</div>' +
|
|
'</div>'
|
|
);
|
|
});
|
|
|
|
summaryEl.className = 'p-3 bg-gray-50 rounded-lg border border-gray-200';
|
|
summaryEl.innerHTML = '<div id="summary-sortable" class="flex flex-wrap items-center">' + cards.join('') + '</div>' +
|
|
(steps.length > 1 ? '<div class="text-xs text-gray-400 mt-2">드래그하여 순서를 변경할 수 있습니다</div>' : '');
|
|
|
|
initSummarySortable();
|
|
}
|
|
|
|
function initSummarySortable() {
|
|
if (summarySortableInstance) { summarySortableInstance.destroy(); summarySortableInstance = null; }
|
|
var el = document.getElementById('summary-sortable');
|
|
if (!el || typeof Sortable === 'undefined') return;
|
|
|
|
summarySortableInstance = Sortable.create(el, {
|
|
animation: 150,
|
|
ghostClass: 'sortable-ghost',
|
|
chosenClass: 'sortable-chosen',
|
|
onEnd: function(evt) {
|
|
if (evt.oldIndex === evt.newIndex) return;
|
|
var editorEl = document.getElementById('approval-line-editor');
|
|
if (!editorEl || !editorEl._x_dataStack) return;
|
|
var steps = editorEl._x_dataStack[0].steps;
|
|
var item = steps.splice(evt.oldIndex, 1)[0];
|
|
steps.splice(evt.newIndex, 0, item);
|
|
updateApprovalLineSummary();
|
|
}
|
|
});
|
|
}
|
|
|
|
function applyQuickLine(lineId) {
|
|
const editorEl = document.getElementById('approval-line-editor');
|
|
if (!editorEl || !editorEl._x_dataStack) return;
|
|
const alpineData = editorEl._x_dataStack[0];
|
|
|
|
if (!lineId) {
|
|
alpineData.selectedLineId = '';
|
|
alpineData.steps = [];
|
|
} else {
|
|
alpineData.selectedLineId = lineId;
|
|
alpineData.loadLine();
|
|
}
|
|
|
|
setTimeout(updateApprovalLineSummary, 100);
|
|
}
|
|
|
|
function applyBodyTemplate(formId) {
|
|
const template = formBodyTemplates[formId];
|
|
if (!template) return;
|
|
|
|
// edit에서는 항상 confirm (기존 본문이 있을 가능성 높음)
|
|
const bodyContent = getBodyContent();
|
|
if (bodyContent.trim()) {
|
|
if (!confirm('현재 본문 내용을 양식 템플릿으로 교체하시겠습니까?')) return;
|
|
}
|
|
|
|
// 제목 자동 설정 (비어있을 때만)
|
|
const titleEl = document.getElementById('title');
|
|
if (!titleEl.value.trim()) {
|
|
const formSelect = document.getElementById('form_id');
|
|
titleEl.value = formSelect.options[formSelect.selectedIndex].text;
|
|
}
|
|
|
|
const useEditorEl = document.getElementById('useEditor');
|
|
if (!useEditorEl.checked) {
|
|
useEditorEl.checked = true;
|
|
toggleEditor();
|
|
}
|
|
|
|
if (quillInstance) {
|
|
quillInstance.root.innerHTML = template;
|
|
}
|
|
document.getElementById('body').value = template;
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
const modal = document.getElementById('approval-line-modal');
|
|
if (modal && modal.style.display !== 'none') {
|
|
closeApprovalLineModal();
|
|
}
|
|
}
|
|
});
|
|
|
|
// 기존 HTML body 자동 감지 → 편집기 자동 활성화 + 결재선 요약 초기화
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const existingBody = document.getElementById('body').value;
|
|
if (/<[a-z][\s\S]*>/i.test(existingBody)) {
|
|
document.getElementById('useEditor').checked = true;
|
|
toggleEditor();
|
|
}
|
|
|
|
// Alpine 초기화 후 기존 결재선 요약 표시
|
|
setTimeout(updateApprovalLineSummary, 200);
|
|
|
|
// 양식 변경 시 본문 템플릿 자동 채움
|
|
document.getElementById('form_id').addEventListener('change', function() {
|
|
applyBodyTemplate(this.value);
|
|
});
|
|
});
|
|
|
|
async function updateApproval(action) {
|
|
const title = document.getElementById('title').value.trim();
|
|
if (!title) {
|
|
showToast('제목을 입력해주세요.', 'warning');
|
|
return;
|
|
}
|
|
|
|
const editorEl = document.getElementById('approval-line-editor');
|
|
const steps = editorEl._x_dataStack[0].getStepsData();
|
|
|
|
if (action === 'submit' && steps.filter(s => s.step_type !== 'reference').length === 0) {
|
|
showToast('결재자를 1명 이상 추가해주세요.', 'warning');
|
|
return;
|
|
}
|
|
|
|
const payload = {
|
|
form_id: document.getElementById('form_id').value,
|
|
title: title,
|
|
body: getBodyContent(),
|
|
is_urgent: document.getElementById('is_urgent').checked,
|
|
steps: steps,
|
|
};
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/approvals/{{ $approval->id }}', {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify(payload),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!data.success) {
|
|
showToast(data.message || '저장에 실패했습니다.', 'error');
|
|
return;
|
|
}
|
|
|
|
if (action === 'submit') {
|
|
const submitResponse = await fetch('/api/admin/approvals/{{ $approval->id }}/submit', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
},
|
|
});
|
|
|
|
const submitData = await submitResponse.json();
|
|
|
|
if (submitData.success) {
|
|
showToast('결재가 상신되었습니다.', 'success');
|
|
setTimeout(() => location.href = '/approval-mgmt/drafts', 500);
|
|
} else {
|
|
showToast(submitData.message || '상신에 실패했습니다.', 'error');
|
|
}
|
|
} else {
|
|
showToast('저장되었습니다.', 'success');
|
|
}
|
|
} catch (e) {
|
|
showToast('서버 오류가 발생했습니다.', 'error');
|
|
}
|
|
}
|
|
|
|
async function deleteApproval() {
|
|
if (!confirm('이 문서를 삭제하시겠습니까?')) return;
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/approvals/{{ $approval->id }}', {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
},
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
showToast('삭제되었습니다.', 'success');
|
|
setTimeout(() => location.href = '/approval-mgmt/drafts', 500);
|
|
} else {
|
|
showToast(data.message || '삭제에 실패했습니다.', 'error');
|
|
}
|
|
} catch (e) {
|
|
showToast('서버 오류가 발생했습니다.', 'error');
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|