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

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import { formatJalaliNumeric } from '@/lib/jalali';
import PipelineToolbar from '@/components/pipeline/PipelineToolbar.vue';
import type { PipelineViewMode } from '@/components/pipeline/PipelineToolbar.vue';
import PipelineBoard from '@/components/pipeline/PipelineBoard.vue';
import PipelineList from '@/components/pipeline/PipelineList.vue';
import DealCardOverlay from '@/components/pipeline/DealCardOverlay.vue';
import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
import {
  filterStagesByQuery,
  mapBoardToStages,
  updateDealStage,
} from '@/lib/pipeline-board';
import type { PipelineBoardDto, PipelineDto } from '@mento/shared';
import { useAuthStore } from '@/stores/auth';
import { canManageSettings } from '@/lib/roles';

const route = useRoute();
const router = useRouter();
const auth = useAuthStore();
const canCreatePipeline = computed(() => canManageSettings(auth.user?.role));

const loading = ref(false);
const saving = ref(false);
const error = ref('');
const stages = ref<PipelineStage[]>([]);
const pipelines = ref<PipelineDto[]>([]);
const boardPipelineId = ref('');
const viewMode = ref<PipelineViewMode>('kanban');
const search = ref('');
const showCreate = ref(false);
const newName = ref('');

const draggingId = ref<string | null>(null);
const dropStageId = ref<string | null>(null);
const overlayDeal = ref<PipelineDeal | null>(null);
const overlayAccent = ref<PipelineStage['color']>('green');
const overlayPos = ref({ x: 0, y: 0 });
const menuOpenId = ref<string | null>(null);
const moving = ref(false);

const pipelineOptions = computed(() =>
  pipelines.value.map((p) => ({
    id: p.id,
    name: p.name,
  })),
);

const selectedPipelineId = computed({
  get: () => {
    const q = route.query.pipelineId;
    if (typeof q === 'string' && q) return q;
    return boardPipelineId.value;
  },
  set: (id: string) => {
    void router.replace({ name: 'pipeline', query: { pipelineId: id } });
  },
});

const visibleStages = computed(() =>
  filterStagesByQuery(stages.value, search.value),
);

function formatDealDate(iso: string) {
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return iso;
  return formatJalaliNumeric(d);
}

function findAccent(dealId: string): PipelineStage['color'] {
  for (const stage of stages.value) {
    if (stage.deals.some((d) => d.id === dealId)) return stage.color;
  }
  return 'green';
}

async function loadPipelines() {
  const { data } = await api.get<PipelineDto[]>('/pipelines');
  pipelines.value = data;
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    await loadPipelines();
    const pipelineId =
      typeof route.query.pipelineId === 'string'
        ? route.query.pipelineId
        : undefined;
    const { data } = await api.get<PipelineBoardDto>('/pipelines/board', {
      params: pipelineId ? { pipelineId } : undefined,
    });
    boardPipelineId.value = data.pipeline.id;
    stages.value = mapBoardToStages(data, formatDealDate);
    if (!pipelineId || pipelineId !== data.pipeline.id) {
      await router.replace({
        name: 'pipeline',
        query: { pipelineId: data.pipeline.id },
      });
    }
  } catch (e) {
    if (axios.isAxiosError(e) && !e.response) {
      error.value = 'اتصال به API برقرار نشد.';
    } else {
      error.value = 'بارگذاری کاریز ناموفق بود.';
    }
  } finally {
    loading.value = false;
  }
}

async function createPipeline() {
  const name = newName.value.trim();
  if (name.length < 2 || saving.value) return;
  saving.value = true;
  error.value = '';
  try {
    const { data } = await api.post<PipelineDto>('/pipelines', { name });
    newName.value = '';
    showCreate.value = false;
    await router.replace({ name: 'pipeline', query: { pipelineId: data.id } });
  } catch {
    error.value = 'ساخت کاریز ناموفق بود.';
  } finally {
    saving.value = false;
  }
}

function onPointerMove(event: PointerEvent | MouseEvent) {
  if (!draggingId.value) return;
  overlayPos.value = { x: event.clientX + 12, y: event.clientY + 12 };
}

function onDragStart(deal: PipelineDeal, event: DragEvent) {
  draggingId.value = deal.id;
  overlayDeal.value = deal;
  overlayAccent.value = findAccent(deal.id);
  overlayPos.value = {
    x: (event.clientX || 0) + 12,
    y: (event.clientY || 0) + 12,
  };
  event.dataTransfer?.setData('text/plain', deal.id);
  event.dataTransfer!.effectAllowed = 'move';
  if (event.dataTransfer) {
    const img = new Image();
    img.src =
      'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
    event.dataTransfer.setDragImage(img, 0, 0);
  }
}

function onDragEnd() {
  draggingId.value = null;
  dropStageId.value = null;
  overlayDeal.value = null;
}

function onDragOver(stageId: string, event: DragEvent) {
  event.preventDefault();
  dropStageId.value = stageId;
  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
  if (event.clientX || event.clientY) {
    overlayPos.value = { x: event.clientX + 12, y: event.clientY + 12 };
  }
}

async function applyUpdateDealStage(
  dealId: string,
  stageId: string,
  toIndex?: number,
) {
  const prev = stages.value;
  const next = updateDealStage(prev, dealId, stageId, toIndex);
  const target = next.find((s) => s.id === stageId);
  const position = target?.deals.findIndex((d) => d.id === dealId) ?? toIndex;

  stages.value = next;
  moving.value = true;
  error.value = '';
  try {
    await api.patch(`/deals/${dealId}/move`, {
      stageId,
      position: position ?? undefined,
    });
  } catch {
    stages.value = prev;
    error.value = 'جابه‌جایی معامله ناموفق بود.';
  } finally {
    moving.value = false;
  }
}

async function onDrop(stageId: string, event: DragEvent, index?: number) {
  event.preventDefault();
  const dealId = event.dataTransfer?.getData('text/plain') || draggingId.value;
  dropStageId.value = null;
  draggingId.value = null;
  overlayDeal.value = null;
  if (!dealId || moving.value) return;

  const current = stages.value.find((s) => s.deals.some((d) => d.id === dealId));
  const currentIndex = current?.deals.findIndex((d) => d.id === dealId) ?? -1;
  if (current?.id === stageId && (index == null || index === currentIndex)) {
    return;
  }

  await applyUpdateDealStage(dealId, stageId, index);
}

function onAddDeal(stageId: string) {
  void router.push({
    name: 'deal-new',
    query: {
      pipelineId: selectedPipelineId.value || undefined,
      stageId,
    },
  });
}

function onOpenDeal(dealId: string) {
  menuOpenId.value = null;
  void router.push({ name: 'deal-detail', params: { id: dealId } });
}

function onMenuDeal(dealId: string) {
  menuOpenId.value = menuOpenId.value === dealId ? null : dealId;
}

function onFilter() {
  // UI فیلتر — اتصال سیستم فیلتر پیشرفته بعداً
}

watch(
  () => route.query.pipelineId,
  (id, prev) => {
    if (id === prev) return;
    void load();
  },
);

onMounted(() => {
  void load();
  window.addEventListener('drag', onPointerMove);
  window.addEventListener('dragover', onPointerMove);
});

onBeforeUnmount(() => {
  window.removeEventListener('drag', onPointerMove);
  window.removeEventListener('dragover', onPointerMove);
});

defineExpose({ updateDealStage: applyUpdateDealStage });
</script>

<template>
  <section class="page" dir="rtl">
    <PipelineToolbar
      pipeline-name="کاریز فروش"
      :pipeline-options="pipelineOptions"
      :selected-pipeline-id="selectedPipelineId"
      :view-mode="viewMode"
      :search="search"
      :can-create="canCreatePipeline"
      @update:view-mode="viewMode = $event"
      @update:search="search = $event"
      @update:selected-pipeline-id="selectedPipelineId = $event"
      @filter="onFilter"
      @create="showCreate = !showCreate"
    />

    <form
      v-if="showCreate && canCreatePipeline"
      class="create-box"
      @submit.prevent="createPipeline"
    >
      <input
        v-model="newName"
        type="text"
        placeholder="نام کاریز جدید…"
        maxlength="120"
        required
        minlength="2"
      />
      <button class="btn" type="submit" :disabled="saving || newName.trim().length < 2">
        {{ saving ? 'در حال ساخت…' : 'ساخت' }}
      </button>
      <button class="btn-ghost-sm" type="button" @click="showCreate = false">انصراف</button>
    </form>

    <p v-if="error" class="error">{{ error }}</p>
    <p v-else-if="loading && !stages.length" class="muted">در حال بارگذاری کاریز…</p>

    <PipelineList
      v-if="viewMode === 'list' && (!loading || stages.length)"
      :stages="visibleStages"
      @open-deal="onOpenDeal"
      @menu-deal="onMenuDeal"
    />

    <PipelineBoard
      v-else-if="viewMode === 'kanban' && stages.length"
      :stages="visibleStages"
      :dragging-id="draggingId"
      :drop-stage-id="dropStageId"
      @drag-start="onDragStart"
      @drag-end="onDragEnd"
      @drag-over="onDragOver"
      @drop="onDrop"
      @add-deal="onAddDeal"
      @open-deal="onOpenDeal"
      @menu-deal="onMenuDeal"
    />

    <Teleport to="body">
      <DealCardOverlay
        v-if="overlayDeal && draggingId"
        :deal="overlayDeal"
        :accent="overlayAccent"
        :x="overlayPos.x"
        :y="overlayPos.y"
      />
    </Teleport>

    <div v-if="menuOpenId" class="menu-pop" role="menu">
      <button type="button" role="menuitem" @click="onOpenDeal(menuOpenId)">
        مشاهده معامله
      </button>
      <button type="button" role="menuitem" @click="menuOpenId = null">بستن</button>
    </div>
  </section>
</template>

<style scoped>
.page {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  max-width: 100%;
  direction: rtl;
  text-align: right;
  container-type: inline-size;
  container-name: pipeline;
}

.btn-ghost-sm {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--accent);
  border-radius: 10px;
  padding: 0.4rem 0.75rem;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.create-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

.create-box input {
  flex: 1 1 180px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  background: #fff;
  font: inherit;
}

@container pipeline (max-width: 560px) {
  .create-box {
    flex-direction: column;
    align-items: stretch;
  }

  .create-box input,
  .create-box .btn,
  .create-box .btn-ghost-sm {
    width: 100%;
  }
}

.muted {
  color: var(--muted);
}

.error {
  color: var(--danger);
  font-weight: 600;
}

.menu-pop {
  position: fixed;
  inset-inline-start: 1rem;
  bottom: 5.5rem;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 0.35rem;
  display: grid;
  gap: 0.15rem;
}

.menu-pop button {
  border: 0;
  background: transparent;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: right;
}
</style>