CRM_Montzar/apps/web/src/views/LeadFormsSettingsView.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { RouterLink, useRouter } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import UiIcon from '@/components/UiIcon.vue';
import type { LeadFormDto } from '@mento/shared';
import { toFaDigits } from '@/lib/jalali';

const router = useRouter();
const loading = ref(false);
const saving = ref(false);
const error = ref('');
const forms = ref<LeadFormDto[]>([]);

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const { data } = await api.get<LeadFormDto[]>('/lead-forms');
    forms.value = data;
  } catch (e) {
    error.value = axios.isAxiosError(e) && !e.response
      ? 'اتصال به API برقرار نشد.'
      : 'بارگذاری فرم‌ها ناموفق بود.';
  } finally {
    loading.value = false;
  }
}

async function createForm() {
  saving.value = true;
  error.value = '';
  try {
    const { data } = await api.post<LeadFormDto>('/lead-forms', {
      name: 'درخواست مشاوره',
      description: 'فرم دریافت درخواست مشاوره مشتریان',
      source: 'وب‌سایت',
      createPerson: true,
      createDeal: true,
    });
    await router.push({ name: 'lead-form-builder', params: { id: data.id } });
  } catch {
    error.value = 'ساخت فرم ناموفق بود.';
  } finally {
    saving.value = false;
  }
}

async function removeForm(form: LeadFormDto) {
  if (!confirm(`فرم «${form.name}» حذف شود؟`)) return;
  await api.delete(`/lead-forms/${form.id}`);
  await load();
}

const countLabel = computed(() => toFaDigits(forms.value.length));

onMounted(load);
</script>

<template>
  <section class="page">
    <header class="page-head">
      <div>
        <h1>
          فرم‌ساز
          <UiIcon name="layers" :size="22" />
        </h1>
        <p class="lead">فرم وب بسازید، فیلدها را بچینید و پاسخ‌ها را در باشگاه مشتریان و کاریز ببینید.</p>
      </div>
      <button class="btn primary" type="button" :disabled="saving" @click="createForm">
        + فرم جدید
      </button>
    </header>
    <p v-if="error" class="err">{{ error }}</p>
    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
    <p v-else class="muted">{{ countLabel }} فرم</p>

    <div class="list">
      <article v-for="form in forms" :key="form.id" class="card">
        <div>
          <strong>{{ form.name }}</strong>
          <p>{{ form.isActive ? 'فعال' : 'غیرفعال' }} · {{ toFaDigits(form.fields.length) }} فیلد · {{ toFaDigits(form.submissionCount ?? 0) }} پاسخ</p>
        </div>
        <div class="ops">
          <RouterLink class="btn ghost" :to="{ name: 'lead-form-builder', params: { id: form.id } }">ویرایش</RouterLink>
          <a class="btn ghost" :href="form.publicPath" target="_blank" rel="noopener">پیش‌نمایش</a>
          <button class="link danger" type="button" @click="removeForm(form)">حذف</button>
        </div>
      </article>
      <p v-if="!loading && !forms.length" class="empty">هنوز فرمی نساخته‌اید.</p>
    </div>
  </section>
</template>

<style scoped>
.page { display: grid; gap: 1rem; }
.page-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
h1 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 800; display: inline-flex; gap: 0.4rem; align-items: center; }
h1 :deep(.ico) { color: #14b8a6; }
.lead, .muted { margin: 0.25rem 0 0; color: #64748b; }
.err { color: #b91c1c; }
.btn, .link { font: inherit; cursor: pointer; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0.5rem 0.95rem; border-radius: 12px; font-weight: 700; border: 1px solid transparent; text-decoration: none; }
.btn.primary { background: #14b8a6; color: #fff; }
.btn.ghost { background: #fff; color: #0f766e; border-color: #99f6e4; }
.link { background: none; border: 0; font-weight: 700; }
.danger { color: #b91c1c; }
.list { display: grid; gap: 0.75rem; }
.card { background: #fff; border-radius: 16px; padding: 1rem 1.05rem; box-shadow: 0 8px 22px rgba(15,23,42,.04); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.card p { margin: 0.25rem 0 0; color: #64748b; font-size: 0.88rem; }
.ops { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }
.empty { padding: 1rem; border: 1px dashed #e2e8f0; border-radius: 16px; color: #64748b; text-align: center; }
@media (max-width: 700px) {
  .page-head, .card, .ops { flex-direction: column; align-items: stretch; }
}
</style>