540 lines
12 KiB
Vue
540 lines
12 KiB
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 type { DealDto, PipelineBoardDto, PipelineDto } from '@mento/shared';
|
|||
|
|
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 board = ref<PipelineBoardDto | null>(null);
|
|||
|
|
const pipelines = ref<PipelineDto[]>([]);
|
|||
|
|
const draggingId = ref<string | null>(null);
|
|||
|
|
const dropStageId = ref<string | null>(null);
|
|||
|
|
const showCreate = ref(false);
|
|||
|
|
const newName = ref('');
|
|||
|
|
|
|||
|
|
const selectedPipelineId = computed(() => {
|
|||
|
|
const q = route.query.pipelineId;
|
|||
|
|
if (typeof q === 'string' && q) return q;
|
|||
|
|
return board.value?.pipeline.id ?? '';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const openCount = computed(
|
|||
|
|
() =>
|
|||
|
|
board.value?.stages
|
|||
|
|
.filter((s) => !s.isWon && !s.isLost)
|
|||
|
|
.reduce((n, s) => n + s.deals.length, 0) ?? 0,
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
function formatAmount(amount: number | null, currency: string) {
|
|||
|
|
if (amount == null) return '—';
|
|||
|
|
try {
|
|||
|
|
return new Intl.NumberFormat('fa-IR').format(amount) + (currency === 'IRR' ? ' ریال' : ` ${currency}`);
|
|||
|
|
} catch {
|
|||
|
|
return `${amount}`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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,
|
|||
|
|
});
|
|||
|
|
board.value = data;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onSelectPipeline(event: Event) {
|
|||
|
|
const id = (event.target as HTMLSelectElement).value;
|
|||
|
|
void router.replace({ name: 'pipeline', query: { pipelineId: id } });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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 onDragStart(deal: DealDto, event: DragEvent) {
|
|||
|
|
draggingId.value = deal.id;
|
|||
|
|
event.dataTransfer?.setData('text/plain', deal.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 dealId = event.dataTransfer?.getData('text/plain') || draggingId.value;
|
|||
|
|
dropStageId.value = null;
|
|||
|
|
draggingId.value = null;
|
|||
|
|
if (!dealId || !board.value) return;
|
|||
|
|
|
|||
|
|
const current = board.value.stages.find((s) => s.deals.some((d) => d.id === dealId));
|
|||
|
|
if (current?.id === stageId) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await api.patch(`/deals/${dealId}/move`, { stageId });
|
|||
|
|
await load();
|
|||
|
|
} catch {
|
|||
|
|
error.value = 'جابهجایی معامله ناموفق بود.';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openDeal(id: string) {
|
|||
|
|
void router.push({ name: 'deal-detail', params: { id } });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => route.query.pipelineId,
|
|||
|
|
(id, prev) => {
|
|||
|
|
if (id === prev) return;
|
|||
|
|
void load();
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
onMounted(load);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<section class="page">
|
|||
|
|
<header class="page-head">
|
|||
|
|
<div>
|
|||
|
|
<p class="eyebrow">فروش</p>
|
|||
|
|
<h1>{{ board?.pipeline.name || 'کاریز فروش' }}</h1>
|
|||
|
|
<p class="lead">
|
|||
|
|
کارتها را با کشیدن بین ستونها جابهجا کنید.
|
|||
|
|
<span v-if="board">{{ openCount }} معامله باز</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="actions">
|
|||
|
|
<button class="btn btn-ghost" type="button" :disabled="loading" @click="load">بروزرسانی</button>
|
|||
|
|
<RouterLink
|
|||
|
|
class="btn"
|
|||
|
|
:to="{
|
|||
|
|
name: 'deal-new',
|
|||
|
|
query: selectedPipelineId ? { pipelineId: selectedPipelineId } : undefined,
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
معامله جدید
|
|||
|
|
</RouterLink>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div class="pipeline-bar">
|
|||
|
|
<label class="picker">
|
|||
|
|
<span>کاریز</span>
|
|||
|
|
<select
|
|||
|
|
:value="selectedPipelineId"
|
|||
|
|
:disabled="loading || !pipelines.length"
|
|||
|
|
@change="onSelectPipeline"
|
|||
|
|
>
|
|||
|
|
<option v-for="p in pipelines" :key="p.id" :value="p.id">
|
|||
|
|
{{ p.name }}{{ p.isDefault ? ' (پیشفرض)' : '' }}
|
|||
|
|
</option>
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
<button
|
|||
|
|
v-if="canCreatePipeline"
|
|||
|
|
class="btn btn-ghost"
|
|||
|
|
type="button"
|
|||
|
|
@click="showCreate = !showCreate"
|
|||
|
|
>
|
|||
|
|
کاریز جدید
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<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 btn-ghost" 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="{
|
|||
|
|
won: stage.isWon,
|
|||
|
|
lost: stage.isLost,
|
|||
|
|
drop: dropStageId === stage.id,
|
|||
|
|
}"
|
|||
|
|
@dragover="onDragOver(stage.id, $event)"
|
|||
|
|
@dragleave="dropStageId = null"
|
|||
|
|
@drop="onDrop(stage.id, $event)"
|
|||
|
|
>
|
|||
|
|
<div class="column-head">
|
|||
|
|
<h2>{{ stage.name }}</h2>
|
|||
|
|
<span>{{ stage.deals.length }}</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="column-sum">
|
|||
|
|
{{ formatAmount(stage.totalAmount, 'IRR') }}
|
|||
|
|
</p>
|
|||
|
|
<div class="cards">
|
|||
|
|
<article
|
|||
|
|
v-for="deal in stage.deals"
|
|||
|
|
:key="deal.id"
|
|||
|
|
class="card"
|
|||
|
|
:class="{ dragging: draggingId === deal.id }"
|
|||
|
|
draggable="true"
|
|||
|
|
@dragstart="onDragStart(deal, $event)"
|
|||
|
|
@dragend="onDragEnd"
|
|||
|
|
@dblclick="openDeal(deal.id)"
|
|||
|
|
>
|
|||
|
|
<h3 @click="openDeal(deal.id)">{{ deal.title }}</h3>
|
|||
|
|
<p class="amount">{{ formatAmount(deal.amount, deal.currency) }}</p>
|
|||
|
|
<p v-if="deal.person || deal.company" class="meta">
|
|||
|
|
<span v-if="deal.person">{{ deal.person.fullName }}</span>
|
|||
|
|
<span v-if="deal.person && deal.company"> · </span>
|
|||
|
|
<span v-if="deal.company">{{ deal.company.name }}</span>
|
|||
|
|
</p>
|
|||
|
|
<div class="badges">
|
|||
|
|
<span v-if="deal.isStale" class="badge stale">راکد</span>
|
|||
|
|
<span v-if="deal.isRotten" class="badge rotten">فاسد</span>
|
|||
|
|
<span v-for="tag in (deal.tags ?? []).slice(0, 3)" :key="tag" class="badge tag">
|
|||
|
|
{{ tag }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<p v-if="deal.source" class="meta source">منبع: {{ deal.source }}</p>
|
|||
|
|
</article>
|
|||
|
|
<p v-if="!stage.deals.length" class="empty">خالی</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.page {
|
|||
|
|
display: grid;
|
|||
|
|
gap: 1rem;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-head {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 1rem;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.eyebrow {
|
|||
|
|
margin: 0;
|
|||
|
|
color: var(--accent);
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
margin: 0.2rem 0;
|
|||
|
|
font-size: 1.85rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lead,
|
|||
|
|
.muted {
|
|||
|
|
color: var(--muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pipeline-bar {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 0.65rem;
|
|||
|
|
align-items: center;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picker {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
flex: 1 1 200px;
|
|||
|
|
min-width: 0;
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picker select {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 0.65rem 0.85rem;
|
|||
|
|
background: #fff;
|
|||
|
|
font: inherit;
|
|||
|
|
color: var(--ink);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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.7rem 0.85rem;
|
|||
|
|
background: #fff;
|
|||
|
|
font: inherit;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.board {
|
|||
|
|
display: grid;
|
|||
|
|
grid-auto-flow: column;
|
|||
|
|
grid-auto-columns: minmax(220px, 260px);
|
|||
|
|
gap: 0.85rem;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
padding-bottom: 0.75rem;
|
|||
|
|
-webkit-overflow-scrolling: touch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.column {
|
|||
|
|
background: #f4f7f5;
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
min-height: 420px;
|
|||
|
|
transition: border-color 0.15s ease, background 0.15s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.column.drop {
|
|||
|
|
border-color: var(--accent);
|
|||
|
|
background: var(--accent-soft);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.column.won {
|
|||
|
|
background: #eef8f2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.column.lost {
|
|||
|
|
background: #f8f1f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.column-head {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.column-head h2 {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 0.98rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.column-head span,
|
|||
|
|
.column-sum,
|
|||
|
|
.empty,
|
|||
|
|
.meta {
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.column-sum {
|
|||
|
|
margin: 0.25rem 0 0.7rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cards {
|
|||
|
|
display: grid;
|
|||
|
|
gap: 0.55rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
background: var(--surface);
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 0.8rem;
|
|||
|
|
cursor: grab;
|
|||
|
|
box-shadow: var(--shadow);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card:active {
|
|||
|
|
cursor: grabbing;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card.dragging {
|
|||
|
|
opacity: 0.55;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card h3 {
|
|||
|
|
margin: 0 0 0.35rem;
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
line-height: 1.45;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.amount {
|
|||
|
|
margin: 0;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: var(--accent);
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.meta {
|
|||
|
|
margin: 0.35rem 0 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.badges {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 0.3rem;
|
|||
|
|
margin-top: 0.45rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.badge {
|
|||
|
|
font-size: 0.72rem;
|
|||
|
|
padding: 0.15rem 0.45rem;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.badge.stale {
|
|||
|
|
background: #fff4e5;
|
|||
|
|
color: #9a6700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.badge.rotten {
|
|||
|
|
background: #fde8e8;
|
|||
|
|
color: #b42318;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.badge.tag {
|
|||
|
|
background: #eef6f2;
|
|||
|
|
color: #0f5c63;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.source {
|
|||
|
|
font-size: 0.78rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty {
|
|||
|
|
margin: 0.5rem 0;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 700px) {
|
|||
|
|
h1 {
|
|||
|
|
font-size: 1.45rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-head {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.actions {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.actions .btn {
|
|||
|
|
flex: 1 1 auto;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pipeline-bar {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picker {
|
|||
|
|
flex: 1 1 auto;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.create-box {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.create-box input {
|
|||
|
|
flex: 0 0 auto;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 2.75rem;
|
|||
|
|
max-height: 2.75rem;
|
|||
|
|
padding: 0 0.85rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.board {
|
|||
|
|
grid-auto-columns: minmax(200px, 78vw);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.column {
|
|||
|
|
min-height: 320px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|