Initial Mento CRM: portal OTP, reports, SMS, and deploy for crm.montzar.ir.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,384 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import type {
|
||||
CreateLeadFormRequest,
|
||||
LeadFormDto,
|
||||
OrgUserDto,
|
||||
PipelineDto,
|
||||
} from '@mento/shared';
|
||||
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const error = ref('');
|
||||
const forms = ref<LeadFormDto[]>([]);
|
||||
const users = ref<OrgUserDto[]>([]);
|
||||
const pipelines = ref<PipelineDto[]>([]);
|
||||
|
||||
const name = ref('فرم تماس سایت');
|
||||
const source = ref('وب‌سایت');
|
||||
const pipelineId = ref('');
|
||||
const thankYouMessage = ref('پیام شما ثبت شد. به‌زودی با شما تماس می‌گیریم.');
|
||||
const assigneeIds = ref<string[]>([]);
|
||||
|
||||
const origin = computed(() => window.location.origin);
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const [formsRes, usersRes, pipesRes] = await Promise.all([
|
||||
api.get<LeadFormDto[]>('/lead-forms'),
|
||||
api.get<OrgUserDto[]>('/users'),
|
||||
api.get<PipelineDto[]>('/pipelines'),
|
||||
]);
|
||||
forms.value = formsRes.data;
|
||||
users.value = usersRes.data;
|
||||
pipelines.value = pipesRes.data;
|
||||
if (!pipelineId.value && pipesRes.data[0]) {
|
||||
pipelineId.value = pipesRes.data.find((p) => p.isDefault)?.id ?? pipesRes.data[0].id;
|
||||
}
|
||||
} catch (e) {
|
||||
if (axios.isAxiosError(e) && !e.response) {
|
||||
error.value = 'اتصال به API برقرار نشد.';
|
||||
} else {
|
||||
error.value = 'بارگذاری فرم‌ها ناموفق بود.';
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createForm() {
|
||||
if (!name.value.trim()) {
|
||||
error.value = 'نام فرم را وارد کنید.';
|
||||
return;
|
||||
}
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const payload: CreateLeadFormRequest = {
|
||||
name: name.value.trim(),
|
||||
source: source.value.trim() || 'فرم وب',
|
||||
pipelineId: pipelineId.value || null,
|
||||
thankYouMessage: thankYouMessage.value.trim() || null,
|
||||
assigneeIds: assigneeIds.value,
|
||||
createPerson: true,
|
||||
createDeal: true,
|
||||
};
|
||||
await api.post('/lead-forms', payload);
|
||||
name.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 toggleActive(form: LeadFormDto) {
|
||||
await api.patch(`/lead-forms/${form.id}`, { isActive: !form.isActive });
|
||||
await load();
|
||||
}
|
||||
|
||||
async function removeForm(form: LeadFormDto) {
|
||||
if (!confirm(`فرم «${form.name}» حذف شود؟`)) return;
|
||||
await api.delete(`/lead-forms/${form.id}`);
|
||||
await load();
|
||||
}
|
||||
|
||||
function publicUrl(form: LeadFormDto) {
|
||||
return `${origin.value}${form.publicPath}`;
|
||||
}
|
||||
|
||||
function iframeSnippet(form: LeadFormDto) {
|
||||
return `<iframe src="${publicUrl(form)}" width="100%" height="640" style="border:0;border-radius:12px" title="${form.name}"></iframe>`;
|
||||
}
|
||||
|
||||
function qrUrl(form: LeadFormDto) {
|
||||
return `https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=${encodeURIComponent(publicUrl(form))}`;
|
||||
}
|
||||
|
||||
async function copyText(text: string) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
}
|
||||
|
||||
function toggleAssignee(id: string) {
|
||||
if (assigneeIds.value.includes(id)) {
|
||||
assigneeIds.value = assigneeIds.value.filter((x) => x !== id);
|
||||
} else {
|
||||
assigneeIds.value = [...assigneeIds.value, id];
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header>
|
||||
<p class="eyebrow">تنظیمات</p>
|
||||
<h1>فرم‌ساز سرنخ</h1>
|
||||
<p class="lead">
|
||||
فرم وب بسازید، لینک یا iframe بگیرید؛ ارسال‌ها به‌صورت شخص و معامله در کاریز ثبت می‌شوند.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="loading" class="muted">در حال بارگذاری…</p>
|
||||
|
||||
<form class="create" @submit.prevent="createForm">
|
||||
<h2>فرم جدید</h2>
|
||||
<div class="grid">
|
||||
<label>
|
||||
نام فرم
|
||||
<input v-model="name" required maxlength="120" />
|
||||
</label>
|
||||
<label>
|
||||
منبع بازاریابی
|
||||
<input v-model="source" maxlength="80" placeholder="وب‌سایت / لندینگ" />
|
||||
</label>
|
||||
<label>
|
||||
کاریز مقصد
|
||||
<select v-model="pipelineId">
|
||||
<option v-for="p in pipelines" :key="p.id" :value="p.id">
|
||||
{{ p.name }}{{ p.isDefault ? ' (پیش‌فرض)' : '' }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="full">
|
||||
پیام تشکر
|
||||
<input v-model="thankYouMessage" maxlength="500" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="assignees">
|
||||
<p class="muted">توزیع نوبتی بین مسئولان (اختیاری)</p>
|
||||
<div class="chips">
|
||||
<button
|
||||
v-for="u in users"
|
||||
:key="u.id"
|
||||
type="button"
|
||||
class="chip"
|
||||
:class="{ on: assigneeIds.includes(u.id) }"
|
||||
@click="toggleAssignee(u.id)"
|
||||
>
|
||||
{{ u.fullName }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn" type="submit" :disabled="saving">
|
||||
{{ saving ? 'در حال ساخت…' : 'ساخت فرم با فیلدهای پیش‌فرض' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="list">
|
||||
<article v-for="form in forms" :key="form.id" class="card">
|
||||
<header class="card-head">
|
||||
<div>
|
||||
<strong>{{ form.name }}</strong>
|
||||
<p class="muted">
|
||||
{{ form.isActive ? 'فعال' : 'غیرفعال' }}
|
||||
· منبع: {{ form.source || '—' }}
|
||||
· {{ form.fields.length }} فیلد
|
||||
</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" @click="toggleActive(form)">
|
||||
{{ form.isActive ? 'غیرفعال' : 'فعال' }}
|
||||
</button>
|
||||
<button type="button" class="danger" @click="removeForm(form)">حذف</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="share">
|
||||
<label>
|
||||
لینک عمومی
|
||||
<div class="row">
|
||||
<input :value="publicUrl(form)" readonly />
|
||||
<button type="button" class="btn btn-ghost" @click="copyText(publicUrl(form))">کپی</button>
|
||||
<a class="btn btn-ghost" :href="form.publicPath" target="_blank" rel="noopener">بازکردن</a>
|
||||
</div>
|
||||
</label>
|
||||
<label>
|
||||
کد iframe
|
||||
<div class="row">
|
||||
<input :value="iframeSnippet(form)" readonly />
|
||||
<button type="button" class="btn btn-ghost" @click="copyText(iframeSnippet(form))">کپی</button>
|
||||
</div>
|
||||
</label>
|
||||
<div class="qr">
|
||||
<img :src="qrUrl(form)" :alt="`QR ${form.name}`" width="120" height="120" />
|
||||
<p class="muted">QR برای اشتراک‌گذاری سریع</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<p v-if="!loading && !forms.length" class="muted empty">هنوز فرمی نساخته‌اید.</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1.2rem;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
.lead,
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
.create,
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.create h2 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
label {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.7rem 0.85rem;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
color: var(--text, var(--ink));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.chip {
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.75rem;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chip.on {
|
||||
background: var(--accent-soft);
|
||||
border-color: transparent;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.card-head,
|
||||
.actions,
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 0.55rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-head p {
|
||||
margin: 0.25rem 0 0;
|
||||
}
|
||||
|
||||
.actions button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.actions .danger {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
.share {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.row input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.qr {
|
||||
display: flex;
|
||||
gap: 0.85rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.qr img {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 1rem;
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user