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

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { RouterLink, useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import { useAuthStore } from '@/stores/auth';
import UiIcon from '@/components/UiIcon.vue';
import type {
  ProjectBoardBoardDto,
  ProjectBoardDto,
  ProjectCardDto,
} from '@mento/shared';
import { canManageSettings } from '@/lib/roles';

const route = useRoute();
const router = useRouter();
const auth = useAuthStore();
const canCreateBoard = computed(() => canManageSettings(auth.user?.role));
const loading = ref(false);
const saving = ref(false);
const error = ref('');
const board = ref<ProjectBoardBoardDto | null>(null);
const boards = ref<ProjectBoardDto[]>([]);
const draggingId = ref<string | null>(null);
const dropStageId = ref<string | null>(null);
const showCreate = ref(false);
const newName = ref('');

const selectedBoardId = computed(() => {
  const q = route.query.boardId;
  if (typeof q === 'string' && q) return q;
  return board.value?.board.id ?? '';
});

const cardCount = computed(
  () => board.value?.stages.reduce((n, s) => n + s.cards.length, 0) ?? 0,
);

async function loadBoards() {
  const { data } = await api.get<ProjectBoardDto[]>('/project-boards');
  boards.value = data;
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    await loadBoards();
    const boardId =
      typeof route.query.boardId === 'string' ? route.query.boardId : undefined;
    const { data } = await api.get<ProjectBoardBoardDto>('/project-boards/board', {
      params: boardId ? { boardId } : undefined,
    });
    board.value = data;
    if (!boardId || boardId !== data.board.id) {
      await router.replace({
        name: 'projects',
        query: { boardId: data.board.id },
      });
    }
  } catch (e) {
    if (axios.isAxiosError(e) && !e.response) {
      error.value = 'اتصال به API برقرار نشد.';
    } else {
      error.value = 'بارگذاری برد پروژه ناموفق بود.';
    }
  } finally {
    loading.value = false;
  }
}

function onSelectBoard(event: Event) {
  const id = (event.target as HTMLSelectElement).value;
  void router.replace({ name: 'projects', query: { boardId: id } });
}

async function createBoard() {
  const name = newName.value.trim();
  if (name.length < 2 || saving.value) return;
  saving.value = true;
  error.value = '';
  try {
    const { data } = await api.post<ProjectBoardDto>('/project-boards', { name });
    newName.value = '';
    showCreate.value = false;
    await router.replace({ name: 'projects', query: { boardId: data.id } });
  } catch {
    error.value = 'ساخت برد ناموفق بود.';
  } finally {
    saving.value = false;
  }
}

function onDragStart(card: ProjectCardDto, event: DragEvent) {
  draggingId.value = card.id;
  event.dataTransfer?.setData('text/plain', card.id);
  event.dataTransfer!.effectAllowed = 'move';
}

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

function onDragOver(stageId: string, event: DragEvent) {
  event.preventDefault();
  dropStageId.value = stageId;
  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
}

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

  const current = board.value.stages.find((s) =>
    s.cards.some((c) => c.id === cardId),
  );
  if (current?.id === stageId) return;

  try {
    await api.patch(`/project-cards/${cardId}/move`, { stageId });
    await load();
  } catch {
    error.value = 'جابه‌جایی کارت ناموفق بود.';
  }
}

function openCard(id: string) {
  void router.push({ name: 'project-card-detail', params: { id } });
}

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

onMounted(load);
</script>

<template>
  <section class="page" dir="rtl">
    <header class="toolbar">
      <div class="title-block">
        <span class="brand-ico" aria-hidden="true">
          <UiIcon name="grid" :size="18" />
        </span>
        <div class="title-copy">
          <h1>{{ board?.board.name || 'کاریز پروژه' }}</h1>
          <p v-if="board" class="sub">{{ cardCount }} کارت</p>
        </div>
      </div>

      <label class="board-pick">
        <span class="sr">انتخاب برد</span>
        <select
          :value="selectedBoardId"
          :disabled="loading || !boards.length"
          @change="onSelectBoard"
        >
          <option v-for="b in boards" :key="b.id" :value="b.id">
            {{ b.name }}{{ b.isDefault ? ' (پیش‌فرض)' : '' }}
          </option>
        </select>
        <UiIcon class="chev" name="chevron" :size="16" />
      </label>

      <div class="toolbar-actions">
        <button class="btn-ghost-sm" type="button" :disabled="loading" @click="load">
          بروزرسانی
        </button>
        <button
          v-if="canCreateBoard"
          class="btn-ghost-sm"
          type="button"
          @click="showCreate = !showCreate"
        >
          برد جدید
        </button>
        <RouterLink
          class="btn primary"
          :to="{
            name: 'project-card-new',
            query: selectedBoardId ? { boardId: selectedBoardId } : undefined,
          }"
        >
          <UiIcon name="plus" :size="16" />
          کارت جدید
        </RouterLink>
      </div>
    </header>

    <form
      v-if="showCreate && canCreateBoard"
      class="create-box"
      @submit.prevent="createBoard"
    >
      <input
        v-model="newName"
        type="text"
        placeholder="نام برد جدید…"
        maxlength="120"
        required
        minlength="2"
      />
      <button class="btn primary" 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 && !board" class="muted">در حال بارگذاری…</p>

    <div v-if="board" class="board">
      <div
        v-for="stage in board.stages"
        :key="stage.id"
        class="column"
        :class="{ drop: dropStageId === stage.id }"
        @dragover="onDragOver(stage.id, $event)"
        @dragleave="dropStageId = null"
        @drop="onDrop(stage.id, $event)"
      >
        <div class="column-head">
          <div class="title-wrap">
            <span class="dot" aria-hidden="true" />
            <h2>{{ stage.name }}</h2>
          </div>
          <span class="count">{{ stage.cards.length }}</span>
        </div>
        <div class="cards">
          <article
            v-for="card in stage.cards"
            :key="card.id"
            class="card"
            :class="{ dragging: draggingId === card.id }"
            draggable="true"
            @dragstart="onDragStart(card, $event)"
            @dragend="onDragEnd"
            @dblclick="openCard(card.id)"
          >
            <h3 @click="openCard(card.id)">{{ card.title }}</h3>
            <p v-if="card.person || card.company" class="meta">
              <span v-if="card.person">{{ card.person.fullName }}</span>
              <span v-if="card.person && card.company"> · </span>
              <span v-if="card.company">{{ card.company.name }}</span>
            </p>
            <p v-if="card.deal" class="meta">معامله: {{ card.deal.title }}</p>
            <p v-if="card.owner" class="meta">مسئول: {{ card.owner.fullName }}</p>
          </article>
          <p v-if="!stage.cards.length" class="empty">خالی</p>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.page {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  overflow-x: clip;
  direction: rtl;
  text-align: right;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
}

.title-block {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-inline-end: 0.25rem;
  min-width: 0;
}

.brand-ico {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #0f766e;
  color: #fff;
  flex-shrink: 0;
}

.title-copy {
  min-width: 0;
}

h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
}

.sub,
.muted {
  margin: 0.1rem 0 0;
  color: #64748b;
  font-size: 0.82rem;
}

.board-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 140px;
}

.board-pick select {
  appearance: none;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 12px;
  padding: 0.55rem 2rem 0.55rem 0.85rem;
  font: inherit;
  font-weight: 600;
  color: #0f172a;
  min-width: 150px;
  cursor: pointer;
}

.board-pick .chev {
  position: absolute;
  left: 0.65rem;
  pointer-events: none;
  color: #94a3b8;
  transform: rotate(-90deg);
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-inline-start: auto;
}

.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;
  text-decoration: none;
}

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

.btn-ghost-sm {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f766e;
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font: inherit;
}

.create-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  background: #fff;
  border-radius: 18px;
  padding: 0.85rem 1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

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

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

.board {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scroll-snap-type: x proximity;
  min-width: 0;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 0;
  min-height: 420px;
  padding: 0.35rem 0.15rem 0.5rem;
  border-radius: 18px;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.column.drop {
  background: color-mix(in srgb, #ccfbf1 70%, transparent);
  border-color: #99f6e4;
}

.column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.15rem 0.25rem;
}

.title-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #14b8a6;
  flex: 0 0 auto;
}

.column-head h2 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f172a;
}

.count {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
  min-height: 4rem;
}

.card {
  background: #fff;
  border: 1px solid color-mix(in srgb, #e2e8f0 70%, transparent);
  border-radius: 16px;
  padding: 0.95rem 1rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  cursor: grab;
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
  min-width: 0;
}

.card:hover {
  border-color: color-mix(in srgb, #14b8a6 28%, #e2e8f0);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
}

.card.dragging {
  opacity: 0.55;
}

.card h3 {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  color: #0f172a;
}

.meta {
  margin: 0.15rem 0 0;
  color: #64748b;
  font-size: 0.82rem;
}

.empty {
  margin: 1rem 0;
  text-align: center;
  color: #64748b;
  font-size: 0.85rem;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (max-width: 900px) {
  .toolbar {
    align-items: stretch;
  }

  .title-block {
    width: 100%;
  }

  .board-pick,
  .toolbar-actions {
    flex: 1 1 auto;
  }

  .board-pick select {
    width: 100%;
  }

  .toolbar-actions {
    margin-inline-start: 0;
    width: 100%;
  }

  .toolbar-actions .btn.primary {
    flex: 1;
    justify-content: center;
  }

  .column {
    flex: 0 0 auto;
    width: min(320px, 86vw);
    min-width: min(320px, 86vw);
    scroll-snap-align: start;
  }
}

@media (max-width: 700px) {
  .column {
    width: 88vw;
    min-width: 88vw;
    min-height: 360px;
  }

  .create-box {
    flex-direction: column;
    align-items: stretch;
  }

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