CRM_Montzar/apps/web/src/views/ActivityFormView.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 {
  ActivityDto,
  ActivityType,
  CreateActivityRequest,
  DealDto,
  PaginatedResponse,
  PersonDto,
  PipelineBoardDto,
} from '@mento/shared';

const route = useRoute();
const router = useRouter();
const id = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
const isNew = computed(() => route.name === 'activity-new');

const loading = ref(false);
const saving = ref(false);
const error = ref('');
const people = ref<PersonDto[]>([]);
const deals = ref<DealDto[]>([]);

const title = ref('');
const type = ref<ActivityType>('task');
const description = ref('');
const dueAt = ref('');
const personId = ref('');
const dealId = ref('');

const typeOptions: Array<{ value: ActivityType; label: string }> = [
  { value: 'call', label: 'تماس' },
  { value: 'meeting', label: 'جلسه' },
  { value: 'task', label: 'وظیفه' },
  { value: 'note', label: 'یادداشت' },
];

function toLocalInput(iso: string | null) {
  if (!iso) return '';
  const d = new Date(iso);
  const pad = (n: number) => String(n).padStart(2, '0');
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const [peopleRes, boardRes] = await Promise.all([
      api.get<PaginatedResponse<PersonDto>>('/people', { params: { limit: 100 } }),
      api.get<PipelineBoardDto>('/pipelines/board'),
    ]);
    people.value = peopleRes.data.items;
    deals.value = boardRes.data.stages.flatMap((s) => s.deals);

    if (!isNew.value && id.value) {
      const { data } = await api.get<ActivityDto>(`/activities/${id.value}`);
      title.value = data.title;
      type.value = data.type;
      description.value = data.description ?? '';
      dueAt.value = toLocalInput(data.dueAt);
      personId.value = data.person?.id ?? '';
      dealId.value = data.deal?.id ?? '';
    } else if (typeof route.query.dueAt === 'string' && route.query.dueAt) {
      dueAt.value = toLocalInput(new Date(route.query.dueAt).toISOString());
    } else {
      const tomorrow = new Date();
      tomorrow.setHours(10, 0, 0, 0);
      dueAt.value = toLocalInput(tomorrow.toISOString());
    }
  } catch {
    error.value = 'بارگذاری فرم فعالیت ناموفق بود.';
  } finally {
    loading.value = false;
  }
}

function payload(): CreateActivityRequest {
  return {
    title: title.value,
    type: type.value,
    description: description.value || undefined,
    dueAt: dueAt.value ? new Date(dueAt.value).toISOString() : null,
    personId: personId.value || null,
    dealId: dealId.value || null,
  };
}

async function submit() {
  saving.value = true;
  error.value = '';
  try {
    if (isNew.value) {
      const { data } = await api.post<ActivityDto>('/activities', payload());
      await router.replace({ name: 'activity-detail', params: { id: data.id } });
    } else {
      await api.patch(`/activities/${id.value}`, payload());
      await router.push({ name: 'activities' });
    }
  } 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 complete() {
  if (!id.value) return;
  try {
    await api.patch(`/activities/${id.value}/complete`);
    await router.push({ name: 'activities' });
  } catch {
    error.value = 'ثبت انجام‌شدن ناموفق بود';
  }
}

async function remove() {
  if (!id.value || !confirm('این فعالیت حذف شود؟')) return;
  try {
    await api.delete(`/activities/${id.value}`);
    await router.push({ name: 'activities' });
  } 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="{ name: 'activities' }">بازگشت</RouterLink>
    </header>

    <p v-if="loading" class="muted">در حال بارگذاری…</p>
    <form v-else class="form-card" @submit.prevent="submit">
      <div class="grid">
        <div class="field wide">
          <label for="title">عنوان</label>
          <input id="title" v-model="title" required minlength="2" placeholder="مثلاً تماس پیگیری پیشنهاد" />
        </div>
        <div class="field">
          <label for="type">نوع</label>
          <select id="type" v-model="type">
            <option v-for="opt in typeOptions" :key="opt.value" :value="opt.value">
              {{ opt.label }}
            </option>
          </select>
        </div>
        <div class="field">
          <label for="dueAt">موعد</label>
          <input id="dueAt" v-model="dueAt" type="datetime-local" />
        </div>
        <div class="field">
          <label for="personId">شخص مرتبط</label>
          <select id="personId" v-model="personId">
            <option value="">بدون شخص</option>
            <option v-for="p in people" :key="p.id" :value="p.id">{{ p.fullName }}</option>
          </select>
        </div>
        <div class="field">
          <label for="dealId">معامله مرتبط</label>
          <select id="dealId" v-model="dealId">
            <option value="">بدون معامله</option>
            <option v-for="d in deals" :key="d.id" :value="d.id">{{ d.title }}</option>
          </select>
        </div>
        <div class="field wide">
          <label for="description">توضیح</label>
          <textarea id="description" v-model="description" rows="4" />
        </div>
      </div>

      <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-ghost"
          type="button"
          :disabled="saving"
          @click="complete"
        >
          انجام شد
        </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;
}

.form-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

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