Add public API keys, outbound webhooks, and bulk SMS campaigns with settings UI and org modules.
This commit is contained in:
@@ -0,0 +1,350 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import type {
|
||||
PaginatedResponse,
|
||||
PersonDto,
|
||||
SmsCampaignDto,
|
||||
SmsCampaignListResponse,
|
||||
} from '@mento/shared';
|
||||
import {
|
||||
UiButton,
|
||||
UiCard,
|
||||
UiEmptyState,
|
||||
UiField,
|
||||
UiInput,
|
||||
UiPageHeader,
|
||||
UiTextarea,
|
||||
} 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 campaigns = ref<SmsCampaignDto[]>([]);
|
||||
const people = ref<PersonDto[]>([]);
|
||||
const selectedIds = ref<string[]>([]);
|
||||
const name = ref('');
|
||||
const body = ref('');
|
||||
const queueNow = ref(true);
|
||||
const peopleQ = ref('');
|
||||
|
||||
const filteredPeople = computed(() => {
|
||||
const q = peopleQ.value.trim();
|
||||
if (!q) return people.value.slice(0, 80);
|
||||
return people.value
|
||||
.filter((p) => {
|
||||
const hay = `${p.fullName} ${p.mobile ?? ''} ${p.email ?? ''}`.toLowerCase();
|
||||
return hay.includes(q.toLowerCase());
|
||||
})
|
||||
.slice(0, 80);
|
||||
});
|
||||
|
||||
const statusLabel: Record<string, string> = {
|
||||
draft: 'پیش‌نویس',
|
||||
queued: 'در صف',
|
||||
sending: 'در حال ارسال',
|
||||
done: 'تمام‌شده',
|
||||
cancelled: 'لغو شده',
|
||||
};
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const [campRes, peopleRes] = await Promise.all([
|
||||
api.get<SmsCampaignListResponse>('/sms-campaigns'),
|
||||
api.get<PaginatedResponse<PersonDto>>('/people', {
|
||||
params: { page: 1, limit: 200 },
|
||||
}),
|
||||
]);
|
||||
campaigns.value = campRes.data.items;
|
||||
people.value = peopleRes.data.items;
|
||||
} catch (e) {
|
||||
if (axios.isAxiosError(e) && e.response?.status === 403) {
|
||||
error.value = 'ماژول پیامک گروهی برای این محیط فعال نیست.';
|
||||
} else {
|
||||
error.value = 'بارگذاری ناموفق بود.';
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function togglePerson(id: string) {
|
||||
if (selectedIds.value.includes(id)) {
|
||||
selectedIds.value = selectedIds.value.filter((x) => x !== id);
|
||||
} else {
|
||||
selectedIds.value = [...selectedIds.value, id];
|
||||
}
|
||||
}
|
||||
|
||||
function selectVisible() {
|
||||
const ids = filteredPeople.value.map((p) => p.id);
|
||||
selectedIds.value = [...new Set([...selectedIds.value, ...ids])];
|
||||
}
|
||||
|
||||
async function createCampaign() {
|
||||
if (!name.value.trim() || body.value.trim().length < 2) {
|
||||
error.value = 'نام و متن پیامک را کامل کنید.';
|
||||
return;
|
||||
}
|
||||
if (!selectedIds.value.length) {
|
||||
error.value = 'حداقل یک مخاطب انتخاب کنید.';
|
||||
return;
|
||||
}
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
ok.value = '';
|
||||
try {
|
||||
await api.post('/sms-campaigns', {
|
||||
name: name.value.trim(),
|
||||
body: body.value.trim(),
|
||||
personIds: selectedIds.value,
|
||||
queueNow: queueNow.value,
|
||||
});
|
||||
name.value = '';
|
||||
body.value = '';
|
||||
selectedIds.value = [];
|
||||
ok.value = queueNow.value
|
||||
? 'کمپین در صف ارسال قرار گرفت.'
|
||||
: 'کمپین به‌صورت پیش‌نویس ذخیره شد.';
|
||||
await load();
|
||||
} catch (e) {
|
||||
if (axios.isAxiosError(e)) {
|
||||
const msg = (e.response?.data as { message?: string | string[] })?.message;
|
||||
error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ساخت کمپین ناموفق بود.');
|
||||
} else {
|
||||
error.value = 'ساخت کمپین ناموفق بود.';
|
||||
}
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function queue(id: string) {
|
||||
try {
|
||||
await api.post(`/sms-campaigns/${id}/queue`);
|
||||
await load();
|
||||
} catch {
|
||||
error.value = 'صف‌بندی ناموفق بود.';
|
||||
}
|
||||
}
|
||||
|
||||
async function cancel(id: string) {
|
||||
try {
|
||||
await api.post(`/sms-campaigns/${id}/cancel`);
|
||||
await load();
|
||||
} 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="کمپین جدید">
|
||||
<div class="form-grid">
|
||||
<UiField label="نام کمپین">
|
||||
<UiInput v-model="name" placeholder="مثلاً اطلاع‌رسانی جشنواره" />
|
||||
</UiField>
|
||||
<label class="check">
|
||||
<input v-model="queueNow" type="checkbox" />
|
||||
ارسال فوری پس از ذخیره
|
||||
</label>
|
||||
</div>
|
||||
<UiField label="متن پیامک">
|
||||
<UiTextarea
|
||||
v-model="body"
|
||||
:rows="4"
|
||||
placeholder="متن پیامک را بنویسید…"
|
||||
/>
|
||||
</UiField>
|
||||
|
||||
<div class="people-head">
|
||||
<UiField label="جستجوی مخاطب">
|
||||
<UiInput v-model="peopleQ" placeholder="نام یا موبایل…" />
|
||||
</UiField>
|
||||
<UiButton variant="secondary" @click="selectVisible">
|
||||
انتخاب نتایج
|
||||
</UiButton>
|
||||
</div>
|
||||
<p class="muted">
|
||||
انتخاب‌شده: {{ toFaDigits(selectedIds.length) }} نفر
|
||||
</p>
|
||||
<div class="people-list">
|
||||
<label v-for="p in filteredPeople" :key="p.id" class="person">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="selectedIds.includes(p.id)"
|
||||
@change="togglePerson(p.id)"
|
||||
/>
|
||||
<span>
|
||||
<strong>{{ p.fullName }}</strong>
|
||||
<small>{{ p.mobile || 'بدون موبایل' }}</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<UiButton :loading="saving" @click="createCampaign">ساخت کمپین</UiButton>
|
||||
</UiCard>
|
||||
|
||||
<UiCard title="کمپین‌ها">
|
||||
<UiEmptyState
|
||||
v-if="!loading && !campaigns.length"
|
||||
title="کمپینی نیست"
|
||||
description="اولین کمپین پیامک گروهی را بسازید."
|
||||
/>
|
||||
<div v-else class="campaigns">
|
||||
<article v-for="c in campaigns" :key="c.id" class="campaign">
|
||||
<div>
|
||||
<strong>{{ c.name }}</strong>
|
||||
<p class="muted">{{ c.body }}</p>
|
||||
<p class="meta">
|
||||
{{ statusLabel[c.status] ?? c.status }}
|
||||
· کل {{ toFaDigits(c.totalCount) }}
|
||||
· ارسال {{ toFaDigits(c.sentCount) }}
|
||||
· ناموفق {{ toFaDigits(c.failedCount) }}
|
||||
· ردشده {{ toFaDigits(c.skippedCount) }}
|
||||
· {{ formatJalaliNumeric(new Date(c.createdAt)) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<UiButton
|
||||
v-if="c.status === 'draft' || c.status === 'cancelled'"
|
||||
variant="secondary"
|
||||
@click="queue(c.id)"
|
||||
>
|
||||
صف ارسال
|
||||
</UiButton>
|
||||
<UiButton
|
||||
v-if="c.status === 'queued' || c.status === 'sending' || c.status === 'draft'"
|
||||
variant="secondary"
|
||||
@click="cancel(c.id)"
|
||||
>
|
||||
لغو
|
||||
</UiButton>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</UiCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.75rem;
|
||||
align-items: end;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
min-height: var(--control-h);
|
||||
}
|
||||
.people-head {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.75rem;
|
||||
align-items: end;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.people-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 0.45rem;
|
||||
max-height: 280px;
|
||||
overflow: auto;
|
||||
margin: 0.75rem 0 1rem;
|
||||
padding: 0.35rem;
|
||||
border: 1px solid #eef2f7;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.person {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
align-items: flex-start;
|
||||
padding: 0.45rem;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
}
|
||||
.person:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
.person span {
|
||||
display: grid;
|
||||
}
|
||||
.person small {
|
||||
color: #64748b;
|
||||
}
|
||||
.campaigns {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.campaign {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.85rem;
|
||||
border: 1px solid #eef2f7;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: start;
|
||||
}
|
||||
.muted,
|
||||
.meta {
|
||||
color: #64748b;
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.error {
|
||||
color: #b91c1c;
|
||||
font-weight: 600;
|
||||
}
|
||||
.ok {
|
||||
color: #0f766e;
|
||||
font-weight: 600;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.form-grid,
|
||||
.people-head,
|
||||
.campaign {
|
||||
grid-template-columns: 1fr;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user