412 lines
11 KiB
Vue
412 lines
11 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, reactive, ref } from 'vue';
|
||
import TableColumnsMenu from '@/components/TableColumnsMenu.vue';
|
||
import { RouterLink } from 'vue-router';
|
||
import axios from 'axios';
|
||
import { api } from '@/lib/api';
|
||
import type {
|
||
CreateVoipConnectionRequest,
|
||
VoipCallLogDto,
|
||
VoipConnectionDto,
|
||
} from '@mento/shared';
|
||
import {
|
||
UiButton,
|
||
UiCard,
|
||
UiEmptyState,
|
||
UiField,
|
||
UiInput,
|
||
UiPageHeader,
|
||
} from '@/components/ui';
|
||
import UiIcon from '@/components/UiIcon.vue';
|
||
import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
|
||
|
||
const loading = ref(false);
|
||
const saving = ref(false);
|
||
const error = ref('');
|
||
const ok = ref('');
|
||
const items = ref<VoipConnectionDto[]>([]);
|
||
const calls = ref<VoipCallLogDto[]>([]);
|
||
|
||
const form = reactive({
|
||
label: 'سانترال اصلی',
|
||
webhookSecret: '',
|
||
clickToCallUrl: '',
|
||
enabled: true,
|
||
});
|
||
|
||
const webhookUrl = computed(() => {
|
||
if (!items.value[0]) return '';
|
||
const origin = typeof window !== 'undefined' ? window.location.origin : '';
|
||
return `${origin}/api/public/integrations/voip/${items.value[0].id}/webhook`;
|
||
});
|
||
|
||
const statusLabel: Record<string, string> = {
|
||
ringing: 'زنگ',
|
||
answered: 'پاسخ',
|
||
missed: 'از دست‌رفته',
|
||
completed: 'تمام‌شده',
|
||
failed: 'ناموفق',
|
||
};
|
||
|
||
const summaryLabel: Record<string, string> = {
|
||
none: '—',
|
||
pending: 'در صف',
|
||
processing: 'در حال ساخت',
|
||
done: 'آماده',
|
||
failed: 'ناموفق',
|
||
skipped: 'رد شده',
|
||
};
|
||
|
||
function noteLink(c: VoipCallLogDto): string | null {
|
||
if (!c.summaryNoteId) return null;
|
||
if (c.personId) return `/contacts/people/${c.personId}`;
|
||
return '/notes';
|
||
}
|
||
|
||
async function load() {
|
||
loading.value = true;
|
||
error.value = '';
|
||
try {
|
||
const [connRes, callRes] = await Promise.all([
|
||
api.get<VoipConnectionDto[]>('/integrations/voip/connections'),
|
||
api.get<VoipCallLogDto[]>('/integrations/voip/calls'),
|
||
]);
|
||
items.value = connRes.data;
|
||
calls.value = callRes.data;
|
||
} catch (e) {
|
||
if (axios.isAxiosError(e) && e.response?.status === 403) {
|
||
error.value = 'ماژول تلفن سازمانی برای این محیط فعال نیست.';
|
||
} else {
|
||
error.value = 'بارگذاری ناموفق بود.';
|
||
}
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
async function create() {
|
||
if (!form.label.trim()) {
|
||
error.value = 'نام اتصال را وارد کنید.';
|
||
return;
|
||
}
|
||
saving.value = true;
|
||
error.value = '';
|
||
try {
|
||
const payload: CreateVoipConnectionRequest = {
|
||
label: form.label.trim(),
|
||
webhookSecret: form.webhookSecret.trim() || undefined,
|
||
clickToCallUrl: form.clickToCallUrl.trim() || null,
|
||
enabled: form.enabled,
|
||
};
|
||
await api.post('/integrations/voip/connections', payload);
|
||
form.webhookSecret = '';
|
||
ok.value = 'اتصال ذخیره شد.';
|
||
await load();
|
||
} catch (e) {
|
||
error.value = axios.isAxiosError(e)
|
||
? String((e.response?.data as { message?: string })?.message ?? 'ذخیره ناموفق بود.')
|
||
: 'ذخیره ناموفق بود.';
|
||
} finally {
|
||
saving.value = false;
|
||
}
|
||
}
|
||
|
||
async function remove(id: string) {
|
||
if (!confirm('این اتصال حذف شود؟')) return;
|
||
try {
|
||
await api.delete(`/integrations/voip/connections/${id}`);
|
||
await load();
|
||
} catch {
|
||
error.value = 'حذف ناموفق بود.';
|
||
}
|
||
}
|
||
|
||
async function copyWebhook() {
|
||
if (!webhookUrl.value) return;
|
||
try {
|
||
await navigator.clipboard.writeText(webhookUrl.value);
|
||
ok.value = 'آدرس وب‌هوک کپی شد.';
|
||
} catch {
|
||
error.value = 'کپی ممکن نشد.';
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
void load();
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page">
|
||
<UiPageHeader
|
||
title="تلفن سازمانی"
|
||
description="ثبت خودکار تماس، خلاصه گفتگو و اعلان تماس ورودی"
|
||
>
|
||
<template #actions>
|
||
<UiButton variant="secondary" :disabled="loading" @click="load">
|
||
<UiIcon name="refresh" />
|
||
بروزرسانی
|
||
</UiButton>
|
||
</template>
|
||
</UiPageHeader>
|
||
|
||
<p v-if="error" class="error">{{ error }}</p>
|
||
<p v-if="ok" class="ok">{{ ok }}</p>
|
||
|
||
<UiCard title="اتصال جدید">
|
||
<p class="hint">
|
||
سانترال یا سرویس VoIP شما باید رویداد تماس را با JSON به آدرس وب‌هوک بفرستد.
|
||
فیلدهای اصلی:
|
||
<code>callId</code>،
|
||
<code>direction</code> (inbound/outbound)،
|
||
<code>status</code>،
|
||
<code>from</code>،
|
||
<code>to</code>.
|
||
برای خلاصه خودکار یکی از
|
||
<code>recordingUrl</code>
|
||
(لینک فایل ضبط) یا
|
||
<code>transcript</code>
|
||
(متن آماده) را بفرستید؛ پس از
|
||
<code>completed</code>
|
||
/
|
||
<code>answered</code>
|
||
صف خلاصه ساخته می‌شود.
|
||
امضا اختیاری با هدر
|
||
<code>X-Voip-Signature</code>
|
||
(HMAC-SHA256 هگز).
|
||
</p>
|
||
<div class="form-grid">
|
||
<UiField label="نام">
|
||
<UiInput v-model="form.label" placeholder="سانترال اصلی" />
|
||
</UiField>
|
||
<UiField label="رمز وب‌هوک (اختیاری)">
|
||
<UiInput v-model="form.webhookSecret" placeholder="برای تأیید امضا" />
|
||
</UiField>
|
||
<UiField label="آدرس Click-to-Call (اختیاری)">
|
||
<UiInput
|
||
v-model="form.clickToCallUrl"
|
||
placeholder="https://pbx.example/originate?num={number}"
|
||
/>
|
||
</UiField>
|
||
</div>
|
||
<UiButton :loading="saving" @click="create">ذخیره اتصال</UiButton>
|
||
</UiCard>
|
||
|
||
<UiCard title="اتصال‌ها">
|
||
<UiEmptyState
|
||
v-if="!loading && !items.length"
|
||
title="اتصالی نیست"
|
||
description="یک اتصال برای دریافت رویداد تماس بسازید."
|
||
/>
|
||
<div v-else class="list">
|
||
<article v-for="c in items" :key="c.id" class="item">
|
||
<div>
|
||
<strong>{{ c.label }}</strong>
|
||
<p class="muted">
|
||
تماس‌های ثبت‌شده {{ toFaDigits(c.callCount) }}
|
||
·
|
||
{{
|
||
c.lastEventAt
|
||
? `آخرین رویداد ${formatJalaliNumeric(new Date(c.lastEventAt))}`
|
||
: 'هنوز رویدادی نیامده'
|
||
}}
|
||
</p>
|
||
<p v-if="c.clickToCallUrl" class="muted">Click-to-Call فعال</p>
|
||
<p v-if="c.lastError" class="warn">{{ c.lastError }}</p>
|
||
</div>
|
||
<UiButton variant="secondary" @click="remove(c.id)">حذف</UiButton>
|
||
</article>
|
||
</div>
|
||
<div v-if="webhookUrl" class="webhook">
|
||
<p class="hint">آدرس وب‌هوک:</p>
|
||
<code>{{ webhookUrl }}</code>
|
||
<UiButton variant="secondary" @click="copyWebhook">کپی</UiButton>
|
||
</div>
|
||
</UiCard>
|
||
|
||
<UiCard title="آخرین تماس‌ها">
|
||
<UiEmptyState
|
||
v-if="!calls.length"
|
||
title="تماسی نیست"
|
||
description="پس از ارسال رویداد از سانترال اینجا دیده می‌شوند."
|
||
/>
|
||
<div v-else class="table-wrap">
|
||
<div class="tc-row">
|
||
<TableColumnsMenu table-key="voip.calls" align="end" />
|
||
</div>
|
||
<table v-table-cols="'voip.calls'">
|
||
<thead>
|
||
<tr>
|
||
<th>جهت</th>
|
||
<th>وضعیت</th>
|
||
<th>از / به</th>
|
||
<th>مشتری</th>
|
||
<th>مدت</th>
|
||
<th>خلاصه</th>
|
||
<th>زمان</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="c in calls" :key="c.id">
|
||
<td>{{ c.direction === 'outbound' ? 'خروجی' : 'ورودی' }}</td>
|
||
<td>{{ statusLabel[c.status] ?? c.status }}</td>
|
||
<td>{{ c.fromNumber || '—' }} → {{ c.toNumber || '—' }}</td>
|
||
<td>{{ c.personName || '—' }}</td>
|
||
<td>
|
||
{{
|
||
c.durationSec != null
|
||
? `${toFaDigits(c.durationSec)} ثانیه`
|
||
: '—'
|
||
}}
|
||
</td>
|
||
<td class="summary-cell">
|
||
<span
|
||
class="summary-badge"
|
||
:data-status="c.summaryStatus || 'none'"
|
||
>
|
||
{{ summaryLabel[c.summaryStatus] ?? c.summaryStatus ?? '—' }}
|
||
</span>
|
||
<p v-if="c.summary" class="summary-preview">
|
||
{{ c.summary.slice(0, 120) }}{{ c.summary.length > 120 ? '…' : '' }}
|
||
</p>
|
||
<p v-if="c.summaryError && c.summaryStatus === 'failed'" class="warn">
|
||
{{ c.summaryError }}
|
||
</p>
|
||
<RouterLink
|
||
v-if="noteLink(c)"
|
||
class="note-link"
|
||
:to="noteLink(c)!"
|
||
>
|
||
مشاهده در پرونده
|
||
</RouterLink>
|
||
</td>
|
||
<td>{{ formatJalaliNumeric(new Date(c.startedAt)) }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</UiCard>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page {
|
||
display: grid;
|
||
gap: 1rem;
|
||
}
|
||
.hint,
|
||
.muted {
|
||
color: #64748b;
|
||
font-size: 0.88rem;
|
||
line-height: 1.7;
|
||
}
|
||
.hint code {
|
||
background: #f1f5f9;
|
||
padding: 0.1rem 0.35rem;
|
||
border-radius: 6px;
|
||
font-size: 0.8rem;
|
||
}
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0.75rem;
|
||
margin: 0.75rem 0 1rem;
|
||
}
|
||
.list {
|
||
display: grid;
|
||
gap: 0.75rem;
|
||
}
|
||
.item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 0.75rem;
|
||
padding: 0.85rem;
|
||
border: 1px solid #eef2f7;
|
||
border-radius: var(--radius);
|
||
}
|
||
.webhook {
|
||
margin-top: 1rem;
|
||
padding: 0.75rem;
|
||
background: #f8fafc;
|
||
border-radius: var(--radius);
|
||
display: grid;
|
||
gap: 0.5rem;
|
||
}
|
||
.webhook code {
|
||
word-break: break-all;
|
||
font-size: 0.85rem;
|
||
}
|
||
.warn {
|
||
color: #b45309;
|
||
font-size: 0.85rem;
|
||
}
|
||
.error {
|
||
color: #b91c1c;
|
||
font-weight: 600;
|
||
}
|
||
.ok {
|
||
color: #0f766e;
|
||
font-weight: 600;
|
||
}
|
||
.table-wrap {
|
||
overflow: auto;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.9rem;
|
||
}
|
||
th,
|
||
td {
|
||
text-align: right;
|
||
padding: 0.55rem;
|
||
border-bottom: 1px solid #eef2f7;
|
||
vertical-align: top;
|
||
}
|
||
th {
|
||
color: #64748b;
|
||
font-size: 0.8rem;
|
||
}
|
||
.summary-cell {
|
||
max-width: 16rem;
|
||
}
|
||
.summary-badge {
|
||
display: inline-block;
|
||
font-size: 0.78rem;
|
||
padding: 0.15rem 0.45rem;
|
||
border-radius: 6px;
|
||
background: #f1f5f9;
|
||
color: #475569;
|
||
}
|
||
.summary-badge[data-status='done'] {
|
||
background: #ecfdf5;
|
||
color: #047857;
|
||
}
|
||
.summary-badge[data-status='pending'],
|
||
.summary-badge[data-status='processing'] {
|
||
background: #eff6ff;
|
||
color: #1d4ed8;
|
||
}
|
||
.summary-badge[data-status='failed'] {
|
||
background: #fef2f2;
|
||
color: #b91c1c;
|
||
}
|
||
.summary-preview {
|
||
margin: 0.35rem 0 0;
|
||
font-size: 0.82rem;
|
||
color: #334155;
|
||
line-height: 1.5;
|
||
}
|
||
.note-link {
|
||
display: inline-block;
|
||
margin-top: 0.35rem;
|
||
font-size: 0.8rem;
|
||
color: #0f766e;
|
||
}
|
||
@media (max-width: 800px) {
|
||
.form-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|