Add org-scoped reusable SMS templates in the compose modal.
Users can save, pick, and delete prepared messages shared across the organization. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -1,8 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import axios from 'axios';
|
||||
import type { OutboundSmsHistoryResponse, OutboundSmsLogDto } from '@mento/shared';
|
||||
import { MESSAGE_AUTOMATION_FIELDS, countSmsParts } from '@mento/shared';
|
||||
import type {
|
||||
OutboundSmsHistoryResponse,
|
||||
OutboundSmsLogDto,
|
||||
SmsTemplateDto,
|
||||
} from '@mento/shared';
|
||||
import {
|
||||
MESSAGE_AUTOMATION_FIELDS,
|
||||
SMS_TEMPLATE_MAX,
|
||||
SMS_TEMPLATE_NAME_MAX,
|
||||
countSmsParts,
|
||||
} from '@mento/shared';
|
||||
import { api } from '@/lib/api';
|
||||
import { formatJalaliDay, formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
|
||||
import { UiButton, UiModal } from '@/components/ui';
|
||||
@@ -40,13 +49,25 @@ const busy = ref(false);
|
||||
const error = ref('');
|
||||
const done = ref('');
|
||||
const fieldsOpen = ref(false);
|
||||
const templatesOpen = ref(false);
|
||||
const savingTemplate = ref(false);
|
||||
const templateName = ref('');
|
||||
const bodyEl = ref<HTMLTextAreaElement | null>(null);
|
||||
const history = ref<OutboundSmsLogDto[]>([]);
|
||||
const historyLoading = ref(false);
|
||||
const templates = ref<SmsTemplateDto[]>([]);
|
||||
const templatesLoading = ref(false);
|
||||
|
||||
const preview = computed(() => fill(text.value));
|
||||
const count = computed(() => text.value.length);
|
||||
const parts = computed(() => countSmsParts(text.value));
|
||||
const canSaveTemplate = computed(
|
||||
() =>
|
||||
text.value.trim().length >= 2 &&
|
||||
templateName.value.trim().length >= 1 &&
|
||||
templates.value.length < SMS_TEMPLATE_MAX &&
|
||||
!savingTemplate.value,
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
@@ -56,8 +77,11 @@ watch(
|
||||
error.value = '';
|
||||
done.value = '';
|
||||
fieldsOpen.value = false;
|
||||
templatesOpen.value = false;
|
||||
templateName.value = '';
|
||||
busy.value = false;
|
||||
void loadHistory();
|
||||
void loadTemplates();
|
||||
},
|
||||
);
|
||||
|
||||
@@ -77,6 +101,18 @@ async function loadHistory() {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTemplates() {
|
||||
templatesLoading.value = true;
|
||||
try {
|
||||
const { data } = await api.get<SmsTemplateDto[]>('/sms-templates');
|
||||
templates.value = Array.isArray(data) ? data : [];
|
||||
} catch {
|
||||
templates.value = [];
|
||||
} finally {
|
||||
templatesLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function fill(source: string) {
|
||||
const map: Record<string, string> = {
|
||||
نام: props.name,
|
||||
@@ -114,6 +150,53 @@ function insertField(token: string) {
|
||||
fieldsOpen.value = false;
|
||||
}
|
||||
|
||||
function toggleFields() {
|
||||
fieldsOpen.value = !fieldsOpen.value;
|
||||
if (fieldsOpen.value) templatesOpen.value = false;
|
||||
}
|
||||
|
||||
function toggleTemplates() {
|
||||
templatesOpen.value = !templatesOpen.value;
|
||||
if (templatesOpen.value) {
|
||||
fieldsOpen.value = false;
|
||||
void loadTemplates();
|
||||
}
|
||||
}
|
||||
|
||||
function applyTemplate(item: SmsTemplateDto) {
|
||||
text.value = item.body;
|
||||
templatesOpen.value = false;
|
||||
error.value = '';
|
||||
}
|
||||
|
||||
async function saveTemplate() {
|
||||
const name = templateName.value.trim().slice(0, SMS_TEMPLATE_NAME_MAX);
|
||||
const body = text.value.trim();
|
||||
if (!canSaveTemplate.value || !name || body.length < 2) return;
|
||||
savingTemplate.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await api.post<SmsTemplateDto[]>('/sms-templates', { name, body });
|
||||
templates.value = Array.isArray(data) ? data : [];
|
||||
templateName.value = '';
|
||||
} catch (e) {
|
||||
error.value = apiMessage(e, 'ذخیره پیامک آماده ناموفق بود.');
|
||||
} finally {
|
||||
savingTemplate.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeTemplate(item: SmsTemplateDto) {
|
||||
if (!confirm(`پیامک آماده «${item.name}» حذف شود؟`)) return;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await api.delete<SmsTemplateDto[]>(`/sms-templates/${item.id}`);
|
||||
templates.value = Array.isArray(data) ? data : [];
|
||||
} catch (e) {
|
||||
error.value = apiMessage(e, 'حذف پیامک آماده ناموفق بود.');
|
||||
}
|
||||
}
|
||||
|
||||
function apiMessage(e: unknown, fallback: string) {
|
||||
if (!axios.isAxiosError(e)) return fallback;
|
||||
const msg = (e.response?.data as { message?: string | string[] })?.message;
|
||||
@@ -162,7 +245,19 @@ function statusLabel(status: OutboundSmsLogDto['status']) {
|
||||
</p>
|
||||
|
||||
<div class="tools">
|
||||
<button type="button" class="pill" @click="fieldsOpen = !fieldsOpen">فیلدهای پویا</button>
|
||||
<div class="tool-row">
|
||||
<button type="button" class="pill" :class="{ on: fieldsOpen }" @click="toggleFields">
|
||||
فیلدهای پویا
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="pill"
|
||||
:class="{ on: templatesOpen }"
|
||||
@click="toggleTemplates"
|
||||
>
|
||||
پیامکهای آماده
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="fieldsOpen" class="fields">
|
||||
<button
|
||||
v-for="item in MESSAGE_AUTOMATION_FIELDS"
|
||||
@@ -174,6 +269,43 @@ function statusLabel(status: OutboundSmsLogDto['status']) {
|
||||
<span>{{ item.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="templatesOpen" class="templates">
|
||||
<p v-if="templatesLoading" class="muted">در حال بارگذاری…</p>
|
||||
<p v-else-if="!templates.length" class="muted empty">
|
||||
هنوز پیامک آمادهای نیست. متن را بنویسید و ذخیره کنید.
|
||||
</p>
|
||||
<ul v-else class="template-list">
|
||||
<li v-for="item in templates" :key="item.id">
|
||||
<button type="button" class="pick" @click="applyTemplate(item)">
|
||||
<strong>{{ item.name }}</strong>
|
||||
<span>{{ item.body }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="del"
|
||||
:aria-label="`حذف ${item.name}`"
|
||||
@click="removeTemplate(item)"
|
||||
>
|
||||
حذف
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="save-row" @submit.prevent="saveTemplate">
|
||||
<input
|
||||
v-model="templateName"
|
||||
type="text"
|
||||
:maxlength="SMS_TEMPLATE_NAME_MAX"
|
||||
placeholder="نام پیامک آماده"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<button type="submit" :disabled="!canSaveTemplate">
|
||||
{{ savingTemplate ? '…' : 'ذخیره متن فعلی' }}
|
||||
</button>
|
||||
</form>
|
||||
<p v-if="templates.length >= SMS_TEMPLATE_MAX" class="muted">
|
||||
سقف {{ toFaDigits(SMS_TEMPLATE_MAX) }} قالب پر شده است.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea ref="bodyEl" v-model="text" rows="4" maxlength="500" placeholder="سلام {نام} عزیز" />
|
||||
@@ -248,6 +380,12 @@ function statusLabel(status: OutboundSmsLogDto['status']) {
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.tool-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.pill,
|
||||
.fields button {
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 28%, #fff);
|
||||
@@ -263,7 +401,14 @@ function statusLabel(status: OutboundSmsLogDto['status']) {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.fields {
|
||||
.pill.on {
|
||||
background: var(--accent-deep);
|
||||
color: #fff;
|
||||
border-color: var(--accent-deep);
|
||||
}
|
||||
|
||||
.fields,
|
||||
.templates {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: calc(100% + 0.3rem);
|
||||
@@ -293,6 +438,97 @@ function statusLabel(status: OutboundSmsLogDto['status']) {
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
|
||||
.template-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
max-height: 11rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.template-list li {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.template-list .pick {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
padding: 0.4rem 0.5rem;
|
||||
background: #f8fafc;
|
||||
text-align: start;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.template-list .pick:hover {
|
||||
background: #f0fdfa;
|
||||
}
|
||||
|
||||
.template-list .pick strong {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.template-list .pick span {
|
||||
color: #64748b;
|
||||
font-size: 0.74rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.template-list .del {
|
||||
flex: none;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #b91c1c;
|
||||
font: inherit;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
padding: 0.35rem 0.45rem;
|
||||
}
|
||||
|
||||
.save-row {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.save-row input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
padding: 0.4rem 0.55rem;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.save-row button {
|
||||
flex: none;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: #0f766e;
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-size: 0.78rem;
|
||||
padding: 0.4rem 0.65rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.save-row button:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
Reference in New Issue
Block a user