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,279 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import type {
|
||||
ActivityDto,
|
||||
ActivityType,
|
||||
CreateActivityRequest,
|
||||
DealDto,
|
||||
PaginatedResponse,
|
||||
PersonDto,
|
||||
PipelineBoardDto,
|
||||
} from '@mento/shared';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const id = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
|
||||
const isNew = computed(() => route.name === 'activity-new');
|
||||
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const error = ref('');
|
||||
const people = ref<PersonDto[]>([]);
|
||||
const deals = ref<DealDto[]>([]);
|
||||
|
||||
const title = ref('');
|
||||
const type = ref<ActivityType>('task');
|
||||
const description = ref('');
|
||||
const dueAt = ref('');
|
||||
const personId = ref('');
|
||||
const dealId = ref('');
|
||||
|
||||
const typeOptions: Array<{ value: ActivityType; label: string }> = [
|
||||
{ value: 'call', label: 'تماس' },
|
||||
{ value: 'meeting', label: 'جلسه' },
|
||||
{ value: 'task', label: 'وظیفه' },
|
||||
{ value: 'note', label: 'یادداشت' },
|
||||
];
|
||||
|
||||
function toLocalInput(iso: string | null) {
|
||||
if (!iso) return '';
|
||||
const d = new Date(iso);
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const [peopleRes, boardRes] = await Promise.all([
|
||||
api.get<PaginatedResponse<PersonDto>>('/people', { params: { limit: 100 } }),
|
||||
api.get<PipelineBoardDto>('/pipelines/board'),
|
||||
]);
|
||||
people.value = peopleRes.data.items;
|
||||
deals.value = boardRes.data.stages.flatMap((s) => s.deals);
|
||||
|
||||
if (!isNew.value && id.value) {
|
||||
const { data } = await api.get<ActivityDto>(`/activities/${id.value}`);
|
||||
title.value = data.title;
|
||||
type.value = data.type;
|
||||
description.value = data.description ?? '';
|
||||
dueAt.value = toLocalInput(data.dueAt);
|
||||
personId.value = data.person?.id ?? '';
|
||||
dealId.value = data.deal?.id ?? '';
|
||||
} else if (typeof route.query.dueAt === 'string' && route.query.dueAt) {
|
||||
dueAt.value = toLocalInput(new Date(route.query.dueAt).toISOString());
|
||||
} else {
|
||||
const tomorrow = new Date();
|
||||
tomorrow.setHours(10, 0, 0, 0);
|
||||
dueAt.value = toLocalInput(tomorrow.toISOString());
|
||||
}
|
||||
} catch {
|
||||
error.value = 'بارگذاری فرم فعالیت ناموفق بود.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function payload(): CreateActivityRequest {
|
||||
return {
|
||||
title: title.value,
|
||||
type: type.value,
|
||||
description: description.value || undefined,
|
||||
dueAt: dueAt.value ? new Date(dueAt.value).toISOString() : null,
|
||||
personId: personId.value || null,
|
||||
dealId: dealId.value || null,
|
||||
};
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
if (isNew.value) {
|
||||
const { data } = await api.post<ActivityDto>('/activities', payload());
|
||||
await router.replace({ name: 'activity-detail', params: { id: data.id } });
|
||||
} else {
|
||||
await api.patch(`/activities/${id.value}`, payload());
|
||||
await router.push({ name: 'activities' });
|
||||
}
|
||||
} catch (e) {
|
||||
if (axios.isAxiosError(e)) {
|
||||
if (!e.response) {
|
||||
error.value = 'اتصال به سرور برقرار نشد.';
|
||||
} else {
|
||||
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 complete() {
|
||||
if (!id.value) return;
|
||||
try {
|
||||
await api.patch(`/activities/${id.value}/complete`);
|
||||
await router.push({ name: 'activities' });
|
||||
} catch {
|
||||
error.value = 'ثبت انجام‌شدن ناموفق بود';
|
||||
}
|
||||
}
|
||||
|
||||
async function remove() {
|
||||
if (!id.value || !confirm('این فعالیت حذف شود؟')) return;
|
||||
try {
|
||||
await api.delete(`/activities/${id.value}`);
|
||||
await router.push({ name: 'activities' });
|
||||
} catch {
|
||||
error.value = 'حذف ناموفق بود';
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="page-head">
|
||||
<div>
|
||||
<p class="eyebrow">فعالیت</p>
|
||||
<h1>{{ isNew ? 'فعالیت جدید' : 'ویرایش فعالیت' }}</h1>
|
||||
</div>
|
||||
<RouterLink class="btn btn-ghost" :to="{ name: 'activities' }">بازگشت</RouterLink>
|
||||
</header>
|
||||
|
||||
<p v-if="loading" class="muted">در حال بارگذاری…</p>
|
||||
<form v-else class="form-card" @submit.prevent="submit">
|
||||
<div class="grid">
|
||||
<div class="field wide">
|
||||
<label for="title">عنوان</label>
|
||||
<input id="title" v-model="title" required minlength="2" placeholder="مثلاً تماس پیگیری پیشنهاد" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="type">نوع</label>
|
||||
<select id="type" v-model="type">
|
||||
<option v-for="opt in typeOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="dueAt">موعد</label>
|
||||
<input id="dueAt" v-model="dueAt" type="datetime-local" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="personId">شخص مرتبط</label>
|
||||
<select id="personId" v-model="personId">
|
||||
<option value="">بدون شخص</option>
|
||||
<option v-for="p in people" :key="p.id" :value="p.id">{{ p.fullName }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="dealId">معامله مرتبط</label>
|
||||
<select id="dealId" v-model="dealId">
|
||||
<option value="">بدون معامله</option>
|
||||
<option v-for="d in deals" :key="d.id" :value="d.id">{{ d.title }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field wide">
|
||||
<label for="description">توضیح</label>
|
||||
<textarea id="description" v-model="description" rows="4" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<div class="form-actions">
|
||||
<button class="btn" type="submit" :disabled="saving">
|
||||
{{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="!isNew"
|
||||
class="btn btn-ghost"
|
||||
type="button"
|
||||
:disabled="saving"
|
||||
@click="complete"
|
||||
>
|
||||
انجام شد
|
||||
</button>
|
||||
<button
|
||||
v-if="!isNew"
|
||||
class="btn btn-danger"
|
||||
type="button"
|
||||
:disabled="saving"
|
||||
@click="remove"
|
||||
>
|
||||
حذف
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1.1rem;
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.2rem 0 0;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 1.2rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user