Give automations a visual chain with conditions and SMS, and match the pipeline board to the sales mockup.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,551 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import {
|
||||
AUTOMATION_ACTION_LABELS,
|
||||
AUTOMATION_ACTIONS,
|
||||
AUTOMATION_CONDITION_FIELD_LABELS,
|
||||
AUTOMATION_CONDITION_OP_LABELS,
|
||||
AUTOMATION_NOTIFY_CHANNEL_LABELS,
|
||||
AUTOMATION_TRIGGER_LABELS,
|
||||
MAX_AUTOMATION_STEPS,
|
||||
isAutomationCondition,
|
||||
type AutomationAction,
|
||||
type AutomationStep,
|
||||
type AutomationTrigger,
|
||||
} from '@mento/shared';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
|
||||
export type AutomationAddPayload =
|
||||
| { kind: 'action'; action: AutomationAction }
|
||||
| { kind: 'condition' };
|
||||
|
||||
const props = defineProps<{
|
||||
trigger: AutomationTrigger;
|
||||
steps: AutomationStep[];
|
||||
selected: 'trigger' | string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [id: 'trigger' | string];
|
||||
add: [payload: AutomationAddPayload, index: number];
|
||||
remove: [id: string];
|
||||
}>();
|
||||
|
||||
const addAt = ref<number | null>(null);
|
||||
const canAdd = computed(() => props.steps.length < MAX_AUTOMATION_STEPS);
|
||||
const actionCount = computed(
|
||||
() => props.steps.filter((s) => !isAutomationCondition(s)).length,
|
||||
);
|
||||
|
||||
type NodeIcon = 'sparkle' | 'flag' | 'bell' | 'gift' | 'filter';
|
||||
|
||||
function actionIcon(action: AutomationAction): NodeIcon {
|
||||
if (action === 'create_notification') return 'bell';
|
||||
if (action === 'add_loyalty_points') return 'gift';
|
||||
return 'flag';
|
||||
}
|
||||
|
||||
function canRemove(step: AutomationStep) {
|
||||
if (props.steps.length <= 1) return false;
|
||||
if (isAutomationCondition(step)) return true;
|
||||
return actionCount.value > 1;
|
||||
}
|
||||
|
||||
function stepTitle(step: AutomationStep) {
|
||||
if (isAutomationCondition(step)) {
|
||||
const field = step.conditionField ?? 'has_person';
|
||||
return AUTOMATION_CONDITION_FIELD_LABELS[field];
|
||||
}
|
||||
return AUTOMATION_ACTION_LABELS[step.action ?? 'create_activity'];
|
||||
}
|
||||
|
||||
function stepHint(step: AutomationStep) {
|
||||
if (isAutomationCondition(step)) {
|
||||
const op = step.conditionOp ?? 'is_set';
|
||||
const opLabel = AUTOMATION_CONDITION_OP_LABELS[op];
|
||||
if (step.conditionField === 'deal_amount' && step.conditionValue != null) {
|
||||
return `${opLabel} ${toFaDigits(Number(step.conditionValue))}`;
|
||||
}
|
||||
if (step.conditionField === 'ticket_priority' && step.conditionValue) {
|
||||
const pri: Record<string, string> = {
|
||||
low: 'کم',
|
||||
normal: 'عادی',
|
||||
high: 'بالا',
|
||||
urgent: 'فوری',
|
||||
};
|
||||
return `${opLabel} ${pri[String(step.conditionValue)] ?? step.conditionValue}`;
|
||||
}
|
||||
return opLabel;
|
||||
}
|
||||
if (step.action === 'add_loyalty_points') {
|
||||
return `${toFaDigits(step.points ?? 100)} امتیاز`;
|
||||
}
|
||||
if (step.action === 'create_notification') {
|
||||
return AUTOMATION_NOTIFY_CHANNEL_LABELS[step.notifyChannel ?? 'app'];
|
||||
}
|
||||
const types: Record<string, string> = {
|
||||
call: 'تماس',
|
||||
meeting: 'جلسه',
|
||||
task: 'وظیفه',
|
||||
note: 'یادداشت',
|
||||
};
|
||||
return types[step.activityType ?? 'task'] ?? 'وظیفه';
|
||||
}
|
||||
|
||||
function openAdd(index: number) {
|
||||
if (!canAdd.value) return;
|
||||
addAt.value = addAt.value === index ? null : index;
|
||||
}
|
||||
|
||||
function pickAction(action: AutomationAction) {
|
||||
if (addAt.value == null) return;
|
||||
emit('add', { kind: 'action', action }, addAt.value);
|
||||
addAt.value = null;
|
||||
}
|
||||
|
||||
function pickCondition() {
|
||||
if (addAt.value == null) return;
|
||||
emit('add', { kind: 'condition' }, addAt.value);
|
||||
addAt.value = null;
|
||||
}
|
||||
|
||||
function nodeClass(step: AutomationStep) {
|
||||
if (isAutomationCondition(step)) return 'condition';
|
||||
return step.action ?? 'create_activity';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="canvas" @click.self="addAt = null">
|
||||
<div class="flow">
|
||||
<button
|
||||
class="node trigger"
|
||||
type="button"
|
||||
:class="{ on: selected === 'trigger' }"
|
||||
@click="emit('select', 'trigger')"
|
||||
>
|
||||
<span class="icon">
|
||||
<UiIcon name="sparkle" :size="18" />
|
||||
</span>
|
||||
<span class="copy">
|
||||
<span class="kind">اگر</span>
|
||||
<strong>{{ AUTOMATION_TRIGGER_LABELS[trigger] }}</strong>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<template v-for="(step, i) in steps" :key="step.id">
|
||||
<div class="wire" :class="{ open: addAt === i }">
|
||||
<button
|
||||
v-if="canAdd"
|
||||
class="plus"
|
||||
type="button"
|
||||
title="افزودن گره"
|
||||
@click.stop="openAdd(i)"
|
||||
>
|
||||
<UiIcon name="plus" :size="14" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="node-wrap">
|
||||
<button
|
||||
class="node action"
|
||||
type="button"
|
||||
:class="[nodeClass(step), { on: selected === step.id }]"
|
||||
@click="emit('select', step.id)"
|
||||
>
|
||||
<span class="icon">
|
||||
<UiIcon
|
||||
:name="isAutomationCondition(step) ? 'filter' : actionIcon(step.action ?? 'create_activity')"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
<span class="copy">
|
||||
<span class="kind">{{ isAutomationCondition(step) ? 'شرط' : 'آنگاه' }}</span>
|
||||
<strong>{{ stepTitle(step) }}</strong>
|
||||
<em>{{ stepHint(step) }}</em>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="canRemove(step)"
|
||||
class="trash"
|
||||
type="button"
|
||||
title="حذف"
|
||||
@click.stop="emit('remove', step.id)"
|
||||
>
|
||||
<UiIcon name="trash" :size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="wire end" :class="{ open: addAt === steps.length }">
|
||||
<button
|
||||
v-if="canAdd"
|
||||
class="plus big"
|
||||
type="button"
|
||||
title="افزودن گره بعدی"
|
||||
@click.stop="openAdd(steps.length)"
|
||||
>
|
||||
<UiIcon name="plus" :size="16" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="addAt !== null" class="picker" @click.stop>
|
||||
<p>گره بعدی را انتخاب کنید</p>
|
||||
<div class="picks">
|
||||
<button type="button" class="condition" @click="pickCondition">
|
||||
<UiIcon name="filter" :size="16" />
|
||||
شرط
|
||||
</button>
|
||||
<button
|
||||
v-for="action in AUTOMATION_ACTIONS"
|
||||
:key="action"
|
||||
type="button"
|
||||
:class="action"
|
||||
@click="pickAction(action)"
|
||||
>
|
||||
<UiIcon :name="actionIcon(action)" :size="16" />
|
||||
{{ AUTOMATION_ACTION_LABELS[action] }}
|
||||
</button>
|
||||
</div>
|
||||
<button class="cancel" type="button" @click="addAt = null">انصراف</button>
|
||||
</div>
|
||||
|
||||
<p v-if="!canAdd" class="cap">
|
||||
حداکثر {{ toFaDigits(MAX_AUTOMATION_STEPS) }} گره در یک قانون
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.canvas {
|
||||
position: relative;
|
||||
min-height: 22rem;
|
||||
border-radius: 16px;
|
||||
overflow: auto;
|
||||
background-color: #f3f6f5;
|
||||
background-image: radial-gradient(#c9d4cf 1.1px, transparent 1.2px);
|
||||
background-size: 16px 16px;
|
||||
padding: 1.6rem 1.1rem 1.25rem;
|
||||
}
|
||||
|
||||
.flow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
min-width: max-content;
|
||||
min-height: 16rem;
|
||||
}
|
||||
|
||||
.node-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.node {
|
||||
width: 13.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
text-align: start;
|
||||
padding: 0.72rem 0.8rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #d5ddd8;
|
||||
background: #fff;
|
||||
box-shadow: 0 10px 24px rgba(23, 33, 28, 0.06);
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.node.trigger {
|
||||
width: 14.2rem;
|
||||
min-height: 4.35rem;
|
||||
border-radius: 999px;
|
||||
padding-inline: 1rem;
|
||||
background: #fff7ed;
|
||||
border-color: #fdba74;
|
||||
}
|
||||
|
||||
.node.action:not(.condition) {
|
||||
border-radius: 10px;
|
||||
border-inline-start-width: 5px;
|
||||
}
|
||||
|
||||
.node.create_activity {
|
||||
border-inline-start-color: #14b8a6;
|
||||
}
|
||||
|
||||
.node.create_notification {
|
||||
border-inline-start-color: #2563eb;
|
||||
}
|
||||
|
||||
.node.add_loyalty_points {
|
||||
border-inline-start-color: #7c3aed;
|
||||
}
|
||||
|
||||
.node.condition {
|
||||
width: 15.1rem;
|
||||
min-height: 4.6rem;
|
||||
padding-inline: 1.15rem;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: #fffbeb;
|
||||
box-shadow: none;
|
||||
clip-path: polygon(12% 0%, 88% 0%, 100% 50%, 88% 100%, 12% 100%, 0% 50%);
|
||||
filter: drop-shadow(0 8px 14px rgba(180, 83, 9, 0.14));
|
||||
}
|
||||
|
||||
.node.on {
|
||||
border-color: #14b8a6;
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(20, 184, 166, 0.18),
|
||||
0 12px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.node.trigger.on {
|
||||
border-color: #ea580c;
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(234, 88, 12, 0.2),
|
||||
0 12px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.node.condition.on {
|
||||
box-shadow: none;
|
||||
filter:
|
||||
drop-shadow(0 0 0 3px rgba(217, 119, 6, 0.35))
|
||||
drop-shadow(0 8px 14px rgba(180, 83, 9, 0.14));
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 2.35rem;
|
||||
height: 2.35rem;
|
||||
border-radius: 12px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
color: #0f766e;
|
||||
background: #ecfdf8;
|
||||
}
|
||||
|
||||
.node.trigger .icon {
|
||||
border-radius: 999px;
|
||||
color: #c2410c;
|
||||
background: #ffedd5;
|
||||
}
|
||||
|
||||
.node.create_notification .icon {
|
||||
color: #1d4ed8;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.node.add_loyalty_points .icon {
|
||||
color: #7c3aed;
|
||||
background: #f5f3ff;
|
||||
}
|
||||
|
||||
.node.condition .icon {
|
||||
border-radius: 8px;
|
||||
color: #b45309;
|
||||
background: #ffedd5;
|
||||
}
|
||||
|
||||
.copy {
|
||||
display: grid;
|
||||
gap: 0.08rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.kind {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 0.88rem;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
font-size: 0.72rem;
|
||||
color: #64748b;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.trash {
|
||||
position: absolute;
|
||||
top: -0.45rem;
|
||||
inset-inline-end: -0.45rem;
|
||||
width: 1.55rem;
|
||||
height: 1.55rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #fecaca;
|
||||
background: #fff;
|
||||
color: #b91c1c;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.node-wrap:hover .trash,
|
||||
.node-wrap:focus-within .trash,
|
||||
.node.on ~ .trash {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.wire {
|
||||
position: relative;
|
||||
width: 3.4rem;
|
||||
height: 2px;
|
||||
background: #cbd5e1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wire::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset-inline-end: -1px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-block: 5px solid transparent;
|
||||
border-inline-start: 7px solid #cbd5e1;
|
||||
border-inline-end: 0;
|
||||
}
|
||||
|
||||
.plus {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1.45rem;
|
||||
height: 1.45rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #99f6e4;
|
||||
background: #fff;
|
||||
color: #0f766e;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.plus.big {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.wire.open .plus,
|
||||
.plus:hover {
|
||||
background: #14b8a6;
|
||||
color: #fff;
|
||||
border-color: #14b8a6;
|
||||
}
|
||||
|
||||
.wire.end {
|
||||
width: 3.8rem;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
#cbd5e1 0 6px,
|
||||
transparent 6px 10px
|
||||
);
|
||||
}
|
||||
|
||||
.wire.end::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.picker {
|
||||
margin-top: 1rem;
|
||||
background: #fff;
|
||||
border: 1px solid #d5ddd8;
|
||||
border-radius: 14px;
|
||||
padding: 0.85rem;
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
max-width: 40rem;
|
||||
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.picker p {
|
||||
margin: 0;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.picks {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.picks button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
border-radius: 999px;
|
||||
padding: 0.45rem 0.75rem;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.picks .create_activity {
|
||||
color: #0f766e;
|
||||
}
|
||||
.picks .create_notification {
|
||||
color: #1d4ed8;
|
||||
}
|
||||
.picks .add_loyalty_points {
|
||||
color: #7c3aed;
|
||||
}
|
||||
.picks .condition {
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
justify-self: start;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.cap {
|
||||
margin: 0.85rem 0 0;
|
||||
color: #94a3b8;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.node {
|
||||
width: 12.4rem;
|
||||
}
|
||||
|
||||
.node.trigger {
|
||||
width: 13rem;
|
||||
}
|
||||
|
||||
.node.condition {
|
||||
width: 14rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,338 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, watch } from 'vue';
|
||||
import type {
|
||||
ActivityType,
|
||||
AutomationAction,
|
||||
AutomationConditionField,
|
||||
AutomationConditionOp,
|
||||
AutomationStep,
|
||||
AutomationTrigger,
|
||||
OrgUserDto,
|
||||
TicketPriority,
|
||||
} from '@mento/shared';
|
||||
import {
|
||||
AUTOMATION_ACTION_LABELS,
|
||||
AUTOMATION_ACTIONS,
|
||||
AUTOMATION_CONDITION_FIELD_LABELS,
|
||||
AUTOMATION_CONDITION_OP_LABELS,
|
||||
AUTOMATION_NOTIFY_CHANNEL_LABELS,
|
||||
AUTOMATION_NOTIFY_CHANNELS,
|
||||
AUTOMATION_TRIGGER_LABELS,
|
||||
AUTOMATION_TRIGGERS,
|
||||
conditionFieldsForTrigger,
|
||||
isAutomationCondition,
|
||||
} from '@mento/shared';
|
||||
|
||||
const props = defineProps<{
|
||||
selected: 'trigger' | string;
|
||||
users: OrgUserDto[];
|
||||
}>();
|
||||
|
||||
const trigger = defineModel<AutomationTrigger>('trigger', { required: true });
|
||||
const steps = defineModel<AutomationStep[]>('steps', { required: true });
|
||||
|
||||
const selectedStep = computed(() => {
|
||||
if (props.selected === 'trigger') return null;
|
||||
return steps.value.find((s) => s.id === props.selected) ?? null;
|
||||
});
|
||||
|
||||
const isCondition = computed(
|
||||
() => !!selectedStep.value && isAutomationCondition(selectedStep.value),
|
||||
);
|
||||
|
||||
const conditionFields = computed(() => conditionFieldsForTrigger(trigger.value));
|
||||
|
||||
const conditionOps = computed((): AutomationConditionOp[] => {
|
||||
const field = selectedStep.value?.conditionField;
|
||||
if (field === 'deal_amount') return ['gte', 'lte', 'eq', 'neq'];
|
||||
if (field === 'ticket_priority') return ['eq', 'neq'];
|
||||
return ['is_set', 'is_empty'];
|
||||
});
|
||||
|
||||
const activityTypes: Array<{ value: ActivityType; label: string }> = [
|
||||
{ value: 'task', label: 'وظیفه' },
|
||||
{ value: 'call', label: 'تماس' },
|
||||
{ value: 'meeting', label: 'جلسه' },
|
||||
{ value: 'note', label: 'یادداشت' },
|
||||
];
|
||||
|
||||
const ticketPriorities: Array<{ value: TicketPriority; label: string }> = [
|
||||
{ value: 'low', label: 'کم' },
|
||||
{ value: 'normal', label: 'عادی' },
|
||||
{ value: 'high', label: 'بالا' },
|
||||
{ value: 'urgent', label: 'فوری' },
|
||||
];
|
||||
|
||||
function setAction(step: AutomationStep, action: AutomationAction) {
|
||||
step.kind = 'action';
|
||||
step.action = action;
|
||||
if (action === 'add_loyalty_points' && !step.points) step.points = 100;
|
||||
if (action === 'create_activity' && !step.activityType) step.activityType = 'task';
|
||||
if (action === 'create_notification' && !step.notifyChannel) step.notifyChannel = 'app';
|
||||
}
|
||||
|
||||
function setConditionField(step: AutomationStep, field: AutomationConditionField) {
|
||||
step.conditionField = field;
|
||||
if (field === 'deal_amount') {
|
||||
step.conditionOp = 'gte';
|
||||
step.conditionValue = typeof step.conditionValue === 'number' ? step.conditionValue : 0;
|
||||
} else if (field === 'ticket_priority') {
|
||||
step.conditionOp = 'eq';
|
||||
step.conditionValue = 'normal';
|
||||
} else {
|
||||
step.conditionOp = 'is_set';
|
||||
step.conditionValue = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
selectedStep,
|
||||
(step) => {
|
||||
if (!step || isAutomationCondition(step) || step.action !== 'create_notification') return;
|
||||
if (!step.notifyChannel) step.notifyChannel = 'app';
|
||||
if (!step.notifyTarget) step.notifyTarget = 'staff';
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="inspector">
|
||||
<template v-if="selected === 'trigger'">
|
||||
<h2>گره محرک</h2>
|
||||
<p class="hint">وقتی این اتفاق بیفتد، زنجیره از راست به چپ اجرا میشود.</p>
|
||||
<label>
|
||||
اگر
|
||||
<select v-model="trigger">
|
||||
<option v-for="t in AUTOMATION_TRIGGERS" :key="t" :value="t">
|
||||
{{ AUTOMATION_TRIGGER_LABELS[t] }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<template v-else-if="selectedStep && isCondition">
|
||||
<h2>گره شرط</h2>
|
||||
<p class="hint">
|
||||
اگر شرط برقرار نباشد، عملهای بعد از این گره اجرا نمیشوند.
|
||||
</p>
|
||||
<label>
|
||||
فیلد
|
||||
<select
|
||||
:value="selectedStep.conditionField"
|
||||
@change="
|
||||
setConditionField(
|
||||
selectedStep,
|
||||
($event.target as HTMLSelectElement).value as AutomationConditionField,
|
||||
)
|
||||
"
|
||||
>
|
||||
<option v-for="f in conditionFields" :key="f" :value="f">
|
||||
{{ AUTOMATION_CONDITION_FIELD_LABELS[f] }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
مقایسه
|
||||
<select v-model="selectedStep.conditionOp">
|
||||
<option v-for="op in conditionOps" :key="op" :value="op">
|
||||
{{ AUTOMATION_CONDITION_OP_LABELS[op] }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label v-if="selectedStep.conditionField === 'deal_amount'">
|
||||
مبلغ
|
||||
<input v-model.number="selectedStep.conditionValue" type="number" min="0" />
|
||||
</label>
|
||||
<label v-if="selectedStep.conditionField === 'ticket_priority'">
|
||||
اولویت
|
||||
<select v-model="selectedStep.conditionValue">
|
||||
<option v-for="p in ticketPriorities" :key="p.value" :value="p.value">
|
||||
{{ p.label }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<template v-else-if="selectedStep">
|
||||
<h2>گره عمل</h2>
|
||||
<p class="hint">بعد از محرک (و شرطها)، این کار به ترتیب انجام میشود.</p>
|
||||
<label>
|
||||
آنگاه
|
||||
<select
|
||||
:value="selectedStep.action"
|
||||
@change="
|
||||
setAction(
|
||||
selectedStep,
|
||||
($event.target as HTMLSelectElement).value as AutomationAction,
|
||||
)
|
||||
"
|
||||
>
|
||||
<option v-for="a in AUTOMATION_ACTIONS" :key="a" :value="a">
|
||||
{{ AUTOMATION_ACTION_LABELS[a] }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
عنوان
|
||||
<input
|
||||
v-model="selectedStep.title"
|
||||
type="text"
|
||||
maxlength="200"
|
||||
placeholder="اختیاری"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
توضیح / متن پیام
|
||||
<textarea
|
||||
v-model="selectedStep.body"
|
||||
rows="3"
|
||||
maxlength="1000"
|
||||
placeholder="اختیاری"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label v-if="selectedStep.action === 'create_activity'">
|
||||
نوع فعالیت
|
||||
<select v-model="selectedStep.activityType">
|
||||
<option v-for="t in activityTypes" :key="t.value" :value="t.value">
|
||||
{{ t.label }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label v-if="selectedStep.action === 'create_activity'">
|
||||
مسئول فعالیت
|
||||
<select v-model="selectedStep.assigneeId">
|
||||
<option :value="null">مسئول معامله / تیکت</option>
|
||||
<option v-for="u in users" :key="u.id" :value="u.id">
|
||||
{{ u.fullName }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<template v-if="selectedStep.action === 'create_notification'">
|
||||
<p class="field-label">نحوه ارسال</p>
|
||||
<div class="channels">
|
||||
<label
|
||||
v-for="ch in AUTOMATION_NOTIFY_CHANNELS"
|
||||
:key="ch"
|
||||
class="ch"
|
||||
>
|
||||
<input
|
||||
v-model="selectedStep.notifyChannel"
|
||||
type="radio"
|
||||
:value="ch"
|
||||
/>
|
||||
{{ AUTOMATION_NOTIFY_CHANNEL_LABELS[ch] }}
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
گیرنده
|
||||
<select v-model="selectedStep.notifyTarget">
|
||||
<option value="staff">کاربر تیم</option>
|
||||
<option value="person">مخاطب معامله / تیکت</option>
|
||||
</select>
|
||||
</label>
|
||||
<label v-if="selectedStep.notifyTarget !== 'person'">
|
||||
کاربر
|
||||
<select v-model="selectedStep.notifyUserId">
|
||||
<option :value="null">مسئول معامله / تیکت</option>
|
||||
<option v-for="u in users" :key="u.id" :value="u.id">
|
||||
{{ u.fullName }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<p v-if="selectedStep.notifyTarget === 'person'" class="hint">
|
||||
پیامک به موبایل مخاطب ارسال میشود. ناتیفیکیشن داخلی برای مخاطب نیست.
|
||||
</p>
|
||||
<p
|
||||
v-else-if="selectedStep.notifyChannel === 'sms' || selectedStep.notifyChannel === 'both'"
|
||||
class="hint"
|
||||
>
|
||||
پیامک به موبایل همان کاربر ارسال میشود.
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<label v-if="selectedStep.action === 'add_loyalty_points'">
|
||||
امتیاز
|
||||
<input v-model.number="selectedStep.points" type="number" min="1" />
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<p v-else class="hint">یک گره را از بوم انتخاب کنید.</p>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.inspector {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
label,
|
||||
.field-label {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.84rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 0.55rem 0.7rem;
|
||||
font: inherit;
|
||||
color: #0f172a;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.channels {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.55rem 0.85rem;
|
||||
}
|
||||
|
||||
.ch {
|
||||
display: inline-flex !important;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.32rem;
|
||||
color: #334155;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ch input {
|
||||
accent-color: #14b8a6;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -18,7 +18,7 @@ const emit = defineEmits<{
|
||||
class="add-deal"
|
||||
:style="{
|
||||
'--add-color': PIPELINE_ACCENT[accent].text,
|
||||
'--add-border': PIPELINE_ACCENT[accent].border,
|
||||
'--add-border': PIPELINE_ACCENT[accent].solid,
|
||||
'--add-soft': PIPELINE_ACCENT[accent].soft,
|
||||
}"
|
||||
aria-label="افزودن معامله"
|
||||
@@ -34,16 +34,17 @@ const emit = defineEmits<{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
gap: 0.4rem;
|
||||
width: 100%;
|
||||
margin-top: 0.35rem;
|
||||
padding: 0.85rem 1rem;
|
||||
margin-top: 0.15rem;
|
||||
padding: 0.9rem 1rem;
|
||||
border: 1.5px dashed var(--add-border);
|
||||
border-radius: 16px;
|
||||
background: color-mix(in srgb, var(--add-soft) 55%, white);
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -43,7 +43,7 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
<span class="badge" aria-hidden="true">{{ deal.initials }}</span>
|
||||
<div class="titles">
|
||||
<h3 @click.stop="emit('open', deal.id)">{{ deal.title }}</h3>
|
||||
<p class="desc">{{ deal.description }}</p>
|
||||
<p v-if="deal.description" class="desc">{{ deal.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@@ -56,23 +56,24 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="amount" dir="ltr">
|
||||
<strong>{{ money.number }}</strong>
|
||||
<span>{{ money.unit }}</span>
|
||||
</div>
|
||||
|
||||
<div class="foot">
|
||||
<img
|
||||
class="avatar"
|
||||
src="/brand/user-avatar.png"
|
||||
alt=""
|
||||
width="28"
|
||||
height="28"
|
||||
/>
|
||||
<span class="date">
|
||||
<UiIcon name="calendar" :size="14" />
|
||||
{{ deal.date }}
|
||||
</span>
|
||||
<div 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>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
@@ -83,6 +84,8 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
|
||||
border-radius: 16px;
|
||||
padding: 1rem;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
|
||||
cursor: grab;
|
||||
transition:
|
||||
@@ -146,6 +149,7 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
|
||||
.titles {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.titles h3 {
|
||||
@@ -155,6 +159,11 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
line-height: 1.45;
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.desc {
|
||||
@@ -162,6 +171,9 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.menu {
|
||||
@@ -180,12 +192,52 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.amount {
|
||||
.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;
|
||||
}
|
||||
|
||||
.date {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
min-width: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.amount {
|
||||
text-align: left;
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
gap: 0.05rem;
|
||||
gap: 0.02rem;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.amount strong {
|
||||
@@ -193,6 +245,8 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.01em;
|
||||
max-width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.amount span {
|
||||
@@ -200,28 +254,4 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.foot {
|
||||
margin-top: 0.85rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.date {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -45,20 +45,31 @@ const emit = defineEmits<{
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
align-items: stretch;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 0.1rem 0.05rem 0.5rem;
|
||||
touch-action: pan-x pan-y;
|
||||
overscroll-behavior-x: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.board {
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.75rem;
|
||||
scroll-snap-type: x mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.board::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.board::-webkit-scrollbar {
|
||||
display: none;
|
||||
.board::-webkit-scrollbar-thumb {
|
||||
background: color-mix(in srgb, var(--muted) 38%, transparent);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
@container pipeline (max-width: 720px) {
|
||||
.board {
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-padding-inline: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -95,10 +95,10 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
flex: 1 1 0;
|
||||
flex: 1 1 17.5rem;
|
||||
min-width: 17.5rem;
|
||||
min-height: 420px;
|
||||
padding: 0.35rem 0.15rem 0.5rem;
|
||||
padding: 0.15rem 0.1rem 0.35rem;
|
||||
border-radius: 18px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
@@ -138,12 +138,16 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
font-size: 0.98rem;
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.head-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.count {
|
||||
@@ -154,13 +158,13 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
}
|
||||
|
||||
.plus {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
border-radius: 999px;
|
||||
border: 0;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 8px;
|
||||
border: 1.5px solid var(--accent);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: color-mix(in srgb, var(--accent) 14%, white);
|
||||
background: #fff;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -176,6 +180,7 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
@@ -190,20 +195,14 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@container pipeline (max-width: 720px) {
|
||||
.column {
|
||||
flex: 0 0 auto;
|
||||
width: min(320px, 86vw);
|
||||
min-width: min(320px, 86vw);
|
||||
flex: 0 0 min(20rem, 86cqi);
|
||||
width: min(20rem, 86cqi);
|
||||
min-width: min(20rem, 86cqi);
|
||||
max-width: none;
|
||||
min-height: 360px;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.column {
|
||||
width: 88vw;
|
||||
min-width: 88vw;
|
||||
min-height: 360px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,351 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
|
||||
import {
|
||||
formatCurrencyParts,
|
||||
PIPELINE_ACCENT,
|
||||
} from '@/lib/pipeline-board';
|
||||
|
||||
const props = defineProps<{
|
||||
stages: PipelineStage[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
openDeal: [dealId: string];
|
||||
menuDeal: [dealId: string];
|
||||
}>();
|
||||
|
||||
const rows = computed(() =>
|
||||
props.stages.flatMap((stage) =>
|
||||
stage.deals.map((deal) => ({
|
||||
deal,
|
||||
stageTitle: stage.title,
|
||||
accent: stage.color,
|
||||
})),
|
||||
),
|
||||
);
|
||||
|
||||
function money(deal: PipelineDeal) {
|
||||
return formatCurrencyParts(deal.amount, deal.currencyUnit ?? 'تومان');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="list" dir="rtl">
|
||||
<p v-if="!rows.length" class="empty">معاملهای نیست</p>
|
||||
|
||||
<div v-else class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>معامله</th>
|
||||
<th>مرحله</th>
|
||||
<th>مبلغ</th>
|
||||
<th>تاریخ</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in rows" :key="row.deal.id">
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
class="identity"
|
||||
@click="emit('openDeal', row.deal.id)"
|
||||
>
|
||||
<span
|
||||
class="badge"
|
||||
:style="{
|
||||
background: PIPELINE_ACCENT[row.accent].soft,
|
||||
color: PIPELINE_ACCENT[row.accent].text,
|
||||
}"
|
||||
>{{ row.deal.initials }}</span>
|
||||
<span class="titles">
|
||||
<strong>{{ row.deal.title }}</strong>
|
||||
<em v-if="row.deal.description">{{ row.deal.description }}</em>
|
||||
</span>
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
class="stage"
|
||||
:style="{
|
||||
background: PIPELINE_ACCENT[row.accent].soft,
|
||||
color: PIPELINE_ACCENT[row.accent].text,
|
||||
}"
|
||||
>
|
||||
<i :style="{ background: PIPELINE_ACCENT[row.accent].solid }" />
|
||||
{{ row.stageTitle }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="amount" dir="ltr">
|
||||
<strong>{{ money(row.deal).number }}</strong>
|
||||
<small>{{ money(row.deal).unit }}</small>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="date">
|
||||
<UiIcon name="calendar" :size="14" />
|
||||
{{ row.deal.date }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="menu-cell">
|
||||
<button
|
||||
type="button"
|
||||
class="menu"
|
||||
aria-label="گزینههای معامله"
|
||||
@click="emit('menuDeal', row.deal.id)"
|
||||
>
|
||||
<UiIcon name="dots-v" :size="18" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div v-if="rows.length" class="cards">
|
||||
<article
|
||||
v-for="row in rows"
|
||||
:key="row.deal.id"
|
||||
class="card"
|
||||
@dblclick="emit('openDeal', row.deal.id)"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="identity"
|
||||
@click="emit('openDeal', row.deal.id)"
|
||||
>
|
||||
<span
|
||||
class="badge"
|
||||
:style="{
|
||||
background: PIPELINE_ACCENT[row.accent].soft,
|
||||
color: PIPELINE_ACCENT[row.accent].text,
|
||||
}"
|
||||
>{{ row.deal.initials }}</span>
|
||||
<span class="titles">
|
||||
<strong>{{ row.deal.title }}</strong>
|
||||
<em v-if="row.deal.description">{{ row.deal.description }}</em>
|
||||
</span>
|
||||
</button>
|
||||
<span
|
||||
class="stage"
|
||||
:style="{
|
||||
background: PIPELINE_ACCENT[row.accent].soft,
|
||||
color: PIPELINE_ACCENT[row.accent].text,
|
||||
}"
|
||||
>
|
||||
<i :style="{ background: PIPELINE_ACCENT[row.accent].solid }" />
|
||||
{{ row.stageTitle }}
|
||||
</span>
|
||||
<div class="card-foot">
|
||||
<span class="date">
|
||||
<UiIcon name="calendar" :size="14" />
|
||||
{{ row.deal.date }}
|
||||
</span>
|
||||
<span class="amount" dir="ltr">
|
||||
<strong>{{ money(row.deal).number }}</strong>
|
||||
<small>{{ money(row.deal).unit }}</small>
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.list {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin: 2rem 0;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
background: #fff;
|
||||
border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 640px;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 0.85rem 1rem;
|
||||
text-align: start;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
font-size: 0.78rem;
|
||||
color: #94a3b8;
|
||||
font-weight: 700;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.data-table tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.data-table tbody tr:hover td {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.badge {
|
||||
flex: 0 0 auto;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.titles {
|
||||
display: grid;
|
||||
gap: 0.1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.titles strong {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.titles em {
|
||||
font-style: normal;
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stage {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.28rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stage i {
|
||||
width: 0.45rem;
|
||||
height: 0.45rem;
|
||||
border-radius: 999px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.amount {
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
gap: 0.05rem;
|
||||
}
|
||||
|
||||
.amount strong {
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.amount small {
|
||||
color: var(--muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.date {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.menu-cell {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.menu {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
padding: 0.2rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu:hover,
|
||||
.menu:focus-visible {
|
||||
color: var(--ink);
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: none;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
|
||||
border-radius: 16px;
|
||||
padding: 0.95rem 1rem;
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.card-foot {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@container pipeline (max-width: 720px) {
|
||||
.table-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,20 +3,33 @@ import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
export type PipelineViewMode = 'kanban' | 'list';
|
||||
|
||||
defineProps<{
|
||||
pipelineName: string;
|
||||
pipelineOptions: Array<{ id: string; name: string }>;
|
||||
selectedPipelineId: string;
|
||||
viewMode: PipelineViewMode;
|
||||
search: string;
|
||||
}>();
|
||||
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: [];
|
||||
}>();
|
||||
|
||||
function onPick(value: string) {
|
||||
if (value === '__create__') {
|
||||
emit('create');
|
||||
return;
|
||||
}
|
||||
emit('update:selectedPipelineId', value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -25,7 +38,7 @@ const emit = defineEmits<{
|
||||
<span class="brand-ico" aria-hidden="true">
|
||||
<UiIcon name="briefcase" :size="18" />
|
||||
</span>
|
||||
<h1>کاریز فروش</h1>
|
||||
<h1>{{ pipelineName }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="view-toggle" role="group" aria-label="نوع نمایش">
|
||||
@@ -37,7 +50,7 @@ const emit = defineEmits<{
|
||||
@click="emit('update:viewMode', 'kanban')"
|
||||
>
|
||||
<UiIcon name="grid" :size="16" />
|
||||
نمای کاریز
|
||||
<span class="seg-label">نمای کاریز</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -47,7 +60,7 @@ const emit = defineEmits<{
|
||||
@click="emit('update:viewMode', 'list')"
|
||||
>
|
||||
<UiIcon name="list" :size="16" />
|
||||
نمای لیست
|
||||
<span class="seg-label">نمای لیست</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -55,12 +68,7 @@ const emit = defineEmits<{
|
||||
<span class="sr">انتخاب کاریز</span>
|
||||
<select
|
||||
:value="selectedPipelineId"
|
||||
@change="
|
||||
emit(
|
||||
'update:selectedPipelineId',
|
||||
($event.target as HTMLSelectElement).value,
|
||||
)
|
||||
"
|
||||
@change="onPick(($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option
|
||||
v-for="opt in pipelineOptions"
|
||||
@@ -69,6 +77,7 @@ const emit = defineEmits<{
|
||||
>
|
||||
{{ opt.name }}
|
||||
</option>
|
||||
<option v-if="canCreate" value="__create__">کاریز جدید…</option>
|
||||
</select>
|
||||
<UiIcon class="chev" name="chevron" :size="16" />
|
||||
</label>
|
||||
@@ -94,17 +103,20 @@ const emit = defineEmits<{
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
margin-bottom: 1rem;
|
||||
gap: 0.55rem;
|
||||
margin-bottom: 0.85rem;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
margin-inline-end: 0.25rem;
|
||||
flex: 0 0 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.brand-ico {
|
||||
@@ -115,35 +127,42 @@ const emit = defineEmits<{
|
||||
place-items: center;
|
||||
background: #0f766e;
|
||||
color: #fff;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: inline-flex;
|
||||
background: #eef2f4;
|
||||
background: #e8eef1;
|
||||
border-radius: 12px;
|
||||
padding: 0.2rem;
|
||||
gap: 0.15rem;
|
||||
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: var(--muted);
|
||||
color: #7b8794;
|
||||
font-weight: 700;
|
||||
font-size: 0.82rem;
|
||||
padding: 0.45rem 0.75rem;
|
||||
padding: 0.42rem 0.7rem;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.seg.on {
|
||||
@@ -161,7 +180,8 @@ h1 {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 140px;
|
||||
min-width: 8.5rem;
|
||||
flex: 0 1 13rem;
|
||||
}
|
||||
|
||||
.pipeline-pick select {
|
||||
@@ -169,12 +189,16 @@ h1 {
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 0.55rem 2rem 0.55rem 0.85rem;
|
||||
padding: 0.52rem 2rem 0.52rem 0.85rem;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
min-width: 150px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pipeline-pick .chev {
|
||||
@@ -186,11 +210,11 @@ h1 {
|
||||
}
|
||||
|
||||
.search {
|
||||
flex: 1 1 180px;
|
||||
min-width: 160px;
|
||||
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;
|
||||
@@ -203,6 +227,7 @@ h1 {
|
||||
outline: none;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
}
|
||||
@@ -210,15 +235,17 @@ h1 {
|
||||
.filter-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
padding: 0.55rem 0.95rem;
|
||||
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,
|
||||
@@ -236,25 +263,45 @@ h1 {
|
||||
clip: rect(0 0 0 0);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@container pipeline (max-width: 720px) {
|
||||
.toolbar {
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.view-toggle,
|
||||
.pipeline-pick,
|
||||
.search,
|
||||
.filter-btn {
|
||||
flex: 1 1 auto;
|
||||
.view-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pipeline-pick select,
|
||||
.filter-btn {
|
||||
.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%;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user