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

<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>