Redesign sales pipeline UI and reconnect it to live board APIs.
Keep the employer kanban layout while loading pipelines/deals from the server, persisting drag-and-drop moves, and seeding a Waiting pipeline with demo deals. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -239,6 +239,172 @@ async function main() {
|
||||
console.log('Services pipeline already seeded');
|
||||
}
|
||||
|
||||
// کاریز منتظر — مطابق طراحی UI (۳ مرحله + معاملات نمونه)
|
||||
const WAITING_STAGES = [
|
||||
{ name: 'پیگیری', isWon: false, isLost: false },
|
||||
{ name: 'مذاکرات اولیه', isWon: false, isLost: false },
|
||||
{ name: 'قیمت و نهایی کردن', isWon: false, isLost: false },
|
||||
] as const;
|
||||
|
||||
const WAITING_DEALS: Array<{
|
||||
stageName: (typeof WAITING_STAGES)[number]['name'];
|
||||
title: string;
|
||||
notes: string;
|
||||
amount: number;
|
||||
expectedCloseAt: string;
|
||||
position: number;
|
||||
}> = [
|
||||
{
|
||||
stageName: 'پیگیری',
|
||||
title: 'نرم‌افزار حسابان',
|
||||
notes: 'نصب سیستم یکپارچه',
|
||||
amount: 250_000_000,
|
||||
expectedCloseAt: '2024-07-15T00:00:00.000Z',
|
||||
position: 0,
|
||||
},
|
||||
{
|
||||
stageName: 'پیگیری',
|
||||
title: 'همکاران سیستم',
|
||||
notes: 'نسخه سازمانی',
|
||||
amount: 350_000_000,
|
||||
expectedCloseAt: '2024-07-08T00:00:00.000Z',
|
||||
position: 1,
|
||||
},
|
||||
{
|
||||
stageName: 'پیگیری',
|
||||
title: 'بازرگانی امید',
|
||||
notes: 'کاربران سازمانی',
|
||||
amount: 180_000_000,
|
||||
expectedCloseAt: '2024-07-17T00:00:00.000Z',
|
||||
position: 2,
|
||||
},
|
||||
{
|
||||
stageName: 'پیگیری',
|
||||
title: 'کالای صنعتی پارس',
|
||||
notes: 'ماژول انبارداری',
|
||||
amount: 120_000_000,
|
||||
expectedCloseAt: '2024-07-23T00:00:00.000Z',
|
||||
position: 3,
|
||||
},
|
||||
{
|
||||
stageName: 'مذاکرات اولیه',
|
||||
title: 'فروشگاه تک‌کالا',
|
||||
notes: 'ماژول فروش',
|
||||
amount: 280_000_000,
|
||||
expectedCloseAt: '2024-07-13T00:00:00.000Z',
|
||||
position: 0,
|
||||
},
|
||||
{
|
||||
stageName: 'مذاکرات اولیه',
|
||||
title: 'شرکت داده‌پرداز',
|
||||
notes: 'اتصال به حسابداری',
|
||||
amount: 190_000_000,
|
||||
expectedCloseAt: '2024-07-10T00:00:00.000Z',
|
||||
position: 1,
|
||||
},
|
||||
{
|
||||
stageName: 'مذاکرات اولیه',
|
||||
title: 'گروه فنی مهندسی آوا',
|
||||
notes: 'ماژول پروژه‌ها',
|
||||
amount: 315_000_000,
|
||||
expectedCloseAt: '2024-07-05T00:00:00.000Z',
|
||||
position: 2,
|
||||
},
|
||||
{
|
||||
stageName: 'مذاکرات اولیه',
|
||||
title: 'رستوران زنجیره‌ای نیک',
|
||||
notes: 'ماژول رستوران',
|
||||
amount: 165_000_000,
|
||||
expectedCloseAt: '2024-07-09T00:00:00.000Z',
|
||||
position: 3,
|
||||
},
|
||||
{
|
||||
stageName: 'قیمت و نهایی کردن',
|
||||
title: 'شرکت تجارت',
|
||||
notes: 'یکپارچه‌سازی کامل',
|
||||
amount: 640_000_000,
|
||||
expectedCloseAt: '2024-06-30T00:00:00.000Z',
|
||||
position: 0,
|
||||
},
|
||||
{
|
||||
stageName: 'قیمت و نهایی کردن',
|
||||
title: 'فروشگاه اینترنتی دیجی‌خونه',
|
||||
notes: 'فروشگاه اینترنتی',
|
||||
amount: 420_000_000,
|
||||
expectedCloseAt: '2024-06-28T00:00:00.000Z',
|
||||
position: 1,
|
||||
},
|
||||
{
|
||||
stageName: 'قیمت و نهایی کردن',
|
||||
title: 'شرکت داروسازی بهداشت',
|
||||
notes: 'ماژول مالی و انبار',
|
||||
amount: 780_000_000,
|
||||
expectedCloseAt: '2024-07-02T00:00:00.000Z',
|
||||
position: 2,
|
||||
},
|
||||
];
|
||||
|
||||
let waitingPipeline = await prisma.pipeline.findFirst({
|
||||
where: { organizationId: org.id, name: 'کاریز منتظر' },
|
||||
include: { stages: { orderBy: { position: 'asc' } } },
|
||||
});
|
||||
|
||||
if (!waitingPipeline) {
|
||||
waitingPipeline = await prisma.pipeline.create({
|
||||
data: {
|
||||
organizationId: org.id,
|
||||
name: 'کاریز منتظر',
|
||||
isDefault: false,
|
||||
stages: {
|
||||
create: WAITING_STAGES.map((s, index) => ({
|
||||
name: s.name,
|
||||
position: index,
|
||||
isWon: s.isWon,
|
||||
isLost: s.isLost,
|
||||
})),
|
||||
},
|
||||
},
|
||||
include: { stages: { orderBy: { position: 'asc' } } },
|
||||
});
|
||||
console.log('Seeded waiting pipeline (کاریز منتظر)');
|
||||
} else {
|
||||
console.log('Waiting pipeline already seeded');
|
||||
}
|
||||
|
||||
const waitingDealCount = await prisma.deal.count({
|
||||
where: { organizationId: org.id, pipelineId: waitingPipeline.id },
|
||||
});
|
||||
|
||||
if (waitingDealCount === 0) {
|
||||
const stageByName = new Map(
|
||||
waitingPipeline.stages.map((s) => [s.name, s] as const),
|
||||
);
|
||||
await prisma.deal.createMany({
|
||||
data: WAITING_DEALS.map((d) => {
|
||||
const stage = stageByName.get(d.stageName);
|
||||
if (!stage) {
|
||||
throw new Error(`Missing stage ${d.stageName} on waiting pipeline`);
|
||||
}
|
||||
return {
|
||||
organizationId: org.id,
|
||||
pipelineId: waitingPipeline!.id,
|
||||
stageId: stage.id,
|
||||
title: d.title,
|
||||
notes: d.notes,
|
||||
amount: d.amount,
|
||||
currency: 'IRR',
|
||||
expectedCloseAt: new Date(d.expectedCloseAt),
|
||||
ownerId: owner?.id,
|
||||
position: d.position,
|
||||
tags: ['دمو-کاریز'],
|
||||
};
|
||||
}),
|
||||
});
|
||||
console.log('Seeded waiting pipeline deals:', WAITING_DEALS.length);
|
||||
} else {
|
||||
console.log('Waiting pipeline deals already seeded');
|
||||
}
|
||||
|
||||
const dealsCount = await prisma.deal.count({
|
||||
where: { organizationId: org.id },
|
||||
});
|
||||
|
||||
@@ -48,7 +48,9 @@ defineProps<{
|
||||
| 'dollar'
|
||||
| 'layers'
|
||||
| 'target'
|
||||
| 'pencil';
|
||||
| 'pencil'
|
||||
| 'grid'
|
||||
| 'list';
|
||||
size?: number;
|
||||
}>();
|
||||
</script>
|
||||
@@ -275,6 +277,18 @@ defineProps<{
|
||||
<path d="M12 20h9" />
|
||||
<path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'grid'">
|
||||
<rect x="3.5" y="3.5" width="7" height="7" rx="1.2" />
|
||||
<rect x="13.5" y="3.5" width="7" height="7" rx="1.2" />
|
||||
<rect x="3.5" y="13.5" width="7" height="7" rx="1.2" />
|
||||
<rect x="13.5" y="13.5" width="7" height="7" rx="1.2" />
|
||||
</template>
|
||||
<template v-else-if="name === 'list'">
|
||||
<path d="M8 6h12M8 12h12M8 18h12" />
|
||||
<circle cx="4.5" cy="6" r="1" fill="currentColor" stroke="none" />
|
||||
<circle cx="4.5" cy="12" r="1" fill="currentColor" stroke="none" />
|
||||
<circle cx="4.5" cy="18" r="1" fill="currentColor" stroke="none" />
|
||||
</template>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import type { PipelineAccent } from '@/lib/pipeline-board';
|
||||
import { PIPELINE_ACCENT } from '@/lib/pipeline-board';
|
||||
|
||||
defineProps<{
|
||||
accent: PipelineAccent;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
add: [];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="add-deal"
|
||||
:style="{
|
||||
'--add-color': PIPELINE_ACCENT[accent].text,
|
||||
'--add-border': PIPELINE_ACCENT[accent].border,
|
||||
'--add-soft': PIPELINE_ACCENT[accent].soft,
|
||||
}"
|
||||
aria-label="افزودن معامله"
|
||||
@click="emit('add')"
|
||||
>
|
||||
<UiIcon name="plus" :size="16" />
|
||||
افزودن معامله
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.add-deal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
width: 100%;
|
||||
margin-top: 0.35rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border: 1.5px dashed var(--add-border);
|
||||
border-radius: 16px;
|
||||
background: color-mix(in srgb, var(--add-soft) 55%, white);
|
||||
color: var(--add-color);
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.add-deal:hover {
|
||||
background: var(--add-soft);
|
||||
}
|
||||
|
||||
.add-deal:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,227 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import type { PipelineAccent, PipelineDeal } from '@/lib/pipeline-board';
|
||||
import { formatCurrencyParts, PIPELINE_ACCENT } from '@/lib/pipeline-board';
|
||||
|
||||
const props = defineProps<{
|
||||
deal: PipelineDeal;
|
||||
accent: PipelineAccent;
|
||||
dragging?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
dragStart: [deal: PipelineDeal, event: DragEvent];
|
||||
dragEnd: [];
|
||||
open: [dealId: string];
|
||||
menu: [dealId: string];
|
||||
}>();
|
||||
|
||||
const money = computed(() =>
|
||||
formatCurrencyParts(props.deal.amount, props.deal.currencyUnit ?? 'تومان'),
|
||||
);
|
||||
const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
class="deal-card"
|
||||
:class="{ dragging }"
|
||||
draggable="true"
|
||||
role="listitem"
|
||||
:aria-grabbed="dragging ? 'true' : 'false'"
|
||||
:style="{
|
||||
'--badge-bg': colors.soft,
|
||||
'--badge-fg': colors.text,
|
||||
}"
|
||||
@dragstart="emit('dragStart', deal, $event)"
|
||||
@dragend="emit('dragEnd')"
|
||||
@dblclick="emit('open', deal.id)"
|
||||
>
|
||||
<div class="top">
|
||||
<div class="identity">
|
||||
<span class="badge" aria-hidden="true">{{ deal.initials }}</span>
|
||||
<div class="titles">
|
||||
<h3 @click.stop="emit('open', deal.id)">{{ deal.title }}</h3>
|
||||
<p class="desc">{{ deal.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="menu"
|
||||
aria-label="گزینه‌های معامله"
|
||||
@click.stop="emit('menu', deal.id)"
|
||||
>
|
||||
<UiIcon name="dots-v" :size="18" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="amount" dir="ltr">
|
||||
<strong>{{ money.number }}</strong>
|
||||
<span>{{ money.unit }}</span>
|
||||
</div>
|
||||
|
||||
<div class="foot">
|
||||
<img
|
||||
class="avatar"
|
||||
src="/brand/user-avatar.png"
|
||||
alt=""
|
||||
width="28"
|
||||
height="28"
|
||||
/>
|
||||
<span class="date">
|
||||
<UiIcon name="calendar" :size="14" />
|
||||
{{ deal.date }}
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.deal-card {
|
||||
background: #fff;
|
||||
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
|
||||
border-radius: 16px;
|
||||
padding: 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,
|
||||
transform 0.18s ease,
|
||||
opacity 0.18s ease;
|
||||
text-align: right;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.deal-card:hover {
|
||||
border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
|
||||
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
|
||||
}
|
||||
|
||||
.deal-card:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.deal-card.dragging {
|
||||
opacity: 0.95;
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
|
||||
border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
|
||||
}
|
||||
|
||||
.deal-card:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.identity {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.65rem;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.badge {
|
||||
flex: 0 0 auto;
|
||||
width: 2.35rem;
|
||||
height: 2.35rem;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--badge-bg);
|
||||
color: var(--badge-fg);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.titles {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.titles h3 {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.45;
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin: 0.15rem 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.menu {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
padding: 0.15rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.menu:hover,
|
||||
.menu:focus-visible {
|
||||
color: var(--ink);
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.amount {
|
||||
margin-top: 0.85rem;
|
||||
text-align: left;
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
gap: 0.05rem;
|
||||
}
|
||||
|
||||
.amount strong {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.amount span {
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.foot {
|
||||
margin-top: 0.85rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.date {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import DealCard from './DealCard.vue';
|
||||
import type { PipelineAccent, PipelineDeal } from '@/lib/pipeline-board';
|
||||
|
||||
defineProps<{
|
||||
deal: PipelineDeal;
|
||||
accent: PipelineAccent;
|
||||
x: number;
|
||||
y: number;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="overlay"
|
||||
:style="{ transform: `translate3d(${x}px, ${y}px, 0)` }"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<DealCard :deal="deal" :accent="accent" dragging />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 80;
|
||||
width: min(300px, 86vw);
|
||||
pointer-events: none;
|
||||
filter: drop-shadow(0 16px 28px rgba(15, 23, 42, 0.16));
|
||||
opacity: 0.97;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
import PipelineColumn from './PipelineColumn.vue';
|
||||
import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
|
||||
|
||||
defineProps<{
|
||||
stages: PipelineStage[];
|
||||
draggingId: string | null;
|
||||
dropStageId: string | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
dragStart: [deal: PipelineDeal, event: DragEvent];
|
||||
dragEnd: [];
|
||||
dragOver: [stageId: string, event: DragEvent];
|
||||
drop: [stageId: string, event: DragEvent, index?: number];
|
||||
addDeal: [stageId: string];
|
||||
openDeal: [dealId: string];
|
||||
menuDeal: [dealId: string];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="board" dir="rtl">
|
||||
<PipelineColumn
|
||||
v-for="stage in stages"
|
||||
:key="stage.id"
|
||||
:stage="stage"
|
||||
:dragging-id="draggingId"
|
||||
:drop-active="dropStageId === stage.id"
|
||||
@drag-start="(d, e) => emit('dragStart', d, e)"
|
||||
@drag-end="emit('dragEnd')"
|
||||
@drag-over="(id, e) => emit('dragOver', id, e)"
|
||||
@drop="(id, e, index) => emit('drop', id, e, index)"
|
||||
@add-deal="emit('addDeal', $event)"
|
||||
@open-deal="emit('openDeal', $event)"
|
||||
@menu-deal="emit('menuDeal', $event)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.board {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.board {
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.75rem;
|
||||
scroll-snap-type: x mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.board::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,209 @@
|
||||
<script setup lang="ts">
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import AddDealButton from './AddDealButton.vue';
|
||||
import DealCard from './DealCard.vue';
|
||||
import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
|
||||
import { PIPELINE_ACCENT, toFaDealCount } from '@/lib/pipeline-board';
|
||||
|
||||
defineProps<{
|
||||
stage: PipelineStage;
|
||||
draggingId: string | null;
|
||||
dropActive: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
dragStart: [deal: PipelineDeal, event: DragEvent];
|
||||
dragEnd: [];
|
||||
dragOver: [stageId: string, event: DragEvent];
|
||||
drop: [stageId: string, event: DragEvent, index?: number];
|
||||
addDeal: [stageId: string];
|
||||
openDeal: [dealId: string];
|
||||
menuDeal: [dealId: string];
|
||||
}>();
|
||||
|
||||
function onCardDragOver(stageId: string, event: DragEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
emit('dragOver', stageId, event);
|
||||
}
|
||||
|
||||
function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
emit('drop', stageId, event, index);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
class="column"
|
||||
:class="{ drop: dropActive }"
|
||||
:style="{
|
||||
'--stage-solid': PIPELINE_ACCENT[stage.color].solid,
|
||||
'--stage-soft': PIPELINE_ACCENT[stage.color].soft,
|
||||
'--stage-border': PIPELINE_ACCENT[stage.color].border,
|
||||
'--stage-text': PIPELINE_ACCENT[stage.color].text,
|
||||
}"
|
||||
@dragover.prevent="emit('dragOver', stage.id, $event)"
|
||||
@drop.prevent="emit('drop', stage.id, $event)"
|
||||
>
|
||||
<header class="column-head">
|
||||
<div class="title-wrap">
|
||||
<span class="dot" aria-hidden="true" />
|
||||
<h2>{{ stage.title }}</h2>
|
||||
</div>
|
||||
<div class="head-actions">
|
||||
<span class="count">{{ toFaDealCount(stage.deals.length) }}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="plus"
|
||||
aria-label="افزودن معامله به این مرحله"
|
||||
@click="emit('addDeal', stage.id)"
|
||||
>
|
||||
<UiIcon name="plus" :size="16" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="cards" role="list" :aria-label="stage.title">
|
||||
<div
|
||||
v-for="(deal, index) in stage.deals"
|
||||
:key="deal.id"
|
||||
class="card-slot"
|
||||
@dragover="onCardDragOver(stage.id, $event)"
|
||||
@drop="onCardDrop(stage.id, index, $event)"
|
||||
>
|
||||
<DealCard
|
||||
:deal="deal"
|
||||
:accent="stage.color"
|
||||
:dragging="draggingId === deal.id"
|
||||
@drag-start="(d, e) => emit('dragStart', d, e)"
|
||||
@drag-end="emit('dragEnd')"
|
||||
@open="emit('openDeal', $event)"
|
||||
@menu="emit('menuDeal', $event)"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="!stage.deals.length" class="empty">معامله‌ای نیست</p>
|
||||
</div>
|
||||
|
||||
<AddDealButton :accent="stage.color" @add="emit('addDeal', stage.id)" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.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, var(--stage-soft) 70%, transparent);
|
||||
border-color: color-mix(in srgb, var(--stage-border) 80%, transparent);
|
||||
}
|
||||
|
||||
.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: var(--stage-solid);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.column-head h2 {
|
||||
margin: 0;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.head-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.plus {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
border-radius: 999px;
|
||||
border: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: color-mix(in srgb, var(--accent) 14%, white);
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.plus:hover,
|
||||
.plus:focus-visible {
|
||||
background: var(--accent-soft);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
flex: 1;
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
.card-slot {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin: 1rem 0;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,261 @@
|
||||
<script setup lang="ts">
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
export type PipelineViewMode = 'kanban' | 'list';
|
||||
|
||||
defineProps<{
|
||||
pipelineName: string;
|
||||
pipelineOptions: Array<{ id: string; name: string }>;
|
||||
selectedPipelineId: string;
|
||||
viewMode: PipelineViewMode;
|
||||
search: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:viewMode': [PipelineViewMode];
|
||||
'update:search': [string];
|
||||
'update:selectedPipelineId': [string];
|
||||
filter: [];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="toolbar" dir="rtl">
|
||||
<div class="title-block">
|
||||
<span class="brand-ico" aria-hidden="true">
|
||||
<UiIcon name="briefcase" :size="18" />
|
||||
</span>
|
||||
<h1>کاریز فروش</h1>
|
||||
</div>
|
||||
|
||||
<div class="view-toggle" role="group" aria-label="نوع نمایش">
|
||||
<button
|
||||
type="button"
|
||||
class="seg"
|
||||
:class="{ on: viewMode === 'kanban' }"
|
||||
:aria-pressed="viewMode === 'kanban'"
|
||||
@click="emit('update:viewMode', 'kanban')"
|
||||
>
|
||||
<UiIcon name="grid" :size="16" />
|
||||
نمای کاریز
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="seg"
|
||||
:class="{ on: viewMode === 'list' }"
|
||||
:aria-pressed="viewMode === 'list'"
|
||||
@click="emit('update:viewMode', 'list')"
|
||||
>
|
||||
<UiIcon name="list" :size="16" />
|
||||
نمای لیست
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label class="pipeline-pick">
|
||||
<span class="sr">انتخاب کاریز</span>
|
||||
<select
|
||||
:value="selectedPipelineId"
|
||||
@change="
|
||||
emit(
|
||||
'update:selectedPipelineId',
|
||||
($event.target as HTMLSelectElement).value,
|
||||
)
|
||||
"
|
||||
>
|
||||
<option
|
||||
v-for="opt in pipelineOptions"
|
||||
:key="opt.id"
|
||||
:value="opt.id"
|
||||
>
|
||||
{{ opt.name }}
|
||||
</option>
|
||||
</select>
|
||||
<UiIcon class="chev" name="chevron" :size="16" />
|
||||
</label>
|
||||
|
||||
<label class="search">
|
||||
<UiIcon name="search" :size="16" />
|
||||
<span class="sr">جستجو</span>
|
||||
<input
|
||||
:value="search"
|
||||
type="search"
|
||||
placeholder="جستجو..."
|
||||
@input="emit('update:search', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button type="button" class="filter-btn" aria-label="فیلترها" @click="emit('filter')">
|
||||
<UiIcon name="filter" :size="16" />
|
||||
فیلترها
|
||||
</button>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
.brand-ico {
|
||||
width: 2.15rem;
|
||||
height: 2.15rem;
|
||||
border-radius: 10px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #0f766e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: inline-flex;
|
||||
background: #eef2f4;
|
||||
border-radius: 12px;
|
||||
padding: 0.2rem;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.seg {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-weight: 700;
|
||||
font-size: 0.82rem;
|
||||
padding: 0.45rem 0.75rem;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.seg.on {
|
||||
background: #fff;
|
||||
color: var(--accent);
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.seg:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.pipeline-pick {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.pipeline-pick select {
|
||||
appearance: none;
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 0.55rem 2rem 0.55rem 0.85rem;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
min-width: 150px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pipeline-pick .chev {
|
||||
position: absolute;
|
||||
left: 0.65rem;
|
||||
pointer-events: none;
|
||||
color: var(--muted);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.search {
|
||||
flex: 1 1 180px;
|
||||
min-width: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.45rem 0.75rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.search input {
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
padding: 0.55rem 0.95rem;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-btn:focus-visible,
|
||||
.pipeline-pick select:focus-visible,
|
||||
.search:focus-within {
|
||||
outline: 2px solid var(--accent-soft);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.view-toggle,
|
||||
.pipeline-pick,
|
||||
.search,
|
||||
.filter-btn {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.pipeline-pick select,
|
||||
.filter-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,227 @@
|
||||
export type PipelineAccent = 'green' | 'orange' | 'purple';
|
||||
|
||||
export type PipelineDeal = {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
amount: number;
|
||||
date: string;
|
||||
initials: string;
|
||||
/** شناسه مرحله فعلی — هنگام جابه‌جایی به‌روز می‌شود */
|
||||
stageId?: string;
|
||||
currencyUnit?: string;
|
||||
};
|
||||
|
||||
export type PipelineStage = {
|
||||
id: string;
|
||||
title: string;
|
||||
color: PipelineAccent;
|
||||
deals: PipelineDeal[];
|
||||
isWon?: boolean;
|
||||
isLost?: boolean;
|
||||
};
|
||||
|
||||
export const PIPELINE_ACCENT: Record<
|
||||
PipelineAccent,
|
||||
{ soft: string; solid: string; text: string; border: string }
|
||||
> = {
|
||||
green: {
|
||||
soft: '#ecfdf5',
|
||||
solid: '#10b981',
|
||||
text: '#047857',
|
||||
border: '#a7f3d0',
|
||||
},
|
||||
orange: {
|
||||
soft: '#fff7ed',
|
||||
solid: '#f59e0b',
|
||||
text: '#b45309',
|
||||
border: '#fde68a',
|
||||
},
|
||||
purple: {
|
||||
soft: '#f5f3ff',
|
||||
solid: '#8b5cf6',
|
||||
text: '#6d28d9',
|
||||
border: '#ddd6fe',
|
||||
},
|
||||
};
|
||||
|
||||
const ACCENT_CYCLE: PipelineAccent[] = ['green', 'orange', 'purple'];
|
||||
|
||||
/** خروجی: ۲۵۰,۰۰۰,۰۰۰ تومان */
|
||||
export function formatCurrency(amount: number, unit = 'تومان'): string {
|
||||
try {
|
||||
return `${new Intl.NumberFormat('fa-IR').format(amount)} ${unit}`;
|
||||
} catch {
|
||||
return `${amount} ${unit}`;
|
||||
}
|
||||
}
|
||||
|
||||
export function formatCurrencyParts(
|
||||
amount: number,
|
||||
unit = 'تومان',
|
||||
): { number: string; unit: string } {
|
||||
try {
|
||||
return {
|
||||
number: new Intl.NumberFormat('fa-IR').format(amount),
|
||||
unit,
|
||||
};
|
||||
} catch {
|
||||
return { number: String(amount), unit };
|
||||
}
|
||||
}
|
||||
|
||||
export function initialsFromTitle(title: string): string {
|
||||
const parts = title
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.filter(Boolean);
|
||||
if (!parts.length) return '؟';
|
||||
if (parts.length === 1) return parts[0]!.slice(0, 2);
|
||||
return parts
|
||||
.slice(0, 3)
|
||||
.map((p) => p[0]!)
|
||||
.join('');
|
||||
}
|
||||
|
||||
export function currencyUnitLabel(currency: string): string {
|
||||
if (currency === 'IRR' || currency === 'IRT') return 'تومان';
|
||||
return currency;
|
||||
}
|
||||
|
||||
/** نگاشت برد API به مدل UI کاریز */
|
||||
export function mapBoardToStages(
|
||||
board: {
|
||||
stages: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
isWon: boolean;
|
||||
isLost: boolean;
|
||||
deals: Array<{
|
||||
id: string;
|
||||
title: string;
|
||||
amount: number | null;
|
||||
currency: string;
|
||||
notes: string | null;
|
||||
stageId: string;
|
||||
expectedCloseAt: string | null;
|
||||
createdAt: string;
|
||||
person: { fullName: string } | null;
|
||||
company: { name: string } | null;
|
||||
}>;
|
||||
}>;
|
||||
},
|
||||
formatDate: (iso: string) => string,
|
||||
): PipelineStage[] {
|
||||
let openIndex = 0;
|
||||
return board.stages.map((stage) => {
|
||||
let color: PipelineAccent;
|
||||
if (stage.isWon) color = 'green';
|
||||
else if (stage.isLost) color = 'orange';
|
||||
else {
|
||||
color = ACCENT_CYCLE[openIndex % ACCENT_CYCLE.length]!;
|
||||
openIndex += 1;
|
||||
}
|
||||
|
||||
return {
|
||||
id: stage.id,
|
||||
title: stage.name,
|
||||
color,
|
||||
isWon: stage.isWon,
|
||||
isLost: stage.isLost,
|
||||
deals: stage.deals.map((deal) => {
|
||||
const description =
|
||||
deal.notes?.trim() ||
|
||||
deal.company?.name ||
|
||||
deal.person?.fullName ||
|
||||
'';
|
||||
const dateIso = deal.expectedCloseAt || deal.createdAt;
|
||||
return {
|
||||
id: deal.id,
|
||||
title: deal.title,
|
||||
description,
|
||||
amount: deal.amount ?? 0,
|
||||
date: formatDate(dateIso),
|
||||
initials: initialsFromTitle(
|
||||
deal.company?.name || deal.title,
|
||||
),
|
||||
stageId: deal.stageId,
|
||||
currencyUnit: currencyUnitLabel(deal.currency),
|
||||
};
|
||||
}),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* جابه‌جایی معامله بین مراحل یا تغییر ترتیب داخل یک مرحله.
|
||||
* فقط state محلی را تغییر می‌دهد — آماده اتصال به API.
|
||||
*/
|
||||
export function updateDealStage(
|
||||
stages: PipelineStage[],
|
||||
dealId: string,
|
||||
stageId: string,
|
||||
toIndex?: number,
|
||||
): PipelineStage[] {
|
||||
let moving: PipelineDeal | null = null;
|
||||
let fromStageId = '';
|
||||
let fromIndex = -1;
|
||||
|
||||
for (const stage of stages) {
|
||||
const idx = stage.deals.findIndex((d) => d.id === dealId);
|
||||
if (idx !== -1) {
|
||||
moving = stage.deals[idx]!;
|
||||
fromStageId = stage.id;
|
||||
fromIndex = idx;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!moving) return stages;
|
||||
|
||||
const without = stages.map((stage) => {
|
||||
if (stage.id !== fromStageId) return stage;
|
||||
return {
|
||||
...stage,
|
||||
deals: stage.deals.filter((d) => d.id !== dealId),
|
||||
};
|
||||
});
|
||||
|
||||
return without.map((stage) => {
|
||||
if (stage.id !== stageId) return stage;
|
||||
const next = [...stage.deals];
|
||||
let insertAt =
|
||||
toIndex == null || toIndex < 0 || toIndex > next.length
|
||||
? next.length
|
||||
: toIndex;
|
||||
if (
|
||||
fromStageId === stageId &&
|
||||
fromIndex >= 0 &&
|
||||
toIndex != null &&
|
||||
toIndex > fromIndex
|
||||
) {
|
||||
insertAt = Math.max(0, insertAt - 1);
|
||||
}
|
||||
next.splice(insertAt, 0, { ...moving!, stageId });
|
||||
return { ...stage, deals: next };
|
||||
});
|
||||
}
|
||||
|
||||
export function filterStagesByQuery(
|
||||
stages: PipelineStage[],
|
||||
query: string,
|
||||
): PipelineStage[] {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return stages;
|
||||
return stages.map((stage) => ({
|
||||
...stage,
|
||||
deals: stage.deals.filter(
|
||||
(d) =>
|
||||
d.title.toLowerCase().includes(q) ||
|
||||
d.description.toLowerCase().includes(q),
|
||||
),
|
||||
}));
|
||||
}
|
||||
|
||||
export function toFaDealCount(n: number): string {
|
||||
return `${new Intl.NumberFormat('fa-IR').format(n)} معامله`;
|
||||
}
|
||||
@@ -253,6 +253,13 @@ async function load() {
|
||||
companyId.value = route.query.companyId;
|
||||
if (!personId.value) contactKind.value = 'company';
|
||||
}
|
||||
if (
|
||||
typeof route.query.stageId === 'string' &&
|
||||
route.query.stageId &&
|
||||
stages.value.some((s) => s.id === route.query.stageId)
|
||||
) {
|
||||
stageId.value = route.query.stageId;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
error.value = 'بارگذاری فرم معامله ناموفق بود.';
|
||||
|
||||
@@ -1,46 +1,80 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||
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 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 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 stages = ref<PipelineStage[]>([]);
|
||||
const pipelines = ref<PipelineDto[]>([]);
|
||||
const draggingId = ref<string | null>(null);
|
||||
const dropStageId = ref<string | null>(null);
|
||||
const boardPipelineId = ref('');
|
||||
const viewMode = ref<PipelineViewMode>('kanban');
|
||||
const search = ref('');
|
||||
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 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 openCount = computed(
|
||||
() =>
|
||||
board.value?.stages
|
||||
.filter((s) => !s.isWon && !s.isLost)
|
||||
.reduce((n, s) => n + s.deals.length, 0) ?? 0,
|
||||
const pipelineOptions = computed(() =>
|
||||
pipelines.value.map((p) => ({
|
||||
id: p.id,
|
||||
name: p.isDefault ? `${p.name} (پیش‌فرض)` : p.name,
|
||||
})),
|
||||
);
|
||||
|
||||
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}`;
|
||||
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() {
|
||||
@@ -54,11 +88,14 @@ async function load() {
|
||||
try {
|
||||
await loadPipelines();
|
||||
const pipelineId =
|
||||
typeof route.query.pipelineId === 'string' ? route.query.pipelineId : undefined;
|
||||
typeof route.query.pipelineId === 'string'
|
||||
? route.query.pipelineId
|
||||
: undefined;
|
||||
const { data } = await api.get<PipelineBoardDto>('/pipelines/board', {
|
||||
params: pipelineId ? { pipelineId } : undefined,
|
||||
});
|
||||
board.value = data;
|
||||
boardPipelineId.value = data.pipeline.id;
|
||||
stages.value = mapBoardToStages(data, formatDealDate);
|
||||
if (!pipelineId || pipelineId !== data.pipeline.id) {
|
||||
await router.replace({
|
||||
name: 'pipeline',
|
||||
@@ -76,11 +113,6 @@ async function load() {
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
@@ -98,43 +130,108 @@ async function createPipeline() {
|
||||
}
|
||||
}
|
||||
|
||||
function onDragStart(deal: DealDto, event: DragEvent) {
|
||||
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 onDrop(stageId: string, event: DragEvent) {
|
||||
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;
|
||||
if (!dealId || !board.value) return;
|
||||
overlayDeal.value = null;
|
||||
if (!dealId || moving.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 = 'جابه‌جایی معامله ناموفق بود.';
|
||||
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 openDeal(id: string) {
|
||||
void router.push({ name: 'deal-detail', params: { id } });
|
||||
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(
|
||||
@@ -145,58 +242,52 @@ watch(
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(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">
|
||||
<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>
|
||||
<section class="page" dir="rtl">
|
||||
<PipelineToolbar
|
||||
pipeline-name="کاریز فروش"
|
||||
:pipeline-options="pipelineOptions"
|
||||
:selected-pipeline-id="selectedPipelineId"
|
||||
:view-mode="viewMode"
|
||||
:search="search"
|
||||
@update:view-mode="viewMode = $event"
|
||||
@update:search="search = $event"
|
||||
@update:selected-pipeline-id="selectedPipelineId = $event"
|
||||
@filter="onFilter"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<div v-if="canCreatePipeline" class="create-row">
|
||||
<button
|
||||
v-if="canCreatePipeline"
|
||||
class="btn btn-ghost"
|
||||
class="btn-ghost-sm"
|
||||
type="button"
|
||||
@click="showCreate = !showCreate"
|
||||
>
|
||||
کاریز جدید
|
||||
</button>
|
||||
<button class="btn-ghost-sm" type="button" :disabled="loading" @click="load">
|
||||
بروزرسانی
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form v-if="showCreate && canCreatePipeline" class="create-box" @submit.prevent="createPipeline">
|
||||
<form
|
||||
v-if="showCreate && canCreatePipeline"
|
||||
class="create-box"
|
||||
@submit.prevent="createPipeline"
|
||||
>
|
||||
<input
|
||||
v-model="newName"
|
||||
type="text"
|
||||
@@ -208,63 +299,45 @@ onMounted(load);
|
||||
<button class="btn" type="submit" :disabled="saving || newName.trim().length < 2">
|
||||
{{ saving ? 'در حال ساخت…' : 'ساخت' }}
|
||||
</button>
|
||||
<button class="btn btn-ghost" type="button" @click="showCreate = false">انصراف</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>
|
||||
<p v-else-if="loading && !stages.length" 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 v-if="viewMode === 'list'" class="list-placeholder">
|
||||
نمای لیست معاملات
|
||||
</div>
|
||||
|
||||
<PipelineBoard
|
||||
v-else-if="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>
|
||||
@@ -272,67 +345,27 @@ onMounted(load);
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
gap: 0.55rem;
|
||||
min-width: 0;
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.create-row {
|
||||
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;
|
||||
.btn-ghost-sm {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.65rem 0.85rem;
|
||||
background: #fff;
|
||||
font: inherit;
|
||||
color: var(--ink);
|
||||
color: var(--accent);
|
||||
border-radius: 10px;
|
||||
padding: 0.4rem 0.75rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.create-box {
|
||||
@@ -340,200 +373,53 @@ h1 {
|
||||
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;
|
||||
padding: 0.65rem 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 {
|
||||
.list-placeholder {
|
||||
margin-top: 0.5rem;
|
||||
padding: 2.5rem 1rem;
|
||||
text-align: center;
|
||||
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 dashed var(--line);
|
||||
border-radius: var(--radius);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.menu-pop {
|
||||
position: fixed;
|
||||
inset-inline-start: 1rem;
|
||||
bottom: 5.5rem;
|
||||
z-index: 40;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.8rem;
|
||||
cursor: grab;
|
||||
box-shadow: var(--shadow);
|
||||
padding: 0.35rem;
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.menu-pop button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0.45rem 0.85rem;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: var(--ink);
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user