CRM_Montzar/apps/web/src/views/CompanyFormView.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, CreateCompanyRequest } from '@mento/shared';
import CustomFieldsSection from '@/components/CustomFieldsSection.vue';
import EntityTimeline from '@/components/EntityTimeline.vue';
import {
  UiButton,
  UiCard,
  UiField,
  UiInput,
  UiPageHeader,
  UiTextarea,
} from '@/components/ui';
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 === 'company-new'));
const pageTitle = computed(() => (isNew.value ? 'شرکت جدید' : 'ویرایش شرکت'));

const loading = ref(false);
const saving = ref(false);
const error = ref('');

const name = ref('');
const nationalId = ref('');
const phone = ref('');
const email = ref('');
const website = ref('');
const address = ref('');
const notes = ref('');
const customFields = ref<Record<string, unknown>>({});

function fill(c: CompanyDto) {
  name.value = c.name;
  nationalId.value = c.nationalId ?? '';
  phone.value = c.phone ?? '';
  email.value = c.email ?? '';
  website.value = c.website ?? '';
  address.value = c.address ?? '';
  notes.value = c.notes ?? '';
  customFields.value = { ...(c.customFields ?? {}) };
}

async function load() {
  if (isNew.value) return;
  loading.value = true;
  error.value = '';
  try {
    const { data } = await api.get<CompanyDto>(`/companies/${id.value}`);
    fill(data);
  } catch {
    error.value = 'بارگذاری شرکت ناموفق بود.';
  } finally {
    loading.value = false;
  }
}

function payload(): CreateCompanyRequest {
  return {
    name: name.value,
    nationalId: nationalId.value || undefined,
    phone: phone.value || undefined,
    email: email.value || undefined,
    website: website.value || undefined,
    address: address.value || undefined,
    notes: notes.value || undefined,
    customFields: customFields.value,
  };
}

async function submit() {
  saving.value = true;
  error.value = '';
  try {
    if (isNew.value) {
      const { data } = await api.post<CompanyDto>('/companies', payload());
      if (props.embedded) {
        emit('saved');
        return;
      }
      await router.replace({ name: 'company-detail', params: { id: data.id } });
    } else {
      await api.patch(`/companies/${id.value}`, payload());
      if (props.embedded) {
        emit('saved');
        return;
      }
      await router.push({ name: 'contacts', query: { tab: 'companies' } });
    }
  } 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(`/companies/${id.value}`);
    await router.push({ name: 'contacts', query: { tab: 'companies' } });
  } catch {
    error.value = 'حذف ناموفق بود';
  }
}

function cancel() {
  if (props.embedded) {
    emit('cancel');
    return;
  }
  void router.push({ name: 'contacts', query: { tab: 'companies' } });
}

onMounted(load);
</script>

<template>
  <section class="crm-page company-form-page" :class="{ embedded }" dir="rtl">
    <UiPageHeader
      v-if="!embedded"
      :title="pageTitle"
      description="ثبت و ویرایش مشخصات حقوقی، اطلاعات تماس و فیلدهای سفارشی شرکت"
    >
      <template #breadcrumb>
        <RouterLink :to="{ name: 'contacts', query: { tab: 'companies' } }" class="breadcrumb-link">
          شرکت‌ها
        </RouterLink>
        <span class="breadcrumb-separator">/</span>
        <span>{{ pageTitle }}</span>
      </template>

      <template #actions>
        <UiButton :loading="saving" @click="submit">
          <template #icon>
            <UiIcon name="check-plain" />
          </template>
          ذخیره
        </UiButton>
        <UiButton variant="ghost" :disabled="saving" @click="cancel">
          انصراف
        </UiButton>
        <UiButton v-if="!isNew" variant="danger" :disabled="saving" @click="remove">
          <template #icon>
            <UiIcon name="trash" />
          </template>
          حذف
        </UiButton>
      </template>
    </UiPageHeader>

    <div v-if="error" class="crm-alert crm-alert-danger">{{ error }}</div>

    <form class="crm-form" @submit.prevent="submit">
      <UiCard title="اطلاعات اصلی شرکت" class="section-card">
        <div class="crm-form-grid-2">
          <UiField label="نام شرکت" required class="col-span-2">
            <UiInput
              id="name"
              v-model="name"
              required
              minlength="2"
              placeholder="مثال: داده‌پردازی سپهر"
            />
          </UiField>

          <UiField label="شناسه ملی">
            <UiInput
              id="nationalId"
              v-model="nationalId"
              placeholder="شناسه ملی ۱۱ رقمی"
              dir="ltr"
            />
          </UiField>

          <UiField label="شماره تلفن شرکت">
            <UiInput
              id="phone"
              v-model="phone"
              type="tel"
              placeholder="۰۲۱..."
              dir="ltr"
            />
          </UiField>

          <UiField label="پست الکترونیکی (ایمیل)">
            <UiInput
              id="email"
              v-model="email"
              type="email"
              placeholder="info@company.ir"
              dir="ltr"
            />
          </UiField>

          <UiField label="وب‌سایت">
            <UiInput
              id="website"
              v-model="website"
              placeholder="https://..."
              dir="ltr"
            />
          </UiField>

          <UiField label="آدرس پستی" class="col-span-2">
            <UiInput
              id="address"
              v-model="address"
              placeholder="نشانی، طبقه، پلاک..."
            />
          </UiField>

          <UiField label="یادداشت و توضیحات تکمیلی" class="col-span-2">
            <UiTextarea
              id="notes"
              v-model="notes"
              :rows="4"
              placeholder="توضیحات مهم، حوزه‌های همکاری..."
            />
          </UiField>
        </div>
      </UiCard>

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

      <div class="form-bottom-actions">
        <UiButton type="submit" :loading="saving">
          <template #icon>
            <UiIcon name="check-plain" />
          </template>
          ذخیره اطلاعات
        </UiButton>
        <UiButton variant="ghost" type="button" :disabled="saving" @click="cancel">
          انصراف
        </UiButton>
        <UiButton v-if="!isNew" variant="danger" type="button" :disabled="saving" @click="remove">
          حذف شرکت
        </UiButton>
      </div>
    </form>
  </section>
</template>

<style scoped>
.company-form-page {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  width: 100%;
  max-width: 100%;
}

.company-form-page.embedded {
  max-width: none;
  gap: var(--sp-4);
}

.embedded-actions {
  display: flex;
  gap: var(--sp-2);
}

.breadcrumb-link {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.breadcrumb-link:hover {
  color: var(--color-brand-600);
}

.breadcrumb-separator {
  margin: 0 var(--sp-2);
  color: var(--color-text-muted);
}

.section-card {
  padding: var(--sp-6);
}

.col-span-2 {
  grid-column: span 2;
}

.form-bottom-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  margin-top: var(--sp-4);
}

@media (max-width: 640px) {
  .col-span-2 {
    grid-column: span 1;
  }

  .form-bottom-actions {
    flex-direction: column;
  }
}
</style>