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



const route = useRoute();

const router = useRouter();

const id = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));

const isNew = computed(() => route.name === 'person-new');



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('');



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());

      await router.replace({ name: 'person-detail', params: { id: data.id } });

    } else {

      await api.patch(`/people/${id.value}`, payload());

      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 = 'حذف ناموفق بود';

  }

}



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="isNew ? { name: 'contacts' } : { name: 'person-detail', params: { id } }"
      >بازگشت</RouterLink>

    </header>



    <p v-if="loading" class="muted">در حال بارگذاری…</p>

    <form v-else class="form-card" @submit.prevent="submit">

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



      <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="form-actions">

        <button class="btn" type="submit" :disabled="saving">

          {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}

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

}



select,

textarea {

  border: 1px solid var(--line);

  border-radius: 12px;

  padding: 0.8rem 0.95rem;

  background: #fff;

  font: inherit;

  width: 100%;

}



.form-actions {

  display: flex;

  gap: 0.6rem;

  flex-wrap: wrap;

}

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

.mood {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 56px;
  padding: 0.4rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.mood.on {
  border-color: #14b8a6;
  background: #ecfdf5;
  box-shadow: 0 0 0 3px #ccfbf1;
}

@media (min-width: 700px) {
  .moods {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {

  .grid {

    grid-template-columns: 1fr;

  }

}

</style>