2f381b2285
- 영업/매니저 시나리오 모달 구현 (6단계 체크리스트) - 상담 기록 기능 (텍스트, 음성, 첨부파일) - 음성 녹음 + Speech-to-Text 변환 - 첨부파일 Drag & Drop 업로드 - 매니저 지정 드롭다운 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
171 lines
8.5 KiB
PHP
171 lines
8.5 KiB
PHP
{{-- 매니저 드롭다운 컴포넌트 --}}
|
|
@php
|
|
$cacheKey = "tenant_manager:{$tenant->id}";
|
|
$assignedManager = cache()->get($cacheKey);
|
|
$isSelf = !$assignedManager || ($assignedManager['is_self'] ?? true);
|
|
$managerName = $assignedManager['name'] ?? '본인';
|
|
@endphp
|
|
|
|
<div x-data="managerDropdown({{ $tenant->id }}, {{ json_encode($assignedManager) }})" class="relative">
|
|
{{-- 드롭다운 트리거 --}}
|
|
<button
|
|
@click="toggle()"
|
|
@click.away="close()"
|
|
type="button"
|
|
class="inline-flex items-center gap-1 px-2.5 py-1 rounded text-xs font-medium transition-colors"
|
|
:class="isOpen ? 'bg-blue-100 text-blue-800 border border-blue-300' : 'bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100'">
|
|
<svg class="w-3 h-3" 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>
|
|
<span>관리: <span x-text="currentManager?.name || '본인'" class="font-semibold">{{ $managerName }}</span></span>
|
|
<svg class="w-3 h-3 transition-transform" :class="isOpen && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{{-- 드롭다운 메뉴 --}}
|
|
<div
|
|
x-show="isOpen"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="transform opacity-0 scale-95"
|
|
x-transition:enter-end="transform opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="transform opacity-100 scale-100"
|
|
x-transition:leave-end="transform opacity-0 scale-95"
|
|
class="absolute z-50 mt-1 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-1"
|
|
@click.stop
|
|
>
|
|
{{-- 로딩 상태 --}}
|
|
<div x-show="loading" class="px-4 py-3 text-center">
|
|
<svg class="w-5 h-5 mx-auto animate-spin text-blue-600" 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>
|
|
</div>
|
|
|
|
{{-- 매니저 목록 --}}
|
|
<div x-show="!loading">
|
|
{{-- 본인 옵션 --}}
|
|
<button
|
|
@click="selectManager(0, '{{ auth()->user()->name }}')"
|
|
class="w-full flex items-center gap-3 px-4 py-2 text-left text-sm hover:bg-gray-50 transition-colors"
|
|
:class="(currentManager?.is_self || !currentManager) && 'bg-blue-50'">
|
|
<div class="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="font-medium text-gray-900">본인</div>
|
|
<div class="text-xs text-gray-500">{{ auth()->user()->name }}</div>
|
|
</div>
|
|
<svg x-show="currentManager?.is_self || !currentManager" class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{{-- 구분선 --}}
|
|
<div class="border-t border-gray-100 my-1"></div>
|
|
|
|
{{-- 다른 매니저 목록 --}}
|
|
<template x-for="manager in managers" :key="manager.id">
|
|
<button
|
|
@click="selectManager(manager.id, manager.name)"
|
|
class="w-full flex items-center gap-3 px-4 py-2 text-left text-sm hover:bg-gray-50 transition-colors"
|
|
:class="currentManager?.id === manager.id && !currentManager?.is_self && 'bg-blue-50'">
|
|
<div class="flex-shrink-0 w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
|
|
<span class="text-sm font-medium text-gray-600" x-text="manager.name.charAt(0)"></span>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="font-medium text-gray-900" x-text="manager.name"></div>
|
|
<div class="text-xs text-gray-500" x-text="manager.email"></div>
|
|
</div>
|
|
<svg x-show="currentManager?.id === manager.id && !currentManager?.is_self" class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</button>
|
|
</template>
|
|
|
|
{{-- 매니저가 없을 때 --}}
|
|
<div x-show="managers.length === 0 && !loading" class="px-4 py-3 text-sm text-gray-500 text-center">
|
|
등록된 매니저가 없습니다.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function managerDropdown(tenantId, initialManager) {
|
|
return {
|
|
tenantId: tenantId,
|
|
isOpen: false,
|
|
loading: false,
|
|
managers: [],
|
|
currentManager: initialManager,
|
|
|
|
toggle() {
|
|
this.isOpen = !this.isOpen;
|
|
if (this.isOpen && this.managers.length === 0) {
|
|
this.loadManagers();
|
|
}
|
|
},
|
|
|
|
close() {
|
|
this.isOpen = false;
|
|
},
|
|
|
|
async loadManagers() {
|
|
this.loading = true;
|
|
try {
|
|
// HQ 테넌트의 사용자 목록 조회 (본인 제외)
|
|
const response = await fetch('/api/admin/users?tenant_type=HQ', {
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
},
|
|
});
|
|
const result = await response.json();
|
|
// 본인을 제외한 목록
|
|
this.managers = (result.data || []).filter(m => m.id !== {{ auth()->id() }});
|
|
} catch (error) {
|
|
console.error('매니저 목록 조회 실패:', error);
|
|
this.managers = [];
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
async selectManager(managerId, managerName) {
|
|
try {
|
|
const response = await fetch(`/sales/tenants/${this.tenantId}/assign-manager`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
},
|
|
body: JSON.stringify({
|
|
manager_id: managerId,
|
|
}),
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
this.currentManager = {
|
|
id: result.manager.id,
|
|
name: result.manager.name,
|
|
is_self: managerId === 0 || result.manager.id === {{ auth()->id() }},
|
|
};
|
|
}
|
|
} catch (error) {
|
|
console.error('매니저 지정 실패:', error);
|
|
alert('매니저 지정에 실패했습니다.');
|
|
}
|
|
|
|
this.close();
|
|
}
|
|
};
|
|
}
|
|
</script>
|