CRM_Montzar/apps/web/src/components/pipeline/PipelineList.vue

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';
import TableColumnsMenu from '@/components/TableColumnsMenu.vue';
import UiIcon from '@/components/UiIcon.vue';
import type { PipelineDeal, PipelineStage, PipelineUiCopy } from '@/lib/pipeline-board';
import {
  DEAL_BOARD_COPY,
  formatCurrencyParts,
  PIPELINE_ACCENT,
} from '@/lib/pipeline-board';

const props = withDefaults(
  defineProps<{
    stages: PipelineStage[];
    copy?: PipelineUiCopy;
    selectMode?: boolean;
    selectedIds?: Set<string>;
  }>(),
  { copy: () => DEAL_BOARD_COPY, selectedIds: () => new Set() },
);

const emit = defineEmits<{
  openDeal: [dealId: string];
  menuDeal: [dealId: string];
  toggleSelect: [dealId: string];
  bulkDelete: [];
}>();

const listRoot = ref<HTMLElement | null>(null);
/** فقط یکی از جدول/کارت در DOM باشد تا منوی انتخاب گم نشود */
const useCards = ref(false);
let resizeObs: ResizeObserver | null = null;

const rows = computed(() =>
  props.stages.flatMap((stage) =>
    stage.deals.map((deal) => ({
      deal,
      stageTitle: stage.title,
      accent: stage.color,
    })),
  ),
);

function money(deal: PipelineDeal) {
  return formatCurrencyParts(deal.amount ?? 0, deal.currencyUnit ?? 'ریال');
}

const hideAmount = computed(() => Boolean(props.copy.hideAmount));
const tableKey = computed(() => (hideAmount.value ? 'pipeline.leads' : 'pipeline.deals'));

onMounted(() => {
  const el = listRoot.value;
  if (!el || typeof ResizeObserver === 'undefined') return;
  resizeObs = new ResizeObserver((entries) => {
    const width = entries[0]?.contentRect.width ?? el.clientWidth;
    useCards.value = width <= 720;
  });
  resizeObs.observe(el);
  useCards.value = el.clientWidth <= 720;
});

onUnmounted(() => {
  resizeObs?.disconnect();
  resizeObs = null;
});
</script>

<template>
  <div ref="listRoot" class="list" dir="rtl">
    <p v-if="!rows.length" class="empty">{{ copy.empty }}</p>

    <div v-if="rows.length && !useCards" class="tc-row">
      <TableColumnsMenu :table-key="tableKey" align="end" />
    </div>
    <div v-if="rows.length && !useCards" class="table-wrap">
      <table v-table-cols="tableKey" class="data-table">
        <thead>
          <tr>
            <th v-if="selectMode" class="tick-col"></th>
            <th>{{ copy.listColTitle }}</th>
            <th>مرحله</th>
            <th v-if="!hideAmount">مبلغ</th>
            <th>تاریخ</th>
            <th class="menu-col">عملیات</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="row in rows"
            :key="row.deal.id"
            :data-card-id="row.deal.id"
            :class="{ selected: selectedIds.has(row.deal.id) }"
            @click="selectMode && emit('toggleSelect', row.deal.id)"
          >
            <td v-if="selectMode" class="tick-col" @click.stop>
              <button
                type="button"
                class="tick"
                :class="{ on: selectedIds.has(row.deal.id) }"
                :aria-label="selectedIds.has(row.deal.id) ? 'لغو انتخاب' : 'انتخاب معامله'"
                :aria-pressed="selectedIds.has(row.deal.id)"
                @click="emit('toggleSelect', row.deal.id)"
              >
                <UiIcon v-if="selectedIds.has(row.deal.id)" name="check" :size="14" />
              </button>
            </td>
            <td>
              <button
                type="button"
                class="identity"
                @click.stop="
                  selectMode
                    ? emit('toggleSelect', row.deal.id)
                    : emit('openDeal', row.deal.id)
                "
              >
                <span
                  class="badge"
                  :style="{
                    background: PIPELINE_ACCENT[row.accent].soft,
                    color: PIPELINE_ACCENT[row.accent].text,
                  }"
                >{{ row.deal.initials }}</span>
                <span class="titles">
                  <strong>{{ row.deal.title }}</strong>
                  <em v-if="row.deal.description">{{ row.deal.description }}</em>
                </span>
              </button>
            </td>
            <td>
              <span
                class="stage"
                :style="{
                  background: PIPELINE_ACCENT[row.accent].soft,
                  color: PIPELINE_ACCENT[row.accent].text,
                }"
              >
                <i :style="{ background: PIPELINE_ACCENT[row.accent].solid }" />
                {{ row.stageTitle }}
              </span>
            </td>
            <td v-if="!hideAmount">
              <span class="amount" dir="ltr">
                <strong>{{ money(row.deal).number }}</strong>
                <small>{{ money(row.deal).unit }}</small>
              </span>
            </td>
            <td>
              <span class="date">
                <UiIcon name="calendar" :size="14" />
                {{ row.deal.date }}
              </span>
            </td>
            <td class="menu-cell" @click.stop>
              <button
                v-if="selectMode && selectedIds.has(row.deal.id)"
                type="button"
                class="menu trash"
                aria-label="حذف انتخاب‌شده‌ها"
                @click="emit('bulkDelete')"
              >
                <UiIcon name="trash" :size="18" />
              </button>
              <button
                v-else
                type="button"
                class="menu"
                :aria-label="copy.itemMenuAria"
                @click="emit('menuDeal', row.deal.id)"
              >
                <UiIcon name="dots-v" :size="18" />
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div v-if="rows.length && useCards" class="cards">
      <article
        v-for="row in rows"
        :key="row.deal.id"
        class="card"
        :class="{ selected: selectedIds.has(row.deal.id) }"
        :data-card-id="row.deal.id"
        @dblclick="!selectMode && emit('openDeal', row.deal.id)"
        @click="selectMode && emit('toggleSelect', row.deal.id)"
      >
        <div class="card-top">
          <button
            v-if="selectMode"
            type="button"
            class="tick"
            :class="{ on: selectedIds.has(row.deal.id) }"
            :aria-label="selectedIds.has(row.deal.id) ? 'لغو انتخاب' : 'انتخاب معامله'"
            @click.stop="emit('toggleSelect', row.deal.id)"
          >
            <UiIcon v-if="selectedIds.has(row.deal.id)" name="check" :size="14" />
          </button>
          <button
            type="button"
            class="identity"
            @click.stop="
              selectMode
                ? emit('toggleSelect', row.deal.id)
                : emit('openDeal', row.deal.id)
            "
          >
            <span
              class="badge"
              :style="{
                background: PIPELINE_ACCENT[row.accent].soft,
                color: PIPELINE_ACCENT[row.accent].text,
              }"
            >{{ row.deal.initials }}</span>
            <span class="titles">
              <strong>{{ row.deal.title }}</strong>
              <em v-if="row.deal.description">{{ row.deal.description }}</em>
            </span>
          </button>
          <button
            v-if="selectMode && selectedIds.has(row.deal.id)"
            type="button"
            class="menu trash"
            aria-label="حذف انتخاب‌شده‌ها"
            @click.stop="emit('bulkDelete')"
          >
            <UiIcon name="trash" :size="18" />
          </button>
          <button
            v-else
            type="button"
            class="menu"
            :aria-label="copy.itemMenuAria"
            @click.stop="emit('menuDeal', row.deal.id)"
          >
            <UiIcon name="dots-v" :size="18" />
          </button>
        </div>
        <span
          class="stage"
          :style="{
            background: PIPELINE_ACCENT[row.accent].soft,
            color: PIPELINE_ACCENT[row.accent].text,
          }"
        >
          <i :style="{ background: PIPELINE_ACCENT[row.accent].solid }" />
          {{ row.stageTitle }}
        </span>
        <div class="card-foot">
          <span class="date">
            <UiIcon name="calendar" :size="14" />
            {{ row.deal.date }}
          </span>
          <span v-if="!hideAmount" class="amount" dir="ltr">
            <strong>{{ money(row.deal).number }}</strong>
            <small>{{ money(row.deal).unit }}</small>
          </span>
        </div>
      </article>
    </div>
  </div>
</template>

<style scoped>
.list {
  min-width: 0;
}

.empty {
  margin: 2rem 0;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
}

.table-wrap {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.data-table th,
.data-table td {
  padding: 0.85rem 1rem;
  text-align: start;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.data-table th {
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 700;
  background: #f8fafc;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover td {
  background: #f8fafc;
}

.data-table tbody tr.selected td {
  background: color-mix(in srgb, var(--accent) 7%, #fff);
}

.tick-col {
  width: 2.6rem;
  padding-inline: 0.55rem !important;
}

.tick {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 6px;
  border: 2px solid #cbd5e1;
  background: #fff;
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.tick.on {
  border-color: var(--accent);
  background: var(--accent);
}

.identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: right;
  font: inherit;
  color: inherit;
}

.badge {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 600;
}

.titles {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.titles strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titles em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.stage i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  display: block;
}

.amount {
  display: grid;
  justify-items: start;
  gap: 0.05rem;
}

.amount strong {
  font-weight: 600;
  color: var(--ink);
}

.amount small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.date {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.menu-col,
.menu-cell {
  width: 3.2rem;
  min-width: 3.2rem;
  text-align: center;
}

.menu {
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: var(--radius);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.menu:hover,
.menu:focus-visible {
  color: var(--ink);
  background: #f1f5f9;
}

.menu.trash {
  color: var(--danger);
}

.menu.trash:hover,
.menu.trash:focus-visible {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, #fff);
}

.cards {
  display: grid;
  gap: 0.7rem;
}

.card {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--radius);
  padding: 0.95rem 1rem;
  display: grid;
  gap: 0.7rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.card.selected {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}

.card-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.card-top .identity {
  flex: 1;
}

.card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}

</style>