Unify the web UI on shared controls and let pipeline columns be managed on the board.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -21,6 +21,27 @@ export class CreatePipelineDto {
|
||||
name!: string;
|
||||
}
|
||||
|
||||
export class CreatePipelineStageDto {
|
||||
@IsString()
|
||||
@MinLength(1)
|
||||
@MaxLength(80)
|
||||
name!: string;
|
||||
}
|
||||
|
||||
export class UpdatePipelineStageDto {
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
@MinLength(1)
|
||||
@MaxLength(80)
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export class ReorderPipelineStagesDto {
|
||||
@IsArray()
|
||||
@IsString({ each: true })
|
||||
stageIds!: string[];
|
||||
}
|
||||
|
||||
export class DealLineItemInputDto {
|
||||
@IsOptional()
|
||||
@ValidateIf((_, v) => v !== '' && v != null)
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import {
|
||||
Body,
|
||||
Controller,
|
||||
Delete,
|
||||
Get,
|
||||
Param,
|
||||
Patch,
|
||||
Post,
|
||||
Query,
|
||||
UseGuards,
|
||||
@@ -10,7 +13,12 @@ import { JwtAuthGuard } from '../auth/jwt-auth.guard';
|
||||
import { CurrentUser } from '../auth/current-user.decorator';
|
||||
import { Roles } from '../auth/roles.decorator';
|
||||
import { RolesGuard } from '../auth/roles.guard';
|
||||
import { CreatePipelineDto } from './dto';
|
||||
import {
|
||||
CreatePipelineDto,
|
||||
CreatePipelineStageDto,
|
||||
ReorderPipelineStagesDto,
|
||||
UpdatePipelineStageDto,
|
||||
} from './dto';
|
||||
import { PipelinesService } from './pipelines.service';
|
||||
|
||||
@Controller('pipelines')
|
||||
@@ -42,4 +50,62 @@ export class PipelinesController {
|
||||
) {
|
||||
return this.pipelinesService.create(user.organizationId, dto.name);
|
||||
}
|
||||
|
||||
@Post(':pipelineId/stages')
|
||||
@Roles('owner', 'admin')
|
||||
createStage(
|
||||
@CurrentUser() user: { organizationId: string },
|
||||
@Param('pipelineId') pipelineId: string,
|
||||
@Body() dto: CreatePipelineStageDto,
|
||||
) {
|
||||
return this.pipelinesService.createStage(
|
||||
user.organizationId,
|
||||
pipelineId,
|
||||
dto.name,
|
||||
);
|
||||
}
|
||||
|
||||
@Patch(':pipelineId/stages/order')
|
||||
@Roles('owner', 'admin')
|
||||
reorderStages(
|
||||
@CurrentUser() user: { organizationId: string },
|
||||
@Param('pipelineId') pipelineId: string,
|
||||
@Body() dto: ReorderPipelineStagesDto,
|
||||
) {
|
||||
return this.pipelinesService.reorderStages(
|
||||
user.organizationId,
|
||||
pipelineId,
|
||||
dto.stageIds,
|
||||
);
|
||||
}
|
||||
|
||||
@Patch(':pipelineId/stages/:stageId')
|
||||
@Roles('owner', 'admin')
|
||||
updateStage(
|
||||
@CurrentUser() user: { organizationId: string },
|
||||
@Param('pipelineId') pipelineId: string,
|
||||
@Param('stageId') stageId: string,
|
||||
@Body() dto: UpdatePipelineStageDto,
|
||||
) {
|
||||
return this.pipelinesService.updateStage(
|
||||
user.organizationId,
|
||||
pipelineId,
|
||||
stageId,
|
||||
dto.name,
|
||||
);
|
||||
}
|
||||
|
||||
@Delete(':pipelineId/stages/:stageId')
|
||||
@Roles('owner', 'admin')
|
||||
deleteStage(
|
||||
@CurrentUser() user: { organizationId: string },
|
||||
@Param('pipelineId') pipelineId: string,
|
||||
@Param('stageId') stageId: string,
|
||||
) {
|
||||
return this.pipelinesService.deleteStage(
|
||||
user.organizationId,
|
||||
pipelineId,
|
||||
stageId,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import { Injectable, NotFoundException } from '@nestjs/common';
|
||||
import {
|
||||
BadRequestException,
|
||||
Injectable,
|
||||
NotFoundException,
|
||||
} from '@nestjs/common';
|
||||
import type {
|
||||
DealDto,
|
||||
PipelineBoardDto,
|
||||
@@ -114,6 +118,121 @@ export class PipelinesService {
|
||||
return this.toPipelineDto(created);
|
||||
}
|
||||
|
||||
async createStage(
|
||||
organizationId: string,
|
||||
pipelineId: string,
|
||||
name: string,
|
||||
): Promise<PipelineDto> {
|
||||
const pipeline = await this.getOwnedPipeline(organizationId, pipelineId);
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) throw new BadRequestException('نام ستون لازم است');
|
||||
|
||||
const firstClosed = pipeline.stages.findIndex((s) => s.isWon || s.isLost);
|
||||
const insertAt = firstClosed === -1 ? pipeline.stages.length : firstClosed;
|
||||
|
||||
await this.prisma.$transaction(async (tx) => {
|
||||
await tx.pipelineStage.updateMany({
|
||||
where: { pipelineId: pipeline.id, position: { gte: insertAt } },
|
||||
data: { position: { increment: 1 } },
|
||||
});
|
||||
await tx.pipelineStage.create({
|
||||
data: {
|
||||
pipelineId: pipeline.id,
|
||||
name: trimmed,
|
||||
position: insertAt,
|
||||
isWon: false,
|
||||
isLost: false,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
return this.getOwnedPipelineDto(organizationId, pipeline.id);
|
||||
}
|
||||
|
||||
async updateStage(
|
||||
organizationId: string,
|
||||
pipelineId: string,
|
||||
stageId: string,
|
||||
name?: string,
|
||||
): Promise<PipelineDto> {
|
||||
const pipeline = await this.getOwnedPipeline(organizationId, pipelineId);
|
||||
const stage = pipeline.stages.find((s) => s.id === stageId);
|
||||
if (!stage) throw new NotFoundException('ستون پیدا نشد');
|
||||
|
||||
const trimmed = name?.trim() ?? '';
|
||||
if (!trimmed) throw new BadRequestException('نام ستون لازم است');
|
||||
|
||||
await this.prisma.pipelineStage.update({
|
||||
where: { id: stage.id },
|
||||
data: { name: trimmed },
|
||||
});
|
||||
|
||||
return this.getOwnedPipelineDto(organizationId, pipeline.id);
|
||||
}
|
||||
|
||||
async deleteStage(
|
||||
organizationId: string,
|
||||
pipelineId: string,
|
||||
stageId: string,
|
||||
): Promise<PipelineDto> {
|
||||
const pipeline = await this.getOwnedPipeline(organizationId, pipelineId);
|
||||
const stage = pipeline.stages.find((s) => s.id === stageId);
|
||||
if (!stage) throw new NotFoundException('ستون پیدا نشد');
|
||||
if (pipeline.stages.length <= 1) {
|
||||
throw new BadRequestException('حداقل یک ستون باید باقی بماند');
|
||||
}
|
||||
|
||||
const dealCount = await this.prisma.deal.count({
|
||||
where: { organizationId, stageId: stage.id },
|
||||
});
|
||||
if (dealCount > 0) {
|
||||
throw new BadRequestException(
|
||||
'ابتدا معاملات این ستون را به ستون دیگری منتقل کنید',
|
||||
);
|
||||
}
|
||||
|
||||
const remaining = pipeline.stages.filter((s) => s.id !== stage.id);
|
||||
await this.prisma.$transaction([
|
||||
this.prisma.pipelineStage.delete({ where: { id: stage.id } }),
|
||||
...remaining.map((s, index) =>
|
||||
this.prisma.pipelineStage.update({
|
||||
where: { id: s.id },
|
||||
data: { position: index },
|
||||
}),
|
||||
),
|
||||
]);
|
||||
|
||||
return this.getOwnedPipelineDto(organizationId, pipeline.id);
|
||||
}
|
||||
|
||||
async reorderStages(
|
||||
organizationId: string,
|
||||
pipelineId: string,
|
||||
stageIds: string[],
|
||||
): Promise<PipelineDto> {
|
||||
const pipeline = await this.getOwnedPipeline(organizationId, pipelineId);
|
||||
const currentIds = pipeline.stages.map((s) => s.id);
|
||||
const unique = new Set(stageIds);
|
||||
if (
|
||||
stageIds.length !== currentIds.length ||
|
||||
unique.size !== currentIds.length ||
|
||||
currentIds.some((id) => !unique.has(id))
|
||||
) {
|
||||
throw new BadRequestException('ترتیب ستونها نامعتبر است');
|
||||
}
|
||||
|
||||
await this.prisma.$transaction(
|
||||
stageIds.map((id, index) =>
|
||||
this.prisma.pipelineStage.update({
|
||||
where: { id },
|
||||
data: { position: index },
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
return this.getOwnedPipelineDto(organizationId, pipeline.id);
|
||||
}
|
||||
|
||||
async getBoard(
|
||||
organizationId: string,
|
||||
pipelineId?: string,
|
||||
@@ -232,6 +351,23 @@ export class PipelinesService {
|
||||
};
|
||||
}
|
||||
|
||||
private async getOwnedPipeline(organizationId: string, pipelineId: string) {
|
||||
const pipeline = await this.prisma.pipeline.findFirst({
|
||||
where: { id: pipelineId, organizationId },
|
||||
include: { stages: { orderBy: { position: 'asc' } } },
|
||||
});
|
||||
if (!pipeline) throw new NotFoundException('کاریز پیدا نشد');
|
||||
return pipeline;
|
||||
}
|
||||
|
||||
private async getOwnedPipelineDto(
|
||||
organizationId: string,
|
||||
pipelineId: string,
|
||||
): Promise<PipelineDto> {
|
||||
const pipeline = await this.getOwnedPipeline(organizationId, pipelineId);
|
||||
return this.toPipelineDto(pipeline);
|
||||
}
|
||||
|
||||
private toPipelineDto(row: {
|
||||
id: string;
|
||||
name: string;
|
||||
|
||||
@@ -12,8 +12,10 @@
|
||||
"dependencies": {
|
||||
"@mento/shared": "*",
|
||||
"axios": "^1.8.4",
|
||||
"echarts": "^6.1.0",
|
||||
"pinia": "^3.0.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-echarts": "^8.3.0",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
|
||||
import type { RouteLocationRaw } from 'vue-router';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
const FAB_SIZE = 56;
|
||||
const FAB_SIZE = 36;
|
||||
const FAB_MARGIN = 20;
|
||||
const POS_KEY = 'mento.quickCreateFab';
|
||||
|
||||
@@ -164,13 +164,18 @@ const fabStyle = computed(() => ({
|
||||
}));
|
||||
|
||||
const panelStyle = computed(() => {
|
||||
const gap = 18;
|
||||
const gap = 12;
|
||||
const edge = 16;
|
||||
const width = Math.min(390, viewport.value.w - 32);
|
||||
let left = fabPos.value.left;
|
||||
left = Math.min(left, viewport.value.w - width - 16);
|
||||
left = Math.max(16, left);
|
||||
const spaceAbove = fabPos.value.top;
|
||||
const placeAbove = spaceAbove > 360;
|
||||
left = Math.min(left, viewport.value.w - width - edge);
|
||||
left = Math.max(edge, left);
|
||||
|
||||
const spaceAbove = fabPos.value.top - edge;
|
||||
const spaceBelow = viewport.value.h - (fabPos.value.top + FAB_SIZE) - edge;
|
||||
const placeAbove = spaceAbove >= spaceBelow;
|
||||
const maxHeight = Math.max(0, (placeAbove ? spaceAbove : spaceBelow) - gap);
|
||||
|
||||
if (placeAbove) {
|
||||
return {
|
||||
left: `${left}px`,
|
||||
@@ -178,6 +183,7 @@ const panelStyle = computed(() => {
|
||||
bottom: `${viewport.value.h - fabPos.value.top + gap}px`,
|
||||
top: 'auto',
|
||||
width: `${width}px`,
|
||||
maxHeight: `${maxHeight}px`,
|
||||
};
|
||||
}
|
||||
return {
|
||||
@@ -186,6 +192,7 @@ const panelStyle = computed(() => {
|
||||
top: `${fabPos.value.top + FAB_SIZE + gap}px`,
|
||||
bottom: 'auto',
|
||||
width: `${width}px`,
|
||||
maxHeight: `${maxHeight}px`,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -257,21 +264,23 @@ onBeforeUnmount(() => {
|
||||
:style="panelStyle"
|
||||
>
|
||||
<h2 id="qc-title">ایجاد سریع</h2>
|
||||
<button
|
||||
v-for="item in items"
|
||||
:key="item.key"
|
||||
class="item"
|
||||
type="button"
|
||||
@click="go(item.to)"
|
||||
>
|
||||
<span class="ico" :class="item.tone">
|
||||
<UiIcon :name="item.icon" :size="26" />
|
||||
</span>
|
||||
<span class="copy">
|
||||
<strong>{{ item.title }}</strong>
|
||||
<small>{{ item.desc }}</small>
|
||||
</span>
|
||||
</button>
|
||||
<div class="items">
|
||||
<button
|
||||
v-for="item in items"
|
||||
:key="item.key"
|
||||
class="item"
|
||||
type="button"
|
||||
@click="go(item.to)"
|
||||
>
|
||||
<span class="item-ico" :class="item.tone">
|
||||
<UiIcon :name="item.icon" :size="26" />
|
||||
</span>
|
||||
<span class="copy">
|
||||
<strong>{{ item.title }}</strong>
|
||||
<small>{{ item.desc }}</small>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button
|
||||
@@ -289,7 +298,7 @@ onBeforeUnmount(() => {
|
||||
@pointercancel="onFabPointerUp"
|
||||
>
|
||||
<span class="fab-face" aria-hidden="true">
|
||||
<UiIcon :name="isQuickCreateOpen ? 'x' : 'apps-plus'" :size="22" />
|
||||
<UiIcon :name="isQuickCreateOpen ? 'x' : 'apps-plus'" :size="28" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -315,29 +324,43 @@ onBeforeUnmount(() => {
|
||||
position: fixed;
|
||||
z-index: 92;
|
||||
width: 390px;
|
||||
max-height: min(540px, calc(100dvh - 80px));
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border-radius: 28px;
|
||||
padding: 20px;
|
||||
padding: 16px 16px 12px;
|
||||
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
margin: 0 0 16px;
|
||||
flex-shrink: 0;
|
||||
margin: 0 0 12px;
|
||||
text-align: right;
|
||||
font-size: 22px;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.items {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding-left: 2px;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 82px;
|
||||
margin-bottom: 10px;
|
||||
min-height: 68px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 0 14px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #eef1f2;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
@@ -347,11 +370,7 @@ onBeforeUnmount(() => {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ico {
|
||||
.item-ico {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 14px;
|
||||
@@ -361,23 +380,23 @@ onBeforeUnmount(() => {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ico.person {
|
||||
.item-ico.person {
|
||||
background: #0d9488;
|
||||
}
|
||||
|
||||
.ico.company {
|
||||
.item-ico.company {
|
||||
background: #22d3ee;
|
||||
}
|
||||
|
||||
.ico.deal {
|
||||
.item-ico.deal {
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
.ico.activity {
|
||||
.item-ico.activity {
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
.ico.note {
|
||||
.item-ico.note {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
@@ -403,12 +422,14 @@ onBeforeUnmount(() => {
|
||||
.fab {
|
||||
position: fixed;
|
||||
z-index: 93;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
box-sizing: border-box;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(145deg, #0f766e 0%, #14b8a6 100%);
|
||||
color: #fff;
|
||||
display: grid;
|
||||
@@ -437,7 +458,11 @@ onBeforeUnmount(() => {
|
||||
|
||||
.fab :deep(.ico) {
|
||||
display: block;
|
||||
stroke-width: 1.55;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
max-width: 28px;
|
||||
max-height: 28px;
|
||||
stroke-width: 1.7;
|
||||
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import type { HomeDashboardTrendPointDto } from '@mento/shared';
|
||||
import UiChart, { type UiChartOption } from '@/components/ui/UiChart.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
trend: HomeDashboardTrendPointDto[];
|
||||
@@ -20,33 +21,61 @@ const demoTrend: HomeDashboardTrendPointDto[] = [
|
||||
const trend = computed(() => (props.trend.length ? props.trend : demoTrend));
|
||||
const change = computed(() => props.changePercent ?? 14);
|
||||
|
||||
const points = computed(() => {
|
||||
const rows = trend.value;
|
||||
const max = Math.max(...rows.map((p) => p.amount), 1);
|
||||
const w = 360;
|
||||
const h = 150;
|
||||
const padX = 16;
|
||||
const padY = 36;
|
||||
return rows.map((p, i) => ({
|
||||
...p,
|
||||
x: padX + (i / Math.max(rows.length - 1, 1)) * (w - padX * 2),
|
||||
y: h - padY - (p.amount / max) * (h - padY * 2),
|
||||
}));
|
||||
});
|
||||
|
||||
const line = computed(() => points.value.map((p) => `${p.x},${p.y}`).join(' '));
|
||||
|
||||
const area = computed(() => {
|
||||
if (!points.value.length) return '';
|
||||
const first = points.value[0]!;
|
||||
const last = points.value[points.value.length - 1]!;
|
||||
return `${line.value} ${last.x},160 ${first.x},160`;
|
||||
});
|
||||
|
||||
const highlight = computed(() => {
|
||||
if (!points.value.length) return null;
|
||||
return points.value.reduce((best, cur) => (cur.amount >= best.amount ? cur : best));
|
||||
});
|
||||
const option = computed<UiChartOption>(() => ({
|
||||
animationDuration: 400,
|
||||
grid: { top: 28, right: 8, bottom: 28, left: 8, containLabel: true },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
textStyle: { fontFamily: 'IRANSans, Tahoma, sans-serif' },
|
||||
formatter: (params) => {
|
||||
const row = Array.isArray(params) ? params[0] : params;
|
||||
const point = trend.value[row.dataIndex ?? 0];
|
||||
if (!point) return '';
|
||||
return `${point.monthLabel}<br/>${props.formatAmount(point.amount)}`;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: trend.value.map((p) => p.monthLabel),
|
||||
boundaryGap: false,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#94a3b8',
|
||||
fontFamily: 'IRANSans, Tahoma, sans-serif',
|
||||
fontSize: 11,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { lineStyle: { color: '#eef2f7' } },
|
||||
axisLabel: { show: false },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
data: trend.value.map((p) => p.amount),
|
||||
smooth: 0.35,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: { color: '#14b8a6', borderColor: '#fff', borderWidth: 2 },
|
||||
lineStyle: { color: '#14b8a6', width: 3 },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(20, 184, 166, 0.28)' },
|
||||
{ offset: 1, color: 'rgba(20, 184, 166, 0)' },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -57,73 +86,17 @@ const highlight = computed(() => {
|
||||
{{ formatChange(change) }} نسبت به ماه قبل
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div class="chart-wrap">
|
||||
<svg viewBox="0 0 360 170" class="line-chart" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="homeTrendFill" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#14b8a6" stop-opacity="0.28" />
|
||||
<stop offset="100%" stop-color="#14b8a6" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<line
|
||||
v-for="y in [40, 75, 110, 145]"
|
||||
:key="y"
|
||||
x1="12"
|
||||
:y1="y"
|
||||
x2="348"
|
||||
:y2="y"
|
||||
stroke="#eef2f7"
|
||||
stroke-width="1"
|
||||
/>
|
||||
<polygon v-if="area" :points="area" fill="url(#homeTrendFill)" />
|
||||
<polyline
|
||||
v-if="line"
|
||||
:points="line"
|
||||
fill="none"
|
||||
stroke="#14b8a6"
|
||||
stroke-width="3.2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<g v-for="(p, i) in points" :key="i">
|
||||
<circle :cx="p.x" :cy="p.y" r="4.5" fill="#fff" stroke="#14b8a6" stroke-width="2.4" />
|
||||
</g>
|
||||
<g v-if="highlight">
|
||||
<rect
|
||||
:x="Math.min(Math.max(highlight.x - 52, 4), 256)"
|
||||
:y="highlight.y - 32"
|
||||
width="104"
|
||||
height="24"
|
||||
rx="8"
|
||||
fill="#0f766e"
|
||||
/>
|
||||
<text
|
||||
:x="Math.min(Math.max(highlight.x, 56), 308)"
|
||||
:y="highlight.y - 16"
|
||||
text-anchor="middle"
|
||||
fill="#fff"
|
||||
font-size="9.5"
|
||||
font-family="IRANSans, Tahoma, sans-serif"
|
||||
>
|
||||
{{ formatAmount(highlight.amount) }}
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="chart-labels">
|
||||
<span v-for="p in trend" :key="p.monthKey">{{ p.monthLabel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<UiChart :option="option" height="210px" />
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.panel {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 1rem 1.1rem 0.9rem;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--pad-modal);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
|
||||
border: 1px solid #eef2f7;
|
||||
border: 1px solid var(--line);
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -135,7 +108,7 @@ const highlight = computed(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -149,7 +122,7 @@ h2 {
|
||||
font-weight: 700;
|
||||
color: #16a34a;
|
||||
background: #dcfce7;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.18rem 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -158,24 +131,4 @@ h2 {
|
||||
color: #dc2626;
|
||||
background: #fee2e2;
|
||||
}
|
||||
|
||||
.chart-wrap {
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
margin-top: auto;
|
||||
padding-top: 2.25rem;
|
||||
}
|
||||
|
||||
.line-chart {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.chart-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #94a3b8;
|
||||
font-size: 0.72rem;
|
||||
padding: 0 0.35rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { computed } from 'vue';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
import type { HomeDashboardSourceDto } from '@mento/shared';
|
||||
import UiChart, { type UiChartOption } from '@/components/ui/UiChart.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
sources: HomeDashboardSourceDto[];
|
||||
@@ -18,17 +19,31 @@ const demoSources: HomeDashboardSourceDto[] = [
|
||||
const colors = ['#2563eb', '#14b8a6', '#22c55e', '#fb923c', '#94a3b8'];
|
||||
|
||||
const rows = computed(() => (props.sources.length ? props.sources : demoSources));
|
||||
|
||||
const segments = computed(() => {
|
||||
let offset = 0;
|
||||
return rows.value.map((s, i) => {
|
||||
const seg = { ...s, color: colors[i % colors.length], offset };
|
||||
offset += s.percent;
|
||||
return seg;
|
||||
});
|
||||
});
|
||||
|
||||
const total = computed(() => rows.value.reduce((a, s) => a + s.count, 0));
|
||||
|
||||
const option = computed<UiChartOption>(() => ({
|
||||
animationDuration: 400,
|
||||
color: colors,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
textStyle: { fontFamily: 'IRANSans, Tahoma, sans-serif' },
|
||||
formatter: (p) => {
|
||||
const item = Array.isArray(p) ? p[0] : p;
|
||||
return `${item.name}<br/>${toFaDigits(Number(item.value ?? 0))} — ${toFaDigits(item.percent ?? 0)}٪`;
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['58%', '82%'],
|
||||
center: ['50%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: rows.value.map((s) => ({ name: s.label, value: s.count })),
|
||||
},
|
||||
],
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -39,23 +54,7 @@ const total = computed(() => rows.value.reduce((a, s) => a + s.count, 0));
|
||||
|
||||
<div class="donut-wrap">
|
||||
<div class="donut-chart-box">
|
||||
<svg viewBox="0 0 140 140" class="donut-chart" aria-hidden="true">
|
||||
<circle cx="70" cy="70" r="48" fill="none" stroke="#eef2f7" stroke-width="16" />
|
||||
<circle
|
||||
v-for="seg in segments"
|
||||
:key="seg.label"
|
||||
cx="70"
|
||||
cy="70"
|
||||
r="48"
|
||||
fill="none"
|
||||
:stroke="seg.color"
|
||||
stroke-width="16"
|
||||
stroke-linecap="butt"
|
||||
:stroke-dasharray="`${seg.percent * 3.016} 301.6`"
|
||||
:stroke-dashoffset="`${-seg.offset * 3.016}`"
|
||||
transform="rotate(-90 70 70)"
|
||||
/>
|
||||
</svg>
|
||||
<UiChart :option="option" height="132px" />
|
||||
<div class="donut-center">
|
||||
<strong>{{ toFaDigits(total) }}</strong>
|
||||
<span>مشتری</span>
|
||||
@@ -63,10 +62,10 @@ const total = computed(() => rows.value.reduce((a, s) => a + s.count, 0));
|
||||
</div>
|
||||
|
||||
<ul class="donut-legend">
|
||||
<li v-for="seg in segments" :key="seg.label">
|
||||
<span class="dot" :style="{ background: seg.color }" />
|
||||
<span class="lbl">{{ seg.label }}</span>
|
||||
<em>{{ toFaDigits(seg.percent) }}٪</em>
|
||||
<li v-for="(row, i) in rows" :key="row.label">
|
||||
<span class="dot" :style="{ background: colors[i % colors.length] }" />
|
||||
<span class="lbl">{{ row.label }}</span>
|
||||
<em>{{ toFaDigits(row.percent) }}٪</em>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -76,10 +75,10 @@ const total = computed(() => rows.value.reduce((a, s) => a + s.count, 0));
|
||||
<style scoped>
|
||||
.panel {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 1rem 1.1rem;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--pad-modal);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
|
||||
border: 1px solid #eef2f7;
|
||||
border: 1px solid var(--line);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -106,11 +105,6 @@ h2 {
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
.donut-chart {
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
.donut-center {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import UiButton from '@/components/ui/UiButton.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import type { PipelineAccent } from '@/lib/pipeline-board';
|
||||
import { PIPELINE_ACCENT } from '@/lib/pipeline-board';
|
||||
@@ -13,48 +14,15 @@ const emit = defineEmits<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
<UiButton
|
||||
variant="dashed"
|
||||
block
|
||||
class="add-deal"
|
||||
:style="{
|
||||
'--add-color': PIPELINE_ACCENT[accent].text,
|
||||
'--add-border': PIPELINE_ACCENT[accent].solid,
|
||||
'--add-soft': PIPELINE_ACCENT[accent].soft,
|
||||
}"
|
||||
:style="{ color: PIPELINE_ACCENT[accent].text }"
|
||||
aria-label="افزودن معامله"
|
||||
@click="emit('add')"
|
||||
>
|
||||
<UiIcon name="plus" :size="16" />
|
||||
افزودن معامله
|
||||
</button>
|
||||
</UiButton>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.add-deal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
width: 100%;
|
||||
margin-top: 0.15rem;
|
||||
padding: 0.9rem 1rem;
|
||||
border: 1.5px dashed var(--add-border);
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
color: var(--add-color);
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
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>
|
||||
|
||||
@@ -38,52 +38,50 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
@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 v-if="deal.description" 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>
|
||||
<span class="badge" aria-hidden="true">{{ deal.initials }}</span>
|
||||
<div class="titles">
|
||||
<h3 @click.stop="emit('open', deal.id)">{{ deal.title }}</h3>
|
||||
<p v-if="deal.description" class="desc">{{ deal.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="meta">
|
||||
<div class="who">
|
||||
<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>
|
||||
<div class="amount" dir="ltr">
|
||||
<strong>{{ money.number }}</strong>
|
||||
<span>{{ money.unit }}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="menu"
|
||||
aria-label="گزینههای معامله"
|
||||
@click.stop="emit('menu', deal.id)"
|
||||
>
|
||||
<UiIcon name="dots-v" :size="16" />
|
||||
</button>
|
||||
<img
|
||||
class="avatar"
|
||||
src="/brand/user-avatar.png"
|
||||
alt=""
|
||||
width="32"
|
||||
height="32"
|
||||
/>
|
||||
<span class="date">
|
||||
{{ deal.date }}
|
||||
<UiIcon name="calendar" :size="13" />
|
||||
</span>
|
||||
<div class="amount">
|
||||
<strong>{{ money.number }}</strong>
|
||||
<span>{{ money.unit }}</span>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.deal-card {
|
||||
--face: 32px;
|
||||
display: grid;
|
||||
grid-template-columns: var(--face) minmax(0, 1fr) auto;
|
||||
grid-template-rows: auto auto;
|
||||
column-gap: 0.5rem;
|
||||
row-gap: 0.65rem;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
|
||||
border-radius: 16px;
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.85rem 0.7rem 0.85rem 0.55rem;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
|
||||
@@ -118,45 +116,40 @@ const colors = computed(() => PIPELINE_ACCENT[props.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,
|
||||
.avatar {
|
||||
width: var(--face);
|
||||
height: var(--face);
|
||||
max-width: var(--face);
|
||||
border-radius: 999px;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.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-size: 0.65rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.titles {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.titles h3 {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.45;
|
||||
line-height: 1.4;
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
@@ -167,64 +160,45 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin: 0.15rem 0 0;
|
||||
margin: 0.1rem 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.35;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.menu {
|
||||
align-self: start;
|
||||
justify-self: end;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
background: none;
|
||||
color: var(--muted);
|
||||
padding: 0.15rem;
|
||||
border-radius: 8px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.menu:hover,
|
||||
.menu:focus-visible {
|
||||
color: var(--ink);
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin-top: 0.85rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.who {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
max-width: 28px;
|
||||
border-radius: 999px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--line);
|
||||
flex: 0 0 auto;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.date {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
justify-content: flex-start;
|
||||
gap: 0.25rem;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -234,14 +208,13 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
.amount {
|
||||
text-align: left;
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
justify-items: end;
|
||||
gap: 0.02rem;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.amount strong {
|
||||
font-size: 1.05rem;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.01em;
|
||||
@@ -250,7 +223,7 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
}
|
||||
|
||||
.amount span {
|
||||
font-size: 0.72rem;
|
||||
font-size: 0.65rem;
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { nextTick, ref } from 'vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import PipelineColumn from './PipelineColumn.vue';
|
||||
import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
|
||||
|
||||
@@ -6,6 +8,7 @@ defineProps<{
|
||||
stages: PipelineStage[];
|
||||
draggingId: string | null;
|
||||
dropStageId: string | null;
|
||||
canManage?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -16,17 +19,51 @@ const emit = defineEmits<{
|
||||
addDeal: [stageId: string];
|
||||
openDeal: [dealId: string];
|
||||
menuDeal: [dealId: string];
|
||||
renameStage: [stageId: string, title: string];
|
||||
deleteStage: [stageId: string];
|
||||
moveStage: [stageId: string, dir: -1 | 1];
|
||||
columnDragStart: [stageId: string, event: DragEvent];
|
||||
columnDragEnd: [];
|
||||
addStage: [name: string];
|
||||
}>();
|
||||
|
||||
const adding = ref(false);
|
||||
const newName = ref('');
|
||||
const addInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
async function startAdd() {
|
||||
adding.value = true;
|
||||
newName.value = '';
|
||||
await nextTick();
|
||||
addInput.value?.focus();
|
||||
}
|
||||
|
||||
function cancelAdd() {
|
||||
adding.value = false;
|
||||
newName.value = '';
|
||||
}
|
||||
|
||||
function submitAdd() {
|
||||
const name = newName.value.trim();
|
||||
if (!name) return;
|
||||
emit('addStage', name);
|
||||
adding.value = false;
|
||||
newName.value = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="board" dir="rtl">
|
||||
<div class="board-shell" dir="rtl">
|
||||
<div class="board">
|
||||
<PipelineColumn
|
||||
v-for="stage in stages"
|
||||
v-for="(stage, index) in stages"
|
||||
:key="stage.id"
|
||||
:stage="stage"
|
||||
:dragging-id="draggingId"
|
||||
:drop-active="dropStageId === stage.id"
|
||||
:can-manage="canManage"
|
||||
:is-first="index === 0"
|
||||
:is-last="index === stages.length - 1"
|
||||
@drag-start="(d, e) => emit('dragStart', d, e)"
|
||||
@drag-end="emit('dragEnd')"
|
||||
@drag-over="(id, e) => emit('dragOver', id, e)"
|
||||
@@ -34,11 +71,48 @@ const emit = defineEmits<{
|
||||
@add-deal="emit('addDeal', $event)"
|
||||
@open-deal="emit('openDeal', $event)"
|
||||
@menu-deal="emit('menuDeal', $event)"
|
||||
@rename="(id, title) => emit('renameStage', id, title)"
|
||||
@delete="emit('deleteStage', $event)"
|
||||
@move="(id, dir) => emit('moveStage', id, dir)"
|
||||
@column-drag-start="(id, e) => emit('columnDragStart', id, e)"
|
||||
@column-drag-end="emit('columnDragEnd')"
|
||||
/>
|
||||
|
||||
<section v-if="canManage" class="add-col">
|
||||
<form v-if="adding" class="add-form" @submit.prevent="submitAdd">
|
||||
<input
|
||||
ref="addInput"
|
||||
v-model="newName"
|
||||
maxlength="80"
|
||||
placeholder="نام ستون جدید…"
|
||||
aria-label="نام ستون جدید"
|
||||
@keydown.esc.prevent="cancelAdd"
|
||||
/>
|
||||
<div class="add-actions">
|
||||
<button class="ok" type="submit" :disabled="newName.trim().length < 1">
|
||||
افزودن
|
||||
</button>
|
||||
<button class="cancel" type="button" @click="cancelAdd">انصراف</button>
|
||||
</div>
|
||||
</form>
|
||||
<button v-else type="button" class="add-btn" @click="startAdd">
|
||||
<UiIcon name="plus" :size="18" />
|
||||
افزودن ستون
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.board-shell {
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--pad-modal);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.board {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -66,10 +140,100 @@ const emit = defineEmits<{
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.add-col {
|
||||
flex: 0 0 17.5rem;
|
||||
min-width: 17.5rem;
|
||||
min-height: 420px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding-top: 0.15rem;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 100%;
|
||||
min-height: 3.2rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
border: 1.5px dashed var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: #f8fafc;
|
||||
color: var(--muted);
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent-deep, #0f766e);
|
||||
background: color-mix(in srgb, var(--accent) 6%, #fff);
|
||||
}
|
||||
|
||||
.add-form {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.add-form input {
|
||||
width: 100%;
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.75rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.add-actions {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.add-actions .ok,
|
||||
.add-actions .cancel {
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.85rem;
|
||||
border-radius: var(--radius);
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-actions .ok {
|
||||
border: 0;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.add-actions .ok:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.add-actions .cancel {
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
@container pipeline (max-width: 720px) {
|
||||
.board {
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-padding-inline: 0.25rem;
|
||||
}
|
||||
|
||||
.add-col {
|
||||
flex: 0 0 min(20rem, 86cqi);
|
||||
width: min(20rem, 86cqi);
|
||||
min-width: min(20rem, 86cqi);
|
||||
min-height: 360px;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onBeforeUnmount, ref, watch } from 'vue';
|
||||
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<{
|
||||
const props = defineProps<{
|
||||
stage: PipelineStage;
|
||||
draggingId: string | null;
|
||||
dropActive: boolean;
|
||||
canManage?: boolean;
|
||||
isFirst?: boolean;
|
||||
isLast?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -19,8 +23,19 @@ const emit = defineEmits<{
|
||||
addDeal: [stageId: string];
|
||||
openDeal: [dealId: string];
|
||||
menuDeal: [dealId: string];
|
||||
rename: [stageId: string, title: string];
|
||||
delete: [stageId: string];
|
||||
move: [stageId: string, dir: -1 | 1];
|
||||
columnDragStart: [stageId: string, event: DragEvent];
|
||||
columnDragEnd: [];
|
||||
}>();
|
||||
|
||||
const renaming = ref(false);
|
||||
const draft = ref('');
|
||||
const titleInput = ref<HTMLInputElement | null>(null);
|
||||
const menuOpen = ref(false);
|
||||
const menuRoot = ref<HTMLElement | null>(null);
|
||||
|
||||
function onCardDragOver(stageId: string, event: DragEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
@@ -32,6 +47,60 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
event.stopPropagation();
|
||||
emit('drop', stageId, event, index);
|
||||
}
|
||||
|
||||
function startRename() {
|
||||
if (!props.canManage) return;
|
||||
draft.value = props.stage.title;
|
||||
renaming.value = true;
|
||||
menuOpen.value = false;
|
||||
void nextTick(() => titleInput.value?.select());
|
||||
}
|
||||
|
||||
function commitRename() {
|
||||
if (!renaming.value) return;
|
||||
const title = draft.value.trim();
|
||||
renaming.value = false;
|
||||
if (!title || title === props.stage.title) return;
|
||||
emit('rename', props.stage.id, title);
|
||||
}
|
||||
|
||||
function cancelRename() {
|
||||
renaming.value = false;
|
||||
draft.value = props.stage.title;
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
menuOpen.value = !menuOpen.value;
|
||||
}
|
||||
|
||||
function onColumnDragStart(event: DragEvent) {
|
||||
event.dataTransfer?.setData('text/plain', `stage:${props.stage.id}`);
|
||||
event.dataTransfer!.effectAllowed = 'move';
|
||||
emit('columnDragStart', props.stage.id, event);
|
||||
}
|
||||
|
||||
function onDocPointerDown(event: PointerEvent) {
|
||||
const target = event.target as Node | null;
|
||||
const root = menuRoot.value;
|
||||
if (root && target && !root.contains(target)) menuOpen.value = false;
|
||||
}
|
||||
|
||||
function onMenuOpened() {
|
||||
document.addEventListener('pointerdown', onDocPointerDown);
|
||||
}
|
||||
|
||||
function onMenuClosed() {
|
||||
document.removeEventListener('pointerdown', onDocPointerDown);
|
||||
}
|
||||
|
||||
watch(menuOpen, (open) => {
|
||||
if (open) onMenuOpened();
|
||||
else onMenuClosed();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('pointerdown', onDocPointerDown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -48,21 +117,88 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
@drop.prevent="emit('drop', stage.id, $event)"
|
||||
>
|
||||
<header class="column-head">
|
||||
<span
|
||||
v-if="canManage"
|
||||
class="grip"
|
||||
draggable="true"
|
||||
title="کشیدن برای جابهجایی"
|
||||
aria-label="جابهجایی ستون"
|
||||
@dragstart="onColumnDragStart"
|
||||
@dragend="emit('columnDragEnd')"
|
||||
>
|
||||
<UiIcon name="grip" :size="14" />
|
||||
</span>
|
||||
<div class="title-wrap">
|
||||
<span class="dot" aria-hidden="true" />
|
||||
<h2>{{ stage.title }}</h2>
|
||||
<input
|
||||
v-if="renaming"
|
||||
ref="titleInput"
|
||||
v-model="draft"
|
||||
class="title-input"
|
||||
maxlength="80"
|
||||
aria-label="نام ستون"
|
||||
@keydown.enter.prevent="commitRename"
|
||||
@keydown.esc.prevent="cancelRename"
|
||||
@blur="commitRename"
|
||||
/>
|
||||
<h2
|
||||
v-else
|
||||
:class="{ editable: canManage }"
|
||||
:title="canManage ? 'برای تغییر نام کلیک کنید' : undefined"
|
||||
@click="startRename"
|
||||
>
|
||||
{{ stage.title }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="head-actions">
|
||||
<span class="count">{{ toFaDealCount(stage.deals.length) }}</span>
|
||||
<span class="count">{{ toFaDealCount(stage.deals.length) }}</span>
|
||||
<div v-if="canManage" ref="menuRoot" class="more-wrap">
|
||||
<button
|
||||
type="button"
|
||||
class="plus"
|
||||
aria-label="افزودن معامله به این مرحله"
|
||||
@click="emit('addDeal', stage.id)"
|
||||
class="icon-btn"
|
||||
aria-label="گزینههای ستون"
|
||||
:aria-expanded="menuOpen"
|
||||
@click.stop="toggleMenu"
|
||||
>
|
||||
<UiIcon name="plus" :size="16" />
|
||||
<UiIcon name="dots-v" :size="16" />
|
||||
</button>
|
||||
<div v-if="menuOpen" class="col-menu" role="menu">
|
||||
<button type="button" role="menuitem" @click="startRename">
|
||||
تغییر نام
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
:disabled="isFirst"
|
||||
@click="emit('move', stage.id, -1); menuOpen = false"
|
||||
>
|
||||
انتقال به راست
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
:disabled="isLast"
|
||||
@click="emit('move', stage.id, 1); menuOpen = false"
|
||||
>
|
||||
انتقال به چپ
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
class="danger"
|
||||
@click="emit('delete', stage.id); menuOpen = false"
|
||||
>
|
||||
حذف ستون
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="plus"
|
||||
aria-label="افزودن معامله به این مرحله"
|
||||
@click="emit('addDeal', stage.id)"
|
||||
>
|
||||
<UiIcon name="plus" :size="16" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="cards" role="list" :aria-label="stage.title">
|
||||
@@ -98,10 +234,10 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
flex: 1 1 17.5rem;
|
||||
min-width: 17.5rem;
|
||||
min-height: 420px;
|
||||
padding: 0.15rem 0.1rem 0.35rem;
|
||||
border-radius: 18px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
transition: background 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
@@ -113,16 +249,31 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
.column-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.15rem 0.25rem;
|
||||
gap: 0.4rem;
|
||||
padding: 0.1rem 0.1rem 0.15rem;
|
||||
}
|
||||
|
||||
.grip {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 1.25rem;
|
||||
color: var(--muted);
|
||||
cursor: grab;
|
||||
flex: 0 0 auto;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.grip:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.45rem;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dot {
|
||||
@@ -133,21 +284,34 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.column-head h2 {
|
||||
.column-head h2,
|
||||
.title-input {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.column-head h2 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.head-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
flex: 0 0 auto;
|
||||
.column-head h2.editable {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.title-input {
|
||||
height: 1.7rem;
|
||||
padding: 0 0.4rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.count {
|
||||
@@ -157,24 +321,85 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.more-wrap {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.icon-btn,
|
||||
.plus {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 8px;
|
||||
border: 1.5px solid var(--accent);
|
||||
width: var(--control-h);
|
||||
height: var(--control-h);
|
||||
border-radius: var(--radius);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #fff;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
border: 1px solid transparent;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.icon-btn:hover,
|
||||
.icon-btn:focus-visible {
|
||||
background: var(--stage-soft);
|
||||
color: var(--stage-solid);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.plus {
|
||||
border: 1.5px solid var(--stage-solid);
|
||||
color: var(--stage-solid);
|
||||
}
|
||||
|
||||
.plus:hover,
|
||||
.plus:focus-visible {
|
||||
background: var(--accent-soft);
|
||||
background: var(--stage-soft);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.col-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
inset-inline-end: 0;
|
||||
z-index: 8;
|
||||
min-width: 10.5rem;
|
||||
padding: 0.3rem;
|
||||
display: grid;
|
||||
gap: 0.1rem;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.col-menu button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0.45rem 0.7rem;
|
||||
font: inherit;
|
||||
font-size: 0.86rem;
|
||||
color: var(--ink);
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.col-menu button:hover:not(:disabled) {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.col-menu button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.col-menu .danger {
|
||||
color: var(--danger, #dc2626);
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -170,7 +170,7 @@ function money(deal: PipelineDeal) {
|
||||
.table-wrap {
|
||||
background: #fff;
|
||||
border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
|
||||
border-radius: 18px;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import UiFilterBar from '@/components/ui/UiFilterBar.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import UiSegmented from '@/components/ui/UiSegmented.vue';
|
||||
import UiSelect from '@/components/ui/UiSelect.vue';
|
||||
|
||||
export type PipelineViewMode = 'kanban' | 'list';
|
||||
|
||||
@@ -7,28 +10,32 @@ withDefaults(
|
||||
defineProps<{
|
||||
pipelineName: string;
|
||||
pipelineOptions: Array<{ id: string; name: string }>;
|
||||
selectedPipelineId: string;
|
||||
viewMode: PipelineViewMode;
|
||||
search: string;
|
||||
canCreate?: boolean;
|
||||
}>(),
|
||||
{ canCreate: false },
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:viewMode': [PipelineViewMode];
|
||||
'update:search': [string];
|
||||
'update:selectedPipelineId': [string];
|
||||
filter: [];
|
||||
create: [];
|
||||
}>();
|
||||
|
||||
const viewMode = defineModel<PipelineViewMode>('viewMode', { required: true });
|
||||
const search = defineModel<string>('search', { default: '' });
|
||||
const selectedPipelineId = defineModel<string>('selectedPipelineId', { required: true });
|
||||
const amountMin = defineModel<string>('amountMin', { default: '' });
|
||||
const amountMax = defineModel<string>('amountMax', { default: '' });
|
||||
|
||||
const viewOptions = [
|
||||
{ value: 'kanban' as const, label: 'نمای کاریز', icon: 'grid' as const },
|
||||
{ value: 'list' as const, label: 'نمای لیست', icon: 'list' as const },
|
||||
];
|
||||
|
||||
function onPick(value: string) {
|
||||
if (value === '__create__') {
|
||||
emit('create');
|
||||
return;
|
||||
}
|
||||
emit('update:selectedPipelineId', value);
|
||||
selectedPipelineId.value = value;
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -41,62 +48,37 @@ function onPick(value: string) {
|
||||
<h1>{{ pipelineName }}</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" />
|
||||
<span class="seg-label">نمای کاریز</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="seg"
|
||||
:class="{ on: viewMode === 'list' }"
|
||||
:aria-pressed="viewMode === 'list'"
|
||||
@click="emit('update:viewMode', 'list')"
|
||||
>
|
||||
<UiIcon name="list" :size="16" />
|
||||
<span class="seg-label">نمای لیست</span>
|
||||
</button>
|
||||
</div>
|
||||
<UiSegmented v-model="viewMode" :options="viewOptions">
|
||||
<template #icon="{ option }">
|
||||
<UiIcon :name="option.icon ?? 'grid'" :size="16" />
|
||||
</template>
|
||||
</UiSegmented>
|
||||
|
||||
<label class="pipeline-pick">
|
||||
<span class="sr">انتخاب کاریز</span>
|
||||
<select
|
||||
:value="selectedPipelineId"
|
||||
@change="onPick(($event.target as HTMLSelectElement).value)"
|
||||
<UiSelect
|
||||
class="pipeline-pick"
|
||||
:model-value="selectedPipelineId"
|
||||
@update:model-value="onPick"
|
||||
>
|
||||
<option
|
||||
v-for="opt in pipelineOptions"
|
||||
:key="opt.id"
|
||||
:value="opt.id"
|
||||
>
|
||||
<option
|
||||
v-for="opt in pipelineOptions"
|
||||
:key="opt.id"
|
||||
:value="opt.id"
|
||||
>
|
||||
{{ opt.name }}
|
||||
</option>
|
||||
<option v-if="canCreate" value="__create__">کاریز جدید…</option>
|
||||
</select>
|
||||
<UiIcon class="chev" name="chevron" :size="16" />
|
||||
</label>
|
||||
{{ opt.name }}
|
||||
</option>
|
||||
<option v-if="canCreate" value="__create__">کاریز جدید…</option>
|
||||
</UiSelect>
|
||||
|
||||
<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>
|
||||
<UiFilterBar v-model:search="search" class="filters">
|
||||
<label class="field">
|
||||
<span>حداقل مبلغ</span>
|
||||
<input v-model="amountMin" type="number" min="0" placeholder="۰" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>حداکثر مبلغ</span>
|
||||
<input v-model="amountMax" type="number" min="0" placeholder="—" />
|
||||
</label>
|
||||
</UiFilterBar>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
@@ -120,19 +102,19 @@ function onPick(value: string) {
|
||||
}
|
||||
|
||||
.brand-ico {
|
||||
width: 2.15rem;
|
||||
height: 2.15rem;
|
||||
border-radius: 10px;
|
||||
width: var(--control-h);
|
||||
height: var(--control-h);
|
||||
border-radius: var(--radius);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #0f766e;
|
||||
background: var(--accent-deep);
|
||||
color: #fff;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
overflow: hidden;
|
||||
@@ -140,127 +122,25 @@ h1 {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: inline-flex;
|
||||
background: #e8eef1;
|
||||
border-radius: 12px;
|
||||
padding: 0.18rem;
|
||||
gap: 0.12rem;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.seg {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #7b8794;
|
||||
font-weight: 700;
|
||||
font-size: 0.82rem;
|
||||
padding: 0.42rem 0.7rem;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.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: 8.5rem;
|
||||
flex: 0 1 13rem;
|
||||
min-width: 8.5rem;
|
||||
}
|
||||
|
||||
.pipeline-pick select {
|
||||
appearance: none;
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 0.52rem 2rem 0.52rem 0.85rem;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
width: 100%;
|
||||
.filters {
|
||||
flex: 1 1 12rem;
|
||||
min-width: 0;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pipeline-pick .chev {
|
||||
position: absolute;
|
||||
left: 0.65rem;
|
||||
pointer-events: none;
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.field span {
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
flex: 1 1 8rem;
|
||||
min-width: 6.5rem;
|
||||
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%;
|
||||
min-width: 0;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
padding: 0.52rem 0.95rem;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@container pipeline (max-width: 720px) {
|
||||
@@ -272,37 +152,9 @@ h1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.seg {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.pipeline-pick {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search {
|
||||
flex: 1 1 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
@container pipeline (max-width: 520px) {
|
||||
.seg-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-btn,
|
||||
.pipeline-pick {
|
||||
width: 100%;
|
||||
.pipeline-pick,
|
||||
.filters {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
variant?: 'primary' | 'ghost' | 'dashed' | 'icon';
|
||||
type?: 'button' | 'submit';
|
||||
disabled?: boolean;
|
||||
block?: boolean;
|
||||
}>(),
|
||||
{ variant: 'primary', type: 'button' },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
:type="type"
|
||||
class="ui-btn"
|
||||
:class="[variant, { block }]"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ui-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.95rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius);
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
font-size: 0.88rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-btn:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.ui-btn.block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui-btn.ghost {
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
.ui-btn.dashed {
|
||||
background: #fff;
|
||||
border: 1.5px dashed currentColor;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ui-btn.icon {
|
||||
width: var(--control-h);
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
color: var(--accent-deep);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.ui-btn:focus-visible {
|
||||
outline: 2px solid var(--accent-soft);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="ui-card">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ui-card {
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--pad-modal);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import { use } from 'echarts/core';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { LineChart, PieChart } from 'echarts/charts';
|
||||
import {
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent,
|
||||
} from 'echarts/components';
|
||||
import VChart from 'vue-echarts';
|
||||
import type { ComposeOption } from 'echarts/core';
|
||||
import type { LineSeriesOption, PieSeriesOption } from 'echarts/charts';
|
||||
import type {
|
||||
GridComponentOption,
|
||||
LegendComponentOption,
|
||||
TooltipComponentOption,
|
||||
} from 'echarts/components';
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
LineChart,
|
||||
PieChart,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
]);
|
||||
|
||||
export type UiChartOption = ComposeOption<
|
||||
| LineSeriesOption
|
||||
| PieSeriesOption
|
||||
| GridComponentOption
|
||||
| TooltipComponentOption
|
||||
| LegendComponentOption
|
||||
>;
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
option: UiChartOption;
|
||||
height?: string;
|
||||
}>(),
|
||||
{ height: '220px' },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VChart class="ui-chart" :option="option" :style="{ height }" autoresize />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ui-chart {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import UiButton from './UiButton.vue';
|
||||
import UiSearch from './UiSearch.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{ placeholder: 'جستجو...' },
|
||||
);
|
||||
|
||||
const search = defineModel<string>('search', { default: '' });
|
||||
const open = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="filter-bar">
|
||||
<div class="row">
|
||||
<slot name="before" />
|
||||
<UiSearch v-model="search" :placeholder="placeholder" class="search" />
|
||||
<UiButton type="button" @click="open = !open">
|
||||
<UiIcon name="filter" :size="16" />
|
||||
فیلترها
|
||||
</UiButton>
|
||||
</div>
|
||||
<div v-if="open" class="panel">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.filter-bar {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search {
|
||||
flex: 1 1 10rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
|
||||
gap: 0.65rem;
|
||||
padding: var(--pad-modal);
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
type?: string;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
required?: boolean;
|
||||
maxlength?: number;
|
||||
minlength?: number;
|
||||
}>(),
|
||||
{ type: 'text' },
|
||||
);
|
||||
|
||||
const model = defineModel<string>({ default: '' });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input
|
||||
v-model="model"
|
||||
class="ui-input"
|
||||
:type="type"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
:maxlength="maxlength"
|
||||
:minlength="minlength"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ui-input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.85rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.ui-input:focus {
|
||||
outline: 2px solid var(--accent-soft);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.ui-input:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<script setup lang="ts">
|
||||
import { onUnmounted, watch } from 'vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean;
|
||||
title: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
}>();
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
(open) => {
|
||||
document.body.style.overflow = open ? 'hidden' : '';
|
||||
},
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
|
||||
function onBackdrop(event: MouseEvent) {
|
||||
if (event.target === event.currentTarget) emit('close');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="open" class="backdrop" @click="onBackdrop">
|
||||
<section
|
||||
class="dialog"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-label="title"
|
||||
@click.stop
|
||||
>
|
||||
<header class="head">
|
||||
<h2>{{ title }}</h2>
|
||||
<button type="button" class="close" aria-label="بستن" @click="emit('close')">
|
||||
<UiIcon name="x" :size="18" />
|
||||
</button>
|
||||
</header>
|
||||
<div class="body">
|
||||
<slot />
|
||||
</div>
|
||||
<footer v-if="$slots.footer" class="foot">
|
||||
<slot name="footer" />
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 80;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1.25rem;
|
||||
background: rgba(15, 23, 42, 0.35);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
width: min(880px, 100%);
|
||||
max-height: min(88vh, 880px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.head,
|
||||
.body,
|
||||
.foot {
|
||||
padding: var(--pad-modal);
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.head h2 {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.close {
|
||||
width: var(--control-h);
|
||||
height: var(--control-h);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
color: var(--muted);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.body {
|
||||
overflow: auto;
|
||||
min-height: 0;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.foot {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding-top: 0;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{ placeholder: 'جستجو...' },
|
||||
);
|
||||
|
||||
const model = defineModel<string>({ default: '' });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label class="ui-search">
|
||||
<span class="sr">جستجو</span>
|
||||
<input
|
||||
v-model="model"
|
||||
type="search"
|
||||
:placeholder="placeholder"
|
||||
/>
|
||||
<UiIcon name="search" :size="16" />
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ui-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
min-width: 0;
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.75rem;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.ui-search input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.ui-search:focus-within {
|
||||
outline: 2px solid var(--accent-soft);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.sr {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts" generic="T extends string">
|
||||
defineProps<{
|
||||
options: Array<{ value: T; label: string; icon?: 'grid' | 'list' }>;
|
||||
}>();
|
||||
|
||||
const model = defineModel<T>({ required: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ui-seg" role="group">
|
||||
<button
|
||||
v-for="opt in options"
|
||||
:key="opt.value"
|
||||
type="button"
|
||||
class="seg"
|
||||
:class="{ on: model === opt.value }"
|
||||
:aria-pressed="model === opt.value"
|
||||
@click="model = opt.value"
|
||||
>
|
||||
<slot name="icon" :option="opt" />
|
||||
<span class="seg-label">{{ opt.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ui-seg {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: var(--control-h);
|
||||
padding: 3px;
|
||||
gap: 2px;
|
||||
background: #e8eef1;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.seg {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
min-height: calc(var(--control-h) - 6px);
|
||||
padding: 0 0.75rem;
|
||||
border: 0;
|
||||
border-radius: calc(var(--radius) - 2px);
|
||||
background: transparent;
|
||||
color: #7b8794;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
font-size: 0.82rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.seg.on {
|
||||
background: #fff;
|
||||
color: var(--accent-deep);
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.seg:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
defineProps<{
|
||||
disabled?: boolean;
|
||||
}>();
|
||||
|
||||
const model = defineModel<string>({ default: '' });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label class="ui-select">
|
||||
<select v-model="model" :disabled="disabled">
|
||||
<slot />
|
||||
</select>
|
||||
<UiIcon class="chev" name="chevron" :size="16" />
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ui-select {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui-select select {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
min-height: var(--control-h);
|
||||
padding: 0 2rem 0 0.85rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-select select:focus {
|
||||
outline: 2px solid var(--accent-soft);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.chev {
|
||||
position: absolute;
|
||||
left: 0.65rem;
|
||||
top: 50%;
|
||||
color: var(--muted);
|
||||
pointer-events: none;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
</style>
|
||||
@@ -525,7 +525,6 @@ onUnmounted(() => {
|
||||
type="search"
|
||||
placeholder="جستجو در مشتریان، معاملات و..."
|
||||
/>
|
||||
<kbd>⌘K</kbd>
|
||||
</form>
|
||||
|
||||
<div class="topbar-actions">
|
||||
@@ -594,7 +593,7 @@ onUnmounted(() => {
|
||||
grid-template-columns: calc(var(--sidebar-card) + var(--sidebar-gutter-start) + var(--sidebar-gutter-end)) minmax(0, 1fr);
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
background: #eef2f6;
|
||||
background: var(--bg);
|
||||
gap: 0;
|
||||
transition: grid-template-columns 0.2s ease;
|
||||
}
|
||||
@@ -1247,8 +1246,9 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
background: #fff;
|
||||
border-radius: 999px;
|
||||
padding: 0.7rem 1.05rem;
|
||||
border-radius: var(--radius);
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.95rem;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
box-sizing: border-box;
|
||||
@@ -1265,7 +1265,7 @@ onUnmounted(() => {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
background: rgba(238, 242, 246, 0.92);
|
||||
background: color-mix(in srgb, var(--bg) 92%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
@@ -1275,7 +1275,7 @@ onUnmounted(() => {
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
/* مرکز عمودی نسبت به ارتفاع جستجو (~49px) */
|
||||
min-height: 49px;
|
||||
min-height: var(--control-h);
|
||||
}
|
||||
|
||||
.global-search:focus-within {
|
||||
@@ -1302,16 +1302,6 @@ onUnmounted(() => {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.global-search kbd {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.72rem;
|
||||
color: #94a3b8;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
padding: 0.18rem 0.45rem;
|
||||
}
|
||||
|
||||
.round-btn {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
@@ -1470,10 +1460,6 @@ onUnmounted(() => {
|
||||
.desktop-topbar {
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.global-search kbd {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.burger {
|
||||
|
||||
@@ -206,22 +206,64 @@ export function updateDealStage(
|
||||
});
|
||||
}
|
||||
|
||||
export type PipelineBoardFilter = {
|
||||
query?: string;
|
||||
amountMin?: number | null;
|
||||
amountMax?: number | null;
|
||||
};
|
||||
|
||||
export function filterStagesByQuery(
|
||||
stages: PipelineStage[],
|
||||
query: string,
|
||||
): PipelineStage[] {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return stages;
|
||||
return filterStages(stages, { query });
|
||||
}
|
||||
|
||||
export function filterStages(
|
||||
stages: PipelineStage[],
|
||||
filter: PipelineBoardFilter,
|
||||
): PipelineStage[] {
|
||||
const q = filter.query?.trim().toLowerCase() ?? '';
|
||||
const min = filter.amountMin;
|
||||
const max = filter.amountMax;
|
||||
const hasFilter =
|
||||
Boolean(q) ||
|
||||
(min != null && !Number.isNaN(min)) ||
|
||||
(max != null && !Number.isNaN(max));
|
||||
if (!hasFilter) return stages;
|
||||
return stages.map((stage) => ({
|
||||
...stage,
|
||||
deals: stage.deals.filter(
|
||||
(d) =>
|
||||
d.title.toLowerCase().includes(q) ||
|
||||
d.description.toLowerCase().includes(q),
|
||||
),
|
||||
deals: stage.deals.filter((d) => {
|
||||
if (
|
||||
q &&
|
||||
!d.title.toLowerCase().includes(q) &&
|
||||
!d.description.toLowerCase().includes(q)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
if (min != null && !Number.isNaN(min) && d.amount < min) return false;
|
||||
if (max != null && !Number.isNaN(max) && d.amount > max) return false;
|
||||
return true;
|
||||
}),
|
||||
}));
|
||||
}
|
||||
|
||||
export function toFaDealCount(n: number): string {
|
||||
return `${new Intl.NumberFormat('fa-IR').format(n)} معامله`;
|
||||
}
|
||||
|
||||
/** جابهجایی یک ستون به ایندکس جدید */
|
||||
export function moveStageToIndex(
|
||||
stages: PipelineStage[],
|
||||
stageId: string,
|
||||
toIndex: number,
|
||||
): PipelineStage[] {
|
||||
const from = stages.findIndex((s) => s.id === stageId);
|
||||
if (from < 0) return stages;
|
||||
const next = [...stages];
|
||||
const [item] = next.splice(from, 1);
|
||||
if (!item) return stages;
|
||||
const clamped = Math.max(0, Math.min(toIndex, next.length));
|
||||
next.splice(clamped, 0, item);
|
||||
return next;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
@import "./fonts.css";
|
||||
|
||||
:root {
|
||||
--bg: #f4f7f8;
|
||||
--bg: #f8fafc;
|
||||
--surface: #ffffff;
|
||||
--ink: #0f172a;
|
||||
--muted: #64748b;
|
||||
--line: #e2e8f0;
|
||||
--accent: #0d9488;
|
||||
--accent: #14b8a6;
|
||||
--accent-deep: #0f766e;
|
||||
--accent-soft: #ccfbf1;
|
||||
--danger: #b42318;
|
||||
--shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
|
||||
--radius: 18px;
|
||||
--radius: 10px;
|
||||
--control-h: 36px;
|
||||
--pad-modal: 24px;
|
||||
--font: "IRANSans", Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
@@ -60,12 +63,17 @@ textarea {
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem 1.1rem;
|
||||
border-radius: var(--radius);
|
||||
min-height: var(--control-h);
|
||||
padding: 0 1rem;
|
||||
cursor: pointer;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
@@ -97,15 +105,24 @@ textarea {
|
||||
}
|
||||
|
||||
.field input,
|
||||
.field select,
|
||||
.field textarea {
|
||||
.field select {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.8rem 0.95rem;
|
||||
border-radius: var(--radius);
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.85rem;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.field textarea {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.7rem 0.85rem;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
min-height: 88px;
|
||||
}
|
||||
|
||||
.field input:focus,
|
||||
.field select:focus,
|
||||
.field textarea:focus {
|
||||
|
||||
@@ -10,7 +10,10 @@ import {
|
||||
startOfLocalDay,
|
||||
toFaDigits,
|
||||
} from '@/lib/jalali';
|
||||
import UiButton from '@/components/ui/UiButton.vue';
|
||||
import UiModal from '@/components/ui/UiModal.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import ActivityFormView from '@/views/ActivityFormView.vue';
|
||||
import type {
|
||||
ActivityDto,
|
||||
ActivityFilter,
|
||||
@@ -62,6 +65,10 @@ const q = ref(typeof route.query.q === 'string' ? route.query.q : '');
|
||||
const typeFilter = ref<TypeFilter>('all');
|
||||
const filterOpen = ref(false);
|
||||
const ideasOpen = ref(false);
|
||||
const activityModal = ref<{
|
||||
type?: ActivityType;
|
||||
title?: string;
|
||||
} | null>(null);
|
||||
const menuId = ref<string | null>(null);
|
||||
const counts = ref<Record<ActivityFilter, number>>({
|
||||
today: 0,
|
||||
@@ -282,10 +289,10 @@ onMounted(() => {
|
||||
<p class="lead">تماس، جلسه و وظیفه — امروز و عقبافتادهها یکجا.</p>
|
||||
</div>
|
||||
<div class="head-actions">
|
||||
<RouterLink class="btn primary" :to="{ name: 'activity-new' }">
|
||||
<span>+</span>
|
||||
<UiButton type="button" @click="activityModal = {}">
|
||||
<UiIcon name="plus" :size="16" />
|
||||
فعالیت جدید
|
||||
</RouterLink>
|
||||
</UiButton>
|
||||
<RouterLink class="btn ghost" :to="{ name: 'activities-calendar' }">
|
||||
<UiIcon name="calendar" :size="18" />
|
||||
تقویم
|
||||
@@ -360,24 +367,23 @@ onMounted(() => {
|
||||
: 'فیلتر یا جستجو را عوض کنید، یا یک فعالیت جدید بسازید.'
|
||||
}}
|
||||
</p>
|
||||
<RouterLink class="btn primary wide" :to="{ name: 'activity-new' }">
|
||||
<span>+</span>
|
||||
<UiButton block type="button" @click="activityModal = {}">
|
||||
{{ trulyEmpty ? 'اولین فعالیتت رو ثبت کن' : 'فعالیت جدید' }}
|
||||
</RouterLink>
|
||||
</UiButton>
|
||||
<button class="btn ghost wide" type="button" @click="ideasOpen = !ideasOpen">
|
||||
<UiIcon name="lightbulb" :size="18" />
|
||||
ایدههایی برای شروع
|
||||
</button>
|
||||
<div v-if="ideasOpen" class="idea-list">
|
||||
<RouterLink :to="{ name: 'activity-new', query: { type: 'call', title: 'تماس پیگیری' } }">
|
||||
<button type="button" @click="activityModal = { type: 'call', title: 'تماس پیگیری' }">
|
||||
تماس پیگیری
|
||||
</RouterLink>
|
||||
<RouterLink :to="{ name: 'activity-new', query: { type: 'meeting', title: 'جلسه دمو' } }">
|
||||
</button>
|
||||
<button type="button" @click="activityModal = { type: 'meeting', title: 'جلسه دمو' }">
|
||||
جلسه دمو
|
||||
</RouterLink>
|
||||
<RouterLink :to="{ name: 'activity-new', query: { type: 'task', title: 'وظیفه یادآوری' } }">
|
||||
</button>
|
||||
<button type="button" @click="activityModal = { type: 'task', title: 'وظیفه یادآوری' }">
|
||||
وظیفه یادآوری
|
||||
</RouterLink>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -553,6 +559,21 @@ onMounted(() => {
|
||||
<p class="per">نمایش {{ toFaDigits(PAGE_SIZE) }} در هر صفحه</p>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<UiModal
|
||||
:open="Boolean(activityModal)"
|
||||
title="فعالیت جدید"
|
||||
@close="activityModal = null"
|
||||
>
|
||||
<ActivityFormView
|
||||
v-if="activityModal"
|
||||
embedded
|
||||
:initial-type="activityModal.type"
|
||||
:initial-title="activityModal.title"
|
||||
@saved="activityModal = null; void load(); void loadCounts()"
|
||||
@cancel="activityModal = null"
|
||||
/>
|
||||
</UiModal>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -792,7 +813,13 @@ h1 {
|
||||
width: min(100%, 320px);
|
||||
}
|
||||
|
||||
.idea-list a {
|
||||
.idea-list a,
|
||||
.idea-list button {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
background: #f8fafc;
|
||||
border-radius: 10px;
|
||||
padding: 0.65rem 0.8rem;
|
||||
|
||||
@@ -29,11 +29,28 @@ import type {
|
||||
PipelineBoardDto,
|
||||
} from '@mento/shared';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
embedded?: boolean;
|
||||
entityId?: string;
|
||||
initialPersonId?: string;
|
||||
initialType?: ActivityType;
|
||||
initialTitle?: string;
|
||||
}>(),
|
||||
{ embedded: false },
|
||||
);
|
||||
const emit = defineEmits<{ saved: []; cancel: [] }>();
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
const id = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
|
||||
const isNew = computed(() => route.name === 'activity-new');
|
||||
const id = computed(() => {
|
||||
if (props.embedded) return props.entityId ?? '';
|
||||
return typeof route.params.id === 'string' ? route.params.id : '';
|
||||
});
|
||||
const isNew = computed(() =>
|
||||
props.embedded ? !props.entityId : route.name === 'activity-new',
|
||||
);
|
||||
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
@@ -190,18 +207,21 @@ async function load() {
|
||||
isDone.value = data.status === 'done';
|
||||
} else {
|
||||
resetForm();
|
||||
if (typeof route.query.personId === 'string' && route.query.personId) {
|
||||
personId.value = route.query.personId;
|
||||
}
|
||||
const incomingPerson =
|
||||
props.initialPersonId ||
|
||||
(typeof route.query.personId === 'string' ? route.query.personId : '');
|
||||
if (incomingPerson) personId.value = incomingPerson;
|
||||
const incomingType = props.initialType || route.query.type;
|
||||
if (
|
||||
typeof route.query.type === 'string' &&
|
||||
typeOptions.some((o) => o.value === route.query.type)
|
||||
typeof incomingType === 'string' &&
|
||||
typeOptions.some((o) => o.value === incomingType)
|
||||
) {
|
||||
type.value = route.query.type as ActivityType;
|
||||
}
|
||||
if (typeof route.query.title === 'string' && route.query.title) {
|
||||
title.value = route.query.title;
|
||||
type.value = incomingType as ActivityType;
|
||||
}
|
||||
const incomingTitle =
|
||||
props.initialTitle ||
|
||||
(typeof route.query.title === 'string' ? route.query.title : '');
|
||||
if (incomingTitle) title.value = incomingTitle;
|
||||
if (typeof route.query.dueAt === 'string' && route.query.dueAt) {
|
||||
splitDue(new Date(route.query.dueAt).toISOString());
|
||||
}
|
||||
@@ -271,6 +291,10 @@ async function submit(next: 'detail' | 'new' = 'detail') {
|
||||
status: isDone.value ? 'done' : 'open',
|
||||
});
|
||||
}
|
||||
if (props.embedded) {
|
||||
emit('saved');
|
||||
return;
|
||||
}
|
||||
if (next === 'new') {
|
||||
if (!isNew.value) {
|
||||
await router.push({ name: 'activity-new' });
|
||||
@@ -299,6 +323,10 @@ function bumpDuration(delta: number) {
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
if (props.embedded) {
|
||||
emit('cancel');
|
||||
return;
|
||||
}
|
||||
if (!isNew.value && id.value) {
|
||||
void router.push({ name: 'activity-detail', params: { id: id.value } });
|
||||
return;
|
||||
@@ -310,8 +338,14 @@ watch([id, isNew], () => void load(), { immediate: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page" @click="typeOpen = assigneeOpen = personOpen = false">
|
||||
<header class="desktop-head">
|
||||
<section class="page" :class="{ embedded }" @click="typeOpen = assigneeOpen = personOpen = false">
|
||||
<div v-if="embedded" class="embed-actions">
|
||||
<button class="btn primary" type="button" :disabled="saving" @click="submit('detail')">
|
||||
{{ saving ? 'در حال ذخیره…' : 'ذخیره فعالیت' }}
|
||||
</button>
|
||||
<button class="btn cancel" type="button" :disabled="saving" @click="cancel">انصراف</button>
|
||||
</div>
|
||||
<header v-if="!embedded" class="desktop-head">
|
||||
<p class="crumb">
|
||||
<RouterLink :to="{ name: 'activities' }">فعالیتها</RouterLink>
|
||||
<span>‹</span>
|
||||
@@ -333,7 +367,7 @@ watch([id, isNew], () => void load(), { immediate: true });
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<header class="mobile-head">
|
||||
<header v-if="!embedded" class="mobile-head">
|
||||
<button class="icon-btn" type="button" aria-label="ذخیره" :disabled="saving" @click="submit('detail')">
|
||||
<UiIcon name="check-plain" :size="22" />
|
||||
</button>
|
||||
@@ -579,7 +613,7 @@ watch([id, isNew], () => void load(), { immediate: true });
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<footer class="mobile-save">
|
||||
<footer v-if="!embedded" class="mobile-save">
|
||||
<button class="btn primary" type="button" :disabled="saving || loading" @click="submit('detail')">
|
||||
{{ saving ? 'در حال ذخیره…' : 'ذخیره فعالیت' }}
|
||||
</button>
|
||||
@@ -594,6 +628,16 @@ watch([id, isNew], () => void load(), { immediate: true });
|
||||
padding-bottom: 5.5rem;
|
||||
}
|
||||
|
||||
.page.embedded {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.embed-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.desktop-head {
|
||||
display: none;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -8,10 +8,22 @@ import CustomFieldsSection from '@/components/CustomFieldsSection.vue';
|
||||
import EntityTimeline from '@/components/EntityTimeline.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
embedded?: boolean;
|
||||
entityId?: string;
|
||||
}>(),
|
||||
{ embedded: false },
|
||||
);
|
||||
const emit = defineEmits<{ saved: []; cancel: [] }>();
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const id = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
|
||||
const isNew = computed(() => route.name === 'company-new');
|
||||
const id = computed(() => {
|
||||
if (props.embedded) return props.entityId ?? '';
|
||||
return typeof route.params.id === 'string' ? route.params.id : '';
|
||||
});
|
||||
const isNew = computed(() => (props.embedded ? !props.entityId : route.name === 'company-new'));
|
||||
const pageTitle = computed(() => (isNew.value ? 'شرکت جدید' : 'ویرایش شرکت'));
|
||||
|
||||
const loading = ref(false);
|
||||
@@ -71,9 +83,17 @@ async function submit() {
|
||||
try {
|
||||
if (isNew.value) {
|
||||
const { data } = await api.post<CompanyDto>('/companies', payload());
|
||||
if (props.embedded) {
|
||||
emit('saved');
|
||||
return;
|
||||
}
|
||||
await router.replace({ name: 'company-detail', params: { id: data.id } });
|
||||
} else {
|
||||
await api.patch(`/companies/${id.value}`, payload());
|
||||
if (props.embedded) {
|
||||
emit('saved');
|
||||
return;
|
||||
}
|
||||
await router.push({ name: 'contacts', query: { tab: 'companies' } });
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -103,6 +123,10 @@ async function remove() {
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
if (props.embedded) {
|
||||
emit('cancel');
|
||||
return;
|
||||
}
|
||||
void router.push({ name: 'contacts', query: { tab: 'companies' } });
|
||||
}
|
||||
|
||||
@@ -110,8 +134,14 @@ onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="desktop-head">
|
||||
<section class="page" :class="{ embedded }">
|
||||
<div v-if="embedded" class="embed-actions">
|
||||
<button class="btn primary" type="button" :disabled="saving" @click="submit">
|
||||
{{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
|
||||
</button>
|
||||
<button class="btn cancel" type="button" :disabled="saving" @click="cancel">انصراف</button>
|
||||
</div>
|
||||
<header v-if="!embedded" class="desktop-head">
|
||||
<div class="title-block">
|
||||
<span class="doc-ico"><UiIcon name="building" :size="22" /></span>
|
||||
<div>
|
||||
@@ -135,7 +165,7 @@ onMounted(load);
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<header class="mobile-head">
|
||||
<header v-if="!embedded" class="mobile-head">
|
||||
<button class="icon-btn" type="button" aria-label="ذخیره" :disabled="saving" @click="submit">
|
||||
<UiIcon name="check-plain" :size="22" />
|
||||
</button>
|
||||
@@ -206,6 +236,17 @@ onMounted(load);
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.page.embedded {
|
||||
max-width: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.embed-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.desktop-head {
|
||||
display: none;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -5,7 +5,11 @@ import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
|
||||
import CustomerMoodFace from '@/components/CustomerMoodFace.vue';
|
||||
import UiButton from '@/components/ui/UiButton.vue';
|
||||
import UiModal from '@/components/ui/UiModal.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import PersonFormView from '@/views/PersonFormView.vue';
|
||||
import CompanyFormView from '@/views/CompanyFormView.vue';
|
||||
import type {
|
||||
CompanyDto,
|
||||
ImportContactsResult,
|
||||
@@ -47,6 +51,7 @@ const fileInput = ref<HTMLInputElement | null>(null);
|
||||
const menuId = ref<string | null>(null);
|
||||
const sortOpen = ref(false);
|
||||
const filterOpen = ref(false);
|
||||
const contactModal = ref<'person' | 'company' | null>(null);
|
||||
|
||||
const total = computed(() =>
|
||||
tab.value === 'people' ? people.value?.total ?? 0 : companies.value?.total ?? 0,
|
||||
@@ -265,13 +270,13 @@ onMounted(load);
|
||||
hidden
|
||||
@change="onImportFile"
|
||||
/>
|
||||
<RouterLink
|
||||
class="add-btn"
|
||||
:to="tab === 'companies' ? { name: 'company-new' } : { name: 'person-new' }"
|
||||
:title="tab === 'companies' ? 'شرکت جدید' : 'شخص جدید'"
|
||||
<UiButton
|
||||
type="button"
|
||||
@click="contactModal = tab === 'companies' ? 'company' : 'person'"
|
||||
>
|
||||
<UiIcon name="plus" :size="22" />
|
||||
</RouterLink>
|
||||
<UiIcon name="plus" :size="16" />
|
||||
{{ tab === 'companies' ? 'شرکت جدید' : 'شخص جدید' }}
|
||||
</UiButton>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -504,6 +509,25 @@ onMounted(load);
|
||||
<button type="button" :disabled="page >= pageCount" @click="setPage(page + 1)">›</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<UiModal
|
||||
:open="Boolean(contactModal)"
|
||||
:title="contactModal === 'company' ? 'شرکت جدید' : 'شخص جدید'"
|
||||
@close="contactModal = null"
|
||||
>
|
||||
<PersonFormView
|
||||
v-if="contactModal === 'person'"
|
||||
embedded
|
||||
@saved="contactModal = null; void load()"
|
||||
@cancel="contactModal = null"
|
||||
/>
|
||||
<CompanyFormView
|
||||
v-else-if="contactModal === 'company'"
|
||||
embedded
|
||||
@saved="contactModal = null; void load()"
|
||||
@cancel="contactModal = null"
|
||||
/>
|
||||
</UiModal>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -37,11 +37,29 @@ type MenuKey = 'person' | 'company' | 'owner' | 'currency' | '';
|
||||
type ContactKind = 'person' | 'company';
|
||||
type DealHealth = 'normal' | 'stale' | 'rotten';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
embedded?: boolean;
|
||||
dealId?: string;
|
||||
initialPipelineId?: string;
|
||||
initialStageId?: string;
|
||||
}>(),
|
||||
{ embedded: false },
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
saved: [];
|
||||
cancel: [];
|
||||
}>();
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
const id = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
|
||||
const isNew = computed(() => route.name === 'deal-new');
|
||||
const id = computed(() => {
|
||||
if (props.embedded) return props.dealId ?? '';
|
||||
return typeof route.params.id === 'string' ? route.params.id : '';
|
||||
});
|
||||
const isNew = computed(() => (props.embedded ? !props.dealId : route.name === 'deal-new'));
|
||||
const pageTitle = computed(() => (isNew.value ? 'ایجاد معامله جدید' : 'ویرایش معامله'));
|
||||
|
||||
const loading = ref(false);
|
||||
@@ -188,7 +206,8 @@ async function load() {
|
||||
error.value = '';
|
||||
try {
|
||||
const queryPipelineId =
|
||||
typeof route.query.pipelineId === 'string' ? route.query.pipelineId : undefined;
|
||||
props.initialPipelineId ||
|
||||
(typeof route.query.pipelineId === 'string' ? route.query.pipelineId : undefined);
|
||||
const [peopleRes, companiesRes, pipelinesRes, productsRes, orgRes, usersRes] =
|
||||
await Promise.all([
|
||||
api.get<{ items: PersonDto[] }>('/people', { params: { limit: 100 } }),
|
||||
@@ -254,12 +273,10 @@ 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;
|
||||
const incomingStage = props.initialStageId ||
|
||||
(typeof route.query.stageId === 'string' ? route.query.stageId : '');
|
||||
if (incomingStage && stages.value.some((s) => s.id === incomingStage)) {
|
||||
stageId.value = incomingStage;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
@@ -318,6 +335,10 @@ function validate() {
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
if (props.embedded) {
|
||||
emit('cancel');
|
||||
return;
|
||||
}
|
||||
void router.push({ name: 'pipeline' });
|
||||
}
|
||||
|
||||
@@ -338,6 +359,10 @@ async function submit() {
|
||||
} catch {
|
||||
/* deal saved; follow-up is optional */
|
||||
}
|
||||
if (props.embedded) {
|
||||
emit('saved');
|
||||
return;
|
||||
}
|
||||
await router.replace({ name: 'deal-detail', params: { id: data.id } });
|
||||
} else {
|
||||
await api.patch(`/deals/${id.value}`, {
|
||||
@@ -347,6 +372,10 @@ async function submit() {
|
||||
if (stageId.value) {
|
||||
await api.patch(`/deals/${id.value}/move`, { stageId: stageId.value });
|
||||
}
|
||||
if (props.embedded) {
|
||||
emit('saved');
|
||||
return;
|
||||
}
|
||||
await router.push({ name: 'pipeline' });
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -374,8 +403,17 @@ onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page" @click="closeMenus">
|
||||
<header class="desktop-head">
|
||||
<section class="page" :class="{ embedded }" @click="closeMenus">
|
||||
<div v-if="embedded" class="embed-actions">
|
||||
<button class="btn primary" type="button" :disabled="saving" @click="submit">
|
||||
{{ saving ? 'در حال ذخیره…' : 'ذخیره معامله' }}
|
||||
</button>
|
||||
<button class="btn cancel" type="button" :disabled="saving" @click="cancel">
|
||||
انصراف
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<header v-if="!embedded" class="desktop-head">
|
||||
<div class="title-block">
|
||||
<span class="doc-ico">
|
||||
<UiIcon name="document" :size="22" />
|
||||
@@ -414,7 +452,7 @@ onMounted(load);
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<header class="mobile-head">
|
||||
<header v-if="!embedded" class="mobile-head">
|
||||
<button class="icon-btn" type="button" aria-label="ذخیره" :disabled="saving" @click="submit">
|
||||
<UiIcon name="check-plain" :size="22" />
|
||||
</button>
|
||||
@@ -748,7 +786,7 @@ onMounted(load);
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<footer class="mobile-save">
|
||||
<footer v-if="!embedded" class="mobile-save">
|
||||
<button class="btn outline" type="button" :disabled="saving" @click="cancel">انصراف</button>
|
||||
<button class="btn primary" type="button" :disabled="saving || loading" @click="submit">
|
||||
{{ saving ? 'در حال ذخیره…' : 'ذخیره معامله' }}
|
||||
@@ -765,6 +803,16 @@ onMounted(load);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.page.embedded {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.embed-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.desktop-head {
|
||||
display: none;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -51,11 +51,23 @@ type InstallmentDraft = {
|
||||
amount: string;
|
||||
};
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
embedded?: boolean;
|
||||
entityId?: string;
|
||||
initialKind?: 'invoice' | 'credit' | 'quote';
|
||||
initialFromDealId?: string;
|
||||
}>(),
|
||||
{ embedded: false },
|
||||
);
|
||||
const emit = defineEmits<{ saved: []; cancel: [] }>();
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const loadedInvoiceKind = ref<'invoice' | 'credit' | null>(null);
|
||||
|
||||
const docMode = computed<DocMode>(() => {
|
||||
if (props.embedded && props.initialKind) return props.initialKind;
|
||||
const name = String(route.name || '');
|
||||
if (name.includes('quote')) return 'quote';
|
||||
if (route.query.kind === 'credit' || route.query.doc === 'credit') return 'credit';
|
||||
@@ -64,12 +76,14 @@ const docMode = computed<DocMode>(() => {
|
||||
return 'invoice';
|
||||
});
|
||||
|
||||
const id = computed(() =>
|
||||
typeof route.params.id === 'string' ? route.params.id : '',
|
||||
);
|
||||
const isNew = computed(
|
||||
() => route.name === 'invoice-new' || route.name === 'quote-new',
|
||||
);
|
||||
const id = computed(() => {
|
||||
if (props.embedded) return props.entityId ?? '';
|
||||
return typeof route.params.id === 'string' ? route.params.id : '';
|
||||
});
|
||||
const isNew = computed(() => {
|
||||
if (props.embedded) return !props.entityId;
|
||||
return route.name === 'invoice-new' || route.name === 'quote-new';
|
||||
});
|
||||
const isInvoiceDoc = computed(() => docMode.value !== 'quote');
|
||||
const listRouteName = 'invoices';
|
||||
|
||||
@@ -376,11 +390,12 @@ async function prefillFromSources() {
|
||||
const fromQuoteId =
|
||||
typeof route.query.fromQuoteId === 'string' ? route.query.fromQuoteId : '';
|
||||
const fromDealId =
|
||||
typeof route.query.fromDealId === 'string'
|
||||
props.initialFromDealId ||
|
||||
(typeof route.query.fromDealId === 'string'
|
||||
? route.query.fromDealId
|
||||
: typeof route.query.dealId === 'string'
|
||||
? route.query.dealId
|
||||
: '';
|
||||
: '');
|
||||
const qPersonId =
|
||||
typeof route.query.personId === 'string' ? route.query.personId : '';
|
||||
|
||||
@@ -528,8 +543,10 @@ async function load() {
|
||||
|
||||
function invoicePayload(): CreateInvoiceRequest {
|
||||
const fromDealId =
|
||||
isNew.value && typeof route.query.fromDealId === 'string'
|
||||
? route.query.fromDealId
|
||||
isNew.value &&
|
||||
(props.initialFromDealId || typeof route.query.fromDealId === 'string')
|
||||
? (props.initialFromDealId ||
|
||||
(typeof route.query.fromDealId === 'string' ? route.query.fromDealId : ''))
|
||||
: undefined;
|
||||
const fromQuoteId =
|
||||
isNew.value && typeof route.query.fromQuoteId === 'string'
|
||||
@@ -558,8 +575,10 @@ function invoicePayload(): CreateInvoiceRequest {
|
||||
|
||||
function quotePayload(): CreateQuoteRequest {
|
||||
const fromDealId =
|
||||
isNew.value && typeof route.query.fromDealId === 'string'
|
||||
? route.query.fromDealId
|
||||
isNew.value &&
|
||||
(props.initialFromDealId || typeof route.query.fromDealId === 'string')
|
||||
? (props.initialFromDealId ||
|
||||
(typeof route.query.fromDealId === 'string' ? route.query.fromDealId : ''))
|
||||
: undefined;
|
||||
if (validityMode.value === 'days') {
|
||||
applyValidityDays(validityDays.value);
|
||||
@@ -619,6 +638,10 @@ async function save() {
|
||||
} else {
|
||||
await api.patch(`/invoices/${id.value}`, invoicePayload());
|
||||
}
|
||||
if (props.embedded) {
|
||||
emit('saved');
|
||||
return;
|
||||
}
|
||||
await router.push({ name: listRouteName });
|
||||
} catch (e) {
|
||||
error.value = axiosMessage(e, 'ذخیره ناموفق بود');
|
||||
@@ -709,6 +732,10 @@ function printDoc() {
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
if (props.embedded) {
|
||||
emit('cancel');
|
||||
return;
|
||||
}
|
||||
void router.push({ name: listRouteName });
|
||||
}
|
||||
|
||||
@@ -742,8 +769,14 @@ onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="page-head no-print">
|
||||
<section class="page" :class="{ embedded }">
|
||||
<div v-if="embedded" class="embed-actions no-print">
|
||||
<button class="btn primary" type="button" :disabled="saving" @click="save">
|
||||
{{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
|
||||
</button>
|
||||
<button class="btn cancel" type="button" :disabled="saving" @click="goBack">انصراف</button>
|
||||
</div>
|
||||
<header v-if="!embedded" class="page-head no-print">
|
||||
<div class="head-copy">
|
||||
<div class="title-row">
|
||||
<span class="doc-ico">
|
||||
@@ -1571,6 +1604,17 @@ onMounted(load);
|
||||
max-width: 1180px;
|
||||
}
|
||||
|
||||
.page.embedded {
|
||||
--radius: 10px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.embed-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@@ -9,7 +9,10 @@ import {
|
||||
toFaDigits,
|
||||
} from '@/lib/jalali';
|
||||
import JalaliDateInput from '@/components/JalaliDateInput.vue';
|
||||
import UiButton from '@/components/ui/UiButton.vue';
|
||||
import UiModal from '@/components/ui/UiModal.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import InvoiceFormView from '@/views/InvoiceFormView.vue';
|
||||
import type {
|
||||
InvoiceDto,
|
||||
PaginatedResponse,
|
||||
@@ -71,6 +74,7 @@ const selected = ref<Set<string>>(new Set());
|
||||
const menuId = ref<string | null>(null);
|
||||
const filterSheet = ref(false);
|
||||
const addOpen = ref(false);
|
||||
const invoiceModal = ref<{ kind: 'invoice' | 'credit' | 'quote' } | null>(null);
|
||||
|
||||
function mapInvoiceStatus(inv: InvoiceDto): { key: PayFilter; label: string } {
|
||||
if (inv.status === 'paid') return { key: 'paid', label: 'پرداخت شده' };
|
||||
@@ -349,25 +353,23 @@ onMounted(load);
|
||||
</div>
|
||||
<div class="head-actions" @click.stop>
|
||||
<div class="add-split desk-only">
|
||||
<RouterLink class="btn primary" :to="{ name: 'invoice-new' }">
|
||||
<UiIcon name="plus" :size="18" />
|
||||
<UiButton type="button" @click="invoiceModal = { kind: 'invoice' }; addOpen = false">
|
||||
<UiIcon name="plus" :size="16" />
|
||||
افزودن فاکتور
|
||||
</RouterLink>
|
||||
</UiButton>
|
||||
<button type="button" class="btn primary split" aria-label="گزینههای افزودن" @click="addOpen = !addOpen">
|
||||
<UiIcon name="chevron" :size="14" />
|
||||
</button>
|
||||
<div v-if="addOpen" class="menu">
|
||||
<RouterLink :to="{ name: 'invoice-new' }">فاکتور جدید</RouterLink>
|
||||
<RouterLink :to="{ name: 'quote-new' }">پیش فاکتور جدید</RouterLink>
|
||||
<RouterLink :to="{ name: 'invoice-new', query: { kind: 'credit' } }">
|
||||
فاکتور برگشتی
|
||||
</RouterLink>
|
||||
<button type="button" @click="invoiceModal = { kind: 'invoice' }; addOpen = false">فاکتور جدید</button>
|
||||
<button type="button" @click="invoiceModal = { kind: 'quote' }; addOpen = false">پیش فاکتور جدید</button>
|
||||
<button type="button" @click="invoiceModal = { kind: 'credit' }; addOpen = false">فاکتور برگشتی</button>
|
||||
</div>
|
||||
</div>
|
||||
<RouterLink class="icon-btn add-doc mob-only" :to="{ name: 'invoice-new' }" aria-label="افزودن">
|
||||
<UiIcon name="document" :size="18" />
|
||||
<UiIcon name="plus" :size="12" class="plus-badge" />
|
||||
</RouterLink>
|
||||
<UiButton class="mob-only" type="button" @click="invoiceModal = { kind: 'invoice' }">
|
||||
<UiIcon name="plus" :size="16" />
|
||||
افزودن
|
||||
</UiButton>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -596,7 +598,25 @@ onMounted(load);
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<RouterLink class="fab" :to="{ name: 'invoice-new' }">افزودن فاکتور +</RouterLink>
|
||||
<UiModal
|
||||
:open="Boolean(invoiceModal)"
|
||||
:title="
|
||||
invoiceModal?.kind === 'quote'
|
||||
? 'پیش فاکتور جدید'
|
||||
: invoiceModal?.kind === 'credit'
|
||||
? 'فاکتور برگشتی'
|
||||
: 'فاکتور جدید'
|
||||
"
|
||||
@close="invoiceModal = null"
|
||||
>
|
||||
<InvoiceFormView
|
||||
v-if="invoiceModal"
|
||||
embedded
|
||||
:initial-kind="invoiceModal.kind"
|
||||
@saved="invoiceModal = null; void load()"
|
||||
@cancel="invoiceModal = null"
|
||||
/>
|
||||
</UiModal>
|
||||
|
||||
<div v-if="filterSheet" class="sheet-backdrop" @click="filterSheet = false">
|
||||
<div class="sheet" @click.stop>
|
||||
@@ -708,11 +728,14 @@ h1 { margin: 0; font-size: 1.5rem; font-weight: 800; }
|
||||
box-shadow: 0 12px 28px rgba(15,23,42,.12); padding: 0.35rem; display: grid;
|
||||
}
|
||||
.menu.left { left: auto; right: 0; }
|
||||
.menu a {
|
||||
.menu a,
|
||||
.menu button {
|
||||
display: block; width: 100%;
|
||||
border: 0; background: transparent; text-align: right; padding: 0.55rem 0.7rem;
|
||||
border-radius: 8px; color: var(--text); text-decoration: none; cursor: pointer;
|
||||
}
|
||||
.menu a:hover { background: var(--teal-soft); color: var(--teal); }
|
||||
.menu a:hover,
|
||||
.menu button:hover { background: var(--teal-soft); color: var(--teal); }
|
||||
|
||||
.tabs {
|
||||
display: flex; gap: 0.35rem; overflow-x: auto; border-bottom: 1px solid var(--line);
|
||||
|
||||
@@ -172,7 +172,7 @@ onMounted(load);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1.5rem;
|
||||
background: #f4f7f8;
|
||||
background: var(--bg);
|
||||
}
|
||||
.panel {
|
||||
width: min(440px, 100%);
|
||||
|
||||
@@ -11,10 +11,22 @@ import EntityTimeline from '@/components/EntityTimeline.vue';
|
||||
import MentoMemoryPanel from '@/components/MentoMemoryPanel.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
embedded?: boolean;
|
||||
entityId?: string;
|
||||
}>(),
|
||||
{ embedded: false },
|
||||
);
|
||||
const emit = defineEmits<{ saved: []; cancel: [] }>();
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const id = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
|
||||
const isNew = computed(() => route.name === 'person-new');
|
||||
const id = computed(() => {
|
||||
if (props.embedded) return props.entityId ?? '';
|
||||
return typeof route.params.id === 'string' ? route.params.id : '';
|
||||
});
|
||||
const isNew = computed(() => (props.embedded ? !props.entityId : route.name === 'person-new'));
|
||||
const pageTitle = computed(() => (isNew.value ? 'شخص جدید' : 'ویرایش شخص'));
|
||||
|
||||
const loading = ref(false);
|
||||
@@ -94,9 +106,17 @@ async function submit() {
|
||||
try {
|
||||
if (isNew.value) {
|
||||
const { data } = await api.post<PersonDto>('/people', payload());
|
||||
if (props.embedded) {
|
||||
emit('saved');
|
||||
return;
|
||||
}
|
||||
await router.replace({ name: 'person-detail', params: { id: data.id } });
|
||||
} else {
|
||||
await api.patch(`/people/${id.value}`, payload());
|
||||
if (props.embedded) {
|
||||
emit('saved');
|
||||
return;
|
||||
}
|
||||
await router.push({ name: 'person-detail', params: { id: id.value } });
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -126,6 +146,10 @@ async function remove() {
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
if (props.embedded) {
|
||||
emit('cancel');
|
||||
return;
|
||||
}
|
||||
void router.push(backTo.value);
|
||||
}
|
||||
|
||||
@@ -133,8 +157,14 @@ onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="desktop-head">
|
||||
<section class="page" :class="{ embedded }">
|
||||
<div v-if="embedded" class="embed-actions">
|
||||
<button class="btn primary" type="button" :disabled="saving" @click="submit">
|
||||
{{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
|
||||
</button>
|
||||
<button class="btn cancel" type="button" :disabled="saving" @click="cancel">انصراف</button>
|
||||
</div>
|
||||
<header v-if="!embedded" class="desktop-head">
|
||||
<div class="title-block">
|
||||
<span class="doc-ico"><UiIcon name="user" :size="22" /></span>
|
||||
<div>
|
||||
@@ -158,7 +188,7 @@ onMounted(load);
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<header class="mobile-head">
|
||||
<header v-if="!embedded" class="mobile-head">
|
||||
<button class="icon-btn" type="button" aria-label="ذخیره" :disabled="saving" @click="submit">
|
||||
<UiIcon name="check-plain" :size="22" />
|
||||
</button>
|
||||
@@ -261,6 +291,17 @@ onMounted(load);
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.page.embedded {
|
||||
max-width: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.embed-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.desktop-head {
|
||||
display: none;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -11,10 +11,15 @@ import PipelineList from '@/components/pipeline/PipelineList.vue';
|
||||
import DealCardOverlay from '@/components/pipeline/DealCardOverlay.vue';
|
||||
import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
|
||||
import {
|
||||
filterStagesByQuery,
|
||||
filterStages,
|
||||
mapBoardToStages,
|
||||
moveStageToIndex,
|
||||
updateDealStage,
|
||||
} from '@/lib/pipeline-board';
|
||||
import UiButton from '@/components/ui/UiButton.vue';
|
||||
import UiInput from '@/components/ui/UiInput.vue';
|
||||
import UiModal from '@/components/ui/UiModal.vue';
|
||||
import DealFormView from '@/views/DealFormView.vue';
|
||||
import type { PipelineBoardDto, PipelineDto } from '@mento/shared';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { canManageSettings } from '@/lib/roles';
|
||||
@@ -32,10 +37,16 @@ const pipelines = ref<PipelineDto[]>([]);
|
||||
const boardPipelineId = ref('');
|
||||
const viewMode = ref<PipelineViewMode>('kanban');
|
||||
const search = ref('');
|
||||
const amountMin = ref('');
|
||||
const amountMax = ref('');
|
||||
const showCreate = ref(false);
|
||||
const newName = ref('');
|
||||
const dealModal = ref<{ dealId?: string; stageId?: string } | null>(null);
|
||||
const deleteStageId = ref<string | null>(null);
|
||||
const stageBusy = ref(false);
|
||||
|
||||
const draggingId = ref<string | null>(null);
|
||||
const draggingColumnId = ref<string | null>(null);
|
||||
const dropStageId = ref<string | null>(null);
|
||||
const overlayDeal = ref<PipelineDeal | null>(null);
|
||||
const overlayAccent = ref<PipelineStage['color']>('green');
|
||||
@@ -62,7 +73,11 @@ const selectedPipelineId = computed({
|
||||
});
|
||||
|
||||
const visibleStages = computed(() =>
|
||||
filterStagesByQuery(stages.value, search.value),
|
||||
filterStages(stages.value, {
|
||||
query: search.value,
|
||||
amountMin: amountMin.value === '' ? null : Number(amountMin.value),
|
||||
amountMax: amountMax.value === '' ? null : Number(amountMax.value),
|
||||
}),
|
||||
);
|
||||
|
||||
function formatDealDate(iso: string) {
|
||||
@@ -197,10 +212,21 @@ async function applyUpdateDealStage(
|
||||
|
||||
async function onDrop(stageId: string, event: DragEvent, index?: number) {
|
||||
event.preventDefault();
|
||||
const dealId = event.dataTransfer?.getData('text/plain') || draggingId.value;
|
||||
const raw =
|
||||
event.dataTransfer?.getData('text/plain') ||
|
||||
draggingColumnId.value ||
|
||||
draggingId.value ||
|
||||
'';
|
||||
dropStageId.value = null;
|
||||
draggingId.value = null;
|
||||
overlayDeal.value = null;
|
||||
if (raw.startsWith('stage:') || draggingColumnId.value) {
|
||||
const fromId = raw.replace(/^stage:/, '') || draggingColumnId.value;
|
||||
draggingColumnId.value = null;
|
||||
if (fromId) await reorderColumn(fromId, stageId);
|
||||
return;
|
||||
}
|
||||
const dealId = raw;
|
||||
if (!dealId || moving.value) return;
|
||||
|
||||
const current = stages.value.find((s) => s.deals.some((d) => d.id === dealId));
|
||||
@@ -212,14 +238,128 @@ async function onDrop(stageId: string, event: DragEvent, index?: number) {
|
||||
await applyUpdateDealStage(dealId, stageId, index);
|
||||
}
|
||||
|
||||
function apiMessage(e: unknown, fallback: string) {
|
||||
if (axios.isAxiosError(e)) {
|
||||
const msg = (e.response?.data as { message?: string | string[] })?.message;
|
||||
if (typeof msg === 'string' && msg) return msg;
|
||||
if (Array.isArray(msg) && msg[0]) return String(msg[0]);
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function onAddDeal(stageId: string) {
|
||||
void router.push({
|
||||
name: 'deal-new',
|
||||
query: {
|
||||
pipelineId: selectedPipelineId.value || undefined,
|
||||
stageId,
|
||||
},
|
||||
});
|
||||
dealModal.value = { stageId };
|
||||
}
|
||||
|
||||
function onColumnDragStart(stageId: string) {
|
||||
draggingColumnId.value = stageId;
|
||||
}
|
||||
|
||||
function onColumnDragEnd() {
|
||||
draggingColumnId.value = null;
|
||||
dropStageId.value = null;
|
||||
}
|
||||
|
||||
async function persistStageOrder(next: PipelineStage[], prev: PipelineStage[]) {
|
||||
if (!boardPipelineId.value || !canCreatePipeline.value) return;
|
||||
stages.value = next;
|
||||
stageBusy.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
await api.patch(`/pipelines/${boardPipelineId.value}/stages/order`, {
|
||||
stageIds: next.map((s) => s.id),
|
||||
});
|
||||
} catch (e) {
|
||||
stages.value = prev;
|
||||
error.value = apiMessage(e, 'جابهجایی ستون ناموفق بود.');
|
||||
} finally {
|
||||
stageBusy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onMoveStage(stageId: string, dir: -1 | 1) {
|
||||
if (stageBusy.value) return;
|
||||
const from = stages.value.findIndex((s) => s.id === stageId);
|
||||
const to = from + dir;
|
||||
if (from < 0 || to < 0 || to >= stages.value.length) return;
|
||||
await persistStageOrder(
|
||||
moveStageToIndex(stages.value, stageId, to),
|
||||
stages.value,
|
||||
);
|
||||
}
|
||||
|
||||
async function reorderColumn(fromId: string, toId: string) {
|
||||
if (stageBusy.value || fromId === toId) return;
|
||||
const to = stages.value.findIndex((s) => s.id === toId);
|
||||
if (to < 0) return;
|
||||
await persistStageOrder(
|
||||
moveStageToIndex(stages.value, fromId, to),
|
||||
stages.value,
|
||||
);
|
||||
}
|
||||
|
||||
async function onRenameStage(stageId: string, title: string) {
|
||||
if (!boardPipelineId.value || stageBusy.value) return;
|
||||
const prev = stages.value;
|
||||
stages.value = prev.map((s) =>
|
||||
s.id === stageId ? { ...s, title } : s,
|
||||
);
|
||||
stageBusy.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
await api.patch(`/pipelines/${boardPipelineId.value}/stages/${stageId}`, {
|
||||
name: title,
|
||||
});
|
||||
} catch (e) {
|
||||
stages.value = prev;
|
||||
error.value = apiMessage(e, 'تغییر نام ستون ناموفق بود.');
|
||||
} finally {
|
||||
stageBusy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onAddStage(name: string) {
|
||||
if (!boardPipelineId.value || stageBusy.value) return;
|
||||
stageBusy.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
await api.post(`/pipelines/${boardPipelineId.value}/stages`, { name });
|
||||
await load();
|
||||
} catch (e) {
|
||||
error.value = apiMessage(e, 'افزودن ستون ناموفق بود.');
|
||||
} finally {
|
||||
stageBusy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onDeleteStage(stageId: string) {
|
||||
deleteStageId.value = stageId;
|
||||
}
|
||||
|
||||
const deleteStageTitle = computed(() => {
|
||||
const id = deleteStageId.value;
|
||||
return stages.value.find((s) => s.id === id)?.title ?? '';
|
||||
});
|
||||
|
||||
async function confirmDeleteStage() {
|
||||
const stageId = deleteStageId.value;
|
||||
if (!stageId || !boardPipelineId.value || stageBusy.value) return;
|
||||
stageBusy.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
await api.delete(`/pipelines/${boardPipelineId.value}/stages/${stageId}`);
|
||||
deleteStageId.value = null;
|
||||
await load();
|
||||
} catch (e) {
|
||||
error.value = apiMessage(e, 'حذف ستون ناموفق بود.');
|
||||
} finally {
|
||||
stageBusy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onDealSaved() {
|
||||
dealModal.value = null;
|
||||
await load();
|
||||
}
|
||||
|
||||
function onOpenDeal(dealId: string) {
|
||||
@@ -231,10 +371,6 @@ function onMenuDeal(dealId: string) {
|
||||
menuOpenId.value = menuOpenId.value === dealId ? null : dealId;
|
||||
}
|
||||
|
||||
function onFilter() {
|
||||
// UI فیلتر — اتصال سیستم فیلتر پیشرفته بعداً
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.query.pipelineId,
|
||||
(id, prev) => {
|
||||
@@ -262,36 +398,15 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
|
||||
<PipelineToolbar
|
||||
pipeline-name="کاریز فروش"
|
||||
:pipeline-options="pipelineOptions"
|
||||
:selected-pipeline-id="selectedPipelineId"
|
||||
:view-mode="viewMode"
|
||||
:search="search"
|
||||
v-model:selected-pipeline-id="selectedPipelineId"
|
||||
v-model:view-mode="viewMode"
|
||||
v-model:search="search"
|
||||
v-model:amount-min="amountMin"
|
||||
v-model:amount-max="amountMax"
|
||||
:can-create="canCreatePipeline"
|
||||
@update:view-mode="viewMode = $event"
|
||||
@update:search="search = $event"
|
||||
@update:selected-pipeline-id="selectedPipelineId = $event"
|
||||
@filter="onFilter"
|
||||
@create="showCreate = !showCreate"
|
||||
@create="showCreate = true"
|
||||
/>
|
||||
|
||||
<form
|
||||
v-if="showCreate && canCreatePipeline"
|
||||
class="create-box"
|
||||
@submit.prevent="createPipeline"
|
||||
>
|
||||
<input
|
||||
v-model="newName"
|
||||
type="text"
|
||||
placeholder="نام کاریز جدید…"
|
||||
maxlength="120"
|
||||
required
|
||||
minlength="2"
|
||||
/>
|
||||
<button class="btn" type="submit" :disabled="saving || newName.trim().length < 2">
|
||||
{{ saving ? 'در حال ساخت…' : 'ساخت' }}
|
||||
</button>
|
||||
<button class="btn-ghost-sm" type="button" @click="showCreate = false">انصراف</button>
|
||||
</form>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="loading && !stages.length" class="muted">در حال بارگذاری کاریز…</p>
|
||||
|
||||
@@ -307,6 +422,7 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
|
||||
:stages="visibleStages"
|
||||
:dragging-id="draggingId"
|
||||
:drop-stage-id="dropStageId"
|
||||
:can-manage="canCreatePipeline"
|
||||
@drag-start="onDragStart"
|
||||
@drag-end="onDragEnd"
|
||||
@drag-over="onDragOver"
|
||||
@@ -314,6 +430,12 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
|
||||
@add-deal="onAddDeal"
|
||||
@open-deal="onOpenDeal"
|
||||
@menu-deal="onMenuDeal"
|
||||
@rename-stage="onRenameStage"
|
||||
@delete-stage="onDeleteStage"
|
||||
@move-stage="onMoveStage"
|
||||
@column-drag-start="onColumnDragStart"
|
||||
@column-drag-end="onColumnDragEnd"
|
||||
@add-stage="onAddStage"
|
||||
/>
|
||||
|
||||
<Teleport to="body">
|
||||
@@ -330,8 +452,85 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
|
||||
<button type="button" role="menuitem" @click="onOpenDeal(menuOpenId)">
|
||||
مشاهده معامله
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
@click="dealModal = { dealId: menuOpenId ?? undefined }; menuOpenId = null"
|
||||
>
|
||||
ویرایش
|
||||
</button>
|
||||
<button type="button" role="menuitem" @click="menuOpenId = null">بستن</button>
|
||||
</div>
|
||||
|
||||
<UiModal
|
||||
:open="showCreate && canCreatePipeline"
|
||||
title="کاریز جدید"
|
||||
@close="showCreate = false"
|
||||
>
|
||||
<form class="create-form" @submit.prevent="createPipeline">
|
||||
<label class="field">
|
||||
<span>نام کاریز</span>
|
||||
<UiInput
|
||||
v-model="newName"
|
||||
placeholder="نام کاریز جدید…"
|
||||
:maxlength="120"
|
||||
required
|
||||
:minlength="2"
|
||||
/>
|
||||
</label>
|
||||
</form>
|
||||
<template #footer>
|
||||
<UiButton
|
||||
type="button"
|
||||
:disabled="saving || newName.trim().length < 2"
|
||||
@click="createPipeline"
|
||||
>
|
||||
{{ saving ? 'در حال ساخت…' : 'ساخت' }}
|
||||
</UiButton>
|
||||
<UiButton variant="ghost" type="button" @click="showCreate = false">
|
||||
انصراف
|
||||
</UiButton>
|
||||
</template>
|
||||
</UiModal>
|
||||
|
||||
<UiModal
|
||||
:open="Boolean(deleteStageId)"
|
||||
title="حذف ستون"
|
||||
@close="deleteStageId = null"
|
||||
>
|
||||
<p class="delete-copy">
|
||||
ستون «{{ deleteStageTitle }}» حذف شود؟ اگر معاملهای داخل آن باشد باید
|
||||
اول آنها را جابهجا کنید.
|
||||
</p>
|
||||
<template #footer>
|
||||
<UiButton
|
||||
type="button"
|
||||
:disabled="stageBusy"
|
||||
@click="confirmDeleteStage"
|
||||
>
|
||||
{{ stageBusy ? 'در حال حذف…' : 'حذف' }}
|
||||
</UiButton>
|
||||
<UiButton variant="ghost" type="button" @click="deleteStageId = null">
|
||||
انصراف
|
||||
</UiButton>
|
||||
</template>
|
||||
</UiModal>
|
||||
|
||||
<UiModal
|
||||
:open="Boolean(dealModal)"
|
||||
:title="dealModal?.dealId ? 'ویرایش معامله' : 'ایجاد معامله جدید'"
|
||||
@close="dealModal = null"
|
||||
>
|
||||
<DealFormView
|
||||
v-if="dealModal"
|
||||
embedded
|
||||
:deal-id="dealModal.dealId"
|
||||
:initial-pipeline-id="selectedPipelineId || undefined"
|
||||
:initial-stage-id="dealModal.stageId"
|
||||
@saved="onDealSaved"
|
||||
@cancel="dealModal = null"
|
||||
/>
|
||||
</UiModal>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -347,46 +546,14 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
|
||||
container-name: pipeline;
|
||||
}
|
||||
|
||||
.btn-ghost-sm {
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
color: var(--accent);
|
||||
border-radius: 10px;
|
||||
padding: 0.4rem 0.75rem;
|
||||
font-weight: 700;
|
||||
.create-form .field {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.create-form .field span {
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.create-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.create-box input {
|
||||
flex: 1 1 180px;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.65rem 0.85rem;
|
||||
background: #fff;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@container pipeline (max-width: 560px) {
|
||||
.create-box {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.create-box input,
|
||||
.create-box .btn,
|
||||
.create-box .btn-ghost-sm {
|
||||
width: 100%;
|
||||
}
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.muted {
|
||||
@@ -398,6 +565,12 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.delete-copy {
|
||||
margin: 0;
|
||||
line-height: 1.7;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.menu-pop {
|
||||
position: fixed;
|
||||
inset-inline-start: 1rem;
|
||||
@@ -405,7 +578,7 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
|
||||
z-index: 40;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 0.35rem;
|
||||
display: grid;
|
||||
|
||||
@@ -22,11 +22,21 @@ const CATEGORIES = [
|
||||
|
||||
const UNITS = ['عدد', 'گرم', 'مثقال', 'سوت', 'کیلوگرم', 'ساعت', 'بسته'];
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
embedded?: boolean;
|
||||
entityId?: string;
|
||||
}>(),
|
||||
{ embedded: false },
|
||||
);
|
||||
const emit = defineEmits<{ saved: []; cancel: [] }>();
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const editId = computed(() =>
|
||||
typeof route.params.id === 'string' ? route.params.id : '',
|
||||
);
|
||||
const editId = computed(() => {
|
||||
if (props.embedded) return props.entityId ?? '';
|
||||
return typeof route.params.id === 'string' ? route.params.id : '';
|
||||
});
|
||||
const isEdit = computed(() => Boolean(editId.value));
|
||||
|
||||
const loading = ref(false);
|
||||
@@ -148,6 +158,10 @@ async function submit() {
|
||||
} else {
|
||||
await api.post('/products', payload);
|
||||
}
|
||||
if (props.embedded) {
|
||||
emit('saved');
|
||||
return;
|
||||
}
|
||||
await router.push({ name: 'products' });
|
||||
} catch (e) {
|
||||
if (axios.isAxiosError(e)) {
|
||||
@@ -164,6 +178,10 @@ async function submit() {
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
if (props.embedded) {
|
||||
emit('cancel');
|
||||
return;
|
||||
}
|
||||
void router.push({ name: 'products' });
|
||||
}
|
||||
|
||||
@@ -178,8 +196,14 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="page-head">
|
||||
<section class="page" :class="{ embedded }">
|
||||
<div v-if="embedded" class="embed-actions">
|
||||
<button class="btn primary" type="button" :disabled="saving" @click="submit">
|
||||
{{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
|
||||
</button>
|
||||
<button class="btn cancel" type="button" :disabled="saving" @click="cancel">انصراف</button>
|
||||
</div>
|
||||
<header v-if="!embedded" class="page-head">
|
||||
<button type="button" class="back mob-only" aria-label="بازگشت" @click="cancel">
|
||||
<UiIcon name="chevron" :size="20" />
|
||||
</button>
|
||||
@@ -401,6 +425,16 @@ onMounted(async () => {
|
||||
gap: 1rem;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.page.embedded {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.embed-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { RouterLink, useRouter } from 'vue-router';
|
||||
import { useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import { formatClockFa, formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
|
||||
import { formatMoney } from '@/lib/money';
|
||||
import UiButton from '@/components/ui/UiButton.vue';
|
||||
import UiModal from '@/components/ui/UiModal.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import ProductFormView from '@/views/ProductFormView.vue';
|
||||
import type { ProductDto } from '@mento/shared';
|
||||
|
||||
type SortKey = 'name' | 'newest' | 'price';
|
||||
@@ -26,6 +29,7 @@ const selected = ref<Set<string>>(new Set());
|
||||
const menuId = ref<string | null>(null);
|
||||
const sortOpen = ref(false);
|
||||
const moreOpen = ref(false);
|
||||
const productModal = ref(false);
|
||||
|
||||
const categories = computed(() => {
|
||||
const set = new Set<string>();
|
||||
@@ -204,10 +208,10 @@ onMounted(load);
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-actions" @click.stop>
|
||||
<RouterLink class="btn primary" :to="{ name: 'product-new' }">
|
||||
<UiIcon name="plus" :size="18" />
|
||||
<UiButton type="button" @click="productModal = true">
|
||||
<UiIcon name="plus" :size="16" />
|
||||
محصول جدید
|
||||
</RouterLink>
|
||||
</UiButton>
|
||||
<div class="more-wrap">
|
||||
<button
|
||||
type="button"
|
||||
@@ -432,9 +436,14 @@ onMounted(load);
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<RouterLink class="fab" :to="{ name: 'product-new' }" aria-label="محصول جدید">
|
||||
<UiIcon name="plus" :size="24" />
|
||||
</RouterLink>
|
||||
<UiModal :open="productModal" title="محصول جدید" @close="productModal = false">
|
||||
<ProductFormView
|
||||
v-if="productModal"
|
||||
embedded
|
||||
@saved="productModal = false; void load()"
|
||||
@cancel="productModal = false"
|
||||
/>
|
||||
</UiModal>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -894,8 +894,8 @@ th { background: #f8fafc; color: #64748b; font-weight: 700; white-space: nowrap;
|
||||
background: #fff; border-top: 1px solid #eef2f7; box-shadow: 0 -8px 24px rgba(15,23,42,.06);
|
||||
}
|
||||
.fab {
|
||||
border: 0; border-radius: 14px; background: var(--teal); color: #fff; font-weight: 800;
|
||||
padding: 0.85rem 1rem; cursor: pointer;
|
||||
border: 0; border-radius: 10px; min-height: 36px; background: var(--teal); color: #fff; font-weight: 800;
|
||||
padding: 0 1rem; cursor: pointer;
|
||||
}
|
||||
.side-link {
|
||||
display: grid; justify-items: center; gap: 0.15rem; text-decoration: none; color: #64748b;
|
||||
|
||||
Generated
+43
-3
@@ -11,9 +11,6 @@
|
||||
"apps/*",
|
||||
"packages/*"
|
||||
],
|
||||
"dependencies": {
|
||||
"@rollup/rollup-win32-x64-msvc": "*"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
},
|
||||
@@ -61,8 +58,10 @@
|
||||
"dependencies": {
|
||||
"@mento/shared": "*",
|
||||
"axios": "^1.8.4",
|
||||
"echarts": "^6.1.0",
|
||||
"pinia": "^3.0.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-echarts": "^8.3.0",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -3798,6 +3797,22 @@
|
||||
"safe-buffer": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-6.1.0.tgz",
|
||||
"integrity": "sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "6.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts/node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/ee-first": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
|
||||
@@ -7859,6 +7874,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-echarts": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-8.3.0.tgz",
|
||||
"integrity": "sha512-gqOZ5uuBF4x4KTXQpTmgH5BuAwUSO+y9U7L1pHCIESQvgnTitXtnyjrfePH+9YXMRhmTLjchEx3EnsPhoiIX/A==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"echarts": "^6.0.0",
|
||||
"vue": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.6.4",
|
||||
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.6.4.tgz",
|
||||
@@ -8132,6 +8157,21 @@
|
||||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-6.1.0.tgz",
|
||||
"integrity": "sha512-oEGMDB6pOP2S6OwRR4PdVv610zrjnA3Bh+JnSG12fYJlBKjtNAoEb5fSUoCOOINlH96I2fU38/A2UpRKs67xYQ==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/zrender/node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"packages/shared": {
|
||||
"name": "@mento/shared",
|
||||
"version": "0.1.0",
|
||||
|
||||
@@ -390,6 +390,18 @@ export interface CreatePipelineRequest {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface CreatePipelineStageRequest {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface UpdatePipelineStageRequest {
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export interface ReorderPipelineStagesRequest {
|
||||
stageIds: string[];
|
||||
}
|
||||
|
||||
export interface CreateDealRequest {
|
||||
title: string;
|
||||
pipelineId?: string;
|
||||
|
||||
Reference in New Issue
Block a user