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,325 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import type {
|
||||
CreateFaqArticleRequest,
|
||||
FaqArticleDto,
|
||||
UpdateFaqArticleRequest,
|
||||
} from '@mento/shared';
|
||||
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const error = ref('');
|
||||
const ok = ref('');
|
||||
const items = ref<FaqArticleDto[]>([]);
|
||||
|
||||
const editingId = ref<string | null>(null);
|
||||
const question = ref('');
|
||||
const answer = ref('');
|
||||
const category = ref('');
|
||||
const isPublished = ref(true);
|
||||
const position = ref(0);
|
||||
|
||||
function resetForm() {
|
||||
editingId.value = null;
|
||||
question.value = '';
|
||||
answer.value = '';
|
||||
category.value = '';
|
||||
isPublished.value = true;
|
||||
position.value = 0;
|
||||
}
|
||||
|
||||
function startEdit(row: FaqArticleDto) {
|
||||
editingId.value = row.id;
|
||||
question.value = row.question;
|
||||
answer.value = row.answer;
|
||||
category.value = row.category ?? '';
|
||||
isPublished.value = row.isPublished;
|
||||
position.value = row.position;
|
||||
ok.value = '';
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await api.get<FaqArticleDto[]>('/faq', {
|
||||
params: { publishedOnly: false },
|
||||
});
|
||||
items.value = data;
|
||||
} catch (e) {
|
||||
if (axios.isAxiosError(e) && !e.response) {
|
||||
error.value = 'اتصال به API برقرار نشد.';
|
||||
} else {
|
||||
error.value = 'بارگذاری FAQ ناموفق بود.';
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!question.value.trim() || !answer.value.trim()) {
|
||||
error.value = 'سؤال و پاسخ را وارد کنید.';
|
||||
return;
|
||||
}
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
ok.value = '';
|
||||
try {
|
||||
if (editingId.value) {
|
||||
const body: UpdateFaqArticleRequest = {
|
||||
question: question.value.trim(),
|
||||
answer: answer.value.trim(),
|
||||
category: category.value.trim() || null,
|
||||
isPublished: isPublished.value,
|
||||
position: position.value,
|
||||
};
|
||||
await api.patch(`/faq/${editingId.value}`, body);
|
||||
ok.value = 'مقاله به‌روز شد.';
|
||||
} else {
|
||||
const body: CreateFaqArticleRequest = {
|
||||
question: question.value.trim(),
|
||||
answer: answer.value.trim(),
|
||||
category: category.value.trim() || undefined,
|
||||
isPublished: isPublished.value,
|
||||
position: position.value,
|
||||
};
|
||||
await api.post('/faq', body);
|
||||
ok.value = 'مقاله اضافه شد.';
|
||||
}
|
||||
resetForm();
|
||||
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 remove(row: FaqArticleDto) {
|
||||
if (!confirm(`حذف «${row.question}»؟`)) return;
|
||||
await api.delete(`/faq/${row.id}`);
|
||||
if (editingId.value === row.id) resetForm();
|
||||
await load();
|
||||
}
|
||||
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="page-head">
|
||||
<div>
|
||||
<p class="eyebrow">تنظیمات</p>
|
||||
<h1>پایگاه دانش (FAQ)</h1>
|
||||
<p class="lead">سؤالات پرتکرار برای کاهش تیکت تکراری.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-if="ok" class="ok">{{ ok }}</p>
|
||||
<p v-if="loading" class="muted">در حال بارگذاری…</p>
|
||||
|
||||
<form class="form" @submit.prevent="save">
|
||||
<h2>{{ editingId ? 'ویرایش مقاله' : 'مقاله جدید' }}</h2>
|
||||
<div class="field">
|
||||
<label>سؤال</label>
|
||||
<input v-model="question" required maxlength="500" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>پاسخ</label>
|
||||
<textarea v-model="answer" rows="4" required />
|
||||
</div>
|
||||
<div class="row-fields">
|
||||
<div class="field">
|
||||
<label>دسته</label>
|
||||
<input v-model="category" maxlength="100" placeholder="مثلاً نصب" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>ترتیب</label>
|
||||
<input v-model.number="position" type="number" min="0" />
|
||||
</div>
|
||||
<label class="check">
|
||||
<input v-model="isPublished" type="checkbox" />
|
||||
منتشرشده
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="btn" type="submit" :disabled="saving">
|
||||
{{ saving ? '…' : editingId ? 'ذخیره تغییرات' : 'افزودن' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="editingId"
|
||||
class="btn btn-ghost"
|
||||
type="button"
|
||||
@click="resetForm"
|
||||
>
|
||||
انصراف
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="list">
|
||||
<article v-for="row in items" :key="row.id" class="card">
|
||||
<header>
|
||||
<strong>{{ row.question }}</strong>
|
||||
<span v-if="!row.isPublished" class="tag muted-tag">پیش‌نویس</span>
|
||||
<span v-if="row.category" class="tag">{{ row.category }}</span>
|
||||
</header>
|
||||
<p>{{ row.answer }}</p>
|
||||
<div class="card-actions">
|
||||
<button class="btn btn-ghost" type="button" @click="startEdit(row)">
|
||||
ویرایش
|
||||
</button>
|
||||
<button class="btn btn-danger" type="button" @click="remove(row)">
|
||||
حذف
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
<p v-if="!loading && !items.length" class="empty">هنوز مقاله‌ای نیست.</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1.1rem;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.lead,
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.form,
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.form {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.row-fields {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.row-fields .field {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.7rem 0.85rem;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: inherit;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-actions,
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.9rem 1rem;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.card header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0 0 0.65rem;
|
||||
white-space: pre-wrap;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 0.75rem;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.muted-tag {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
.ok {
|
||||
color: #027a48;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 1rem;
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: var(--radius);
|
||||
color: var(--muted);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user