Files
sam-manage/resources/views/quote-formulas/partials/table.blade.php
hskwon a72e4c4127 feat(mng): Phase 3 - 테이블 스와이프 기능 구현
- table-swipe.blade.php 컴포넌트 생성
- CSS 터치 스크롤 최적화 및 스크롤바 스타일 추가
- 11개 테이블에 x-table-swipe 컴포넌트 적용
- 모바일에서 스와이프 힌트 애니메이션 표시 (sm 미만)
2025-12-19 16:20:20 +09:00

165 lines
11 KiB
PHP

<!-- 수식 테이블 -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
<x-table-swipe>
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">카테고리</th>
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">수식명</th>
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">변수명</th>
<th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">유형</th>
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">수식/규칙</th>
<th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">상태</th>
<th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">순서</th>
<th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">액션</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@forelse($formulas as $formula)
<tr class="{{ $formula->trashed() ? 'bg-red-50' : '' }} hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap">
<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-indigo-100 text-indigo-800">
{{ $formula->category->name ?? '-' }}
</span>
</td>
<td class="px-4 py-3">
<div class="text-sm font-medium text-gray-900">{{ $formula->name }}</div>
@if($formula->description)
<div class="text-xs text-gray-500 truncate max-w-xs">{{ $formula->description }}</div>
@endif
</td>
<td class="px-4 py-3 whitespace-nowrap">
<code class="px-2 py-1 bg-gray-100 rounded text-sm font-mono text-blue-600">{{ $formula->variable }}</code>
</td>
<td class="px-4 py-3 whitespace-nowrap text-center">
@switch($formula->type)
@case('input')
<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
<svg class="w-3 h-3 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>
입력값
</span>
@break
@case('calculation')
<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
계산식
</span>
@break
@case('range')
<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
범위별
</span>
@break
@case('mapping')
<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-purple-100 text-purple-800">
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
</svg>
매핑
</span>
@break
@endswitch
</td>
<td class="px-4 py-3">
@if($formula->type === 'calculation' && $formula->formula)
<code class="text-xs text-gray-600 bg-gray-50 px-2 py-1 rounded block truncate max-w-xs" title="{{ $formula->formula }}">
{{ Str::limit($formula->formula, 40) }}
</code>
@elseif($formula->type === 'range')
<span class="text-xs text-gray-500">{{ $formula->ranges_count ?? 0 }} 범위 규칙</span>
@elseif($formula->type === 'mapping')
<span class="text-xs text-gray-500">{{ $formula->mappings_count ?? 0 }} 매핑 규칙</span>
@else
<span class="text-xs text-gray-400">-</span>
@endif
</td>
<td class="px-4 py-3 whitespace-nowrap text-center">
@if($formula->trashed())
<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">
삭제됨
</span>
@elseif($formula->is_active)
<button onclick="toggleActive({{ $formula->id }})"
class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800 hover:bg-green-200 cursor-pointer">
활성
</button>
@else
<button onclick="toggleActive({{ $formula->id }})"
class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800 hover:bg-gray-200 cursor-pointer">
비활성
</button>
@endif
</td>
<td class="px-4 py-3 whitespace-nowrap text-center text-sm text-gray-500">
{{ $formula->sort_order }}
</td>
<td class="px-4 py-3 whitespace-nowrap text-center">
<div class="flex items-center justify-center gap-1">
@if($formula->trashed())
<button onclick="confirmRestore({{ $formula->id }}, '{{ $formula->name }}')"
class="p-1.5 text-green-600 hover:bg-green-50 rounded" title="복원">
<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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</button>
@if(auth()->user()?->is_super_admin)
<button onclick="confirmForceDelete({{ $formula->id }}, '{{ $formula->name }}')"
class="p-1.5 text-red-600 hover:bg-red-50 rounded" title="영구삭제">
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
@endif
@else
<a href="{{ route('quote-formulas.edit', $formula->id) }}"
class="p-1.5 text-indigo-600 hover:bg-indigo-50 rounded" title="수정">
<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="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>
</a>
<button onclick="duplicateFormula({{ $formula->id }})"
class="p-1.5 text-gray-600 hover:bg-gray-50 rounded" title="복제">
<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>
<button onclick="confirmDelete({{ $formula->id }}, '{{ $formula->name }}')"
class="p-1.5 text-red-600 hover:bg-red-50 rounded" title="삭제">
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
@endif
</div>
</td>
</tr>
@empty
<tr>
<td colspan="8" class="px-6 py-12 text-center text-gray-500">
<svg class="w-12 h-12 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
<p class="text-sm font-medium">등록된 수식이 없습니다.</p>
<p class="text-xs mt-1"> 수식을 추가해주세요.</p>
</td>
</tr>
@endforelse
</tbody>
</table>
</x-table-swipe>
</div>
<!-- 페이지네이션 -->
@if($formulas->hasPages())
<div class="px-6 py-4 border-t border-gray-200">
{{ $formulas->withQueryString()->links() }}
</div>
@endif