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>
|
||||
Reference in New Issue
Block a user