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

<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 { CompanyDto, CreatePersonRequest, PersonDto, PersonMood } from '@mento/shared';
import { PERSON_MOOD_LABELS, PERSON_MOODS } from '@/lib/person-mood';
import CustomFieldsSection from '@/components/CustomFieldsSection.vue';
import CustomerMoodFace from '@/components/CustomerMoodFace.vue';
import EntityTimeline from '@/components/EntityTimeline.vue';
import MentoMemoryPanel from '@/components/MentoMemoryPanel.vue';
import UiIcon from '@/components/UiIcon.vue';

const props = withDefaults(
  defineProps<{
    embedded?: boolean;
    entityId?: string;
  }>(),
  { embedded: false },
);
const emit = defineEmits<{ saved: []; cancel: [] }>();

const route = useRoute();
const router = useRouter();
const id = computed(() => {
  if (props.embedded) return props.entityId ?? '';
  return typeof route.params.id === 'string' ? route.params.id : '';
});
const isNew = computed(() => (props.embedded ? !props.entityId : route.name === 'person-new'));
const pageTitle = computed(() => (isNew.value ? 'شخص جدید' : 'ویرایش شخص'));

const loading = ref(false);
const saving = ref(false);
const error = ref('');
const companies = ref<CompanyDto[]>([]);

const firstName = ref('');
const lastName = ref('');
const email = ref('');
const phone = ref('');
const mobile = ref('');
const position = ref('');
const notes = ref('');
const companyId = ref('');
const mood = ref<PersonMood>('newcomer');
const customFields = ref<Record<string, unknown>>({});
const loyaltyPoints = ref(0);
const loyaltyTierName = ref('');

const backTo = computed(() =>
  isNew.value ? { name: 'contacts' as const } : { name: 'person-detail' as const, params: { id: id.value } },
);

function fill(p: PersonDto) {
  firstName.value = p.firstName;
  lastName.value = p.lastName;
  email.value = p.email ?? '';
  phone.value = p.phone ?? '';
  mobile.value = p.mobile ?? '';
  position.value = p.position ?? '';
  notes.value = p.notes ?? '';
  companyId.value = p.company?.id ?? '';
  mood.value = p.mood || 'newcomer';
  customFields.value = { ...(p.customFields ?? {}) };
  loyaltyPoints.value = p.loyaltyPoints ?? 0;
  loyaltyTierName.value = p.loyaltyTier?.name ?? '';
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const companiesRes = await api.get<{ items: CompanyDto[] }>('/companies', {
      params: { limit: 100 },
    });
    companies.value = companiesRes.data.items;
    if (!isNew.value && id.value) {
      const { data } = await api.get<PersonDto>(`/people/${id.value}`);
      fill(data);
    }
  } catch {
    error.value = 'بارگذاری فرم ناموفق بود.';
  } finally {
    loading.value = false;
  }
}

function payload(): CreatePersonRequest {
  return {
    firstName: firstName.value,
    lastName: lastName.value,
    email: email.value || undefined,
    phone: phone.value || undefined,
    mobile: mobile.value || undefined,
    position: position.value || undefined,
    notes: notes.value || undefined,
    companyId: companyId.value || null,
    mood: mood.value,
    customFields: customFields.value,
  };
}

async function submit() {
  saving.value = true;
  error.value = '';
  try {
    if (isNew.value) {
      const { data } = await api.post<PersonDto>('/people', payload());
      if (props.embedded) {
        emit('saved');
        return;
      }
      await router.replace({ name: 'person-detail', params: { id: data.id } });
    } else {
      await api.patch(`/people/${id.value}`, payload());
      if (props.embedded) {
        emit('saved');
        return;
      }
      await router.push({ name: 'person-detail', params: { id: id.value } });
    }
  } 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 remove() {
  if (!id.value || !confirm('این شخص حذف شود؟')) return;
  try {
    await api.delete(`/people/${id.value}`);
    await router.push({ name: 'contacts' });
  } catch {
    error.value = 'حذف ناموفق بود';
  }
}

function cancel() {
  if (props.embedded) {
    emit('cancel');
    return;
  }
  void router.push(backTo.value);
}

onMounted(load);
</script>

<template>
  <section class="page" :class="{ embedded }">
    <div v-if="embedded" class="embed-actions">
      <button class="btn primary" type="button" :disabled="saving" @click="submit">
        {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
      </button>
      <button class="btn cancel" type="button" :disabled="saving" @click="cancel">انصراف</button>
    </div>
    <header v-if="!embedded" class="desktop-head">
      <div class="title-block">
        <span class="doc-ico"><UiIcon name="user" :size="22" /></span>
        <div>
          <h1>{{ pageTitle }}</h1>
          <p class="crumb">
            <RouterLink :to="{ name: 'contacts' }">مخاطبین</RouterLink>
            <span>›</span>
            <strong>{{ pageTitle }}</strong>
          </p>
        </div>
      </div>
      <div class="desk-actions">
        <button class="btn primary" type="button" :disabled="saving" @click="submit">
          <UiIcon name="check-plain" :size="16" />
          {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
        </button>
        <button class="btn cancel" type="button" :disabled="saving" @click="cancel">انصراف</button>
        <button v-if="!isNew" class="btn danger" type="button" :disabled="saving" @click="remove">
          حذف
        </button>
      </div>
    </header>

    <header v-if="!embedded" class="mobile-head">
      <button class="icon-btn" type="button" aria-label="ذخیره" :disabled="saving" @click="submit">
        <UiIcon name="check-plain" :size="22" />
      </button>
      <h1>{{ pageTitle }}</h1>
      <button class="icon-btn" type="button" aria-label="بستن" @click="cancel">
        <UiIcon name="x" :size="20" />
      </button>
    </header>

    <p v-if="loading" class="muted">در حال بارگذاری…</p>
    <form v-else class="form" @submit.prevent="submit">
      <section class="card">
        <div class="grid">
          <div class="field">
            <label for="firstName">نام</label>
            <input id="firstName" v-model="firstName" required />
          </div>
          <div class="field">
            <label for="lastName">نام خانوادگی</label>
            <input id="lastName" v-model="lastName" required />
          </div>
          <div class="field">
            <label for="mobile">موبایل</label>
            <input id="mobile" v-model="mobile" inputmode="tel" />
          </div>
          <div class="field">
            <label for="phone">تلفن</label>
            <input id="phone" v-model="phone" inputmode="tel" />
          </div>
          <div class="field">
            <label for="email">ایمیل</label>
            <input id="email" v-model="email" type="email" />
          </div>
          <div class="field">
            <label for="position">سمت</label>
            <input id="position" v-model="position" />
          </div>
          <div class="field wide">
            <label>وضعیت مشتری</label>
            <div class="moods">
              <button
                v-for="item in PERSON_MOODS"
                :key="item"
                class="mood"
                type="button"
                :class="{ on: mood === item }"
                @click="mood = item"
              >
                <CustomerMoodFace :mood="item" :size="44" />
                <span>{{ PERSON_MOOD_LABELS[item] }}</span>
              </button>
            </div>
          </div>
          <div class="field wide">
            <label for="companyId">شرکت</label>
            <select id="companyId" v-model="companyId">
              <option value="">بدون شرکت</option>
              <option v-for="c in companies" :key="c.id" :value="c.id">{{ c.name }}</option>
            </select>
          </div>
          <div class="field wide">
            <label for="notes">یادداشت</label>
            <textarea id="notes" v-model="notes" rows="4" />
          </div>
          <div v-if="!isNew" class="field wide loyalty-box">
            <p class="muted">باشگاه مشتریان</p>
            <p>
              {{ loyaltyPoints }} امتیاز
              <span v-if="loyaltyTierName"> · سطح {{ loyaltyTierName }}</span>
            </p>
            <RouterLink :to="{ name: 'loyalty' }">مدیریت باشگاه</RouterLink>
          </div>
        </div>
      </section>

      <CustomFieldsSection entity-type="person" v-model="customFields" />
      <MentoMemoryPanel v-if="!isNew && id" :person-id="id" />
      <EntityTimeline v-if="!isNew && id" entity-type="person" :entity-id="id" />

      <p v-if="error" class="error">{{ error }}</p>

      <div class="mobile-actions">
        <button class="btn primary" type="submit" :disabled="saving">
          {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
        </button>
        <button v-if="!isNew" class="btn danger" type="button" :disabled="saving" @click="remove">
          حذف
        </button>
      </div>
    </form>
  </section>
</template>

<style scoped>
.page {
  display: grid;
  gap: 0.85rem;
  max-width: 820px;
  min-width: 0;
  padding-bottom: 1.5rem;
}

.page.embedded {
  max-width: none;
  padding-bottom: 0;
}

.embed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.desktop-head {
  display: none;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.title-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.doc-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #ecfdf5;
  color: #0f766e;
}

h1 {
  margin: 0;
  font-size: 1.35rem;
}

.crumb {
  margin: 0.2rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #94a3b8;
  font-size: 0.82rem;
}

.crumb a {
  color: #0f766e;
  font-weight: 700;
}

.desk-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mobile-head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
}

.mobile-head h1 {
  text-align: center;
  font-size: 1.05rem;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: #0f766e;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.form {
  display: grid;
  gap: 0.75rem;
}

.card {
  background: #fff;
  border-radius: 18px;
  padding: 0.95rem;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field.wide {
  grid-column: 1 / -1;
}

.field label {
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  background: #fff;
}

.moods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mood {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 14px;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  font: inherit;
  color: #64748b;
  font-size: 0.75rem;
}

.mood.on {
  border-color: #14b8a6;
  background: #f0fdfa;
  color: #0f766e;
  font-weight: 700;
}

.loyalty-box {
  background: #f8fafc;
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
}

.loyalty-box a {
  color: #0f766e;
  font-weight: 700;
}

.muted {
  color: #64748b;
  margin: 0;
}

.error {
  color: #b91c1c;
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 42px;
  padding: 0.55rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
}

.btn.primary {
  background: #14b8a6;
  color: #fff;
  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
}

.btn.cancel {
  background: #fff;
  color: #64748b;
  border-color: #e2e8f0;
}

.btn.danger {
  background: #fff;
  color: #b91c1c;
  border-color: #fecaca;
}

.mobile-actions {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 960px) {
  .desktop-head {
    display: flex;
  }

  .mobile-head,
  .mobile-actions {
    display: none;
  }
}

@media (max-width: 700px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
</style>