Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Mahdi
|
0998a1ec37 | ||
|
Mahdi
|
4979aa8b75 | ||
 MahdiandCursor
|
34d3689448 | ||
|
MahdiandCursor
|
1e0b638a19 | ||
|
Mahdi
|
3db9c1c0fe | ||
|
MahdiandCursor
|
6c6e32e099 | ||
|
MahdiandCursor
|
41f310f3a2 | ||
|
MahdiandCursor
|
754cc43c98 | ||
|
MahdiandCursor
|
a319085dca | ||
|
MahdiandCursor
|
cb3a488b21 | ||
|
MahdiandCursor
|
b11affbdfd | ||
|
Mahdi
|
7aaa15fad2 | ||
|
Mahdi
|
39c62834e7 | ||
|
Mahdi
|
26792f9a37 |
@@ -41,11 +41,19 @@ Legacy CRM UI (`components/ui/*`, `.crm-*`, `.btn` / `.field` in `styles/`) rema
|
||||
6. **24-column grid only**
|
||||
Page layout on migrated screens uses Ant Grid: `a-row` / `a-col` with the **24-column** system (`:span`, `:xs`, `:sm`, `:md`, `:lg`, `:xl`). Do not invent parallel flex/grid CSS layouts for page chrome.
|
||||
|
||||
7. **RTL + locale**
|
||||
App root is wrapped with `<a-config-provider direction="rtl" :locale="faIR" :theme="antdTheme">`. Do not override direction to LTR on whole pages; use local `direction="ltr"` only for inherently LTR fragments (e.g. phone numbers, codes).
|
||||
7. **RTL + locale + StyleProvider**
|
||||
App root in `App.vue` **must** wrap ConfigProvider with `<a-style-provider hash-priority="high">` so legacy `main.css` cannot override Ant controls via higher specificity:
|
||||
```vue
|
||||
<a-style-provider hash-priority="high">
|
||||
<a-config-provider direction="rtl" :locale="faIR" :theme="antdTheme">
|
||||
<RouterView />
|
||||
</a-config-provider>
|
||||
</a-style-provider>
|
||||
```
|
||||
Do not override direction to LTR on whole pages; use local `direction="ltr"` only for inherently LTR fragments (e.g. phone numbers, codes).
|
||||
|
||||
8. **Auto-import**
|
||||
`<a-*>` components are resolved via `unplugin-vue-components` + `AntDesignVueResolver({ importStyle: false })`. Do not add blanket `app.use(antd)` unless there is a documented exception. Do not per-component CSS imports (`importStyle` stays `false`; CSS-in-JS + theme).
|
||||
`<a-*>` components are resolved via `unplugin-vue-components` + `AntDesignVueResolver({ importStyle: false })`. Do not add blanket `app.use(antd)` unless there is a documented exception. Do not per-component CSS imports (`importStyle` stays `false`; CSS-in-JS + theme). Prefer **explicit** `import { Button as AButton, … } from 'ant-design-vue'` in migrated files when the Vite resolver is missing or unreliable.
|
||||
|
||||
9. **Theme is central**
|
||||
Visual tokens (primary, radius, `controlHeight`, padding/margin scale, shadows, Form/Card overrides) live only in `antdTheme.ts`. Do not fork theme objects inside views.
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"plugins": {
|
||||
"hex": {
|
||||
"enabled": true
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -38,9 +38,13 @@ Also read and obey [`.cursor/rules/antd-strict-governance.mdc`](../../rules/antd
|
||||
| Dependency | `ant-design-vue` ^4, `@ant-design/icons-vue`, `unplugin-vue-components` in `@mento/web` |
|
||||
| Vite plugin | `apps/web/vite.config.ts` — `Components` + `AntDesignVueResolver` |
|
||||
| Theme | `apps/web/src/theme/antdTheme.ts` (`controlHeight: 36`) |
|
||||
| RTL + locale + theme | `apps/web/src/App.vue` — `<a-config-provider direction="rtl" :locale="faIR" :theme="antdTheme">` |
|
||||
| RTL + locale + theme + StyleProvider | `apps/web/src/App.vue` — `<a-style-provider hash-priority="high">` wrapping `<a-config-provider direction="rtl" :locale="faIR" :theme="antdTheme">` (mandatory so legacy `main.css` cannot override Ant) |
|
||||
| Legacy kit (do not touch) | `apps/web/src/components/ui/*`, `styles/main.css` utilities |
|
||||
|
||||
### Mandatory child-control conversion (same pass)
|
||||
|
||||
هنگام بازنویسی یک صفحه (View)، ایجنت موظف است علاوه بر خود فایل View، تمام کامپوننت‌های فرزندی را که در آن View ایمپورت شده‌اند و حاوی اینپوت/سلکت/دکمه هستند نیز بازبینی کرده و درون آن‌ها را به کامپوننت‌های رسمی `ant-design-vue` تبدیل کند. هیچ تگ `<input>`, `<select>`, `<textarea>`, `<button>` خامی نباید در صفحه یا کامپوننت‌های فرزندِ مصرفی آن باقی بماند.
|
||||
|
||||
## Migration workflow
|
||||
|
||||
1. Confirm the **single** route/view the user named.
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
.git
|
||||
node_modules
|
||||
**/dist
|
||||
**/.env
|
||||
**/.env.*
|
||||
apps/stt/.venv
|
||||
uploads
|
||||
docs
|
||||
e2e
|
||||
test-results
|
||||
playwright-report
|
||||
graphify-out
|
||||
.worktrees
|
||||
*.md
|
||||
crm-node_modules.tgz
|
||||
@@ -1,129 +0,0 @@
|
||||
name: Build & Push Docker Image
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- "*"
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Start time
|
||||
run: echo "BUILD_STARTED=$(date +%s)" >> "$GITHUB_ENV"
|
||||
|
||||
- name: Free disk space
|
||||
id: prune
|
||||
run: |
|
||||
df -h / /workspace /var/lib/containerd 2>/dev/null || df -h /
|
||||
docker builder prune -af || true
|
||||
docker image prune -af || true
|
||||
docker system prune -af --volumes || true
|
||||
df -h / /workspace /var/lib/containerd 2>/dev/null || df -h /
|
||||
|
||||
- name: Checkout code
|
||||
id: checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Resolve image tag
|
||||
id: meta
|
||||
run: |
|
||||
if [ "${GITHUB_REF_TYPE}" = "tag" ]; then
|
||||
TAG="${GITHUB_REF_NAME}"
|
||||
else
|
||||
TAG="$(git rev-parse --short HEAD)"
|
||||
fi
|
||||
echo "tag=${TAG}" >> "$GITHUB_OUTPUT"
|
||||
echo "registry=dock.monsys.ir" >> "$GITHUB_OUTPUT"
|
||||
|
||||
- name: Build Docker images
|
||||
id: build
|
||||
run: |
|
||||
set -eu
|
||||
tag="${{ steps.meta.outputs.tag }}"
|
||||
reg="${{ steps.meta.outputs.registry }}"
|
||||
docker build -f Dockerfile.api -t "$reg/montact-api:$tag" -t "$reg/montact-api:latest" .
|
||||
docker build -f Dockerfile.web -t "$reg/montact-web:$tag" -t "$reg/montact-web:latest" .
|
||||
docker build -f Dockerfile.stt -t "$reg/montact-stt:$tag" -t "$reg/montact-stt:latest" .
|
||||
|
||||
# Registry login is unsolved. These two steps stay off so a tag run
|
||||
# only proves the three images build. Remove `if: false` on both when
|
||||
# dock.monsys.ir accepts the runner.
|
||||
- name: Login to registry
|
||||
id: login
|
||||
env:
|
||||
REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME }}
|
||||
REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD }}
|
||||
run: |
|
||||
USER_NAME="${REGISTRY_USERNAME:-admin}"
|
||||
printf '%s\n' "$REGISTRY_PASSWORD" | docker login "dock.monsys.ir" -u "$USER_NAME" --password-stdin
|
||||
|
||||
- name: Push Docker images
|
||||
id: push
|
||||
run: |
|
||||
set -eu
|
||||
tag="${{ steps.meta.outputs.tag }}"
|
||||
reg="${{ steps.meta.outputs.registry }}"
|
||||
for name in montact-api montact-web montact-stt; do
|
||||
docker push "$reg/$name:$tag"
|
||||
docker push "$reg/$name:latest"
|
||||
done
|
||||
|
||||
- name: Notify Bale
|
||||
if: always()
|
||||
continue-on-error: true
|
||||
env:
|
||||
BALE_TOKEN: ${{ secrets.BALE_BOT_TOKEN || vars.BALE_BOT_TOKEN }}
|
||||
BALE_CHAT_ID: ${{ vars.BALE_CHAT_ID }}
|
||||
TAG: ${{ steps.meta.outputs.tag }}
|
||||
REG: ${{ steps.meta.outputs.registry }}
|
||||
RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_number }}
|
||||
STEP_OUTCOMES: |
|
||||
Checkout code=${{ steps.checkout.outcome }}
|
||||
Resolve image tag=${{ steps.meta.outcome }}
|
||||
Build Docker images=${{ steps.build.outcome }}
|
||||
Login to registry=${{ steps.login.outcome }}
|
||||
Push Docker images=${{ steps.push.outcome }}
|
||||
run: |
|
||||
if [ -z "$BALE_TOKEN" ] || [ -z "$BALE_CHAT_ID" ]; then
|
||||
echo "BALE_BOT_TOKEN / BALE_CHAT_ID not set in Gitea — skipping notification"
|
||||
exit 0
|
||||
fi
|
||||
|
||||
failed_step=$(printf '%s\n' "$STEP_OUTCOMES" | grep -E '=(failure|cancelled)$' | head -n1 | cut -d= -f1)
|
||||
if [ -n "$failed_step" ]; then
|
||||
title="❌ بیلد ناموفق"
|
||||
elif printf '%s\n' "$STEP_OUTCOMES" | grep -q '^Push Docker images=success$'; then
|
||||
title="✅ بیلد موفق"
|
||||
elif printf '%s\n' "$STEP_OUTCOMES" | grep -q '^Build Docker images=success$'; then
|
||||
title="✅ بیلد موفق؛ پوش رجیستری هنوز خاموش است"
|
||||
else
|
||||
title="⚠️ بیلد کامل نشد"
|
||||
fi
|
||||
|
||||
commit=$(git log -1 --pretty='%h — %s' 2>/dev/null || echo "${GITHUB_SHA:0:7}")
|
||||
elapsed=$(( $(date +%s) - ${BUILD_STARTED:-$(date +%s)} ))
|
||||
|
||||
text="${title}
|
||||
پروژه: ${GITHUB_REPOSITORY}
|
||||
تگ: ${TAG:-${GITHUB_REF_NAME}}"
|
||||
if [ -z "$failed_step" ] && [ -n "$TAG" ]; then
|
||||
text="${text}
|
||||
image: ${REG}/montact-api:${TAG}
|
||||
image: ${REG}/montact-web:${TAG}
|
||||
image: ${REG}/montact-stt:${TAG}"
|
||||
fi
|
||||
[ -n "$failed_step" ] && text="${text}
|
||||
مرحلهٔ خطا: ${failed_step}"
|
||||
text="${text}
|
||||
کامیت: ${commit}
|
||||
توسط: ${GITHUB_ACTOR}
|
||||
مدت: $((elapsed / 60))m$((elapsed % 60))s
|
||||
لاگ: ${RUN_URL}"
|
||||
msg_file=$(mktemp)
|
||||
printf '%s\n' "$text" | sed 's/^[[:space:]]*//' > "$msg_file"
|
||||
|
||||
curl -sS -m 20 -X POST "https://tapi.bale.ai/bot${BALE_TOKEN}/sendMessage" \
|
||||
--data-urlencode "chat_id=${BALE_CHAT_ID}" \
|
||||
--data-urlencode "text@${msg_file}"
|
||||
@@ -0,0 +1,37 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 246.7 46.59">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #10897d;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #16c1a8;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: #43f7dd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<g>
|
||||
<path class="cls-1" d="M199.15,23.8v19.86c0,1.48-1.2,2.67-2.67,2.67h-8.09c-1.48,0-2.67-1.2-2.67-2.67V15.92c0-.91.47-1.76,1.23-2.25l12.85-8.23c1.13-.72,2.63-.5,3.49.53l11.02,13.14c.18.21.49.22.68.03l8.04-8.21c1.04-1.06,2.75-1.07,3.8-.02l5.99,5.99c1.05,1.05,1.05,2.74,0,3.78l-16.98,16.98c-1.1,1.1-2.92,1.03-3.93-.15l-11.96-14.01c-.28-.33-.81-.13-.81.3h0Z"/>
|
||||
<circle class="cls-3" cx="237.24" cy="6.48" r="6.48"/>
|
||||
<path class="cls-3" d="M242.84,16.26h0c2.13,0,3.86,1.73,3.86,3.86v22.61c0,2.13-1.73,3.86-3.86,3.86h0c-2.13,0-3.86-1.73-3.86-3.86v-22.61c0-2.13,1.73-3.86,3.86-3.86Z"/>
|
||||
<path class="cls-2" d="M233.49,25.66h0c2.13,0,3.86,1.73,3.86,3.86v13.21c0,2.13-1.73,3.86-3.86,3.86h0c-2.13,0-3.86-1.73-3.86-3.86v-13.21c0-2.13,1.73-3.86,3.86-3.86Z"/>
|
||||
<rect class="cls-1" x="220.08" y="35.24" width="7.72" height="11.35" rx="3.86" ry="3.86"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-1" d="M132.19,17.19v2.66c0,1.27,1.03,2.29,2.29,2.29h2.66c1.27,0,2.29-1.03,2.29-2.29v-2.66c0-1.27-1.03-2.29-2.29-2.29h-2.66c-1.27,0-2.29,1.03-2.29,2.29Z"/>
|
||||
<path class="cls-1" d="M102.53,17.19v2.66c0,1.27,1.03,2.29,2.29,2.29h12.91c1.27,0,2.29-1.03,2.29-2.29v-2.66c0-1.27-1.03-2.29-2.29-2.29h-12.91c-1.27,0-2.29,1.03-2.29,2.29Z"/>
|
||||
<path class="cls-1" d="M13.73,20.2v2.66c0,1.27,1.03,2.29,2.29,2.29h12.91c1.27,0,2.29-1.03,2.29-2.29v-2.66c0-1.27-1.03-2.29-2.29-2.29h-12.91c-1.27,0-2.29,1.03-2.29,2.29Z"/>
|
||||
<g>
|
||||
<path class="cls-1" d="M173.05,30.25c-.52-1.2-1.24-2.25-2.14-3.16-.91-.9-1.96-1.62-3.16-2.14-1.2-.52-2.49-.78-3.88-.78h-3.25c-1.12,0-2.2.19-3.24.58-1.04.39-1.98.92-2.81,1.59-.83.68-1.54,1.49-2.11,2.43-.58.95-.97,1.98-1.16,3.1l-1.16,5.97c-.16.66-.47,1.18-.96,1.56-.48.39-1.05.58-1.71.58h-6.49c-.74,0-1.31-.26-1.74-.78-.43-.52-.56-1.15-.41-1.88l1.35-6.87c.25-1.25-.58-2.47-1.84-2.69l-2.52-.46c-1.22-.22-2.4.57-2.65,1.79l-1.81,8.7c-.12.66-.43,1.19-.93,1.59-.5.4-1.08.61-1.74.61h-10.08c-.74,0-1.31-.26-1.74-.78-.43-.52-.56-1.15-.41-1.88l1.35-6.87c.25-1.25-.58-2.47-1.84-2.69l-2.52-.46c-1.22-.22-2.4.57-2.65,1.79l-1.81,8.7c-.12.66-.43,1.19-.93,1.59-.5.4-1.08.61-1.74.61h-9.5c-.66,0-1.22-.22-1.68-.67-.46-.44-.69-.99-.69-1.65v-3.53c0-1.39-.26-2.69-.78-3.91-.52-1.22-1.24-2.28-2.14-3.19-.91-.91-1.96-1.62-3.16-2.14-1.2-.52-2.49-.78-3.88-.78h-21.78l9.58-11.3c.79-.94.71-2.33-.19-3.17l-1.79-1.65c-.96-.88-2.45-.79-3.29.2l-14.66,17.17c-.79.92-.72,2.3.16,3.14l3.59,3.43h29.14c.54,0,1.02.2,1.45.61.43.4.64.9.64,1.48v4.11c0,.54-.19.99-.58,1.33-.39.35-.79.52-1.22.52h-38.23c-.66,0-1.21-.22-1.65-.67-.44-.44-.67-.99-.67-1.65v-8.54c0-1.27-1.03-2.29-2.29-2.29h-2.6c-1.27,0-2.29,1.03-2.29,2.29v8.6c0,.66-.22,1.2-.67,1.62-.44.43-.99.64-1.65.64H11.53c-1.2,0-2.22-.4-3.07-1.21-.85-.81-1.27-1.83-1.27-3.07v-8.25c0-1.27-1.03-2.29-2.29-2.29h-2.6c-1.27,0-2.29,1.03-2.29,2.29v6.47c0,1.66.32,3.24.96,4.72.64,1.49,1.51,2.79,2.61,3.91,1.1,1.12,2.39,2,3.88,2.63,1.49.64,3.06.96,4.72.96h22.01c1.39,0,2.69-.25,3.91-.75,1.22-.5,2.33-1.33,3.33-2.49,1.93,2.16,4.29,3.24,7.07,3.24h35.8c1.24,0,2.44-.23,3.62-.69,1.18-.46,2.25-1.08,3.22-1.85.93.77,1.98,1.39,3.16,1.85,1.18.46,2.44.69,3.79.69h7.59c1.23,0,2.48-.29,3.74-.87,1.25-.58,2.25-1.37,2.98-2.38.58,1,1.46,1.8,2.64,2.38,1.18.58,2.36.87,3.56.87h9.44c1.23,0,2.48-.29,3.74-.87,1.25-.58,2.25-1.37,2.98-2.38.58,1,1.46,1.8,2.64,2.38,1.18.58,2.37.87,3.56.87h6.03c1.24,0,2.39-.23,3.47-.69,1.08-.46,2.07-1.29,2.95-2.49.89,1.24,1.86,2.08,2.93,2.52,1.06.44,2.15.67,3.27.67h6.6c1.04,0,2.03-.2,2.95-.61.93-.4,1.74-.96,2.43-1.65s1.24-1.51,1.65-2.43c.4-.93.61-1.91.61-2.95v-4.36c0-1.39-.26-2.68-.78-3.88ZM166.65,39.98h-7.99c-.43,0-.77-.15-1.04-.46-.27-.31-.37-.67-.29-1.1l.93-4.64c.08-.42.27-.77.58-1.04.31-.27.67-.4,1.1-.4h4.98c.5,0,.92.17,1.24.52.33.35.49.75.49,1.22v5.91Z"/>
|
||||
<path class="cls-3" d="M166.7,16.1c-.65.12-1.24.25-1.77.37-.53.12-1.12.26-1.79.4-.67.14-1.34.29-2.02.44-1.3.29-2.73.61-4.28.94-.68.15-1.34-.31-1.45-1l-.24-1.57c-.1-.63.31-1.23.94-1.36l4.01-.88c-.09-.34-.16-.61-.21-.81-.05-.2-.09-.38-.12-.54-.03-.15-.07-.33-.12-.54-.05-.2-.09-.47-.12-.81-.06-.59,0-1.13.21-1.63.2-.5.48-.95.84-1.35.36-.4.78-.73,1.26-.98.48-.25.95-.4,1.42-.47l2.42-.42c.56-.09,1.11-.05,1.65.14.54.19,1.02.46,1.44.81s.78.78,1.07,1.28c.29.5.49,1.01.58,1.54l.23,1.4c.12.62.09,1.21-.09,1.77-.19.56-.47,1.05-.84,1.49-.37.43-.82.81-1.35,1.12-.53.31-1.09.53-1.68.65ZM166.79,11.54s-.02-.1-.05-.21c-.03-.11-.06-.24-.09-.4-.06-.16-.12-.34-.19-.56-.16-.31-.39-.42-.7-.33l-1.44.37c-.37.06-.53.26-.47.6l.51,1.63,1.86-.47c.5-.09.68-.31.56-.65Z"/>
|
||||
<path class="cls-3" d="M105.49,6.57l11.59-2.48c.64-.14,1.28.27,1.43.91l.27,1.15c.15.66-.26,1.31-.93,1.45l-11.66,2.46c-.67.14-1.32-.3-1.44-.97l-.2-1.13c-.11-.64.3-1.25.94-1.39Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
@@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 197.7 151.02">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #10897d;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #16c1a8;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: #43f7dd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<path class="cls-1" d="M43.57,77.15v64.37c0,4.79-3.88,8.67-8.67,8.67H8.67c-4.79,0-8.67-3.88-8.67-8.67V51.62c0-2.96,1.51-5.71,3.99-7.3l41.67-26.69c3.67-2.35,8.52-1.61,11.32,1.73l35.74,42.59c.57.68,1.6.72,2.22.09l26.07-26.6c3.38-3.45,8.92-3.47,12.33-.06l19.42,19.42c3.39,3.39,3.39,8.88,0,12.26l-55.06,55.06c-3.58,3.58-9.45,3.35-12.73-.5l-38.76-45.42c-.9-1.06-2.64-.42-2.64.97Z"/>
|
||||
<circle class="cls-3" cx="167.06" cy="21.02" r="21.02"/>
|
||||
<rect class="cls-3" x="172.68" y="52.7" width="25.02" height="98.32" rx="12.51" ry="12.51"/>
|
||||
<rect class="cls-2" x="142.38" y="83.17" width="25.02" height="67.85" rx="12.51" ry="12.51"/>
|
||||
<rect class="cls-1" x="111.4" y="114.24" width="25.02" height="36.78" rx="12.51" ry="12.51"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -1,29 +0,0 @@
|
||||
# NestJS API + Prisma. Build context is the monorepo root.
|
||||
FROM node:20-bookworm-slim AS build
|
||||
WORKDIR /app
|
||||
COPY package.json package-lock.json ./
|
||||
COPY apps/api/package.json apps/api/package.json
|
||||
COPY apps/web/package.json apps/web/package.json
|
||||
COPY packages/shared/package.json packages/shared/package.json
|
||||
RUN npm ci
|
||||
COPY apps/api apps/api
|
||||
COPY packages/shared packages/shared
|
||||
RUN npm run build -w @mento/shared \
|
||||
&& npm run prisma:generate -w @mento/api \
|
||||
&& npm run build -w @mento/api
|
||||
|
||||
FROM node:20-bookworm-slim
|
||||
WORKDIR /app
|
||||
RUN apt-get update \
|
||||
&& apt-get install -y --no-install-recommends openssl ca-certificates \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
COPY --from=build /app/package.json /app/package-lock.json ./
|
||||
COPY --from=build /app/node_modules ./node_modules
|
||||
COPY --from=build /app/packages/shared ./packages/shared
|
||||
COPY --from=build /app/apps/api/package.json ./apps/api/package.json
|
||||
COPY --from=build /app/apps/api/dist ./apps/api/dist
|
||||
COPY --from=build /app/apps/api/prisma ./apps/api/prisma
|
||||
WORKDIR /app/apps/api
|
||||
ENV NODE_ENV=production
|
||||
EXPOSE 3000
|
||||
CMD ["node", "dist/src/main.js"]
|
||||
@@ -1,15 +0,0 @@
|
||||
# Local Faster-Whisper. Not published on Ingress.
|
||||
FROM python:3.11-slim-bookworm
|
||||
RUN apt-get update \
|
||||
&& apt-get install -y --no-install-recommends ffmpeg \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
WORKDIR /app
|
||||
COPY apps/stt/requirements.txt ./requirements.txt
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
COPY apps/stt/main.py ./main.py
|
||||
ENV STT_MODEL=small \
|
||||
STT_DEVICE=cpu \
|
||||
STT_COMPUTE_TYPE=int8 \
|
||||
HF_HOME=/models
|
||||
EXPOSE 3040
|
||||
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "3040"]
|
||||
@@ -1,16 +0,0 @@
|
||||
# Vue panel. The built app calls /api on the same host; Traefik sends that to the API.
|
||||
FROM node:20-bookworm-slim AS build
|
||||
WORKDIR /app
|
||||
COPY package.json package-lock.json ./
|
||||
COPY apps/api/package.json apps/api/package.json
|
||||
COPY apps/web/package.json apps/web/package.json
|
||||
COPY packages/shared/package.json packages/shared/package.json
|
||||
RUN npm ci
|
||||
COPY apps/web apps/web
|
||||
COPY packages/shared packages/shared
|
||||
RUN npm run build -w @mento/shared && npm run build -w @mento/web
|
||||
|
||||
FROM nginx:1.27-alpine
|
||||
COPY docker/web.nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY --from=build /app/apps/web/dist /usr/share/nginx/html
|
||||
EXPOSE 80
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
description: حاکمیت مطلق معماری رابط کاربری بر پایه Ant Design Vue v4، قفل مهاجرت صفحه به صفحه، ممنوعیت کامل CSS دستی و استاندارد ریاضی چیدمان
|
||||
globs: apps/web/src/**/*.{vue,ts,tsx,css}
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# قرارداد حاکمیتی و غیرقابل‌مذاکرهٔ رابط کاربری (Ant Design Vue v4 Strict Contract)
|
||||
|
||||
تنها منبع مجاز برای ساخت و بازنویسی عناصر رابط کاربری در این پروژه `ant-design-vue` (نسخه ۴) است. هرگونه تخطی از قوانین زیر خطای معماری محسوب می‌شود:
|
||||
|
||||
## ۱. قفل ایزولاسیون و مهاجرت صفحه به صفحه (Single-Page Blast Radius Lock)
|
||||
1. **ممنوعیت ویرایش دسته‌جمعی:** تو فقط و فقط مجاز به ویرایش صفحه (View) یا کامپوننتی هستی که کاربر صراحتاً در همان نوبت نام برده است. دست زدن به سایر صفحات پروژه مطلقاً ممنوع است.
|
||||
2. **حفظ لایهٔ قدیمی برای صفحات مهاجرت‌نکرده:** فایل‌های داخل `apps/web/src/components/ui/Ui*.vue` و استایل‌های سراسری `main.css` / `tokens.css` نباید حذف یا ویرایش شوند تا صفحات قدیمی پروژه بدون خطا به کار خود ادامه دهند.
|
||||
3. **قطع کامل وابستگی در صفحهٔ هدف:** در صفحه‌ای که کاربر دستور بازنویسی آن را می‌دهد، تمام ایمپورت‌های `@/components/ui` و کلاس‌های قدیمی باید از آن فایل حذف شوند و ۱۰۰٪ با کامپوننت‌های رسمی `<a-...>` جایگزین گردند.
|
||||
4. **کامپوننت‌های تخصصی تاریخ شمسی و مبالغ:** در صفحات بازنویسی‌شده، اگر از `JalaliDateInput` یا `MoneyInput` استفاده شده است، منطق آن‌ها را حفظ کن اما مطمئن شو ظاهر ورودی آن‌ها با ارتفاع `40px`، ردیوس `10px` و عرض `style="width: 100%"` کاملاً هم‌تراز با فیلدهای Ant Design نمایش داده می‌شود.
|
||||
|
||||
## ۲. لیست سیاه سینتکس و تگ‌های ممنوعه در صفحات بازنویسی‌شده (Banned Syntax)
|
||||
در هر فایلی که بازنویسی یا ایجاد می‌کنی، وجود موارد زیر خطای بحرانی است و باید فوراً حذف شوند:
|
||||
- **تگ‌های خام HTML برای فرم و جدول:** `<button>`, `<input>`, `<select>`, `<textarea>`, `<label>`, `<form>`, `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<td>`.
|
||||
- **کلاس‌های لگسی پروژه:** `.btn`, `.btn-primary`, `.btn-ghost`, `.btn-danger`, `.btn-save`, `.field`, `.crm-page`, `.crm-page-header`, `.crm-card`, `.crm-table`, `.crm-empty-state`.
|
||||
- **کلاس‌های Tailwind (پروژه فاقد Tailwind است):** استفاده از کلاس‌های ناموجود مانند `w-full`, `flex`, `gap-4`, `p-4`, `mb-4` مطلقاً ممنوع است. برای عرض کامل کنترل‌ها فقط از `style="width: 100%"` یا پراپ `block` استفاده کن.
|
||||
|
||||
## ۳. قوانین ریاضی چیدمان، گرید و ریتم فضایی (Spatial & Layout Mathematics)
|
||||
1. **ممنوعیت تکه‌تکه کردن فرم به کارت‌های متعدد (Anti-Card-Fragmentation):**
|
||||
- خرد کردن یک فرم به چندین باکس یا کارت مجزا زیر هم ممنوع است.
|
||||
- کل فیلدهای یک فرم اصلی باید در **حداکثر ۱ `<a-card :bordered="false">`** تجمیع شوند.
|
||||
- برای تفکیک بخش‌های منطقی در داخل آن کارت واحد، فقط از `<a-divider orientation="right">عنوان بخش</a-divider>` استفاده کن.
|
||||
2. **چیدمان استاندارد دو ستونه (فرم اصلی + پنل خلاصه):**
|
||||
- ردیف اصلی صفحه: `<a-row :gutter="[24, 24]">`
|
||||
- ستون اصلی (فرم/محتوا): `<a-col :xs="24" :lg="17" :xl="18">`
|
||||
- ستون کناری (خلاصه وضعیت): `<a-col :xs="24" :lg="7" :xl="6">` همراه با `<a-affix :offset-top="24">`.
|
||||
- محتوای پنل خلاصه باید الزاماً با `<a-descriptions :column="1" size="small" bordered>` داخل `<a-card title="..." :bordered="false">` پیاده‌سازی شود، نه با `div` و `span` دستی.
|
||||
3. **قانون عرض فیلدها در فرم (Form Grid Allocation):**
|
||||
- تمام فرم‌ها باید `<a-form layout="vertical" :model="...">` باشند و تمام فیلدها بدون استثنا داخل `<a-form-item label="..." name="...">` قرار گیرند.
|
||||
- رها کردن فیلدهای کوتاه در عرض ۱۰۰٪ (`span="24"`) ممنوع است. چیدمان درون فرم باید با `<a-row :gutter="[16, 0]">` به شکل زیر باشد:
|
||||
- **فیلدهای کوتاه** (تاریخ، ساعت، مدت زمان، مبلغ، وضعیت، نوع، کد): `<a-col :xs="24" :sm="12" :md="8">` (۳ ستونه).
|
||||
- **فیلدهای متوسط** (انتخاب مشتری، مسئول انجام، فرصت مرتبط، دسته‌بندی، عنوان): `<a-col :xs="24" :md="12">` (۲ ستونه).
|
||||
- **فیلدهای تمام‌عرض** (توضیحات، یادداشت، چک‌لیست، برچسب‌ها): `<a-col :span="24">`.
|
||||
- **سوییچ‌ها و چک‌باکس‌های هم‌خانواده:** قرارگیری در یک ردیف با `<a-space :size="24" wrap>`.
|
||||
4. **مدیریت Margin و Padding بدون CSS دستی:**
|
||||
- فاصلهٔ عمودی فیلدها فقط توسط `itemMarginBottom` در کانفیگ تم `<a-form-item>` کنترل می‌شود.
|
||||
- فاصلهٔ افقی/عمودی دکمه‌ها و المان‌ها فقط با `<a-space :size="8 | 12 | 16">` یا `<a-flex gap="small | middle | large" align="center" justify="space-between">` کنترل می‌شود.
|
||||
|
||||
## ۴. قفل سینتکس اختصاصی Ant Design Vue v4
|
||||
- **بایندینگ مقدار (`v-model`):** استفاده از `v-model="..."` بدون آرگومان روی کامپوننت‌های Ant Design Vue خطاست:
|
||||
- برای `a-input`, `a-textarea`, `a-input-number`, `a-select`, `a-radio-group`, `a-segmented`, `a-date-picker`, `a-time-picker`: الزاماً `v-model:value="..."`.
|
||||
- برای `a-checkbox`, `a-switch`: الزاماً `v-model:checked="..."`.
|
||||
- برای `a-modal`, `a-drawer`, `a-dropdown`, `a-popover`, `a-tooltip`: الزاماً `v-model:open="..."` (پراپ `:visible` منسوخ و ممنوع است).
|
||||
- **الزام عرض ۱۰۰٪ روی کنترل‌های خاص:** کامپوننت‌های `<a-input-number>`, `<a-date-picker>`, `<a-time-picker>` و `<a-select>` در داخل `<a-form-item>` باید دارای `style="width: 100%"` باشند.
|
||||
- **فیدبک و پیام‌ها:** برای نمایش پیام از `import { message, notification, Modal } from 'ant-design-vue'` استفاده کن.
|
||||
|
||||
## ۵. حاکمیت مطلق توکن‌ها و ممنوعیت CSS دستی (Zero Manual Styling & RTL Lock)
|
||||
1. نوشتن کد رنگ (`#hex`, `rgb`, `rgba`, `hsl`)، سایه (`box-shadow`)، ردیوس (`border-radius`) و فاصله‌های دستی (`margin`, `padding` با `px`/`rem`) در `<style scoped>` ممنوع است.
|
||||
2. تمام تنظیمات ظاهری (ردیوس، شدو، ارتفاع کنترل‌ها، پدینگ و رنگ‌ها) فقط در فایل مرکزی `apps/web/src/theme/antdTheme.ts` تعریف می‌شوند.
|
||||
3. در صورت نیاز ضروری به خواندن توکن در یک کانتینر، فقط از هوک `const { token } = theme.useToken()` در `ant-design-vue` استفاده کن.
|
||||
4. استفاده از `:deep(.ant-...)` برای دست‌کاری ظاهر کامپوننت‌های انت ممنوع است.
|
||||
5. در RTL، استفاده از `left`, `right`, `margin-left`, `margin-right`, `padding-left`, `padding-right` ممنوع است؛ فقط از خواص منطقی (`inset-inline-start`, `inset-inline-end`, `margin-inline`, `padding-inline`) استفاده شود.
|
||||
|
||||
## ۶. گیت خودارزیابی پیش از تحویل کد (Self-Verification Gate)
|
||||
قبل از اتمام کار روی فایلِ درخواستی، این ۵ شرط را بررسی کن:
|
||||
- [ ] آیا فقط فایل درخواستی کاربر ویرایش شده و سایر صفحات دست‌نخورده مانده‌اند؟
|
||||
- [ ] آیا تمام تگ‌های خام فرم، کامپوننت‌های `Ui*`، کلاس‌های `.btn`/`.field`/`.crm-*` و کلاس‌های ناموجود مثل `w-full` از این صفحه حذف شده‌اند؟
|
||||
- [ ] آیا فرم در ۱ کارت واحد با `<a-divider>` و گرید `<a-row :gutter="[16, 0]">` چیده شده و فیلدهای کوتاه از حالت تمام‌عرض خارج شده‌اند؟
|
||||
- [ ] آیا تمام بایندینگ‌ها از `v-model:value`، `v-model:checked` و `v-model:open` به همراه `style="width: 100%"` روی سلکت‌ها و شمارنده‌ها استفاده می‌کنند؟
|
||||
- [ ] آیا `<style scoped>` کاملاً از رنگ‌های Hex، مارجین/پدینگ دستی، ردیوس، شدو و `:deep(.ant-*)` پاک‌سازی شده است؟
|
||||
@@ -1,10 +0,0 @@
|
||||
-- AlterTable
|
||||
ALTER TABLE "VoipConnection" ADD COLUMN "provider" TEXT NOT NULL DEFAULT 'generic';
|
||||
ALTER TABLE "VoipConnection" ADD COLUMN "apiTokenCiphertext" TEXT;
|
||||
ALTER TABLE "VoipConnection" ADD COLUMN "apiTokenIv" TEXT;
|
||||
ALTER TABLE "VoipConnection" ADD COLUMN "apiTokenTag" TEXT;
|
||||
ALTER TABLE "VoipConnection" ADD COLUMN "fromNumber" TEXT;
|
||||
ALTER TABLE "VoipConnection" ADD COLUMN "callerExtension" TEXT;
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "VoipConnection_organizationId_provider_idx" ON "VoipConnection"("organizationId", "provider");
|
||||
@@ -1,8 +0,0 @@
|
||||
-- AlterTable
|
||||
ALTER TABLE "VoipCallLog" ADD COLUMN "lineExtension" TEXT;
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "VoipCallLog_organizationId_lineExtension_idx" ON "VoipCallLog"("organizationId", "lineExtension");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "VoipCallLog_organizationId_status_idx" ON "VoipCallLog"("organizationId", "status");
|
||||
@@ -1,4 +0,0 @@
|
||||
-- AlterTable
|
||||
ALTER TABLE "FinancialPayroll" ADD COLUMN "benefitsReason" TEXT;
|
||||
ALTER TABLE "FinancialPayroll" ADD COLUMN "bonusReason" TEXT;
|
||||
ALTER TABLE "FinancialPayroll" ADD COLUMN "deductionsReason" TEXT;
|
||||
@@ -1,6 +0,0 @@
|
||||
-- CreateEnum
|
||||
CREATE TYPE "ActivityCompletionMode" AS ENUM ('any', 'all');
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "Activity" ADD COLUMN "completionMode" "ActivityCompletionMode" NOT NULL DEFAULT 'any',
|
||||
ADD COLUMN "completedByIds" TEXT[] NOT NULL DEFAULT ARRAY[]::TEXT[];
|
||||
@@ -1,5 +0,0 @@
|
||||
-- CreateEnum
|
||||
CREATE TYPE "ActivityEditPolicy" AS ENUM ('creator', 'assignees');
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "Activity" ADD COLUMN "editPolicy" "ActivityEditPolicy" NOT NULL DEFAULT 'creator';
|
||||
@@ -33,17 +33,6 @@ enum ActivityStatus {
|
||||
canceled
|
||||
}
|
||||
|
||||
enum ActivityCompletionMode {
|
||||
any
|
||||
all
|
||||
}
|
||||
|
||||
/// چه کسانی می‌توانند فعالیت را ویرایش/حذف کنند (علاوه بر owner/admin)
|
||||
enum ActivityEditPolicy {
|
||||
creator
|
||||
assignees
|
||||
}
|
||||
|
||||
enum ActivityPriority {
|
||||
low
|
||||
medium
|
||||
@@ -894,12 +883,6 @@ model Activity {
|
||||
/// زمان ارسال یادآور؛ با تغییر reminderAt پاک می‌شود
|
||||
reminderSentAt DateTime?
|
||||
completedAt DateTime?
|
||||
/// any = با انجام یکی بسته می‌شود؛ all = هر مسئول باید سهم خودش را بزند
|
||||
completionMode ActivityCompletionMode @default(any)
|
||||
/// مسئولانی که سهم خود را در حالت all ثبت کرده‌اند
|
||||
completedByIds String[] @default([])
|
||||
/// creator = فقط ایجادکننده؛ assignees = ایجادکننده + همهٔ مسئولان
|
||||
editPolicy ActivityEditPolicy @default(creator)
|
||||
tags String[] @default([])
|
||||
personId String?
|
||||
person Person? @relation(fields: [personId], references: [id], onDelete: SetNull)
|
||||
@@ -2464,11 +2447,8 @@ model FinancialPayroll {
|
||||
period String
|
||||
baseAmount Decimal @db.Decimal(18, 2)
|
||||
benefits Decimal @default(0) @db.Decimal(18, 2)
|
||||
benefitsReason String?
|
||||
bonus Decimal @default(0) @db.Decimal(18, 2)
|
||||
bonusReason String?
|
||||
deductions Decimal @default(0) @db.Decimal(18, 2)
|
||||
deductionsReason String?
|
||||
payable Decimal @db.Decimal(18, 2)
|
||||
dueDate DateTime
|
||||
notes String?
|
||||
@@ -2973,28 +2953,18 @@ model MontifyWebhookDelivery {
|
||||
@@index([connectionId, createdAt])
|
||||
}
|
||||
|
||||
/// اتصال تلفن سازمانی / سانترال (وب‌هوک عمومی یا ارائه‌دهنده)
|
||||
/// اتصال تلفن سازمانی / سانترال (وب‌هوک عمومی)
|
||||
model VoipConnection {
|
||||
id String @id @default(cuid())
|
||||
organizationId String
|
||||
organization Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade)
|
||||
label String
|
||||
/// generic | daftareshoma
|
||||
provider String @default("generic")
|
||||
enabled Boolean @default(true)
|
||||
webhookSecretCiphertext String?
|
||||
webhookSecretIv String?
|
||||
webhookSecretTag String?
|
||||
/// قالب URL شروع تماس؛ جای {number} شماره می‌نشیند (generic)
|
||||
/// قالب URL شروع تماس؛ جای {number} شماره می‌نشیند
|
||||
clickToCallUrl String?
|
||||
/// توکن Bearer API دفتر شما (رمزنگاری‌شده)
|
||||
apiTokenCiphertext String?
|
||||
apiTokenIv String?
|
||||
apiTokenTag String?
|
||||
/// شماره مبدأ در تماس خروجی دفتر شما (from_number)
|
||||
fromNumber String?
|
||||
/// خط/داخلی سازمان در دفتر شما (caller_extension)
|
||||
callerExtension String?
|
||||
lastEventAt DateTime?
|
||||
lastError String?
|
||||
calls VoipCallLog[]
|
||||
@@ -3002,7 +2972,6 @@ model VoipConnection {
|
||||
updatedAt DateTime @updatedAt
|
||||
|
||||
@@index([organizationId, enabled])
|
||||
@@index([organizationId, provider])
|
||||
}
|
||||
|
||||
model VoipCallLog {
|
||||
@@ -3017,8 +2986,6 @@ model VoipCallLog {
|
||||
status String @default("completed")
|
||||
fromNumber String?
|
||||
toNumber String?
|
||||
/// خط/داخلی سازمان که تماس روی آن بوده (مثلاً CalleeExtension دفتر شما)
|
||||
lineExtension String?
|
||||
personId String?
|
||||
activityId String?
|
||||
durationSec Int?
|
||||
@@ -3043,8 +3010,6 @@ model VoipCallLog {
|
||||
|
||||
@@unique([connectionId, externalCallId])
|
||||
@@index([organizationId, syncedAt])
|
||||
@@index([organizationId, lineExtension])
|
||||
@@index([organizationId, status])
|
||||
@@index([personId])
|
||||
@@index([activityId])
|
||||
@@index([summaryStatus, summaryNextAttemptAt])
|
||||
|
||||
@@ -438,16 +438,8 @@ export class ActivitiesController {
|
||||
}
|
||||
|
||||
@Patch(':id/complete')
|
||||
complete(
|
||||
@CurrentUser() user: Actor,
|
||||
@Param('id') id: string,
|
||||
@Query('force') force?: string,
|
||||
@Query('undo') undo?: string,
|
||||
) {
|
||||
return this.activitiesService.complete(user.organizationId, id, user, {
|
||||
force: force === '1' || force === 'true',
|
||||
undo: undo === '1' || undo === 'true',
|
||||
});
|
||||
complete(@CurrentUser() user: Actor, @Param('id') id: string) {
|
||||
return this.activitiesService.complete(user.organizationId, id, user);
|
||||
}
|
||||
|
||||
@Delete(':id')
|
||||
|
||||
@@ -52,43 +52,6 @@ type ActivityActor = Pick<
|
||||
'userId' | 'role' | 'priorLens' | 'priorCutoff' | 'leadsAccess' | 'teamPeerIds'
|
||||
>;
|
||||
|
||||
function assigneeIdList(row: {
|
||||
assigneeId?: string | null;
|
||||
assignees?: Array<{ id: string }>;
|
||||
}): string[] {
|
||||
const ids = row.assignees?.map((item) => item.id) ?? [];
|
||||
if (ids.length) return [...new Set(ids)];
|
||||
return row.assigneeId ? [row.assigneeId] : [];
|
||||
}
|
||||
|
||||
function canForceClose(
|
||||
actor: { userId: string; role: string },
|
||||
createdById: string | null | undefined,
|
||||
): boolean {
|
||||
return actor.role === 'owner' || actor.role === 'admin' || actor.userId === createdById;
|
||||
}
|
||||
|
||||
function canMutateActivity(
|
||||
actor: { userId: string; role: string },
|
||||
row: {
|
||||
createdById?: string | null;
|
||||
editPolicy?: 'creator' | 'assignees' | null;
|
||||
assigneeId?: string | null;
|
||||
assignees?: Array<{ id: string }>;
|
||||
},
|
||||
): boolean {
|
||||
if (actor.role === 'owner' || actor.role === 'admin') return true;
|
||||
if (row.createdById && actor.userId === row.createdById) return true;
|
||||
if ((row.editPolicy ?? 'creator') !== 'assignees') return false;
|
||||
return assigneeIdList(row).includes(actor.userId);
|
||||
}
|
||||
|
||||
function reconcileAllShares(assigneeIds: string[], completedByIds: string[]) {
|
||||
const kept = [...new Set(completedByIds.filter((id) => assigneeIds.includes(id)))];
|
||||
const done = assigneeIds.length > 0 && assigneeIds.every((id) => kept.includes(id));
|
||||
return { status: done ? ('done' as const) : ('open' as const), completedByIds: kept };
|
||||
}
|
||||
|
||||
/** stageId = شناسهٔ مرحله یا 'all'؛ وقتی ست باشد فیلتر زمانی وضعیت را تحمیل نمی‌کند (جز عقب‌افتاده) */
|
||||
type StageScope = { stageId: string };
|
||||
|
||||
@@ -119,9 +82,6 @@ type ActivityRow = {
|
||||
reminderNotifySms: boolean;
|
||||
reminderSentAt: Date | null;
|
||||
completedAt: Date | null;
|
||||
completionMode?: 'any' | 'all';
|
||||
completedByIds?: string[];
|
||||
editPolicy?: 'creator' | 'assignees';
|
||||
importSource?: string;
|
||||
promotedFromPriorAt?: Date | null;
|
||||
tags: string[];
|
||||
@@ -226,39 +186,22 @@ export class ActivitiesService {
|
||||
return { stages, types };
|
||||
}
|
||||
|
||||
/** کارهای بازِ «من» که سهم‌شان ثبت شده، از میز کار شخص خارج می‌شوند. */
|
||||
private deskScope(
|
||||
actor: ActivityActor,
|
||||
desk?: 'mine' | 'team',
|
||||
): Prisma.ActivityWhereInput {
|
||||
if (desk !== 'mine') return activityAccessWhere(actor);
|
||||
return {
|
||||
AND: [
|
||||
{
|
||||
OR: [
|
||||
{ assigneeId: actor.userId },
|
||||
{ assignees: { some: { id: actor.userId } } },
|
||||
{ participantIds: { has: actor.userId } },
|
||||
],
|
||||
},
|
||||
{
|
||||
NOT: {
|
||||
completionMode: 'all',
|
||||
status: 'open',
|
||||
completedByIds: { has: actor.userId },
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
async summary(
|
||||
organizationId: string,
|
||||
actor: ActivityActor,
|
||||
desk?: 'mine' | 'team',
|
||||
): Promise<ActivitySummaryDto> {
|
||||
const { start, end } = dayBounds();
|
||||
const scope = this.deskScope(actor, desk);
|
||||
const scope: Prisma.ActivityWhereInput =
|
||||
desk === 'mine'
|
||||
? {
|
||||
OR: [
|
||||
{ assigneeId: actor.userId },
|
||||
{ assignees: { some: { id: actor.userId } } },
|
||||
{ participantIds: { has: actor.userId } },
|
||||
],
|
||||
}
|
||||
: activityAccessWhere(actor);
|
||||
const prior = activityPriorWhere(actor.priorLens, actor.priorCutoff);
|
||||
const [todayCount, overdueCount] = await Promise.all([
|
||||
this.prisma.activity.count({
|
||||
@@ -591,24 +534,8 @@ export class ActivitiesService {
|
||||
const stage = await this.stages.get(organizationId, stageId);
|
||||
const existing = await this.prisma.activity.findFirst({
|
||||
where: { id, organizationId },
|
||||
select: {
|
||||
status: true,
|
||||
completedAt: true,
|
||||
completionMode: true,
|
||||
completedByIds: true,
|
||||
createdById: true,
|
||||
assigneeId: true,
|
||||
assignees: { select: { id: true } },
|
||||
},
|
||||
select: { status: true, completedAt: true },
|
||||
});
|
||||
if (
|
||||
stage.kind === 'done' &&
|
||||
existing?.completionMode === 'all' &&
|
||||
assigneeIdList(existing).length > 1 &&
|
||||
!canForceClose(actor, existing.createdById)
|
||||
) {
|
||||
return this.complete(organizationId, id, actor);
|
||||
}
|
||||
const row = await this.prisma.activity.update({
|
||||
where: { id },
|
||||
data: {
|
||||
@@ -623,9 +550,6 @@ export class ActivitiesService {
|
||||
: stage.kind === 'open'
|
||||
? null
|
||||
: undefined,
|
||||
...(stage.kind === 'open' && existing?.status !== 'open'
|
||||
? { completedByIds: [] }
|
||||
: {}),
|
||||
},
|
||||
include,
|
||||
});
|
||||
@@ -751,9 +675,6 @@ export class ActivitiesService {
|
||||
assignees: assigneeIds.length
|
||||
? { connect: assigneeIds.map((id) => ({ id })) }
|
||||
: undefined,
|
||||
completionMode: dto.completionMode === 'all' ? 'all' : 'any',
|
||||
completedByIds: [],
|
||||
editPolicy: dto.editPolicy === 'assignees' ? 'assignees' : 'creator',
|
||||
createdById: userId,
|
||||
},
|
||||
include,
|
||||
@@ -822,23 +743,8 @@ export class ActivitiesService {
|
||||
|
||||
const existing = await this.prisma.activity.findFirst({
|
||||
where: { id, organizationId },
|
||||
select: {
|
||||
status: true,
|
||||
type: true,
|
||||
typeDefId: true,
|
||||
fields: true,
|
||||
participantIds: true,
|
||||
completionMode: true,
|
||||
completedByIds: true,
|
||||
editPolicy: true,
|
||||
createdById: true,
|
||||
assigneeId: true,
|
||||
assignees: { select: { id: true } },
|
||||
},
|
||||
select: { status: true, type: true, typeDefId: true, fields: true, participantIds: true },
|
||||
});
|
||||
if (!existing || !canMutateActivity(actor, existing)) {
|
||||
throw new ForbiddenException('شما مجوز ویرایش این فعالیت را ندارید');
|
||||
}
|
||||
const data: Prisma.ActivityUncheckedUpdateInput = {};
|
||||
if (dto.title !== undefined) data.title = dto.title.trim();
|
||||
if ('boardId' in dto) {
|
||||
@@ -906,7 +812,6 @@ export class ActivitiesService {
|
||||
if ('dealId' in dto) data.dealId = emptyToNull(dto.dealId ?? null);
|
||||
if ('leadId' in dto) data.leadId = emptyToNull(dto.leadId ?? null);
|
||||
let assigneeConnect: Array<{ id: string }> | undefined;
|
||||
let nextAssigneeIds: string[] | undefined;
|
||||
if (dto.assigneeIds !== undefined || 'assigneeId' in dto) {
|
||||
const current = await this.prisma.activity.findFirst({
|
||||
where: { id, organizationId },
|
||||
@@ -934,7 +839,6 @@ export class ActivitiesService {
|
||||
);
|
||||
data.assigneeId = assigneeIds[0]!;
|
||||
assigneeConnect = assigneeIds.map((uid) => ({ id: uid }));
|
||||
nextAssigneeIds = assigneeIds;
|
||||
} else {
|
||||
const assigneeId = emptyToNull(dto.assigneeId ?? null);
|
||||
if (assigneeId) await this.assertUserInOrg(organizationId, assigneeId);
|
||||
@@ -948,44 +852,12 @@ export class ActivitiesService {
|
||||
data.assigneeId = assigneeId;
|
||||
if (assigneeId) assigneeConnect = [{ id: assigneeId }];
|
||||
else assigneeConnect = [];
|
||||
nextAssigneeIds = assigneeId ? [assigneeId] : [];
|
||||
}
|
||||
}
|
||||
const modeChanged = dto.completionMode === 'any' || dto.completionMode === 'all';
|
||||
const nextMode = modeChanged ? dto.completionMode! : (existing?.completionMode ?? 'any');
|
||||
if (modeChanged) data.completionMode = nextMode;
|
||||
if (dto.editPolicy === 'creator' || dto.editPolicy === 'assignees') {
|
||||
data.editPolicy = dto.editPolicy;
|
||||
}
|
||||
const prevAssigneeIds = assigneeIdList(existing ?? {});
|
||||
const nextIds = nextAssigneeIds ?? prevAssigneeIds;
|
||||
const explicitDone = dto.status === 'done';
|
||||
const explicitReopen = dto.status === 'open' && existing?.status !== 'open';
|
||||
const explicitCancel = dto.status === 'canceled';
|
||||
if (explicitDone) {
|
||||
data.status = 'done';
|
||||
data.completedAt = new Date();
|
||||
} else if (explicitReopen) {
|
||||
data.status = 'open';
|
||||
data.completedAt = null;
|
||||
data.completedByIds = [];
|
||||
} else if (explicitCancel) {
|
||||
data.status = 'canceled';
|
||||
} else if (nextMode === 'any' && modeChanged) {
|
||||
data.completedByIds = [];
|
||||
} else if (nextMode === 'all' && (modeChanged || nextAssigneeIds)) {
|
||||
const reconciled = reconcileAllShares(nextIds, existing?.completedByIds ?? []);
|
||||
data.completedByIds = reconciled.completedByIds;
|
||||
const finishedStaysFinished = existing?.status === 'done' && !nextAssigneeIds;
|
||||
if (existing?.status !== 'canceled' && !finishedStaysFinished) {
|
||||
if (reconciled.status === 'done' && existing?.status !== 'done') {
|
||||
data.status = 'done';
|
||||
data.completedAt = new Date();
|
||||
} else if (reconciled.status === 'open' && existing?.status === 'done') {
|
||||
data.status = 'open';
|
||||
data.completedAt = null;
|
||||
}
|
||||
}
|
||||
if (dto.status !== undefined) {
|
||||
data.status = dto.status;
|
||||
data.completedAt =
|
||||
dto.status === 'done' ? new Date() : dto.status === 'open' ? null : undefined;
|
||||
}
|
||||
|
||||
const row = await this.prisma.activity.update({
|
||||
@@ -1009,7 +881,7 @@ export class ActivitiesService {
|
||||
addedParticipants.filter((uid) => !assigneeSet.has(uid)),
|
||||
);
|
||||
}
|
||||
if (data.status === 'done' && existing?.status !== 'done') {
|
||||
if (dto.status === 'done' && existing?.status !== 'done') {
|
||||
await this.fireDone(organizationId, row);
|
||||
}
|
||||
return this.toDto(row, await this.ctx(organizationId));
|
||||
@@ -1019,74 +891,18 @@ export class ActivitiesService {
|
||||
organizationId: string,
|
||||
id: string,
|
||||
actor: ActivityActor,
|
||||
options: { force?: boolean; undo?: boolean } = {},
|
||||
): Promise<ActivityDto> {
|
||||
await this.ensureExists(organizationId, id, actor);
|
||||
const existing = await this.prisma.activity.findFirst({
|
||||
where: { id, organizationId },
|
||||
select: {
|
||||
status: true,
|
||||
completionMode: true,
|
||||
completedByIds: true,
|
||||
createdById: true,
|
||||
assigneeId: true,
|
||||
assignees: { select: { id: true } },
|
||||
},
|
||||
select: { status: true },
|
||||
});
|
||||
if (!existing) throw new NotFoundException('فعالیت پیدا نشد');
|
||||
if (existing.status === 'canceled') {
|
||||
throw new BadRequestException('فعالیت لغو شده است');
|
||||
}
|
||||
|
||||
const assignees = assigneeIdList(existing);
|
||||
const allowedForce = canForceClose(actor, existing.createdById);
|
||||
if (options.force && !allowedForce) {
|
||||
throw new ForbiddenException('بستن فعالیت برای همه فقط برای سازنده یا مدیر ممکن است');
|
||||
}
|
||||
|
||||
if (options.undo) {
|
||||
if (existing.completionMode !== 'all' || existing.status !== 'open') {
|
||||
throw new BadRequestException('سهم انجام‌شده را فقط تا وقتی فعالیت باز است می‌توان لغو کرد');
|
||||
}
|
||||
const row = await this.prisma.activity.update({
|
||||
where: { id },
|
||||
data: {
|
||||
completedByIds: existing.completedByIds.filter((uid) => uid !== actor.userId),
|
||||
},
|
||||
include,
|
||||
});
|
||||
return this.toDto(row, await this.ctx(organizationId));
|
||||
}
|
||||
|
||||
const personal =
|
||||
existing.completionMode === 'all' && assignees.length > 1 && !options.force;
|
||||
if (!personal) {
|
||||
const row = await this.prisma.activity.update({
|
||||
where: { id },
|
||||
data: { status: 'done', completedAt: new Date() },
|
||||
include,
|
||||
});
|
||||
if (existing.status !== 'done') await this.fireDone(organizationId, row);
|
||||
return this.toDto(row, await this.ctx(organizationId));
|
||||
}
|
||||
|
||||
if (!assignees.includes(actor.userId)) {
|
||||
throw new ForbiddenException('فقط مسئول این فعالیت می‌تواند سهم خودش را ثبت کند');
|
||||
}
|
||||
const reconciled = reconcileAllShares(assignees, [
|
||||
...existing.completedByIds,
|
||||
actor.userId,
|
||||
]);
|
||||
const row = await this.prisma.activity.update({
|
||||
where: { id },
|
||||
data: {
|
||||
completedByIds: reconciled.completedByIds,
|
||||
status: reconciled.status,
|
||||
completedAt: reconciled.status === 'done' ? new Date() : null,
|
||||
},
|
||||
data: { status: 'done', completedAt: new Date() },
|
||||
include,
|
||||
});
|
||||
if (reconciled.status === 'done' && existing.status !== 'done') {
|
||||
if (existing?.status !== 'done') {
|
||||
await this.fireDone(organizationId, row);
|
||||
}
|
||||
return this.toDto(row, await this.ctx(organizationId));
|
||||
@@ -1130,18 +946,6 @@ export class ActivitiesService {
|
||||
actor: ActivityActor,
|
||||
): Promise<void> {
|
||||
await this.ensureExists(organizationId, id, actor);
|
||||
const existing = await this.prisma.activity.findFirst({
|
||||
where: { id, organizationId },
|
||||
select: {
|
||||
createdById: true,
|
||||
editPolicy: true,
|
||||
assigneeId: true,
|
||||
assignees: { select: { id: true } },
|
||||
},
|
||||
});
|
||||
if (!existing || !canMutateActivity(actor, existing)) {
|
||||
throw new ForbiddenException('شما مجوز حذف این فعالیت را ندارید');
|
||||
}
|
||||
const images = await this.prisma.activityImage.findMany({
|
||||
where: { activityId: id, organizationId },
|
||||
select: { storageKey: true, sizeBytes: true },
|
||||
@@ -1162,18 +966,6 @@ export class ActivitiesService {
|
||||
actor: ActivityActor,
|
||||
): Promise<ActivityImageDto> {
|
||||
await this.ensureExists(organizationId, activityId, actor);
|
||||
const gate = await this.prisma.activity.findFirst({
|
||||
where: { id: activityId, organizationId },
|
||||
select: {
|
||||
createdById: true,
|
||||
editPolicy: true,
|
||||
assigneeId: true,
|
||||
assignees: { select: { id: true } },
|
||||
},
|
||||
});
|
||||
if (!gate || !canMutateActivity(actor, gate)) {
|
||||
throw new ForbiddenException('شما مجوز ویرایش این فعالیت را ندارید');
|
||||
}
|
||||
if (!file?.buffer?.length) {
|
||||
throw new BadRequestException('فایلی ارسال نشده است');
|
||||
}
|
||||
@@ -1268,18 +1060,6 @@ export class ActivitiesService {
|
||||
actor: ActivityActor,
|
||||
): Promise<void> {
|
||||
await this.ensureExists(organizationId, activityId, actor);
|
||||
const gate = await this.prisma.activity.findFirst({
|
||||
where: { id: activityId, organizationId },
|
||||
select: {
|
||||
createdById: true,
|
||||
editPolicy: true,
|
||||
assigneeId: true,
|
||||
assignees: { select: { id: true } },
|
||||
},
|
||||
});
|
||||
if (!gate || !canMutateActivity(actor, gate)) {
|
||||
throw new ForbiddenException('شما مجوز ویرایش این فعالیت را ندارید');
|
||||
}
|
||||
const row = await this.prisma.activityImage.findFirst({
|
||||
where: { id: imageId, activityId, organizationId },
|
||||
});
|
||||
@@ -1328,7 +1108,16 @@ export class ActivitiesService {
|
||||
typeRows: TypeRow[] = [],
|
||||
): Prisma.ActivityWhereInput {
|
||||
const { start, end } = dayBounds();
|
||||
const scope = this.deskScope(actor, desk);
|
||||
const scope: Prisma.ActivityWhereInput =
|
||||
desk === 'mine'
|
||||
? {
|
||||
OR: [
|
||||
{ assigneeId: actor.userId },
|
||||
{ assignees: { some: { id: actor.userId } } },
|
||||
{ participantIds: { has: actor.userId } },
|
||||
],
|
||||
}
|
||||
: activityAccessWhere(actor);
|
||||
const facetAssignee = facets?.assigneeId?.trim();
|
||||
const facetTypeDef = facets?.typeDefId?.trim();
|
||||
const facetTitle = facets?.title?.trim();
|
||||
@@ -1629,9 +1418,6 @@ export class ActivitiesService {
|
||||
reminderNotifySms: row.reminderNotifySms,
|
||||
reminderSentAt: row.reminderSentAt?.toISOString() ?? null,
|
||||
completedAt: row.completedAt?.toISOString() ?? null,
|
||||
completionMode: row.completionMode ?? 'any',
|
||||
completedByIds: row.completedByIds ?? [],
|
||||
editPolicy: row.editPolicy ?? 'creator',
|
||||
importSource: row.importSource ?? 'manual',
|
||||
promotedFromPriorAt: row.promotedFromPriorAt?.toISOString() ?? null,
|
||||
tags: row.tags ?? [],
|
||||
|
||||
@@ -384,14 +384,6 @@ export class CreateActivityDto {
|
||||
@IsArray()
|
||||
@IsString({ each: true })
|
||||
assigneeIds?: string[];
|
||||
|
||||
@IsOptional()
|
||||
@IsIn(['any', 'all'])
|
||||
completionMode?: 'any' | 'all';
|
||||
|
||||
@IsOptional()
|
||||
@IsIn(['creator', 'assignees'])
|
||||
editPolicy?: 'creator' | 'assignees';
|
||||
}
|
||||
|
||||
export class UpdateActivityDto {
|
||||
@@ -492,12 +484,4 @@ export class UpdateActivityDto {
|
||||
@IsArray()
|
||||
@IsString({ each: true })
|
||||
assigneeIds?: string[];
|
||||
|
||||
@IsOptional()
|
||||
@IsIn(['any', 'all'])
|
||||
completionMode?: 'any' | 'all';
|
||||
|
||||
@IsOptional()
|
||||
@IsIn(['creator', 'assignees'])
|
||||
editPolicy?: 'creator' | 'assignees';
|
||||
}
|
||||
|
||||
@@ -19,10 +19,6 @@ import type {
|
||||
StorageUsageDto,
|
||||
SubscriptionSummaryDto,
|
||||
} from '@mento/shared';
|
||||
import {
|
||||
parseUserTreasuryAccess,
|
||||
permissionsWithTreasuryOverride,
|
||||
} from '@mento/shared';
|
||||
import { Prisma } from '@prisma/client';
|
||||
/** Ensures Express.Multer.File augmentation is loaded for saveAvatar. */
|
||||
import type {} from 'multer';
|
||||
@@ -852,9 +848,6 @@ export class AuthService {
|
||||
},
|
||||
});
|
||||
const role = membership?.role ?? user.role;
|
||||
const rolePermissions = Array.isArray(membership?.orgRole?.permissions)
|
||||
? membership.orgRole.permissions.filter((item) => typeof item === 'string')
|
||||
: [];
|
||||
const orgName = membership?.organization.name;
|
||||
const sub =
|
||||
subscription ??
|
||||
@@ -886,10 +879,9 @@ export class AuthService {
|
||||
storage,
|
||||
isOrgOwner: role === 'owner',
|
||||
priorArchive: this.priorArchiveFor(membership),
|
||||
permissions: permissionsWithTreasuryOverride(
|
||||
rolePermissions,
|
||||
parseUserTreasuryAccess(membership?.treasuryAccessOverride),
|
||||
) as AuthUserDto['permissions'],
|
||||
permissions: (Array.isArray(membership?.orgRole?.permissions)
|
||||
? membership.orgRole.permissions.filter((item) => typeof item === 'string')
|
||||
: []) as AuthUserDto['permissions'],
|
||||
...(viewAs ? { viewAs } : {}),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -195,10 +195,6 @@ export class JwtStrategy extends PassportStrategy(Strategy) {
|
||||
const peers = await this.prisma.teamMember.findMany({
|
||||
where: {
|
||||
teamId: { in: memberships.map((m) => m.teamId) },
|
||||
team: { organizationId },
|
||||
user: {
|
||||
memberships: { some: { organizationId, isActive: true } },
|
||||
},
|
||||
},
|
||||
select: { userId: true },
|
||||
});
|
||||
|
||||
@@ -21,9 +21,6 @@ import {
|
||||
defaultEnabledModules,
|
||||
isPermanentBillingPlan,
|
||||
isOrgModuleKey,
|
||||
modulesForProductPlan,
|
||||
PRODUCT_PLAN_LIMITS,
|
||||
type ProductPlanCode,
|
||||
} from '@mento/shared';
|
||||
import { PrismaService } from '../prisma/prisma.service';
|
||||
import { PlatformAdminAlertService } from './platform-admin-alert.service';
|
||||
@@ -417,37 +414,7 @@ export class BillingService {
|
||||
}
|
||||
|
||||
defaultModulesForNewOrg(): OrgModuleKey[] {
|
||||
return modulesForProductPlan('core');
|
||||
}
|
||||
|
||||
/** سطح امکانات را روی همهٔ محیط‌های مالک می‌گذارد و سقف هسته/تیم/سازمان را هم تنظیم می‌کند. */
|
||||
async applyProductPlan(organizationId: string, code: ProductPlanCode) {
|
||||
const modules = modulesForProductPlan(code);
|
||||
const owner = await this.prisma.membership.findFirst({
|
||||
where: { organizationId, role: 'owner', isActive: true },
|
||||
orderBy: { createdAt: 'asc' },
|
||||
select: { userId: true },
|
||||
});
|
||||
const orgIds = owner ? await this.ownedOrganizationIds(owner.userId) : [organizationId];
|
||||
for (const id of orgIds) {
|
||||
await this.setOrgModules(id, modules);
|
||||
}
|
||||
const limits = PRODUCT_PLAN_LIMITS[code];
|
||||
if (owner && (limits.maxUsers != null || limits.maxOrganizations != null)) {
|
||||
const account = await this.getByOwnerUserId(owner.userId);
|
||||
if (account) {
|
||||
await this.prisma.billingAccount.update({
|
||||
where: { id: account.id },
|
||||
data: {
|
||||
...(limits.maxUsers != null ? { maxUsers: limits.maxUsers } : {}),
|
||||
...(limits.maxOrganizations != null
|
||||
? { maxOrganizations: limits.maxOrganizations }
|
||||
: {}),
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
return modules;
|
||||
return defaultEnabledModules();
|
||||
}
|
||||
|
||||
async countExpiringSoon() {
|
||||
|
||||
@@ -5,7 +5,7 @@ import type {
|
||||
SectionDataAccess,
|
||||
UserRole,
|
||||
} from '@mento/shared';
|
||||
import { DATA_SCOPES, canViewAllRecords, sectionHasDataAccessLimits } from '@mento/shared';
|
||||
import { DATA_SCOPES, canViewAllRecords } from '@mento/shared';
|
||||
import type { Prisma } from '@prisma/client';
|
||||
import {
|
||||
activitiesDeepWhere,
|
||||
@@ -13,7 +13,6 @@ import {
|
||||
notesDeepWhere,
|
||||
projectsDeepWhere,
|
||||
routinesDeepWhere,
|
||||
sectionOwnerIdUnion,
|
||||
ticketsDeepWhere,
|
||||
} from './data-access';
|
||||
|
||||
@@ -61,65 +60,6 @@ export type Actor = {
|
||||
|
||||
export type ScopedActor = Pick<Actor, 'userId' | 'role' | 'dataVisibility' | 'visibleUserIds' | 'scopes'>;
|
||||
|
||||
type DeepAccessActor = ScopedActor &
|
||||
Partial<
|
||||
Pick<
|
||||
Actor,
|
||||
| 'customersAccess'
|
||||
| 'leadsAccess'
|
||||
| 'salesAccess'
|
||||
| 'activitiesAccess'
|
||||
| 'notesAccess'
|
||||
| 'routinesAccess'
|
||||
| 'projectsAccess'
|
||||
| 'ticketsAccess'
|
||||
| 'teamPeerIds'
|
||||
>
|
||||
>;
|
||||
|
||||
function sectionForScope(actor: DeepAccessActor, scope: DataScope): SectionDataAccess | undefined {
|
||||
switch (scope) {
|
||||
case 'contacts':
|
||||
return actor.customersAccess;
|
||||
case 'leads':
|
||||
return actor.leadsAccess;
|
||||
case 'deals':
|
||||
return actor.salesAccess;
|
||||
case 'activities':
|
||||
return actor.activitiesAccess;
|
||||
case 'notes':
|
||||
return actor.notesAccess;
|
||||
case 'routines':
|
||||
return actor.routinesAccess;
|
||||
case 'projects':
|
||||
return actor.projectsAccess;
|
||||
case 'tickets':
|
||||
return actor.ticketsAccess;
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* شناسه‌های مالک از قانون عمق داده.
|
||||
* legacy = بخش عمیق روی این Actor نیست.
|
||||
* open = محدودیت مالکی ندارد (همه، یا فقط فیلترهای غیرمالک).
|
||||
*/
|
||||
function deepOwnerIds(
|
||||
actor: DeepAccessActor,
|
||||
scope: DataScope,
|
||||
): { kind: 'legacy' } | { kind: 'open' } | { kind: 'ids'; ids: string[] } {
|
||||
const section = sectionForScope(actor, scope);
|
||||
if (!section) return { kind: 'legacy' };
|
||||
if (!sectionHasDataAccessLimits(section)) return { kind: 'open' };
|
||||
const ids = sectionOwnerIdUnion(section, {
|
||||
userId: actor.userId,
|
||||
teamPeerIds: actor.teamPeerIds ?? null,
|
||||
});
|
||||
if (ids === null) return { kind: 'open' };
|
||||
return { kind: 'ids', ids };
|
||||
}
|
||||
|
||||
/** Actor با سطح دید مخصوص یک بخش (اگر تنظیم شده باشد). */
|
||||
export function forScope<T extends ScopedActor>(actor: T, scope: DataScope): T {
|
||||
const s = actor.scopes?.[scope];
|
||||
@@ -169,16 +109,9 @@ export function scopedOwnerIds(
|
||||
|
||||
/** فیلتر مالکیت؛ پیش‌فرض بخش «مشتریان» (Person / Company). برای فاکتور/پیش‌فاکتور scope=finance. */
|
||||
export function ownerWhere(
|
||||
actor: DeepAccessActor,
|
||||
actor: ScopedActor,
|
||||
scope: DataScope = 'contacts',
|
||||
): { ownerId: string } | { ownerId: { in: string[] } } | Record<string, never> {
|
||||
const deep = deepOwnerIds(actor, scope);
|
||||
if (deep.kind === 'open') return {};
|
||||
if (deep.kind === 'ids') {
|
||||
if (deep.ids.length === 1) return { ownerId: deep.ids[0]! };
|
||||
if (!deep.ids.length) return { ownerId: '__no_access__' };
|
||||
return { ownerId: { in: deep.ids } };
|
||||
}
|
||||
const ids = scopedOwnerIds(actor, scope);
|
||||
if (!ids) return {};
|
||||
if (ids.length === 1) return { ownerId: ids[0]! };
|
||||
@@ -220,16 +153,11 @@ export function projectCardAccessWhere(
|
||||
}
|
||||
|
||||
/** فعالیت‌ها بر اساس مسئول اصلی یا مسئولان مشترک */
|
||||
export function assigneeWhere(actor: DeepAccessActor): Prisma.ActivityWhereInput {
|
||||
const deep = deepOwnerIds(actor, 'activities');
|
||||
const ids =
|
||||
deep.kind === 'open'
|
||||
? null
|
||||
: deep.kind === 'ids'
|
||||
? deep.ids
|
||||
: scopedOwnerIds(actor, 'activities');
|
||||
export function assigneeWhere(
|
||||
actor: ScopedActor,
|
||||
): Prisma.ActivityWhereInput {
|
||||
const ids = scopedOwnerIds(actor, 'activities');
|
||||
if (!ids) return {};
|
||||
if (!ids.length) return { assigneeId: '__no_access__' };
|
||||
return {
|
||||
OR: [
|
||||
{ assigneeId: { in: ids } },
|
||||
|
||||
@@ -112,13 +112,9 @@ export class CompaniesService {
|
||||
...(groupIds.length ? [{ groupLinks: { some: { groupId: { in: groupIds } } } }] : []),
|
||||
];
|
||||
const where: Prisma.CompanyWhereInput = {
|
||||
AND: [
|
||||
{
|
||||
organizationId: actor.organizationId,
|
||||
...customersCompanyWhere(actor),
|
||||
},
|
||||
...and,
|
||||
],
|
||||
organizationId: actor.organizationId,
|
||||
...customersCompanyWhere(actor),
|
||||
...(and.length ? { AND: and } : {}),
|
||||
};
|
||||
|
||||
const [rows, total] = await this.prisma.$transaction([
|
||||
|
||||
@@ -218,15 +218,11 @@ export class PeopleService implements OnModuleInit {
|
||||
if (disc) and.push(disc);
|
||||
if (groupIds.length) and.push({ groupLinks: { some: { groupId: { in: groupIds } } } });
|
||||
return {
|
||||
AND: [
|
||||
{
|
||||
organizationId: actor.organizationId,
|
||||
...customersPersonWhere(actor),
|
||||
},
|
||||
...(moods.length ? [{ mood: { in: moods } }] : []),
|
||||
...(sources.length ? [{ importSource: { in: sources } }] : []),
|
||||
...and,
|
||||
],
|
||||
organizationId: actor.organizationId,
|
||||
...customersPersonWhere(actor),
|
||||
...(moods.length ? { mood: { in: moods } } : {}),
|
||||
...(sources.length ? { importSource: { in: sources } } : {}),
|
||||
...(and.length ? { AND: and } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -438,77 +438,6 @@ export class TahesabPersonLinkService {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* کدهایی که لینک ندارند ولی شماره‌شان مال مشتریِ از قبل لینک‌شدهٔ همین اتصال است.
|
||||
* یک شخص فقط یک کد ته‌حساب دارد؛ این کدها مشتری تازه نیستند.
|
||||
*/
|
||||
private async duplicateOwners(
|
||||
organizationId: string,
|
||||
connectionId: string,
|
||||
rows: Array<{ moshtariCode: number | null; tel: string }>,
|
||||
) {
|
||||
const pending = rows.filter(
|
||||
(row): row is { moshtariCode: number; tel: string } => row.moshtariCode != null,
|
||||
);
|
||||
const keys = [
|
||||
...new Set(pending.flatMap((row) => phoneIdentityKeys(storedPhoneNumber(row.tel)))),
|
||||
];
|
||||
const out = new Map<
|
||||
number,
|
||||
{ moshtariCode: number; personId: string; personName: string }
|
||||
>();
|
||||
if (!keys.length) return out;
|
||||
|
||||
const people = await this.prisma.person.findMany({
|
||||
where: {
|
||||
organizationId,
|
||||
OR: [{ mobile: { in: keys } }, { phone: { in: keys } }],
|
||||
accountingLinks: { some: { connectionId } },
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
firstName: true,
|
||||
lastName: true,
|
||||
mobile: true,
|
||||
phone: true,
|
||||
accountingLinks: {
|
||||
where: { connectionId },
|
||||
select: { moshtariCode: true },
|
||||
take: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
const byKey = new Map<
|
||||
string,
|
||||
{ moshtariCode: number; personId: string; personName: string }
|
||||
>();
|
||||
for (const person of people) {
|
||||
const link = person.accountingLinks[0];
|
||||
if (!link) continue;
|
||||
const info = {
|
||||
moshtariCode: link.moshtariCode,
|
||||
personId: person.id,
|
||||
personName: `${person.firstName} ${person.lastName}`.trim(),
|
||||
};
|
||||
for (const key of [
|
||||
...phoneIdentityKeys(person.mobile),
|
||||
...phoneIdentityKeys(person.phone),
|
||||
]) {
|
||||
if (!byKey.has(key)) byKey.set(key, info);
|
||||
}
|
||||
}
|
||||
for (const row of pending) {
|
||||
for (const key of phoneIdentityKeys(storedPhoneNumber(row.tel))) {
|
||||
const hit = byKey.get(key);
|
||||
if (hit && hit.moshtariCode !== row.moshtariCode) {
|
||||
out.set(row.moshtariCode, hit);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
async search(organizationId: string, dto: SearchTahesabDto) {
|
||||
const { api } = await this.connections.getApi(
|
||||
organizationId,
|
||||
@@ -587,7 +516,7 @@ export class TahesabPersonLinkService {
|
||||
});
|
||||
const byCode = new Map(existing.map((e) => [e.moshtariCode, e]));
|
||||
|
||||
const linked = mapped.map((row) => {
|
||||
const results = mapped.map((row) => {
|
||||
const link = row.moshtariCode != null ? byCode.get(row.moshtariCode) : undefined;
|
||||
return {
|
||||
...row,
|
||||
@@ -598,22 +527,6 @@ export class TahesabPersonLinkService {
|
||||
: null,
|
||||
};
|
||||
});
|
||||
const duplicates = await this.duplicateOwners(
|
||||
organizationId,
|
||||
dto.connectionId,
|
||||
linked.filter((row) => !row.alreadyLinked),
|
||||
);
|
||||
const results = linked.map((row) => {
|
||||
if (row.alreadyLinked || row.moshtariCode == null) return row;
|
||||
const dup = duplicates.get(row.moshtariCode);
|
||||
if (!dup) return row;
|
||||
return {
|
||||
...row,
|
||||
duplicateOfCode: dup.moshtariCode,
|
||||
duplicatePersonId: dup.personId,
|
||||
duplicatePersonName: dup.personName,
|
||||
};
|
||||
});
|
||||
|
||||
await this.prisma.accountingSyncJob.create({
|
||||
data: {
|
||||
@@ -688,6 +601,7 @@ export class TahesabPersonLinkService {
|
||||
const sourceRef = String(dto.moshtariCode);
|
||||
|
||||
let personId = dto.personId;
|
||||
let preserveExistingLink = false;
|
||||
if (personId) {
|
||||
const existing = await this.getPerson(organizationId, personId);
|
||||
const prevFirst = existing.firstName;
|
||||
@@ -716,8 +630,8 @@ export class TahesabPersonLinkService {
|
||||
});
|
||||
} else {
|
||||
// اگر موبایل تکراری است → همان شخص؛ نام قبلی حفظ و نام ته‌حساب جایگزین.
|
||||
// اگر همان شخص قبلاً به کد دیگری از این اتصال لینک شده، نام و لینک دست نمی‌خورند
|
||||
// تا کد قبلی جابه‌جا نشود و این کد هم مشتری تکراری نسازد.
|
||||
// اگر همان شخص قبلاً به کد دیگری از این اتصال لینک شده، لینک جابه‌جا نمی‌شود
|
||||
// تا کد قبلی دوباره «واردنشده» نشود و مشتری تکراری ساخته نشود.
|
||||
const mobileKeys = phoneIdentityKeys(mobile);
|
||||
const matches = mobileKeys.length
|
||||
? await this.prisma.person.findMany({
|
||||
@@ -737,22 +651,7 @@ export class TahesabPersonLinkService {
|
||||
const byMobile = matches.find((person) => person.importSource === 'tahesab') ?? matches[0] ?? null;
|
||||
if (byMobile) {
|
||||
const linkedCode = byMobile.accountingLinks[0]?.moshtariCode;
|
||||
if (linkedCode != null && linkedCode !== dto.moshtariCode) {
|
||||
const existing = await this.prisma.personAccountingLink.findFirst({
|
||||
where: { personId: byMobile.id, connectionId: dto.connectionId },
|
||||
include: {
|
||||
connection: { select: { label: true, dbName: true, isDefault: true } },
|
||||
},
|
||||
});
|
||||
if (!existing) {
|
||||
throw new NotFoundException('لینک ته‌حساب این مشتری یافت نشد.');
|
||||
}
|
||||
return {
|
||||
personId: byMobile.id,
|
||||
link: this.linkDto(existing),
|
||||
duplicateOf: linkedCode,
|
||||
};
|
||||
}
|
||||
preserveExistingLink = linkedCode != null && linkedCode !== dto.moshtariCode;
|
||||
const nameChanged =
|
||||
`${byMobile.firstName} ${byMobile.lastName}`.trim() !==
|
||||
`${firstName} ${lastName}`.trim();
|
||||
@@ -771,7 +670,7 @@ export class TahesabPersonLinkService {
|
||||
: {}),
|
||||
...carryPreviousSource(byMobile, 'tahesab'),
|
||||
importSource: 'tahesab',
|
||||
sourceRef,
|
||||
sourceRef: preserveExistingLink ? String(linkedCode) : sourceRef,
|
||||
...(!byMobile.birthDate && pickBirthDate(row) ? { birthDate: pickBirthDate(row) } : {}),
|
||||
...canonicalMobileUpdate(mobile, byMobile),
|
||||
},
|
||||
@@ -797,6 +696,32 @@ export class TahesabPersonLinkService {
|
||||
}
|
||||
}
|
||||
|
||||
if (preserveExistingLink) {
|
||||
await this.applyTahesabGroup(organizationId, dto.connectionId, personId, row);
|
||||
const existing = await this.prisma.personAccountingLink.findFirst({
|
||||
where: { personId, connectionId: dto.connectionId },
|
||||
include: {
|
||||
connection: { select: { label: true, dbName: true, isDefault: true } },
|
||||
},
|
||||
});
|
||||
if (!existing) {
|
||||
throw new NotFoundException('لینک ته‌حساب این مشتری یافت نشد.');
|
||||
}
|
||||
if (!options?.skipJob) {
|
||||
await this.prisma.accountingSyncJob.create({
|
||||
data: {
|
||||
organizationId,
|
||||
connectionId: dto.connectionId,
|
||||
kind: 'import',
|
||||
status: 'success',
|
||||
request: dto as unknown as Prisma.InputJsonValue,
|
||||
result: { personId, linkId: existing.id, keptLink: true } as Prisma.InputJsonValue,
|
||||
},
|
||||
});
|
||||
}
|
||||
return { personId, link: this.linkDto(existing) };
|
||||
}
|
||||
|
||||
const link = await this.prisma.personAccountingLink.upsert({
|
||||
where: {
|
||||
personId_connectionId: {
|
||||
@@ -897,7 +822,6 @@ export class TahesabPersonLinkService {
|
||||
let emptyStreak = 0;
|
||||
let imported = 0;
|
||||
let updated = 0;
|
||||
let duplicate = 0;
|
||||
let failed = 0;
|
||||
const errors: string[] = [];
|
||||
const maxPages = 300;
|
||||
@@ -945,14 +869,13 @@ export class TahesabPersonLinkService {
|
||||
);
|
||||
updated += 1;
|
||||
} else {
|
||||
const created = await this.importFromTahesab(
|
||||
await this.importFromTahesab(
|
||||
organizationId,
|
||||
{ connectionId, moshtariCode: code },
|
||||
{ api, row },
|
||||
{ skipJob: true },
|
||||
);
|
||||
if (created.duplicateOf) duplicate += 1;
|
||||
else imported += 1;
|
||||
imported += 1;
|
||||
}
|
||||
} catch (err) {
|
||||
failed += 1;
|
||||
@@ -968,26 +891,20 @@ export class TahesabPersonLinkService {
|
||||
errors.push('فهرست مشتریان از سقف خواندن خودکار بیشتر بود.');
|
||||
}
|
||||
|
||||
const summary = [
|
||||
`${imported} وارد شد`,
|
||||
`${updated} به‌روز شد`,
|
||||
...(duplicate ? [`${duplicate} شماره تکراری`] : []),
|
||||
`${failed} خطا`,
|
||||
].join('، ');
|
||||
const summary = `${imported} وارد شد، ${updated} به‌روز شد، ${failed} خطا`;
|
||||
await this.prisma.accountingSyncJob.create({
|
||||
data: {
|
||||
organizationId,
|
||||
connectionId,
|
||||
kind: 'customer-sync',
|
||||
status: !imported && !updated && (failed > 0 || errors.length > 0) ? 'error' : 'success',
|
||||
result: { imported, updated, duplicate, failed, pages: page - 1 } as Prisma.InputJsonValue,
|
||||
result: { imported, updated, failed, pages: page - 1 } as Prisma.InputJsonValue,
|
||||
},
|
||||
});
|
||||
this.logger.log(`همگام‌سازی مشتریان ته‌حساب ${connectionId}: ${summary}`);
|
||||
return {
|
||||
imported,
|
||||
updated,
|
||||
duplicate,
|
||||
failed,
|
||||
summary,
|
||||
error: errors.length ? errors.join('؛ ') : null,
|
||||
@@ -1112,16 +1029,6 @@ export class TahesabPersonLinkService {
|
||||
{ connectionId: dto.connectionId, moshtariCode },
|
||||
bulkApi ? { api: bulkApi, row: rowsByCode.get(moshtariCode) } : undefined,
|
||||
);
|
||||
if (r.duplicateOf) {
|
||||
items.push({
|
||||
moshtariCode,
|
||||
ok: true,
|
||||
skipped: true,
|
||||
personId: r.personId,
|
||||
error: `شماره تکراری است و قبلاً با کد ${r.duplicateOf} لینک شده`,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
items.push({ moshtariCode, ok: true, personId: r.personId });
|
||||
} catch (e) {
|
||||
const message =
|
||||
|
||||
@@ -3,9 +3,6 @@ import { Cron } from '@nestjs/schedule';
|
||||
import { AiService } from '../../ai/ai.service';
|
||||
import { NotesService } from '../../notes/notes.service';
|
||||
import { PrismaService } from '../../prisma/prisma.service';
|
||||
import { VoipConnectionsService } from './connections.service';
|
||||
import { DaftaresomaClient } from './daftareshoma-client';
|
||||
import { parseDaftaresomaRecordingRef } from './daftareshoma-webhook';
|
||||
import { SttClientService } from './stt-client.service';
|
||||
|
||||
const MAX_ATTEMPTS = 3;
|
||||
@@ -20,8 +17,6 @@ export class CallSummaryService {
|
||||
private readonly stt: SttClientService,
|
||||
private readonly ai: AiService,
|
||||
private readonly notes: NotesService,
|
||||
private readonly connections: VoipConnectionsService,
|
||||
private readonly daftareshoma: DaftaresomaClient,
|
||||
) {}
|
||||
|
||||
@Cron('*/1 * * * *')
|
||||
@@ -79,31 +74,7 @@ export class CallSummaryService {
|
||||
);
|
||||
return;
|
||||
}
|
||||
const daftId = parseDaftaresomaRecordingRef(row.recordingUrl);
|
||||
if (daftId) {
|
||||
const conn = await this.prisma.voipConnection.findFirst({
|
||||
where: { id: row.connectionId },
|
||||
});
|
||||
const token = conn
|
||||
? await this.connections.decryptApiToken(conn)
|
||||
: null;
|
||||
if (!token) {
|
||||
await this.markFailed(
|
||||
id,
|
||||
row.summaryAttempts,
|
||||
'توکن API دفتر شما برای دانلود ضبط موجود نیست',
|
||||
true,
|
||||
);
|
||||
return;
|
||||
}
|
||||
const audio = await this.daftareshoma.downloadRecording(
|
||||
token,
|
||||
daftId,
|
||||
);
|
||||
transcript = await this.stt.transcribeAudio(audio);
|
||||
} else {
|
||||
transcript = await this.stt.downloadAndTranscribe(row.recordingUrl);
|
||||
}
|
||||
transcript = await this.stt.downloadAndTranscribe(row.recordingUrl);
|
||||
await this.prisma.voipCallLog.update({
|
||||
where: { id },
|
||||
data: { transcript },
|
||||
|
||||
@@ -13,11 +13,6 @@ import { PrismaService } from '../../prisma/prisma.service';
|
||||
import { NotificationsService } from '../../notifications/notifications.service';
|
||||
import { iranMobileLookupKeys, normalizePhone } from '../../contacts/normalize';
|
||||
import { VoipConnectionsService } from './connections.service';
|
||||
import { DaftaresomaClient } from './daftareshoma-client';
|
||||
import {
|
||||
daftareshomaRecordingRef,
|
||||
parseDaftaresomaRecordingRef,
|
||||
} from './daftareshoma-webhook';
|
||||
|
||||
function digitsOnly(value: string | null | undefined): string {
|
||||
return (value ?? '').replace(/\D/g, '');
|
||||
@@ -62,32 +57,19 @@ export class VoipCallsService {
|
||||
private readonly prisma: PrismaService,
|
||||
private readonly connections: VoipConnectionsService,
|
||||
private readonly notifications: NotificationsService,
|
||||
private readonly daftareshoma: DaftaresomaClient,
|
||||
) {}
|
||||
|
||||
async listRecent(
|
||||
organizationId: string,
|
||||
opts?: {
|
||||
connectionId?: string;
|
||||
direction?: string;
|
||||
status?: string;
|
||||
lineExtension?: string;
|
||||
},
|
||||
connectionId?: string,
|
||||
): Promise<VoipCallLogDto[]> {
|
||||
const rows = await this.prisma.voipCallLog.findMany({
|
||||
where: {
|
||||
organizationId,
|
||||
...(opts?.connectionId ? { connectionId: opts.connectionId } : {}),
|
||||
...(opts?.direction === 'inbound' || opts?.direction === 'outbound'
|
||||
? { direction: opts.direction }
|
||||
: {}),
|
||||
...(opts?.status?.trim() ? { status: opts.status.trim() } : {}),
|
||||
...(opts?.lineExtension?.trim()
|
||||
? { lineExtension: opts.lineExtension.trim() }
|
||||
: {}),
|
||||
...(connectionId ? { connectionId } : {}),
|
||||
},
|
||||
orderBy: { syncedAt: 'desc' },
|
||||
take: 100,
|
||||
take: 50,
|
||||
});
|
||||
const personIds = rows
|
||||
.map((r) => r.personId)
|
||||
@@ -109,7 +91,6 @@ export class VoipCallsService {
|
||||
status: r.status,
|
||||
fromNumber: r.fromNumber,
|
||||
toNumber: r.toNumber,
|
||||
lineExtension: r.lineExtension ?? null,
|
||||
personId: r.personId,
|
||||
personName: r.personId ? (nameById.get(r.personId) ?? null) : null,
|
||||
activityId: r.activityId,
|
||||
@@ -146,9 +127,6 @@ export class VoipCallsService {
|
||||
const toDigits = digitsOnly(event.to ?? event.callee);
|
||||
const fromNumber = fromNormalized || fromDigits || null;
|
||||
const toNumber = toNormalized || toDigits || null;
|
||||
const lineRaw = String(event.lineExtension ?? '').trim();
|
||||
const lineExtension =
|
||||
normalizePhone(lineRaw) || digitsOnly(lineRaw) || lineRaw || null;
|
||||
const matchNumber = direction === 'inbound' ? fromNumber : toNumber;
|
||||
const personId = await this.findPersonId(
|
||||
conn.organizationId,
|
||||
@@ -215,7 +193,6 @@ export class VoipCallsService {
|
||||
status,
|
||||
fromNumber,
|
||||
toNumber,
|
||||
lineExtension: lineExtension ?? existing.lineExtension,
|
||||
personId: personId ?? existing.personId,
|
||||
activityId: activityId ?? existing.activityId,
|
||||
durationSec,
|
||||
@@ -236,7 +213,6 @@ export class VoipCallsService {
|
||||
status,
|
||||
fromNumber,
|
||||
toNumber,
|
||||
lineExtension,
|
||||
personId,
|
||||
activityId,
|
||||
durationSec,
|
||||
@@ -264,17 +240,6 @@ export class VoipCallsService {
|
||||
await this.notifyIncoming(conn.organizationId, personId, fromNumber);
|
||||
}
|
||||
|
||||
if (
|
||||
conn.provider === 'daftareshoma' &&
|
||||
['completed', 'answered', 'missed'].includes(status)
|
||||
) {
|
||||
void this.enrichDaftaresomaRecording(connectionId, callId).catch((e) => {
|
||||
this.logger.warn(
|
||||
`daftareshoma recording enrich failed: ${e instanceof Error ? e.message : e}`,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
const link = await this.prisma.voipCallLog.findUnique({
|
||||
where: {
|
||||
connectionId_externalCallId: {
|
||||
@@ -296,67 +261,10 @@ export class VoipCallsService {
|
||||
userId: string,
|
||||
number: string,
|
||||
personId?: string,
|
||||
): Promise<{ ok: true; mode: 'url' | 'tel' | 'daftareshoma'; dialUrl: string }> {
|
||||
): Promise<{ ok: true; mode: 'url' | 'tel'; dialUrl: string }> {
|
||||
const phone = normalizePhone(number) ?? digitsOnly(number);
|
||||
if (!phone) throw new BadRequestException('شماره معتبر نیست');
|
||||
|
||||
const daftareshomaConn = await this.prisma.voipConnection.findFirst({
|
||||
where: {
|
||||
organizationId,
|
||||
enabled: true,
|
||||
provider: 'daftareshoma',
|
||||
},
|
||||
orderBy: { createdAt: 'asc' },
|
||||
});
|
||||
|
||||
if (daftareshomaConn) {
|
||||
const token = await this.connections.decryptApiToken(daftareshomaConn);
|
||||
const fromNumber = daftareshomaConn.fromNumber?.trim();
|
||||
const callerExtension = daftareshomaConn.callerExtension?.trim();
|
||||
if (!token || !fromNumber || !callerExtension) {
|
||||
throw new BadRequestException(
|
||||
'اتصال دفتر شما ناقص است؛ توکن، شماره مبدأ و خط را تکمیل کنید',
|
||||
);
|
||||
}
|
||||
const toE164 = this.toPlusDigits(phone);
|
||||
const fromE164 = this.toPlusDigits(fromNumber);
|
||||
const extE164 = this.toPlusDigits(callerExtension);
|
||||
try {
|
||||
await this.daftareshoma.outgoingCall(token, {
|
||||
fromNumber: fromE164,
|
||||
toNumber: toE164,
|
||||
callerExtension: extE164,
|
||||
});
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : 'خطا';
|
||||
await this.prisma.voipConnection.update({
|
||||
where: { id: daftareshomaConn.id },
|
||||
data: { lastError: msg.slice(0, 400) },
|
||||
});
|
||||
throw new BadRequestException(msg);
|
||||
}
|
||||
|
||||
await this.prisma.voipCallLog.create({
|
||||
data: {
|
||||
organizationId,
|
||||
connectionId: daftareshomaConn.id,
|
||||
externalCallId: `ctc-${Date.now()}-${userId.slice(0, 6)}`,
|
||||
direction: 'outbound',
|
||||
status: 'ringing',
|
||||
fromNumber: fromE164,
|
||||
toNumber: toE164,
|
||||
personId: personId ?? null,
|
||||
startedAt: new Date(),
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
mode: 'daftareshoma',
|
||||
dialUrl: `daftareshoma:${toE164}`,
|
||||
};
|
||||
}
|
||||
|
||||
const conn = await this.prisma.voipConnection.findFirst({
|
||||
where: {
|
||||
organizationId,
|
||||
@@ -410,69 +318,6 @@ export class VoipCallsService {
|
||||
return { ok: true, mode: 'tel', dialUrl: `tel:${phone}` };
|
||||
}
|
||||
|
||||
private toPlusDigits(raw: string): string {
|
||||
const d = digitsOnly(raw);
|
||||
if (!d) return raw.trim();
|
||||
if (raw.trim().startsWith('+')) return `+${d}`;
|
||||
if (d.startsWith('98')) return `+${d}`;
|
||||
if (d.startsWith('0') && d.length >= 10) return `+98${d.slice(1)}`;
|
||||
if (d.length === 10 && d.startsWith('9')) return `+98${d}`;
|
||||
return `+${d}`;
|
||||
}
|
||||
|
||||
private async enrichDaftaresomaRecording(
|
||||
connectionId: string,
|
||||
callId: string,
|
||||
): Promise<void> {
|
||||
const conn = await this.prisma.voipConnection.findFirst({
|
||||
where: { id: connectionId, provider: 'daftareshoma', enabled: true },
|
||||
});
|
||||
if (!conn) return;
|
||||
const log = await this.prisma.voipCallLog.findUnique({
|
||||
where: {
|
||||
connectionId_externalCallId: { connectionId, externalCallId: callId },
|
||||
},
|
||||
});
|
||||
if (!log) return;
|
||||
if (parseDaftaresomaRecordingRef(log.recordingUrl) || log.recordingUrl) {
|
||||
if (
|
||||
parseDaftaresomaRecordingRef(log.recordingUrl) &&
|
||||
!['done', 'pending', 'processing'].includes(log.summaryStatus)
|
||||
) {
|
||||
await this.prisma.voipCallLog.update({
|
||||
where: { id: log.id },
|
||||
data: {
|
||||
summaryStatus: 'pending',
|
||||
summaryError: null,
|
||||
summaryNextAttemptAt: new Date(),
|
||||
},
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const token = await this.connections.decryptApiToken(conn);
|
||||
if (!token) return;
|
||||
const row = await this.daftareshoma.findCallById(token, callId);
|
||||
const recordingId = row?.recordingId?.trim();
|
||||
if (!recordingId) return;
|
||||
|
||||
const ref = daftareshomaRecordingRef(recordingId);
|
||||
await this.prisma.voipCallLog.update({
|
||||
where: { id: log.id },
|
||||
data: {
|
||||
recordingUrl: ref,
|
||||
summaryStatus: ['done', 'pending', 'processing'].includes(
|
||||
log.summaryStatus,
|
||||
)
|
||||
? log.summaryStatus
|
||||
: 'pending',
|
||||
summaryError: null,
|
||||
summaryNextAttemptAt: new Date(),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private shouldCreateActivity(status: string): boolean {
|
||||
return ['answered', 'completed', 'missed', 'failed'].includes(status);
|
||||
}
|
||||
|
||||
@@ -7,17 +7,12 @@ import type {
|
||||
CreateVoipConnectionRequest,
|
||||
UpdateVoipConnectionRequest,
|
||||
VoipConnectionDto,
|
||||
VoipProvider,
|
||||
} from '@mento/shared';
|
||||
import { Prisma } from '@prisma/client';
|
||||
import { createHmac } from 'crypto';
|
||||
import { PrismaService } from '../../prisma/prisma.service';
|
||||
import { TahesabCryptoService } from '../tahesab/tahesab-crypto.service';
|
||||
|
||||
function asProvider(value: string | null | undefined): VoipProvider {
|
||||
return value === 'daftareshoma' ? 'daftareshoma' : 'generic';
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class VoipConnectionsService {
|
||||
constructor(
|
||||
@@ -48,35 +43,19 @@ export class VoipConnectionsService {
|
||||
): Promise<VoipConnectionDto> {
|
||||
const label = dto.label?.trim();
|
||||
if (!label) throw new BadRequestException('نام اتصال الزامی است');
|
||||
const provider = asProvider(dto.provider);
|
||||
if (provider === 'daftareshoma') {
|
||||
const token = dto.apiToken?.trim();
|
||||
if (!token) throw new BadRequestException('توکن API دفتر شما الزامی است');
|
||||
// fromNumber / callerExtension فقط برای تماس خروجی از CRM لازم‌اند؛ ثبت وب‌هوک بدون آن‌ها ممکن است
|
||||
}
|
||||
|
||||
const secret = dto.webhookSecret?.trim();
|
||||
const secretEnc = secret ? this.crypto.encrypt(secret) : null;
|
||||
const token = dto.apiToken?.trim();
|
||||
const tokenEnc = token ? this.crypto.encrypt(token) : null;
|
||||
const clickToCallUrl =
|
||||
provider === 'generic' ? this.normalizeClickUrl(dto.clickToCallUrl) : null;
|
||||
const clickToCallUrl = this.normalizeClickUrl(dto.clickToCallUrl);
|
||||
|
||||
const row = await this.prisma.voipConnection.create({
|
||||
data: {
|
||||
organizationId,
|
||||
label,
|
||||
provider,
|
||||
enabled: dto.enabled ?? true,
|
||||
clickToCallUrl,
|
||||
fromNumber: dto.fromNumber?.trim() || null,
|
||||
callerExtension: dto.callerExtension?.trim() || null,
|
||||
webhookSecretCiphertext: secretEnc?.ciphertext,
|
||||
webhookSecretIv: secretEnc?.iv,
|
||||
webhookSecretTag: secretEnc?.tag,
|
||||
apiTokenCiphertext: tokenEnc?.ciphertext,
|
||||
apiTokenIv: tokenEnc?.iv,
|
||||
apiTokenTag: tokenEnc?.tag,
|
||||
},
|
||||
});
|
||||
return this.toDto(row, 0);
|
||||
@@ -98,12 +77,6 @@ export class VoipConnectionsService {
|
||||
if (dto.clickToCallUrl !== undefined) {
|
||||
data.clickToCallUrl = this.normalizeClickUrl(dto.clickToCallUrl);
|
||||
}
|
||||
if (dto.fromNumber !== undefined) {
|
||||
data.fromNumber = dto.fromNumber?.trim() || null;
|
||||
}
|
||||
if (dto.callerExtension !== undefined) {
|
||||
data.callerExtension = dto.callerExtension?.trim() || null;
|
||||
}
|
||||
if (dto.webhookSecret !== undefined) {
|
||||
const wh = dto.webhookSecret?.trim();
|
||||
if (!wh) {
|
||||
@@ -117,19 +90,6 @@ export class VoipConnectionsService {
|
||||
data.webhookSecretTag = enc.tag;
|
||||
}
|
||||
}
|
||||
if (dto.apiToken !== undefined) {
|
||||
const tok = dto.apiToken?.trim();
|
||||
if (!tok) {
|
||||
data.apiTokenCiphertext = null;
|
||||
data.apiTokenIv = null;
|
||||
data.apiTokenTag = null;
|
||||
} else {
|
||||
const enc = this.crypto.encrypt(tok);
|
||||
data.apiTokenCiphertext = enc.ciphertext;
|
||||
data.apiTokenIv = enc.iv;
|
||||
data.apiTokenTag = enc.tag;
|
||||
}
|
||||
}
|
||||
const row = await this.prisma.voipConnection.update({
|
||||
where: { id: existing.id },
|
||||
data,
|
||||
@@ -164,21 +124,6 @@ export class VoipConnectionsService {
|
||||
});
|
||||
}
|
||||
|
||||
async decryptApiToken(row: {
|
||||
apiTokenCiphertext: string | null;
|
||||
apiTokenIv: string | null;
|
||||
apiTokenTag: string | null;
|
||||
}): Promise<string | null> {
|
||||
if (!row.apiTokenCiphertext || !row.apiTokenIv || !row.apiTokenTag) {
|
||||
return null;
|
||||
}
|
||||
return this.crypto.decrypt({
|
||||
ciphertext: row.apiTokenCiphertext,
|
||||
iv: row.apiTokenIv,
|
||||
tag: row.apiTokenTag,
|
||||
});
|
||||
}
|
||||
|
||||
verifySignature(
|
||||
rawBody: string | Buffer,
|
||||
signature: string | undefined,
|
||||
@@ -208,13 +153,9 @@ export class VoipConnectionsService {
|
||||
row: {
|
||||
id: string;
|
||||
label: string;
|
||||
provider?: string | null;
|
||||
enabled: boolean;
|
||||
webhookSecretCiphertext: string | null;
|
||||
apiTokenCiphertext?: string | null;
|
||||
clickToCallUrl: string | null;
|
||||
fromNumber?: string | null;
|
||||
callerExtension?: string | null;
|
||||
lastEventAt: Date | null;
|
||||
lastError: string | null;
|
||||
createdAt: Date;
|
||||
@@ -225,13 +166,9 @@ export class VoipConnectionsService {
|
||||
return {
|
||||
id: row.id,
|
||||
label: row.label,
|
||||
provider: asProvider(row.provider),
|
||||
enabled: row.enabled,
|
||||
webhookSecretSet: Boolean(row.webhookSecretCiphertext),
|
||||
apiTokenSet: Boolean(row.apiTokenCiphertext),
|
||||
clickToCallUrl: row.clickToCallUrl,
|
||||
fromNumber: row.fromNumber ?? null,
|
||||
callerExtension: row.callerExtension ?? null,
|
||||
lastEventAt: row.lastEventAt?.toISOString() ?? null,
|
||||
lastError: row.lastError,
|
||||
callCount,
|
||||
|
||||
@@ -1,126 +0,0 @@
|
||||
import { Injectable, Logger } from '@nestjs/common';
|
||||
|
||||
const BASE_URL = 'https://coreapi.daftareshoma.com/api/Customize';
|
||||
const MAX_AUDIO_BYTES = 8 * 1024 * 1024;
|
||||
|
||||
export type DaftaresomaOutgoingCallInput = {
|
||||
fromNumber: string;
|
||||
toNumber: string;
|
||||
callerExtension: string;
|
||||
};
|
||||
|
||||
export type DaftaresomaCallSearchRow = {
|
||||
id?: string;
|
||||
fromNumber?: string;
|
||||
toNumber?: string;
|
||||
recordingId?: string | null;
|
||||
direction?: string;
|
||||
reportDispositionType?: string;
|
||||
startTime?: string;
|
||||
endTime?: string;
|
||||
duration?: string;
|
||||
extension?: string;
|
||||
};
|
||||
|
||||
@Injectable()
|
||||
export class DaftaresomaClient {
|
||||
private readonly logger = new Logger(DaftaresomaClient.name);
|
||||
|
||||
async outgoingCall(
|
||||
apiToken: string,
|
||||
input: DaftaresomaOutgoingCallInput,
|
||||
): Promise<void> {
|
||||
const res = await fetch(`${BASE_URL}/OutgoingCall`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${apiToken}`,
|
||||
'Content-Type': 'application/json',
|
||||
Accept: 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
from_number: input.fromNumber,
|
||||
to_number: input.toNumber,
|
||||
caller_extension: input.callerExtension,
|
||||
}),
|
||||
signal: AbortSignal.timeout(15000),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => '');
|
||||
this.logger.warn(
|
||||
`OutgoingCall failed (${res.status}): ${text.slice(0, 300)}`,
|
||||
);
|
||||
throw new Error(
|
||||
text.trim()
|
||||
? `تماس خروجی دفتر شما ناموفق بود (${res.status}): ${text.slice(0, 200)}`
|
||||
: `تماس خروجی دفتر شما ناموفق بود (${res.status})`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async findCallById(
|
||||
apiToken: string,
|
||||
callId: string,
|
||||
): Promise<DaftaresomaCallSearchRow | null> {
|
||||
const res = await fetch(`${BASE_URL}/CustomerCallSearch`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${apiToken}`,
|
||||
'Content-Type': 'application/json',
|
||||
Accept: 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ id: callId, limit: 1, pagination: 1 }),
|
||||
signal: AbortSignal.timeout(20000),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => '');
|
||||
this.logger.warn(
|
||||
`CustomerCallSearch failed (${res.status}): ${text.slice(0, 200)}`,
|
||||
);
|
||||
return null;
|
||||
}
|
||||
const json = (await res.json()) as {
|
||||
data?: DaftaresomaCallSearchRow[];
|
||||
};
|
||||
const row = Array.isArray(json.data) ? json.data[0] : null;
|
||||
return row ?? null;
|
||||
}
|
||||
|
||||
async downloadRecording(
|
||||
apiToken: string,
|
||||
recordingId: string,
|
||||
): Promise<{ buffer: ArrayBuffer; contentType: string; filename: string }> {
|
||||
const url = new URL(`${BASE_URL}/GetCallRecording`);
|
||||
url.searchParams.set('recordingId', recordingId);
|
||||
const res = await fetch(url.toString(), {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: `Bearer ${apiToken}`,
|
||||
Accept: '*/*',
|
||||
'User-Agent': 'MontactCRM-VoIP/1.0',
|
||||
},
|
||||
signal: AbortSignal.timeout(60000),
|
||||
redirect: 'follow',
|
||||
});
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => '');
|
||||
throw new Error(
|
||||
`دانلود ضبط دفتر شما ناموفق بود (${res.status})${text ? `: ${text.slice(0, 160)}` : ''}`,
|
||||
);
|
||||
}
|
||||
const contentLength = Number(res.headers.get('content-length') || 0);
|
||||
if (contentLength > MAX_AUDIO_BYTES) {
|
||||
throw new Error('حجم فایل ضبط بیش از حد مجاز است');
|
||||
}
|
||||
const buffer = await res.arrayBuffer();
|
||||
if (buffer.byteLength > MAX_AUDIO_BYTES) {
|
||||
throw new Error('حجم فایل ضبط بیش از حد مجاز است');
|
||||
}
|
||||
if (!buffer.byteLength) {
|
||||
throw new Error('فایل ضبط خالی است');
|
||||
}
|
||||
const contentType =
|
||||
res.headers.get('content-type')?.split(';')[0]?.trim() || 'audio/wav';
|
||||
const filename = `daftareshoma-${recordingId}.wav`;
|
||||
return { buffer, contentType, filename };
|
||||
}
|
||||
}
|
||||
@@ -1,168 +0,0 @@
|
||||
import type { VoipWebhookEvent } from '@mento/shared';
|
||||
|
||||
/** پیشوند ذخیره‌شده در recordingUrl برای واکشی بعدی با توکن API */
|
||||
export const DAFTARESHOMA_RECORDING_PREFIX = 'daftareshoma-recording:';
|
||||
|
||||
export function daftareshomaRecordingRef(recordingId: string): string {
|
||||
return `${DAFTARESHOMA_RECORDING_PREFIX}${recordingId}`;
|
||||
}
|
||||
|
||||
export function parseDaftaresomaRecordingRef(
|
||||
value: string | null | undefined,
|
||||
): string | null {
|
||||
const raw = String(value ?? '').trim();
|
||||
if (!raw.startsWith(DAFTARESHOMA_RECORDING_PREFIX)) return null;
|
||||
const id = raw.slice(DAFTARESHOMA_RECORDING_PREFIX.length).trim();
|
||||
return id || null;
|
||||
}
|
||||
|
||||
type Loose = Record<string, unknown>;
|
||||
|
||||
function str(v: unknown): string {
|
||||
return v == null ? '' : String(v).trim();
|
||||
}
|
||||
|
||||
function pick(obj: Loose, ...keys: string[]): string {
|
||||
for (const k of keys) {
|
||||
const v = str(obj[k]);
|
||||
if (v) return v;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function parseDurationSec(raw: unknown): number | undefined {
|
||||
if (raw == null || raw === '') return undefined;
|
||||
if (typeof raw === 'number' && Number.isFinite(raw)) {
|
||||
return Math.max(0, Math.round(raw));
|
||||
}
|
||||
const s = String(raw).trim();
|
||||
if (!s) return undefined;
|
||||
if (/^\d+(\.\d+)?$/.test(s)) return Math.max(0, Math.round(Number(s)));
|
||||
const parts = s.split(':').map((p) => Number(p));
|
||||
if (parts.some((n) => !Number.isFinite(n))) return undefined;
|
||||
if (parts.length === 3) {
|
||||
return Math.max(0, Math.round(parts[0]! * 3600 + parts[1]! * 60 + parts[2]!));
|
||||
}
|
||||
if (parts.length === 2) {
|
||||
return Math.max(0, Math.round(parts[0]! * 60 + parts[1]!));
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* رویداد وب‌هوک دفتر شما را به VoipWebhookEvent تبدیل می‌کند.
|
||||
* اگر payload از قبل فرمت Montact باشد، همان را برمی‌گرداند.
|
||||
*/
|
||||
export function mapDaftaresomaWebhook(
|
||||
body: unknown,
|
||||
): VoipWebhookEvent | null {
|
||||
if (!body || typeof body !== 'object') return null;
|
||||
const obj = body as Loose;
|
||||
|
||||
const legacyCallId = pick(obj, 'callId');
|
||||
if (legacyCallId && (obj.direction || obj.status || obj.from || obj.to)) {
|
||||
return body as VoipWebhookEvent;
|
||||
}
|
||||
|
||||
const eventType = pick(obj, 'EventType', 'eventType', 'event');
|
||||
const callId = pick(obj, 'CallId', 'callId', 'Id', 'id');
|
||||
if (!callId) return null;
|
||||
|
||||
const caller = pick(
|
||||
obj,
|
||||
'CallerNumber',
|
||||
'callerNumber',
|
||||
'from',
|
||||
'From',
|
||||
'fromNumber',
|
||||
);
|
||||
/** خط سازمانی که تماس روی آن آمده/رفته */
|
||||
const lineExtension =
|
||||
pick(obj, 'CalleeExtension', 'calleeExtension', 'Extension', 'extension') ||
|
||||
undefined;
|
||||
/** مقصد انتقال / شماره طرف مقابل روی خط */
|
||||
const transferred = pick(
|
||||
obj,
|
||||
'TransferredToNumber',
|
||||
'transferredToNumber',
|
||||
);
|
||||
|
||||
const startedAt =
|
||||
pick(obj, 'StartDateTime', 'startDateTime', 'startedAt') || undefined;
|
||||
const endedAt =
|
||||
pick(obj, 'EndDateTime', 'endDateTime', 'endedAt', 'DateTime') ||
|
||||
undefined;
|
||||
const durationSec = parseDurationSec(
|
||||
obj.DurationInSeconds ?? obj.durationInSeconds ?? obj.durationSec,
|
||||
);
|
||||
|
||||
const lower = eventType.toLowerCase();
|
||||
const isOutbound = lower.includes('outgoing') || lower.includes('outbound');
|
||||
const isStarted =
|
||||
lower.includes('started') ||
|
||||
lower.includes('ringing') ||
|
||||
lower.includes('transferstarted');
|
||||
const isEnded =
|
||||
lower.includes('ended') ||
|
||||
lower.includes('completed') ||
|
||||
lower.includes('hangup');
|
||||
|
||||
let status: string = 'completed';
|
||||
if (isStarted && !isEnded) {
|
||||
status = 'ringing';
|
||||
} else if (isEnded) {
|
||||
const result = obj.Result ?? obj.result;
|
||||
if (result === false || result === 'false' || result === 0) {
|
||||
status = durationSec && durationSec > 0 ? 'completed' : 'missed';
|
||||
} else if (result === true || result === 'true' || result === 1) {
|
||||
status = 'completed';
|
||||
} else {
|
||||
status = 'completed';
|
||||
}
|
||||
}
|
||||
|
||||
const recordingId = pick(
|
||||
obj,
|
||||
'RecordingId',
|
||||
'recordingId',
|
||||
'RecordId',
|
||||
'recordId',
|
||||
);
|
||||
|
||||
// inbound: from=مشتری، to=همکار/مقصد انتقال یا خود خط
|
||||
// outbound: from=همکار، to=مشتری (TransferredToNumber)
|
||||
let from = caller || undefined;
|
||||
let to: string | undefined;
|
||||
if (isOutbound) {
|
||||
to = transferred || undefined;
|
||||
} else {
|
||||
to = transferred || lineExtension || undefined;
|
||||
}
|
||||
|
||||
const event: VoipWebhookEvent = {
|
||||
callId,
|
||||
direction: isOutbound ? 'outbound' : 'inbound',
|
||||
status,
|
||||
from,
|
||||
to,
|
||||
lineExtension,
|
||||
startedAt,
|
||||
endedAt,
|
||||
durationSec,
|
||||
caller: from,
|
||||
callee: to,
|
||||
};
|
||||
if (recordingId) {
|
||||
event.recordingUrl = daftareshomaRecordingRef(recordingId);
|
||||
}
|
||||
return event;
|
||||
}
|
||||
|
||||
export function isDaftaresomaWebhookPayload(body: unknown): boolean {
|
||||
if (!body || typeof body !== 'object') return false;
|
||||
const obj = body as Loose;
|
||||
return Boolean(
|
||||
pick(obj, 'EventType', 'eventType') ||
|
||||
(pick(obj, 'CallId') && pick(obj, 'CallerNumber', 'callerNumber')),
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
import {
|
||||
IsBoolean,
|
||||
IsIn,
|
||||
IsOptional,
|
||||
IsString,
|
||||
MaxLength,
|
||||
@@ -13,10 +12,6 @@ export class CreateVoipConnectionDto {
|
||||
@MaxLength(80)
|
||||
label!: string;
|
||||
|
||||
@IsOptional()
|
||||
@IsIn(['generic', 'daftareshoma'])
|
||||
provider?: 'generic' | 'daftareshoma';
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
@MaxLength(200)
|
||||
@@ -27,21 +22,6 @@ export class CreateVoipConnectionDto {
|
||||
@MaxLength(500)
|
||||
clickToCallUrl?: string | null;
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
@MaxLength(500)
|
||||
apiToken?: string;
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
@MaxLength(40)
|
||||
fromNumber?: string | null;
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
@MaxLength(40)
|
||||
callerExtension?: string | null;
|
||||
|
||||
@IsOptional()
|
||||
@IsBoolean()
|
||||
enabled?: boolean;
|
||||
@@ -64,21 +44,6 @@ export class UpdateVoipConnectionDto {
|
||||
@MaxLength(500)
|
||||
clickToCallUrl?: string | null;
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
@MaxLength(500)
|
||||
apiToken?: string | null;
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
@MaxLength(40)
|
||||
fromNumber?: string | null;
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
@MaxLength(40)
|
||||
callerExtension?: string | null;
|
||||
|
||||
@IsOptional()
|
||||
@IsBoolean()
|
||||
enabled?: boolean;
|
||||
|
||||
@@ -18,31 +18,17 @@ export class SttClientService {
|
||||
throw new ServiceUnavailableException('سرویس تبدیل گفتار فعال نیست');
|
||||
}
|
||||
|
||||
const timeoutMs = Number(
|
||||
this.config.get<string>('STT_TIMEOUT_MS') || 180000,
|
||||
);
|
||||
const audio = await this.downloadAudio(recordingUrl, timeoutMs);
|
||||
return this.transcribeAudio(audio, timeoutMs);
|
||||
}
|
||||
|
||||
async transcribeAudio(
|
||||
audio: { buffer: ArrayBuffer; contentType: string; filename: string },
|
||||
timeoutMs?: number,
|
||||
): Promise<string> {
|
||||
if (!this.isEnabled()) {
|
||||
throw new ServiceUnavailableException('سرویس تبدیل گفتار فعال نیست');
|
||||
}
|
||||
|
||||
const baseUrl = this.config.get<string>('STT_URL')?.trim();
|
||||
if (!baseUrl) {
|
||||
throw new ServiceUnavailableException('آدرس سرویس STT تنظیم نشده');
|
||||
}
|
||||
|
||||
const waitMs = timeoutMs ?? Number(
|
||||
const timeoutMs = Number(
|
||||
this.config.get<string>('STT_TIMEOUT_MS') || 180000,
|
||||
);
|
||||
const token = this.config.get<string>('STT_INTERNAL_TOKEN')?.trim() || '';
|
||||
|
||||
const audio = await this.downloadAudio(recordingUrl, timeoutMs);
|
||||
const form = new FormData();
|
||||
const blob = new Blob([new Uint8Array(audio.buffer)], {
|
||||
type: audio.contentType,
|
||||
@@ -53,7 +39,7 @@ export class SttClientService {
|
||||
if (token) headers['X-STT-Token'] = token;
|
||||
|
||||
const controller = new AbortController();
|
||||
const timer = setTimeout(() => controller.abort(), waitMs);
|
||||
const timer = setTimeout(() => controller.abort(), timeoutMs);
|
||||
try {
|
||||
const res = await fetch(`${baseUrl.replace(/\/$/, '')}/transcribe`, {
|
||||
method: 'POST',
|
||||
|
||||
@@ -28,10 +28,6 @@ import {
|
||||
UpdateVoipConnectionDto,
|
||||
VoipClickToCallDto,
|
||||
} from './dto';
|
||||
import {
|
||||
isDaftaresomaWebhookPayload,
|
||||
mapDaftaresomaWebhook,
|
||||
} from './daftareshoma-webhook';
|
||||
|
||||
@Controller('integrations/voip')
|
||||
@UseGuards(JwtAuthGuard, RolesGuard, OrgModuleGuard)
|
||||
@@ -82,16 +78,8 @@ export class VoipController {
|
||||
recent(
|
||||
@CurrentUser() user: { organizationId: string },
|
||||
@Query('connectionId') connectionId?: string,
|
||||
@Query('direction') direction?: string,
|
||||
@Query('status') status?: string,
|
||||
@Query('lineExtension') lineExtension?: string,
|
||||
) {
|
||||
return this.calls.listRecent(user.organizationId, {
|
||||
connectionId,
|
||||
direction,
|
||||
status,
|
||||
lineExtension,
|
||||
});
|
||||
return this.calls.listRecent(user.organizationId, connectionId);
|
||||
}
|
||||
|
||||
@Post('click-to-call')
|
||||
@@ -141,21 +129,11 @@ export class VoipWebhookController {
|
||||
if (!ok) throw new UnauthorizedException('امضای وب‌هوک نامعتبر است');
|
||||
}
|
||||
|
||||
let event: VoipWebhookEvent | null = null;
|
||||
if (
|
||||
row.provider === 'daftareshoma' ||
|
||||
isDaftaresomaWebhookPayload(body)
|
||||
) {
|
||||
event = mapDaftaresomaWebhook(body);
|
||||
} else if (body?.callId) {
|
||||
event = body;
|
||||
}
|
||||
|
||||
if (!event?.callId) {
|
||||
if (!body?.callId) {
|
||||
return { ok: false, error: 'callId required' };
|
||||
}
|
||||
|
||||
const result = await this.calls.ingestWebhook(connectionId, event);
|
||||
const result = await this.calls.ingestWebhook(connectionId, body);
|
||||
return { ok: true, ...result };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,6 @@ import { TahesabCryptoService } from '../tahesab/tahesab-crypto.service';
|
||||
import { CallSummaryService } from './call-summary.service';
|
||||
import { VoipConnectionsService } from './connections.service';
|
||||
import { VoipCallsService } from './calls.service';
|
||||
import { DaftaresomaClient } from './daftareshoma-client';
|
||||
import { SttClientService } from './stt-client.service';
|
||||
import { VoipController, VoipWebhookController } from './voip.controller';
|
||||
|
||||
@@ -18,7 +17,6 @@ import { VoipController, VoipWebhookController } from './voip.controller';
|
||||
TahesabCryptoService,
|
||||
VoipConnectionsService,
|
||||
VoipCallsService,
|
||||
DaftaresomaClient,
|
||||
SttClientService,
|
||||
CallSummaryService,
|
||||
],
|
||||
|
||||
@@ -246,11 +246,7 @@ export class LeadsController {
|
||||
@Query('source') source?: string,
|
||||
@Query('unassigned') unassigned?: string,
|
||||
@Query('archived') archived?: string,
|
||||
@Query('converted') converted?: string,
|
||||
@Query('hasMobile') hasMobile?: string,
|
||||
@Query('followUp') followUp?: string,
|
||||
@Query('createdFrom') createdFrom?: string,
|
||||
@Query('createdTo') createdTo?: string,
|
||||
) {
|
||||
return this.leads.listIds(user, {
|
||||
q,
|
||||
@@ -262,11 +258,7 @@ export class LeadsController {
|
||||
source,
|
||||
unassigned: unassigned === '1' || unassigned === 'true',
|
||||
archived: archived === '1' || archived === 'true',
|
||||
converted: converted === '1' || converted === 'true',
|
||||
hasMobile: hasMobile === '1' || hasMobile === 'true',
|
||||
followUp,
|
||||
createdFrom,
|
||||
createdTo,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -284,12 +276,8 @@ export class LeadsController {
|
||||
@Query('source') source?: string,
|
||||
@Query('unassigned') unassigned?: string,
|
||||
@Query('archived') archived?: string,
|
||||
@Query('converted') converted?: string,
|
||||
@Query('sort') sort?: string,
|
||||
@Query('hasMobile') hasMobile?: string,
|
||||
@Query('followUp') followUp?: string,
|
||||
@Query('createdFrom') createdFrom?: string,
|
||||
@Query('createdTo') createdTo?: string,
|
||||
) {
|
||||
return this.leads.list(user, {
|
||||
q,
|
||||
@@ -303,12 +291,8 @@ export class LeadsController {
|
||||
source,
|
||||
unassigned: unassigned === '1' || unassigned === 'true',
|
||||
archived: archived === '1' || archived === 'true',
|
||||
converted: converted === '1' || converted === 'true',
|
||||
sort,
|
||||
hasMobile: hasMobile === '1' || hasMobile === 'true',
|
||||
followUp,
|
||||
createdFrom,
|
||||
createdTo,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -49,12 +49,6 @@ import { StorageQuotaService } from '../billing/storage-quota.service';
|
||||
import { LeadStagesService } from './lead-stages.service';
|
||||
import { buildSearchWhere, ci } from '../common/search';
|
||||
import { GamificationService } from '../gamification/gamification.service';
|
||||
import {
|
||||
addDays,
|
||||
isDayKey,
|
||||
tehranDayKey,
|
||||
tehranDayStart,
|
||||
} from '../routines/routine-dates';
|
||||
|
||||
const LOGO_MAX_BYTES = 2 * 1024 * 1024;
|
||||
const LOGO_EXT: Record<string, string> = {
|
||||
@@ -148,11 +142,7 @@ export class LeadsService {
|
||||
source?: string;
|
||||
unassigned?: boolean;
|
||||
archived?: boolean;
|
||||
converted?: boolean;
|
||||
hasMobile?: boolean;
|
||||
followUp?: string;
|
||||
createdFrom?: string;
|
||||
createdTo?: string;
|
||||
},
|
||||
): Prisma.LeadWhereInput {
|
||||
const search = buildSearchWhere<Prisma.LeadWhereInput>(opts.q, (t) => [
|
||||
@@ -171,77 +161,22 @@ export class LeadsService {
|
||||
if (opts.hasMobile) {
|
||||
and.push({ mobile: { not: '' } });
|
||||
}
|
||||
const follow = this.followUpWhere(opts.followUp);
|
||||
if (follow) and.push(follow);
|
||||
const createdRange = this.createdAtWhere(opts.createdFrom, opts.createdTo);
|
||||
if (createdRange) and.push(createdRange);
|
||||
return {
|
||||
AND: [
|
||||
{
|
||||
organizationId: actor.organizationId,
|
||||
...leadAccessWhere(actor),
|
||||
archivedAt: opts.archived ? { not: null } : null,
|
||||
...(opts.converted ? { convertedPersonId: { not: null } } : {}),
|
||||
...(opts.stageId ? { stageId: opts.stageId } : {}),
|
||||
...(opts.city ? { city: { contains: opts.city, mode: 'insensitive' } } : {}),
|
||||
...(opts.region
|
||||
? { region: { contains: opts.region, mode: 'insensitive' } }
|
||||
: {}),
|
||||
...(opts.trade ? { trade: { contains: opts.trade, mode: 'insensitive' } } : {}),
|
||||
...(opts.source
|
||||
? { source: { contains: opts.source, mode: 'insensitive' } }
|
||||
: {}),
|
||||
},
|
||||
...(opts.unassigned ? [{ assigneeId: null }] : []),
|
||||
...(opts.assigneeId && !opts.unassigned ? [{ assigneeId: opts.assigneeId }] : []),
|
||||
...and,
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
/** مرز روز به وقت تهران برای فیلترهای «امروز». */
|
||||
private tehranDayBounds(day = tehranDayKey()) {
|
||||
const start = tehranDayStart(day);
|
||||
const end = tehranDayStart(addDays(day, 1));
|
||||
return { start, end };
|
||||
}
|
||||
|
||||
private followUpWhere(followUp?: string): Prisma.LeadWhereInput | null {
|
||||
if (!followUp) return null;
|
||||
const { start, end } = this.tehranDayBounds();
|
||||
switch (followUp) {
|
||||
case 'due_today':
|
||||
return { nextFollowUpAt: { gte: start, lt: end } };
|
||||
case 'overdue':
|
||||
return { nextFollowUpAt: { not: null, lt: start } };
|
||||
case 'called_today':
|
||||
return { lastContactAt: { gte: start, lt: end } };
|
||||
case 'missed_today':
|
||||
return {
|
||||
nextFollowUpAt: { not: null, lt: end },
|
||||
OR: [{ lastContactAt: null }, { lastContactAt: { lt: start } }],
|
||||
};
|
||||
case 'no_follow_up':
|
||||
return { nextFollowUpAt: null };
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
private createdAtWhere(
|
||||
createdFrom?: string,
|
||||
createdTo?: string,
|
||||
): Prisma.LeadWhereInput | null {
|
||||
const from = isDayKey(createdFrom) ? tehranDayStart(createdFrom) : null;
|
||||
const to = isDayKey(createdTo)
|
||||
? tehranDayStart(addDays(createdTo, 1))
|
||||
: null;
|
||||
if (!from && !to) return null;
|
||||
return {
|
||||
createdAt: {
|
||||
...(from ? { gte: from } : {}),
|
||||
...(to ? { lt: to } : {}),
|
||||
},
|
||||
organizationId: actor.organizationId,
|
||||
...leadAccessWhere(actor),
|
||||
archivedAt: opts.archived ? { not: null } : null,
|
||||
...(opts.stageId ? { stageId: opts.stageId } : {}),
|
||||
...(opts.assigneeId ? { assigneeId: opts.assigneeId } : {}),
|
||||
...(opts.unassigned ? { assigneeId: null } : {}),
|
||||
...(opts.city ? { city: { contains: opts.city, mode: 'insensitive' } } : {}),
|
||||
...(opts.region
|
||||
? { region: { contains: opts.region, mode: 'insensitive' } }
|
||||
: {}),
|
||||
...(opts.trade ? { trade: { contains: opts.trade, mode: 'insensitive' } } : {}),
|
||||
...(opts.source
|
||||
? { source: { contains: opts.source, mode: 'insensitive' } }
|
||||
: {}),
|
||||
...(and.length ? { AND: and } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -259,12 +194,8 @@ export class LeadsService {
|
||||
source?: string;
|
||||
unassigned?: boolean;
|
||||
archived?: boolean;
|
||||
converted?: boolean;
|
||||
sort?: string;
|
||||
hasMobile?: boolean;
|
||||
followUp?: string;
|
||||
createdFrom?: string;
|
||||
createdTo?: string;
|
||||
},
|
||||
): Promise<PaginatedResponse<LeadDto>> {
|
||||
await this.stages.ensureDefaults(actor.organizationId);
|
||||
@@ -312,11 +243,7 @@ export class LeadsService {
|
||||
source?: string;
|
||||
unassigned?: boolean;
|
||||
archived?: boolean;
|
||||
converted?: boolean;
|
||||
hasMobile?: boolean;
|
||||
followUp?: string;
|
||||
createdFrom?: string;
|
||||
createdTo?: string;
|
||||
},
|
||||
max = FILTERED_IDS_MAX,
|
||||
): Promise<FilteredIdsResponse> {
|
||||
@@ -1189,7 +1116,7 @@ export class LeadsService {
|
||||
newStage
|
||||
? this.prisma.lead.count({ where: { ...base, stageId: newStage.id } })
|
||||
: Promise.resolve(0),
|
||||
this.prisma.lead.count({ where: { AND: [base, { assigneeId: null }] } }),
|
||||
this.prisma.lead.count({ where: { ...base, assigneeId: null } }),
|
||||
convertedIds.length
|
||||
? this.prisma.lead.count({
|
||||
where: { ...base, stageId: { in: convertedIds } },
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import {
|
||||
BadRequestException,
|
||||
ForbiddenException,
|
||||
Injectable,
|
||||
NotFoundException,
|
||||
@@ -71,16 +70,6 @@ export class MembershipsService {
|
||||
}));
|
||||
}
|
||||
|
||||
/** هر محیط یک مالک فعال دارد: همان کسی که محیط را ثبت کرده. */
|
||||
async assertSoleOwner(organizationId: string, userId: string) {
|
||||
const others = await this.countActiveOwners(organizationId, userId);
|
||||
if (others > 0) {
|
||||
throw new BadRequestException(
|
||||
'هر محیط فقط یک مالک دارد و مالک همان کسی است که ثبت‌نام کرده. برای دسترسی کامل نقش مدیر را انتخاب کنید.',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async createMembership(data: {
|
||||
userId: string;
|
||||
organizationId: string;
|
||||
@@ -89,9 +78,6 @@ export class MembershipsService {
|
||||
commissionPercent?: number;
|
||||
isActive?: boolean;
|
||||
}) {
|
||||
if (data.role === 'owner' && data.isActive !== false) {
|
||||
await this.assertSoleOwner(data.organizationId, data.userId);
|
||||
}
|
||||
return this.prisma.membership.create({
|
||||
data: {
|
||||
userId: data.userId,
|
||||
|
||||
@@ -31,11 +31,8 @@ export class PipelinesController {
|
||||
constructor(private readonly pipelinesService: PipelinesService) {}
|
||||
|
||||
@Get()
|
||||
list(
|
||||
@CurrentUser() user: Actor,
|
||||
@Query('forLens') forLens?: string,
|
||||
) {
|
||||
return this.pipelinesService.list(user, forLens === '1');
|
||||
list(@CurrentUser() user: { organizationId: string }) {
|
||||
return this.pipelinesService.list(user.organizationId);
|
||||
}
|
||||
|
||||
@Get('board')
|
||||
|
||||
@@ -102,55 +102,24 @@ export class PipelinesService {
|
||||
return this.toPipelineDto(created);
|
||||
}
|
||||
|
||||
async list(actorOrOrgId: Actor | string, forLens = false): Promise<PipelineDto[]> {
|
||||
const organizationId =
|
||||
typeof actorOrOrgId === 'string' ? actorOrOrgId : actorOrOrgId.organizationId;
|
||||
const actor = typeof actorOrOrgId === 'string' ? undefined : actorOrOrgId;
|
||||
async list(organizationId: string): Promise<PipelineDto[]> {
|
||||
await this.ensureDefaultPipeline(organizationId);
|
||||
const rows = await this.prisma.pipeline.findMany({
|
||||
where: { organizationId },
|
||||
include: { stages: { orderBy: { position: 'asc' } } },
|
||||
orderBy: [{ isDefault: 'desc' }, { name: 'asc' }],
|
||||
});
|
||||
const lens = actor?.priorLens;
|
||||
const lensActive = forLens && (lens === 'current' || lens === 'archive');
|
||||
const access = actor ? dealAccessWhere(actor) : {};
|
||||
const prior = lensActive
|
||||
? dealPriorWhere(actor?.priorLens, actor?.priorCutoff)
|
||||
: {};
|
||||
const [counts, lensCounts] = await Promise.all([
|
||||
this.prisma.deal.groupBy({
|
||||
by: ['pipelineId'],
|
||||
where: lensActive ? { organizationId, AND: [access] } : { organizationId },
|
||||
_count: { _all: true },
|
||||
}),
|
||||
lensActive
|
||||
? this.prisma.deal.groupBy({
|
||||
by: ['pipelineId'],
|
||||
where: { organizationId, AND: [access, prior] },
|
||||
_count: { _all: true },
|
||||
})
|
||||
: Promise.resolve([]),
|
||||
]);
|
||||
const counts = await this.prisma.deal.groupBy({
|
||||
by: ['pipelineId'],
|
||||
where: { organizationId },
|
||||
_count: { _all: true },
|
||||
});
|
||||
const dealCountByPipeline = new Map(
|
||||
counts.map((row) => [row.pipelineId, row._count._all]),
|
||||
);
|
||||
const lensCountByPipeline = new Map(
|
||||
lensCounts.map((row) => [row.pipelineId, row._count._all]),
|
||||
);
|
||||
const visible = lensActive
|
||||
? rows.filter((row) => {
|
||||
const inLens = lensCountByPipeline.get(row.id) ?? 0;
|
||||
const total = dealCountByPipeline.get(row.id) ?? 0;
|
||||
if (lens === 'archive') return inLens > 0;
|
||||
return inLens > 0 || total === 0;
|
||||
})
|
||||
: rows;
|
||||
return visible.map((row) => ({
|
||||
return rows.map((row) => ({
|
||||
...this.toPipelineDto(row),
|
||||
dealCount: lensActive
|
||||
? (lensCountByPipeline.get(row.id) ?? 0)
|
||||
: (dealCountByPipeline.get(row.id) ?? 0),
|
||||
dealCount: dealCountByPipeline.get(row.id) ?? 0,
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ import {
|
||||
MinLength,
|
||||
ValidateIf,
|
||||
} from 'class-validator';
|
||||
import { PRODUCT_PLAN_CODES, USER_ROLES, type ProductPlanCode, type UserRole } from '@mento/shared';
|
||||
import { USER_ROLES, type UserRole } from '@mento/shared';
|
||||
|
||||
export class PlatformLoginDto {
|
||||
@IsString()
|
||||
@@ -189,11 +189,6 @@ export class SetStorageQuotaDto {
|
||||
quotaGb!: number | null;
|
||||
}
|
||||
|
||||
export class ApplyProductPlanDto {
|
||||
@IsIn(PRODUCT_PLAN_CODES)
|
||||
planCode!: ProductPlanCode;
|
||||
}
|
||||
|
||||
export class UpdateOrgModulesDto {
|
||||
@IsArray()
|
||||
@IsString({ each: true })
|
||||
|
||||
@@ -13,7 +13,6 @@ import {
|
||||
import { CurrentUser } from '../auth/current-user.decorator';
|
||||
import {
|
||||
ApplyBillingPlanDto,
|
||||
ApplyProductPlanDto,
|
||||
SetStorageQuotaDto,
|
||||
SetUserCapDto,
|
||||
CreatePlatformAdminDto,
|
||||
@@ -169,11 +168,6 @@ export class PlatformController {
|
||||
return this.platform.setUserCap(id, dto.maxUsers);
|
||||
}
|
||||
|
||||
@Post('organizations/:id/product-plan')
|
||||
applyProductPlan(@Param('id') id: string, @Body() dto: ApplyProductPlanDto) {
|
||||
return this.platform.applyProductPlan(id, dto.planCode);
|
||||
}
|
||||
|
||||
@Patch('organizations/:id/modules')
|
||||
updateOrganizationModules(
|
||||
@Param('id') id: string,
|
||||
|
||||
@@ -9,7 +9,6 @@ import type {
|
||||
PlatformOrganizationDto,
|
||||
PlatformStatsDto,
|
||||
PlatformUserDto,
|
||||
ProductPlanCode,
|
||||
UserRole,
|
||||
} from '@mento/shared';
|
||||
import { isBusinessField } from '@mento/shared';
|
||||
@@ -473,16 +472,6 @@ export class PlatformService {
|
||||
return this.getUser(userId);
|
||||
}
|
||||
|
||||
async applyProductPlan(id: string, planCode: ProductPlanCode) {
|
||||
const existing = await this.prisma.organization.findUnique({
|
||||
where: { id },
|
||||
select: { id: true },
|
||||
});
|
||||
if (!existing) throw new NotFoundException('محیط پیدا نشد');
|
||||
await this.billing.applyProductPlan(id, planCode);
|
||||
return this.getOrganization(id);
|
||||
}
|
||||
|
||||
async updateOrganizationModules(id: string, dto: UpdateOrgModulesDto) {
|
||||
const existing = await this.prisma.organization.findUnique({
|
||||
where: { id },
|
||||
@@ -543,9 +532,6 @@ export class PlatformService {
|
||||
});
|
||||
if (!row) throw new NotFoundException('عضویت پیدا نشد');
|
||||
if (isActive && !row.isActive) {
|
||||
if (row.role === 'owner') {
|
||||
await this.memberships.assertSoleOwner(row.organizationId, row.userId);
|
||||
}
|
||||
await this.billing.assertSeatAvailable(row.organizationId, row.userId);
|
||||
}
|
||||
if (!isActive && row.role === 'owner') {
|
||||
@@ -576,9 +562,6 @@ export class PlatformService {
|
||||
});
|
||||
if (!row) throw new NotFoundException('عضویت پیدا نشد');
|
||||
|
||||
if (role === 'owner' && row.role !== 'owner') {
|
||||
await this.memberships.assertSoleOwner(row.organizationId, row.userId);
|
||||
}
|
||||
if (row.role === 'owner' && role !== 'owner') {
|
||||
const owners = await this.memberships.countActiveOwners(
|
||||
row.organizationId,
|
||||
@@ -586,7 +569,7 @@ export class PlatformService {
|
||||
);
|
||||
if (owners < 1) {
|
||||
throw new BadRequestException(
|
||||
'مالک محیط همان کسی است که ثبت‌نام کرده و نمی‌توان نقش او را عوض کرد',
|
||||
'حداقل یک مالک برای سازمان لازم است؛ ابتدا مالک دیگری تعیین کنید',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,6 @@ import {
|
||||
} from '@mento/shared';
|
||||
import { Prisma } from '@prisma/client';
|
||||
import { PrismaService } from '../prisma/prisma.service';
|
||||
import { customersPersonWhere } from '../common/data-access';
|
||||
import {
|
||||
type Actor,
|
||||
assigneeWhere,
|
||||
@@ -55,7 +54,7 @@ export class ReportsService {
|
||||
const invoiceScope = ownerWhere(actor, 'finance');
|
||||
const activityScope = assigneeWhere(actor);
|
||||
const ticketScope = ticketAccessWhere(actor);
|
||||
const personScope = customersPersonWhere(actor);
|
||||
const personScope = elevated(actor.role) ? {} : { ownerId: actor.userId };
|
||||
|
||||
const durationMs = end.getTime() - start.getTime();
|
||||
const prevEnd = new Date(start.getTime() - 1);
|
||||
@@ -1534,8 +1533,9 @@ export class ReportsService {
|
||||
async home(actor: Actor): Promise<HomeDashboardDto> {
|
||||
const orgId = actor.organizationId;
|
||||
const dealScope = ownerWhere(actor, 'deals');
|
||||
const invoiceScope = ownerWhere(actor, 'finance');
|
||||
const activityScope = assigneeWhere(actor);
|
||||
const personScope = customersPersonWhere(actor);
|
||||
const personScope = elevated(actor.role) ? {} : { ownerId: actor.userId };
|
||||
const rates = await loadOrgRates(this.prisma, orgId);
|
||||
const now = new Date();
|
||||
const { jy, jm } = dateToJalali(now);
|
||||
@@ -1544,6 +1544,7 @@ export class ReportsService {
|
||||
const prev = addJalaliMonths(jy, jm, -1);
|
||||
const prevMonthStart = startOfJalaliMonth(prev.jy, prev.jm);
|
||||
const prevMonthEnd = endOfJalaliMonth(prev.jy, prev.jm);
|
||||
const trendWindowStart = addMonthsStart(now, -12);
|
||||
|
||||
const todayStart = startOfDay(now);
|
||||
const todayEnd = endOfDay(now);
|
||||
@@ -1556,17 +1557,25 @@ export class ReportsService {
|
||||
const dealsPrior = dealPriorWhere(actor.priorLens, actor.priorCutoff);
|
||||
const activitiesPrior = activityPriorWhere(actor.priorLens, actor.priorCutoff);
|
||||
|
||||
const invoiceStatuses: Array<'issued' | 'partially_paid' | 'paid'> = [
|
||||
'issued',
|
||||
'partially_paid',
|
||||
'paid',
|
||||
];
|
||||
|
||||
const [
|
||||
wonDeals,
|
||||
openDeals,
|
||||
openDealRows,
|
||||
lostDeals,
|
||||
staleDeals,
|
||||
peopleCur,
|
||||
peoplePrev,
|
||||
peopleRecent,
|
||||
openActivitiesToday,
|
||||
openActivitiesYesterday,
|
||||
openDealsWeekAgo,
|
||||
goals,
|
||||
overdueCount,
|
||||
invoices,
|
||||
activityTypeGroups,
|
||||
] = await Promise.all([
|
||||
this.prisma.deal.findMany({
|
||||
where: {
|
||||
@@ -1574,7 +1583,7 @@ export class ReportsService {
|
||||
{
|
||||
organizationId: orgId,
|
||||
status: 'won',
|
||||
updatedAt: { gte: addMonthsStart(now, -5) },
|
||||
updatedAt: { gte: trendWindowStart },
|
||||
},
|
||||
dealScope,
|
||||
dealsPrior,
|
||||
@@ -1591,7 +1600,7 @@ export class ReportsService {
|
||||
person: { select: { id: true, firstName: true, lastName: true } },
|
||||
},
|
||||
}),
|
||||
this.prisma.deal.count({
|
||||
this.prisma.deal.findMany({
|
||||
where: {
|
||||
AND: [
|
||||
{ organizationId: orgId, status: 'open' },
|
||||
@@ -1599,6 +1608,30 @@ export class ReportsService {
|
||||
dealsPrior,
|
||||
],
|
||||
},
|
||||
select: {
|
||||
amount: true,
|
||||
currency: true,
|
||||
stageId: true,
|
||||
stage: { select: { id: true, name: true, position: true } },
|
||||
},
|
||||
}),
|
||||
this.prisma.deal.findMany({
|
||||
where: {
|
||||
AND: [
|
||||
{
|
||||
organizationId: orgId,
|
||||
status: 'lost',
|
||||
updatedAt: { gte: trendWindowStart },
|
||||
},
|
||||
dealScope,
|
||||
dealsPrior,
|
||||
],
|
||||
},
|
||||
select: {
|
||||
amount: true,
|
||||
currency: true,
|
||||
lostReason: true,
|
||||
},
|
||||
}),
|
||||
this.prisma.deal.findMany({
|
||||
where: {
|
||||
@@ -1625,19 +1658,13 @@ export class ReportsService {
|
||||
orderBy: { updatedAt: 'asc' },
|
||||
take: 5,
|
||||
}),
|
||||
this.prisma.person.count({
|
||||
this.prisma.person.findMany({
|
||||
where: {
|
||||
organizationId: orgId,
|
||||
...personScope,
|
||||
createdAt: { gte: curMonthStart, lte: curMonthEnd },
|
||||
},
|
||||
}),
|
||||
this.prisma.person.count({
|
||||
where: {
|
||||
organizationId: orgId,
|
||||
...personScope,
|
||||
createdAt: { gte: prevMonthStart, lte: prevMonthEnd },
|
||||
createdAt: { gte: trendWindowStart, lte: curMonthEnd },
|
||||
},
|
||||
select: { createdAt: true, importSource: true },
|
||||
}),
|
||||
this.prisma.activity.count({
|
||||
where: {
|
||||
@@ -1657,6 +1684,7 @@ export class ReportsService {
|
||||
AND: [
|
||||
{
|
||||
organizationId: orgId,
|
||||
status: 'open',
|
||||
dueAt: { gte: yesterdayStart, lte: yesterdayEnd },
|
||||
},
|
||||
activityScope,
|
||||
@@ -1698,8 +1726,67 @@ export class ReportsService {
|
||||
],
|
||||
},
|
||||
}),
|
||||
this.prisma.invoice.findMany({
|
||||
where: {
|
||||
organizationId: orgId,
|
||||
...invoiceScope,
|
||||
status: { in: invoiceStatuses },
|
||||
OR: [
|
||||
{ issuedAt: { gte: trendWindowStart, lte: curMonthEnd } },
|
||||
{ createdAt: { gte: trendWindowStart, lte: curMonthEnd } },
|
||||
],
|
||||
},
|
||||
select: {
|
||||
issuedAt: true,
|
||||
createdAt: true,
|
||||
lineItems: {
|
||||
select: {
|
||||
quantity: true,
|
||||
unitPrice: true,
|
||||
currency: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
this.prisma.activity.groupBy({
|
||||
by: ['type'],
|
||||
where: {
|
||||
AND: [
|
||||
{
|
||||
organizationId: orgId,
|
||||
status: 'open',
|
||||
},
|
||||
activityScope,
|
||||
activitiesPrior,
|
||||
],
|
||||
},
|
||||
_count: { _all: true },
|
||||
}),
|
||||
]);
|
||||
|
||||
const openDeals = openDealRows.length;
|
||||
|
||||
const invoiceInRange = (
|
||||
inv: { issuedAt: Date | null; createdAt: Date },
|
||||
from: Date,
|
||||
to: Date,
|
||||
) => {
|
||||
const anchor = inv.issuedAt ?? inv.createdAt;
|
||||
return anchor >= from && anchor <= to;
|
||||
};
|
||||
|
||||
const sumInvoiceInRange = (from: Date, to: Date) => {
|
||||
let amount = 0;
|
||||
for (const inv of invoices) {
|
||||
if (!invoiceInRange(inv, from, to)) continue;
|
||||
for (const line of inv.lineItems) {
|
||||
const lineTotal = Number(line.quantity) * Number(line.unitPrice);
|
||||
amount += toBaseAmount(lineTotal, line.currency, rates);
|
||||
}
|
||||
}
|
||||
return amount;
|
||||
};
|
||||
|
||||
const sumWonInRange = (start: Date, end: Date) =>
|
||||
wonDeals
|
||||
.filter((d) => d.updatedAt >= start && d.updatedAt <= end)
|
||||
@@ -1708,8 +1795,21 @@ export class ReportsService {
|
||||
0,
|
||||
);
|
||||
|
||||
const salesCur = sumWonInRange(curMonthStart, curMonthEnd);
|
||||
const salesPrev = sumWonInRange(prevMonthStart, prevMonthEnd);
|
||||
const salesInRange = (start: Date, end: Date) => {
|
||||
const inv = sumInvoiceInRange(start, end);
|
||||
const won = sumWonInRange(start, end);
|
||||
return Math.round(inv > 0 ? inv : won);
|
||||
};
|
||||
|
||||
const peopleCur = peopleRecent.filter(
|
||||
(p) => p.createdAt >= curMonthStart && p.createdAt <= curMonthEnd,
|
||||
).length;
|
||||
const peoplePrev = peopleRecent.filter(
|
||||
(p) => p.createdAt >= prevMonthStart && p.createdAt <= prevMonthEnd,
|
||||
).length;
|
||||
|
||||
const salesCur = salesInRange(curMonthStart, curMonthEnd);
|
||||
const salesPrev = salesInRange(prevMonthStart, prevMonthEnd);
|
||||
const targetAmount = goals.reduce(
|
||||
(acc, g) => acc + Number(g.targetAmount),
|
||||
0,
|
||||
@@ -1717,7 +1817,7 @@ export class ReportsService {
|
||||
|
||||
const trendMonths: Array<{ key: string; label: string; start: Date; end: Date }> =
|
||||
[];
|
||||
for (let i = 4; i >= 0; i -= 1) {
|
||||
for (let i = 11; i >= 0; i -= 1) {
|
||||
const m = addJalaliMonths(jy, jm, -i);
|
||||
trendMonths.push({
|
||||
key: `${m.jy}-${String(m.jm).padStart(2, '0')}`,
|
||||
@@ -1730,14 +1830,28 @@ export class ReportsService {
|
||||
const salesTrend = trendMonths.map((m) => ({
|
||||
monthKey: m.key,
|
||||
monthLabel: m.label,
|
||||
amount: Math.round(sumWonInRange(m.start, m.end)),
|
||||
amount: salesInRange(m.start, m.end),
|
||||
}));
|
||||
|
||||
const customerGrowth = trendMonths.map((m) => ({
|
||||
monthKey: m.key,
|
||||
monthLabel: m.label,
|
||||
value: peopleRecent.filter(
|
||||
(p) => p.createdAt >= m.start && p.createdAt <= m.end,
|
||||
).length,
|
||||
}));
|
||||
|
||||
const sourceMap = new Map<string, number>();
|
||||
for (const d of wonDeals) {
|
||||
const label = normalizeSource(d.source);
|
||||
for (const p of peopleRecent) {
|
||||
const label = normalizeImportSource(p.importSource);
|
||||
sourceMap.set(label, (sourceMap.get(label) ?? 0) + 1);
|
||||
}
|
||||
if (sourceMap.size === 0) {
|
||||
for (const d of wonDeals) {
|
||||
const label = normalizeSource(d.source);
|
||||
sourceMap.set(label, (sourceMap.get(label) ?? 0) + 1);
|
||||
}
|
||||
}
|
||||
const sourceTotal = [...sourceMap.values()].reduce((a, b) => a + b, 0) || 1;
|
||||
const sources = [...sourceMap.entries()]
|
||||
.map(([label, count]) => ({
|
||||
@@ -1781,6 +1895,101 @@ export class ReportsService {
|
||||
.slice(0, 5)
|
||||
.map((row, index) => ({ ...row, rank: index + 1 }));
|
||||
|
||||
const wonAmountAll = Math.round(
|
||||
wonDeals.reduce(
|
||||
(acc, d) => acc + decimalToBase(d.amount, d.currency, rates),
|
||||
0,
|
||||
),
|
||||
);
|
||||
const lostAmountAll = Math.round(
|
||||
lostDeals.reduce(
|
||||
(acc, d) => acc + decimalToBase(d.amount, d.currency, rates),
|
||||
0,
|
||||
),
|
||||
);
|
||||
const openAmountAll = Math.round(
|
||||
openDealRows.reduce(
|
||||
(acc, d) => acc + decimalToBase(d.amount, d.currency, rates),
|
||||
0,
|
||||
),
|
||||
);
|
||||
const closedCount = wonDeals.length + lostDeals.length;
|
||||
const winRate = closedCount
|
||||
? Math.round((wonDeals.length / closedCount) * 1000) / 10
|
||||
: 0;
|
||||
const salesSummary: HomeDashboardDto['salesSummary'] = {
|
||||
openCount: openDeals,
|
||||
wonCount: wonDeals.length,
|
||||
lostCount: lostDeals.length,
|
||||
openAmount: openAmountAll,
|
||||
wonAmount: wonAmountAll,
|
||||
lostAmount: lostAmountAll,
|
||||
winRate,
|
||||
};
|
||||
|
||||
const funnelMap = new Map<
|
||||
string,
|
||||
{ stageId: string; stageName: string; position: number; count: number; amount: number }
|
||||
>();
|
||||
for (const d of openDealRows) {
|
||||
const stageId = d.stage?.id ?? d.stageId ?? 'unknown';
|
||||
const stageName = d.stage?.name ?? 'بدون مرحله';
|
||||
const position = d.stage?.position ?? 999;
|
||||
const cur = funnelMap.get(stageId) ?? {
|
||||
stageId,
|
||||
stageName,
|
||||
position,
|
||||
count: 0,
|
||||
amount: 0,
|
||||
};
|
||||
cur.count += 1;
|
||||
cur.amount += decimalToBase(d.amount, d.currency, rates);
|
||||
funnelMap.set(stageId, cur);
|
||||
}
|
||||
const funnel = [...funnelMap.values()]
|
||||
.sort((a, b) => a.position - b.position)
|
||||
.slice(0, 8)
|
||||
.map((row) => ({
|
||||
stageId: row.stageId,
|
||||
stageName: row.stageName,
|
||||
count: row.count,
|
||||
amount: Math.round(row.amount),
|
||||
}));
|
||||
|
||||
const lostReasonMap = new Map<string, { count: number; amount: number }>();
|
||||
for (const d of lostDeals) {
|
||||
const label = normalizeLostReason(d.lostReason);
|
||||
const prevRow = lostReasonMap.get(label) ?? { count: 0, amount: 0 };
|
||||
prevRow.count += 1;
|
||||
prevRow.amount += decimalToBase(d.amount, d.currency, rates);
|
||||
lostReasonMap.set(label, prevRow);
|
||||
}
|
||||
const lostReasonTotal =
|
||||
[...lostReasonMap.values()].reduce((a, b) => a + b.count, 0) || 1;
|
||||
const lostReasons = [...lostReasonMap.entries()]
|
||||
.map(([label, row]) => ({
|
||||
label,
|
||||
count: row.count,
|
||||
amount: Math.round(row.amount),
|
||||
percent: Math.round((row.count / lostReasonTotal) * 1000) / 10,
|
||||
}))
|
||||
.sort((a, b) => b.count - a.count)
|
||||
.slice(0, 6);
|
||||
|
||||
const activityTypeLabel: Record<string, string> = {
|
||||
call: 'تماس',
|
||||
meeting: 'جلسه',
|
||||
task: 'کار',
|
||||
note: 'یادداشت',
|
||||
};
|
||||
const activityByType = activityTypeGroups
|
||||
.map((row) => ({
|
||||
type: row.type,
|
||||
label: activityTypeLabel[row.type] ?? row.type,
|
||||
count: row._count._all,
|
||||
}))
|
||||
.sort((a, b) => b.count - a.count);
|
||||
|
||||
const alerts: HomeDashboardDto['alerts'] = [];
|
||||
if (staleDeals.length) {
|
||||
const first = staleDeals[0]!;
|
||||
@@ -1858,11 +2067,30 @@ export class ReportsService {
|
||||
changePercent: pctChange(openActivitiesToday, openActivitiesYesterday),
|
||||
changeLabel: 'نسبت به دیروز',
|
||||
},
|
||||
{
|
||||
key: 'win-rate',
|
||||
label: 'نرخ برد',
|
||||
value: winRate,
|
||||
changePercent: null,
|
||||
changeLabel: '۱۲ ماه اخیر',
|
||||
},
|
||||
{
|
||||
key: 'overdue',
|
||||
label: 'عقب‌افتاده',
|
||||
value: overdueCount,
|
||||
changePercent: null,
|
||||
changeLabel: 'فعالیت باز',
|
||||
},
|
||||
],
|
||||
alerts,
|
||||
salesTrend,
|
||||
customerGrowth,
|
||||
sources,
|
||||
topCustomers,
|
||||
salesSummary,
|
||||
funnel,
|
||||
lostReasons,
|
||||
activityByType,
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1920,6 +2148,21 @@ function normalizeSource(raw: string | null | undefined): string {
|
||||
return map[value.toLowerCase()] ?? value;
|
||||
}
|
||||
|
||||
function normalizeImportSource(raw: string | null | undefined): string {
|
||||
const value = raw?.trim().toLowerCase();
|
||||
if (!value) return 'سایر';
|
||||
const map: Record<string, string> = {
|
||||
manual: 'دستی',
|
||||
tahesab: 'ته‌حساب',
|
||||
didar: 'دیدار',
|
||||
excel: 'اکسل',
|
||||
phone: 'تلفن',
|
||||
lead_form: 'فرم لید',
|
||||
other: 'سایر',
|
||||
};
|
||||
return map[value] ?? normalizeSource(raw);
|
||||
}
|
||||
|
||||
function normalizeLostReason(raw: string | null | undefined): string {
|
||||
const value = raw?.trim();
|
||||
if (!value) return 'بدون دلیل ثبت‌شده';
|
||||
|
||||
@@ -1,212 +0,0 @@
|
||||
import { Prisma } from '@prisma/client';
|
||||
import { PrismaService } from '../prisma/prisma.service';
|
||||
|
||||
const OPEN_INVOICE_STATUSES = ['issued', 'partially_paid', 'paid'] as const;
|
||||
|
||||
export type InvoicePartyPosition = {
|
||||
key: string;
|
||||
partyKind: 'person' | 'company';
|
||||
partyName: string;
|
||||
/** فاکتورهای عادی به‌علاوهٔ ماندهٔ اول دورهٔ مثبت */
|
||||
billed: Prisma.Decimal;
|
||||
/** برگشتی‌ها و اضافه‌دریافت، برای ستون تسویه‌شدهٔ بدهکار */
|
||||
offset: Prisma.Decimal;
|
||||
/** مثبت = طلب ما، منفی = بدهی ما */
|
||||
net: Prisma.Decimal;
|
||||
};
|
||||
|
||||
type Bucket = {
|
||||
key: string;
|
||||
partyKind: 'person' | 'company';
|
||||
partyName: string;
|
||||
sales: Prisma.Decimal;
|
||||
credits: Prisma.Decimal;
|
||||
paid: Prisma.Decimal;
|
||||
opening: Prisma.Decimal;
|
||||
};
|
||||
|
||||
function zero() {
|
||||
return new Prisma.Decimal(0);
|
||||
}
|
||||
|
||||
function round2(value: Prisma.Decimal) {
|
||||
return value.toDecimalPlaces(2);
|
||||
}
|
||||
|
||||
/** همان فرمول ماندهٔ فاکتور: جمع ردیف‌ها − تخفیف + مالیات، برگشتی منفی. */
|
||||
export function signedInvoicePayable(invoice: {
|
||||
kind: string;
|
||||
discountAmount: Prisma.Decimal;
|
||||
taxPercent: Prisma.Decimal;
|
||||
lineItems: Array<{ quantity: Prisma.Decimal; unitPrice: Prisma.Decimal }>;
|
||||
}) {
|
||||
const subtotal = invoice.lineItems.reduce(
|
||||
(sum, line) => sum.plus(line.quantity.mul(line.unitPrice)),
|
||||
zero(),
|
||||
);
|
||||
const discount = invoice.discountAmount ?? zero();
|
||||
const taxable = Prisma.Decimal.max(subtotal.minus(discount), 0);
|
||||
const tax = taxable.mul(invoice.taxPercent ?? 0).div(100);
|
||||
const signed = round2(subtotal.minus(discount).plus(tax));
|
||||
return invoice.kind === 'credit' ? signed.neg() : signed;
|
||||
}
|
||||
|
||||
export async function internalBooksEnabled(prisma: PrismaService, organizationId: string) {
|
||||
const connections = await prisma.accountingConnection.count({
|
||||
where: { organizationId, enabled: true },
|
||||
});
|
||||
return connections === 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* ماندهٔ طرف‌حساب از فاکتور صادرشده و ماندهٔ اول دوره.
|
||||
* سند درآمد جدا ساخته نمی‌شود تا همان فروش دو بار طلب نشود.
|
||||
* اگر حسابداری بیرونی وصل باشد، خالی برمی‌گردد.
|
||||
*/
|
||||
export async function loadInvoicePartyPositions(
|
||||
prisma: PrismaService,
|
||||
organizationId: string,
|
||||
): Promise<InvoicePartyPosition[]> {
|
||||
if (!(await internalBooksEnabled(prisma, organizationId))) return [];
|
||||
|
||||
const [invoices, openings] = await Promise.all([
|
||||
prisma.invoice.findMany({
|
||||
where: { organizationId, status: { in: [...OPEN_INVOICE_STATUSES] } },
|
||||
select: {
|
||||
kind: true,
|
||||
discountAmount: true,
|
||||
taxPercent: true,
|
||||
personId: true,
|
||||
companyId: true,
|
||||
person: { select: { firstName: true, lastName: true } },
|
||||
company: { select: { name: true } },
|
||||
lineItems: { select: { quantity: true, unitPrice: true } },
|
||||
payments: { select: { amount: true } },
|
||||
},
|
||||
}),
|
||||
prisma.partyOpeningBalance.findMany({
|
||||
where: { organizationId },
|
||||
select: {
|
||||
personId: true,
|
||||
amount: true,
|
||||
person: { select: { firstName: true, lastName: true } },
|
||||
},
|
||||
}),
|
||||
]);
|
||||
|
||||
const buckets = new Map<string, Bucket>();
|
||||
const ensure = (
|
||||
key: string,
|
||||
partyKind: 'person' | 'company',
|
||||
partyName: string,
|
||||
) => {
|
||||
const current = buckets.get(key);
|
||||
if (current) return current;
|
||||
const created: Bucket = {
|
||||
key,
|
||||
partyKind,
|
||||
partyName,
|
||||
sales: zero(),
|
||||
credits: zero(),
|
||||
paid: zero(),
|
||||
opening: zero(),
|
||||
};
|
||||
buckets.set(key, created);
|
||||
return created;
|
||||
};
|
||||
|
||||
for (const invoice of invoices) {
|
||||
const personId = invoice.personId;
|
||||
const companyId = invoice.companyId;
|
||||
const party = personId
|
||||
? {
|
||||
key: `person:${personId}`,
|
||||
partyKind: 'person' as const,
|
||||
partyName:
|
||||
`${invoice.person?.firstName ?? ''} ${invoice.person?.lastName ?? ''}`.trim() ||
|
||||
'مشتری',
|
||||
}
|
||||
: companyId
|
||||
? {
|
||||
key: `company:${companyId}`,
|
||||
partyKind: 'company' as const,
|
||||
partyName: invoice.company?.name?.trim() || 'شرکت',
|
||||
}
|
||||
: null;
|
||||
if (!party) continue;
|
||||
const bucket = ensure(party.key, party.partyKind, party.partyName);
|
||||
const payable = signedInvoicePayable(invoice);
|
||||
if (payable.greaterThan(0)) bucket.sales = bucket.sales.plus(payable);
|
||||
else if (payable.lessThan(0)) bucket.credits = bucket.credits.plus(payable.abs());
|
||||
const paid = invoice.payments.reduce((sum, row) => sum.plus(row.amount), zero());
|
||||
bucket.paid = bucket.paid.plus(paid);
|
||||
}
|
||||
|
||||
for (const opening of openings) {
|
||||
if (opening.amount.equals(0)) continue;
|
||||
const bucket = ensure(
|
||||
`person:${opening.personId}`,
|
||||
'person',
|
||||
`${opening.person.firstName} ${opening.person.lastName}`.trim() || 'مشتری',
|
||||
);
|
||||
bucket.opening = bucket.opening.plus(opening.amount);
|
||||
}
|
||||
|
||||
const positions: InvoicePartyPosition[] = [];
|
||||
for (const bucket of buckets.values()) {
|
||||
const net = round2(
|
||||
bucket.opening.plus(bucket.sales).minus(bucket.credits).minus(bucket.paid),
|
||||
);
|
||||
if (net.equals(0)) continue;
|
||||
const billed = round2(bucket.sales.plus(Prisma.Decimal.max(bucket.opening, 0)));
|
||||
const offset = round2(billed.minus(net));
|
||||
positions.push({
|
||||
key: bucket.key,
|
||||
partyKind: bucket.partyKind,
|
||||
partyName: bucket.partyName,
|
||||
billed,
|
||||
offset: Prisma.Decimal.max(offset, 0),
|
||||
net,
|
||||
});
|
||||
}
|
||||
return positions;
|
||||
}
|
||||
|
||||
/** فروش و برگشتیِ فاکتورهای صادرشده در بازه. وجه نقد را دوباره جمع نمی‌کند. */
|
||||
export async function invoiceSalesInPeriod(
|
||||
prisma: PrismaService,
|
||||
organizationId: string,
|
||||
from: Date | null,
|
||||
to: Date | null,
|
||||
) {
|
||||
const empty = { sales: '0.00', credits: '0.00', net: '0.00' };
|
||||
if (!(await internalBooksEnabled(prisma, organizationId))) return empty;
|
||||
|
||||
const invoices = await prisma.invoice.findMany({
|
||||
where: { organizationId, status: { in: [...OPEN_INVOICE_STATUSES] } },
|
||||
select: {
|
||||
kind: true,
|
||||
discountAmount: true,
|
||||
taxPercent: true,
|
||||
issuedAt: true,
|
||||
createdAt: true,
|
||||
lineItems: { select: { quantity: true, unitPrice: true } },
|
||||
},
|
||||
});
|
||||
|
||||
let sales = zero();
|
||||
let credits = zero();
|
||||
for (const invoice of invoices) {
|
||||
const when = invoice.issuedAt ?? invoice.createdAt;
|
||||
if (from && when < from) continue;
|
||||
if (to && when > to) continue;
|
||||
const payable = signedInvoicePayable(invoice);
|
||||
if (payable.greaterThan(0)) sales = sales.plus(payable);
|
||||
else if (payable.lessThan(0)) credits = credits.plus(payable.abs());
|
||||
}
|
||||
return {
|
||||
sales: round2(sales).toFixed(2),
|
||||
credits: round2(credits).toFixed(2),
|
||||
net: round2(sales.minus(credits)).toFixed(2),
|
||||
};
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
import { CanActivate, ExecutionContext, ForbiddenException, Injectable } from '@nestjs/common';
|
||||
import {
|
||||
parseUserTreasuryAccess,
|
||||
permissionsWithTreasuryOverride,
|
||||
treasurySectionAllowed,
|
||||
type TreasurySectionKey,
|
||||
} from '@mento/shared';
|
||||
@@ -17,12 +16,7 @@ export class TreasuryAccessGuard implements CanActivate {
|
||||
constructor(private readonly prisma: PrismaService) {}
|
||||
|
||||
async canActivate(context: ExecutionContext): Promise<boolean> {
|
||||
const req = context.switchToHttp().getRequest<{
|
||||
user?: Actor;
|
||||
method?: string;
|
||||
originalUrl?: string;
|
||||
url?: string;
|
||||
}>();
|
||||
const req = context.switchToHttp().getRequest<{ user?: Actor; originalUrl?: string; url?: string }>();
|
||||
const actor = req.user;
|
||||
if (!actor) throw new ForbiddenException('دسترسی مالی مجاز نیست.');
|
||||
if (actor.role === 'owner' || actor.role === 'admin') return true;
|
||||
@@ -36,18 +30,11 @@ export class TreasuryAccessGuard implements CanActivate {
|
||||
const rolePermissions = Array.isArray(membership?.orgRole?.permissions)
|
||||
? membership.orgRole.permissions.map(String)
|
||||
: [];
|
||||
const permissions = permissionsWithTreasuryOverride(
|
||||
const permissions = permissionsForTreasury(
|
||||
rolePermissions,
|
||||
parseUserTreasuryAccess(membership?.treasuryAccessOverride),
|
||||
);
|
||||
const method = (req.method || 'GET').toUpperCase();
|
||||
const url = req.originalUrl || req.url || '';
|
||||
if (
|
||||
isLookupForDocuments(method, url) &&
|
||||
treasurySectionAllowed(actor.role, permissions, 'treasury_documents')
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
if (!treasurySectionAllowed(actor.role, permissions, sectionForUrl(url))) {
|
||||
throw new ForbiddenException('به این بخش مدیریت مالی دسترسی ندارید.');
|
||||
}
|
||||
@@ -55,11 +42,14 @@ export class TreasuryAccessGuard implements CanActivate {
|
||||
}
|
||||
}
|
||||
|
||||
/** فهرست حساب و دسته برای ثبت سند لازم است؛ صفحهٔ مدیریت‌شان جدا می‌ماند. */
|
||||
function isLookupForDocuments(method: string, url: string): boolean {
|
||||
if (method !== 'GET' && method !== 'HEAD') return false;
|
||||
const path = (url.split('?')[0] || '').replace(/\/+$/, '');
|
||||
return path.endsWith('/treasury/accounts') || path.endsWith('/treasury/categories');
|
||||
function permissionsForTreasury(
|
||||
rolePermissions: string[],
|
||||
override: ReturnType<typeof parseUserTreasuryAccess>,
|
||||
): string[] {
|
||||
if (!override) return rolePermissions;
|
||||
const rest = rolePermissions.filter((key) => key !== 'treasury' && !key.startsWith('treasury_'));
|
||||
if (!override.enabled) return rest;
|
||||
return ['treasury', ...override.sections, ...rest];
|
||||
}
|
||||
|
||||
function sectionForUrl(url: string): TreasurySectionKey | 'treasury_documents' {
|
||||
|
||||
@@ -5,7 +5,6 @@ import ExcelJS from 'exceljs';
|
||||
import type { TreasuryPartyBalanceDto } from '@mento/shared';
|
||||
import { PrismaService } from '../prisma/prisma.service';
|
||||
import type { Actor } from '../common/record-scope';
|
||||
import { invoiceSalesInPeriod } from './invoice-ledger';
|
||||
|
||||
function dec(value: Prisma.Decimal | number | string | null | undefined) {
|
||||
return new Prisma.Decimal(value ?? 0);
|
||||
@@ -13,20 +12,11 @@ function dec(value: Prisma.Decimal | number | string | null | undefined) {
|
||||
function money(value: Prisma.Decimal | number | string) {
|
||||
return new Prisma.Decimal(value).toFixed(2);
|
||||
}
|
||||
function reasonText(value?: string | null) {
|
||||
const text = value?.trim() ?? '';
|
||||
return text ? text.slice(0, 500) : null;
|
||||
}
|
||||
function parseDate(iso?: string | null) {
|
||||
if (!iso) return null;
|
||||
const d = new Date(iso);
|
||||
return Number.isNaN(d.getTime()) ? null : d;
|
||||
}
|
||||
function payrollStatus(payable: Prisma.Decimal, paid: Prisma.Decimal) {
|
||||
if (paid.lessThanOrEqualTo(0)) return 'open';
|
||||
if (paid.greaterThanOrEqualTo(payable)) return 'settled';
|
||||
return 'partial';
|
||||
}
|
||||
function periodKey(date: Date) {
|
||||
return date.toISOString().slice(0, 10);
|
||||
}
|
||||
@@ -46,15 +36,9 @@ export class TreasuryOpsService {
|
||||
async listPayroll(actor: Actor) {
|
||||
const rows = await this.prisma.financialPayroll.findMany({
|
||||
where: { organizationId: actor.organizationId },
|
||||
include: {
|
||||
movements: {
|
||||
where: { voidedAt: null },
|
||||
include: { account: { select: { name: true } } },
|
||||
orderBy: { occurredAt: 'desc' },
|
||||
},
|
||||
},
|
||||
include: { movements: true },
|
||||
orderBy: { dueDate: 'desc' },
|
||||
take: 500,
|
||||
take: 100,
|
||||
});
|
||||
const users = await this.prisma.user.findMany({
|
||||
where: { id: { in: rows.map((row) => row.userId) } },
|
||||
@@ -71,11 +55,8 @@ export class TreasuryOpsService {
|
||||
period: string;
|
||||
baseAmount: string | number;
|
||||
benefits?: string | number;
|
||||
benefitsReason?: string | null;
|
||||
bonus?: string | number;
|
||||
bonusReason?: string | null;
|
||||
deductions?: string | number;
|
||||
deductionsReason?: string | null;
|
||||
dueDate?: string;
|
||||
notes?: string | null;
|
||||
},
|
||||
@@ -100,23 +81,14 @@ export class TreasuryOpsService {
|
||||
period: input.period.trim(),
|
||||
baseAmount: base,
|
||||
benefits,
|
||||
benefitsReason: benefits.greaterThan(0) ? reasonText(input.benefitsReason) : null,
|
||||
bonus,
|
||||
bonusReason: bonus.greaterThan(0) ? reasonText(input.bonusReason) : null,
|
||||
deductions,
|
||||
deductionsReason: deductions.greaterThan(0) ? reasonText(input.deductionsReason) : null,
|
||||
payable,
|
||||
dueDate: parseDate(input.dueDate) ?? new Date(),
|
||||
notes: input.notes?.trim() || null,
|
||||
createdById: actor.userId,
|
||||
},
|
||||
include: {
|
||||
movements: {
|
||||
where: { voidedAt: null },
|
||||
include: { account: { select: { name: true } } },
|
||||
orderBy: { occurredAt: 'desc' },
|
||||
},
|
||||
},
|
||||
include: { movements: true },
|
||||
});
|
||||
const user = await this.prisma.user.findUnique({ where: { id: row.userId }, select: { fullName: true } });
|
||||
return this.payrollDto(row, user?.fullName ?? '');
|
||||
@@ -152,7 +124,7 @@ export class TreasuryOpsService {
|
||||
if (!account) throw new BadRequestException('حساب پرداخت پیدا نشد.');
|
||||
const balance = await this.balance(account.id);
|
||||
if (balance.lessThan(amount)) throw new BadRequestException('موجودی حساب کافی نیست.');
|
||||
const status = payrollStatus(row.payable, paid.plus(amount));
|
||||
const status = paid.plus(amount).equals(row.payable) ? 'settled' : 'partial';
|
||||
await this.prisma.$transaction([
|
||||
this.prisma.financialMovement.create({
|
||||
data: {
|
||||
@@ -173,123 +145,6 @@ export class TreasuryOpsService {
|
||||
return this.listPayroll(actor);
|
||||
}
|
||||
|
||||
async updatePayroll(
|
||||
actor: Actor,
|
||||
id: string,
|
||||
input: {
|
||||
userId: string;
|
||||
period: string;
|
||||
baseAmount: string | number;
|
||||
benefits?: string | number;
|
||||
benefitsReason?: string | null;
|
||||
bonus?: string | number;
|
||||
bonusReason?: string | null;
|
||||
deductions?: string | number;
|
||||
deductionsReason?: string | null;
|
||||
},
|
||||
) {
|
||||
const row = await this.prisma.financialPayroll.findFirst({
|
||||
where: { id, organizationId: actor.organizationId },
|
||||
include: { movements: true },
|
||||
});
|
||||
if (!row || row.voidedAt || row.status === 'void') {
|
||||
throw new NotFoundException('رکورد حقوق برای ویرایش پیدا نشد.');
|
||||
}
|
||||
const base = dec(input.baseAmount);
|
||||
const benefits = dec(input.benefits ?? 0);
|
||||
const bonus = dec(input.bonus ?? 0);
|
||||
const deductions = dec(input.deductions ?? 0);
|
||||
const payable = base.plus(benefits).plus(bonus).minus(deductions);
|
||||
if (!input.userId || !input.period?.trim()) {
|
||||
throw new BadRequestException('پرسنل و دوره حقوق لازم است.');
|
||||
}
|
||||
if (!payable.greaterThan(0)) throw new BadRequestException('مبلغ قابل پرداخت باید بزرگ‌تر از صفر باشد.');
|
||||
const paid = this.paidOf(row.movements);
|
||||
if (payable.lessThan(paid)) {
|
||||
throw new BadRequestException('مبلغ قابل پرداخت از پرداخت‌های ثبت‌شده کمتر است.');
|
||||
}
|
||||
const member = await this.prisma.membership.findFirst({
|
||||
where: { organizationId: actor.organizationId, userId: input.userId, isActive: true },
|
||||
});
|
||||
if (!member) throw new BadRequestException('این کاربر عضو محیط نیست.');
|
||||
try {
|
||||
await this.prisma.financialPayroll.update({
|
||||
where: { id: row.id },
|
||||
data: {
|
||||
userId: input.userId,
|
||||
period: input.period.trim(),
|
||||
baseAmount: base,
|
||||
benefits,
|
||||
benefitsReason: benefits.greaterThan(0) ? reasonText(input.benefitsReason) : null,
|
||||
bonus,
|
||||
bonusReason: bonus.greaterThan(0) ? reasonText(input.bonusReason) : null,
|
||||
deductions,
|
||||
deductionsReason: deductions.greaterThan(0) ? reasonText(input.deductionsReason) : null,
|
||||
payable,
|
||||
status: payrollStatus(payable, paid),
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === 'P2002') {
|
||||
throw new BadRequestException('برای این پرسنل در این دوره حقوق ثبت شده است.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
return this.listPayroll(actor);
|
||||
}
|
||||
|
||||
async updatePayrollPayment(
|
||||
actor: Actor,
|
||||
payrollId: string,
|
||||
movementId: string,
|
||||
input: { amount: string | number; accountId: string; occurredAt?: string },
|
||||
) {
|
||||
const movement = await this.prisma.financialMovement.findFirst({
|
||||
where: {
|
||||
id: movementId,
|
||||
payrollId,
|
||||
organizationId: actor.organizationId,
|
||||
voidedAt: null,
|
||||
},
|
||||
});
|
||||
const payroll = await this.prisma.financialPayroll.findFirst({
|
||||
where: { id: payrollId, organizationId: actor.organizationId },
|
||||
include: { movements: true },
|
||||
});
|
||||
if (!movement || !payroll || payroll.voidedAt || payroll.status === 'void') {
|
||||
throw new NotFoundException('پرداخت حقوق برای ویرایش پیدا نشد.');
|
||||
}
|
||||
const amount = dec(input.amount);
|
||||
const otherPaid = this.paidOf(payroll.movements.filter((item) => item.id !== movement.id));
|
||||
if (!amount.greaterThan(0) || otherPaid.plus(amount).greaterThan(payroll.payable)) {
|
||||
throw new BadRequestException('مبلغ پرداخت حقوق نامعتبر است.');
|
||||
}
|
||||
const account = await this.prisma.financialAccount.findFirst({
|
||||
where: { id: input.accountId, organizationId: actor.organizationId },
|
||||
});
|
||||
if (!account || (!account.isActive && account.id !== movement.accountId)) {
|
||||
throw new BadRequestException('حساب پرداخت پیدا نشد.');
|
||||
}
|
||||
const available = await this.balance(account.id);
|
||||
const room = account.id === movement.accountId ? available.plus(movement.amount) : available;
|
||||
if (room.lessThan(amount)) throw new BadRequestException('موجودی حساب کافی نیست.');
|
||||
await this.prisma.$transaction([
|
||||
this.prisma.financialMovement.update({
|
||||
where: { id: movement.id },
|
||||
data: {
|
||||
accountId: account.id,
|
||||
amount,
|
||||
occurredAt: parseDate(input.occurredAt) ?? movement.occurredAt,
|
||||
},
|
||||
}),
|
||||
this.prisma.financialPayroll.update({
|
||||
where: { id: payroll.id },
|
||||
data: { status: payrollStatus(payroll.payable, otherPaid.plus(amount)) },
|
||||
}),
|
||||
]);
|
||||
return this.listPayroll(actor);
|
||||
}
|
||||
|
||||
async listRecurring(actor: Actor) {
|
||||
const rows = await this.prisma.financialRecurringItem.findMany({
|
||||
where: { organizationId: actor.organizationId },
|
||||
@@ -472,8 +327,6 @@ export class TreasuryOpsService {
|
||||
sheet.addRow(['شاخص', 'این دوره', 'دوره قبل']);
|
||||
const rows: Array<[string, string, string]> = [
|
||||
['درآمد ثبت‌شده', data.current.bookedIncome, data.previous.bookedIncome],
|
||||
['فروش فاکتور', data.current.invoiceSales, data.previous.invoiceSales],
|
||||
['فاکتور برگشتی', data.current.invoiceCredits, data.previous.invoiceCredits],
|
||||
['هزینه ثبت‌شده', data.current.bookedExpense, data.previous.bookedExpense],
|
||||
['سود عملیاتی', data.current.operatingProfit, data.previous.operatingProfit],
|
||||
['ورود وجه', data.current.cashIn, data.previous.cashIn],
|
||||
@@ -558,15 +411,10 @@ export class TreasuryOpsService {
|
||||
amount: money(amount),
|
||||
share: bookedExpense.equals(0) ? '0' : amount.div(bookedExpense).mul(100).toFixed(1),
|
||||
}));
|
||||
const invoiceSales = await invoiceSalesInPeriod(this.prisma, organizationId, from, to);
|
||||
return {
|
||||
bookedIncome: money(bookedIncome),
|
||||
invoiceSales: invoiceSales.sales,
|
||||
invoiceCredits: invoiceSales.credits,
|
||||
bookedExpense: money(bookedExpense),
|
||||
operatingProfit: money(
|
||||
bookedIncome.plus(invoiceSales.net).minus(bookedExpense),
|
||||
),
|
||||
operatingProfit: money(bookedIncome.minus(bookedExpense)),
|
||||
cashIn: money(cashIn),
|
||||
cashOut: money(cashOut),
|
||||
cashNet: money(cashIn.minus(cashOut)),
|
||||
@@ -627,22 +475,12 @@ export class TreasuryOpsService {
|
||||
period: string;
|
||||
baseAmount: Prisma.Decimal;
|
||||
benefits: Prisma.Decimal;
|
||||
benefitsReason?: string | null;
|
||||
bonus: Prisma.Decimal;
|
||||
bonusReason?: string | null;
|
||||
deductions: Prisma.Decimal;
|
||||
deductionsReason?: string | null;
|
||||
payable: Prisma.Decimal;
|
||||
dueDate: Date;
|
||||
status: string;
|
||||
movements: Array<{
|
||||
id: string;
|
||||
amount: Prisma.Decimal;
|
||||
voidedAt: Date | null;
|
||||
accountId: string;
|
||||
occurredAt: Date;
|
||||
account?: { name: string } | null;
|
||||
}>;
|
||||
movements: Array<{ amount: Prisma.Decimal; voidedAt: Date | null }>;
|
||||
},
|
||||
fullName: string,
|
||||
) {
|
||||
@@ -655,25 +493,13 @@ export class TreasuryOpsService {
|
||||
period: row.period,
|
||||
baseAmount: money(row.baseAmount),
|
||||
benefits: money(row.benefits),
|
||||
benefitsReason: row.benefitsReason?.trim() || null,
|
||||
bonus: money(row.bonus),
|
||||
bonusReason: row.bonusReason?.trim() || null,
|
||||
deductions: money(row.deductions),
|
||||
deductionsReason: row.deductionsReason?.trim() || null,
|
||||
payable: money(row.payable),
|
||||
paidAmount: money(paid),
|
||||
remaining: money(left.isNegative() ? 0 : left),
|
||||
dueDate: row.dueDate.toISOString(),
|
||||
status: row.status,
|
||||
payments: row.movements
|
||||
.filter((item) => !item.voidedAt)
|
||||
.map((item) => ({
|
||||
id: item.id,
|
||||
amount: money(item.amount),
|
||||
occurredAt: item.occurredAt.toISOString(),
|
||||
accountId: item.accountId,
|
||||
accountName: item.account?.name ?? '',
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -129,29 +129,6 @@ export class TreasuryController {
|
||||
return this.treasury.partyBalances(user, kind === 'expense' ? 'expense' : 'income');
|
||||
}
|
||||
|
||||
@Post('party-balances/collect')
|
||||
collectPartyBalance(
|
||||
@CurrentUser() user: Actor,
|
||||
@Body()
|
||||
body: {
|
||||
kind?: string;
|
||||
partyKind?: 'person' | 'company' | 'user';
|
||||
partyId?: string;
|
||||
amount?: string | number;
|
||||
accountId?: string;
|
||||
occurredAt?: string;
|
||||
},
|
||||
) {
|
||||
return this.treasury.collectPartyBalance(user, {
|
||||
kind: body.kind === 'expense' ? 'expense' : 'income',
|
||||
partyKind: body.partyKind ?? 'person',
|
||||
partyId: body.partyId ?? '',
|
||||
amount: body.amount ?? 0,
|
||||
accountId: body.accountId ?? '',
|
||||
occurredAt: body.occurredAt,
|
||||
});
|
||||
}
|
||||
|
||||
@Get('documents')
|
||||
documents(
|
||||
@CurrentUser() user: Actor,
|
||||
@@ -255,25 +232,6 @@ export class TreasuryController {
|
||||
return this.ops.createPayroll(user, body);
|
||||
}
|
||||
|
||||
@Patch('payroll/:id')
|
||||
updatePayroll(
|
||||
@CurrentUser() user: Actor,
|
||||
@Param('id') id: string,
|
||||
@Body() body: Parameters<TreasuryOpsService['updatePayroll']>[2],
|
||||
) {
|
||||
return this.ops.updatePayroll(user, id, body);
|
||||
}
|
||||
|
||||
@Patch('payroll/:id/payments/:movementId')
|
||||
updatePayrollPayment(
|
||||
@CurrentUser() user: Actor,
|
||||
@Param('id') id: string,
|
||||
@Param('movementId') movementId: string,
|
||||
@Body() body: Parameters<TreasuryOpsService['updatePayrollPayment']>[3],
|
||||
) {
|
||||
return this.ops.updatePayrollPayment(user, id, movementId, body);
|
||||
}
|
||||
|
||||
@Post('payroll/:id/pay')
|
||||
payPayroll(
|
||||
@CurrentUser() user: Actor,
|
||||
|
||||
@@ -25,7 +25,6 @@ import { PrismaService } from '../prisma/prisma.service';
|
||||
import { LocalFileStorage } from '../storage/local-file.storage';
|
||||
import { StorageQuotaService } from '../billing/storage-quota.service';
|
||||
import type { Actor } from '../common/record-scope';
|
||||
import { loadInvoicePartyPositions, invoiceSalesInPeriod } from './invoice-ledger';
|
||||
import { TreasuryReceivablesService } from './treasury-receivables.service';
|
||||
|
||||
const INCOME_CATEGORIES = ['فروش خدمات', 'فروش کالا', 'سایر درآمدها'];
|
||||
@@ -360,7 +359,6 @@ export class TreasuryService {
|
||||
organizationId: actor.organizationId,
|
||||
accountId,
|
||||
voidedAt: null,
|
||||
kind: { not: 'allocation' },
|
||||
...(from || to
|
||||
? {
|
||||
occurredAt: {
|
||||
@@ -379,7 +377,6 @@ export class TreasuryService {
|
||||
organizationId: actor.organizationId,
|
||||
accountId,
|
||||
voidedAt: null,
|
||||
kind: { not: 'allocation' },
|
||||
occurredAt: { lt: from },
|
||||
},
|
||||
select: { direction: true, amount: true },
|
||||
@@ -533,8 +530,6 @@ export class TreasuryService {
|
||||
settleAmount?: string | number | null;
|
||||
accountId?: string | null;
|
||||
settledAt?: string | null;
|
||||
/** دریافت یا پرداخت روی مانده؛ سند تعهدی جدید نمی‌سازد. */
|
||||
settlement?: boolean;
|
||||
},
|
||||
): Promise<FinancialDocumentDto> {
|
||||
const title = input.title.trim();
|
||||
@@ -565,17 +560,6 @@ export class TreasuryService {
|
||||
}
|
||||
}
|
||||
const bookedAt = startOfDay(input.bookedAt) ?? new Date();
|
||||
const settlement = input.settlement === true;
|
||||
if (settlement) {
|
||||
if (party.partyKind === 'other') {
|
||||
throw new BadRequestException('برای دریافت یا پرداخت، طرف حساب واقعی لازم است.');
|
||||
}
|
||||
if (!settle.equals(amount) || !settle.greaterThan(0)) {
|
||||
throw new BadRequestException('مبلغ دریافت یا پرداخت را وارد کنید.');
|
||||
}
|
||||
if (!input.accountId) throw new BadRequestException('حساب را انتخاب کنید.');
|
||||
}
|
||||
const payExisting = settlement;
|
||||
const doc = await this.prisma.$transaction(async (tx) => {
|
||||
const reference = await this.nextDocumentReference(
|
||||
tx,
|
||||
@@ -622,45 +606,6 @@ export class TreasuryService {
|
||||
},
|
||||
});
|
||||
}
|
||||
if (payExisting && input.accountId) {
|
||||
const leftover = await this.allocatePartyBalance(tx, actor, {
|
||||
party,
|
||||
sourceId: created.id,
|
||||
kind: input.kind,
|
||||
amount: settle,
|
||||
accountId: input.accountId,
|
||||
occurredAt: startOfDay(input.settledAt ?? undefined) ?? bookedAt,
|
||||
memo: title,
|
||||
});
|
||||
if (leftover.greaterThan(0)) {
|
||||
const opposite = input.kind === 'income' ? 'expense' : 'income';
|
||||
const oppositeRef = await this.nextDocumentReference(
|
||||
tx,
|
||||
actor.organizationId,
|
||||
opposite,
|
||||
input.bookedAt,
|
||||
bookedAt,
|
||||
);
|
||||
await tx.financialDocument.create({
|
||||
data: {
|
||||
organizationId: actor.organizationId,
|
||||
kind: opposite,
|
||||
title,
|
||||
amount: leftover,
|
||||
bookedAt,
|
||||
personId: party.personId,
|
||||
companyId: party.companyId,
|
||||
userId: party.userId,
|
||||
partyKind: party.partyKind,
|
||||
partyName: party.partyName,
|
||||
status: 'open',
|
||||
reference: oppositeRef,
|
||||
notes: `source:${created.id}`,
|
||||
createdById: actor.userId,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
return tx.financialDocument.findUniqueOrThrow({
|
||||
where: { id: created.id },
|
||||
include: { category: true, account: true, movements: true },
|
||||
@@ -782,7 +727,6 @@ export class TreasuryService {
|
||||
amount: Prisma.Decimal;
|
||||
settled: Prisma.Decimal;
|
||||
remaining: Prisma.Decimal;
|
||||
documentRemaining: Prisma.Decimal;
|
||||
}>();
|
||||
for (const row of rows) {
|
||||
if (row.partyKind === 'other') continue;
|
||||
@@ -803,43 +747,13 @@ export class TreasuryService {
|
||||
amount: new Prisma.Decimal(0),
|
||||
settled: new Prisma.Decimal(0),
|
||||
remaining: new Prisma.Decimal(0),
|
||||
documentRemaining: new Prisma.Decimal(0),
|
||||
};
|
||||
current.amount = current.amount.plus(row.amount);
|
||||
current.settled = current.settled.plus(settled);
|
||||
current.remaining = current.remaining.plus(rawRemaining);
|
||||
current.documentRemaining = current.documentRemaining.plus(rawRemaining);
|
||||
buckets.set(key, current);
|
||||
}
|
||||
|
||||
const invoiceParties = await loadInvoicePartyPositions(this.prisma, actor.organizationId);
|
||||
for (const party of invoiceParties) {
|
||||
const onDebtorSide = party.net.greaterThan(0);
|
||||
if (kind === 'income' && !onDebtorSide) continue;
|
||||
if (kind === 'expense' && onDebtorSide) continue;
|
||||
const remaining = party.net.abs();
|
||||
const amount = onDebtorSide ? party.billed : Prisma.Decimal.max(party.billed, remaining);
|
||||
const settled = Prisma.Decimal.max(amount.minus(remaining), 0);
|
||||
const current = buckets.get(party.key) ?? {
|
||||
key: party.key,
|
||||
partyKind: party.partyKind,
|
||||
partyName: party.partyName,
|
||||
amount: new Prisma.Decimal(0),
|
||||
settled: new Prisma.Decimal(0),
|
||||
remaining: new Prisma.Decimal(0),
|
||||
documentRemaining: new Prisma.Decimal(0),
|
||||
};
|
||||
current.amount = current.amount.plus(amount);
|
||||
current.settled = current.settled.plus(settled);
|
||||
current.remaining = current.remaining.plus(remaining);
|
||||
if (!current.partyName || current.partyName === 'بدون طرف حساب') {
|
||||
current.partyName = party.partyName;
|
||||
}
|
||||
buckets.set(party.key, current);
|
||||
}
|
||||
|
||||
return [...buckets.values()]
|
||||
.filter((row) => row.remaining.greaterThan(0))
|
||||
.sort((a, b) => b.remaining.comparedTo(a.remaining))
|
||||
.map((row) => ({
|
||||
key: row.key,
|
||||
@@ -848,122 +762,9 @@ export class TreasuryService {
|
||||
amount: money(row.amount),
|
||||
settledAmount: money(row.settled),
|
||||
remaining: money(row.remaining),
|
||||
documentRemaining: money(row.documentRemaining),
|
||||
}));
|
||||
}
|
||||
|
||||
/** دریافت یا پرداختِ بخشی از ماندهٔ سندهای باز یک طرف حساب، بدون ساخت سند جدید. */
|
||||
async collectPartyBalance(
|
||||
actor: Actor,
|
||||
input: {
|
||||
kind: 'income' | 'expense';
|
||||
partyKind: 'person' | 'company' | 'user';
|
||||
partyId: string;
|
||||
amount: string | number;
|
||||
accountId: string;
|
||||
occurredAt?: string;
|
||||
},
|
||||
): Promise<{ applied: string; documentCount: number }> {
|
||||
const amount = dec(input.amount);
|
||||
if (!amount.greaterThan(0)) throw new BadRequestException('مبلغ باید بزرگ‌تر از صفر باشد.');
|
||||
const partyId = input.partyId.trim();
|
||||
if (!partyId) throw new BadRequestException('طرف حساب را انتخاب کنید.');
|
||||
if (input.partyKind !== 'person' && input.partyKind !== 'company' && input.partyKind !== 'user') {
|
||||
throw new BadRequestException('این مانده به سند بازی وصل نیست.');
|
||||
}
|
||||
if (!input.accountId.trim()) throw new BadRequestException('حساب را انتخاب کنید.');
|
||||
const account = await this.requireAccount(actor.organizationId, input.accountId, actor);
|
||||
if (!account.isActive) throw new BadRequestException('حساب غیرفعال است.');
|
||||
const scope = await this.accountScope(actor);
|
||||
const docs = await this.prisma.financialDocument.findMany({
|
||||
where: {
|
||||
organizationId: actor.organizationId,
|
||||
kind: input.kind,
|
||||
voidedAt: null,
|
||||
status: { in: ['open', 'partial'] },
|
||||
partyKind: input.partyKind,
|
||||
...(input.partyKind === 'person' ? { personId: partyId } : {}),
|
||||
...(input.partyKind === 'company' ? { companyId: partyId } : {}),
|
||||
...(input.partyKind === 'user' ? { userId: partyId } : {}),
|
||||
...(scope ? { OR: [{ accountId: null }, { accountId: { in: scope } }] } : {}),
|
||||
},
|
||||
include: { movements: { select: { amount: true, voidedAt: true } } },
|
||||
orderBy: [{ bookedAt: 'asc' }, { createdAt: 'asc' }],
|
||||
});
|
||||
const open = docs
|
||||
.map((doc) => {
|
||||
const remaining = doc.amount.minus(this.settledOf(doc.movements));
|
||||
return { doc, remaining };
|
||||
})
|
||||
.filter((row) => row.remaining.greaterThan(0));
|
||||
const available = open.reduce((sum, row) => sum.plus(row.remaining), new Prisma.Decimal(0));
|
||||
if (!available.greaterThan(0)) {
|
||||
throw new BadRequestException(
|
||||
'سند بازی برای کم کردن این مانده نیست. اگر مانده از فاکتور است، دریافت را روی خود فاکتور ثبت کنید.',
|
||||
);
|
||||
}
|
||||
if (amount.greaterThan(available)) {
|
||||
throw new BadRequestException('مبلغ از ماندهٔ سندهای باز این طرف حساب بیشتر است.');
|
||||
}
|
||||
if (input.kind === 'expense') {
|
||||
const balance = await this.accountBalance(account.id);
|
||||
if (balance.lessThan(amount)) {
|
||||
throw new BadRequestException('موجودی حساب برای این پرداخت کافی نیست.');
|
||||
}
|
||||
}
|
||||
const occurredAt = startOfDay(input.occurredAt) ?? new Date();
|
||||
let left = amount;
|
||||
const touched: string[] = [];
|
||||
await this.prisma.$transaction(async (tx) => {
|
||||
for (const row of open) {
|
||||
if (!left.greaterThan(0)) break;
|
||||
const slice = left.lessThan(row.remaining) ? left : row.remaining;
|
||||
const status = slice.equals(row.remaining) ? 'settled' : 'partial';
|
||||
await tx.financialMovement.create({
|
||||
data: {
|
||||
organizationId: actor.organizationId,
|
||||
accountId: account.id,
|
||||
documentId: row.doc.id,
|
||||
direction: input.kind === 'income' ? 'in' : 'out',
|
||||
amount: slice,
|
||||
kind: input.kind === 'income' ? 'receipt' : 'payment',
|
||||
occurredAt,
|
||||
memo: input.kind === 'income' ? 'دریافت از مانده' : 'پرداخت از مانده',
|
||||
createdById: actor.userId,
|
||||
},
|
||||
});
|
||||
await tx.financialDocument.update({
|
||||
where: { id: row.doc.id },
|
||||
data: { status, accountId: account.id },
|
||||
});
|
||||
if (status === 'settled') {
|
||||
await tx.financialRecurringOccurrence.updateMany({
|
||||
where: { documentId: row.doc.id, status: 'pending' },
|
||||
data: { status: 'confirmed' },
|
||||
});
|
||||
}
|
||||
touched.push(row.doc.id);
|
||||
left = left.minus(slice);
|
||||
}
|
||||
});
|
||||
await this.prisma.financialAuditLog.create({
|
||||
data: {
|
||||
organizationId: actor.organizationId,
|
||||
entityType: 'document',
|
||||
entityId: touched[0] ?? partyId,
|
||||
action: 'settle',
|
||||
after: {
|
||||
amount: amount.toFixed(2),
|
||||
accountId: account.id,
|
||||
documentIds: touched,
|
||||
partyId,
|
||||
},
|
||||
actorUserId: actor.userId,
|
||||
},
|
||||
}).catch(() => undefined);
|
||||
return { applied: money(amount), documentCount: touched.length };
|
||||
}
|
||||
|
||||
private async resolveParty(
|
||||
actor: Actor,
|
||||
input: {
|
||||
@@ -1107,51 +908,16 @@ export class TreasuryService {
|
||||
});
|
||||
if (!doc || doc.voidedAt) throw new NotFoundException('سند پیدا نشد.');
|
||||
const now = new Date();
|
||||
await this.prisma.$transaction(async (tx) => {
|
||||
const allocations = await tx.financialMovement.findMany({
|
||||
where: { organizationId: actor.organizationId, reference: `alloc:${doc.id}`, voidedAt: null },
|
||||
select: { documentId: true },
|
||||
});
|
||||
await tx.financialMovement.updateMany({
|
||||
await this.prisma.$transaction([
|
||||
this.prisma.financialMovement.updateMany({
|
||||
where: { documentId: doc.id, voidedAt: null },
|
||||
data: { voidedAt: now },
|
||||
});
|
||||
await tx.financialMovement.updateMany({
|
||||
where: { organizationId: actor.organizationId, reference: `alloc:${doc.id}`, voidedAt: null },
|
||||
data: { voidedAt: now },
|
||||
});
|
||||
await tx.financialDocument.update({
|
||||
}),
|
||||
this.prisma.financialDocument.update({
|
||||
where: { id: doc.id },
|
||||
data: { status: 'void', voidedAt: now, voidReason: reason?.trim() || 'ابطال' },
|
||||
});
|
||||
const excess = await tx.financialDocument.findMany({
|
||||
where: {
|
||||
organizationId: actor.organizationId,
|
||||
notes: `source:${doc.id}`,
|
||||
voidedAt: null,
|
||||
status: { in: ['open', 'partial'] },
|
||||
},
|
||||
include: { movements: { select: { voidedAt: true } } },
|
||||
});
|
||||
for (const child of excess) {
|
||||
if (child.movements.some((row) => !row.voidedAt)) continue;
|
||||
await tx.financialDocument.update({
|
||||
where: { id: child.id },
|
||||
data: { status: 'void', voidedAt: now, voidReason: 'ابطال سند مبدأ' },
|
||||
});
|
||||
}
|
||||
const affected = [...new Set(allocations.map((row) => row.documentId).filter((id): id is string => Boolean(id)))];
|
||||
for (const documentId of affected) {
|
||||
const row = await tx.financialDocument.findUnique({
|
||||
where: { id: documentId },
|
||||
include: { movements: { select: { amount: true, voidedAt: true } } },
|
||||
});
|
||||
if (!row || row.voidedAt || row.status === 'void') continue;
|
||||
const settled = this.settledOf(row.movements);
|
||||
const status = settled.equals(0) ? 'open' : settled.greaterThanOrEqualTo(row.amount) ? 'settled' : 'partial';
|
||||
await tx.financialDocument.update({ where: { id: row.id }, data: { status } });
|
||||
}
|
||||
});
|
||||
}),
|
||||
]);
|
||||
const fresh = await this.prisma.financialDocument.findUniqueOrThrow({
|
||||
where: { id: doc.id },
|
||||
include: { category: true, account: true, movements: true },
|
||||
@@ -1326,17 +1092,6 @@ export class TreasuryService {
|
||||
}
|
||||
const bookedIncome = dec(income._sum.amount);
|
||||
const bookedExpense = dec(expense._sum.amount);
|
||||
const invoiceSales = await invoiceSalesInPeriod(
|
||||
this.prisma,
|
||||
actor.organizationId,
|
||||
from,
|
||||
to,
|
||||
);
|
||||
const invoiceParties = await loadInvoicePartyPositions(this.prisma, actor.organizationId);
|
||||
for (const party of invoiceParties) {
|
||||
if (party.net.greaterThan(0)) receivables = receivables.plus(party.net);
|
||||
else payables = payables.plus(party.net.abs());
|
||||
}
|
||||
const totalBalance = accounts.reduce(
|
||||
(sum, account) => sum.plus(account.balance),
|
||||
new Prisma.Decimal(0),
|
||||
@@ -1346,7 +1101,7 @@ export class TreasuryService {
|
||||
actualReceipts: money(dec(receipts._sum.amount)),
|
||||
bookedExpense: money(bookedExpense),
|
||||
actualPayments: money(dec(payments._sum.amount)),
|
||||
operatingProfit: money(bookedIncome.plus(invoiceSales.net).minus(bookedExpense)),
|
||||
operatingProfit: money(bookedIncome.minus(bookedExpense)),
|
||||
receivables: money(receivables),
|
||||
payables: money(payables),
|
||||
totalBalance: money(totalBalance),
|
||||
@@ -1356,76 +1111,6 @@ export class TreasuryService {
|
||||
};
|
||||
}
|
||||
|
||||
/** مبلغ قطعی را از ماندهٔ باز همان طرف کم می‌کند؛ اول سندهای هم‌نوع، بعد طرف مقابل. روی موجودی حساب اثر ندارد. */
|
||||
private async allocatePartyBalance(
|
||||
tx: Prisma.TransactionClient,
|
||||
actor: Actor,
|
||||
input: {
|
||||
party: { partyKind: string; personId: string | null; companyId: string | null; userId: string | null };
|
||||
sourceId: string;
|
||||
kind: 'income' | 'expense';
|
||||
amount: Prisma.Decimal;
|
||||
accountId: string;
|
||||
occurredAt: Date;
|
||||
memo: string;
|
||||
},
|
||||
): Promise<Prisma.Decimal> {
|
||||
const scope = await this.accountScope(actor);
|
||||
const openDocs = await tx.financialDocument.findMany({
|
||||
where: {
|
||||
organizationId: actor.organizationId,
|
||||
id: { not: input.sourceId },
|
||||
voidedAt: null,
|
||||
status: { in: ['open', 'partial'] },
|
||||
partyKind: input.party.partyKind,
|
||||
...(input.party.personId ? { personId: input.party.personId } : {}),
|
||||
...(input.party.companyId ? { companyId: input.party.companyId } : {}),
|
||||
...(input.party.userId ? { userId: input.party.userId } : {}),
|
||||
...(scope ? { OR: [{ accountId: null }, { accountId: { in: scope } }] } : {}),
|
||||
},
|
||||
include: { movements: { select: { amount: true, voidedAt: true } } },
|
||||
orderBy: [{ bookedAt: 'asc' }, { createdAt: 'asc' }],
|
||||
});
|
||||
const ordered = [
|
||||
...openDocs.filter((row) => row.kind === input.kind),
|
||||
...openDocs.filter((row) => row.kind !== input.kind),
|
||||
];
|
||||
let left = input.amount;
|
||||
for (const row of ordered) {
|
||||
if (!left.greaterThan(0)) break;
|
||||
const remaining = row.amount.minus(this.settledOf(row.movements));
|
||||
if (!remaining.greaterThan(0)) continue;
|
||||
const slice = left.lessThan(remaining) ? left : remaining;
|
||||
const status = slice.equals(remaining) ? 'settled' : 'partial';
|
||||
await tx.financialMovement.create({
|
||||
data: {
|
||||
organizationId: actor.organizationId,
|
||||
accountId: input.accountId,
|
||||
documentId: row.id,
|
||||
direction: row.kind === 'income' ? 'in' : 'out',
|
||||
amount: slice,
|
||||
kind: 'allocation',
|
||||
occurredAt: input.occurredAt,
|
||||
memo: input.memo,
|
||||
reference: `alloc:${input.sourceId}`,
|
||||
createdById: actor.userId,
|
||||
},
|
||||
});
|
||||
await tx.financialDocument.update({
|
||||
where: { id: row.id },
|
||||
data: { status },
|
||||
});
|
||||
if (status === 'settled') {
|
||||
await tx.financialRecurringOccurrence.updateMany({
|
||||
where: { documentId: row.id, status: 'pending' },
|
||||
data: { status: 'confirmed' },
|
||||
});
|
||||
}
|
||||
left = left.minus(slice);
|
||||
}
|
||||
return left;
|
||||
}
|
||||
|
||||
private settledOf(movements: Array<{ amount: Prisma.Decimal; voidedAt: Date | null }>) {
|
||||
return movements
|
||||
.filter((row) => !row.voidedAt)
|
||||
@@ -1434,7 +1119,7 @@ export class TreasuryService {
|
||||
|
||||
private async accountBalance(accountId: string) {
|
||||
const rows = await this.prisma.financialMovement.findMany({
|
||||
where: { accountId, voidedAt: null, kind: { not: 'allocation' } },
|
||||
where: { accountId, voidedAt: null },
|
||||
select: { direction: true, amount: true },
|
||||
});
|
||||
return rows.reduce(
|
||||
@@ -1509,7 +1194,7 @@ export class TreasuryService {
|
||||
const from = startOfDay(range?.from);
|
||||
const to = startOfDay(range?.to);
|
||||
const movements = await this.prisma.financialMovement.findMany({
|
||||
where: { accountId: account.id, voidedAt: null, kind: { not: 'allocation' } },
|
||||
where: { accountId: account.id, voidedAt: null },
|
||||
select: { direction: true, amount: true, kind: true, occurredAt: true },
|
||||
});
|
||||
let balance = new Prisma.Decimal(0);
|
||||
|
||||
@@ -104,10 +104,8 @@ export class UsersService {
|
||||
orgRoleId: dto.orgRoleId,
|
||||
role: dto.role,
|
||||
});
|
||||
if (resolved.role === 'owner') {
|
||||
throw new BadRequestException(
|
||||
'هر محیط فقط یک مالک دارد و مالک همان کسی است که ثبت‌نام کرده. برای دسترسی کامل نقش مدیر را انتخاب کنید.',
|
||||
);
|
||||
if (resolved.role === 'owner' && actorRole !== 'owner') {
|
||||
throw new ForbiddenException('فقط مالک می‌تواند نقش مدیر سیستم را واگذار کند');
|
||||
}
|
||||
|
||||
const existingUser = await this.prisma.user.findFirst({ where: { mobile } });
|
||||
@@ -451,10 +449,6 @@ export class UsersService {
|
||||
}
|
||||
}
|
||||
|
||||
if (nextRole === 'owner' && target.role !== 'owner') {
|
||||
await this.memberships.assertSoleOwner(organizationId, target.userId);
|
||||
}
|
||||
|
||||
if (target.role === 'owner' && nextRole !== 'owner') {
|
||||
const owners = await this.memberships.countActiveOwners(
|
||||
organizationId,
|
||||
@@ -462,7 +456,7 @@ export class UsersService {
|
||||
);
|
||||
if (owners < 1) {
|
||||
throw new BadRequestException(
|
||||
'مالک محیط همان کسی است که ثبت‌نام کرده و نمی‌توان نقش او را عوض کرد',
|
||||
'حداقل یک مالک برای سازمان لازم است؛ ابتدا مالک دیگری تعیین کنید',
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -534,9 +528,6 @@ export class UsersService {
|
||||
}
|
||||
}
|
||||
if (isActive && !target.isActive) {
|
||||
if (target.role === 'owner') {
|
||||
await this.memberships.assertSoleOwner(organizationId, targetId);
|
||||
}
|
||||
await this.billing.assertSeatAvailable(organizationId, targetId);
|
||||
}
|
||||
await this.prisma.membership.update({
|
||||
@@ -567,9 +558,6 @@ export class UsersService {
|
||||
resolved: { role: UserRole; orgRoleId: string },
|
||||
): Promise<OrgUserDto> {
|
||||
await this.billing.assertSeatAvailable(organizationId, userId);
|
||||
if (resolved.role === 'owner') {
|
||||
await this.memberships.assertSoleOwner(organizationId, userId);
|
||||
}
|
||||
const existing = await this.prisma.membership.findFirst({
|
||||
where: { userId, organizationId },
|
||||
});
|
||||
|
||||
+1
-1
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>منتکت | Montact CRM</title>
|
||||
<link rel="icon" type="image/png" href="/brand/logo.png" />
|
||||
<link rel="icon" type="image/svg+xml" href="/brand/logo.svg" />
|
||||
<style>
|
||||
/* چیدمان اولیه؛ استایل کامپوننت بعداً همین را دقیق‌تر می‌کند */
|
||||
.app-frame {
|
||||
|
||||
@@ -22,7 +22,9 @@
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/vite": "^4.3.3",
|
||||
"@vitejs/plugin-vue": "^5.2.3",
|
||||
"tailwindcss": "^4.3.3",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.2",
|
||||
"vue-tsc": "^2.2.8"
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 197.7 151.02">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #10897d;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #16c1a8;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: #43f7dd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<path class="cls-1" d="M43.57,77.15v64.37c0,4.79-3.88,8.67-8.67,8.67H8.67c-4.79,0-8.67-3.88-8.67-8.67V51.62c0-2.96,1.51-5.71,3.99-7.3l41.67-26.69c3.67-2.35,8.52-1.61,11.32,1.73l35.74,42.59c.57.68,1.6.72,2.22.09l26.07-26.6c3.38-3.45,8.92-3.47,12.33-.06l19.42,19.42c3.39,3.39,3.39,8.88,0,12.26l-55.06,55.06c-3.58,3.58-9.45,3.35-12.73-.5l-38.76-45.42c-.9-1.06-2.64-.42-2.64.97Z"/>
|
||||
<circle class="cls-3" cx="167.06" cy="21.02" r="21.02"/>
|
||||
<rect class="cls-3" x="172.68" y="52.7" width="25.02" height="98.32" rx="12.51" ry="12.51"/>
|
||||
<rect class="cls-2" x="142.38" y="83.17" width="25.02" height="67.85" rx="12.51" ry="12.51"/>
|
||||
<rect class="cls-1" x="111.4" y="114.24" width="25.02" height="36.78" rx="12.51" ry="12.51"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,37 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 246.7 46.59">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #10897d;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #16c1a8;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: #43f7dd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<g>
|
||||
<path class="cls-1" d="M199.15,23.8v19.86c0,1.48-1.2,2.67-2.67,2.67h-8.09c-1.48,0-2.67-1.2-2.67-2.67V15.92c0-.91.47-1.76,1.23-2.25l12.85-8.23c1.13-.72,2.63-.5,3.49.53l11.02,13.14c.18.21.49.22.68.03l8.04-8.21c1.04-1.06,2.75-1.07,3.8-.02l5.99,5.99c1.05,1.05,1.05,2.74,0,3.78l-16.98,16.98c-1.1,1.1-2.92,1.03-3.93-.15l-11.96-14.01c-.28-.33-.81-.13-.81.3h0Z"/>
|
||||
<circle class="cls-3" cx="237.24" cy="6.48" r="6.48"/>
|
||||
<path class="cls-3" d="M242.84,16.26h0c2.13,0,3.86,1.73,3.86,3.86v22.61c0,2.13-1.73,3.86-3.86,3.86h0c-2.13,0-3.86-1.73-3.86-3.86v-22.61c0-2.13,1.73-3.86,3.86-3.86Z"/>
|
||||
<path class="cls-2" d="M233.49,25.66h0c2.13,0,3.86,1.73,3.86,3.86v13.21c0,2.13-1.73,3.86-3.86,3.86h0c-2.13,0-3.86-1.73-3.86-3.86v-13.21c0-2.13,1.73-3.86,3.86-3.86Z"/>
|
||||
<rect class="cls-1" x="220.08" y="35.24" width="7.72" height="11.35" rx="3.86" ry="3.86"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-1" d="M132.19,17.19v2.66c0,1.27,1.03,2.29,2.29,2.29h2.66c1.27,0,2.29-1.03,2.29-2.29v-2.66c0-1.27-1.03-2.29-2.29-2.29h-2.66c-1.27,0-2.29,1.03-2.29,2.29Z"/>
|
||||
<path class="cls-1" d="M102.53,17.19v2.66c0,1.27,1.03,2.29,2.29,2.29h12.91c1.27,0,2.29-1.03,2.29-2.29v-2.66c0-1.27-1.03-2.29-2.29-2.29h-12.91c-1.27,0-2.29,1.03-2.29,2.29Z"/>
|
||||
<path class="cls-1" d="M13.73,20.2v2.66c0,1.27,1.03,2.29,2.29,2.29h12.91c1.27,0,2.29-1.03,2.29-2.29v-2.66c0-1.27-1.03-2.29-2.29-2.29h-12.91c-1.27,0-2.29,1.03-2.29,2.29Z"/>
|
||||
<g>
|
||||
<path class="cls-1" d="M173.05,30.25c-.52-1.2-1.24-2.25-2.14-3.16-.91-.9-1.96-1.62-3.16-2.14-1.2-.52-2.49-.78-3.88-.78h-3.25c-1.12,0-2.2.19-3.24.58-1.04.39-1.98.92-2.81,1.59-.83.68-1.54,1.49-2.11,2.43-.58.95-.97,1.98-1.16,3.1l-1.16,5.97c-.16.66-.47,1.18-.96,1.56-.48.39-1.05.58-1.71.58h-6.49c-.74,0-1.31-.26-1.74-.78-.43-.52-.56-1.15-.41-1.88l1.35-6.87c.25-1.25-.58-2.47-1.84-2.69l-2.52-.46c-1.22-.22-2.4.57-2.65,1.79l-1.81,8.7c-.12.66-.43,1.19-.93,1.59-.5.4-1.08.61-1.74.61h-10.08c-.74,0-1.31-.26-1.74-.78-.43-.52-.56-1.15-.41-1.88l1.35-6.87c.25-1.25-.58-2.47-1.84-2.69l-2.52-.46c-1.22-.22-2.4.57-2.65,1.79l-1.81,8.7c-.12.66-.43,1.19-.93,1.59-.5.4-1.08.61-1.74.61h-9.5c-.66,0-1.22-.22-1.68-.67-.46-.44-.69-.99-.69-1.65v-3.53c0-1.39-.26-2.69-.78-3.91-.52-1.22-1.24-2.28-2.14-3.19-.91-.91-1.96-1.62-3.16-2.14-1.2-.52-2.49-.78-3.88-.78h-21.78l9.58-11.3c.79-.94.71-2.33-.19-3.17l-1.79-1.65c-.96-.88-2.45-.79-3.29.2l-14.66,17.17c-.79.92-.72,2.3.16,3.14l3.59,3.43h29.14c.54,0,1.02.2,1.45.61.43.4.64.9.64,1.48v4.11c0,.54-.19.99-.58,1.33-.39.35-.79.52-1.22.52h-38.23c-.66,0-1.21-.22-1.65-.67-.44-.44-.67-.99-.67-1.65v-8.54c0-1.27-1.03-2.29-2.29-2.29h-2.6c-1.27,0-2.29,1.03-2.29,2.29v8.6c0,.66-.22,1.2-.67,1.62-.44.43-.99.64-1.65.64H11.53c-1.2,0-2.22-.4-3.07-1.21-.85-.81-1.27-1.83-1.27-3.07v-8.25c0-1.27-1.03-2.29-2.29-2.29h-2.6c-1.27,0-2.29,1.03-2.29,2.29v6.47c0,1.66.32,3.24.96,4.72.64,1.49,1.51,2.79,2.61,3.91,1.1,1.12,2.39,2,3.88,2.63,1.49.64,3.06.96,4.72.96h22.01c1.39,0,2.69-.25,3.91-.75,1.22-.5,2.33-1.33,3.33-2.49,1.93,2.16,4.29,3.24,7.07,3.24h35.8c1.24,0,2.44-.23,3.62-.69,1.18-.46,2.25-1.08,3.22-1.85.93.77,1.98,1.39,3.16,1.85,1.18.46,2.44.69,3.79.69h7.59c1.23,0,2.48-.29,3.74-.87,1.25-.58,2.25-1.37,2.98-2.38.58,1,1.46,1.8,2.64,2.38,1.18.58,2.36.87,3.56.87h9.44c1.23,0,2.48-.29,3.74-.87,1.25-.58,2.25-1.37,2.98-2.38.58,1,1.46,1.8,2.64,2.38,1.18.58,2.37.87,3.56.87h6.03c1.24,0,2.39-.23,3.47-.69,1.08-.46,2.07-1.29,2.95-2.49.89,1.24,1.86,2.08,2.93,2.52,1.06.44,2.15.67,3.27.67h6.6c1.04,0,2.03-.2,2.95-.61.93-.4,1.74-.96,2.43-1.65s1.24-1.51,1.65-2.43c.4-.93.61-1.91.61-2.95v-4.36c0-1.39-.26-2.68-.78-3.88ZM166.65,39.98h-7.99c-.43,0-.77-.15-1.04-.46-.27-.31-.37-.67-.29-1.1l.93-4.64c.08-.42.27-.77.58-1.04.31-.27.67-.4,1.1-.4h4.98c.5,0,.92.17,1.24.52.33.35.49.75.49,1.22v5.91Z"/>
|
||||
<path class="cls-3" d="M166.7,16.1c-.65.12-1.24.25-1.77.37-.53.12-1.12.26-1.79.4-.67.14-1.34.29-2.02.44-1.3.29-2.73.61-4.28.94-.68.15-1.34-.31-1.45-1l-.24-1.57c-.1-.63.31-1.23.94-1.36l4.01-.88c-.09-.34-.16-.61-.21-.81-.05-.2-.09-.38-.12-.54-.03-.15-.07-.33-.12-.54-.05-.2-.09-.47-.12-.81-.06-.59,0-1.13.21-1.63.2-.5.48-.95.84-1.35.36-.4.78-.73,1.26-.98.48-.25.95-.4,1.42-.47l2.42-.42c.56-.09,1.11-.05,1.65.14.54.19,1.02.46,1.44.81s.78.78,1.07,1.28c.29.5.49,1.01.58,1.54l.23,1.4c.12.62.09,1.21-.09,1.77-.19.56-.47,1.05-.84,1.49-.37.43-.82.81-1.35,1.12-.53.31-1.09.53-1.68.65ZM166.79,11.54s-.02-.1-.05-.21c-.03-.11-.06-.24-.09-.4-.06-.16-.12-.34-.19-.56-.16-.31-.39-.42-.7-.33l-1.44.37c-.37.06-.53.26-.47.6l.51,1.63,1.86-.47c.5-.09.68-.31.56-.65Z"/>
|
||||
<path class="cls-3" d="M105.49,6.57l11.59-2.48c.64-.14,1.28.27,1.43.91l.27,1.15c.15.66-.26,1.31-.93,1.45l-11.66,2.46c-.67.14-1.32-.3-1.44-.97l-.2-1.13c-.11-.64.3-1.25.94-1.39Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
@@ -4,8 +4,20 @@ import { RouterLink } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import { rewriteGregorianDates } from '@/lib/jalali';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import { brand, type AskMentoResponse, type AskMentoSourceDto } from '@mento/shared';
|
||||
import {
|
||||
Alert as AAlert,
|
||||
Button as AButton,
|
||||
Card as ACard,
|
||||
Flex as AFlex,
|
||||
Input as AInput,
|
||||
Space as ASpace,
|
||||
Tag as ATag,
|
||||
Typography,
|
||||
} from 'ant-design-vue';
|
||||
import { ThunderboltOutlined } from '@/icons/ant-bridge';
|
||||
|
||||
const { Paragraph: ATypographyParagraph } = Typography;
|
||||
|
||||
const props = defineProps<{
|
||||
personId?: string;
|
||||
@@ -65,127 +77,53 @@ function insertAnswer() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="ask">
|
||||
<form @submit.prevent="submit">
|
||||
<UiIcon name="sparkle" :size="16" class="ico" />
|
||||
<input
|
||||
v-model="question"
|
||||
type="search"
|
||||
<a-flex vertical :gap="8" :style="{ minWidth: 0 }">
|
||||
<a-flex :gap="8" align="center" :style="{ width: '100%' }">
|
||||
<a-input
|
||||
v-model:value="question"
|
||||
allow-clear
|
||||
:placeholder="placeholder || brand.askPlaceholderFa"
|
||||
/>
|
||||
<button type="submit" :disabled="asking || question.trim().length < 2">
|
||||
{{ asking ? '…' : 'بپرس' }}
|
||||
</button>
|
||||
</form>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<div v-else-if="result" class="answer">
|
||||
<p>{{ result.answer }}</p>
|
||||
<div v-if="result.sources.length" class="sources">
|
||||
:style="{ flex: 1, minWidth: 0 }"
|
||||
@pressEnter="submit"
|
||||
>
|
||||
<template #prefix>
|
||||
<ThunderboltOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="asking || question.trim().length < 2"
|
||||
:loading="asking"
|
||||
@click="submit"
|
||||
>
|
||||
بپرس
|
||||
</a-button>
|
||||
</a-flex>
|
||||
|
||||
<a-alert v-if="error" type="error" show-icon :message="error" />
|
||||
|
||||
<a-card v-else-if="result" :bordered="false">
|
||||
<a-typography-paragraph :style="{ marginBottom: 0 }">
|
||||
{{ result.answer }}
|
||||
</a-typography-paragraph>
|
||||
<a-space v-if="result.sources.length" wrap :size="6" :style="{ marginTop: '8px' }">
|
||||
<RouterLink
|
||||
v-for="source in result.sources"
|
||||
:key="`${source.type}-${source.id}`"
|
||||
:to="sourceTo(source)"
|
||||
>
|
||||
{{ source.label }}
|
||||
<a-tag color="cyan" :bordered="false">{{ source.label }}</a-tag>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<button
|
||||
</a-space>
|
||||
<a-button
|
||||
v-if="allowInsert && result.answer.trim()"
|
||||
type="button"
|
||||
class="insert-btn"
|
||||
type="primary"
|
||||
block
|
||||
:style="{ marginTop: '8px' }"
|
||||
@click="insertAnswer"
|
||||
>
|
||||
درج در پیام
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</a-button>
|
||||
</a-card>
|
||||
</a-flex>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ask {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.35rem 0.4rem 0.35rem 0.7rem;
|
||||
}
|
||||
|
||||
.ico {
|
||||
color: #0f766e;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
padding: 0.45rem 0;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
background: #14b8a6;
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
padding: 0.45rem 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.answer {
|
||||
background: #f0fdfa;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.7rem 0.85rem;
|
||||
}
|
||||
|
||||
.answer p {
|
||||
margin: 0;
|
||||
color: #134e4a;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.sources {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
margin-top: 0.55rem;
|
||||
}
|
||||
|
||||
.sources a {
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
color: #0f766e;
|
||||
background: #fff;
|
||||
border-radius: 999px;
|
||||
padding: 0.18rem 0.55rem;
|
||||
}
|
||||
|
||||
.insert-btn {
|
||||
margin-top: 0.65rem;
|
||||
width: 100%;
|
||||
background: #0f766e;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: #b91c1c;
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,11 +8,11 @@ import {
|
||||
InputNumber as AInputNumber,
|
||||
Row as ARow,
|
||||
Select as ASelect,
|
||||
Spin as ASpin,
|
||||
Typography,
|
||||
} from 'ant-design-vue';
|
||||
import { api } from '@/lib/api';
|
||||
import JalaliDateInput from '@/components/JalaliDateInput.vue';
|
||||
import { CrmSkeleton, CrmSkeletonCard } from '@/components/skeleton';
|
||||
import type {
|
||||
CustomFieldDefinitionDto,
|
||||
CustomFieldEntity,
|
||||
@@ -73,61 +73,63 @@ onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-spin v-if="loading" />
|
||||
<template v-else-if="fields.length">
|
||||
<a-typography-title :level="5" :style="{ marginTop: '16px' }">
|
||||
فیلدهای سفارشی
|
||||
</a-typography-title>
|
||||
<a-row :gutter="[16, 0]">
|
||||
<a-col v-for="field in fields" :key="field.id" :xs="24" :md="12">
|
||||
<a-form-item :label="field.label" :required="field.required">
|
||||
<a-select
|
||||
v-if="field.fieldType === 'select'"
|
||||
:id="`cf-${field.key}`"
|
||||
allow-clear
|
||||
:value="String(displayValue(field.key)) || undefined"
|
||||
:options="selectOptions(field)"
|
||||
placeholder="انتخاب کنید"
|
||||
style="width: 100%"
|
||||
@update:value="setValue(field.key, $event ?? '')"
|
||||
/>
|
||||
<CrmSkeleton :loading="loading">
|
||||
<CrmSkeletonCard v-if="loading" :rows="3" :min-height="120" />
|
||||
<template v-else-if="fields.length">
|
||||
<a-typography-title :level="5" :style="{ marginTop: '16px' }">
|
||||
فیلدهای سفارشی
|
||||
</a-typography-title>
|
||||
<a-row :gutter="[16, 0]">
|
||||
<a-col v-for="field in fields" :key="field.id" :xs="24" :md="12">
|
||||
<a-form-item :label="field.label" :required="field.required">
|
||||
<a-select
|
||||
v-if="field.fieldType === 'select'"
|
||||
:id="`cf-${field.key}`"
|
||||
allow-clear
|
||||
:value="String(displayValue(field.key)) || undefined"
|
||||
:options="selectOptions(field)"
|
||||
placeholder="انتخاب کنید"
|
||||
style="width: 100%"
|
||||
@update:value="setValue(field.key, $event ?? '')"
|
||||
/>
|
||||
|
||||
<a-checkbox
|
||||
v-else-if="field.fieldType === 'boolean'"
|
||||
:id="`cf-${field.key}`"
|
||||
:checked="Boolean(props.modelValue[field.key])"
|
||||
@update:checked="setValue(field.key, $event)"
|
||||
>
|
||||
فعال
|
||||
</a-checkbox>
|
||||
<a-checkbox
|
||||
v-else-if="field.fieldType === 'boolean'"
|
||||
:id="`cf-${field.key}`"
|
||||
:checked="Boolean(props.modelValue[field.key])"
|
||||
@update:checked="setValue(field.key, $event)"
|
||||
>
|
||||
فعال
|
||||
</a-checkbox>
|
||||
|
||||
<a-input-number
|
||||
v-else-if="field.fieldType === 'number'"
|
||||
:id="`cf-${field.key}`"
|
||||
:value="
|
||||
props.modelValue[field.key] != null
|
||||
? Number(props.modelValue[field.key])
|
||||
: undefined
|
||||
"
|
||||
style="width: 100%"
|
||||
@update:value="setValue(field.key, $event == null ? null : Number($event))"
|
||||
/>
|
||||
<a-input-number
|
||||
v-else-if="field.fieldType === 'number'"
|
||||
:id="`cf-${field.key}`"
|
||||
:value="
|
||||
props.modelValue[field.key] != null
|
||||
? Number(props.modelValue[field.key])
|
||||
: undefined
|
||||
"
|
||||
style="width: 100%"
|
||||
@update:value="setValue(field.key, $event == null ? null : Number($event))"
|
||||
/>
|
||||
|
||||
<JalaliDateInput
|
||||
v-else-if="field.fieldType === 'date'"
|
||||
:id="`cf-${field.key}`"
|
||||
:model-value="String(displayValue(field.key))"
|
||||
@update:model-value="setValue(field.key, $event || null)"
|
||||
/>
|
||||
<JalaliDateInput
|
||||
v-else-if="field.fieldType === 'date'"
|
||||
:id="`cf-${field.key}`"
|
||||
:model-value="String(displayValue(field.key))"
|
||||
@update:model-value="setValue(field.key, $event || null)"
|
||||
/>
|
||||
|
||||
<a-input
|
||||
v-else
|
||||
:id="`cf-${field.key}`"
|
||||
:value="String(displayValue(field.key))"
|
||||
@update:value="setValue(field.key, $event)"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<a-input
|
||||
v-else
|
||||
:id="`cf-${field.key}`"
|
||||
:value="String(displayValue(field.key))"
|
||||
@update:value="setValue(field.key, $event)"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</CrmSkeleton>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, watch } from 'vue';
|
||||
import { Select as ASelect } from 'ant-design-vue';
|
||||
import {
|
||||
Alert as AAlert,
|
||||
Card as ACard,
|
||||
Checkbox as ACheckbox,
|
||||
Flex as AFlex,
|
||||
FormItem as AFormItem,
|
||||
Radio as ARadio,
|
||||
RadioGroup as ARadioGroup,
|
||||
Select as ASelect,
|
||||
Space as ASpace,
|
||||
Typography,
|
||||
} from 'ant-design-vue';
|
||||
import type {
|
||||
DataAccessOwnerKind,
|
||||
DataAccessRule,
|
||||
@@ -15,9 +26,12 @@ import {
|
||||
PERSON_MOODS,
|
||||
sectionHasDataAccessLimits,
|
||||
} from '@mento/shared';
|
||||
|
||||
export type IdOption = { id: string; name: string };
|
||||
type Choice = { value: string; label: string };
|
||||
|
||||
const { Text: ATypographyText } = Typography;
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue: SectionDataAccess;
|
||||
@@ -429,53 +443,59 @@ const filterSummary = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dae" :class="{ compact }">
|
||||
<div class="dae-mode">
|
||||
<label>
|
||||
<input v-model="mode" type="radio" value="all" :disabled="disabled" />
|
||||
همهٔ {{ sectionLabel }}
|
||||
</label>
|
||||
<label>
|
||||
<input v-model="mode" type="radio" value="rules" :disabled="disabled" />
|
||||
محدود با فیلتر
|
||||
</label>
|
||||
</div>
|
||||
<a-flex vertical :gap="compact ? 8 : 12">
|
||||
<a-radio-group v-model:value="mode" :disabled="disabled">
|
||||
<a-flex vertical :gap="4">
|
||||
<a-radio value="all">همهٔ {{ sectionLabel }}</a-radio>
|
||||
<a-radio value="rules">محدود با فیلتر</a-radio>
|
||||
</a-flex>
|
||||
</a-radio-group>
|
||||
|
||||
<template v-if="mode === 'rules'">
|
||||
<p class="hint">
|
||||
<a-typography-text type="secondary">
|
||||
فقط رکوردهایی دیده می‌شوند که با
|
||||
<strong>همهٔ فیلترهای پرشده</strong>
|
||||
جور باشند. در هر فهرست، چند انتخاب یعنی هر کدام کافی است. خالی یعنی بدون محدودیت.
|
||||
</p>
|
||||
<p v-if="hadMultipleRules" class="hint warn">
|
||||
تنظیم قبلی چندتکه بود؛ اینجا در یک فیلتر ادغام شده. با ذخیره به همین شکل ساده ثبت می‌شود.
|
||||
</p>
|
||||
<p class="summary">{{ filterSummary }}</p>
|
||||
</a-typography-text>
|
||||
<a-alert
|
||||
v-if="hadMultipleRules"
|
||||
type="warning"
|
||||
show-icon
|
||||
message="تنظیم قبلی چندتکه بود؛ اینجا در یک فیلتر ادغام شده. با ذخیره به همین شکل ساده ثبت می‌شود."
|
||||
/>
|
||||
<a-typography-text strong>{{ filterSummary }}</a-typography-text>
|
||||
|
||||
<fieldset :disabled="disabled">
|
||||
<legend>مالک / مسئول</legend>
|
||||
<p class="muted">خالی = بدون محدودیت مالک</p>
|
||||
<label class="chip">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="filter.owners?.includes('self')"
|
||||
@change="toggleOwner('self')"
|
||||
/>
|
||||
{{ ownerSelfLabel }}
|
||||
</label>
|
||||
<label class="chip">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="filter.owners?.includes('team')"
|
||||
@change="toggleOwner('team')"
|
||||
/>
|
||||
تیم‌های عضو
|
||||
</label>
|
||||
</fieldset>
|
||||
<a-card size="small" title="مالک / مسئول" :bordered="true">
|
||||
<a-flex vertical :gap="8">
|
||||
<a-typography-text type="secondary">خالی = بدون محدودیت مالک</a-typography-text>
|
||||
<a-space wrap :size="8">
|
||||
<a-checkbox
|
||||
:checked="filter.owners?.includes('self')"
|
||||
:disabled="disabled"
|
||||
@change="toggleOwner('self')"
|
||||
>
|
||||
{{ ownerSelfLabel }}
|
||||
</a-checkbox>
|
||||
<a-checkbox
|
||||
:checked="filter.owners?.includes('team')"
|
||||
:disabled="disabled"
|
||||
@change="toggleOwner('team')"
|
||||
>
|
||||
تیم‌های عضو
|
||||
</a-checkbox>
|
||||
</a-space>
|
||||
</a-flex>
|
||||
</a-card>
|
||||
|
||||
<label v-for="picker in pickers" :key="picker.legend" class="pick">
|
||||
<span>{{ picker.legend }}</span>
|
||||
<p v-if="picker.loading" class="muted">در حال بارگذاری منبع‌ها…</p>
|
||||
<a-form-item
|
||||
v-for="picker in pickers"
|
||||
:key="picker.legend"
|
||||
:label="picker.legend"
|
||||
:style="{ marginBottom: 0 }"
|
||||
>
|
||||
<a-typography-text v-if="picker.loading" type="secondary">
|
||||
در حال بارگذاری منبع‌ها…
|
||||
</a-typography-text>
|
||||
<a-select
|
||||
v-else
|
||||
:value="pickerValue(picker)"
|
||||
@@ -490,70 +510,14 @@ const filterSummary = computed(() => {
|
||||
style="width: 100%"
|
||||
@update:value="setList(picker.key, $event)"
|
||||
/>
|
||||
<p v-if="picker.hint" class="muted">{{ picker.hint }}</p>
|
||||
</label>
|
||||
<a-typography-text v-if="picker.hint" type="secondary">
|
||||
{{ picker.hint }}
|
||||
</a-typography-text>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<p v-else-if="!hasLimits" class="hint">
|
||||
<a-typography-text v-else-if="!hasLimits" type="secondary">
|
||||
بدون محدودیت — همهٔ {{ sectionLabel }} قابل مشاهده‌اند.
|
||||
</p>
|
||||
</div>
|
||||
</a-typography-text>
|
||||
</a-flex>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dae {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.dae-mode {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.dae-mode label,
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.88rem;
|
||||
margin-inline-end: 0.55rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.hint,
|
||||
.muted,
|
||||
.summary {
|
||||
color: #64748b;
|
||||
font-size: 0.82rem;
|
||||
margin: 0;
|
||||
}
|
||||
.hint.warn {
|
||||
color: #b45309;
|
||||
}
|
||||
.summary {
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
}
|
||||
fieldset {
|
||||
border: 1px dashed #e2e8f0;
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0.65rem;
|
||||
margin: 0;
|
||||
}
|
||||
legend {
|
||||
padding-inline: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
color: #475569;
|
||||
font-weight: 600;
|
||||
}
|
||||
.pick {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.pick > span {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
}
|
||||
.compact fieldset {
|
||||
padding: 0.45rem 0.55rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import {
|
||||
Tabs as ATabs,
|
||||
TabPane as ATabPane,
|
||||
Typography,
|
||||
Radio as ARadio,
|
||||
RadioGroup as ARadioGroup,
|
||||
Checkbox as ACheckbox,
|
||||
Space as ASpace,
|
||||
Input as AInput,
|
||||
} from 'ant-design-vue';
|
||||
import type {
|
||||
DataAccessPolicy,
|
||||
DataAccessSection,
|
||||
@@ -19,6 +29,8 @@ import { api } from '@/lib/api';
|
||||
import { useCustomerGroups } from '@/lib/customer-groups';
|
||||
import DataAccessEditor, { type IdOption } from '@/components/DataAccessEditor.vue';
|
||||
|
||||
const { Text: ATypographyText } = Typography;
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: DataAccessPolicy;
|
||||
/** فقط بخش‌هایی که این مجوزها را دارند نشان بده؛ خالی = همه */
|
||||
@@ -115,6 +127,10 @@ function patchTreasury(next: UserTreasuryAccess | null) {
|
||||
emit('update:treasuryAccess', next);
|
||||
}
|
||||
|
||||
function onTreasuryModeChange(e: { target: { value?: unknown } }) {
|
||||
patchTreasury(e.target.value === 'role' ? null : (props.treasuryAccess ?? emptyTreasuryAccess()));
|
||||
}
|
||||
|
||||
function toggleTreasurySection(key: RolePermissionKey) {
|
||||
const current = props.treasuryAccess ?? emptyTreasuryAccess();
|
||||
const sections = current.sections.includes(key)
|
||||
@@ -229,195 +245,105 @@ onMounted(() => {
|
||||
void loadOptions();
|
||||
void loadTreasuryAccounts();
|
||||
});
|
||||
|
||||
const editorSection = computed<DataAccessSection>(() =>
|
||||
active.value === 'treasury' ? 'customers' : active.value,
|
||||
);
|
||||
|
||||
const stagesForActive = computed(() => {
|
||||
if (active.value === 'leads') return leadStages.value;
|
||||
if (active.value === 'sales') return dealStages.value;
|
||||
if (active.value === 'activities') return activityStages.value;
|
||||
if (active.value === 'projects') return projectStages.value;
|
||||
return [];
|
||||
});
|
||||
|
||||
const boardsForActive = computed(() => {
|
||||
if (active.value === 'activities') return activityBoards.value;
|
||||
if (active.value === 'projects') return projectBoards.value;
|
||||
return [];
|
||||
});
|
||||
|
||||
const typesForActive = computed(() => {
|
||||
if (active.value === 'activities') return activityTypes.value;
|
||||
if (active.value === 'routines') return routineCategories.value;
|
||||
return [];
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dap">
|
||||
<p v-if="!visibleSections.length" class="muted">
|
||||
<div>
|
||||
<a-typography-text v-if="!visibleSections.length" type="secondary">
|
||||
برای تنظیم محدوده، ابتدا مجوز بخش مربوط را روشن کنید.
|
||||
</p>
|
||||
<template v-else>
|
||||
<div class="tabs" role="tablist">
|
||||
<button
|
||||
v-for="s in visibleSections"
|
||||
:key="s"
|
||||
type="button"
|
||||
class="tab"
|
||||
:class="{ on: active === s }"
|
||||
role="tab"
|
||||
:aria-selected="active === s"
|
||||
@click="active = s"
|
||||
>
|
||||
{{ DATA_ACCESS_SECTION_LABELS[s] }}
|
||||
</button>
|
||||
<button
|
||||
v-if="showTreasury"
|
||||
type="button"
|
||||
class="tab"
|
||||
:class="{ on: active === 'treasury' }"
|
||||
role="tab"
|
||||
:aria-selected="active === 'treasury'"
|
||||
@click="active = 'treasury'"
|
||||
>
|
||||
مدیریت مالی
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="active === 'treasury'" class="treasury">
|
||||
<p class="muted">
|
||||
این برگه فقط برای همین کاربر است. «مثل نقش» یعنی همان دسترسی مالی نقش بماند.
|
||||
در حالت سفارشی، اگر هیچ بخش ریزی تیک نخورد همه بخش‌ها به‌جز حقوق باز می‌مانند و حقوق جداست.
|
||||
اگر هیچ حسابی انتخاب نشود همه حساب‌ها باز است.
|
||||
</p>
|
||||
<label class="choice">
|
||||
<input
|
||||
type="radio"
|
||||
name="user-treasury"
|
||||
:checked="treasuryAccess == null"
|
||||
</a-typography-text>
|
||||
<a-tabs v-else v-model:activeKey="active">
|
||||
<a-tab-pane
|
||||
v-for="s in visibleSections"
|
||||
:key="s"
|
||||
:tab="DATA_ACCESS_SECTION_LABELS[s]"
|
||||
>
|
||||
<DataAccessEditor
|
||||
:section="s"
|
||||
:model-value="sectionValue(s)"
|
||||
:groups="customerGroups"
|
||||
:stages="s === 'leads' ? leadStages : s === 'sales' ? dealStages : s === 'activities' ? activityStages : s === 'projects' ? projectStages : []"
|
||||
:pipelines="pipelines"
|
||||
:boards="s === 'activities' ? activityBoards : s === 'projects' ? projectBoards : []"
|
||||
:activity-types="s === 'activities' ? activityTypes : s === 'routines' ? routineCategories : []"
|
||||
:import-sources="importSources"
|
||||
:import-sources-ready="importSourcesReady"
|
||||
:import-sources-failed="importSourcesFailed"
|
||||
:disabled="disabled || dataLocked"
|
||||
:compact="compact"
|
||||
@update:model-value="setSection(s, $event)"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane v-if="showTreasury" key="treasury" tab="مدیریت مالی">
|
||||
<a-space direction="vertical">
|
||||
<a-typography-text type="secondary">
|
||||
این برگه فقط برای همین کاربر است. «مثل نقش» یعنی همان دسترسی مالی نقش بماند.
|
||||
در حالت سفارشی، اگر هیچ بخش ریزی تیک نخورد همه بخش‌ها به‌جز حقوق باز می‌مانند و حقوق جداست.
|
||||
اگر هیچ حسابی انتخاب نشود همه حساب‌ها باز است.
|
||||
</a-typography-text>
|
||||
<a-radio-group
|
||||
:value="treasuryAccess == null ? 'role' : 'custom'"
|
||||
:disabled="disabled"
|
||||
@change="patchTreasury(null)"
|
||||
/>
|
||||
مثل نقش
|
||||
</label>
|
||||
<label class="choice">
|
||||
<input
|
||||
type="radio"
|
||||
name="user-treasury"
|
||||
:checked="treasuryAccess != null"
|
||||
:disabled="disabled"
|
||||
@change="patchTreasury(treasuryAccess ?? emptyTreasuryAccess())"
|
||||
/>
|
||||
سفارشی برای این کاربر
|
||||
</label>
|
||||
<template v-if="treasuryAccess">
|
||||
<label class="choice">
|
||||
<input
|
||||
type="checkbox"
|
||||
@change="onTreasuryModeChange"
|
||||
>
|
||||
<a-space direction="vertical">
|
||||
<a-radio value="role">مثل نقش</a-radio>
|
||||
<a-radio value="custom">سفارشی برای این کاربر</a-radio>
|
||||
</a-space>
|
||||
</a-radio-group>
|
||||
<template v-if="treasuryAccess">
|
||||
<a-checkbox
|
||||
:checked="treasuryAccess.enabled"
|
||||
:disabled="disabled"
|
||||
@change="patchTreasury({ ...treasuryAccess, enabled: !treasuryAccess.enabled })"
|
||||
/>
|
||||
دسترسی به مدیریت مالی
|
||||
</label>
|
||||
<template v-if="treasuryAccess.enabled">
|
||||
<label v-for="perm in treasurySections" :key="perm.key" class="choice sub">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="treasuryAccess.sections.includes(perm.key)"
|
||||
:disabled="disabled"
|
||||
@change="toggleTreasurySection(perm.key)"
|
||||
/>
|
||||
{{ perm.label }}
|
||||
</label>
|
||||
<label class="choice">
|
||||
<input
|
||||
type="checkbox"
|
||||
>
|
||||
دسترسی به مدیریت مالی
|
||||
</a-checkbox>
|
||||
<template v-if="treasuryAccess.enabled">
|
||||
<a-space direction="vertical">
|
||||
<a-checkbox
|
||||
v-for="perm in treasurySections"
|
||||
:key="perm.key"
|
||||
:checked="treasuryAccess.sections.includes(perm.key)"
|
||||
:disabled="disabled"
|
||||
@change="toggleTreasurySection(perm.key)"
|
||||
>
|
||||
{{ perm.label }}
|
||||
</a-checkbox>
|
||||
</a-space>
|
||||
<a-checkbox
|
||||
:checked="treasuryAccess.ownAccounts"
|
||||
:disabled="disabled"
|
||||
@change="patchTreasury({ ...treasuryAccess, ownAccounts: !treasuryAccess.ownAccounts })"
|
||||
/>
|
||||
حساب‌هایی که خودش مسئول آن‌هاست
|
||||
</label>
|
||||
<p class="muted">حساب‌های دیگر</p>
|
||||
<input v-model="treasuryAccountQuery" placeholder="جستجوی حساب" :disabled="disabled" />
|
||||
<label v-for="account in filteredTreasuryAccounts" :key="account.id" class="choice">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="treasuryAccess.accountIds.includes(account.id)"
|
||||
>
|
||||
حساب‌هایی که خودش مسئول آن‌هاست
|
||||
</a-checkbox>
|
||||
<a-typography-text type="secondary">حساب‌های دیگر</a-typography-text>
|
||||
<a-input
|
||||
v-model:value="treasuryAccountQuery"
|
||||
placeholder="جستجوی حساب"
|
||||
:disabled="disabled"
|
||||
@change="toggleTreasuryAccount(account.id)"
|
||||
allow-clear
|
||||
/>
|
||||
{{ account.name }}
|
||||
<template v-if="account.responsibleName"> — مسئول: {{ account.responsibleName }}</template>
|
||||
</label>
|
||||
<p v-if="!treasuryAccounts.length" class="muted">حسابی برای انتخاب نیست.</p>
|
||||
<a-space direction="vertical">
|
||||
<a-checkbox
|
||||
v-for="account in filteredTreasuryAccounts"
|
||||
:key="account.id"
|
||||
:checked="treasuryAccess.accountIds.includes(account.id)"
|
||||
:disabled="disabled"
|
||||
@change="toggleTreasuryAccount(account.id)"
|
||||
>
|
||||
{{ account.name }}
|
||||
<template v-if="account.responsibleName"> — مسئول: {{ account.responsibleName }}</template>
|
||||
</a-checkbox>
|
||||
</a-space>
|
||||
<a-typography-text v-if="!treasuryAccounts.length" type="secondary">
|
||||
حسابی برای انتخاب نیست.
|
||||
</a-typography-text>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<DataAccessEditor
|
||||
v-else
|
||||
:key="active"
|
||||
:section="editorSection"
|
||||
:model-value="sectionValue(editorSection)"
|
||||
:groups="customerGroups"
|
||||
:stages="stagesForActive"
|
||||
:pipelines="pipelines"
|
||||
:boards="boardsForActive"
|
||||
:activity-types="typesForActive"
|
||||
:import-sources="importSources"
|
||||
:import-sources-ready="importSourcesReady"
|
||||
:import-sources-failed="importSourcesFailed"
|
||||
:disabled="disabled || dataLocked"
|
||||
:compact="compact"
|
||||
@update:model-value="setSection(editorSection, $event)"
|
||||
/>
|
||||
</template>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dap {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.tab {
|
||||
font: inherit;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
border-radius: 999px;
|
||||
padding: 0.3rem 0.7rem;
|
||||
cursor: pointer;
|
||||
color: #475569;
|
||||
}
|
||||
.tab.on {
|
||||
border-color: #0f766e;
|
||||
background: #f0fdfa;
|
||||
color: #0f766e;
|
||||
font-weight: 600;
|
||||
}
|
||||
.muted {
|
||||
color: #64748b;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.treasury {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
.choice {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.4rem;
|
||||
align-items: center;
|
||||
}
|
||||
.choice.sub {
|
||||
padding-inline-start: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
@@ -10,11 +10,11 @@ import {
|
||||
Input as AInput,
|
||||
List as AList,
|
||||
Space as ASpace,
|
||||
Spin as ASpin,
|
||||
Tag as ATag,
|
||||
Textarea as ATextarea,
|
||||
Typography,
|
||||
} from 'ant-design-vue';
|
||||
import { CrmSkeleton, CrmSkeletonList } from '@/components/skeleton';
|
||||
|
||||
const ASpaceCompact = ASpace.Compact;
|
||||
const AListItem = AList.Item;
|
||||
@@ -259,7 +259,8 @@ onMounted(load);
|
||||
:style="{ marginTop: '12px' }"
|
||||
/>
|
||||
|
||||
<a-spin :spinning="loading">
|
||||
<CrmSkeleton :loading="loading">
|
||||
<CrmSkeletonList :rows="5">
|
||||
<a-list
|
||||
v-if="items.length"
|
||||
item-layout="horizontal"
|
||||
@@ -304,6 +305,7 @@ onMounted(load);
|
||||
description="هنوز چیزی در تایم‌لاین نیست. یک یادداشت یا فعالیت ثبت کنید."
|
||||
:style="{ marginTop: '16px' }"
|
||||
/>
|
||||
</a-spin>
|
||||
</CrmSkeletonList>
|
||||
</CrmSkeleton>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,568 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import type {
|
||||
ExcelFieldOption,
|
||||
ExcelImportPrepareStatus,
|
||||
ExcelPreviewResult,
|
||||
ImportContactsResult,
|
||||
} from '@mento/shared';
|
||||
import {
|
||||
previewExcelClient,
|
||||
readMappedRowsClient,
|
||||
type ClientExcelReadOptions,
|
||||
} from '@/lib/excel-client';
|
||||
import { UiBusyOverlay, UiButton, UiModal, UiSelect } from '@/components/ui';
|
||||
|
||||
const props = defineProps<{
|
||||
previewPath: string;
|
||||
importPath: string;
|
||||
/** اگر باشد: ابتدا فقط فایل خوانده می‌شود، بعد تکه‌تکه وارد می‌شود (برای فایل‌های خیلی بزرگ) */
|
||||
preparePath?: string;
|
||||
/**
|
||||
* ایمپورت مرورگرگرا: اکسل در مرورگر خوانده می‌شود و فقط JSON کوچک به API می‌رود.
|
||||
* برای فایل‌های ده‌ها هزار ردیفی (جلوگیری از ۵۰۲ nginx).
|
||||
*/
|
||||
rowsImportPath?: string;
|
||||
clientAliases?: Record<string, string>;
|
||||
clientFields?: ExcelFieldOption[];
|
||||
/** تشخیص خروجی بدون‌هدر (مثل فعالیت دیدار) */
|
||||
clientReadOptions?: ClientExcelReadOptions;
|
||||
disabled?: boolean;
|
||||
}>();
|
||||
|
||||
const useClientImport = computed(
|
||||
() =>
|
||||
Boolean(
|
||||
props.rowsImportPath &&
|
||||
props.clientAliases &&
|
||||
props.clientFields?.length,
|
||||
),
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
start: [];
|
||||
done: [result: ImportContactsResult];
|
||||
fail: [message: string];
|
||||
settled: [];
|
||||
}>();
|
||||
|
||||
const input = ref<HTMLInputElement | null>(null);
|
||||
const pending = ref<File | null>(null);
|
||||
const preview = ref<ExcelPreviewResult | null>(null);
|
||||
const mapping = reactive<Record<string, string>>({});
|
||||
const submitting = ref(false);
|
||||
const phase = ref<'idle' | 'preview' | 'import'>('idle');
|
||||
const progressLabel = ref('');
|
||||
/** درصد ۰–۱۰۰؛ در مرحلهٔ خواندن فایل null */
|
||||
const progressPct = ref<number | null>(null);
|
||||
|
||||
const requiredKeys = computed(
|
||||
() => preview.value?.fields.filter((f) => f.required).map((f) => f.key) ?? [],
|
||||
);
|
||||
|
||||
const mappedFields = computed(() => new Set(Object.values(mapping).filter(Boolean)));
|
||||
|
||||
const canImport = computed(() => requiredKeys.value.every((key) => mappedFields.value.has(key)));
|
||||
|
||||
const busyOpen = computed(() => submitting.value && phase.value !== 'idle');
|
||||
const busyMessage = computed(() => {
|
||||
if (phase.value === 'import') {
|
||||
return progressLabel.value || 'در حال ورود اطلاعات از اکسل…';
|
||||
}
|
||||
return 'در حال خواندن و بررسی فایل اکسل…';
|
||||
});
|
||||
const busyProgress = computed(() =>
|
||||
phase.value === 'import' ? progressPct.value : null,
|
||||
);
|
||||
|
||||
function pick() {
|
||||
if (props.disabled || submitting.value) return;
|
||||
input.value?.click();
|
||||
}
|
||||
|
||||
function reset() {
|
||||
pending.value = null;
|
||||
preview.value = null;
|
||||
submitting.value = false;
|
||||
phase.value = 'idle';
|
||||
progressLabel.value = '';
|
||||
progressPct.value = null;
|
||||
for (const key of Object.keys(mapping)) delete mapping[key];
|
||||
}
|
||||
|
||||
function closeMapper() {
|
||||
if (submitting.value) return;
|
||||
reset();
|
||||
emit('settled');
|
||||
}
|
||||
|
||||
function setColumnField(header: string, field: string) {
|
||||
if (field) {
|
||||
for (const [col, current] of Object.entries(mapping)) {
|
||||
if (col !== header && current === field) mapping[col] = '';
|
||||
}
|
||||
}
|
||||
mapping[header] = field;
|
||||
}
|
||||
|
||||
function mergeImportResults(
|
||||
acc: ImportContactsResult,
|
||||
part: ImportContactsResult,
|
||||
): ImportContactsResult {
|
||||
const errors = [...acc.errors, ...(part.errors ?? [])];
|
||||
return {
|
||||
created: acc.created + (part.created ?? 0),
|
||||
skipped: acc.skipped + (part.skipped ?? 0),
|
||||
errors: errors.slice(0, 200),
|
||||
boardId: part.boardId ?? acc.boardId,
|
||||
boards: part.boards?.length ? part.boards : acc.boards,
|
||||
sessionId: part.sessionId,
|
||||
total: part.total ?? acc.total,
|
||||
processed: part.processed ?? acc.processed,
|
||||
hasMore: part.hasMore,
|
||||
nextOffset: part.nextOffset,
|
||||
};
|
||||
}
|
||||
|
||||
async function postImportChunk(opts: {
|
||||
file?: File;
|
||||
map?: Record<string, string>;
|
||||
sessionId?: string;
|
||||
offset?: number;
|
||||
}) {
|
||||
const form = new FormData();
|
||||
if (opts.file) form.append('file', opts.file);
|
||||
if (opts.map && Object.values(opts.map).some(Boolean)) {
|
||||
form.append('mapping', JSON.stringify(opts.map));
|
||||
}
|
||||
if (opts.sessionId) form.append('sessionId', opts.sessionId);
|
||||
if (opts.offset != null) form.append('offset', String(opts.offset));
|
||||
form.append('limit', '250');
|
||||
const { data } = await api.post<ImportContactsResult>(props.importPath, form, {
|
||||
headers: { 'Content-Type': undefined },
|
||||
// خواندن فایل‌های خیلی بزرگ در مرحلهٔ اول ممکن است طول بکشد
|
||||
timeout: opts.file ? 10 * 60 * 1000 : 3 * 60 * 1000,
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
function updateImportProgress(processed: number, total: number) {
|
||||
if (total <= 0) {
|
||||
progressPct.value = null;
|
||||
progressLabel.value = 'در حال ورود اطلاعات از اکسل…';
|
||||
return;
|
||||
}
|
||||
const pct = Math.max(0, Math.min(100, Math.round((processed / total) * 100)));
|
||||
progressPct.value = pct;
|
||||
progressLabel.value = `ورود فایل: ${processed.toLocaleString('fa-IR')} از ${total.toLocaleString('fa-IR')} ردیف`;
|
||||
}
|
||||
|
||||
function sleep(ms: number) {
|
||||
return new Promise((r) => setTimeout(r, ms));
|
||||
}
|
||||
|
||||
async function postPrepare(file: File, map?: Record<string, string>) {
|
||||
if (!props.preparePath) {
|
||||
throw new Error('preparePath تنظیم نشده');
|
||||
}
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
if (map && Object.values(map).some(Boolean)) {
|
||||
form.append('mapping', JSON.stringify(map));
|
||||
}
|
||||
// فقط آپلود — پارس روی سرور ناهمگام است؛ تایم‌اوت کوتاه کافی است
|
||||
const { data } = await api.post<ImportContactsResult>(props.preparePath, form, {
|
||||
headers: { 'Content-Type': undefined },
|
||||
timeout: 3 * 60 * 1000,
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
async function waitPrepareReady(sessionId: string) {
|
||||
if (!props.preparePath) throw new Error('preparePath تنظیم نشده');
|
||||
const statusUrl = `${props.preparePath}/${sessionId}`;
|
||||
const started = Date.now();
|
||||
const maxMs = 15 * 60 * 1000;
|
||||
while (Date.now() - started < maxMs) {
|
||||
const { data } = await api.get<ExcelImportPrepareStatus>(statusUrl, {
|
||||
timeout: 30_000,
|
||||
});
|
||||
if (data.status === 'ready') {
|
||||
progressLabel.value = `فایل آماده شد — ${data.total.toLocaleString('fa-IR')} ردیف`;
|
||||
return data;
|
||||
}
|
||||
if (data.status === 'error') {
|
||||
throw new Error(data.error || 'آماده‌سازی فایل اکسل ناموفق بود');
|
||||
}
|
||||
const parsed = data.parsed || 0;
|
||||
progressPct.value = null;
|
||||
progressLabel.value = parsed
|
||||
? `در حال خواندن فایل روی سرور… ${parsed.toLocaleString('fa-IR')} ردیف`
|
||||
: 'در حال خواندن فایل روی سرور… لطفاً صبر کنید';
|
||||
await sleep(1200);
|
||||
}
|
||||
throw new Error('آماده‌سازی فایل بیش از حد طول کشید. دوباره تلاش کنید.');
|
||||
}
|
||||
|
||||
async function runClientRowsImport(file: File, map?: Record<string, string>) {
|
||||
if (!props.rowsImportPath || !props.clientAliases) {
|
||||
throw new Error('پیکربندی ایمپورت مرورگر ناقص است');
|
||||
}
|
||||
phase.value = 'import';
|
||||
progressLabel.value = 'در حال خواندن فایل در مرورگر…';
|
||||
progressPct.value = 0;
|
||||
|
||||
const rows = await readMappedRowsClient(
|
||||
file,
|
||||
props.clientAliases,
|
||||
map,
|
||||
props.clientReadOptions,
|
||||
);
|
||||
const total = rows.length;
|
||||
if (total > 100_000) {
|
||||
return {
|
||||
created: 0,
|
||||
skipped: 0,
|
||||
errors: [{ row: 1, message: 'فایل بیش از ۱۰۰۰۰۰ ردیف دارد. فایل را تقسیم کنید.' }],
|
||||
total,
|
||||
processed: 0,
|
||||
hasMore: false,
|
||||
};
|
||||
}
|
||||
|
||||
updateImportProgress(0, total);
|
||||
let acc: ImportContactsResult = { created: 0, skipped: 0, errors: [] };
|
||||
let sessionId: string | undefined;
|
||||
const chunkSize = 60;
|
||||
|
||||
for (let offset = 0; offset < total; offset += chunkSize) {
|
||||
const slice = rows.slice(offset, offset + chunkSize);
|
||||
const { data: part } = await api.post<ImportContactsResult>(
|
||||
props.rowsImportPath,
|
||||
{
|
||||
rows: slice,
|
||||
offset,
|
||||
total,
|
||||
sessionId,
|
||||
},
|
||||
{ timeout: 120_000 },
|
||||
);
|
||||
acc = mergeImportResults(acc, part);
|
||||
updateImportProgress(part.processed ?? offset + slice.length, total);
|
||||
if (part.errors?.some((e) => e.row === 1 && /حداکثر|بیش از/.test(e.message))) {
|
||||
break;
|
||||
}
|
||||
sessionId = part.sessionId;
|
||||
if (!part.hasMore) break;
|
||||
}
|
||||
|
||||
updateImportProgress(total, total);
|
||||
return acc;
|
||||
}
|
||||
|
||||
async function runChunkedImport(file: File, map?: Record<string, string>) {
|
||||
if (useClientImport.value) {
|
||||
return runClientRowsImport(file, map);
|
||||
}
|
||||
|
||||
phase.value = 'import';
|
||||
progressLabel.value = 'در حال ارسال فایل…';
|
||||
progressPct.value = 0;
|
||||
|
||||
let acc: ImportContactsResult = { created: 0, skipped: 0, errors: [] };
|
||||
let sessionId: string | undefined;
|
||||
let offset = 0;
|
||||
let guard = 0;
|
||||
const maxChunks = 2000;
|
||||
|
||||
if (props.preparePath) {
|
||||
const prep = await postPrepare(file, map);
|
||||
if (!prep.sessionId) {
|
||||
throw new Error(prep.errors[0]?.message || 'آماده‌سازی فایل ناموفق بود');
|
||||
}
|
||||
sessionId = prep.sessionId;
|
||||
progressLabel.value = 'در حال خواندن فایل روی سرور…';
|
||||
const ready = await waitPrepareReady(sessionId);
|
||||
if (!ready.total) {
|
||||
return {
|
||||
...acc,
|
||||
total: 0,
|
||||
processed: 0,
|
||||
hasMore: false,
|
||||
errors: ready.error
|
||||
? [{ row: 1, message: ready.error }]
|
||||
: [{ row: 1, message: 'هیچ ردیف داده‌ای در فایل نیست' }],
|
||||
};
|
||||
}
|
||||
updateImportProgress(0, ready.total);
|
||||
}
|
||||
|
||||
while (guard < maxChunks) {
|
||||
guard += 1;
|
||||
const part = await postImportChunk({
|
||||
file: sessionId ? undefined : file,
|
||||
map: sessionId ? undefined : map,
|
||||
sessionId,
|
||||
offset: sessionId ? offset : undefined,
|
||||
});
|
||||
acc = mergeImportResults(acc, part);
|
||||
|
||||
const total = part.total ?? 0;
|
||||
const processed = part.processed ?? 0;
|
||||
updateImportProgress(processed, total);
|
||||
|
||||
if (
|
||||
part.errors?.some((e) => e.row === 1 && /بیش از .* ردیف/.test(e.message))
|
||||
) {
|
||||
break;
|
||||
}
|
||||
|
||||
if (!part.hasMore || !part.sessionId) {
|
||||
if (total > 0) updateImportProgress(total, total);
|
||||
break;
|
||||
}
|
||||
sessionId = part.sessionId;
|
||||
offset = part.nextOffset ?? processed;
|
||||
}
|
||||
|
||||
if (guard >= maxChunks && acc.hasMore) {
|
||||
acc.errors = [
|
||||
...acc.errors,
|
||||
{
|
||||
row: 1,
|
||||
message: 'ورود به‌خاطر تعداد مراحل زیاد متوقف شد. از جایی که مانده ادامه دهید یا فایل را تقسیم کنید.',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
return acc;
|
||||
}
|
||||
|
||||
function apiMessage(e: unknown, fallback: string) {
|
||||
if (!axios.isAxiosError(e)) {
|
||||
return e instanceof Error && e.message ? e.message : fallback;
|
||||
}
|
||||
if (e.code === 'ECONNABORTED' || /timeout/i.test(e.message)) {
|
||||
return 'مهلت درخواست تمام شد — فایل خیلی بزرگ است یا سرور دیر جواب داد. دوباره تلاش کنید.';
|
||||
}
|
||||
if (!e.response) {
|
||||
return 'ارتباط با سرور برقرار نشد. اتصال را بررسی کنید و دوباره تلاش کنید.';
|
||||
}
|
||||
const status = e.response.status;
|
||||
const data = e.response.data as { message?: string | string[] } | string | undefined;
|
||||
let msg: string | undefined;
|
||||
if (typeof data === 'string' && data.trim() && !data.trim().startsWith('<')) {
|
||||
msg = data.trim().slice(0, 280);
|
||||
} else if (data && typeof data === 'object') {
|
||||
const m = data.message;
|
||||
msg = Array.isArray(m) ? m.join('، ') : m;
|
||||
}
|
||||
if (msg) return msg;
|
||||
if (status === 413) return 'حجم فایل بیش از حد مجاز سرور است.';
|
||||
if (status === 502 || status === 504) {
|
||||
return 'سرور میانی قطع شد (معمولاً به‌خاطر حجم/زمان فایل). چند دقیقه بعد دوباره تلاش کنید.';
|
||||
}
|
||||
return `${fallback} (کد ${status})`;
|
||||
}
|
||||
|
||||
async function onFile(ev: Event) {
|
||||
const el = ev.target as HTMLInputElement;
|
||||
const file = el.files?.[0];
|
||||
el.value = '';
|
||||
if (!file) return;
|
||||
emit('start');
|
||||
submitting.value = true;
|
||||
phase.value = 'preview';
|
||||
try {
|
||||
let data: ExcelPreviewResult;
|
||||
if (useClientImport.value && props.clientAliases && props.clientFields) {
|
||||
progressLabel.value = 'در حال خواندن فایل در مرورگر…';
|
||||
data = await previewExcelClient(
|
||||
file,
|
||||
props.clientAliases,
|
||||
props.clientFields,
|
||||
props.clientReadOptions,
|
||||
);
|
||||
} else {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
const res = await api.post<ExcelPreviewResult>(props.previewPath, form, {
|
||||
headers: { 'Content-Type': undefined },
|
||||
timeout: 5 * 60 * 1000,
|
||||
});
|
||||
data = res.data;
|
||||
}
|
||||
if (!data.needsMapping) {
|
||||
try {
|
||||
emit('done', await runChunkedImport(file));
|
||||
reset();
|
||||
emit('settled');
|
||||
} catch (impErr) {
|
||||
emit('fail', apiMessage(impErr, 'ایمپورت ناموفق بود'));
|
||||
reset();
|
||||
emit('settled');
|
||||
}
|
||||
return;
|
||||
}
|
||||
pending.value = file;
|
||||
preview.value = data;
|
||||
for (const col of data.columns) {
|
||||
mapping[col.header] = data.suggested[col.header] ?? '';
|
||||
}
|
||||
phase.value = 'idle';
|
||||
submitting.value = false;
|
||||
// Allow parent toolbar while user maps columns.
|
||||
emit('settled');
|
||||
} catch (e) {
|
||||
emit('fail', apiMessage(e, 'خواندن فایل اکسل ناموفق بود'));
|
||||
reset();
|
||||
emit('settled');
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmMapping() {
|
||||
if (!pending.value || !canImport.value || submitting.value) return;
|
||||
emit('start');
|
||||
submitting.value = true;
|
||||
phase.value = 'import';
|
||||
try {
|
||||
emit('done', await runChunkedImport(pending.value, { ...mapping }));
|
||||
reset();
|
||||
emit('settled');
|
||||
} catch (e) {
|
||||
emit('fail', apiMessage(e, 'ایمپورت ناموفق بود'));
|
||||
phase.value = 'idle';
|
||||
submitting.value = false;
|
||||
progressLabel.value = '';
|
||||
progressPct.value = null;
|
||||
emit('settled');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="excel-import" :class="{ isBusy: submitting }" @click.stop="pick">
|
||||
<slot :loading="submitting" :disabled="disabled || submitting" />
|
||||
<input
|
||||
ref="input"
|
||||
type="file"
|
||||
accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
hidden
|
||||
:disabled="disabled || submitting"
|
||||
@change="onFile"
|
||||
@click.stop
|
||||
/>
|
||||
</span>
|
||||
|
||||
<UiBusyOverlay
|
||||
:open="busyOpen"
|
||||
:message="busyMessage"
|
||||
:progress="busyProgress"
|
||||
nest
|
||||
/>
|
||||
|
||||
<UiModal :open="!!preview" title="تطبیق ستون‌های اکسل" @close="closeMapper">
|
||||
<p class="lead">
|
||||
ستون‌های این فایل با قالب سیستم یکی نیست. مشخص کنید هر ستون فایل در کدام فیلد ریخته شود.
|
||||
</p>
|
||||
<p v-if="preview?.largeFile" class="large-hint">
|
||||
فایل بزرگ است ({{ (preview.rowCount ?? 0).toLocaleString('fa-IR') }} ردیف) — ورود به‌صورت چندمرحله‌ای انجام می‌شود.
|
||||
</p>
|
||||
<div class="rows">
|
||||
<div v-for="col in preview?.columns ?? []" :key="col.header" class="row">
|
||||
<div class="source">
|
||||
<strong>{{ col.header }}</strong>
|
||||
<small v-if="col.samples.length">نمونه: {{ col.samples.join('، ') }}</small>
|
||||
</div>
|
||||
<UiSelect
|
||||
:model-value="mapping[col.header] ?? ''"
|
||||
:disabled="submitting"
|
||||
@update:model-value="setColumnField(col.header, $event)"
|
||||
>
|
||||
<option value="">نادیده بگیر</option>
|
||||
<option v-for="field in preview?.fields ?? []" :key="field.key" :value="field.key">
|
||||
{{ field.label }}{{ field.required ? ' *' : '' }}
|
||||
</option>
|
||||
</UiSelect>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="!canImport" class="hint">فیلدهای ستاره‌دار را حتماً به یک ستون وصل کنید.</p>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" :disabled="submitting" @click="closeMapper">انصراف</UiButton>
|
||||
<UiButton :disabled="!canImport" :loading="submitting" @click="confirmMapping">
|
||||
ورود فایل
|
||||
</UiButton>
|
||||
</template>
|
||||
</UiModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.excel-import {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.excel-import.isBusy {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin: 0 0 1rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.large-hint {
|
||||
margin: -0.35rem 0 1rem;
|
||||
padding: 0.55rem 0.75rem;
|
||||
border-radius: 10px;
|
||||
background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent);
|
||||
color: var(--fg, inherit);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.rows {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.source {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.source strong {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.source small {
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0.85rem 0 0;
|
||||
color: var(--danger);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
Space as ASpace,
|
||||
Typography,
|
||||
} from 'ant-design-vue';
|
||||
import { PrinterOutlined } from '@ant-design/icons-vue';
|
||||
import { PrinterOutlined } from '@/icons/ant-bridge';
|
||||
import { brand } from '@mento/shared';
|
||||
import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
|
||||
import { formatMoney, currencySuffix } from '@/lib/money';
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
ClockCircleOutlined,
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
} from '@/icons/ant-bridge';
|
||||
import {
|
||||
addJalaliMonths,
|
||||
dateToJalali,
|
||||
@@ -30,10 +30,6 @@ const props = withDefaults(
|
||||
placeholder?: string;
|
||||
clearable?: boolean;
|
||||
icon?: 'calendar' | 'clock' | 'bell';
|
||||
/** اگر داده شود، متن باکس به‌جای تاریخ خام همین مقدار است. */
|
||||
displayText?: string;
|
||||
/** نمایی که با باز شدن پنل دیده می‌شود. */
|
||||
startView?: 'days' | 'months' | 'years';
|
||||
}>(),
|
||||
{
|
||||
mode: 'date',
|
||||
@@ -41,8 +37,6 @@ const props = withDefaults(
|
||||
disabled: false,
|
||||
clearable: true,
|
||||
icon: undefined,
|
||||
displayText: '',
|
||||
startView: 'days',
|
||||
},
|
||||
);
|
||||
|
||||
@@ -58,8 +52,6 @@ const hourColRef = ref<HTMLElement | null>(null);
|
||||
const minuteColRef = ref<HTMLElement | null>(null);
|
||||
const top = ref(0);
|
||||
const left = ref(0);
|
||||
/** بالای مودال Ant (حدود ۱۰۰۰) تا تقویم پشت پنجره نماند */
|
||||
const popupZ = ref(120);
|
||||
const todayJ = dateToJalali(new Date());
|
||||
const cursor = ref<{ jy: number; jm: number }>({ jy: todayJ.jy, jm: todayJ.jm });
|
||||
const draftHour = ref(9);
|
||||
@@ -93,7 +85,6 @@ const triggerIcon = computed(() => {
|
||||
});
|
||||
|
||||
const display = computed(() => {
|
||||
if (props.displayText) return props.displayText;
|
||||
if (props.mode === 'time') {
|
||||
const match = /^(\d{1,2}):(\d{2})$/.exec(model.value);
|
||||
if (!match) return '';
|
||||
@@ -327,46 +318,21 @@ function place() {
|
||||
const panel = panelRef.value;
|
||||
if (!trigger) return;
|
||||
const rect = trigger.getBoundingClientRect();
|
||||
const width =
|
||||
panel?.offsetWidth ||
|
||||
(props.mode === 'time' ? (isMobile.value ? 340 : 280) : 328);
|
||||
const height =
|
||||
panel?.offsetHeight ||
|
||||
(props.mode === 'time' ? (isMobile.value ? 460 : 320) : 340);
|
||||
const margin = 8;
|
||||
const width = panel?.offsetWidth || (props.mode === 'time' ? (isMobile.value ? 340 : 280) : 320);
|
||||
const height = panel?.offsetHeight || (props.mode === 'time' ? (isMobile.value ? 460 : 320) : 360);
|
||||
let nextLeft = rect.left;
|
||||
if (getComputedStyle(document.documentElement).direction === 'rtl') {
|
||||
nextLeft = rect.right - width;
|
||||
}
|
||||
nextLeft = Math.min(
|
||||
Math.max(margin, nextLeft),
|
||||
Math.max(margin, window.innerWidth - width - margin),
|
||||
);
|
||||
const spaceBelow = window.innerHeight - rect.bottom - margin * 2;
|
||||
const spaceAbove = rect.top - margin * 2;
|
||||
let nextTop: number;
|
||||
if (height <= spaceBelow) {
|
||||
nextTop = rect.bottom + margin;
|
||||
} else if (height <= spaceAbove) {
|
||||
nextTop = rect.top - height - margin;
|
||||
} else if (spaceBelow >= spaceAbove) {
|
||||
nextTop = Math.max(margin, window.innerHeight - height - margin);
|
||||
} else {
|
||||
nextTop = margin;
|
||||
nextLeft = Math.min(Math.max(8, nextLeft), window.innerWidth - width - 8);
|
||||
let nextTop = rect.bottom + 8;
|
||||
if (nextTop + height > window.innerHeight - 8) {
|
||||
nextTop = Math.max(8, rect.top - height - 8);
|
||||
}
|
||||
left.value = nextLeft;
|
||||
top.value = nextTop;
|
||||
}
|
||||
|
||||
function liftAboveOverlays() {
|
||||
let z = 120;
|
||||
for (const el of document.querySelectorAll('.ant-modal-wrap, .ant-drawer, .ant-popover, [role="dialog"], [data-lead-filter]')) {
|
||||
const zi = Number.parseInt(window.getComputedStyle(el).zIndex, 10);
|
||||
if (Number.isFinite(zi)) z = Math.max(z, zi + 20);
|
||||
}
|
||||
popupZ.value = z;
|
||||
}
|
||||
|
||||
function onWindowChange() {
|
||||
syncViewport();
|
||||
if (open.value) place();
|
||||
@@ -375,10 +341,9 @@ function onWindowChange() {
|
||||
async function show() {
|
||||
if (props.disabled) return;
|
||||
syncDraftFrom(parsed.value);
|
||||
calView.value = props.startView;
|
||||
calView.value = 'days';
|
||||
clockFace.value = 'hour';
|
||||
syncViewport();
|
||||
liftAboveOverlays();
|
||||
open.value = true;
|
||||
await nextTick();
|
||||
place();
|
||||
@@ -573,7 +538,7 @@ onBeforeUnmount(() => {
|
||||
'is-desktop': !isMobile,
|
||||
}"
|
||||
role="dialog"
|
||||
:style="{ top: `${top}px`, left: `${left}px`, zIndex: popupZ }"
|
||||
:style="{ top: `${top}px`, left: `${left}px` }"
|
||||
>
|
||||
<header v-if="mode !== 'time'" class="nav">
|
||||
<a-button type="text" class="nav-btn" :aria-label="navLabels.forward" @click="navStep(1)">
|
||||
@@ -761,7 +726,7 @@ onBeforeUnmount(() => {
|
||||
>
|
||||
پاک کردن
|
||||
</a-button>
|
||||
<a-button type="primary" @click="hide">تأیید</a-button>
|
||||
<a-button type="primary" class="done" @click="hide">تأیید</a-button>
|
||||
</footer>
|
||||
</div>
|
||||
</Teleport>
|
||||
@@ -886,11 +851,10 @@ onBeforeUnmount(() => {
|
||||
.panel {
|
||||
position: fixed;
|
||||
z-index: 120;
|
||||
box-sizing: border-box;
|
||||
width: min(20.5rem, calc(100vw - 16px));
|
||||
/* تقویم باید یکجا دیده شود؛ اسکرول داخل پنل گیج‌کننده است */
|
||||
max-height: none;
|
||||
overflow: hidden;
|
||||
max-height: calc(100vh - 16px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
|
||||
@@ -898,13 +862,6 @@ onBeforeUnmount(() => {
|
||||
font-family: IRANSans, Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
@media (max-height: 420px) {
|
||||
.panel {
|
||||
max-height: calc(100vh - 16px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-time {
|
||||
width: min(22.5rem, calc(100vw - 16px));
|
||||
}
|
||||
@@ -936,40 +893,45 @@ onBeforeUnmount(() => {
|
||||
|
||||
.pick-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.35rem;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.panel :deep(.pick-cell.ant-btn) {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
height: 44px !important;
|
||||
padding-inline: 0 !important;
|
||||
.panel :deep(.ant-btn.pick-cell) {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 44px;
|
||||
margin: 0;
|
||||
padding: 0 4px;
|
||||
border-radius: var(--radius);
|
||||
color: #0f172a;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.panel :deep(.pick-cell.today) {
|
||||
.panel :deep(.ant-btn.pick-cell.today) {
|
||||
box-shadow: inset 0 0 0 1px #99f6e4;
|
||||
}
|
||||
|
||||
.panel :deep(.pick-cell.on),
|
||||
.panel :deep(.pick-cell.ant-btn:hover) {
|
||||
.panel :deep(.ant-btn.pick-cell.on),
|
||||
.panel :deep(.ant-btn.pick-cell:hover) {
|
||||
background: #0d9488;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
.panel :deep(.ant-btn.nav-btn) {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
background: #f1f5f9;
|
||||
color: #0f766e;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -982,7 +944,6 @@ onBeforeUnmount(() => {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 0.15rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -993,43 +954,40 @@ onBeforeUnmount(() => {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.panel :deep(.day.ant-btn) {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
height: 34px !important;
|
||||
padding: 0 !important;
|
||||
.panel :deep(.ant-btn.day) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 34px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
background: none;
|
||||
color: #0f172a;
|
||||
font: inherit;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.panel :deep(.day.ant-btn > span) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.panel :deep(.day.mute) {
|
||||
.panel :deep(.ant-btn.day.mute) {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.panel :deep(.day.today) {
|
||||
.panel :deep(.ant-btn.day.today) {
|
||||
box-shadow: inset 0 0 0 1px #99f6e4;
|
||||
}
|
||||
|
||||
.panel :deep(.day.on),
|
||||
.panel :deep(.day.ant-btn:hover) {
|
||||
.panel :deep(.ant-btn.day.on),
|
||||
.panel :deep(.ant-btn.day:hover) {
|
||||
background: #0d9488;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.panel :deep(.day.mute:hover) {
|
||||
.panel :deep(.ant-btn.day.mute:hover) {
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
}
|
||||
@@ -1059,9 +1017,11 @@ onBeforeUnmount(() => {
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.md-chip {
|
||||
.panel :deep(.ant-btn.md-chip) {
|
||||
min-width: 5.1rem;
|
||||
height: 4.1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
background: #f1f5f9;
|
||||
@@ -1074,7 +1034,7 @@ onBeforeUnmount(() => {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.md-chip.on {
|
||||
.panel :deep(.ant-btn.md-chip.on) {
|
||||
background: #ccfbf1;
|
||||
color: #0f766e;
|
||||
box-shadow: inset 0 0 0 2px #99f6e4;
|
||||
@@ -1148,10 +1108,11 @@ onBeforeUnmount(() => {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.md-tick {
|
||||
.panel :deep(.ant-btn.md-tick) {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
@@ -1168,12 +1129,12 @@ onBeforeUnmount(() => {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.md-tick.inner {
|
||||
.panel :deep(.ant-btn.md-tick.inner) {
|
||||
font-size: 0.74rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.md-tick.on {
|
||||
.panel :deep(.ant-btn.md-tick.on) {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -1222,9 +1183,12 @@ onBeforeUnmount(() => {
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.col-item {
|
||||
.panel :deep(.ant-btn.col-item) {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 36px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
background: transparent;
|
||||
@@ -1235,11 +1199,11 @@ onBeforeUnmount(() => {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.col-item:hover {
|
||||
.panel :deep(.ant-btn.col-item:hover) {
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.col-item.on {
|
||||
.panel :deep(.ant-btn.col-item.on) {
|
||||
background: #0d9488;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -1251,28 +1215,8 @@ onBeforeUnmount(() => {
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
|
||||
.link,
|
||||
.done {
|
||||
border: 0;
|
||||
background: none;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #0f766e;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.done {
|
||||
.panel :deep(.ant-btn.done) {
|
||||
margin-inline-start: auto;
|
||||
background: #14b8a6;
|
||||
color: #fff;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.panel.is-mobile .time-box {
|
||||
|
||||
@@ -9,10 +9,10 @@ import {
|
||||
List as AList,
|
||||
Modal,
|
||||
Space as ASpace,
|
||||
Spin as ASpin,
|
||||
Textarea as ATextarea,
|
||||
Typography,
|
||||
} from 'ant-design-vue';
|
||||
import { CrmSkeleton, CrmSkeletonList } from '@/components/skeleton';
|
||||
import { api } from '@/lib/api';
|
||||
import { brand, type MemoryItemDto, type PaginatedResponse } from '@mento/shared';
|
||||
import { formatJalaliDateTime } from '@/lib/jalali';
|
||||
@@ -163,7 +163,8 @@ onMounted(load);
|
||||
|
||||
<a-alert v-if="error" type="error" show-icon :message="error" :style="{ marginBottom: '12px' }" />
|
||||
|
||||
<a-spin :spinning="loading">
|
||||
<CrmSkeleton :loading="loading">
|
||||
<CrmSkeletonList :rows="4">
|
||||
<a-typography-text v-if="!loading && !hasItems" type="secondary">
|
||||
هنوز موردی در حافظه ثبت نشده.
|
||||
</a-typography-text>
|
||||
@@ -201,6 +202,7 @@ onMounted(load);
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-spin>
|
||||
</CrmSkeletonList>
|
||||
</CrmSkeleton>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
@@ -22,7 +22,6 @@ const props = withDefaults(
|
||||
/** اگر true باشد مقدار عددی emit می‌شود (نه رشته) */
|
||||
asNumber?: boolean;
|
||||
dir?: 'ltr' | 'rtl';
|
||||
addonAfter?: string;
|
||||
}>(),
|
||||
{
|
||||
required: false,
|
||||
@@ -31,7 +30,6 @@ const props = withDefaults(
|
||||
decimals: 2,
|
||||
asNumber: false,
|
||||
dir: 'ltr',
|
||||
addonAfter: '',
|
||||
},
|
||||
);
|
||||
|
||||
@@ -131,7 +129,6 @@ function normalizeSep(raw: string): string {
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:value="text"
|
||||
:addon-after="addonAfter || undefined"
|
||||
style="width: 100%; font-variant-numeric: tabular-nums"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
|
||||
@@ -5,6 +5,20 @@ import { api } from '@/lib/api';
|
||||
import JalaliDateInput from '@/components/JalaliDateInput.vue';
|
||||
import { brand, type NoteAiPayloadDto, type NoteAiSuggestionDto } from '@mento/shared';
|
||||
import { rewriteGregorianDates } from '@/lib/jalali';
|
||||
import {
|
||||
Alert as AAlert,
|
||||
Button as AButton,
|
||||
Card as ACard,
|
||||
Checkbox as ACheckbox,
|
||||
Flex as AFlex,
|
||||
Input as AInput,
|
||||
Space as ASpace,
|
||||
Textarea as ATextarea,
|
||||
Typography,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
const { Text: ATypographyText, Paragraph: ATypographyParagraph, Title: ATypographyTitle } =
|
||||
Typography;
|
||||
|
||||
const props = defineProps<{
|
||||
noteId: string;
|
||||
@@ -148,193 +162,108 @@ function formatPayloadSummary(value: NoteAiPayloadDto | null) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="ai-panel">
|
||||
<header>
|
||||
<strong>پیشنهاد {{ brand.aiName }}</strong>
|
||||
<button
|
||||
<a-card :bordered="true" :style="{ marginTop: '12px' }">
|
||||
<a-flex justify="space-between" align="center" wrap="wrap" :gap="8">
|
||||
<a-typography-text strong>پیشنهاد {{ brand.aiName }}</a-typography-text>
|
||||
<a-button
|
||||
v-if="!isPending"
|
||||
type="button"
|
||||
class="link"
|
||||
type="link"
|
||||
:disabled="loading"
|
||||
@click="analyze"
|
||||
>
|
||||
{{ loading ? '…' : 'تحلیل مجدد' }}
|
||||
</button>
|
||||
<button
|
||||
</a-button>
|
||||
<a-button
|
||||
v-else-if="!suggestion"
|
||||
type="button"
|
||||
class="link"
|
||||
type="link"
|
||||
:disabled="loading"
|
||||
@click="analyze"
|
||||
>
|
||||
{{ loading ? 'در حال تحلیل…' : 'تحلیل با AI' }}
|
||||
</button>
|
||||
</header>
|
||||
</a-button>
|
||||
</a-flex>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="loading && !suggestion" class="muted">در حال تحلیل یادداشت…</p>
|
||||
<p v-else-if="suggestion?.status === 'failed'" class="error">
|
||||
{{ suggestion.errorMessage || 'تحلیل ناموفق بود' }}
|
||||
<button type="button" class="link" @click="analyze">تلاش دوباره</button>
|
||||
</p>
|
||||
<p v-else-if="!suggestion" class="muted">
|
||||
<button type="button" class="link" :disabled="loading" @click="analyze">
|
||||
تحلیل این یادداشت با AI
|
||||
</button>
|
||||
</p>
|
||||
<a-alert v-if="error" type="error" show-icon :message="error" :style="{ marginTop: '8px' }" />
|
||||
<a-typography-text v-else-if="loading && !suggestion" type="secondary">
|
||||
در حال تحلیل یادداشت…
|
||||
</a-typography-text>
|
||||
<a-flex v-else-if="suggestion?.status === 'failed'" vertical :gap="4">
|
||||
<a-alert
|
||||
type="error"
|
||||
show-icon
|
||||
:message="suggestion.errorMessage || 'تحلیل ناموفق بود'"
|
||||
/>
|
||||
<a-button type="link" @click="analyze">تلاش دوباره</a-button>
|
||||
</a-flex>
|
||||
<a-button
|
||||
v-else-if="!suggestion"
|
||||
type="link"
|
||||
:disabled="loading"
|
||||
@click="analyze"
|
||||
>
|
||||
تحلیل این یادداشت با AI
|
||||
</a-button>
|
||||
|
||||
<template v-else-if="isPending && payload">
|
||||
<p v-if="formatPayloadSummary(payload)" class="summary">{{ formatPayloadSummary(payload) }}</p>
|
||||
<a-typography-paragraph
|
||||
v-if="formatPayloadSummary(payload)"
|
||||
type="secondary"
|
||||
:style="{ marginTop: '8px' }"
|
||||
>
|
||||
{{ formatPayloadSummary(payload) }}
|
||||
</a-typography-paragraph>
|
||||
|
||||
<div v-if="payload.nextAction" class="block">
|
||||
<label class="check">
|
||||
<input v-model="applyNextAction" type="checkbox" />
|
||||
کار بعدی
|
||||
</label>
|
||||
<input v-model="nextTitle" type="text" placeholder="عنوان کار بعدی" />
|
||||
<JalaliDateInput v-model="nextDueAt" mode="datetime" />
|
||||
</div>
|
||||
<a-flex v-if="payload.nextAction" vertical :gap="8" :style="{ marginTop: '8px' }">
|
||||
<a-checkbox v-model:checked="applyNextAction">کار بعدی</a-checkbox>
|
||||
<a-input v-model:value="nextTitle" placeholder="عنوان کار بعدی" style="width: 100%" />
|
||||
<JalaliDateInput v-model="nextDueAt" mode="datetime" style="width: 100%" />
|
||||
</a-flex>
|
||||
|
||||
<div v-if="memoryItems.length" class="block">
|
||||
<p class="block-title">حافظه مشتری (با تأیید شما ذخیره می‌شود)</p>
|
||||
<p v-if="!hasPerson" class="warn">برای ذخیره حافظه، یادداشت باید به یک شخص متصل باشد.</p>
|
||||
<label
|
||||
<a-flex v-if="memoryItems.length" vertical :gap="8" :style="{ marginTop: '12px' }">
|
||||
<a-typography-title :level="5" :style="{ margin: 0 }">
|
||||
حافظه مشتری (با تأیید شما ذخیره می‌شود)
|
||||
</a-typography-title>
|
||||
<a-alert
|
||||
v-if="!hasPerson"
|
||||
type="warning"
|
||||
show-icon
|
||||
message="برای ذخیره حافظه، یادداشت باید به یک شخص متصل باشد."
|
||||
/>
|
||||
<a-flex
|
||||
v-for="(_, index) in memoryItems"
|
||||
:key="index"
|
||||
class="memory-row"
|
||||
:gap="8"
|
||||
align="flex-start"
|
||||
>
|
||||
<input
|
||||
v-model="selectedMemory[index]"
|
||||
type="checkbox"
|
||||
<a-checkbox
|
||||
v-model:checked="selectedMemory[index]"
|
||||
:disabled="!hasPerson"
|
||||
/>
|
||||
<textarea v-model="memoryEdits[index]" rows="2" />
|
||||
</label>
|
||||
</div>
|
||||
<a-textarea v-model:value="memoryEdits[index]" :rows="2" style="width: 100%" />
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
|
||||
<div class="actions">
|
||||
<button type="button" class="btn" :disabled="applying" @click="apply">
|
||||
{{ applying ? '…' : 'اعمال انتخاب‌شده' }}
|
||||
</button>
|
||||
<button type="button" class="btn btn-ghost" :disabled="applying" @click="dismiss">
|
||||
رد کردن
|
||||
</button>
|
||||
</div>
|
||||
<a-space :size="8" wrap :style="{ marginTop: '12px' }">
|
||||
<a-button type="primary" :disabled="applying" :loading="applying" @click="apply">
|
||||
اعمال انتخاب‌شده
|
||||
</a-button>
|
||||
<a-button :disabled="applying" @click="dismiss">رد کردن</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<p v-else-if="suggestion?.status === 'applied'" class="muted ok">پیشنهاد اعمال شد.</p>
|
||||
<p v-else-if="suggestion?.status === 'dismissed'" class="muted">پیشنهاد رد شد.</p>
|
||||
</section>
|
||||
<a-typography-text
|
||||
v-else-if="suggestion?.status === 'applied'"
|
||||
type="success"
|
||||
:style="{ display: 'block', marginTop: '8px' }"
|
||||
>
|
||||
پیشنهاد اعمال شد.
|
||||
</a-typography-text>
|
||||
<a-typography-text
|
||||
v-else-if="suggestion?.status === 'dismissed'"
|
||||
type="secondary"
|
||||
:style="{ display: 'block', marginTop: '8px' }"
|
||||
>
|
||||
پیشنهاد رد شد.
|
||||
</a-typography-text>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ai-panel {
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.75rem 0.85rem;
|
||||
border: 1px dashed var(--accent);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.link {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.block-title {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.memory-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.45rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
textarea {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.55rem 0.7rem;
|
||||
font: inherit;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.actions .btn {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.actions .btn,
|
||||
.actions .btn-ghost {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.summary {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.muted {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.ok {
|
||||
color: #067647;
|
||||
}
|
||||
|
||||
.warn {
|
||||
margin: 0;
|
||||
color: #b54708;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: #b42318;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,35 +3,59 @@ import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { USER_ROLE_LABELS } from '@/lib/roles';
|
||||
import { BUSINESS_FIELDS, BUSINESS_FIELD_LABELS } from '@/lib/business-fields';
|
||||
import type { BusinessField, OrganizationMembershipDto } from '@mento/shared';
|
||||
import type { OrganizationMembershipDto } from '@mento/shared';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import UiModal from '@/components/ui/UiModal.vue';
|
||||
|
||||
defineProps<{
|
||||
compact?: boolean;
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
compact?: boolean;
|
||||
variant?: 'default' | 'workspace';
|
||||
}>(),
|
||||
{
|
||||
compact: false,
|
||||
variant: 'default',
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
open: [];
|
||||
close: [];
|
||||
}>();
|
||||
|
||||
const auth = useAuthStore();
|
||||
|
||||
const orgs = ref<OrganizationMembershipDto[]>([]);
|
||||
const open = ref(false);
|
||||
const createOpen = ref(false);
|
||||
const loading = ref(false);
|
||||
const creating = ref(false);
|
||||
const error = ref('');
|
||||
const newName = ref('');
|
||||
const newField = ref<BusinessField>('personal');
|
||||
const rootEl = ref<HTMLElement | null>(null);
|
||||
const menuEl = ref<HTMLElement | null>(null);
|
||||
const menuStyle = ref<Record<string, string>>({});
|
||||
let ignoreDocClickUntil = 0;
|
||||
|
||||
const currentName = computed(
|
||||
() => auth.user?.organizationName || orgs.value.find((o) => o.id === auth.user?.organizationId)?.name || 'محیط کاری',
|
||||
() =>
|
||||
auth.user?.organizationName ||
|
||||
orgs.value.find((o) => o.id === auth.user?.organizationId)?.name ||
|
||||
'محیط کاری',
|
||||
);
|
||||
|
||||
const currentSubtitle = computed(() => {
|
||||
const current = orgs.value.find((o) => o.id === auth.user?.organizationId);
|
||||
if (current?.orgRoleName) return current.orgRoleName;
|
||||
if (auth.user?.role) return USER_ROLE_LABELS[auth.user.role];
|
||||
return 'محیط کاری';
|
||||
});
|
||||
|
||||
const currentInitial = computed(() => {
|
||||
const name = currentName.value.trim();
|
||||
return name ? name.charAt(0) : 'م';
|
||||
});
|
||||
|
||||
const canSwitch = computed(() => orgs.value.length > 1);
|
||||
const isWorkspace = computed(() => props.variant === 'workspace');
|
||||
/** در حالت workspace منو همیشه باز می‌شود؛ در حالت پیش‌فرض فقط وقتی بیش از یکی باشد */
|
||||
const menuEnabled = computed(() => isWorkspace.value || canSwitch.value);
|
||||
|
||||
function apiError(e: unknown, fallback: string) {
|
||||
if (axios.isAxiosError(e)) {
|
||||
@@ -49,34 +73,62 @@ async function loadOrgs() {
|
||||
}
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
if (!open.value) return;
|
||||
open.value = false;
|
||||
emit('close');
|
||||
}
|
||||
|
||||
async function toggle() {
|
||||
if (!canSwitch.value) return;
|
||||
if (!menuEnabled.value) return;
|
||||
error.value = '';
|
||||
if (open.value) {
|
||||
open.value = false;
|
||||
closeMenu();
|
||||
return;
|
||||
}
|
||||
ignoreDocClickUntil = Date.now() + 400;
|
||||
open.value = true;
|
||||
emit('open');
|
||||
await nextTick();
|
||||
placeMenu();
|
||||
await loadOrgs();
|
||||
await nextTick();
|
||||
placeMenu();
|
||||
}
|
||||
|
||||
function placeMenu() {
|
||||
const btn = rootEl.value?.querySelector('button');
|
||||
if (!(btn instanceof HTMLElement)) return;
|
||||
const box = btn.getBoundingClientRect();
|
||||
const minWidth = Math.round(Math.max(box.width, isWorkspace.value ? 240 : 200));
|
||||
const sidebar = document.getElementById('app-sidebar');
|
||||
const rail = sidebar?.getBoundingClientRect();
|
||||
// لبهٔ راست منو = لبهٔ چپ سایدبار − ۴px
|
||||
const edge = rail?.left ?? box.left;
|
||||
const beside = {
|
||||
right: 'auto',
|
||||
left: `${Math.round(edge - 4)}px`,
|
||||
transform: 'translateX(-100%)',
|
||||
minWidth: `${minWidth}px`,
|
||||
};
|
||||
if (isWorkspace.value) {
|
||||
menuStyle.value = {
|
||||
...beside,
|
||||
top: `${Math.round(box.top)}px`,
|
||||
bottom: 'auto',
|
||||
};
|
||||
return;
|
||||
}
|
||||
menuStyle.value = {
|
||||
bottom: `${Math.round(window.innerHeight - box.top + 6)}px`,
|
||||
right: `${Math.round(window.innerWidth - box.right)}px`,
|
||||
minWidth: `${Math.round(Math.max(box.width, 200))}px`,
|
||||
...beside,
|
||||
top: 'auto',
|
||||
bottom: `${Math.round(window.innerHeight - box.bottom)}px`,
|
||||
};
|
||||
}
|
||||
|
||||
async function choose(org: OrganizationMembershipDto) {
|
||||
if (org.id === auth.user?.organizationId) {
|
||||
open.value = false;
|
||||
closeMenu();
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
@@ -90,42 +142,16 @@ async function choose(org: OrganizationMembershipDto) {
|
||||
}
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
open.value = false;
|
||||
newName.value = '';
|
||||
newField.value = 'personal';
|
||||
error.value = '';
|
||||
createOpen.value = true;
|
||||
}
|
||||
|
||||
async function submitCreate() {
|
||||
const name = newName.value.trim();
|
||||
if (name.length < 2) {
|
||||
error.value = 'نام محیط باید حداقل دو حرف باشد.';
|
||||
return;
|
||||
}
|
||||
creating.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
await auth.createOrganization({
|
||||
name,
|
||||
businessField: newField.value,
|
||||
});
|
||||
window.location.assign('/');
|
||||
} catch (e) {
|
||||
error.value = apiError(e, 'ساخت محیط ناموفق بود');
|
||||
creating.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onDocClick(event: MouseEvent) {
|
||||
if (!open.value || Date.now() < ignoreDocClickUntil) return;
|
||||
const target = event.target;
|
||||
if (!(target instanceof Node)) return;
|
||||
if (rootEl.value?.contains(target) || menuEl.value?.contains(target)) return;
|
||||
open.value = false;
|
||||
closeMenu();
|
||||
}
|
||||
|
||||
defineExpose({ close: closeMenu });
|
||||
|
||||
onMounted(() => {
|
||||
void loadOrgs();
|
||||
document.addEventListener('click', onDocClick);
|
||||
@@ -137,27 +163,46 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="rootEl" class="org-switch">
|
||||
<div ref="rootEl" class="org-switch" :class="{ 'org-ws': isWorkspace, compact }">
|
||||
<button
|
||||
class="org-btn"
|
||||
:class="{ compact, static: !canSwitch }"
|
||||
:class="{
|
||||
compact,
|
||||
static: !menuEnabled,
|
||||
'org-ws': isWorkspace,
|
||||
open,
|
||||
}"
|
||||
type="button"
|
||||
:title="currentName"
|
||||
:aria-disabled="!canSwitch"
|
||||
:aria-expanded="open"
|
||||
:aria-haspopup="menuEnabled ? 'listbox' : undefined"
|
||||
:aria-disabled="!menuEnabled"
|
||||
@click.stop="toggle"
|
||||
>
|
||||
<UiIcon name="building" :size="18" />
|
||||
<span>{{ currentName }}</span>
|
||||
<template v-if="isWorkspace">
|
||||
<span class="org-mark" aria-hidden="true">{{ currentInitial }}</span>
|
||||
<span class="org-copy">
|
||||
<strong>{{ currentName }}</strong>
|
||||
<small>{{ currentSubtitle }}</small>
|
||||
</span>
|
||||
<i class="org-chev" :class="{ open }" aria-hidden="true" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<UiIcon name="building" :size="18" />
|
||||
<span>{{ currentName }}</span>
|
||||
</template>
|
||||
</button>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="open && canSwitch"
|
||||
v-if="open && menuEnabled"
|
||||
ref="menuEl"
|
||||
class="menu"
|
||||
:class="{ 'org-ws': isWorkspace }"
|
||||
:style="menuStyle"
|
||||
role="listbox"
|
||||
aria-label="محیط‌های کاری"
|
||||
>
|
||||
<p class="hint">ورود به محیط</p>
|
||||
<p class="hint">{{ canSwitch ? 'تعویض محیط کاری' : 'محیط کاری' }}</p>
|
||||
<button
|
||||
v-for="org in orgs"
|
||||
:key="org.id"
|
||||
@@ -165,41 +210,25 @@ onUnmounted(() => {
|
||||
class="org-item"
|
||||
:class="{ on: org.id === auth.user?.organizationId }"
|
||||
:disabled="loading"
|
||||
role="option"
|
||||
:aria-selected="org.id === auth.user?.organizationId"
|
||||
@click="choose(org)"
|
||||
>
|
||||
<strong>{{ org.name }}</strong>
|
||||
<span>{{ org.orgRoleName || USER_ROLE_LABELS[org.role] }}</span>
|
||||
<span class="org-item-mark" aria-hidden="true">{{ org.name.trim().charAt(0) || 'م' }}</span>
|
||||
<span class="org-item-copy">
|
||||
<strong>{{ org.name }}</strong>
|
||||
<span>{{ org.orgRoleName || USER_ROLE_LABELS[org.role] }}</span>
|
||||
</span>
|
||||
<UiIcon
|
||||
v-if="org.id === auth.user?.organizationId"
|
||||
class="org-check"
|
||||
name="check"
|
||||
:size="16"
|
||||
/>
|
||||
</button>
|
||||
<button type="button" class="create" :disabled="loading" @click="openCreate">
|
||||
محیط جدید
|
||||
</button>
|
||||
<p v-if="error && !createOpen" class="err">{{ error }}</p>
|
||||
<p v-if="error" class="err">{{ error }}</p>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<UiModal :open="createOpen" title="محیط جدید" @close="createOpen = false">
|
||||
<form class="form" @submit.prevent="submitCreate">
|
||||
<label>
|
||||
نام محیط
|
||||
<input v-model="newName" required minlength="2" placeholder="مثلاً شرکت یا کار روزمره" />
|
||||
</label>
|
||||
<label>
|
||||
زمینه فعالیت
|
||||
<select v-model="newField">
|
||||
<option v-for="field in BUSINESS_FIELDS" :key="field" :value="field">
|
||||
{{ BUSINESS_FIELD_LABELS[field] }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<p v-if="error" class="err">{{ error }}</p>
|
||||
</form>
|
||||
<template #footer>
|
||||
<button type="button" class="ghost" @click="createOpen = false">انصراف</button>
|
||||
<button type="button" class="primary" :disabled="creating" @click="submitCreate">
|
||||
{{ creating ? 'در حال ساخت…' : 'ساخت و ورود' }}
|
||||
</button>
|
||||
</template>
|
||||
</UiModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -234,7 +263,7 @@ onUnmounted(() => {
|
||||
margin-top: 0.05rem;
|
||||
}
|
||||
|
||||
.org-btn span {
|
||||
.org-btn > span {
|
||||
min-width: 0;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
@@ -253,7 +282,7 @@ onUnmounted(() => {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.org-btn.compact {
|
||||
.org-btn.compact:not(.org-ws) {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
@@ -262,18 +291,113 @@ onUnmounted(() => {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.org-btn.compact span {
|
||||
.org-btn.compact:not(.org-ws) > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.org-btn.compact:hover {
|
||||
.org-btn.compact:not(.org-ws):hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.org-btn.compact.static:hover {
|
||||
.org-btn.compact.static:not(.org-ws):hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.org-btn.org-ws {
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
padding: 0.45rem 0.55rem;
|
||||
border-radius: 16px;
|
||||
color: #0f172a;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.org-btn.org-ws:hover,
|
||||
.org-btn.org-ws.open {
|
||||
background: #f8fafc;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.org-btn.org-ws.static:hover {
|
||||
background: #f8fafc;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.org-mark {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
background: color-mix(in srgb, var(--accent-soft) 80%, white);
|
||||
color: var(--accent-deep);
|
||||
font-size: 0.92rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.org-copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
display: grid;
|
||||
gap: 0.08rem;
|
||||
}
|
||||
|
||||
.org-copy strong {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.org-copy small {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.org-chev {
|
||||
width: 0.42rem;
|
||||
height: 0.42rem;
|
||||
border-right: 1.6px solid #94a3b8;
|
||||
border-bottom: 1.6px solid #94a3b8;
|
||||
/* RTL: اشاره به بیرون (چپ) */
|
||||
transform: rotate(135deg);
|
||||
transition: transform 0.15s ease;
|
||||
flex-shrink: 0;
|
||||
margin-inline-start: 0.15rem;
|
||||
}
|
||||
|
||||
.org-chev.open {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.org-btn.compact.org-ws {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
min-height: var(--control-h);
|
||||
padding: 0;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.org-btn.compact.org-ws .org-copy,
|
||||
.org-btn.compact.org-ws .org-chev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.org-btn.compact.org-ws .org-mark {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: fixed;
|
||||
z-index: 90;
|
||||
@@ -286,11 +410,21 @@ onUnmounted(() => {
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.menu.org-ws {
|
||||
padding: 0.5rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #e8eef3;
|
||||
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
padding: 0.25rem 0.45rem;
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
padding: 0.35rem 0.65rem 0.45rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.org-item,
|
||||
@@ -305,29 +439,89 @@ onUnmounted(() => {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.org-item strong {
|
||||
font-size: 0.82rem;
|
||||
.menu.org-ws .org-item {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
border-radius: 12px;
|
||||
padding: 0.55rem 0.65rem;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.org-item span {
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
.org-item-mark {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #eef2f7;
|
||||
color: #475569;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 800;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.org-item-copy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
.org-item strong {
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
line-height: 1.25;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.org-item span,
|
||||
.org-item-copy span {
|
||||
font-size: 0.74rem;
|
||||
font-weight: 500;
|
||||
color: #94a3b8;
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.org-check {
|
||||
color: #0f172a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.org-item:hover,
|
||||
.create:hover {
|
||||
background: color-mix(in srgb, var(--accent-soft) 70%, white);
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.menu.org-ws .org-item:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.menu.org-ws .org-item:hover .org-item-mark {
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.org-item.on {
|
||||
background: var(--accent-soft);
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.create {
|
||||
margin-top: 0.15rem;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
font-size: 0.82rem;
|
||||
.menu.org-ws .org-item.on {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.menu.org-ws .org-item.on .org-item-mark {
|
||||
background: color-mix(in srgb, var(--accent-soft) 85%, white);
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
|
||||
.menu.org-ws .org-item.on strong {
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.err {
|
||||
@@ -335,41 +529,4 @@ onUnmounted(() => {
|
||||
color: #b91c1c;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.form label {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.form input,
|
||||
.form select {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
padding: 0.65rem 0.75rem;
|
||||
}
|
||||
|
||||
.ghost,
|
||||
.primary {
|
||||
border-radius: 10px;
|
||||
padding: 0.55rem 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.primary {
|
||||
border: 0;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,7 +18,7 @@ import {
|
||||
Upload as AUpload,
|
||||
} from 'ant-design-vue';
|
||||
import type { UploadProps } from 'ant-design-vue';
|
||||
import { PhoneOutlined, SearchOutlined, UserAddOutlined } from '@ant-design/icons-vue';
|
||||
import { PhoneOutlined, SearchOutlined, UserAddOutlined } from '@/icons/ant-bridge';
|
||||
import {
|
||||
filterPhoneContacts,
|
||||
isContactPickerSupported,
|
||||
|
||||
@@ -185,6 +185,13 @@ const fabStyle = computed(() => ({
|
||||
bottom: 'auto',
|
||||
}));
|
||||
|
||||
const panelPlacement = computed(() => {
|
||||
const edge = 16;
|
||||
const spaceAbove = fabPos.value.top - edge;
|
||||
const spaceBelow = viewport.value.h - (fabPos.value.top + FAB_SIZE) - edge;
|
||||
return spaceAbove >= spaceBelow ? 'above' : 'below';
|
||||
});
|
||||
|
||||
const panelStyle = computed(() => {
|
||||
const gap = 12;
|
||||
const edge = 16;
|
||||
@@ -193,28 +200,33 @@ const panelStyle = computed(() => {
|
||||
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);
|
||||
const placeAbove = panelPlacement.value === 'above';
|
||||
const maxHeight = Math.max(
|
||||
0,
|
||||
(placeAbove
|
||||
? fabPos.value.top - edge
|
||||
: viewport.value.h - (fabPos.value.top + FAB_SIZE) - edge) - gap,
|
||||
);
|
||||
|
||||
const shared = {
|
||||
left: `${left}px`,
|
||||
right: 'auto',
|
||||
width: `${width}px`,
|
||||
maxHeight: `${maxHeight}px`,
|
||||
transformOrigin: placeAbove ? 'bottom left' : 'top left',
|
||||
};
|
||||
|
||||
if (placeAbove) {
|
||||
return {
|
||||
left: `${left}px`,
|
||||
right: 'auto',
|
||||
...shared,
|
||||
bottom: `${viewport.value.h - fabPos.value.top + gap}px`,
|
||||
top: 'auto',
|
||||
width: `${width}px`,
|
||||
maxHeight: `${maxHeight}px`,
|
||||
};
|
||||
}
|
||||
return {
|
||||
left: `${left}px`,
|
||||
right: 'auto',
|
||||
...shared,
|
||||
top: `${fabPos.value.top + FAB_SIZE + gap}px`,
|
||||
bottom: 'auto',
|
||||
width: `${width}px`,
|
||||
maxHeight: `${maxHeight}px`,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -238,10 +250,6 @@ function onKeydown(ev: KeyboardEvent) {
|
||||
}
|
||||
}
|
||||
|
||||
watch(isQuickCreateOpen, (value) => {
|
||||
document.body.style.overflow = value ? 'hidden' : '';
|
||||
});
|
||||
|
||||
watch(hidden, (value) => {
|
||||
if (value) close();
|
||||
});
|
||||
@@ -264,46 +272,51 @@ onMounted(() => {
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', onResize);
|
||||
window.removeEventListener('keydown', onKeydown);
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="!hidden" class="qc" dir="rtl">
|
||||
<button
|
||||
v-if="isQuickCreateOpen"
|
||||
class="overlay"
|
||||
type="button"
|
||||
aria-label="بستن ایجاد سریع"
|
||||
@click="close"
|
||||
/>
|
||||
<Transition name="qc-overlay">
|
||||
<button
|
||||
v-if="isQuickCreateOpen"
|
||||
class="overlay"
|
||||
type="button"
|
||||
aria-label="بستن ایجاد سریع"
|
||||
@click="close"
|
||||
/>
|
||||
</Transition>
|
||||
|
||||
<section
|
||||
v-if="isQuickCreateOpen"
|
||||
class="panel"
|
||||
aria-labelledby="qc-title"
|
||||
:style="panelStyle"
|
||||
>
|
||||
<h2 id="qc-title">ایجاد سریع</h2>
|
||||
<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="18" />
|
||||
</span>
|
||||
<span class="copy">
|
||||
<strong>{{ item.title }}</strong>
|
||||
<small>{{ item.desc }}</small>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<Transition name="qc-panel">
|
||||
<section
|
||||
v-if="isQuickCreateOpen"
|
||||
class="panel"
|
||||
:data-place="panelPlacement"
|
||||
aria-labelledby="qc-title"
|
||||
:style="panelStyle"
|
||||
>
|
||||
<h2 id="qc-title">ایجاد سریع</h2>
|
||||
<div class="items">
|
||||
<button
|
||||
v-for="(item, index) in items"
|
||||
:key="item.key"
|
||||
class="item"
|
||||
type="button"
|
||||
:style="{ '--qc-i': index }"
|
||||
@click="go(item.to)"
|
||||
>
|
||||
<span class="item-ico" :class="item.tone">
|
||||
<UiIcon :name="item.icon" :size="18" />
|
||||
</span>
|
||||
<span class="copy">
|
||||
<strong>{{ item.title }}</strong>
|
||||
<small>{{ item.desc }}</small>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</Transition>
|
||||
|
||||
<button
|
||||
v-if="ready"
|
||||
@@ -319,6 +332,8 @@ onBeforeUnmount(() => {
|
||||
@pointerup="onFabPointerUp"
|
||||
@pointercancel="onFabPointerUp"
|
||||
>
|
||||
<span class="fab-pulse" aria-hidden="true" />
|
||||
<span class="fab-shine" aria-hidden="true" />
|
||||
<span class="fab-face" aria-hidden="true">
|
||||
<UiIcon :name="isQuickCreateOpen ? 'x' : 'apps-plus'" :size="20" />
|
||||
</span>
|
||||
@@ -338,11 +353,12 @@ onBeforeUnmount(() => {
|
||||
z-index: 90;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: rgba(0, 0, 0, 0.68);
|
||||
background: rgba(15, 23, 42, 0.42);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.panel {
|
||||
--qc-ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
position: fixed;
|
||||
z-index: 92;
|
||||
width: 300px;
|
||||
@@ -352,10 +368,90 @@ onBeforeUnmount(() => {
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
border-radius: 14px;
|
||||
padding: 12px 12px 10px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
box-shadow:
|
||||
0 18px 40px -18px rgba(15, 23, 42, 0.35),
|
||||
0 8px 18px -10px rgba(13, 148, 136, 0.18),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.65) inset;
|
||||
overflow: hidden;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.qc-overlay-enter-active,
|
||||
.qc-overlay-leave-active {
|
||||
transition: opacity 0.16s ease;
|
||||
}
|
||||
|
||||
.qc-overlay-enter-from,
|
||||
.qc-overlay-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.qc-panel-enter-active {
|
||||
transition:
|
||||
opacity 0.18s var(--qc-ease),
|
||||
transform 0.2s var(--qc-ease);
|
||||
}
|
||||
|
||||
.qc-panel-leave-active {
|
||||
transition:
|
||||
opacity 0.14s ease,
|
||||
transform 0.16s ease;
|
||||
}
|
||||
|
||||
.qc-panel-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.97);
|
||||
}
|
||||
|
||||
.panel[data-place='above'].qc-panel-enter-from {
|
||||
transform: translateY(-8px) scale(0.97);
|
||||
}
|
||||
|
||||
.qc-panel-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(4px) scale(0.98);
|
||||
}
|
||||
|
||||
.panel[data-place='above'].qc-panel-leave-to {
|
||||
transform: translateY(-4px) scale(0.98);
|
||||
}
|
||||
|
||||
.qc-panel-enter-active .items {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qc-panel-enter-active .item {
|
||||
animation: qc-item-in 0.2s var(--qc-ease) both;
|
||||
animation-delay: calc(0.02s + var(--qc-i, 0) * 0.02s);
|
||||
}
|
||||
|
||||
.qc-panel-enter-active h2 {
|
||||
animation: qc-item-in 0.16s var(--qc-ease) both;
|
||||
}
|
||||
|
||||
@keyframes qc-item-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.qc-overlay-enter-active,
|
||||
.qc-overlay-leave-active,
|
||||
.qc-panel-enter-active,
|
||||
.qc-panel-leave-active,
|
||||
.qc-panel-enter-active .item,
|
||||
.qc-panel-enter-active h2 {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
@@ -369,12 +465,20 @@ onBeforeUnmount(() => {
|
||||
|
||||
.items {
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding-left: 2px;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.items::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
@@ -450,6 +554,7 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.fab {
|
||||
--fab-ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
position: fixed;
|
||||
z-index: 93;
|
||||
box-sizing: border-box;
|
||||
@@ -459,57 +564,226 @@ onBeforeUnmount(() => {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
background: linear-gradient(145deg, #0f766e 0%, #14b8a6 100%);
|
||||
overflow: visible;
|
||||
background: linear-gradient(145deg, #0f766e 0%, #14b8a6 55%, #2dd4bf 100%);
|
||||
background-size: 140% 140%;
|
||||
color: #fff;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
line-height: 0;
|
||||
direction: ltr;
|
||||
isolation: isolate;
|
||||
box-shadow:
|
||||
0 4px 14px rgba(13, 148, 136, 0.35),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
||||
0 0 0 0 rgba(45, 212, 191, 0.28),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
transition:
|
||||
filter 0.15s ease,
|
||||
box-shadow 0.15s ease,
|
||||
transform 0.12s ease;
|
||||
filter 0.35s var(--fab-ease),
|
||||
box-shadow 0.35s var(--fab-ease),
|
||||
transform 0.35s var(--fab-ease),
|
||||
background 0.4s var(--fab-ease);
|
||||
animation:
|
||||
fab-glow 3.4s ease-in-out infinite,
|
||||
fab-gradient 7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.fab-pulse,
|
||||
.fab-shine,
|
||||
.fab-face {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
|
||||
.fab-pulse {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.42);
|
||||
animation: fab-ring 2.8s var(--fab-ease) infinite;
|
||||
}
|
||||
|
||||
.fab-shine {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fab-shine::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20%;
|
||||
bottom: -20%;
|
||||
left: -40%;
|
||||
width: 42%;
|
||||
background: linear-gradient(
|
||||
105deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.08) 35%,
|
||||
rgba(255, 255, 255, 0.42) 50%,
|
||||
rgba(255, 255, 255, 0.08) 65%,
|
||||
transparent 100%
|
||||
);
|
||||
transform: translateX(-160%) skewX(-18deg);
|
||||
animation: fab-sheen 4.8s var(--fab-ease) infinite;
|
||||
}
|
||||
|
||||
.fab-face {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
pointer-events: none;
|
||||
transition: transform 0.45s var(--fab-ease);
|
||||
animation: fab-breathe 3.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.fab :deep(.ico) {
|
||||
.fab :deep(.ico),
|
||||
.fab :deep(svg) {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
max-width: 20px;
|
||||
max-height: 20px;
|
||||
margin: 0;
|
||||
stroke-width: 1.7;
|
||||
filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.18));
|
||||
transition: transform 0.45s var(--fab-ease), opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.fab:hover {
|
||||
filter: brightness(1.06);
|
||||
filter: brightness(1.07) saturate(1.05);
|
||||
transform: translateY(-1px) scale(1.04);
|
||||
box-shadow:
|
||||
0 6px 18px rgba(13, 148, 136, 0.42),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
||||
0 10px 24px rgba(13, 148, 136, 0.42),
|
||||
0 0 0 5px rgba(45, 212, 191, 0.12),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.32);
|
||||
}
|
||||
|
||||
.fab:hover .fab-face {
|
||||
animation-play-state: paused;
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.fab.open {
|
||||
background: linear-gradient(145deg, #115e59 0%, #0d9488 100%);
|
||||
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
|
||||
box-shadow:
|
||||
0 8px 22px rgba(15, 23, 42, 0.28),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.fab.open .fab-pulse,
|
||||
.fab.open .fab-shine::after {
|
||||
animation: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fab.open .fab-face {
|
||||
animation: none;
|
||||
transform: rotate(90deg) scale(1.02);
|
||||
}
|
||||
|
||||
.fab.dragging {
|
||||
cursor: grabbing;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 8px 24px rgba(13, 148, 136, 0.45);
|
||||
transform: scale(1.08);
|
||||
box-shadow:
|
||||
0 12px 28px rgba(13, 148, 136, 0.48),
|
||||
0 0 0 6px rgba(45, 212, 191, 0.14),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
animation: none;
|
||||
transition-duration: 0.12s;
|
||||
}
|
||||
|
||||
.fab.dragging .fab-pulse,
|
||||
.fab.dragging .fab-shine::after,
|
||||
.fab.dragging .fab-face {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes fab-glow {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow:
|
||||
0 4px 14px rgba(13, 148, 136, 0.32),
|
||||
0 0 0 0 rgba(45, 212, 191, 0.22),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.24);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 8px 22px rgba(13, 148, 136, 0.48),
|
||||
0 0 18px 2px rgba(45, 212, 191, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.34);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fab-gradient {
|
||||
0%,
|
||||
100% {
|
||||
background-position: 0% 40%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fab-ring {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 12px rgba(45, 212, 191, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fab-sheen {
|
||||
0%,
|
||||
55% {
|
||||
transform: translateX(-160%) skewX(-18deg);
|
||||
}
|
||||
85%,
|
||||
100% {
|
||||
transform: translateX(320%) skewX(-18deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fab-breathe {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fab,
|
||||
.fab-pulse,
|
||||
.fab-shine::after,
|
||||
.fab-face {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.fab:hover,
|
||||
.fab.open .fab-face {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
import type { OrgRoleDto, RolePermissionKey } from '@mento/shared';
|
||||
import {
|
||||
Avatar as AAvatar,
|
||||
Descriptions as ADescriptions,
|
||||
DescriptionsItem as ADescriptionsItem,
|
||||
Empty as AEmpty,
|
||||
Flex as AFlex,
|
||||
List as AList,
|
||||
ListItem as AListItem,
|
||||
ListItemMeta as AListItemMeta,
|
||||
Space as ASpace,
|
||||
TabPane as ATabPane,
|
||||
Tabs as ATabs,
|
||||
Tag as ATag,
|
||||
Typography,
|
||||
} from 'ant-design-vue';
|
||||
import { UserOutlined } from '@/icons/ant-bridge';
|
||||
|
||||
const { Text: ATypographyText, Link: ATypographyLink } = Typography;
|
||||
const emptySimple = AEmpty.PRESENTED_IMAGE_SIMPLE;
|
||||
|
||||
const props = defineProps<{
|
||||
role: OrgRoleDto;
|
||||
childRoles: OrgRoleDto[];
|
||||
permissionItems: Array<{ key: RolePermissionKey; label: string }>;
|
||||
avatarOf: (id: string) => string;
|
||||
tagColor: (color: string | null | undefined) => string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'pick-role': [id: string];
|
||||
}>();
|
||||
|
||||
const innerTab = ref('summary');
|
||||
|
||||
watch(
|
||||
() => props.role.id,
|
||||
() => {
|
||||
innerTab.value = 'summary';
|
||||
},
|
||||
);
|
||||
|
||||
const grantedPermissions = computed(() =>
|
||||
props.permissionItems.filter((item) => props.role.permissions.includes(item.key)),
|
||||
);
|
||||
|
||||
const permSummary = computed(
|
||||
() =>
|
||||
`${toFaDigits(grantedPermissions.value.length)} از ${toFaDigits(props.permissionItems.length)}`,
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical :gap="16">
|
||||
<a-space direction="vertical" :size="4">
|
||||
<a-space wrap>
|
||||
<a-tag v-if="role.systemKey" :bordered="false">سیستمی</a-tag>
|
||||
<a-typography-text v-if="role.parentName" type="secondary">
|
||||
زیرمجموعهٔ
|
||||
<a-typography-link @click="emit('pick-role', role.parentId!)">
|
||||
{{ role.parentName }}
|
||||
</a-typography-link>
|
||||
</a-typography-text>
|
||||
</a-space>
|
||||
<a-typography-text v-if="role.description" type="secondary">
|
||||
{{ role.description }}
|
||||
</a-typography-text>
|
||||
</a-space>
|
||||
|
||||
<a-tabs v-model:activeKey="innerTab">
|
||||
<a-tab-pane key="summary" tab="خلاصه">
|
||||
<a-flex vertical :gap="16">
|
||||
<a-descriptions :column="1" bordered>
|
||||
<a-descriptions-item label="کاربران">
|
||||
{{ toFaDigits(role.userCount) }} نفر
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="مجوزها">
|
||||
{{ permSummary }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="زیرنقش‌ها">
|
||||
{{ toFaDigits(childRoles.length) }} مورد
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<a-flex vertical :gap="8">
|
||||
<a-typography-text strong>زیرنقش‌ها</a-typography-text>
|
||||
<a-space v-if="childRoles.length" wrap>
|
||||
<a-tag
|
||||
v-for="child in childRoles"
|
||||
:key="child.id"
|
||||
:color="tagColor(child.color)"
|
||||
:bordered="false"
|
||||
style="cursor: pointer"
|
||||
@click="emit('pick-role', child.id)"
|
||||
>
|
||||
{{ child.name }} · {{ toFaDigits(child.userCount) }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
<a-empty v-else description="زیرنقشی تعریف نشده" :image="emptySimple" />
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="perms" :tab="`مجوزها (${permSummary})`">
|
||||
<a-flex vertical :gap="12">
|
||||
<a-typography-text type="secondary">
|
||||
فقط مجوزهای فعال نمایش داده می‌شود. برای تغییر، ویرایش نقش را بزنید.
|
||||
</a-typography-text>
|
||||
<a-space v-if="grantedPermissions.length" wrap>
|
||||
<a-tag
|
||||
v-for="perm in grantedPermissions"
|
||||
:key="perm.key"
|
||||
color="success"
|
||||
:bordered="false"
|
||||
>
|
||||
{{ perm.label }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
<a-empty v-else description="هیچ مجوزی فعال نیست" :image="emptySimple" />
|
||||
</a-flex>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="members" :tab="`کاربران (${toFaDigits(role.userCount)})`">
|
||||
<a-list v-if="role.members.length" :data-source="role.members">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a-list-item-meta :title="item.fullName">
|
||||
<template #avatar>
|
||||
<a-avatar :src="avatarOf(item.id)">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<a-empty v-else description="کاربری با این نقش نیست" :image="emptySimple" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-flex>
|
||||
</template>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { DeleteOutlined, FlagOutlined } from '@ant-design/icons-vue';
|
||||
import { DeleteOutlined, FlagOutlined } from '@/icons/ant-bridge';
|
||||
import {
|
||||
Button as AButton,
|
||||
Checkbox as ACheckbox,
|
||||
|
||||
@@ -118,77 +118,82 @@ defineExpose({ refresh: load });
|
||||
<div v-if="visible" class="sms-wallet">
|
||||
<div
|
||||
class="chip"
|
||||
:class="toneClass"
|
||||
:class="[toneClass, (summary?.balanceRials ?? 0) < 0 ? 'is-debt' : '']"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:title="loading ? '…' : `اعتبار پیامک: ${balanceLabel} ریال`"
|
||||
aria-label="شارژ اعتبار پیامک"
|
||||
@click="chargeOpen = true"
|
||||
@keydown.enter.prevent="chargeOpen = true"
|
||||
@keydown.space.prevent="chargeOpen = true"
|
||||
>
|
||||
<span class="label">پیامک</span>
|
||||
<span class="amount">{{ balanceLabel }}</span>
|
||||
<button type="button" class="charge" @click="chargeOpen = true">شارژ</button>
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="chargeOpen" class="layer">
|
||||
<div class="backdrop" @click="closeCharge" />
|
||||
<div class="modal charge-modal" role="dialog" aria-label="شارژ پیامک">
|
||||
<header>
|
||||
<strong>شارژ اعتبار پیامک</strong>
|
||||
<button type="button" class="x" @click="closeCharge">×</button>
|
||||
</header>
|
||||
<div v-if="chargeOpen" class="layer">
|
||||
<div class="backdrop" @click="closeCharge" />
|
||||
<div class="modal charge-modal" role="dialog" aria-label="شارژ پیامک">
|
||||
<header>
|
||||
<strong>شارژ اعتبار پیامک</strong>
|
||||
<button type="button" class="x" @click="closeCharge">×</button>
|
||||
</header>
|
||||
|
||||
<div v-if="chargeInfo" class="charge-body">
|
||||
<div class="instruction-box">
|
||||
<p>{{ chargeInfo.instruction }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-head">
|
||||
<span>شماره کارت</span>
|
||||
<button type="button" class="copy violet" @click="copyValue('شماره کارت', chargeInfo.card)">
|
||||
کپی
|
||||
</button>
|
||||
<div v-if="chargeInfo" class="charge-body">
|
||||
<div class="instruction-box">
|
||||
<p>{{ chargeInfo.instruction }}</p>
|
||||
</div>
|
||||
<p class="mono" dir="ltr">{{ formatCardDisplay(chargeInfo.card) }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-head">
|
||||
<span>شماره شبا</span>
|
||||
<button type="button" class="copy emerald" @click="copyValue('شماره شبا', chargeInfo.iban)">
|
||||
کپی
|
||||
</button>
|
||||
<div class="info-card">
|
||||
<div class="info-head">
|
||||
<span>شماره کارت</span>
|
||||
<button type="button" class="copy violet" @click="copyValue('شماره کارت', chargeInfo.card)">
|
||||
کپی
|
||||
</button>
|
||||
</div>
|
||||
<p class="mono" dir="ltr">{{ formatCardDisplay(chargeInfo.card) }}</p>
|
||||
</div>
|
||||
<p class="mono" dir="ltr">{{ chargeInfo.iban || '—' }}</p>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-head">
|
||||
<span>شماره شبا</span>
|
||||
<button type="button" class="copy emerald" @click="copyValue('شماره شبا', chargeInfo.iban)">
|
||||
کپی
|
||||
</button>
|
||||
</div>
|
||||
<p class="mono" dir="ltr">{{ chargeInfo.iban || '—' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card muted-card">
|
||||
<span class="small">به نام</span>
|
||||
<p class="holder">{{ chargeInfo.accountHolder || '—' }}</p>
|
||||
</div>
|
||||
|
||||
<p v-if="copyHint" class="copy-hint">{{ copyHint }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card muted-card">
|
||||
<span class="small">به نام</span>
|
||||
<p class="holder">{{ chargeInfo.accountHolder || '—' }}</p>
|
||||
</div>
|
||||
|
||||
<p v-if="copyHint" class="copy-hint">{{ copyHint }}</p>
|
||||
<p v-else class="muted">اطلاعات واریز در دسترس نیست.</p>
|
||||
</div>
|
||||
|
||||
<p v-else class="muted">اطلاعات واریز در دسترس نیست.</p>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="warnOpen" class="layer">
|
||||
<div class="backdrop" @click="warnOpen = false" />
|
||||
<div class="modal warn" role="dialog" aria-label="هشدار موجودی منفی">
|
||||
<header>
|
||||
<strong>موجودی پیامک منفی است</strong>
|
||||
<button type="button" class="x" @click="warnOpen = false">×</button>
|
||||
</header>
|
||||
<p>
|
||||
اعتبار پیامک محیط شما منفی شده
|
||||
({{ balanceLabel }} ریال). ارسال تا رسیدن به آستانه قطع یا مسدودسازی دستی ادامه دارد؛ لطفاً
|
||||
شارژ کنید.
|
||||
</p>
|
||||
<button type="button" class="ok" @click="warnOpen = false">متوجه شدم</button>
|
||||
<div v-if="warnOpen" class="layer">
|
||||
<div class="backdrop" @click="warnOpen = false" />
|
||||
<div class="modal warn" role="dialog" aria-label="هشدار موجودی منفی">
|
||||
<header>
|
||||
<strong>موجودی پیامک منفی است</strong>
|
||||
<button type="button" class="x" @click="warnOpen = false">×</button>
|
||||
</header>
|
||||
<p>
|
||||
اعتبار پیامک محیط شما منفی شده
|
||||
({{ balanceLabel }} ریال). ارسال تا رسیدن به آستانه قطع یا مسدودسازی دستی ادامه دارد؛ لطفاً
|
||||
شارژ کنید.
|
||||
</p>
|
||||
<button type="button" class="ok" @click="warnOpen = false">متوجه شدم</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
@@ -200,15 +205,15 @@ defineExpose({ refresh: load });
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* چیپ جمع‌وجور؛ دکمه شارژ سمت چپ، برچسب سمت راست */
|
||||
/* چیپ جمع‌وجور؛ کلیک کل سطح، پنجرهٔ شارژ را باز می‌کند */
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 31px;
|
||||
height: var(--control-h);
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0 4px 0 2px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #c3ead6;
|
||||
border-radius: 10px;
|
||||
background: #f2fbf6;
|
||||
@@ -217,6 +222,7 @@ defineExpose({ refresh: load });
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chip.warning {
|
||||
@@ -232,6 +238,17 @@ defineExpose({ refresh: load });
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.chip.is-debt {
|
||||
border-color: var(--danger);
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chip.is-debt .label {
|
||||
color: inherit;
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 600;
|
||||
font-size: 0.7rem;
|
||||
@@ -239,41 +256,9 @@ defineExpose({ refresh: load });
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.charge {
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 23px;
|
||||
margin: 0;
|
||||
padding: 0 6px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 7px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font: inherit;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.15s ease,
|
||||
border-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
}
|
||||
|
||||
.charge:hover {
|
||||
background: #f8fafc;
|
||||
border-color: #cbd5e1;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.charge:active {
|
||||
background: #f1f5f9;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.layer {
|
||||
@@ -285,6 +270,7 @@ defineExpose({ refresh: load });
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
@@ -305,6 +291,7 @@ defineExpose({ refresh: load });
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal header {
|
||||
|
||||
@@ -1,85 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Button as AButton, Flex as AFlex, theme } from 'ant-design-vue';
|
||||
import { LeftOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
export type StagePathItem = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
stages: StagePathItem[];
|
||||
value?: string | null;
|
||||
loading?: boolean;
|
||||
disabled?: boolean;
|
||||
ariaLabel?: string;
|
||||
}>(),
|
||||
{
|
||||
value: null,
|
||||
loading: false,
|
||||
disabled: false,
|
||||
ariaLabel: 'مراحل',
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:value': [id: string];
|
||||
select: [id: string];
|
||||
}>();
|
||||
|
||||
const { token } = theme.useToken();
|
||||
|
||||
const currentIndex = computed(() =>
|
||||
props.stages.findIndex((stage) => stage.id === props.value),
|
||||
);
|
||||
|
||||
const stripStyle = computed(() => ({
|
||||
width: '100%',
|
||||
overflowX: 'auto' as const,
|
||||
paddingBottom: '2px',
|
||||
}));
|
||||
|
||||
const sepStyle = computed(() => ({
|
||||
color: token.value.colorTextQuaternary,
|
||||
fontSize: '10px',
|
||||
flexShrink: 0,
|
||||
}));
|
||||
|
||||
function onPick(id: string) {
|
||||
if (props.disabled || props.loading || id === props.value) return;
|
||||
emit('update:value', id);
|
||||
emit('select', id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
role="listbox"
|
||||
:aria-label="ariaLabel"
|
||||
:aria-busy="loading || undefined"
|
||||
:style="stripStyle"
|
||||
>
|
||||
<a-flex align="center" :gap="6" wrap="nowrap" :style="{ width: 'max-content', minWidth: '100%' }">
|
||||
<template v-for="(stage, index) in stages" :key="stage.id">
|
||||
<LeftOutlined v-if="index > 0" :style="sepStyle" aria-hidden="true" />
|
||||
<a-button
|
||||
role="option"
|
||||
:aria-selected="stage.id === value"
|
||||
:type="stage.id === value ? 'primary' : 'default'"
|
||||
:disabled="disabled || loading"
|
||||
:style="{
|
||||
borderRadius: '999px',
|
||||
flexShrink: 0,
|
||||
fontWeight: stage.id === value || index <= currentIndex ? 600 : 500,
|
||||
opacity: index < currentIndex ? 0.85 : 1,
|
||||
}"
|
||||
@click="onPick(stage.id)"
|
||||
>
|
||||
{{ stage.name }}
|
||||
</a-button>
|
||||
</template>
|
||||
</a-flex>
|
||||
</div>
|
||||
</template>
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
Popover as APopover,
|
||||
Typography,
|
||||
} from 'ant-design-vue';
|
||||
import { SettingOutlined } from '@ant-design/icons-vue';
|
||||
import { SettingOutlined } from '@/icons/ant-bridge';
|
||||
import { useTableColumns } from '@/lib/tableColumns';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
|
||||
|
||||
@@ -19,9 +19,36 @@ import {
|
||||
emptySectionDataAccess,
|
||||
sectionHasDataAccessLimits,
|
||||
} from '@mento/shared';
|
||||
import { UiButton, UiEmptyState, UiField, UiInput } from '@/components/ui';
|
||||
import DataAccessPolicyPanel from '@/components/DataAccessPolicyPanel.vue';
|
||||
import { formatLocalDateInput, parseLocalInput, toFaDigits } from '@/lib/jalali';
|
||||
import {
|
||||
Alert as AAlert,
|
||||
Button as AButton,
|
||||
Card as ACard,
|
||||
Checkbox as ACheckbox,
|
||||
Col as ACol,
|
||||
Collapse as ACollapse,
|
||||
CollapsePanel as ACollapsePanel,
|
||||
Divider as ADivider,
|
||||
Empty as AEmpty,
|
||||
Flex as AFlex,
|
||||
Form as AForm,
|
||||
FormItem as AFormItem,
|
||||
Input as AInput,
|
||||
List as AList,
|
||||
ListItem as AListItem,
|
||||
ListItemMeta as AListItemMeta,
|
||||
Radio as ARadio,
|
||||
RadioGroup as ARadioGroup,
|
||||
Row as ARow,
|
||||
Select as ASelect,
|
||||
Space as ASpace,
|
||||
Tag as ATag,
|
||||
Typography,
|
||||
} from 'ant-design-vue';
|
||||
import { CrmSkeleton, CrmSkeletonCard } from '@/components/skeleton';
|
||||
|
||||
const { Text: ATypographyText } = Typography;
|
||||
|
||||
const props = defineProps<{
|
||||
users: OrgUserDto[];
|
||||
@@ -37,7 +64,7 @@ const showPriorArchive = computed(
|
||||
const priorUsers = computed(() => props.users.filter((u) => u.isActive !== false));
|
||||
const selectedPriorUsers = computed(() => priorUsers.value.filter((u) => u.priorArchiveEnabled));
|
||||
const priorSearch = ref('');
|
||||
const priorPick = ref('');
|
||||
const priorPick = ref<string | undefined>(undefined);
|
||||
const priorSavingId = ref('');
|
||||
const cutoffLocal = ref('');
|
||||
const cutoffSaving = ref(false);
|
||||
@@ -48,10 +75,16 @@ const availablePriorUsers = computed(() => {
|
||||
return priorUsers.value.filter((u) => {
|
||||
if (u.priorArchiveEnabled) return false;
|
||||
if (!q) return true;
|
||||
return [u.fullName, u.email, u.mobile].filter(Boolean).some((v) => String(v).toLowerCase().includes(q));
|
||||
return [u.fullName, u.email, u.mobile]
|
||||
.filter(Boolean)
|
||||
.some((v) => String(v).toLowerCase().includes(q));
|
||||
});
|
||||
});
|
||||
|
||||
const availablePriorOptions = computed(() =>
|
||||
availablePriorUsers.value.map((u) => ({ value: u.id, label: u.fullName })),
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
refreshUsers: [];
|
||||
}>();
|
||||
@@ -74,9 +107,14 @@ const editableUsers = computed(() =>
|
||||
props.users.filter((u) => u.isActive !== false && u.role !== 'owner' && u.role !== 'admin'),
|
||||
);
|
||||
|
||||
const memberRoleOptions = [
|
||||
{ value: 'member', label: 'عضو' },
|
||||
{ value: 'manager', label: 'سرپرست' },
|
||||
];
|
||||
|
||||
async function setPriorArchive(userId: string, enabled: boolean) {
|
||||
priorSavingId.value = userId;
|
||||
priorPick.value = '';
|
||||
priorPick.value = undefined;
|
||||
error.value = '';
|
||||
ok.value = '';
|
||||
try {
|
||||
@@ -114,7 +152,10 @@ async function loadPriorArchiveCutoff() {
|
||||
applyCutoffFromOrg(data);
|
||||
} catch (e) {
|
||||
error.value = axios.isAxiosError(e)
|
||||
? String((e.response?.data as { message?: string })?.message ?? 'بارگذاری تاریخ بایگانی ناموفق بود.')
|
||||
? String(
|
||||
(e.response?.data as { message?: string })?.message ??
|
||||
'بارگذاری تاریخ بایگانی ناموفق بود.',
|
||||
)
|
||||
: 'بارگذاری تاریخ بایگانی ناموفق بود.';
|
||||
} finally {
|
||||
cutoffLoading.value = false;
|
||||
@@ -136,7 +177,10 @@ async function onCutoffChange(value: string) {
|
||||
await auth.hydrate();
|
||||
} catch (e) {
|
||||
error.value = axios.isAxiosError(e)
|
||||
? String((e.response?.data as { message?: string })?.message ?? 'ذخیره تاریخ بایگانی ناموفق بود.')
|
||||
? String(
|
||||
(e.response?.data as { message?: string })?.message ??
|
||||
'ذخیره تاریخ بایگانی ناموفق بود.',
|
||||
)
|
||||
: 'ذخیره تاریخ بایگانی ناموفق بود.';
|
||||
await loadPriorArchiveCutoff();
|
||||
} finally {
|
||||
@@ -144,9 +188,10 @@ async function onCutoffChange(value: string) {
|
||||
}
|
||||
}
|
||||
|
||||
function pickPriorUser(userId: string) {
|
||||
if (!userId) return;
|
||||
void setPriorArchive(userId, true);
|
||||
function pickPriorUser(userId: unknown) {
|
||||
const id = userId == null ? '' : String(userId);
|
||||
if (!id) return;
|
||||
void setPriorArchive(id, true);
|
||||
}
|
||||
|
||||
async function load() {
|
||||
@@ -243,9 +288,19 @@ function toggleMember(userId: string) {
|
||||
}
|
||||
}
|
||||
|
||||
function setRole(userId: string, role: TeamMemberRole) {
|
||||
function setRole(userId: string, role: unknown) {
|
||||
if (!memberDraft.value[userId]) return;
|
||||
memberDraft.value = { ...memberDraft.value, [userId]: role };
|
||||
memberDraft.value = {
|
||||
...memberDraft.value,
|
||||
[userId]: String(role) as TeamMemberRole,
|
||||
};
|
||||
}
|
||||
|
||||
function teamMembersLabel(team: TeamDto) {
|
||||
if (!team.members.length) return 'بدون عضو';
|
||||
return team.members
|
||||
.map((m) => `${m.fullName}${m.role === 'manager' ? ' (سرپرست)' : ''}`)
|
||||
.join('، ');
|
||||
}
|
||||
|
||||
async function saveMembers() {
|
||||
@@ -365,362 +420,226 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="teams-panel">
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-if="ok" class="ok">{{ ok }}</p>
|
||||
<a-flex vertical :gap="12">
|
||||
<a-alert v-if="error" type="error" show-icon :message="error" closable @close="error = ''" />
|
||||
<a-alert v-if="ok" type="success" show-icon :message="ok" closable @close="ok = ''" />
|
||||
|
||||
<section v-if="canEdit" class="card">
|
||||
<h3>تیم جدید</h3>
|
||||
<div class="row">
|
||||
<UiField label="نام تیم">
|
||||
<UiInput v-model="newName" placeholder="مثلاً فروش تهران" />
|
||||
</UiField>
|
||||
<UiField label="توضیح">
|
||||
<UiInput v-model="newDesc" placeholder="اختیاری" />
|
||||
</UiField>
|
||||
<UiButton :loading="saving" @click="createTeam">افزودن</UiButton>
|
||||
</div>
|
||||
</section>
|
||||
<a-card :bordered="false">
|
||||
<a-form v-if="canEdit" layout="vertical" @finish="createTeam">
|
||||
<a-divider orientation="right">تیم جدید</a-divider>
|
||||
<a-row :gutter="[16, 0]" align="bottom">
|
||||
<a-col :xs="24" :md="8">
|
||||
<a-form-item label="نام تیم">
|
||||
<a-input v-model:value="newName" placeholder="مثلاً فروش تهران" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="10">
|
||||
<a-form-item label="توضیح">
|
||||
<a-input v-model:value="newDesc" placeholder="اختیاری" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="6">
|
||||
<a-form-item label=" ">
|
||||
<a-button type="primary" html-type="submit" :loading="saving" block>افزودن</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
|
||||
<section class="card">
|
||||
<h3>تیم‌ها</h3>
|
||||
<UiEmptyState
|
||||
v-if="!loading && !teams.length"
|
||||
title="تیمی تعریف نشده"
|
||||
description="تیم بسازید تا اعضای فروش پرونده‌های هم‌تیمی را ببینند."
|
||||
/>
|
||||
<div v-else class="team-list">
|
||||
<article v-for="t in teams" :key="t.id" class="team">
|
||||
<header>
|
||||
<div>
|
||||
<strong>{{ t.name }}</strong>
|
||||
<p class="muted">
|
||||
{{ t.description || '—' }}
|
||||
· {{ toFaDigits(t.memberCount) }} عضو
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="canEdit" class="actions">
|
||||
<UiButton variant="secondary" @click="startMetaEdit(t)">ویرایش</UiButton>
|
||||
<UiButton variant="secondary" @click="startEdit(t)">اعضا</UiButton>
|
||||
<UiButton variant="secondary" @click="removeTeam(t.id)">حذف</UiButton>
|
||||
</div>
|
||||
</header>
|
||||
<p class="members">
|
||||
{{
|
||||
t.members.length
|
||||
? t.members
|
||||
.map((m) => `${m.fullName}${m.role === 'manager' ? ' (سرپرست)' : ''}`)
|
||||
.join('، ')
|
||||
: 'بدون عضو'
|
||||
}}
|
||||
</p>
|
||||
|
||||
<div v-if="editingMetaId === t.id" class="editor">
|
||||
<div class="row">
|
||||
<UiField label="نام تیم">
|
||||
<UiInput v-model="editName" />
|
||||
</UiField>
|
||||
<UiField label="توضیح">
|
||||
<UiInput v-model="editDesc" />
|
||||
</UiField>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<UiButton :loading="saving" @click="saveMeta">ذخیره</UiButton>
|
||||
<UiButton variant="secondary" @click="editingMetaId = null">انصراف</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="editingId === t.id" class="editor">
|
||||
<p class="hint">اعضا را انتخاب کنید؛ سرپرست همان عضو تیم است.</p>
|
||||
<label v-for="u in users.filter((x) => x.isActive !== false)" :key="u.id" class="person">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="Boolean(memberDraft[u.id])"
|
||||
@change="toggleMember(u.id)"
|
||||
/>
|
||||
<span>{{ u.fullName }}</span>
|
||||
<select
|
||||
v-if="memberDraft[u.id]"
|
||||
:value="memberDraft[u.id]"
|
||||
@change="setRole(u.id, ($event.target as HTMLSelectElement).value as TeamMemberRole)"
|
||||
>
|
||||
<option value="member">عضو</option>
|
||||
<option value="manager">سرپرست</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="actions">
|
||||
<UiButton :loading="saving" @click="saveMembers">ذخیره اعضا</UiButton>
|
||||
<UiButton variant="secondary" @click="editingId = null">انصراف</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="showPriorArchive" class="card">
|
||||
<header class="prior-head">
|
||||
<h3>بایگانی اطلاعات قبل</h3>
|
||||
<JalaliDateInput
|
||||
:model-value="cutoffLocal"
|
||||
mode="date"
|
||||
placeholder="تاریخ برش"
|
||||
:disabled="cutoffSaving || cutoffLoading"
|
||||
@update:model-value="onCutoffChange"
|
||||
<a-divider orientation="right">تیم‌ها</a-divider>
|
||||
<CrmSkeleton :loading="loading">
|
||||
<CrmSkeletonCard :rows="6">
|
||||
<a-empty
|
||||
v-if="!loading && !teams.length"
|
||||
description="تیمی تعریف نشده. تیم بسازید تا اعضای فروش پرونده‌های هم‌تیمی را ببینند."
|
||||
/>
|
||||
</header>
|
||||
<p class="hint">
|
||||
فقط کاربرانی که تیک می‌خورند سوئیچ کار جاری و بایگانی را می‌بینند. بقیهٔ محیط مثل قبل همهٔ
|
||||
رکوردها را مطابق سطح دسترسی خودشان می‌بینند.
|
||||
</p>
|
||||
<div class="prior-picker">
|
||||
<UiInput v-model="priorSearch" placeholder="جستجوی کاربر…" />
|
||||
<select
|
||||
v-model="priorPick"
|
||||
:disabled="!availablePriorUsers.length || Boolean(priorSavingId)"
|
||||
@change="pickPriorUser(($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option value="">
|
||||
{{ availablePriorUsers.length ? 'انتخاب کاربر برای فعال‌سازی' : 'کاربر دیگری پیدا نشد' }}
|
||||
</option>
|
||||
<option v-for="u in availablePriorUsers" :key="u.id" :value="u.id">
|
||||
{{ u.fullName }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="selectedPriorUsers.length" class="prior-chips">
|
||||
<span v-for="u in selectedPriorUsers" :key="u.id" class="prior-chip">
|
||||
{{ u.fullName }}
|
||||
<button
|
||||
type="button"
|
||||
:disabled="priorSavingId === u.id"
|
||||
:aria-label="`حذف ${u.fullName}`"
|
||||
@click="setPriorArchive(u.id, false)"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<p v-else class="hint">هنوز کاربری برای دیدن سوئیچ بایگانی انتخاب نشده است.</p>
|
||||
</section>
|
||||
<a-list v-else item-layout="vertical" :data-source="teams">
|
||||
<template #renderItem="{ item: t }">
|
||||
<a-list-item>
|
||||
<template v-if="canEdit" #actions>
|
||||
<a-button type="link" @click="startMetaEdit(t)">ویرایش</a-button>
|
||||
<a-button type="link" @click="startEdit(t)">اعضا</a-button>
|
||||
<a-button type="link" danger @click="removeTeam(t.id)">حذف</a-button>
|
||||
</template>
|
||||
<a-list-item-meta>
|
||||
<template #title>
|
||||
<a-space wrap>
|
||||
<a-typography-text strong>{{ t.name }}</a-typography-text>
|
||||
<a-tag :bordered="false">{{ toFaDigits(t.memberCount) }} عضو</a-tag>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #description>
|
||||
<a-typography-text type="secondary">
|
||||
{{ t.description || 'بدون توضیح' }} · {{ teamMembersLabel(t) }}
|
||||
</a-typography-text>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
|
||||
<section class="card">
|
||||
<h3>محدوده داده</h3>
|
||||
<p class="hint">
|
||||
مالک و مدیر همیشه همه را می‌بینند. پیش‌فرض از نقش می‌آید؛ برای کاربر خاص می‌توانید فیلتر
|
||||
جدا بگذارید.
|
||||
</p>
|
||||
<UiEmptyState
|
||||
v-if="!editableUsers.length"
|
||||
title="کاربر قابل تنظیم نیست"
|
||||
description="فقط نقش‌های فروش و پشتیبانی محدوده داده جدا دارند."
|
||||
/>
|
||||
<div v-else class="vis-table">
|
||||
<div v-for="u in editableUsers" :key="u.id" class="vis-user">
|
||||
<div class="vis-row">
|
||||
<span>
|
||||
{{ u.fullName }}
|
||||
<small class="vis-badge">{{ accessSummary(u) }}</small>
|
||||
</span>
|
||||
<UiButton v-if="canEdit" variant="secondary" @click="openAccessEditor(u)">
|
||||
{{ expandedAccess === u.id ? 'بستن' : 'تنظیم محدوده' }}
|
||||
</UiButton>
|
||||
</div>
|
||||
<div v-if="expandedAccess === u.id" class="vis-scopes">
|
||||
<label class="chip-row">
|
||||
<input v-model="accessMode" type="radio" value="inherit" />
|
||||
مثل نقش (بدون override)
|
||||
</label>
|
||||
<label class="chip-row">
|
||||
<input v-model="accessMode" type="radio" value="custom" />
|
||||
سفارشی برای این کاربر
|
||||
</label>
|
||||
<DataAccessPolicyPanel
|
||||
v-model="draftAccess"
|
||||
v-model:treasury-access="draftTreasury"
|
||||
:show-treasury="showTreasury"
|
||||
:data-locked="accessMode === 'inherit'"
|
||||
compact
|
||||
<a-form
|
||||
v-if="editingMetaId === t.id"
|
||||
layout="vertical"
|
||||
style="width: 100%"
|
||||
@finish="saveMeta"
|
||||
>
|
||||
<a-row :gutter="[16, 0]">
|
||||
<a-col :xs="24" :md="12">
|
||||
<a-form-item label="نام تیم">
|
||||
<a-input v-model:value="editName" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="12">
|
||||
<a-form-item label="توضیح">
|
||||
<a-input v-model:value="editDesc" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-space>
|
||||
<a-button type="primary" html-type="submit" :loading="saving">ذخیره</a-button>
|
||||
<a-button @click="editingMetaId = null">انصراف</a-button>
|
||||
</a-space>
|
||||
</a-form>
|
||||
|
||||
<a-flex v-if="editingId === t.id" vertical :gap="8" style="width: 100%">
|
||||
<a-typography-text type="secondary">
|
||||
اعضا را انتخاب کنید؛ سرپرست همان عضو تیم است.
|
||||
</a-typography-text>
|
||||
<a-row :gutter="[12, 8]">
|
||||
<a-col
|
||||
v-for="u in users.filter((x) => x.isActive !== false)"
|
||||
:key="u.id"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:lg="8"
|
||||
>
|
||||
<a-space>
|
||||
<a-checkbox
|
||||
:checked="Boolean(memberDraft[u.id])"
|
||||
@change="toggleMember(u.id)"
|
||||
>
|
||||
{{ u.fullName }}
|
||||
</a-checkbox>
|
||||
<a-select
|
||||
v-if="memberDraft[u.id]"
|
||||
:value="memberDraft[u.id]"
|
||||
:options="memberRoleOptions"
|
||||
style="width: 120px"
|
||||
@update:value="setRole(u.id, $event)"
|
||||
/>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-space>
|
||||
<a-button type="primary" :loading="saving" @click="saveMembers">ذخیره اعضا</a-button>
|
||||
<a-button @click="editingId = null">انصراف</a-button>
|
||||
</a-space>
|
||||
</a-flex>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</CrmSkeletonCard>
|
||||
</CrmSkeleton>
|
||||
|
||||
<a-collapse :bordered="false" ghost>
|
||||
<a-collapse-panel v-if="showPriorArchive" key="prior" header="بایگانی اطلاعات قبل">
|
||||
<a-row :gutter="[16, 12]" align="middle">
|
||||
<a-col :xs="24" :lg="8">
|
||||
<JalaliDateInput
|
||||
:model-value="cutoffLocal"
|
||||
mode="date"
|
||||
placeholder="تاریخ برش"
|
||||
:disabled="cutoffSaving || cutoffLoading"
|
||||
@update:model-value="onCutoffChange"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :xs="24" :lg="8">
|
||||
<a-input v-model:value="priorSearch" placeholder="جستجوی کاربر…" style="width: 100%" />
|
||||
</a-col>
|
||||
<a-col :xs="24" :lg="8">
|
||||
<a-select
|
||||
:value="priorPick"
|
||||
:options="availablePriorOptions"
|
||||
:disabled="!availablePriorUsers.length || Boolean(priorSavingId)"
|
||||
allow-clear
|
||||
show-search
|
||||
option-filter-prop="label"
|
||||
:placeholder="
|
||||
availablePriorUsers.length ? 'فعال‌سازی کاربر' : 'کاربر دیگری پیدا نشد'
|
||||
"
|
||||
style="width: 100%"
|
||||
@update:value="pickPriorUser"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-flex vertical :gap="8">
|
||||
<a-typography-text type="secondary">
|
||||
فقط این کاربران سوئیچ کار جاری / بایگانی را می‌بینند.
|
||||
</a-typography-text>
|
||||
<a-space v-if="selectedPriorUsers.length" wrap>
|
||||
<a-tag
|
||||
v-for="u in selectedPriorUsers"
|
||||
:key="u.id"
|
||||
closable
|
||||
:disabled="priorSavingId === u.id"
|
||||
@close.prevent="setPriorArchive(u.id, false)"
|
||||
>
|
||||
{{ u.fullName }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
<a-typography-text v-else type="secondary">
|
||||
هنوز کاربری انتخاب نشده است.
|
||||
</a-typography-text>
|
||||
</a-flex>
|
||||
</a-collapse-panel>
|
||||
|
||||
<a-collapse-panel key="access" header="محدوده داده کاربران">
|
||||
<a-flex vertical :gap="8">
|
||||
<a-typography-text type="secondary">
|
||||
مالک و مدیر همیشه همه را می‌بینند. پیش‌فرض از نقش می‌آید؛ برای کاربر خاص می‌توانید فیلتر جدا بگذارید.
|
||||
</a-typography-text>
|
||||
<a-empty
|
||||
v-if="!editableUsers.length"
|
||||
description="فقط نقش‌های فروش و پشتیبانی محدوده داده جدا دارند."
|
||||
/>
|
||||
<div class="actions">
|
||||
<UiButton :loading="accessSaving" @click="saveUserAccess(u.id)">ذخیره</UiButton>
|
||||
<UiButton variant="secondary" @click="expandedAccess = null">انصراف</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<a-list v-else item-layout="vertical" :data-source="editableUsers">
|
||||
<template #renderItem="{ item: u }">
|
||||
<a-list-item>
|
||||
<template v-if="canEdit" #actions>
|
||||
<a-button type="link" @click="openAccessEditor(u)">
|
||||
{{ expandedAccess === u.id ? 'بستن' : 'تنظیم' }}
|
||||
</a-button>
|
||||
</template>
|
||||
<a-list-item-meta :description="accessSummary(u)">
|
||||
<template #title>
|
||||
<a-typography-text strong>{{ u.fullName }}</a-typography-text>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
<a-flex v-if="expandedAccess === u.id" vertical :gap="8" style="width: 100%">
|
||||
<a-radio-group v-model:value="accessMode">
|
||||
<a-space wrap>
|
||||
<a-radio value="inherit">مثل نقش</a-radio>
|
||||
<a-radio value="custom">سفارشی</a-radio>
|
||||
</a-space>
|
||||
</a-radio-group>
|
||||
<DataAccessPolicyPanel
|
||||
v-model="draftAccess"
|
||||
v-model:treasury-access="draftTreasury"
|
||||
:show-treasury="showTreasury"
|
||||
:data-locked="accessMode === 'inherit'"
|
||||
compact
|
||||
/>
|
||||
<a-space>
|
||||
<a-button type="primary" :loading="accessSaving" @click="saveUserAccess(u.id)">
|
||||
ذخیره
|
||||
</a-button>
|
||||
<a-button @click="expandedAccess = null">انصراف</a-button>
|
||||
</a-space>
|
||||
</a-flex>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-flex>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-card>
|
||||
</a-flex>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.teams-panel {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid #eef2f7;
|
||||
border-radius: var(--radius, 12px);
|
||||
padding: 1rem;
|
||||
}
|
||||
.card h3 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.prior-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.prior-head h3 {
|
||||
margin: 0;
|
||||
}
|
||||
.prior-head :deep(.trigger) {
|
||||
min-width: 12rem;
|
||||
}
|
||||
.prior-picker {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(10rem, 1fr) minmax(13rem, 1fr);
|
||||
gap: 0.6rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.prior-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.prior-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
border: 1px solid #ccfbf1;
|
||||
border-radius: 999px;
|
||||
background: #f0fdfa;
|
||||
color: #0f766e;
|
||||
padding: 0.25rem 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.prior-chip button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
.prior-chip button:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: wait;
|
||||
}
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr auto;
|
||||
gap: 0.75rem;
|
||||
align-items: end;
|
||||
}
|
||||
.team-list {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.team {
|
||||
border: 1px solid #eef2f7;
|
||||
border-radius: var(--radius, 12px);
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.team header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
align-items: start;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.muted,
|
||||
.hint,
|
||||
.members {
|
||||
color: #64748b;
|
||||
font-size: 0.85rem;
|
||||
margin: 0.25rem 0 0;
|
||||
}
|
||||
.editor {
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid #eef2f7;
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
.person {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
padding: 0.35rem 0;
|
||||
}
|
||||
.vis-table {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.vis-user {
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
padding-bottom: 0.45rem;
|
||||
}
|
||||
.vis-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
padding: 0.45rem 0;
|
||||
}
|
||||
.vis-badge {
|
||||
margin-inline-start: 0.4rem;
|
||||
padding: 0.1rem 0.45rem;
|
||||
border-radius: 999px;
|
||||
background: #eef2ff;
|
||||
color: #4338ca;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
.vis-scopes {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
background: #f8fafc;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.chip-row {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
select {
|
||||
font: inherit;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
padding: 0.4rem 0.55rem;
|
||||
background: #fff;
|
||||
}
|
||||
.error {
|
||||
color: #b91c1c;
|
||||
font-weight: 600;
|
||||
}
|
||||
.ok {
|
||||
color: #0f766e;
|
||||
font-weight: 600;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.row,
|
||||
.vis-row,
|
||||
.prior-picker {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* آیکون‌های legacy — حالا از پک vuesax-linear رندر می‌شوند.
|
||||
* API نام‌ها برای سازگاری با صفحات قدیمی حفظ شده.
|
||||
*/
|
||||
import VsIcon from '@/components/VsIcon.vue';
|
||||
|
||||
defineProps<{
|
||||
name:
|
||||
| 'home'
|
||||
@@ -82,352 +88,7 @@ defineProps<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
class="ico"
|
||||
:width="size ?? 20"
|
||||
:height="size ?? 20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<template v-if="name === 'home'">
|
||||
<path d="M3 10.5 12 3l9 7.5" />
|
||||
<path d="M5 9.5V21h14V9.5" />
|
||||
<path d="M10 21v-6h4v6" />
|
||||
</template>
|
||||
<template v-else-if="name === 'users'">
|
||||
<circle cx="9" cy="8" r="3.2" />
|
||||
<path d="M2.5 19c.8-3 2.9-4.5 6.5-4.5s5.7 1.5 6.5 4.5" />
|
||||
<circle cx="17" cy="9" r="2.4" />
|
||||
<path d="M15.2 14.2c2.3.3 3.9 1.5 4.8 3.8" />
|
||||
</template>
|
||||
<template v-else-if="name === 'briefcase'">
|
||||
<rect x="3" y="7" width="18" height="13" rx="2" />
|
||||
<path d="M8 7V5.5A1.5 1.5 0 0 1 9.5 4h5A1.5 1.5 0 0 1 16 5.5V7" />
|
||||
<path d="M3 12h18" />
|
||||
</template>
|
||||
<template v-else-if="name === 'check'">
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="m8.5 12.5 2.4 2.4 4.6-5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'box'">
|
||||
<path d="M12 3 3.5 7.5v9L12 21l8.5-4.5v-9L12 3Z" />
|
||||
<path d="M12 12 3.5 7.5M12 12l8.5-4.5M12 12v9" />
|
||||
</template>
|
||||
<template v-else-if="name === 'chart'">
|
||||
<path d="M4 19h16" />
|
||||
<path d="M7 16V10" />
|
||||
<path d="M12 16V6" />
|
||||
<path d="M17 16v-4" />
|
||||
</template>
|
||||
<template v-else-if="name === 'settings'">
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9c.3.6.9 1 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'search'">
|
||||
<circle cx="11" cy="11" r="7" />
|
||||
<path d="m20 20-3.5-3.5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'sparkle'">
|
||||
<path d="M12 3v4M12 17v4M3 12h4M17 12h4" />
|
||||
<path d="m6.5 6.5 2.5 2.5M15 15l2.5 2.5M17.5 6.5 15 9M9 15l-2.5 2.5" />
|
||||
<circle cx="12" cy="12" r="2.2" />
|
||||
</template>
|
||||
<template v-else-if="name === 'bell'">
|
||||
<path d="M6 9a6 6 0 1 1 12 0c0 4 1.5 5.5 1.5 5.5H4.5S6 13 6 9Z" />
|
||||
<path d="M10 19a2 2 0 0 0 4 0" />
|
||||
</template>
|
||||
<template v-else-if="name === 'calendar'">
|
||||
<rect x="3.5" y="5" width="17" height="15" rx="2" />
|
||||
<path d="M8 3.5V7M16 3.5V7M3.5 10h17" />
|
||||
</template>
|
||||
<template v-else-if="name === 'calendar-plus'">
|
||||
<rect x="3.5" y="5" width="17" height="15" rx="2" />
|
||||
<path d="M8 3.5V7M16 3.5V7M3.5 10h17" />
|
||||
<path d="M12 13v5M9.5 15.5h5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'calendar-sun'">
|
||||
<rect x="3.5" y="5" width="17" height="15" rx="2" />
|
||||
<path d="M8 3.5V7M16 3.5V7M3.5 10h17" />
|
||||
<circle cx="12" cy="15.2" r="2.1" />
|
||||
<path d="M12 11.4v.7M12 18.3v.7M8.9 15.2h.7M14.4 15.2h.7M9.6 12.8l.5.5M13.9 17.1l.5.5M13.9 12.8l-.5.5M9.6 17.1l-.5.5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'calendar-edit'">
|
||||
<rect x="3.5" y="5" width="17" height="15" rx="2" />
|
||||
<path d="M8 3.5V7M16 3.5V7M3.5 10h17" />
|
||||
<path d="M11.2 18.2 16.6 12.8l1.5 1.5-5.4 5.4H11.2v-1.5Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'mail'">
|
||||
<rect x="3" y="5" width="18" height="14" rx="2" />
|
||||
<path d="m4 7 8 6 8-6" />
|
||||
</template>
|
||||
<template v-else-if="name === 'megaphone'">
|
||||
<path d="M3 11v2a2 2 0 0 0 2 2h1l4 4V5L6 9H5a2 2 0 0 0-2 2Z" />
|
||||
<path d="M14 8.5c2 .8 3.5 2.3 3.5 3.5s-1.5 2.7-3.5 3.5" />
|
||||
<path d="M10 15v3a2 2 0 0 1-2 2" />
|
||||
</template>
|
||||
<template v-else-if="name === 'send'">
|
||||
<path d="m4 12 16-8-6 16-2.5-6.5L4 12Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'fire'">
|
||||
<path d="M12 3c2 3-1 4 1 7 1.5 2.2 4 2.5 4 6a5 5 0 1 1-10 0c0-3.5 2-5 3-7 1-2-1-4 2-6Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'warning'">
|
||||
<path d="m12 4 9 16H3L12 4Z" />
|
||||
<path d="M12 10v4" />
|
||||
<path d="M12 17h.01" />
|
||||
</template>
|
||||
<template v-else-if="name === 'trend'">
|
||||
<path d="M4 17 10 11l4 4 6-8" />
|
||||
<path d="M15 7h5v5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'phone'">
|
||||
<path d="M8 3.5h2.5l1 4-2 1.2a12 12 0 0 0 5.8 5.8L16.5 12.5l4 1V16a2 2 0 0 1-2.2 2A16 16 0 0 1 4 6.2 2 2 0 0 1 6 4Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'trophy'">
|
||||
<path d="M8 21h8" />
|
||||
<path d="M12 17v4" />
|
||||
<path d="M7 4h10v4a5 5 0 0 1-10 0V4Z" />
|
||||
<path d="M7 6H4.5A2.5 2.5 0 0 0 7 8.5" />
|
||||
<path d="M17 6h2.5A2.5 2.5 0 0 1 17 8.5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'chat'">
|
||||
<path d="M5 18.5 6.2 15A7.5 7.5 0 1 1 9 19.2L5 18.5Z" />
|
||||
<path d="M8.5 11h7M8.5 14h4.5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'dots'">
|
||||
<circle cx="5" cy="12" r="1.4" fill="currentColor" stroke="none" />
|
||||
<circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none" />
|
||||
<circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none" />
|
||||
</template>
|
||||
<template v-else-if="name === 'dots-v'">
|
||||
<circle cx="12" cy="5" r="1.4" fill="currentColor" stroke="none" />
|
||||
<circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none" />
|
||||
<circle cx="12" cy="19" r="1.4" fill="currentColor" stroke="none" />
|
||||
</template>
|
||||
<template v-else-if="name === 'document'">
|
||||
<path d="M7 4.5h7.5L19 9v10.5a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 6 19.5v-14A1.5 1.5 0 0 1 7.5 4.5H7Z" />
|
||||
<path d="M14.5 4.5V9H19" />
|
||||
<path d="M9 13h6M9 16.5h4" />
|
||||
</template>
|
||||
<template v-else-if="name === 'download'">
|
||||
<path d="M12 4.5v9" />
|
||||
<path d="M8.5 10.5 12 14l3.5-3.5" />
|
||||
<path d="M6 17.5h12" />
|
||||
</template>
|
||||
<template v-else-if="name === 'upload'">
|
||||
<path d="M12 14.5v-9" />
|
||||
<path d="M8.5 8.5 12 5l3.5 3.5" />
|
||||
<path d="M6 17.5h12" />
|
||||
</template>
|
||||
<template v-else-if="name === 'bag'">
|
||||
<path d="M6.5 8h11l1 12.5H5.5L6.5 8Z" />
|
||||
<path d="M9 8V6.5A3 3 0 0 1 12 3.5 3 3 0 0 1 15 6.5V8" />
|
||||
</template>
|
||||
<template v-else-if="name === 'clock'">
|
||||
<circle cx="12" cy="12" r="8" />
|
||||
<path d="M12 8v4.2l2.8 1.8" />
|
||||
</template>
|
||||
<template v-else-if="name === 'user-plus'">
|
||||
<circle cx="10" cy="8" r="3" />
|
||||
<path d="M4 19c.7-3 2.6-4.5 6-4.5s5.3 1.5 6 4.5" />
|
||||
<path d="M17 8v5M14.5 10.5h5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'plus'">
|
||||
<path d="M12 6v12M6 12h12" />
|
||||
</template>
|
||||
<template v-else-if="name === 'chevron' || name === 'chevron-right'">
|
||||
<path d="m9 6 6 6-6 6" />
|
||||
</template>
|
||||
<template v-else-if="name === 'chevron-left'">
|
||||
<path d="m15 18-6-6 6-6" />
|
||||
</template>
|
||||
<template v-else-if="name === 'chevrons-right'">
|
||||
<path d="m6 17 5-5-5-5M13 17l5-5-5-5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'chevrons-left'">
|
||||
<path d="m11 17-5-5 5-5M18 17l-5-5 5-5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'arrow-right'">
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</template>
|
||||
<template v-else-if="name === 'arrow-left'">
|
||||
<path d="M19 12H5M12 19l-7-7 7-7" />
|
||||
</template>
|
||||
<template v-else-if="name === 'star'">
|
||||
<path d="m12 3.4 2.4 4.9 5.4.8-3.9 3.8.9 5.4L12 15.8 7.2 18.3l.9-5.4-3.9-3.8 5.4-.8L12 3.4Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'pin'">
|
||||
<path d="M15.5 4.5 19.5 8.5 14 14v5l-2 1-2-1v-5L4.5 8.5 8.5 4.5l2.2 2.2a3 3 0 0 0 2.6 0L15.5 4.5Z" />
|
||||
<path d="M12 20v-5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'filter'">
|
||||
<path d="M4 6h16M7 12h10M10 18h4" />
|
||||
</template>
|
||||
<template v-else-if="name === 'funnel'">
|
||||
<path d="M4 4.5h16l-6.2 8.2V19l-3.6 2v-8.3L4 4.5Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'lightbulb'">
|
||||
<path d="M9 18h6" />
|
||||
<path d="M10 21h4" />
|
||||
<path d="M8 14.2A5.2 5.2 0 1 1 16 14.2C16 16 14.7 17 14 18H10c-.7-1-2-2-2-3.8Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'building'">
|
||||
<path d="M5 21V5.5A1.5 1.5 0 0 1 6.5 4h7A1.5 1.5 0 0 1 15 5.5V21" />
|
||||
<path d="M15 10h2.5A1.5 1.5 0 0 1 19 11.5V21" />
|
||||
<path d="M8 8h2M8 12h2M8 16h2M12 8h1M12 12h1M12 16h1" />
|
||||
<path d="M4 21h16" />
|
||||
</template>
|
||||
<template v-else-if="name === 'user'">
|
||||
<circle cx="12" cy="8" r="3.2" />
|
||||
<path d="M5 19c.9-3.2 3.2-4.8 7-4.8s6.1 1.6 7 4.8" />
|
||||
</template>
|
||||
<template v-else-if="name === 'flag'">
|
||||
<path d="M6 21V4" />
|
||||
<path d="M6 4h10.5l-1.8 3.4L16.5 11H6" />
|
||||
</template>
|
||||
<template v-else-if="name === 'refresh'">
|
||||
<path d="M20 12a8 8 0 1 1-2.2-5.5" />
|
||||
<path d="M20 4v5h-5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'x'">
|
||||
<path d="M6 6 18 18M18 6 6 18" />
|
||||
</template>
|
||||
<template v-else-if="name === 'x-circle'">
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="m9 9 6 6M15 9l-6 6" />
|
||||
</template>
|
||||
<template v-else-if="name === 'mic'">
|
||||
<rect x="9" y="3.5" width="6" height="10" rx="3" />
|
||||
<path d="M7 11.5a5 5 0 0 0 10 0" />
|
||||
<path d="M12 16.5V20M9 20h6" />
|
||||
</template>
|
||||
<template v-else-if="name === 'trash'">
|
||||
<path d="M5 7h14" />
|
||||
<path d="M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7" />
|
||||
<path d="M7.5 7 8.3 19a1.5 1.5 0 0 0 1.5 1.4h4.4a1.5 1.5 0 0 0 1.5-1.4L16.5 7" />
|
||||
</template>
|
||||
<template v-else-if="name === 'stop'">
|
||||
<rect x="7.5" y="7.5" width="9" height="9" rx="1.6" fill="currentColor" stroke="none" />
|
||||
</template>
|
||||
<template v-else-if="name === 'minus'">
|
||||
<path d="M6 12h12" />
|
||||
</template>
|
||||
<template v-else-if="name === 'dollar'">
|
||||
<circle cx="12" cy="12" r="8.4" />
|
||||
<path d="M12 6.8v10.4" />
|
||||
<path d="M9.4 9.1c.7-1.1 1.8-1.6 2.6-1.6 1.3 0 2.3.7 2.3 1.9 0 2.6-5 1.5-5 4.1 0 1.3 1.1 2.2 2.7 2.2 1 0 2-.5 2.6-1.4" />
|
||||
</template>
|
||||
<template v-else-if="name === 'check-plain'">
|
||||
<path d="m5.5 12.2 4.2 4.3 8.8-9" />
|
||||
</template>
|
||||
<template v-else-if="name === 'layers'">
|
||||
<path d="M12 4 4 8.2 12 12.4 20 8.2 12 4Z" />
|
||||
<path d="M4 12.2 12 16.4 20 12.2" />
|
||||
<path d="M4 16.2 12 20.4 20 16.2" />
|
||||
</template>
|
||||
<template v-else-if="name === 'target'">
|
||||
<circle cx="12" cy="12" r="8" />
|
||||
<circle cx="12" cy="12" r="4.2" />
|
||||
<circle cx="12" cy="12" r="1.2" fill="currentColor" stroke="none" />
|
||||
</template>
|
||||
<template v-else-if="name === 'pencil'">
|
||||
<path d="M12 20h9" />
|
||||
<path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'edit'">
|
||||
<path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||||
<path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'grid'">
|
||||
<rect x="3.5" y="3.5" width="7" height="7" rx="1.2" />
|
||||
<rect x="13.5" y="3.5" width="7" height="7" rx="1.2" />
|
||||
<rect x="3.5" y="13.5" width="7" height="7" rx="1.2" />
|
||||
<rect x="13.5" y="13.5" width="7" height="7" rx="1.2" />
|
||||
</template>
|
||||
<template v-else-if="name === 'list'">
|
||||
<path d="M8 6h12M8 12h12M8 18h12" />
|
||||
<circle cx="4.5" cy="6" r="1" fill="currentColor" stroke="none" />
|
||||
<circle cx="4.5" cy="12" r="1" fill="currentColor" stroke="none" />
|
||||
<circle cx="4.5" cy="18" r="1" fill="currentColor" stroke="none" />
|
||||
</template>
|
||||
<template v-else-if="name === 'eye'">
|
||||
<path d="M2.5 12S6.5 5.5 12 5.5 21.5 12 21.5 12 17.5 18.5 12 18.5 2.5 12 2.5 12Z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</template>
|
||||
<template v-else-if="name === 'eye-off'">
|
||||
<path d="M2.5 12S6.5 5.5 12 5.5 21.5 12 21.5 12 17.5 18.5 12 18.5 2.5 12 2.5 12Z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M4 20 20 4" />
|
||||
</template>
|
||||
<template v-else-if="name === 'lock'">
|
||||
<rect x="5" y="11" width="14" height="10" rx="2" />
|
||||
<path d="M8 11V8a4 4 0 0 1 8 0v3" />
|
||||
</template>
|
||||
<template v-else-if="name === 'truck'">
|
||||
<path d="M3 7.5h11V16H3z" />
|
||||
<path d="M14 10h4.2l2.3 3.2V16H14z" />
|
||||
<circle cx="7" cy="17.5" r="1.6" />
|
||||
<circle cx="17" cy="17.5" r="1.6" />
|
||||
<path d="M3 16h1.2M8.7 16H15" />
|
||||
</template>
|
||||
<template v-else-if="name === 'grip'">
|
||||
<circle cx="9" cy="7" r="1.2" fill="currentColor" stroke="none" />
|
||||
<circle cx="15" cy="7" r="1.2" fill="currentColor" stroke="none" />
|
||||
<circle cx="9" cy="12" r="1.2" fill="currentColor" stroke="none" />
|
||||
<circle cx="15" cy="12" r="1.2" fill="currentColor" stroke="none" />
|
||||
<circle cx="9" cy="17" r="1.2" fill="currentColor" stroke="none" />
|
||||
<circle cx="15" cy="17" r="1.2" fill="currentColor" stroke="none" />
|
||||
</template>
|
||||
<template v-else-if="name === 'apps-plus'">
|
||||
<rect x="3.2" y="3.2" width="7.4" height="7.4" rx="1.6" />
|
||||
<rect x="13.4" y="3.2" width="7.4" height="7.4" rx="1.6" />
|
||||
<rect x="13.4" y="13.4" width="7.4" height="7.4" rx="1.6" />
|
||||
<path d="M6.9 13.6v6.8M3.5 17h6.8" />
|
||||
</template>
|
||||
<template v-else-if="name === 'crown'">
|
||||
<path d="M4 16.5 6.2 8.2 12 12.4 17.8 8.2 20 16.5H4Z" />
|
||||
<path d="M5.2 18.6h13.6" />
|
||||
<circle cx="6.2" cy="7.2" r="1.15" fill="currentColor" stroke="none" />
|
||||
<circle cx="12" cy="5.6" r="1.15" fill="currentColor" stroke="none" />
|
||||
<circle cx="17.8" cy="7.2" r="1.15" fill="currentColor" stroke="none" />
|
||||
</template>
|
||||
<template v-else-if="name === 'gift'">
|
||||
<rect x="4" y="11" width="16" height="9" rx="1.4" />
|
||||
<path d="M4 11V8.2A1.4 1.4 0 0 1 5.4 6.8h13.2A1.4 1.4 0 0 1 20 8.2V11" />
|
||||
<path d="M12 6.8v13.2" />
|
||||
<path d="M12 6.8c0-2.1-1.5-3.4-3.2-2.4C7.2 5.3 8.1 7.6 12 6.8Z" />
|
||||
<path d="M12 6.8c0-2.1 1.5-3.4 3.2-2.4 1.6.9.7 3.2-3.2 2.4Z" />
|
||||
</template>
|
||||
<template v-else-if="name === 'medal'">
|
||||
<circle cx="12" cy="9" r="5.2" />
|
||||
<circle cx="12" cy="9" r="2.3" />
|
||||
<path d="m9.1 13.6-1.4 6.2 4.3-2.3 4.3 2.3-1.4-6.2" />
|
||||
</template>
|
||||
<template v-else-if="name === 'logout'">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
||||
<path d="M16 17l5-5-5-5" />
|
||||
<path d="M21 12H9" />
|
||||
</template>
|
||||
<template v-else-if="name === 'pulse'">
|
||||
<path d="M3 12h3.2l2-6.5L12 19l2.4-7.5H21" />
|
||||
</template>
|
||||
<template v-else-if="name === 'sliders'">
|
||||
<path d="M4 7h16M4 17h16" />
|
||||
<path d="M8 4.5v5M16 14.5v5" />
|
||||
</template>
|
||||
<template v-else-if="name === 'camera'">
|
||||
<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3Z" />
|
||||
<circle cx="12" cy="13" r="3" />
|
||||
</template>
|
||||
<template v-else-if="name === 'clip'">
|
||||
<path d="M21.4 11.6 12.7 20.3a5 5 0 0 1-7.1-7.1l8.5-8.4a3.5 3.5 0 0 1 5 5L10.6 18.2a2 2 0 1 1-2.8-2.8l7.1-7.1" />
|
||||
</template>
|
||||
</svg>
|
||||
<VsIcon class="ico" :name="name" map="ui" :size="size ?? 20" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,37 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Button as AButton, Select as ASelect } from 'ant-design-vue';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
import { computed } from 'vue';
|
||||
import { Select as ASelect } from 'ant-design-vue';
|
||||
|
||||
type PickUser = { id: string; fullName: string; orgRoleName?: string | null };
|
||||
type AssigneeGroup = { id: string; name: string; userIds: string[] };
|
||||
type GroupKind = 'role' | 'team';
|
||||
type PickUser = { id: string; fullName: string };
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue: string[];
|
||||
users: PickUser[];
|
||||
/** انتخاب یک نقش، همهٔ اعضایش را مسئول می‌کند */
|
||||
roles?: AssigneeGroup[];
|
||||
/** انتخاب یک تیم، همهٔ اعضایش را مسئول می‌کند */
|
||||
teams?: AssigneeGroup[];
|
||||
disabled?: boolean;
|
||||
/** حداقل تعداد انتخاب (حذف آخرین نفر غیرفعال می‌شود) */
|
||||
min?: number;
|
||||
addLabel?: string;
|
||||
emptyLabel?: string;
|
||||
/** دکمهٔ انتخاب یکجای همهٔ اعضا و جمع‌کردن برچسب‌ها وقتی تعداد زیاد است */
|
||||
selectAll?: boolean;
|
||||
}>(),
|
||||
{
|
||||
roles: () => [],
|
||||
teams: () => [],
|
||||
disabled: false,
|
||||
min: 0,
|
||||
addLabel: 'افزودن',
|
||||
emptyLabel: 'کسی انتخاب نشده',
|
||||
selectAll: false,
|
||||
},
|
||||
{ disabled: false, min: 0, addLabel: 'افزودن', emptyLabel: 'کسی انتخاب نشده' },
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -39,208 +22,32 @@ const emit = defineEmits<{
|
||||
change: [ids: string[]];
|
||||
}>();
|
||||
|
||||
const pinned = ref(new Set<string>());
|
||||
|
||||
function uniqueIds(ids: string[]) {
|
||||
return [...new Set(ids.filter(Boolean))];
|
||||
}
|
||||
|
||||
function normalizeSearch(value: string) {
|
||||
return value.replace(/ي/g, 'ی').replace(/ك/g, 'ک').replace(/\u200c/g, ' ').trim().toLowerCase();
|
||||
}
|
||||
|
||||
const catalog = computed(() => {
|
||||
const rows: Array<{ token: string; name: string; userIds: string[]; kind: GroupKind }> = [];
|
||||
const push = (kind: GroupKind, groups: AssigneeGroup[]) => {
|
||||
for (const group of groups) {
|
||||
const userIds = uniqueIds(group.userIds);
|
||||
if (!userIds.length || !group.id || !group.name) continue;
|
||||
rows.push({
|
||||
token: `${kind}:${group.id}`,
|
||||
name: group.name,
|
||||
userIds,
|
||||
kind,
|
||||
});
|
||||
}
|
||||
};
|
||||
push('role', props.roles);
|
||||
push('team', props.teams);
|
||||
return rows;
|
||||
});
|
||||
|
||||
const catalogByToken = computed(() => new Map(catalog.value.map((group) => [group.token, group])));
|
||||
|
||||
function covers(userIds: string[], selected: string[]) {
|
||||
return userIds.length > 0 && userIds.every((id) => selected.includes(id));
|
||||
}
|
||||
|
||||
const shownGroups = computed(() =>
|
||||
catalog.value.filter((group) => {
|
||||
if (!covers(group.userIds, props.modelValue)) return false;
|
||||
if (group.userIds.length >= 2) return true;
|
||||
return pinned.value.has(group.token);
|
||||
}),
|
||||
const options = computed(() =>
|
||||
props.users.map((u) => ({ value: u.id, label: u.fullName })),
|
||||
);
|
||||
|
||||
const selectValue = computed(() => {
|
||||
const covered = new Set(shownGroups.value.flatMap((group) => group.userIds));
|
||||
return [
|
||||
...shownGroups.value.map((group) => group.token),
|
||||
...props.modelValue.filter((id) => !covered.has(id)),
|
||||
];
|
||||
});
|
||||
|
||||
const options = computed(() => {
|
||||
const people = props.users.map((user) => ({
|
||||
value: user.id,
|
||||
label:
|
||||
catalog.value.length && user.orgRoleName
|
||||
? `${user.fullName} — ${user.orgRoleName}`
|
||||
: user.fullName,
|
||||
}));
|
||||
if (!catalog.value.length) return people;
|
||||
const grouped: Array<{ label: string; options: Array<{ value: string; label: string }> }> = [];
|
||||
const section = (kind: GroupKind, title: string) => {
|
||||
const items = catalog.value
|
||||
.filter((group) => group.kind === kind)
|
||||
.map((group) => ({
|
||||
value: group.token,
|
||||
label: `${group.name} (${toFaDigits(group.userIds.length)} نفر)`,
|
||||
}));
|
||||
if (items.length) grouped.push({ label: title, options: items });
|
||||
};
|
||||
section('role', 'نقش‌ها');
|
||||
section('team', 'تیم‌ها');
|
||||
if (people.length) grouped.push({ label: 'اعضا', options: people });
|
||||
return grouped;
|
||||
});
|
||||
|
||||
function filterOption(input: string, option?: { label?: unknown }) {
|
||||
const label = String(option?.label ?? '');
|
||||
if (!label || !input.trim()) return true;
|
||||
return normalizeSearch(label).includes(normalizeSearch(input));
|
||||
}
|
||||
|
||||
const allPicked = computed(
|
||||
() =>
|
||||
props.users.length > 0 &&
|
||||
props.users.every((user) => props.modelValue.includes(user.id)),
|
||||
);
|
||||
|
||||
const tagLimit = computed(() => {
|
||||
if (props.selectAll && allPicked.value && props.users.length > 2) return 0;
|
||||
return undefined;
|
||||
});
|
||||
|
||||
function tagPlaceholder(omitted: unknown[]) {
|
||||
if (allPicked.value) return `همهٔ اعضا (${toFaDigits(props.users.length)})`;
|
||||
const extra = Array.isArray(omitted) ? omitted.length : 0;
|
||||
if (!extra) return '';
|
||||
return catalog.value.length ? `${toFaDigits(extra)} مورد دیگر` : `${toFaDigits(extra)} نفر دیگر`;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modelValue.join('\0'),
|
||||
() => {
|
||||
const next = new Set<string>();
|
||||
for (const token of pinned.value) {
|
||||
const group = catalogByToken.value.get(token);
|
||||
if (group && covers(group.userIds, props.modelValue)) next.add(token);
|
||||
}
|
||||
pinned.value = next;
|
||||
},
|
||||
);
|
||||
|
||||
function sameIds(left: string[], right: string[]) {
|
||||
if (left.length !== right.length) return false;
|
||||
const have = new Set(left);
|
||||
return right.every((id) => have.has(id));
|
||||
}
|
||||
|
||||
function commit(ids: string[]) {
|
||||
function onUpdate(value: unknown) {
|
||||
const ids = Array.isArray(value) ? value.map(String) : [];
|
||||
if (ids.length < props.min && props.modelValue.length >= props.min) {
|
||||
emit('update:modelValue', [...props.modelValue]);
|
||||
return;
|
||||
}
|
||||
emit('update:modelValue', ids);
|
||||
if (!sameIds(ids, props.modelValue)) emit('change', ids);
|
||||
}
|
||||
|
||||
function onUpdate(value: unknown) {
|
||||
const tokens = Array.isArray(value) ? value.map(String) : [];
|
||||
const tokenSet = new Set(tokens);
|
||||
const removedMemberIds = new Set<string>();
|
||||
for (const token of selectValue.value) {
|
||||
if (tokenSet.has(token)) continue;
|
||||
const dropped = catalogByToken.value.get(token);
|
||||
if (!dropped) continue;
|
||||
for (const id of dropped.userIds) removedMemberIds.add(id);
|
||||
}
|
||||
const ids = new Set<string>();
|
||||
const pins = new Set<string>();
|
||||
for (const token of tokens) {
|
||||
const group = catalogByToken.value.get(token);
|
||||
if (group) {
|
||||
pins.add(token);
|
||||
for (const id of group.userIds) {
|
||||
if (removedMemberIds.has(id)) continue;
|
||||
ids.add(id);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
if (!token.startsWith('role:') && !token.startsWith('team:')) ids.add(token);
|
||||
}
|
||||
const next = [...ids];
|
||||
if (next.length < props.min && props.modelValue.length >= props.min) {
|
||||
emit('update:modelValue', [...props.modelValue]);
|
||||
return;
|
||||
}
|
||||
pinned.value = pins;
|
||||
commit(next);
|
||||
}
|
||||
|
||||
function pickAll() {
|
||||
if (props.disabled || allPicked.value) return;
|
||||
commit(props.users.map((user) => user.id));
|
||||
emit('change', ids);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="user-multi" :class="{ 'with-all': selectAll }">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
allow-clear
|
||||
show-search
|
||||
:value="selectValue"
|
||||
:options="options"
|
||||
:disabled="disabled"
|
||||
:placeholder="emptyLabel"
|
||||
:filter-option="filterOption"
|
||||
:max-tag-count="tagLimit"
|
||||
:max-tag-placeholder="selectAll && allPicked ? tagPlaceholder : undefined"
|
||||
style="width: 100%"
|
||||
@update:value="onUpdate"
|
||||
/>
|
||||
<a-button v-if="selectAll" :disabled="disabled || allPicked || !users.length" @click="pickAll">
|
||||
همه
|
||||
</a-button>
|
||||
</div>
|
||||
<a-select
|
||||
mode="multiple"
|
||||
allow-clear
|
||||
show-search
|
||||
option-filter-prop="label"
|
||||
:value="modelValue"
|
||||
:options="options"
|
||||
:disabled="disabled"
|
||||
:placeholder="emptyLabel"
|
||||
style="width: 100%"
|
||||
@update:value="onUpdate"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.user-multi.with-all {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-multi.with-all :deep(.ant-select) {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-multi.with-all :deep(.ant-btn) {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, ref } from 'vue';
|
||||
import { Button as AButton, Typography } from 'ant-design-vue';
|
||||
import { AudioOutlined, PauseCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { AudioOutlined, PauseCircleOutlined } from '@/icons/ant-bridge';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
|
||||
const { Text: ATypographyText } = Typography;
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getVuesaxSvg } from '@/icons/vuesax';
|
||||
import { resolveVuesaxName } from '@/icons/name-map';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
/** کلید کوتاه vuesax (مثل add) یا نام UiIcon / Ant با map */
|
||||
name: string;
|
||||
size?: number | string;
|
||||
/** منبع نگاشت نام؛ پیش‌فرض raw = کلید مستقیم پک */
|
||||
map?: 'raw' | 'ui' | 'ant';
|
||||
spin?: boolean;
|
||||
title?: string;
|
||||
}>(),
|
||||
{
|
||||
size: 20,
|
||||
map: 'raw',
|
||||
spin: false,
|
||||
},
|
||||
);
|
||||
|
||||
const resolved = computed(() => resolveVuesaxName(props.name, props.map));
|
||||
|
||||
const markup = computed(() => {
|
||||
const svg = getVuesaxSvg(resolved.value);
|
||||
if (!svg) return '';
|
||||
// Strip fixed width/height so CSS size controls the box; keep viewBox.
|
||||
return svg
|
||||
.replace(/\swidth="[^"]*"/, '')
|
||||
.replace(/\sheight="[^"]*"/, '')
|
||||
.replace(
|
||||
'<svg ',
|
||||
`<svg width="${props.size}" height="${props.size}" style="width:${typeof props.size === 'number' ? props.size + 'px' : props.size};height:${typeof props.size === 'number' ? props.size + 'px' : props.size}" `,
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
class="vs-icon"
|
||||
:class="{ 'vs-icon--spin': spin }"
|
||||
:style="{
|
||||
width: typeof size === 'number' ? `${size}px` : size,
|
||||
height: typeof size === 'number' ? `${size}px` : size,
|
||||
}"
|
||||
:title="title"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
v-html="markup"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.vs-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 0;
|
||||
flex-shrink: 0;
|
||||
color: inherit;
|
||||
}
|
||||
.vs-icon :deep(svg) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.vs-icon--spin {
|
||||
animation: vs-icon-spin 1s linear infinite;
|
||||
}
|
||||
@keyframes vs-icon-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import type {
|
||||
@@ -10,9 +10,10 @@ import type {
|
||||
import { api } from '@/lib/api';
|
||||
import { activityTypeView } from '@/lib/activity-types';
|
||||
import { calendarDaysBetween, formatClockFa, formatJalaliDay, startOfLocalDay, toFaDigits } from '@/lib/jalali';
|
||||
import { Flex as AFlex } from 'ant-design-vue';
|
||||
import PipelineBoard from '@/components/pipeline/PipelineBoard.vue';
|
||||
import DealCardOverlay from '@/components/pipeline/DealCardOverlay.vue';
|
||||
import ActivityQuickView from '@/components/activities/ActivityQuickView.vue';
|
||||
import { CrmSkeleton, CrmSkeletonCard } from '@/components/skeleton';
|
||||
import {
|
||||
ACTIVITY_BOARD_COPY,
|
||||
initialsFromTitle,
|
||||
@@ -42,7 +43,6 @@ const emit = defineEmits<{
|
||||
stagesChanged: [];
|
||||
add: [stageId: string];
|
||||
error: [message: string];
|
||||
notice: [message: string];
|
||||
menuDeal: [activity: ActivityDto, stageId?: string];
|
||||
toggleSelect: [activityId: string];
|
||||
bulkDelete: [];
|
||||
@@ -65,9 +65,6 @@ const draggingColumnId = ref<string | null>(null);
|
||||
const overlayDeal = ref<PipelineDeal | null>(null);
|
||||
const overlayAccent = ref<PipelineAccent>('green');
|
||||
const overlayPos = ref({ x: 0, y: 0 });
|
||||
const quickId = ref<string | null>(null);
|
||||
const peekId = ref<string | null>(null);
|
||||
let peekLinger = 0;
|
||||
const moving = ref(false);
|
||||
const stageBusy = ref(false);
|
||||
const localOrder = ref<string[] | null>(null);
|
||||
@@ -227,8 +224,6 @@ function onMenuActivity(id: string) {
|
||||
}
|
||||
|
||||
function onDragStart(deal: PipelineDeal, event: DragEvent) {
|
||||
// اگر شناسهٔ درگ ستون گیر کرده باشد، دراپ کارت را ستون‌جابه‌جا می‌بیند
|
||||
draggingColumnId.value = null;
|
||||
draggingId.value = deal.id;
|
||||
overlayDeal.value = deal;
|
||||
const sid = findStageOf(deal.id);
|
||||
@@ -242,19 +237,12 @@ function onDragStart(deal: PipelineDeal, event: DragEvent) {
|
||||
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
|
||||
event.dataTransfer.setDragImage(img, 0, 0);
|
||||
}
|
||||
// بستن پیش‌نمایش وسط dragstart گاهی خودِ درگ را لغو می‌کند
|
||||
if (quickId.value) void nextTick(() => closeQuick());
|
||||
}
|
||||
|
||||
function onDragEnd() {
|
||||
const endedId = draggingId.value;
|
||||
// drop معمولاً قبل از dragend است؛ کمی تأخیر تا fallback شناسه از بین نرود
|
||||
window.setTimeout(() => {
|
||||
if (draggingId.value !== endedId) return;
|
||||
draggingId.value = null;
|
||||
dropStageId.value = null;
|
||||
overlayDeal.value = null;
|
||||
}, 0);
|
||||
draggingId.value = null;
|
||||
dropStageId.value = null;
|
||||
overlayDeal.value = null;
|
||||
}
|
||||
|
||||
function onDragOver(stageId: string, event: DragEvent) {
|
||||
@@ -306,21 +294,6 @@ async function moveCard(activityId: string, toStageId: string, index?: number) {
|
||||
stageId: toStageId,
|
||||
position: insertAt,
|
||||
});
|
||||
if (!same && data.status !== toStage.kind) {
|
||||
const hideFromMine = props.params.desk === 'mine';
|
||||
from.items = hideFromMine
|
||||
? prevFrom.filter((row) => row.id !== activityId)
|
||||
: prevFrom.map((row) => (row.id === activityId ? data : row));
|
||||
from.total = hideFromMine ? Math.max(0, prevFromTotal - 1) : prevFromTotal;
|
||||
to.items = prevTo;
|
||||
to.total = prevToTotal;
|
||||
emit(
|
||||
'notice',
|
||||
'سهم شما ثبت شد. فعالیت وقتی انجام‌شده می‌شود که همهٔ مسئول‌ها سهم خود را بزنند.',
|
||||
);
|
||||
emit('changed');
|
||||
return;
|
||||
}
|
||||
const column = same ? from : to;
|
||||
column.items = column.items.map((i) => (i.id === activityId ? data : i));
|
||||
emit('changed');
|
||||
@@ -339,24 +312,18 @@ async function moveCard(activityId: string, toStageId: string, index?: number) {
|
||||
|
||||
async function onDrop(stageId: string, event: DragEvent, index?: number) {
|
||||
event.preventDefault();
|
||||
const transfer = event.dataTransfer?.getData('text/plain') || '';
|
||||
const cardId = draggingId.value;
|
||||
const columnId = draggingColumnId.value;
|
||||
const raw = event.dataTransfer?.getData('text/plain') || draggingColumnId.value || draggingId.value || '';
|
||||
dropStageId.value = null;
|
||||
draggingId.value = null;
|
||||
overlayDeal.value = null;
|
||||
draggingColumnId.value = null;
|
||||
|
||||
const isStageDrag = transfer.startsWith('stage:');
|
||||
if (isStageDrag || (!transfer && !cardId && columnId)) {
|
||||
const fromId = isStageDrag ? transfer.slice('stage:'.length) : columnId;
|
||||
if (raw.startsWith('stage:') || draggingColumnId.value) {
|
||||
const fromId = raw.replace(/^stage:/, '') || draggingColumnId.value;
|
||||
draggingColumnId.value = null;
|
||||
if (fromId) await reorderColumn(fromId, stageId);
|
||||
return;
|
||||
}
|
||||
|
||||
const activityId = (!isStageDrag && transfer) || cardId || '';
|
||||
if (!activityId || moving.value) return;
|
||||
await moveCard(activityId, stageId, index);
|
||||
if (!raw || moving.value) return;
|
||||
await moveCard(raw, stageId, index);
|
||||
}
|
||||
|
||||
async function persistOrder(ids: string[]) {
|
||||
@@ -439,7 +406,7 @@ async function onAddStage(name: string) {
|
||||
}
|
||||
}
|
||||
|
||||
function activityQuery(id: string) {
|
||||
function openActivity(id: string) {
|
||||
const query: Record<string, string> = {
|
||||
from: 'desk',
|
||||
nav: crypto.randomUUID(),
|
||||
@@ -459,72 +426,63 @@ function activityQuery(id: string) {
|
||||
if (source.due) query.due = source.due;
|
||||
const columnId = findStageOf(id);
|
||||
if (columnId) query.stage = columnId;
|
||||
return query;
|
||||
}
|
||||
|
||||
function openActivity(id: string) {
|
||||
if (quickId.value === id) {
|
||||
closeQuick();
|
||||
return;
|
||||
}
|
||||
window.clearTimeout(peekLinger);
|
||||
quickId.value = id;
|
||||
peekId.value = id;
|
||||
}
|
||||
|
||||
function closeQuick() {
|
||||
quickId.value = null;
|
||||
const id = peekId.value;
|
||||
window.clearTimeout(peekLinger);
|
||||
peekLinger = window.setTimeout(() => {
|
||||
if (!quickId.value && peekId.value === id) peekId.value = null;
|
||||
}, 650);
|
||||
}
|
||||
|
||||
function openFullActivity(id: string) {
|
||||
quickId.value = null;
|
||||
void router.push({ name: 'activity-detail', params: { id }, query: activityQuery(id) });
|
||||
void router.push({ name: 'activity-detail', params: { id }, query });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kanban-wrap">
|
||||
<p v-if="initialLoading && !Object.keys(columns).length" class="muted">در حال بارگذاری ستون‌ها…</p>
|
||||
<PipelineBoard
|
||||
v-else
|
||||
:stages="boardStages"
|
||||
:dragging-id="draggingId"
|
||||
:drop-stage-id="dropStageId"
|
||||
:can-manage="canManage"
|
||||
:copy="ACTIVITY_BOARD_COPY"
|
||||
:select-mode="selectMode"
|
||||
:selected-ids="selectedIds"
|
||||
:peek-id="peekId"
|
||||
:preview-id="quickId"
|
||||
@drag-start="onDragStart"
|
||||
@drag-end="onDragEnd"
|
||||
@drag-over="onDragOver"
|
||||
@drop="onDrop"
|
||||
@add-deal="emit('add', $event)"
|
||||
@open-deal="openActivity"
|
||||
@detail-deal="openFullActivity"
|
||||
@menu-deal="onMenuActivity"
|
||||
@toggle-select="emit('toggleSelect', $event)"
|
||||
@bulk-delete="emit('bulkDelete')"
|
||||
@rename-stage="onRenameStage"
|
||||
@delete-stage="onDeleteStage"
|
||||
@move-stage="onMoveStage"
|
||||
@column-drag-start="(id: string) => { draggingId = null; overlayDeal = null; draggingColumnId = id; }"
|
||||
@column-drag-end="draggingColumnId = null; dropStageId = null"
|
||||
@add-stage="onAddStage"
|
||||
@load-more="loadMore"
|
||||
/>
|
||||
<ActivityQuickView
|
||||
:activity-id="quickId"
|
||||
@close="closeQuick"
|
||||
@changed="loadAll()"
|
||||
@full="openFullActivity"
|
||||
/>
|
||||
<div
|
||||
class="kanban-wrap"
|
||||
:style="{
|
||||
flex: '1 1 auto',
|
||||
minHeight: 0,
|
||||
height: '100%',
|
||||
minWidth: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}"
|
||||
>
|
||||
<CrmSkeleton :loading="initialLoading && !Object.keys(columns).length">
|
||||
<a-flex
|
||||
v-if="initialLoading && !Object.keys(columns).length"
|
||||
:gap="12"
|
||||
:style="{ overflow: 'auto', padding: '8px', flex: 1, minHeight: 0 }"
|
||||
>
|
||||
<div
|
||||
v-for="i in 4"
|
||||
:key="`sk-col-${i}`"
|
||||
:style="{ width: '280px', flex: '0 0 280px' }"
|
||||
>
|
||||
<CrmSkeletonCard :rows="6" :min-height="360" />
|
||||
</div>
|
||||
</a-flex>
|
||||
<PipelineBoard
|
||||
v-else
|
||||
:stages="boardStages"
|
||||
:dragging-id="draggingId"
|
||||
:drop-stage-id="dropStageId"
|
||||
:can-manage="canManage"
|
||||
:copy="ACTIVITY_BOARD_COPY"
|
||||
:select-mode="selectMode"
|
||||
:selected-ids="selectedIds"
|
||||
@drag-start="onDragStart"
|
||||
@drag-end="onDragEnd"
|
||||
@drag-over="onDragOver"
|
||||
@drop="onDrop"
|
||||
@add-deal="emit('add', $event)"
|
||||
@open-deal="openActivity"
|
||||
@menu-deal="onMenuActivity"
|
||||
@toggle-select="emit('toggleSelect', $event)"
|
||||
@bulk-delete="emit('bulkDelete')"
|
||||
@rename-stage="onRenameStage"
|
||||
@delete-stage="onDeleteStage"
|
||||
@move-stage="onMoveStage"
|
||||
@column-drag-start="(id: string) => (draggingColumnId = id)"
|
||||
@column-drag-end="draggingColumnId = null; dropStageId = null"
|
||||
@add-stage="onAddStage"
|
||||
@load-more="loadMore"
|
||||
/>
|
||||
</CrmSkeleton>
|
||||
<Teleport to="body">
|
||||
<DealCardOverlay
|
||||
v-if="overlayDeal && draggingId"
|
||||
@@ -548,9 +506,4 @@ function openFullActivity(id: string) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.muted {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -17,8 +17,6 @@ const props = defineProps<{
|
||||
activity: ActivityDto;
|
||||
saving?: boolean;
|
||||
save: (payload: { text: string; photoOnly: boolean }) => Promise<void>;
|
||||
/** بالاتر از مودال خلاصهٔ فعالیت */
|
||||
overlayZIndex?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -357,7 +355,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div class="layer" role="presentation" :style="overlayZIndex ? { zIndex: overlayZIndex } : undefined">
|
||||
<div class="layer" role="presentation">
|
||||
<div class="backdrop" aria-hidden="true" />
|
||||
<section
|
||||
class="sheet"
|
||||
|
||||
@@ -11,12 +11,34 @@ import type {
|
||||
PersonDto,
|
||||
} from '@mento/shared';
|
||||
import { api } from '@/lib/api';
|
||||
import { canAssignToOthers } from '@/lib/assign-access';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
import JalaliDateInput from '@/components/JalaliDateInput.vue';
|
||||
import UserMultiSelect from '@/components/UserMultiSelect.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import {
|
||||
Button as AButton,
|
||||
Checkbox as ACheckbox,
|
||||
Col as ACol,
|
||||
Flex as AFlex,
|
||||
FormItem as AFormItem,
|
||||
Input as AInput,
|
||||
InputNumber as AInputNumber,
|
||||
Row as ARow,
|
||||
Select as ASelect,
|
||||
Space as ASpace,
|
||||
Switch as ASwitch,
|
||||
Tag as ATag,
|
||||
Textarea as ATextarea,
|
||||
Typography,
|
||||
} from 'ant-design-vue';
|
||||
import {
|
||||
CloseOutlined,
|
||||
DownOutlined,
|
||||
PlusOutlined,
|
||||
UpOutlined,
|
||||
UserOutlined,
|
||||
} from '@/icons/ant-bridge';
|
||||
|
||||
const { Text: ATypographyText } = Typography;
|
||||
|
||||
const props = defineProps<{
|
||||
fields: ActivityFieldDef[];
|
||||
@@ -24,8 +46,6 @@ const props = defineProps<{
|
||||
}>();
|
||||
|
||||
const model = defineModel<ActivityFieldValues>({ required: true });
|
||||
const auth = useAuthStore();
|
||||
const canAssignOthers = computed(() => canAssignToOthers(auth.user, 'activities'));
|
||||
|
||||
function get<T extends ActivityFieldValue>(key: string, fallback: T): T {
|
||||
const v = model.value[key];
|
||||
@@ -46,9 +66,20 @@ function multi(key: string): string[] {
|
||||
return Array.isArray(v) && v.every((x) => typeof x === 'string') ? (v as string[]) : [];
|
||||
}
|
||||
|
||||
function toggleMulti(key: string, opt: string) {
|
||||
const list = multi(key);
|
||||
set(key, list.includes(opt) ? list.filter((x) => x !== opt) : [...list, opt]);
|
||||
function fieldSpan(type: ActivityFieldDef['type']): number {
|
||||
return ['textarea', 'checklist', 'participants', 'multiselect'].includes(type) ? 24 : 12;
|
||||
}
|
||||
|
||||
function selectOptions(f: ActivityFieldDef) {
|
||||
return (f.options ?? []).map((opt) => ({ value: opt, label: opt }));
|
||||
}
|
||||
|
||||
function onNumberUpdate(key: string, value: number | string | null) {
|
||||
if (value == null || value === '') {
|
||||
set(key, null);
|
||||
return;
|
||||
}
|
||||
set(key, Number(value));
|
||||
}
|
||||
|
||||
/* ---------- چک‌لیست ---------- */
|
||||
@@ -56,7 +87,9 @@ const checklistDraft = ref<Record<string, string>>({});
|
||||
|
||||
function checklist(key: string): ActivityChecklistItem[] {
|
||||
const v = model.value[key];
|
||||
return Array.isArray(v) ? (v as ActivityChecklistItem[]).filter((x) => x && typeof x === 'object') : [];
|
||||
return Array.isArray(v)
|
||||
? (v as ActivityChecklistItem[]).filter((x) => x && typeof x === 'object')
|
||||
: [];
|
||||
}
|
||||
|
||||
function addChecklistItem(key: string) {
|
||||
@@ -115,39 +148,82 @@ function addGuest(key: string) {
|
||||
|
||||
const personQuery = ref<Record<string, string>>({});
|
||||
const personResults = ref<Record<string, PersonDto[]>>({});
|
||||
const personOpenKey = ref('');
|
||||
const personSearching = ref<Record<string, boolean>>({});
|
||||
let personTimer: ReturnType<typeof setTimeout> | undefined;
|
||||
let personSeq = 0;
|
||||
|
||||
function searchPeople(key: string) {
|
||||
personOpenKey.value = key;
|
||||
function searchPeople(key: string, raw: string) {
|
||||
personQuery.value = { ...personQuery.value, [key]: raw };
|
||||
if (personTimer) clearTimeout(personTimer);
|
||||
const q = (personQuery.value[key] ?? '').trim();
|
||||
const q = raw.trim();
|
||||
if (!q) {
|
||||
personResults.value = { ...personResults.value, [key]: [] };
|
||||
personSearching.value = { ...personSearching.value, [key]: false };
|
||||
return;
|
||||
}
|
||||
personSearching.value = { ...personSearching.value, [key]: true };
|
||||
const seq = ++personSeq;
|
||||
personTimer = setTimeout(async () => {
|
||||
try {
|
||||
const { data } = await api.get<PaginatedResponse<PersonDto>>('/people', {
|
||||
params: { q, limit: 8 },
|
||||
});
|
||||
if (seq === personSeq) personResults.value = { ...personResults.value, [key]: data.items };
|
||||
if (seq === personSeq) {
|
||||
personResults.value = { ...personResults.value, [key]: data.items };
|
||||
}
|
||||
} catch {
|
||||
if (seq === personSeq) personResults.value = { ...personResults.value, [key]: [] };
|
||||
if (seq === personSeq) {
|
||||
personResults.value = { ...personResults.value, [key]: [] };
|
||||
}
|
||||
} finally {
|
||||
if (seq === personSeq) {
|
||||
personSearching.value = { ...personSearching.value, [key]: false };
|
||||
}
|
||||
}
|
||||
}, 280);
|
||||
}
|
||||
|
||||
function addPerson(key: string, p: PersonDto) {
|
||||
const personSelectOptions = computed(() => {
|
||||
const map: Record<string, Array<{ value: string; label: string; company: string }>> = {};
|
||||
for (const f of props.fields) {
|
||||
if (f.type !== 'participants') continue;
|
||||
const selectedIds = new Set(participants(f.key).people.map((p) => p.id));
|
||||
map[f.key] = (personResults.value[f.key] ?? [])
|
||||
.filter((p) => !selectedIds.has(p.id))
|
||||
.map((p) => ({
|
||||
value: p.id,
|
||||
label: p.fullName,
|
||||
company: p.company?.name ?? '',
|
||||
}));
|
||||
}
|
||||
return map;
|
||||
});
|
||||
|
||||
function onPersonPick(key: string, value: unknown) {
|
||||
const id = value == null ? '' : String(value);
|
||||
if (!id) return;
|
||||
const hit =
|
||||
(personResults.value[key] ?? []).find((p) => p.id === id) ??
|
||||
null;
|
||||
if (!hit) return;
|
||||
const cur = participants(key);
|
||||
if (!cur.people.some((x) => x.id === p.id)) {
|
||||
patchParticipants(key, { people: [...cur.people, { id: p.id, name: p.fullName }] });
|
||||
if (!cur.people.some((x) => x.id === hit.id)) {
|
||||
patchParticipants(key, { people: [...cur.people, { id: hit.id, name: hit.fullName }] });
|
||||
}
|
||||
personQuery.value = { ...personQuery.value, [key]: '' };
|
||||
personResults.value = { ...personResults.value, [key]: [] };
|
||||
personOpenKey.value = '';
|
||||
}
|
||||
|
||||
function removePerson(key: string, id: string) {
|
||||
patchParticipants(key, {
|
||||
people: participants(key).people.filter((x) => x.id !== id),
|
||||
});
|
||||
}
|
||||
|
||||
function removeGuest(key: string, name: string) {
|
||||
patchParticipants(key, {
|
||||
guests: participants(key).guests.filter((x) => x !== name),
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
@@ -157,523 +233,237 @@ watch(
|
||||
guestDraft.value = {};
|
||||
personQuery.value = {};
|
||||
personResults.value = {};
|
||||
personSearching.value = {};
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fields-grid">
|
||||
<div
|
||||
<a-row :gutter="[16, 0]">
|
||||
<a-col
|
||||
v-for="f in fields"
|
||||
:key="f.key"
|
||||
class="cf"
|
||||
:class="{ wide: ['textarea', 'checklist', 'participants', 'multiselect'].includes(f.type) }"
|
||||
:xs="24"
|
||||
:md="fieldSpan(f.type)"
|
||||
>
|
||||
<label :for="`cf-${f.key}`">
|
||||
{{ f.label }}
|
||||
<i v-if="f.required">*</i>
|
||||
</label>
|
||||
<a-form-item :required="f.required">
|
||||
<template #label>
|
||||
{{ f.label }}
|
||||
</template>
|
||||
|
||||
<input
|
||||
v-if="f.type === 'text' || f.type === 'url'"
|
||||
:id="`cf-${f.key}`"
|
||||
:type="f.type === 'url' ? 'url' : 'text'"
|
||||
:dir="f.type === 'url' ? 'ltr' : undefined"
|
||||
:value="str(f.key)"
|
||||
:placeholder="f.placeholder || ''"
|
||||
maxlength="1000"
|
||||
@input="set(f.key, ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
|
||||
<textarea
|
||||
v-else-if="f.type === 'textarea'"
|
||||
:id="`cf-${f.key}`"
|
||||
:value="str(f.key)"
|
||||
:placeholder="f.placeholder || ''"
|
||||
rows="3"
|
||||
@input="set(f.key, ($event.target as HTMLTextAreaElement).value)"
|
||||
/>
|
||||
|
||||
<input
|
||||
v-else-if="f.type === 'number'"
|
||||
:id="`cf-${f.key}`"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
dir="ltr"
|
||||
:value="str(f.key)"
|
||||
:placeholder="f.placeholder || ''"
|
||||
@input="
|
||||
set(
|
||||
f.key,
|
||||
($event.target as HTMLInputElement).value === ''
|
||||
? null
|
||||
: Number(($event.target as HTMLInputElement).value),
|
||||
)
|
||||
"
|
||||
/>
|
||||
|
||||
<JalaliDateInput
|
||||
v-else-if="f.type === 'date'"
|
||||
:id="`cf-${f.key}`"
|
||||
:model-value="str(f.key)"
|
||||
@update:model-value="(v: string) => set(f.key, v || null)"
|
||||
/>
|
||||
|
||||
<select
|
||||
v-else-if="f.type === 'select'"
|
||||
:id="`cf-${f.key}`"
|
||||
:value="str(f.key)"
|
||||
@change="set(f.key, ($event.target as HTMLSelectElement).value || null)"
|
||||
>
|
||||
<option value="">— انتخاب کنید —</option>
|
||||
<option v-for="opt in f.options ?? []" :key="opt" :value="opt">{{ opt }}</option>
|
||||
</select>
|
||||
|
||||
<div v-else-if="f.type === 'multiselect'" class="chips">
|
||||
<button
|
||||
v-for="opt in f.options ?? []"
|
||||
:key="opt"
|
||||
type="button"
|
||||
class="chip-opt"
|
||||
:class="{ on: multi(f.key).includes(opt) }"
|
||||
@click="toggleMulti(f.key, opt)"
|
||||
>
|
||||
<UiIcon v-if="multi(f.key).includes(opt)" name="check-plain" :size="12" />
|
||||
{{ opt }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label v-else-if="f.type === 'checkbox'" class="switch">
|
||||
<input
|
||||
:id="`cf-${f.key}`"
|
||||
type="checkbox"
|
||||
:checked="get<boolean>(f.key, false) === true"
|
||||
@change="set(f.key, ($event.target as HTMLInputElement).checked)"
|
||||
<a-input
|
||||
v-if="f.type === 'text' || f.type === 'url'"
|
||||
:value="str(f.key)"
|
||||
:type="f.type === 'url' ? 'url' : 'text'"
|
||||
:dir="f.type === 'url' ? 'ltr' : undefined"
|
||||
:placeholder="f.placeholder || ''"
|
||||
:maxlength="1000"
|
||||
style="width: 100%"
|
||||
@update:value="(v: string) => set(f.key, v)"
|
||||
/>
|
||||
<i />
|
||||
<span>{{ get<boolean>(f.key, false) === true ? 'بله' : 'خیر' }}</span>
|
||||
</label>
|
||||
|
||||
<div v-else-if="f.type === 'checklist'" class="checklist">
|
||||
<p v-if="checklist(f.key).length" class="progress">
|
||||
{{ toFaDigits(checklist(f.key).filter((x) => x.done).length) }} از
|
||||
{{ toFaDigits(checklist(f.key).length) }} انجام شده
|
||||
</p>
|
||||
<ul>
|
||||
<li v-for="(it, idx) in checklist(f.key)" :key="it.id" :class="{ done: it.done }">
|
||||
<input
|
||||
type="checkbox"
|
||||
<a-textarea
|
||||
v-else-if="f.type === 'textarea'"
|
||||
:value="str(f.key)"
|
||||
:placeholder="f.placeholder || ''"
|
||||
:rows="3"
|
||||
style="width: 100%"
|
||||
@update:value="(v: string) => set(f.key, v)"
|
||||
/>
|
||||
|
||||
<a-input-number
|
||||
v-else-if="f.type === 'number'"
|
||||
:value="str(f.key) === '' ? undefined : Number(str(f.key))"
|
||||
:placeholder="f.placeholder || ''"
|
||||
style="width: 100%"
|
||||
@update:value="(v: number | string | null) => onNumberUpdate(f.key, v)"
|
||||
/>
|
||||
|
||||
<JalaliDateInput
|
||||
v-else-if="f.type === 'date'"
|
||||
:model-value="str(f.key)"
|
||||
style="width: 100%"
|
||||
@update:model-value="(v: string) => set(f.key, v || null)"
|
||||
/>
|
||||
|
||||
<a-select
|
||||
v-else-if="f.type === 'select'"
|
||||
:value="str(f.key) || undefined"
|
||||
:options="selectOptions(f)"
|
||||
allow-clear
|
||||
placeholder="— انتخاب کنید —"
|
||||
style="width: 100%"
|
||||
@update:value="(v: unknown) => set(f.key, v == null || v === '' ? null : String(v))"
|
||||
/>
|
||||
|
||||
<a-select
|
||||
v-else-if="f.type === 'multiselect'"
|
||||
mode="multiple"
|
||||
:value="multi(f.key)"
|
||||
:options="selectOptions(f)"
|
||||
:placeholder="f.placeholder || 'انتخاب کنید'"
|
||||
style="width: 100%"
|
||||
@update:value="(v: unknown) => set(f.key, Array.isArray(v) ? v.map(String) : [])"
|
||||
/>
|
||||
|
||||
<a-space v-else-if="f.type === 'checkbox'" :size="8">
|
||||
<a-switch
|
||||
:checked="get<boolean>(f.key, false) === true"
|
||||
@update:checked="(v) => set(f.key, v === true)"
|
||||
/>
|
||||
<a-typography-text>
|
||||
{{ get<boolean>(f.key, false) === true ? 'بله' : 'خیر' }}
|
||||
</a-typography-text>
|
||||
</a-space>
|
||||
|
||||
<a-flex v-else-if="f.type === 'checklist'" vertical :gap="8">
|
||||
<a-typography-text v-if="checklist(f.key).length" type="success">
|
||||
{{ toFaDigits(checklist(f.key).filter((x) => x.done).length) }} از
|
||||
{{ toFaDigits(checklist(f.key).length) }} انجام شده
|
||||
</a-typography-text>
|
||||
<a-flex
|
||||
v-for="(it, idx) in checklist(f.key)"
|
||||
:key="it.id"
|
||||
align="center"
|
||||
:gap="8"
|
||||
>
|
||||
<a-checkbox
|
||||
:checked="it.done"
|
||||
aria-label="انجام شد"
|
||||
@change="updateChecklistItem(f.key, it.id, { done: ($event.target as HTMLInputElement).checked })"
|
||||
@update:checked="(v: boolean) => updateChecklistItem(f.key, it.id, { done: v })"
|
||||
/>
|
||||
<input
|
||||
class="item-text"
|
||||
<a-input
|
||||
:value="it.text"
|
||||
maxlength="300"
|
||||
@input="updateChecklistItem(f.key, it.id, { text: ($event.target as HTMLInputElement).value })"
|
||||
:maxlength="300"
|
||||
:style="{
|
||||
flex: 1,
|
||||
textDecoration: it.done ? 'line-through' : undefined,
|
||||
}"
|
||||
@update:value="(v: string) => updateChecklistItem(f.key, it.id, { text: v })"
|
||||
/>
|
||||
<button type="button" class="mini" :disabled="idx === 0" aria-label="بالا" @click="moveChecklistItem(f.key, idx, -1)">▲</button>
|
||||
<button
|
||||
type="button"
|
||||
class="mini"
|
||||
<a-button
|
||||
:disabled="idx === 0"
|
||||
aria-label="بالا"
|
||||
@click="moveChecklistItem(f.key, idx, -1)"
|
||||
>
|
||||
<template #icon><UpOutlined /></template>
|
||||
</a-button>
|
||||
<a-button
|
||||
:disabled="idx === checklist(f.key).length - 1"
|
||||
aria-label="پایین"
|
||||
@click="moveChecklistItem(f.key, idx, 1)"
|
||||
>
|
||||
▼
|
||||
</button>
|
||||
<button type="button" class="mini danger" aria-label="حذف" @click="removeChecklistItem(f.key, it.id)">
|
||||
<UiIcon name="x" :size="13" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="add-row">
|
||||
<input
|
||||
v-model="checklistDraft[f.key]"
|
||||
maxlength="300"
|
||||
:placeholder="f.placeholder || 'مورد جدید را بنویسید و Enter بزنید'"
|
||||
@keydown.enter.prevent="addChecklistItem(f.key)"
|
||||
/>
|
||||
<button type="button" class="add-btn" @click="addChecklistItem(f.key)">
|
||||
<UiIcon name="plus" :size="14" />
|
||||
افزودن
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="f.type === 'participants'" class="participants">
|
||||
<div class="p-block">
|
||||
<small>همکاران (فعالیت در لیست آن‌ها هم نمایش داده می‌شود)</small>
|
||||
<UserMultiSelect
|
||||
:model-value="participants(f.key).userIds"
|
||||
:users="users"
|
||||
:disabled="!canAssignOthers"
|
||||
add-label="افزودن همکار"
|
||||
empty-label="همکاری انتخاب نشده"
|
||||
@update:model-value="(ids: string[]) => patchParticipants(f.key, { userIds: ids })"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-block">
|
||||
<small>اشخاص / مشتریان</small>
|
||||
<div class="tags">
|
||||
<span v-for="p in participants(f.key).people" :key="p.id" class="tag">
|
||||
<UiIcon name="user" :size="12" />
|
||||
{{ p.name }}
|
||||
<button
|
||||
type="button"
|
||||
aria-label="حذف"
|
||||
@click="patchParticipants(f.key, { people: participants(f.key).people.filter((x) => x.id !== p.id) })"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="person-search">
|
||||
<input
|
||||
v-model="personQuery[f.key]"
|
||||
type="search"
|
||||
placeholder="جستجوی نام یا موبایل شخص…"
|
||||
@input="searchPeople(f.key)"
|
||||
@focus="personOpenKey = f.key"
|
||||
<template #icon><DownOutlined /></template>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
aria-label="حذف"
|
||||
@click="removeChecklistItem(f.key, it.id)"
|
||||
>
|
||||
<template #icon><CloseOutlined /></template>
|
||||
</a-button>
|
||||
</a-flex>
|
||||
<a-space :size="8" style="width: 100%">
|
||||
<a-input
|
||||
:value="checklistDraft[f.key] ?? ''"
|
||||
:maxlength="300"
|
||||
:placeholder="f.placeholder || 'مورد جدید را بنویسید و Enter بزنید'"
|
||||
style="width: 100%"
|
||||
@update:value="(v: string) => (checklistDraft[f.key] = v)"
|
||||
@pressEnter="addChecklistItem(f.key)"
|
||||
/>
|
||||
<ul v-if="personOpenKey === f.key && (personResults[f.key]?.length ?? 0) > 0" class="results">
|
||||
<li v-for="p in personResults[f.key]" :key="p.id">
|
||||
<button type="button" @click="addPerson(f.key, p)">
|
||||
<b>{{ p.fullName }}</b>
|
||||
<small v-if="p.company?.name">{{ p.company.name }}</small>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-block">
|
||||
<small>مهمانان دیگر (نام آزاد)</small>
|
||||
<div class="tags">
|
||||
<span v-for="g in participants(f.key).guests" :key="g" class="tag guest">
|
||||
{{ g }}
|
||||
<button
|
||||
type="button"
|
||||
aria-label="حذف"
|
||||
@click="patchParticipants(f.key, { guests: participants(f.key).guests.filter((x) => x !== g) })"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="add-row">
|
||||
<input
|
||||
v-model="guestDraft[f.key]"
|
||||
maxlength="120"
|
||||
placeholder="نام مهمان و Enter"
|
||||
@keydown.enter.prevent="addGuest(f.key)"
|
||||
/>
|
||||
<button type="button" class="add-btn" @click="addGuest(f.key)">
|
||||
<UiIcon name="plus" :size="14" />
|
||||
<a-button type="dashed" @click="addChecklistItem(f.key)">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
افزودن
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-flex>
|
||||
|
||||
<a-flex v-else-if="f.type === 'participants'" vertical :gap="16">
|
||||
<a-flex vertical :gap="4">
|
||||
<a-typography-text type="secondary">
|
||||
همکاران (فعالیت در لیست آن‌ها هم نمایش داده می‌شود)
|
||||
</a-typography-text>
|
||||
<UserMultiSelect
|
||||
:model-value="participants(f.key).userIds"
|
||||
:users="users"
|
||||
add-label="افزودن همکار"
|
||||
empty-label="همکاری انتخاب نشده"
|
||||
@update:model-value="(ids: string[]) => patchParticipants(f.key, { userIds: ids })"
|
||||
/>
|
||||
</a-flex>
|
||||
|
||||
<a-flex vertical :gap="8">
|
||||
<a-typography-text type="secondary">اشخاص / مشتریان</a-typography-text>
|
||||
<a-space v-if="participants(f.key).people.length" :size="6" wrap>
|
||||
<a-tag
|
||||
v-for="p in participants(f.key).people"
|
||||
:key="p.id"
|
||||
closable
|
||||
color="cyan"
|
||||
:bordered="false"
|
||||
@close="removePerson(f.key, p.id)"
|
||||
>
|
||||
<UserOutlined />
|
||||
{{ p.name }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
<a-select
|
||||
show-search
|
||||
allow-clear
|
||||
:filter-option="false"
|
||||
:value="undefined"
|
||||
:options="personSelectOptions[f.key] ?? []"
|
||||
:not-found-content="
|
||||
personSearching[f.key]
|
||||
? 'در حال جستجو…'
|
||||
: (personQuery[f.key] || '').trim()
|
||||
? 'شخصی پیدا نشد.'
|
||||
: 'نام یا موبایل را جستجو کنید'
|
||||
"
|
||||
placeholder="جستجوی نام یا موبایل شخص…"
|
||||
style="width: 100%"
|
||||
@search="(q: string) => searchPeople(f.key, q)"
|
||||
@update:value="(v: unknown) => onPersonPick(f.key, v)"
|
||||
>
|
||||
<template #option="{ label, company }">
|
||||
<a-flex vertical :gap="0">
|
||||
<a-typography-text>{{ label }}</a-typography-text>
|
||||
<a-typography-text v-if="company" type="secondary">{{ company }}</a-typography-text>
|
||||
</a-flex>
|
||||
</template>
|
||||
</a-select>
|
||||
</a-flex>
|
||||
|
||||
<a-flex vertical :gap="8">
|
||||
<a-typography-text type="secondary">مهمانان دیگر (نام آزاد)</a-typography-text>
|
||||
<a-space v-if="participants(f.key).guests.length" :size="6" wrap>
|
||||
<a-tag
|
||||
v-for="g in participants(f.key).guests"
|
||||
:key="g"
|
||||
closable
|
||||
:bordered="false"
|
||||
@close="removeGuest(f.key, g)"
|
||||
>
|
||||
{{ g }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
<a-space :size="8" style="width: 100%">
|
||||
<a-input
|
||||
:value="guestDraft[f.key] ?? ''"
|
||||
:maxlength="120"
|
||||
placeholder="نام مهمان و Enter"
|
||||
style="width: 100%"
|
||||
@update:value="(v: string) => (guestDraft[f.key] = v)"
|
||||
@pressEnter="addGuest(f.key)"
|
||||
/>
|
||||
<a-button type="dashed" @click="addGuest(f.key)">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
افزودن
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.fields-grid {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.cf {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cf > label {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted, #64748b);
|
||||
font-size: var(--fs-xs, 0.78rem);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cf > label i {
|
||||
color: var(--color-danger, #dc2626);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.cf input:not([type='checkbox']),
|
||||
.cf select,
|
||||
.cf textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: var(--radius);
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.85rem;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cf textarea {
|
||||
min-height: 5rem;
|
||||
padding: 0.6rem 0.85rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.chips,
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.chip-opt {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
border-radius: 999px;
|
||||
padding: 0.3rem 0.75rem;
|
||||
font: inherit;
|
||||
font-size: 0.82rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chip-opt.on {
|
||||
border-color: #5eead4;
|
||||
background: #f0fdfa;
|
||||
color: #0f766e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.switch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.switch i {
|
||||
width: 44px;
|
||||
height: 26px;
|
||||
border-radius: 999px;
|
||||
background: #e2e8f0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.switch i::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset-inline-start: 3px;
|
||||
top: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
transition: 0.18s;
|
||||
}
|
||||
|
||||
.switch input:checked + i {
|
||||
background: #14b8a6;
|
||||
}
|
||||
|
||||
.switch input:checked + i::after {
|
||||
inset-inline-start: 21px;
|
||||
}
|
||||
|
||||
.checklist ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.checklist li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.checklist li input[type='checkbox'] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: #14b8a6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.checklist .item-text {
|
||||
flex: 1;
|
||||
min-height: 2.2rem !important;
|
||||
}
|
||||
|
||||
.checklist li.done .item-text {
|
||||
text-decoration: line-through;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin: 0;
|
||||
font-size: 0.78rem;
|
||||
color: #0f766e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mini {
|
||||
width: 1.9rem;
|
||||
height: 1.9rem;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 0.65rem;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mini:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mini.danger {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.add-row {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.add-row input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
border: 1px dashed #5eead4;
|
||||
background: #f0fdfa;
|
||||
color: #0f766e;
|
||||
border-radius: var(--radius);
|
||||
padding: 0 0.8rem;
|
||||
font: inherit;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.participants {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px dashed #e2e8f0;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.p-block {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.p-block > small {
|
||||
color: #94a3b8;
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
background: #f0fdfa;
|
||||
color: #0f766e;
|
||||
border-radius: 999px;
|
||||
padding: 0.2rem 0.6rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tag.guest {
|
||||
background: #f1f5f9;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.tag button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
line-height: 1;
|
||||
padding: 0 0.1rem;
|
||||
}
|
||||
|
||||
.person-search {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.results {
|
||||
position: absolute;
|
||||
inset-inline: 0;
|
||||
top: calc(100% + 4px);
|
||||
z-index: 20;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.3rem;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
|
||||
max-height: 14rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.results button {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
gap: 0.1rem;
|
||||
text-align: start;
|
||||
border: 0;
|
||||
background: none;
|
||||
padding: 0.45rem 0.55rem;
|
||||
border-radius: 8px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.results button:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.results b {
|
||||
font-size: 0.86rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.results small {
|
||||
color: #94a3b8;
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.fields-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.cf.wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -13,8 +13,6 @@ type PostponeKey = 'h1' | 'tomorrow-am' | 'next-saturday' | 'next-week' | 'custo
|
||||
const props = defineProps<{
|
||||
dueAt?: string | null;
|
||||
saving?: boolean;
|
||||
/** بالاتر از مودال خلاصهٔ فعالیت */
|
||||
overlayZIndex?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -156,7 +154,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div class="layer" role="presentation" :style="overlayZIndex ? { zIndex: overlayZIndex } : undefined">
|
||||
<div class="layer" role="presentation">
|
||||
<button class="backdrop" type="button" aria-label="بستن" @click="close" />
|
||||
<section class="sheet" role="dialog" aria-modal="true" aria-labelledby="postpone-title">
|
||||
<div class="handle" aria-hidden="true" />
|
||||
|
||||
@@ -1,703 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { CloseOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
import {
|
||||
Alert as AAlert,
|
||||
Button as AButton,
|
||||
Col as ACol,
|
||||
Divider as ADivider,
|
||||
Flex as AFlex,
|
||||
Row as ARow,
|
||||
Select as ASelect,
|
||||
Image as AImage,
|
||||
Spin as ASpin,
|
||||
Typography,
|
||||
theme,
|
||||
} from 'ant-design-vue';
|
||||
import type { ActivityDto } from '@mento/shared';
|
||||
import { api } from '@/lib/api';
|
||||
import { bindThreadMedia, parseActivityThread } from '@/lib/activity-thread';
|
||||
import { noteChips } from '@/lib/lead-form-notes';
|
||||
import {
|
||||
formatClockFa,
|
||||
formatJalaliDay,
|
||||
formatJalaliDayClock,
|
||||
formatJalaliNumeric,
|
||||
formatLocalDateTimeInput,
|
||||
parseLocalInput,
|
||||
startOfLocalDay,
|
||||
} from '@/lib/jalali';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { canMutateActivity } from '@/lib/activity-access';
|
||||
import ActivityCommentSheet from '@/components/activities/ActivityCommentSheet.vue';
|
||||
import JalaliDateInput from '@/components/JalaliDateInput.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
activityId: string | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
changed: [];
|
||||
full: [id: string];
|
||||
}>();
|
||||
|
||||
const { Text: ATypographyText, Paragraph: ATypographyParagraph, Link: ATypographyLink } = Typography;
|
||||
const { token } = theme.useToken();
|
||||
const auth = useAuthStore();
|
||||
|
||||
const rendered = ref(false);
|
||||
const placed = ref(false);
|
||||
const panelEl = ref<HTMLElement | null>(null);
|
||||
const frame = ref({ left: 12, top: 12, width: 440, maxHeight: 560, shift: 88 });
|
||||
let hideTimer = 0;
|
||||
let reveal = false;
|
||||
const VIEW_PAD = 16;
|
||||
|
||||
function cardEl(id: string) {
|
||||
return document.querySelector<HTMLElement>(`.ant-card[data-card-id="${CSS.escape(id)}"]`);
|
||||
}
|
||||
|
||||
function columnScroller(el: HTMLElement) {
|
||||
let node = el.parentElement;
|
||||
while (node) {
|
||||
const style = getComputedStyle(node);
|
||||
const scrolls = style.overflowY === 'auto' || style.overflowY === 'scroll';
|
||||
if (scrolls && node.scrollHeight > node.clientHeight + 2) return node;
|
||||
node = node.parentElement;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function panelExtent() {
|
||||
const content = panelEl.value?.scrollHeight ?? 0;
|
||||
return content > 80 ? content : 328;
|
||||
}
|
||||
|
||||
/** Lift the column so a top-aligned panel fits. The last card may have no room left. */
|
||||
function liftColumn(el: HTMLElement, cardTop: number, height: number, vh: number) {
|
||||
const overflow = cardTop + height - (vh - VIEW_PAD);
|
||||
if (overflow <= 8) return;
|
||||
const scroller = columnScroller(el);
|
||||
if (!scroller) return;
|
||||
const room = scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop;
|
||||
const delta = Math.min(overflow, Math.max(0, room));
|
||||
if (delta <= 8) return;
|
||||
const motion = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';
|
||||
scroller.scrollBy({ top: delta, behavior: motion });
|
||||
}
|
||||
|
||||
function measure() {
|
||||
const id = props.activityId;
|
||||
if (!id) return;
|
||||
const el = cardEl(id);
|
||||
if (!el) return;
|
||||
let rect = el.getBoundingClientRect();
|
||||
if (rect.width < 8) return;
|
||||
const vw = window.innerWidth;
|
||||
const vh = window.innerHeight;
|
||||
const width = Math.min(440, vw - 24);
|
||||
const gap = 10;
|
||||
const side: 'left' | 'right' = rect.left >= vw - rect.right ? 'left' : 'right';
|
||||
let left = side === 'left' ? rect.left - gap - width : rect.right + gap;
|
||||
left = Math.max(12, Math.min(left, vw - width - 12));
|
||||
const height = Math.min(panelExtent(), Math.max(160, vh - VIEW_PAD * 2));
|
||||
if (reveal) {
|
||||
reveal = false;
|
||||
liftColumn(el, rect.top, height, vh);
|
||||
rect = el.getBoundingClientRect();
|
||||
}
|
||||
let top = rect.top;
|
||||
const maxTop = vh - VIEW_PAD - height;
|
||||
if (top > maxTop) top = Math.max(VIEW_PAD, maxTop);
|
||||
if (top < VIEW_PAD) top = VIEW_PAD;
|
||||
const maxHeight = Math.max(160, vh - VIEW_PAD - top);
|
||||
const travel = Math.min(120, Math.round(width * 0.28));
|
||||
frame.value = { left, top, width, maxHeight, shift: side === 'left' ? travel : -travel };
|
||||
}
|
||||
|
||||
const panelStyle = computed(() => ({
|
||||
position: 'fixed' as const,
|
||||
zIndex: 1050,
|
||||
top: `${frame.value.top}px`,
|
||||
left: `${frame.value.left}px`,
|
||||
width: `${frame.value.width}px`,
|
||||
maxHeight: `${frame.value.maxHeight}px`,
|
||||
overflow: 'auto' as const,
|
||||
boxSizing: 'border-box' as const,
|
||||
padding: `${token.value.padding}px`,
|
||||
background: token.value.colorBgElevated,
|
||||
color: token.value.colorText,
|
||||
border: `1px solid ${token.value.colorBorderSecondary}`,
|
||||
borderRadius: `${token.value.borderRadiusLG}px`,
|
||||
boxShadow: token.value.boxShadowSecondary,
|
||||
transform: placed.value ? 'translate3d(0, 0, 0)' : `translate3d(${frame.value.shift}px, 0, 0)`,
|
||||
opacity: placed.value ? 1 : 0,
|
||||
transition: 'transform 220ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease',
|
||||
pointerEvents: placed.value ? ('auto' as const) : ('none' as const),
|
||||
}));
|
||||
|
||||
function onViewport() {
|
||||
if (props.activityId) measure();
|
||||
}
|
||||
|
||||
function onPointerDown(event: PointerEvent) {
|
||||
if (!props.activityId || !placed.value) return;
|
||||
const target = event.target;
|
||||
if (!(target instanceof Node)) return;
|
||||
if (panelEl.value?.contains(target)) return;
|
||||
if (commentOpen.value) return;
|
||||
if (target instanceof Element && target.closest('.ant-select-dropdown, #jalali-picker, .layer, .ant-image-preview-root, .ant-image-preview-wrap')) return;
|
||||
const card = cardEl(props.activityId);
|
||||
if (card?.contains(target)) return;
|
||||
emit('close');
|
||||
}
|
||||
|
||||
function onKey(event: KeyboardEvent) {
|
||||
if (event.key !== 'Escape' || !props.activityId) return;
|
||||
if (commentOpen.value) return;
|
||||
emit('close');
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', onViewport);
|
||||
window.addEventListener('scroll', onViewport, true);
|
||||
document.addEventListener('pointerdown', onPointerDown, true);
|
||||
document.addEventListener('keydown', onKey);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', onViewport);
|
||||
window.removeEventListener('scroll', onViewport, true);
|
||||
document.removeEventListener('pointerdown', onPointerDown, true);
|
||||
document.removeEventListener('keydown', onKey);
|
||||
window.clearTimeout(hideTimer);
|
||||
clearNoteMedia();
|
||||
});
|
||||
|
||||
const activity = ref<ActivityDto | null>(null);
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const error = ref('');
|
||||
const commentOpen = ref(false);
|
||||
const postponeKey = ref('h1');
|
||||
const customDue = ref('');
|
||||
|
||||
type NoteMedia = {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
kind: 'image' | 'audio' | 'file';
|
||||
createdAt: string;
|
||||
};
|
||||
const noteMedia = ref<NoteMedia[]>([]);
|
||||
|
||||
function clearNoteMedia() {
|
||||
for (const item of noteMedia.value) URL.revokeObjectURL(item.url);
|
||||
noteMedia.value = [];
|
||||
}
|
||||
|
||||
const isClosed = computed(
|
||||
() => activity.value?.status === 'done' || activity.value?.status === 'canceled',
|
||||
);
|
||||
const canMutate = computed(() => canMutateActivity(activity.value, auth.user));
|
||||
const needsEveryone = computed(
|
||||
() => activity.value?.completionMode === 'all' && (activity.value.assignees?.length ?? 0) > 1,
|
||||
);
|
||||
const myShareDone = computed(() => {
|
||||
const mine = auth.user?.id;
|
||||
return Boolean(mine && activity.value?.completedByIds?.includes(mine));
|
||||
});
|
||||
const actionLabel = computed(() => {
|
||||
if (isClosed.value) return 'بازگشایی';
|
||||
if (needsEveryone.value && myShareDone.value) return 'لغو انجام';
|
||||
return 'انجام شده';
|
||||
});
|
||||
|
||||
const createdLabel = computed(() => {
|
||||
const raw = activity.value?.createdAt;
|
||||
if (!raw) return '—';
|
||||
const date = new Date(raw);
|
||||
return `${formatJalaliDay(date)} - ${formatClockFa(date)}`;
|
||||
});
|
||||
|
||||
const thread = computed(() => parseActivityThread(activity.value?.description));
|
||||
const plainNote = computed(() => (thread.value ? '' : activity.value?.description?.trim() || ''));
|
||||
const threadBlocks = computed(() => {
|
||||
const entries = thread.value;
|
||||
if (!entries) return null;
|
||||
return bindThreadMedia(entries, noteMedia.value);
|
||||
});
|
||||
const looseImages = computed(() =>
|
||||
(threadBlocks.value?.loose ?? noteMedia.value).filter((item) => item.kind === 'image'),
|
||||
);
|
||||
|
||||
const noteScrollStyle = computed(() => ({
|
||||
maxHeight: '220px',
|
||||
overflow: 'auto',
|
||||
}));
|
||||
|
||||
const noteBubbleStyle = computed(() => ({
|
||||
padding: '8px 12px',
|
||||
border: `1px solid ${token.value.colorBorderSecondary}`,
|
||||
borderRadius: `${token.value.borderRadius}px`,
|
||||
background: token.value.colorFillAlter,
|
||||
}));
|
||||
|
||||
const postponeBase = computed(() => {
|
||||
const now = new Date();
|
||||
const due = activity.value?.dueAt ? new Date(activity.value.dueAt) : now;
|
||||
if (Number.isNaN(due.getTime()) || due.getTime() <= now.getTime()) return now;
|
||||
return due;
|
||||
});
|
||||
|
||||
function addMinutes(mins: number) {
|
||||
return new Date(postponeBase.value.getTime() + mins * 60_000);
|
||||
}
|
||||
|
||||
function tomorrowMorning() {
|
||||
const d = startOfLocalDay(new Date());
|
||||
d.setDate(d.getDate() + 1);
|
||||
d.setHours(10, 0, 0, 0);
|
||||
return d;
|
||||
}
|
||||
|
||||
function nextSaturdayMorning() {
|
||||
const d = startOfLocalDay(new Date());
|
||||
const untilSaturday = (6 - d.getDay() + 7) % 7;
|
||||
d.setDate(d.getDate() + (untilSaturday === 0 ? 7 : untilSaturday));
|
||||
d.setHours(10, 0, 0, 0);
|
||||
return d;
|
||||
}
|
||||
|
||||
const postponeChoices = computed(() => {
|
||||
const h1 = addMinutes(60);
|
||||
const morning = tomorrowMorning();
|
||||
const saturday = nextSaturdayMorning();
|
||||
const week = new Date(postponeBase.value.getTime());
|
||||
week.setDate(week.getDate() + 7);
|
||||
return [
|
||||
{ key: 'h1', label: `یک ساعت دیرتر · ${formatClockFa(h1)}`, at: h1 },
|
||||
{ key: 'tomorrow-am', label: `فردا صبح · ${formatClockFa(morning)}`, at: morning },
|
||||
{ key: 'next-saturday', label: `شنبه آینده · ${formatJalaliDayClock(saturday)}`, at: saturday },
|
||||
{ key: 'next-week', label: `هفته آینده · ${formatJalaliDayClock(week)}`, at: week },
|
||||
{ key: 'custom', label: 'زمان دلخواه', at: null },
|
||||
];
|
||||
});
|
||||
|
||||
const postponeReady = computed(() => {
|
||||
if (postponeKey.value === 'custom') return Boolean(parseLocalInput(customDue.value));
|
||||
return postponeChoices.value.some((item) => item.key === postponeKey.value && item.at);
|
||||
});
|
||||
|
||||
function resetDrafts() {
|
||||
commentOpen.value = false;
|
||||
postponeKey.value = 'h1';
|
||||
customDue.value = '';
|
||||
}
|
||||
|
||||
function apiMessage(e: unknown, fallback: string) {
|
||||
if (axios.isAxiosError(e)) {
|
||||
const msg = (e.response?.data as { message?: string | string[] } | undefined)?.message;
|
||||
if (Array.isArray(msg)) return msg[0] ?? fallback;
|
||||
if (typeof msg === 'string' && msg) return msg;
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
async function loadNoteMedia(row: ActivityDto) {
|
||||
clearNoteMedia();
|
||||
const next: NoteMedia[] = [];
|
||||
for (const image of row.images ?? []) {
|
||||
const mime = image.mimeType.toLowerCase();
|
||||
const kind = mime.startsWith('audio/') ? 'audio' : mime.startsWith('image/') ? 'image' : 'file';
|
||||
try {
|
||||
const { data } = await api.get<Blob>(`/activities/${row.id}/images/${image.id}`, {
|
||||
responseType: 'blob',
|
||||
});
|
||||
const url = URL.createObjectURL(data);
|
||||
if (props.activityId !== row.id) {
|
||||
URL.revokeObjectURL(url);
|
||||
continue;
|
||||
}
|
||||
next.push({
|
||||
id: image.id,
|
||||
name: image.fileName,
|
||||
url,
|
||||
kind,
|
||||
createdAt: image.createdAt,
|
||||
});
|
||||
} catch {
|
||||
/* فایل در دسترس نیست */
|
||||
}
|
||||
}
|
||||
if (props.activityId !== row.id) {
|
||||
for (const item of next) URL.revokeObjectURL(item.url);
|
||||
return;
|
||||
}
|
||||
noteMedia.value = next;
|
||||
await nextTick();
|
||||
measure();
|
||||
}
|
||||
|
||||
async function load(id: string) {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await api.get<ActivityDto>(`/activities/${id}`);
|
||||
if (props.activityId !== id) return;
|
||||
activity.value = data;
|
||||
if (!customDue.value) customDue.value = formatLocalDateTimeInput(addMinutes(60));
|
||||
void loadNoteMedia(data);
|
||||
} catch (e) {
|
||||
if (props.activityId === id) {
|
||||
activity.value = null;
|
||||
error.value = apiMessage(e, 'بارگذاری فعالیت ناموفق بود.');
|
||||
}
|
||||
} finally {
|
||||
if (props.activityId === id) {
|
||||
loading.value = false;
|
||||
reveal = true;
|
||||
await nextTick();
|
||||
measure();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.activityId,
|
||||
async (id, prev) => {
|
||||
if (!id) {
|
||||
activity.value = null;
|
||||
error.value = '';
|
||||
resetDrafts();
|
||||
clearNoteMedia();
|
||||
placed.value = false;
|
||||
window.clearTimeout(hideTimer);
|
||||
hideTimer = window.setTimeout(() => {
|
||||
if (!props.activityId) rendered.value = false;
|
||||
}, 230);
|
||||
return;
|
||||
}
|
||||
window.clearTimeout(hideTimer);
|
||||
if (prev && prev !== id) {
|
||||
resetDrafts();
|
||||
activity.value = null;
|
||||
clearNoteMedia();
|
||||
}
|
||||
if (prev && prev !== id && rendered.value) placed.value = false;
|
||||
rendered.value = true;
|
||||
measure();
|
||||
await nextTick();
|
||||
measure();
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
if (props.activityId === id) placed.value = true;
|
||||
});
|
||||
});
|
||||
void load(id);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
async function runAction() {
|
||||
const id = props.activityId;
|
||||
const row = activity.value;
|
||||
if (!id || !row || saving.value) return;
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
if (isClosed.value) {
|
||||
if (!canMutate.value) {
|
||||
error.value = 'شما مجوز ویرایش این فعالیت را ندارید.';
|
||||
return;
|
||||
}
|
||||
await api.patch(`/activities/${id}`, { status: 'open' });
|
||||
await load(id);
|
||||
emit('changed');
|
||||
return;
|
||||
}
|
||||
const undo = needsEveryone.value && myShareDone.value;
|
||||
const { data } = await api.patch<ActivityDto>(`/activities/${id}/complete`, undefined, {
|
||||
params: undo ? { undo: '1' } : undefined,
|
||||
});
|
||||
if (data.status === 'done') {
|
||||
emit('changed');
|
||||
emit('close');
|
||||
return;
|
||||
}
|
||||
activity.value = data;
|
||||
emit('changed');
|
||||
} catch (e) {
|
||||
error.value = apiMessage(e, 'ثبت تغییر ناموفق بود.');
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function postponeTo(iso: string) {
|
||||
const id = props.activityId;
|
||||
if (!id || saving.value) return;
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
await api.patch(`/activities/${id}`, { dueAt: iso });
|
||||
await load(id);
|
||||
emit('changed');
|
||||
} catch (e) {
|
||||
error.value = apiMessage(e, 'تعویق فعالیت ناموفق بود.');
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitComment(payload: { text: string; photoOnly: boolean }) {
|
||||
const id = props.activityId;
|
||||
const row = activity.value;
|
||||
const body = payload.text.trim() || (payload.photoOnly ? 'عکس پیوست شد.' : '');
|
||||
if (!id || !row || !body) return;
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const prev = row.description?.trim();
|
||||
const now = new Date();
|
||||
const author = auth.user?.fullName?.trim();
|
||||
const stamp = `[${formatJalaliNumeric(now)} ساعت ${formatClockFa(now)}${author ? ` — ${author}` : ''}]`;
|
||||
const entry = `${stamp}\n${body}`;
|
||||
await api.patch(`/activities/${id}`, { description: prev ? `${prev}\n\n${entry}` : entry });
|
||||
commentOpen.value = false;
|
||||
await load(id);
|
||||
emit('changed');
|
||||
} catch (e) {
|
||||
error.value = apiMessage(e, 'ثبت نظر ناموفق بود.');
|
||||
throw e;
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function applyPostpone() {
|
||||
if (postponeKey.value === 'custom') {
|
||||
const at = parseLocalInput(customDue.value);
|
||||
if (!at) return;
|
||||
await postponeTo(at.toISOString());
|
||||
return;
|
||||
}
|
||||
const at = postponeChoices.value.find((item) => item.key === postponeKey.value)?.at;
|
||||
if (at) await postponeTo(at.toISOString());
|
||||
}
|
||||
|
||||
function openFull() {
|
||||
if (!props.activityId) return;
|
||||
emit('full', props.activityId);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="rendered"
|
||||
ref="panelEl"
|
||||
role="dialog"
|
||||
dir="rtl"
|
||||
:aria-label="activity?.title || 'جزئیات فعالیت'"
|
||||
:style="panelStyle"
|
||||
>
|
||||
<a-flex justify="flex-end" :style="{ marginBottom: '8px' }">
|
||||
<a-button type="text" aria-label="بستن" @click="emit('close')">
|
||||
<template #icon><CloseOutlined /></template>
|
||||
</a-button>
|
||||
</a-flex>
|
||||
|
||||
<a-spin :spinning="loading">
|
||||
<a-alert v-if="error" type="error" :message="error" show-icon :style="{ marginBottom: '12px' }" />
|
||||
<template v-if="activity">
|
||||
<a-row :gutter="[16, 12]">
|
||||
<a-col :xs="24" :sm="12">
|
||||
<a-flex vertical :gap="2">
|
||||
<a-typography-text type="secondary">ایجاد شده توسط</a-typography-text>
|
||||
<a-typography-text>{{ activity.createdBy?.fullName || '—' }}</a-typography-text>
|
||||
</a-flex>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="12">
|
||||
<a-flex vertical :gap="2">
|
||||
<a-typography-text type="secondary">تاریخ ایجاد</a-typography-text>
|
||||
<a-typography-text>{{ createdLabel }}</a-typography-text>
|
||||
</a-flex>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-divider :style="{ margin: '16px 0 12px' }" />
|
||||
<a-flex justify="space-between" align="center" :style="{ marginBottom: '8px' }">
|
||||
<a-typography-text strong>یادداشت</a-typography-text>
|
||||
<a-button
|
||||
type="primary"
|
||||
shape="circle"
|
||||
aria-label="یادداشت جدید"
|
||||
:disabled="!canMutate"
|
||||
@click="commentOpen = true"
|
||||
>
|
||||
<template #icon><PlusOutlined /></template>
|
||||
</a-button>
|
||||
</a-flex>
|
||||
<div class="note-photos" :style="noteScrollStyle">
|
||||
<a-flex v-if="threadBlocks" vertical :gap="8">
|
||||
<div
|
||||
v-for="(entry, index) in threadBlocks.blocks"
|
||||
:key="`${entry.dateLabel}-${entry.timeLabel}-${index}`"
|
||||
:style="noteBubbleStyle"
|
||||
>
|
||||
<a-flex v-if="entry.dateLabel" justify="space-between" align="center" :gap="8">
|
||||
<a-typography-text type="secondary">
|
||||
{{ entry.dateLabel }} ساعت {{ entry.timeLabel }}
|
||||
</a-typography-text>
|
||||
<a-typography-text v-if="entry.author" strong :style="{ color: token.colorPrimary }">
|
||||
{{ entry.author }}
|
||||
</a-typography-text>
|
||||
</a-flex>
|
||||
<a-typography-paragraph v-if="entry.body" :style="{ margin: entry.dateLabel ? '4px 0 0' : 0, whiteSpace: 'pre-wrap' }">
|
||||
<template v-for="(chip, chipIndex) in noteChips(entry.body)" :key="chipIndex">
|
||||
<a-image
|
||||
v-if="chip.kind === 'image'"
|
||||
:src="chip.src"
|
||||
:alt="chip.name"
|
||||
:width="72"
|
||||
:height="72"
|
||||
:preview="{ zIndex: 1300 }"
|
||||
:style="{ display: 'block', marginTop: '8px' }"
|
||||
/>
|
||||
<a-typography-link
|
||||
v-else-if="chip.kind === 'link'"
|
||||
:href="chip.href"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
{{ chip.label }}
|
||||
</a-typography-link>
|
||||
<span v-else>{{ chip.text }}</span>
|
||||
</template>
|
||||
</a-typography-paragraph>
|
||||
<a-flex
|
||||
v-if="entry.media.some((item) => item.kind === 'image')"
|
||||
wrap="wrap"
|
||||
:gap="8"
|
||||
:style="{ marginTop: '8px' }"
|
||||
>
|
||||
<a-image
|
||||
v-for="image in entry.media.filter((item) => item.kind === 'image')"
|
||||
:key="image.id"
|
||||
:src="image.url"
|
||||
:alt="image.name"
|
||||
:width="72"
|
||||
:height="72"
|
||||
:preview="{ zIndex: 1300 }"
|
||||
/>
|
||||
</a-flex>
|
||||
</div>
|
||||
<div v-for="image in threadBlocks.loose.filter((item) => item.kind === 'image')" :key="image.id" :style="noteBubbleStyle">
|
||||
<a-image :src="image.url" :alt="image.name" :width="72"
|
||||
:height="72" :preview="{ zIndex: 1300 }" />
|
||||
</div>
|
||||
</a-flex>
|
||||
<div v-else-if="plainNote || looseImages.length" :style="noteBubbleStyle">
|
||||
<a-typography-paragraph v-if="plainNote" :style="{ margin: 0, whiteSpace: 'pre-wrap' }">
|
||||
<template v-for="(chip, chipIndex) in noteChips(plainNote)" :key="chipIndex">
|
||||
<a-image
|
||||
v-if="chip.kind === 'image'"
|
||||
:src="chip.src"
|
||||
:alt="chip.name"
|
||||
:width="72"
|
||||
:height="72"
|
||||
:preview="{ zIndex: 1300 }"
|
||||
:style="{ display: 'block', marginTop: '8px' }"
|
||||
/>
|
||||
<a-typography-link
|
||||
v-else-if="chip.kind === 'link'"
|
||||
:href="chip.href"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
{{ chip.label }}
|
||||
</a-typography-link>
|
||||
<span v-else>{{ chip.text }}</span>
|
||||
</template>
|
||||
</a-typography-paragraph>
|
||||
<a-flex v-if="looseImages.length" wrap="wrap" :gap="8" :style="{ marginTop: plainNote ? '8px' : 0 }">
|
||||
<a-image
|
||||
v-for="image in looseImages"
|
||||
:key="image.id"
|
||||
:src="image.url"
|
||||
:alt="image.name"
|
||||
:width="72"
|
||||
:height="72"
|
||||
:preview="{ zIndex: 1300 }"
|
||||
/>
|
||||
</a-flex>
|
||||
</div>
|
||||
<a-typography-text v-else type="secondary">یادداشتی ثبت نشده.</a-typography-text>
|
||||
</div>
|
||||
|
||||
<a-flex vertical :gap="8" :style="{ marginTop: '12px' }">
|
||||
<a-flex align="center" :gap="8">
|
||||
<a-select
|
||||
v-model:value="postponeKey"
|
||||
:disabled="saving || loading || isClosed || !canMutate"
|
||||
:options="postponeChoices.map((item) => ({ value: item.key, label: item.label }))"
|
||||
:dropdown-style="{ zIndex: 1200 }"
|
||||
style="flex: 1"
|
||||
/>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="saving || loading || isClosed || !canMutate || !postponeReady"
|
||||
@click="applyPostpone"
|
||||
>
|
||||
تعویق
|
||||
</a-button>
|
||||
</a-flex>
|
||||
<JalaliDateInput
|
||||
v-if="postponeKey === 'custom'"
|
||||
v-model="customDue"
|
||||
mode="datetime"
|
||||
placeholder="تاریخ و ساعت"
|
||||
:disabled="!canMutate"
|
||||
/>
|
||||
</a-flex>
|
||||
|
||||
<a-divider :style="{ margin: '16px 0 12px' }" />
|
||||
<a-flex justify="space-between" align="center" wrap="wrap" :gap="8">
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="saving || loading || (isClosed && !canMutate)"
|
||||
@click="runAction"
|
||||
>
|
||||
{{ actionLabel }}
|
||||
</a-button>
|
||||
<a-button type="link" @click="openFull">مشاهدهٔ کامل</a-button>
|
||||
</a-flex>
|
||||
</template>
|
||||
</a-spin>
|
||||
|
||||
<ActivityCommentSheet
|
||||
v-if="commentOpen && activity"
|
||||
:activity="activity"
|
||||
:saving="saving"
|
||||
:overlay-z-index="1200"
|
||||
:save="submitComment"
|
||||
@close="commentOpen = false"
|
||||
/>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.note-photos :deep(.ant-image) {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
}
|
||||
.note-photos :deep(.ant-image-img) {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
@@ -12,10 +12,25 @@ import {
|
||||
ACTIVITY_STAGE_COLORS,
|
||||
ACTIVITY_STAGE_KIND_LABELS,
|
||||
} from '@mento/shared';
|
||||
import {
|
||||
ArrowDownOutlined,
|
||||
ArrowUpOutlined,
|
||||
DeleteOutlined,
|
||||
} from '@/icons/ant-bridge';
|
||||
import {
|
||||
Alert as AAlert,
|
||||
Button as AButton,
|
||||
Col as ACol,
|
||||
Divider as ADivider,
|
||||
Flex as AFlex,
|
||||
Input as AInput,
|
||||
Modal as AModal,
|
||||
Row as ARow,
|
||||
Select as ASelect,
|
||||
} from 'ant-design-vue';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { api } from '@/lib/api';
|
||||
import { PIPELINE_ACCENT } from '@/lib/pipeline-board';
|
||||
import { UiButton, UiModal } from '@/components/ui';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean;
|
||||
@@ -62,6 +77,19 @@ function apiMessage(e: unknown, fallback: string) {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function confirmAsync(content: string, title = 'تأیید'): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
Modal.confirm({
|
||||
title,
|
||||
content,
|
||||
okText: 'ادامه',
|
||||
cancelText: 'انصراف',
|
||||
onOk: () => resolve(true),
|
||||
onCancel: () => resolve(false),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function isDirty(stage: ActivityStageDto) {
|
||||
const d = drafts.value[stage.id];
|
||||
return Boolean(
|
||||
@@ -78,9 +106,9 @@ async function save(stage: ActivityStageDto) {
|
||||
}
|
||||
if (
|
||||
d.kind !== stage.kind &&
|
||||
!window.confirm(
|
||||
!(await confirmAsync(
|
||||
'با تغییر نوع ستون، فعالیت‌های فعلی آن وضعیتشان را نگه می‌دارند و به اولین ستون هم‌وضعیت خودشان منتقل می‌شوند. ادامه می‌دهید؟',
|
||||
)
|
||||
))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
@@ -119,23 +147,25 @@ async function move(index: number, dir: -1 | 1) {
|
||||
}
|
||||
|
||||
async function remove(stage: ActivityStageDto) {
|
||||
if (
|
||||
!window.confirm(
|
||||
`ستون «${stage.name}» حذف شود؟ فعالیت‌های آن به اولین ستون هم‌وضعیت منتقل می‌شوند.`,
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
busyId.value = stage.id;
|
||||
error.value = '';
|
||||
try {
|
||||
await api.delete(`/activities/stages/${stage.id}`);
|
||||
emit('changed');
|
||||
} catch (e) {
|
||||
error.value = apiMessage(e, 'حذف ستون ناموفق بود.');
|
||||
} finally {
|
||||
busyId.value = '';
|
||||
}
|
||||
Modal.confirm({
|
||||
title: 'حذف ستون',
|
||||
content: `ستون «${stage.name}» حذف شود؟ فعالیت‌های آن به اولین ستون هم‌وضعیت منتقل می‌شوند.`,
|
||||
okText: 'حذف',
|
||||
cancelText: 'انصراف',
|
||||
okButtonProps: { danger: true },
|
||||
async onOk() {
|
||||
busyId.value = stage.id;
|
||||
error.value = '';
|
||||
try {
|
||||
await api.delete(`/activities/stages/${stage.id}`);
|
||||
emit('changed');
|
||||
} catch (e) {
|
||||
error.value = apiMessage(e, 'حذف ستون ناموفق بود.');
|
||||
} finally {
|
||||
busyId.value = '';
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function create() {
|
||||
@@ -156,226 +186,163 @@ async function create() {
|
||||
busyId.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function dotColor(stage: ActivityStageDto) {
|
||||
const color = drafts.value[stage.id]?.color ?? stage.color;
|
||||
return PIPELINE_ACCENT[color].solid;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UiModal
|
||||
<a-modal
|
||||
:open="open"
|
||||
:title="boardName ? `مدیریت ستون‌های گروه «${boardName}»` : 'مدیریت ستون‌ها و تب‌های فعالیت'"
|
||||
@close="emit('close')"
|
||||
:footer="null"
|
||||
@cancel="emit('close')"
|
||||
>
|
||||
<div class="manager">
|
||||
<p class="hint">
|
||||
هر ستون یک «نوع» دارد: فعالیتی که به ستون <b>انجام‌شده</b> کشیده شود خودکار انجام‌شده ثبت
|
||||
می‌شود و در ستون <b>لغو شده</b> لغو می‌شود. از هر نوع حداقل یک ستون لازم است.
|
||||
</p>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-typography-text type="secondary">
|
||||
هر ستون یک «نوع» دارد: فعالیتی که به ستون <strong>انجام‌شده</strong> کشیده شود خودکار انجام‌شده ثبت
|
||||
می‌شود و در ستون <strong>لغو شده</strong> لغو می‌شود. از هر نوع حداقل یک ستون لازم است.
|
||||
</a-typography-text>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<a-alert v-if="error" type="error" :message="error" show-icon />
|
||||
|
||||
<div class="rows">
|
||||
<div
|
||||
<a-flex vertical gap="small">
|
||||
<a-row
|
||||
v-for="(stage, index) in stages"
|
||||
:key="stage.id"
|
||||
class="row"
|
||||
:style="{ '--dot': PIPELINE_ACCENT[drafts[stage.id]?.color ?? stage.color].solid }"
|
||||
:gutter="[8, 8]"
|
||||
align="middle"
|
||||
>
|
||||
<span class="dot" aria-hidden="true" />
|
||||
<input
|
||||
v-if="drafts[stage.id]"
|
||||
v-model="drafts[stage.id]!.name"
|
||||
class="name"
|
||||
maxlength="80"
|
||||
aria-label="نام ستون"
|
||||
@keydown.enter.prevent="save(stage)"
|
||||
/>
|
||||
<select v-if="drafts[stage.id]" v-model="drafts[stage.id]!.kind" aria-label="نوع ستون">
|
||||
<option v-for="k in KINDS" :key="k" :value="k">{{ ACTIVITY_STAGE_KIND_LABELS[k] }}</option>
|
||||
</select>
|
||||
<select v-if="drafts[stage.id]" v-model="drafts[stage.id]!.color" aria-label="رنگ ستون">
|
||||
<option v-for="c in ACTIVITY_STAGE_COLORS" :key="c" :value="c">
|
||||
{{ ACTIVITY_STAGE_COLOR_LABELS[c] }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="row-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="icon"
|
||||
:disabled="index === 0 || Boolean(busyId)"
|
||||
title="انتقال به قبل"
|
||||
aria-label="انتقال به قبل"
|
||||
@click="move(index, -1)"
|
||||
<a-col flex="none">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
:style="{
|
||||
display: 'inline-block',
|
||||
width: '0.65rem',
|
||||
height: '0.65rem',
|
||||
borderRadius: '999px',
|
||||
background: dotColor(stage),
|
||||
}"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="8">
|
||||
<a-input
|
||||
v-if="drafts[stage.id]"
|
||||
v-model:value="drafts[stage.id]!.name"
|
||||
:maxlength="80"
|
||||
aria-label="نام ستون"
|
||||
@keydown.enter.prevent="save(stage)"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="6">
|
||||
<a-select
|
||||
v-if="drafts[stage.id]"
|
||||
v-model:value="drafts[stage.id]!.kind"
|
||||
aria-label="نوع ستون"
|
||||
style="width: 100%"
|
||||
>
|
||||
▲
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="icon"
|
||||
:disabled="index === stages.length - 1 || Boolean(busyId)"
|
||||
title="انتقال به بعد"
|
||||
aria-label="انتقال به بعد"
|
||||
@click="move(index, 1)"
|
||||
<a-select-option v-for="k in KINDS" :key="k" :value="k">
|
||||
{{ ACTIVITY_STAGE_KIND_LABELS[k] }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="5">
|
||||
<a-select
|
||||
v-if="drafts[stage.id]"
|
||||
v-model:value="drafts[stage.id]!.color"
|
||||
aria-label="رنگ ستون"
|
||||
style="width: 100%"
|
||||
>
|
||||
▼
|
||||
</button>
|
||||
<UiButton
|
||||
size="sm"
|
||||
type="button"
|
||||
:disabled="!isDirty(stage) || Boolean(busyId)"
|
||||
:loading="busyId === stage.id"
|
||||
@click="save(stage)"
|
||||
>
|
||||
ذخیره
|
||||
</UiButton>
|
||||
<button
|
||||
type="button"
|
||||
class="icon danger"
|
||||
:disabled="Boolean(busyId)"
|
||||
title="حذف ستون"
|
||||
aria-label="حذف ستون"
|
||||
@click="remove(stage)"
|
||||
>
|
||||
<UiIcon name="trash" :size="15" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-select-option v-for="c in ACTIVITY_STAGE_COLORS" :key="c" :value="c">
|
||||
{{ ACTIVITY_STAGE_COLOR_LABELS[c] }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="5">
|
||||
<a-flex align="center" gap="small" wrap="wrap" justify="flex-end">
|
||||
<a-button
|
||||
type="text"
|
||||
:disabled="index === 0 || Boolean(busyId)"
|
||||
title="انتقال به قبل"
|
||||
aria-label="انتقال به قبل"
|
||||
@click="move(index, -1)"
|
||||
>
|
||||
<template #icon><ArrowUpOutlined /></template>
|
||||
</a-button>
|
||||
<a-button
|
||||
type="text"
|
||||
:disabled="index === stages.length - 1 || Boolean(busyId)"
|
||||
title="انتقال به بعد"
|
||||
aria-label="انتقال به بعد"
|
||||
@click="move(index, 1)"
|
||||
>
|
||||
<template #icon><ArrowDownOutlined /></template>
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!isDirty(stage) || Boolean(busyId)"
|
||||
:loading="busyId === stage.id"
|
||||
@click="save(stage)"
|
||||
>
|
||||
ذخیره
|
||||
</a-button>
|
||||
<a-button
|
||||
type="text"
|
||||
danger
|
||||
:disabled="Boolean(busyId)"
|
||||
title="حذف ستون"
|
||||
aria-label="حذف ستون"
|
||||
@click="remove(stage)"
|
||||
>
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
</a-button>
|
||||
</a-flex>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-flex>
|
||||
|
||||
<form class="create" @submit.prevent="create">
|
||||
<strong>ستون جدید</strong>
|
||||
<div class="create-fields">
|
||||
<input v-model="createForm.name" maxlength="80" placeholder="مثلاً: منتظر پاسخ مشتری" />
|
||||
<select v-model="createForm.kind" aria-label="نوع ستون جدید">
|
||||
<option v-for="k in KINDS" :key="k" :value="k">{{ ACTIVITY_STAGE_KIND_LABELS[k] }}</option>
|
||||
</select>
|
||||
<select v-model="createForm.color" aria-label="رنگ ستون جدید">
|
||||
<option v-for="c in ACTIVITY_STAGE_COLORS" :key="c" :value="c">
|
||||
{{ ACTIVITY_STAGE_COLOR_LABELS[c] }}
|
||||
</option>
|
||||
</select>
|
||||
<UiButton
|
||||
variant="primary"
|
||||
type="submit"
|
||||
:disabled="!createForm.name.trim() || Boolean(busyId)"
|
||||
:loading="busyId === 'create'"
|
||||
>
|
||||
افزودن
|
||||
</UiButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</UiModal>
|
||||
<a-divider />
|
||||
|
||||
<a-flex vertical gap="small" @submit.prevent="create">
|
||||
<a-typography-text strong>ستون جدید</a-typography-text>
|
||||
<a-row :gutter="[8, 8]" align="middle">
|
||||
<a-col :xs="24" :sm="10">
|
||||
<a-input
|
||||
v-model:value="createForm.name"
|
||||
:maxlength="80"
|
||||
placeholder="مثلاً: منتظر پاسخ مشتری"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="5">
|
||||
<a-select v-model:value="createForm.kind" aria-label="نوع ستون جدید" style="width: 100%">
|
||||
<a-select-option v-for="k in KINDS" :key="k" :value="k">
|
||||
{{ ACTIVITY_STAGE_KIND_LABELS[k] }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="5">
|
||||
<a-select v-model:value="createForm.color" aria-label="رنگ ستون جدید" style="width: 100%">
|
||||
<a-select-option v-for="c in ACTIVITY_STAGE_COLORS" :key="c" :value="c">
|
||||
{{ ACTIVITY_STAGE_COLOR_LABELS[c] }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="4">
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="button"
|
||||
block
|
||||
:disabled="!createForm.name.trim() || Boolean(busyId)"
|
||||
:loading="busyId === 'create'"
|
||||
@click="create"
|
||||
>
|
||||
افزودن
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.manager {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.rows {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 0.7rem minmax(0, 1fr) 9rem 6.5rem auto;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.6rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 0.65rem;
|
||||
height: 0.65rem;
|
||||
border-radius: 999px;
|
||||
background: var(--dot);
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.6rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
font: inherit;
|
||||
font-size: 0.86rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.row-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
color: #475569;
|
||||
font-size: 0.7rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon.danger {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.create {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
padding-top: 0.8rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.create-fields {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 9rem 6.5rem auto;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.row {
|
||||
grid-template-columns: 0.7rem minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.row select {
|
||||
grid-column: 2 / -1;
|
||||
}
|
||||
|
||||
.row-actions {
|
||||
grid-column: 1 / -1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.create-fields {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,393 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import {
|
||||
Alert as AAlert,
|
||||
Avatar as AAvatar,
|
||||
Button as AButton,
|
||||
Card as ACard,
|
||||
Collapse as ACollapse,
|
||||
CollapsePanel as ACollapsePanel,
|
||||
Divider as ADivider,
|
||||
Empty as AEmpty,
|
||||
Flex as AFlex,
|
||||
Space as ASpace,
|
||||
Spin as ASpin,
|
||||
Tag as ATag,
|
||||
Typography,
|
||||
theme,
|
||||
} from 'ant-design-vue';
|
||||
import {
|
||||
CalendarOutlined,
|
||||
CheckCircleOutlined,
|
||||
ClockCircleOutlined,
|
||||
LeftOutlined,
|
||||
PhoneOutlined,
|
||||
PlusOutlined,
|
||||
ScheduleOutlined,
|
||||
TeamOutlined,
|
||||
WarningOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { ActivityDto, ActivityStatus, ActivityType, PaginatedResponse } from '@mento/shared';
|
||||
import { ACTIVITY_TYPE_LABELS } from '@mento/shared';
|
||||
import { api } from '@/lib/api';
|
||||
import {
|
||||
calendarDaysBetween,
|
||||
formatClockFa,
|
||||
formatJalaliDay,
|
||||
startOfLocalDay,
|
||||
toFaDigits,
|
||||
} from '@/lib/jalali';
|
||||
|
||||
const { Text: ATypographyText, Title: ATypographyTitle, Paragraph: ATypographyParagraph } =
|
||||
Typography;
|
||||
const { token } = theme.useToken();
|
||||
|
||||
const STATUS_LABELS: Record<ActivityStatus, string> = {
|
||||
open: 'باز',
|
||||
done: 'انجام‌شده',
|
||||
canceled: 'لغو شده',
|
||||
};
|
||||
|
||||
const TYPE_ICONS: Record<ActivityType, typeof PhoneOutlined> = {
|
||||
call: PhoneOutlined,
|
||||
meeting: TeamOutlined,
|
||||
task: CheckCircleOutlined,
|
||||
note: ScheduleOutlined,
|
||||
};
|
||||
|
||||
type DueTone = 'overdue' | 'today' | 'soon' | 'later' | 'none';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
dealId: string;
|
||||
personId?: string | null;
|
||||
companyId?: string | null;
|
||||
dealTitle?: string;
|
||||
}>(),
|
||||
{
|
||||
personId: null,
|
||||
companyId: null,
|
||||
dealTitle: '',
|
||||
},
|
||||
);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const items = ref<ActivityDto[]>([]);
|
||||
const loading = ref(false);
|
||||
const error = ref('');
|
||||
const closedKeys = ref<string[]>([]);
|
||||
|
||||
function sortByDue(a: ActivityDto, b: ActivityDto) {
|
||||
const ta = a.dueAt ? new Date(a.dueAt).getTime() : Number.POSITIVE_INFINITY;
|
||||
const tb = b.dueAt ? new Date(b.dueAt).getTime() : Number.POSITIVE_INFINITY;
|
||||
if (Number.isNaN(ta) && Number.isNaN(tb)) return 0;
|
||||
if (Number.isNaN(ta)) return 1;
|
||||
if (Number.isNaN(tb)) return -1;
|
||||
return ta - tb;
|
||||
}
|
||||
|
||||
const planned = computed(() =>
|
||||
items.value.filter((a) => a.status === 'open').slice().sort(sortByDue),
|
||||
);
|
||||
const closed = computed(() =>
|
||||
items.value
|
||||
.filter((a) => a.status !== 'open')
|
||||
.slice()
|
||||
.sort((a, b) => {
|
||||
const ta = a.completedAt || a.updatedAt || a.dueAt || '';
|
||||
const tb = b.completedAt || b.updatedAt || b.dueAt || '';
|
||||
return tb.localeCompare(ta);
|
||||
}),
|
||||
);
|
||||
|
||||
function dueTone(dueAt: string | null): DueTone {
|
||||
if (!dueAt) return 'none';
|
||||
const due = new Date(dueAt);
|
||||
if (Number.isNaN(due.getTime())) return 'none';
|
||||
const days = calendarDaysBetween(startOfLocalDay(), startOfLocalDay(due));
|
||||
if (days < 0) return 'overdue';
|
||||
if (days === 0) return 'today';
|
||||
if (days <= 2) return 'soon';
|
||||
return 'later';
|
||||
}
|
||||
|
||||
function dueLabel(dueAt: string | null) {
|
||||
if (!dueAt) return 'بدون موعد';
|
||||
const d = new Date(dueAt);
|
||||
if (Number.isNaN(d.getTime())) return 'بدون موعد';
|
||||
const tone = dueTone(dueAt);
|
||||
if (tone === 'overdue') {
|
||||
const days = Math.abs(calendarDaysBetween(startOfLocalDay(), startOfLocalDay(d)));
|
||||
return days === 1 ? 'دیروز موعد داشت' : `${toFaDigits(days)} روز تأخیر`;
|
||||
}
|
||||
if (tone === 'today') return `امروز · ${formatClockFa(d)}`;
|
||||
return `${formatJalaliDay(d)} · ${formatClockFa(d)}`;
|
||||
}
|
||||
|
||||
function dueTagColor(tone: DueTone) {
|
||||
if (tone === 'overdue') return 'error';
|
||||
if (tone === 'today') return 'warning';
|
||||
if (tone === 'soon') return 'processing';
|
||||
return 'default';
|
||||
}
|
||||
|
||||
function rowStyle(tone: DueTone, closedRow = false) {
|
||||
const base = {
|
||||
width: '100%',
|
||||
padding: `${token.value.paddingSM}px ${token.value.padding}px`,
|
||||
borderRadius: `${token.value.borderRadiusLG}px`,
|
||||
border: `1px solid ${token.value.colorBorderSecondary}`,
|
||||
background: token.value.colorBgContainer,
|
||||
cursor: 'pointer' as const,
|
||||
opacity: closedRow ? 0.78 : 1,
|
||||
};
|
||||
if (closedRow) {
|
||||
return { ...base, background: token.value.colorFillAlter };
|
||||
}
|
||||
if (tone === 'overdue') {
|
||||
return {
|
||||
...base,
|
||||
borderColor: token.value.colorErrorBorder,
|
||||
background: token.value.colorErrorBg,
|
||||
};
|
||||
}
|
||||
if (tone === 'today') {
|
||||
return {
|
||||
...base,
|
||||
borderColor: token.value.colorWarningBorder,
|
||||
background: token.value.colorWarningBg,
|
||||
};
|
||||
}
|
||||
return base;
|
||||
}
|
||||
|
||||
function avatarStyle(tone: DueTone) {
|
||||
if (tone === 'overdue') {
|
||||
return { backgroundColor: token.value.colorErrorBg, color: token.value.colorError };
|
||||
}
|
||||
if (tone === 'today') {
|
||||
return { backgroundColor: token.value.colorWarningBg, color: token.value.colorWarning };
|
||||
}
|
||||
return {
|
||||
backgroundColor: token.value.colorPrimaryBg,
|
||||
color: token.value.colorPrimary,
|
||||
};
|
||||
}
|
||||
|
||||
function typeLabel(item: ActivityDto) {
|
||||
const type = item.type as ActivityType;
|
||||
return item.typeDef?.name || ACTIVITY_TYPE_LABELS[type];
|
||||
}
|
||||
|
||||
function statusLabel(status: ActivityDto['status']) {
|
||||
return STATUS_LABELS[status as ActivityStatus];
|
||||
}
|
||||
|
||||
function typeIcon(type: ActivityDto['type']) {
|
||||
return TYPE_ICONS[type as ActivityType];
|
||||
}
|
||||
|
||||
function newActivityQuery() {
|
||||
const query: Record<string, string> = { dealId: props.dealId };
|
||||
if (props.personId) query.personId = props.personId;
|
||||
if (props.companyId) query.companyId = props.companyId;
|
||||
if (props.dealTitle.trim()) query.title = `پیگیری: ${props.dealTitle.trim()}`;
|
||||
return query;
|
||||
}
|
||||
|
||||
function goCreate() {
|
||||
void router.push({ name: 'activity-new', query: newActivityQuery() });
|
||||
}
|
||||
|
||||
function goDetail(id: string) {
|
||||
void router.push({ name: 'activity-detail', params: { id } });
|
||||
}
|
||||
|
||||
async function load() {
|
||||
if (!props.dealId) return;
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await api.get<PaginatedResponse<ActivityDto>>('/activities', {
|
||||
params: { filter: 'all', dealId: props.dealId, limit: 50 },
|
||||
});
|
||||
items.value = data.items ?? [];
|
||||
} catch {
|
||||
error.value = 'بارگذاری فعالیت‌های معامله ممکن نشد.';
|
||||
items.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.dealId,
|
||||
() => {
|
||||
void load();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<template #title>
|
||||
<a-space :size="8">
|
||||
<CalendarOutlined :style="{ color: token.colorPrimary }" />
|
||||
<span>فعالیت‌های برنامه‌ریزی‌شده</span>
|
||||
<a-tag v-if="planned.length" color="processing" :bordered="false">
|
||||
{{ toFaDigits(planned.length) }} باز
|
||||
</a-tag>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="goCreate">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
افزودن فعالیت
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<a-alert
|
||||
v-if="error"
|
||||
type="error"
|
||||
show-icon
|
||||
:message="error"
|
||||
:style="{ marginBottom: `${token.margin}px` }"
|
||||
/>
|
||||
|
||||
<a-spin :spinning="loading">
|
||||
<a-empty
|
||||
v-if="!loading && !planned.length"
|
||||
:image="AEmpty.PRESENTED_IMAGE_SIMPLE"
|
||||
:style="{ paddingBlock: `${token.paddingLG}px` }"
|
||||
>
|
||||
<template #description>
|
||||
<a-flex vertical align="center" :gap="token.marginXS">
|
||||
<a-typography-title :level="5" :style="{ margin: 0 }">
|
||||
هنوز فعالیتی برای این معامله نیست
|
||||
</a-typography-title>
|
||||
<a-typography-paragraph
|
||||
type="secondary"
|
||||
:style="{ margin: 0, maxWidth: '28rem', textAlign: 'center' }"
|
||||
>
|
||||
یک تماس، جلسه یا پیگیری زمان‌بندی کن تا معامله از دست نرود.
|
||||
</a-typography-paragraph>
|
||||
</a-flex>
|
||||
</template>
|
||||
<a-button type="primary" @click="goCreate">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
افزودن اولین فعالیت
|
||||
</a-button>
|
||||
</a-empty>
|
||||
|
||||
<a-flex v-else-if="planned.length" vertical :gap="token.marginSM">
|
||||
<a-flex
|
||||
v-for="item in planned"
|
||||
:key="item.id"
|
||||
align="center"
|
||||
justify="space-between"
|
||||
:gap="token.marginSM"
|
||||
wrap="wrap"
|
||||
:style="rowStyle(dueTone(item.dueAt))"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="goDetail(item.id)"
|
||||
@keydown.enter="goDetail(item.id)"
|
||||
>
|
||||
<a-flex align="center" :gap="token.marginSM" :style="{ minWidth: 0, flex: '1 1 220px' }">
|
||||
<a-avatar :size="40" :style="avatarStyle(dueTone(item.dueAt))">
|
||||
<template #icon>
|
||||
<WarningOutlined v-if="dueTone(item.dueAt) === 'overdue'" />
|
||||
<ClockCircleOutlined v-else-if="dueTone(item.dueAt) === 'today'" />
|
||||
<component :is="typeIcon(item.type)" v-else />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<a-flex vertical :gap="4" :style="{ minWidth: 0 }">
|
||||
<a-typography-text strong :ellipsis="{ tooltip: item.title }">
|
||||
{{ item.title }}
|
||||
</a-typography-text>
|
||||
<a-space :size="8" wrap>
|
||||
<a-tag :bordered="false">{{ typeLabel(item) }}</a-tag>
|
||||
<a-tag :color="dueTagColor(dueTone(item.dueAt))" :bordered="false">
|
||||
{{ dueLabel(item.dueAt) }}
|
||||
</a-tag>
|
||||
<a-typography-text v-if="item.assignee?.fullName" type="secondary">
|
||||
{{ item.assignee.fullName }}
|
||||
</a-typography-text>
|
||||
</a-space>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
<LeftOutlined :style="{ color: token.colorTextQuaternary, flexShrink: 0 }" />
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
|
||||
<template v-if="closed.length">
|
||||
<a-divider v-if="planned.length" :style="{ margin: `${token.marginMD}px 0` }" />
|
||||
<a-collapse
|
||||
v-model:activeKey="closedKeys"
|
||||
ghost
|
||||
:bordered="false"
|
||||
:style="{
|
||||
background: 'transparent',
|
||||
marginTop: planned.length ? 0 : `${token.marginSM}px`,
|
||||
}"
|
||||
>
|
||||
<a-collapse-panel key="closed">
|
||||
<template #header>
|
||||
<a-typography-text type="secondary">
|
||||
{{ toFaDigits(closed.length) }} فعالیت انجام‌شده یا لغو شده
|
||||
</a-typography-text>
|
||||
</template>
|
||||
<a-flex vertical :gap="token.marginSM">
|
||||
<a-flex
|
||||
v-for="item in closed"
|
||||
:key="item.id"
|
||||
align="center"
|
||||
justify="space-between"
|
||||
:gap="token.marginSM"
|
||||
wrap="wrap"
|
||||
:style="rowStyle('none', true)"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="goDetail(item.id)"
|
||||
@keydown.enter="goDetail(item.id)"
|
||||
>
|
||||
<a-flex
|
||||
align="center"
|
||||
:gap="token.marginSM"
|
||||
:style="{ minWidth: 0, flex: '1 1 220px' }"
|
||||
>
|
||||
<a-avatar
|
||||
:size="40"
|
||||
:style="{
|
||||
backgroundColor: token.colorFillSecondary,
|
||||
color: token.colorTextSecondary,
|
||||
}"
|
||||
>
|
||||
<template #icon>
|
||||
<component :is="typeIcon(item.type)" />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<a-flex vertical :gap="4" :style="{ minWidth: 0 }">
|
||||
<a-typography-text :ellipsis="{ tooltip: item.title }">
|
||||
{{ item.title }}
|
||||
</a-typography-text>
|
||||
<a-space :size="8" wrap>
|
||||
<a-tag :bordered="false">{{ statusLabel(item.status) }}</a-tag>
|
||||
<a-typography-text type="secondary">
|
||||
{{ dueLabel(item.dueAt) }}
|
||||
</a-typography-text>
|
||||
</a-space>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
<LeftOutlined :style="{ color: token.colorTextQuaternary, flexShrink: 0 }" />
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</template>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</template>
|
||||
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import { computed, onBeforeUnmount, onMounted, ref, type Component } from 'vue';
|
||||
import AutomationNode from '@/components/automations/AutomationNode.vue';
|
||||
import {
|
||||
AUTOMATION_ACTION_LABELS,
|
||||
@@ -22,6 +21,23 @@ import {
|
||||
type TeamDto,
|
||||
} from '@mento/shared';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
import { Button as AButton, Divider as ADivider, Space as ASpace, Tooltip as ATooltip } from 'ant-design-vue';
|
||||
import {
|
||||
BellOutlined,
|
||||
DeleteOutlined,
|
||||
DragOutlined,
|
||||
ExpandOutlined,
|
||||
FilterOutlined,
|
||||
FlagOutlined,
|
||||
FullscreenExitOutlined,
|
||||
FullscreenOutlined,
|
||||
GiftOutlined,
|
||||
PlusOutlined,
|
||||
SelectOutlined,
|
||||
ThunderboltOutlined,
|
||||
ZoomInOutlined,
|
||||
ZoomOutOutlined,
|
||||
} from '@/icons/ant-bridge';
|
||||
|
||||
export type AutomationAddPayload =
|
||||
| { kind: 'action'; action: AutomationAction }
|
||||
@@ -42,8 +58,15 @@ const props = withDefaults(
|
||||
form?: LeadFormDto | null;
|
||||
users?: OrgUserDto[];
|
||||
teams?: TeamDto[];
|
||||
fullscreen?: boolean;
|
||||
}>(),
|
||||
{ chainMode: 'stop', form: null, users: () => [], teams: () => [] },
|
||||
{
|
||||
chainMode: 'stop',
|
||||
form: null,
|
||||
users: () => [],
|
||||
teams: () => [],
|
||||
fullscreen: false,
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -52,6 +75,7 @@ const emit = defineEmits<{
|
||||
remove: [id: string];
|
||||
removeRange: [start: number, end: number];
|
||||
addBranch: [];
|
||||
'update:fullscreen': [value: boolean];
|
||||
}>();
|
||||
|
||||
const addAt = ref<{ key: string; index: number; allow: AddAllow } | null>(null);
|
||||
@@ -60,6 +84,116 @@ const actionCount = computed(
|
||||
() => props.steps.filter((s) => !isAutomationCondition(s)).length,
|
||||
);
|
||||
|
||||
type CanvasTool = 'select' | 'hand';
|
||||
const Z_MIN = 0.4;
|
||||
const Z_MAX = 2;
|
||||
const Z_STEP = 0.1;
|
||||
|
||||
const tool = ref<CanvasTool>('select');
|
||||
const zoom = ref(1);
|
||||
const pan = ref({ x: 0, y: 0 });
|
||||
const viewportRef = ref<HTMLElement | null>(null);
|
||||
const panning = ref(false);
|
||||
const panOrigin = ref({ x: 0, y: 0, panX: 0, panY: 0 });
|
||||
const didPan = ref(false);
|
||||
|
||||
const zoomLabel = computed(() => `${toFaDigits(Math.round(zoom.value * 100))}٪`);
|
||||
const worldStyle = computed(() => ({
|
||||
transform: `translate(${pan.value.x}px, ${pan.value.y}px) scale(${zoom.value})`,
|
||||
}));
|
||||
|
||||
function clampZoom(v: number) {
|
||||
return Math.min(Z_MAX, Math.max(Z_MIN, Math.round(v * 100) / 100));
|
||||
}
|
||||
|
||||
function setTool(next: CanvasTool) {
|
||||
tool.value = next;
|
||||
addAt.value = null;
|
||||
}
|
||||
|
||||
function zoomBy(delta: number) {
|
||||
zoom.value = clampZoom(zoom.value + delta);
|
||||
}
|
||||
|
||||
function resetView() {
|
||||
zoom.value = 1;
|
||||
pan.value = { x: 0, y: 0 };
|
||||
}
|
||||
|
||||
function onWheel(e: WheelEvent) {
|
||||
const el = viewportRef.value;
|
||||
if (!el) return;
|
||||
const rect = el.getBoundingClientRect();
|
||||
const mx = e.clientX - rect.left;
|
||||
const my = e.clientY - rect.top;
|
||||
const prev = zoom.value;
|
||||
const next = clampZoom(prev * (e.deltaY > 0 ? 0.9 : 1.1));
|
||||
if (next === prev) return;
|
||||
const wx = (mx - pan.value.x) / prev;
|
||||
const wy = (my - pan.value.y) / prev;
|
||||
pan.value = { x: mx - wx * next, y: my - wy * next };
|
||||
zoom.value = next;
|
||||
}
|
||||
|
||||
function onPointerDown(e: PointerEvent) {
|
||||
const hand = tool.value === 'hand' || e.button === 1 || e.altKey;
|
||||
if (!hand || e.button === 2) return;
|
||||
e.preventDefault();
|
||||
panning.value = true;
|
||||
didPan.value = false;
|
||||
panOrigin.value = {
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
panX: pan.value.x,
|
||||
panY: pan.value.y,
|
||||
};
|
||||
(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
|
||||
}
|
||||
|
||||
function onPointerMove(e: PointerEvent) {
|
||||
if (!panning.value) return;
|
||||
const dx = e.clientX - panOrigin.value.x;
|
||||
const dy = e.clientY - panOrigin.value.y;
|
||||
if (Math.abs(dx) + Math.abs(dy) > 3) didPan.value = true;
|
||||
pan.value = {
|
||||
x: panOrigin.value.panX + dx,
|
||||
y: panOrigin.value.panY + dy,
|
||||
};
|
||||
}
|
||||
|
||||
function onPointerUp(e: PointerEvent) {
|
||||
if (!panning.value) return;
|
||||
panning.value = false;
|
||||
try {
|
||||
(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
function onViewportClick() {
|
||||
if (didPan.value) {
|
||||
didPan.value = false;
|
||||
return;
|
||||
}
|
||||
addAt.value = null;
|
||||
}
|
||||
|
||||
function onDocPointerDown(e: PointerEvent) {
|
||||
if (!addAt.value) return;
|
||||
const target = e.target;
|
||||
if (!(target instanceof Element)) return;
|
||||
if (target.closest('.picker') || target.closest('.plus')) return;
|
||||
addAt.value = null;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('pointerdown', onDocPointerDown, true);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('pointerdown', onDocPointerDown, true);
|
||||
});
|
||||
|
||||
const layout = computed((): { main: LaneItem[]; branches: BranchLane[] } => {
|
||||
const steps = props.steps;
|
||||
const { prefixEnd, branches } = splitAutomationBranches(steps);
|
||||
@@ -151,10 +285,10 @@ function assignHint(step: AutomationStep) {
|
||||
return 'مسئول پرونده';
|
||||
}
|
||||
|
||||
function actionIcon(action: AutomationAction) {
|
||||
if (action === 'create_notification') return 'bell';
|
||||
if (action === 'add_loyalty_points') return 'gift';
|
||||
return 'flag';
|
||||
function actionIcon(action: AutomationAction): Component {
|
||||
if (action === 'create_notification') return BellOutlined;
|
||||
if (action === 'add_loyalty_points') return GiftOutlined;
|
||||
return FlagOutlined;
|
||||
}
|
||||
|
||||
function stepTitle(step: AutomationStep) {
|
||||
@@ -208,13 +342,20 @@ function stepHint(step: AutomationStep) {
|
||||
}
|
||||
|
||||
function openAdd(item: { key: string; index: number; allow: AddAllow }) {
|
||||
if (!canAdd.value) return;
|
||||
if (!canAdd.value || tool.value === 'hand') return;
|
||||
addAt.value =
|
||||
addAt.value?.key === item.key
|
||||
? null
|
||||
: { key: item.key, index: item.index, allow: item.allow };
|
||||
}
|
||||
|
||||
function actionShort(action: AutomationAction) {
|
||||
if (action === 'create_activity') return 'فعالیت';
|
||||
if (action === 'create_notification') return 'اعلان / پیامک';
|
||||
if (action === 'add_loyalty_points') return 'امتیاز باشگاه';
|
||||
return AUTOMATION_ACTION_LABELS[action];
|
||||
}
|
||||
|
||||
function pickAction(action: AutomationAction) {
|
||||
if (!addAt.value) return;
|
||||
emit('add', { kind: 'action', action }, addAt.value.index);
|
||||
@@ -234,7 +375,19 @@ function removeBranch(lane: BranchLane) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="canvas" @click.self="addAt = null">
|
||||
<div class="canvas-shell">
|
||||
<div
|
||||
ref="viewportRef"
|
||||
class="canvas"
|
||||
:class="{ hand: tool === 'hand', panning }"
|
||||
@wheel.prevent="onWheel"
|
||||
@pointerdown="onPointerDown"
|
||||
@pointermove="onPointerMove"
|
||||
@pointerup="onPointerUp"
|
||||
@pointercancel="onPointerUp"
|
||||
@click.self="onViewportClick"
|
||||
>
|
||||
<div class="world" :style="worldStyle" :class="{ locked: tool === 'hand' }">
|
||||
<div class="flow">
|
||||
<button
|
||||
class="node trigger"
|
||||
@@ -243,7 +396,7 @@ function removeBranch(lane: BranchLane) {
|
||||
@click="emit('select', 'trigger')"
|
||||
>
|
||||
<span class="icon">
|
||||
<UiIcon name="sparkle" :size="18" />
|
||||
<ThunderboltOutlined />
|
||||
</span>
|
||||
<span class="copy">
|
||||
<span class="kind">اگر</span>
|
||||
@@ -265,8 +418,46 @@ function removeBranch(lane: BranchLane) {
|
||||
title="افزودن گره"
|
||||
@click.stop="openAdd(item)"
|
||||
>
|
||||
<UiIcon name="plus" :size="item.end ? 16 : 14" />
|
||||
<PlusOutlined :style="{ fontSize: item.end ? '16px' : '14px' }" />
|
||||
</button>
|
||||
<Transition name="auto-picker">
|
||||
<div
|
||||
v-if="addAt?.key === item.key"
|
||||
class="picker"
|
||||
@click.stop
|
||||
@pointerdown.stop
|
||||
>
|
||||
<div class="picker-head">افزودن گره</div>
|
||||
<button
|
||||
v-if="addAt.allow !== 'action'"
|
||||
type="button"
|
||||
class="pick condition"
|
||||
@click="pickCondition"
|
||||
>
|
||||
<span class="pick-ico"><FilterOutlined /></span>
|
||||
<span class="pick-copy">
|
||||
<strong>شرط</strong>
|
||||
<small>اگر … آنگاه</small>
|
||||
</span>
|
||||
</button>
|
||||
<template v-if="addAt.allow !== 'condition'">
|
||||
<button
|
||||
v-for="action in AUTOMATION_ACTIONS"
|
||||
:key="action"
|
||||
type="button"
|
||||
class="pick"
|
||||
:class="action"
|
||||
@click="pickAction(action)"
|
||||
>
|
||||
<span class="pick-ico"><component :is="actionIcon(action)" /></span>
|
||||
<span class="pick-copy">
|
||||
<strong>{{ actionShort(action) }}</strong>
|
||||
<small>{{ AUTOMATION_ACTION_LABELS[action] }}</small>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
<AutomationNode
|
||||
v-else
|
||||
@@ -292,7 +483,7 @@ function removeBranch(lane: BranchLane) {
|
||||
title="حذف این شاخه"
|
||||
@click.stop="removeBranch(lane)"
|
||||
>
|
||||
<UiIcon name="trash" :size="12" />
|
||||
<DeleteOutlined :style="{ fontSize: '12px' }" />
|
||||
</button>
|
||||
</div>
|
||||
<template v-for="item in lane.items" :key="item.key">
|
||||
@@ -308,8 +499,46 @@ function removeBranch(lane: BranchLane) {
|
||||
:title="item.allow === 'condition' ? 'افزودن شرط («و»)' : 'افزودن گره'"
|
||||
@click.stop="openAdd(item)"
|
||||
>
|
||||
<UiIcon name="plus" :size="14" />
|
||||
<PlusOutlined :style="{ fontSize: '14px' }" />
|
||||
</button>
|
||||
<Transition name="auto-picker">
|
||||
<div
|
||||
v-if="addAt?.key === item.key"
|
||||
class="picker"
|
||||
@click.stop
|
||||
@pointerdown.stop
|
||||
>
|
||||
<div class="picker-head">افزودن گره</div>
|
||||
<button
|
||||
v-if="addAt.allow !== 'action'"
|
||||
type="button"
|
||||
class="pick condition"
|
||||
@click="pickCondition"
|
||||
>
|
||||
<span class="pick-ico"><FilterOutlined /></span>
|
||||
<span class="pick-copy">
|
||||
<strong>شرط</strong>
|
||||
<small>اگر … آنگاه</small>
|
||||
</span>
|
||||
</button>
|
||||
<template v-if="addAt.allow !== 'condition'">
|
||||
<button
|
||||
v-for="action in AUTOMATION_ACTIONS"
|
||||
:key="action"
|
||||
type="button"
|
||||
class="pick"
|
||||
:class="action"
|
||||
@click="pickAction(action)"
|
||||
>
|
||||
<span class="pick-ico"><component :is="actionIcon(action)" /></span>
|
||||
<span class="pick-copy">
|
||||
<strong>{{ actionShort(action) }}</strong>
|
||||
<small>{{ AUTOMATION_ACTION_LABELS[action] }}</small>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
<AutomationNode
|
||||
v-else
|
||||
@@ -330,65 +559,146 @@ function removeBranch(lane: BranchLane) {
|
||||
:title="canAddBranch ? '' : 'ابتدا برای شاخهٔ آخر یک عمل بگذارید'"
|
||||
@click.stop="emit('addBranch')"
|
||||
>
|
||||
<UiIcon name="plus" :size="14" />
|
||||
<PlusOutlined :style="{ fontSize: '14px' }" />
|
||||
شاخهٔ جدید
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-if="addAt" class="picker" @click.stop>
|
||||
<p>
|
||||
{{
|
||||
addAt.allow === 'condition'
|
||||
? 'شرط جدید با «و» به شرط‌های این شاخه اضافه می‌شود'
|
||||
: 'گره بعدی را انتخاب کنید'
|
||||
}}
|
||||
</p>
|
||||
<div class="picks">
|
||||
<button
|
||||
v-if="addAt.allow !== 'action'"
|
||||
type="button"
|
||||
class="condition"
|
||||
@click="pickCondition"
|
||||
>
|
||||
<UiIcon name="filter" :size="16" />
|
||||
شرط
|
||||
</button>
|
||||
<template v-if="addAt.allow !== 'condition'">
|
||||
<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>
|
||||
</template>
|
||||
</div>
|
||||
<button class="cancel" type="button" @click="addAt = null">انصراف</button>
|
||||
</div>
|
||||
|
||||
<p v-if="!canAdd" class="cap">
|
||||
حداکثر {{ toFaDigits(MAX_AUTOMATION_STEPS) }} گره در یک قانون
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="island" @pointerdown.stop @click.stop>
|
||||
<a-space :size="4">
|
||||
<a-tooltip title="انتخاب">
|
||||
<a-button
|
||||
type="text"
|
||||
:class="{ on: tool === 'select' }"
|
||||
@click="setTool('select')"
|
||||
>
|
||||
<template #icon><SelectOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="جابه‌جایی (دست)">
|
||||
<a-button
|
||||
type="text"
|
||||
:class="{ on: tool === 'hand' }"
|
||||
@click="setTool('hand')"
|
||||
>
|
||||
<template #icon><DragOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-divider type="vertical" :style="{ height: '20px', margin: 0 }" />
|
||||
<a-tooltip title="کوچک‌نمایی">
|
||||
<a-button type="text" :disabled="zoom <= Z_MIN" @click="zoomBy(-Z_STEP)">
|
||||
<template #icon><ZoomOutOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-button type="text" class="zoom-label" @click="resetView">
|
||||
{{ zoomLabel }}
|
||||
</a-button>
|
||||
<a-tooltip title="بزرگ‌نمایی">
|
||||
<a-button type="text" :disabled="zoom >= Z_MAX" @click="zoomBy(Z_STEP)">
|
||||
<template #icon><ZoomInOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="بازنشانی نما">
|
||||
<a-button type="text" @click="resetView">
|
||||
<template #icon><ExpandOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-divider type="vertical" :style="{ height: '20px', margin: 0 }" />
|
||||
<a-tooltip :title="fullscreen ? 'خروج از تمام‌صفحه' : 'تمام‌صفحه'">
|
||||
<a-button
|
||||
type="text"
|
||||
:class="{ on: fullscreen }"
|
||||
@click="emit('update:fullscreen', !fullscreen)"
|
||||
>
|
||||
<template #icon>
|
||||
<FullscreenExitOutlined v-if="fullscreen" />
|
||||
<FullscreenOutlined v-else />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.canvas-shell {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 14rem;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 22rem;
|
||||
border-radius: var(--radius);
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
background-color: #f3f6f5;
|
||||
background-image: radial-gradient(#c9d4cf 1.1px, transparent 1.2px);
|
||||
background-size: 16px 16px;
|
||||
padding: 1.6rem 1.1rem 1.25rem;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.canvas.hand {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.canvas.hand.panning {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.world {
|
||||
transform-origin: 0 0;
|
||||
width: max-content;
|
||||
min-height: 100%;
|
||||
padding: 1.1rem 1rem 4rem;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.world.locked {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.island {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
bottom: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
border: 1px solid #d5ddd8;
|
||||
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.island :deep(.ant-btn.on) {
|
||||
color: #0f766e;
|
||||
background: #ecfdf8;
|
||||
}
|
||||
|
||||
.island :deep(.zoom-label) {
|
||||
min-width: 3.2rem;
|
||||
padding-inline: 4px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.flow {
|
||||
@@ -396,7 +706,7 @@ function removeBranch(lane: BranchLane) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
min-width: max-content;
|
||||
min-height: 16rem;
|
||||
min-height: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
.node.trigger {
|
||||
@@ -433,6 +743,7 @@ function removeBranch(lane: BranchLane) {
|
||||
flex-shrink: 0;
|
||||
color: #c2410c;
|
||||
background: #ffedd5;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.copy {
|
||||
@@ -535,7 +846,7 @@ strong {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-block: 1.3rem;
|
||||
padding-block: 0.7rem;
|
||||
}
|
||||
|
||||
.branch::before {
|
||||
@@ -608,66 +919,114 @@ strong {
|
||||
}
|
||||
|
||||
.picker {
|
||||
margin-top: 1rem;
|
||||
position: absolute;
|
||||
top: calc(100% + 10px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 30;
|
||||
width: 220px;
|
||||
padding: 6px;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
background: #fff;
|
||||
border: 1px solid #d5ddd8;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.85rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
|
||||
}
|
||||
|
||||
.auto-picker-enter-active,
|
||||
.auto-picker-leave-active {
|
||||
transition:
|
||||
opacity 0.16s ease,
|
||||
transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
transform-origin: top center;
|
||||
will-change: opacity, transform;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.auto-picker-enter-from,
|
||||
.auto-picker-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(6px) scale(0.97);
|
||||
}
|
||||
|
||||
.auto-picker-enter-to,
|
||||
.auto-picker-leave-from {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.picker-head {
|
||||
padding: 6px 8px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.pick {
|
||||
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;
|
||||
grid-template-columns: 32px 1fr;
|
||||
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;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
padding: 6px 8px;
|
||||
text-align: start;
|
||||
cursor: pointer;
|
||||
color: #0f172a;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.picks .create_activity {
|
||||
.pick:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.pick-ico {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 15px;
|
||||
background: #ecfdf8;
|
||||
color: #0f766e;
|
||||
}
|
||||
.picks .create_notification {
|
||||
color: #1d4ed8;
|
||||
}
|
||||
.picks .add_loyalty_points {
|
||||
color: #7c3aed;
|
||||
}
|
||||
.picks .condition {
|
||||
|
||||
.pick.condition .pick-ico {
|
||||
background: #fff7ed;
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
justify-self: start;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 0.8rem;
|
||||
.pick.create_notification .pick-ico {
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.pick.add_loyalty_points .pick-ico {
|
||||
background: #f5f3ff;
|
||||
color: #7c3aed;
|
||||
}
|
||||
|
||||
.pick-copy {
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.pick-copy strong {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.pick-copy small {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cap {
|
||||
@@ -680,7 +1039,10 @@ strong {
|
||||
@media (max-width: 700px) {
|
||||
.canvas {
|
||||
min-height: 0;
|
||||
padding: 1rem 0.75rem;
|
||||
}
|
||||
|
||||
.world {
|
||||
padding: 1rem 0.75rem 4rem;
|
||||
}
|
||||
|
||||
.flow,
|
||||
@@ -749,7 +1111,7 @@ strong {
|
||||
}
|
||||
|
||||
.picker {
|
||||
max-width: none;
|
||||
width: min(220px, 70vw);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -31,6 +31,24 @@ import {
|
||||
formConditionValues,
|
||||
isAutomationCondition,
|
||||
} from '@mento/shared';
|
||||
import {
|
||||
Alert as AAlert,
|
||||
Checkbox as ACheckbox,
|
||||
CheckboxGroup as ACheckboxGroup,
|
||||
Flex as AFlex,
|
||||
Form as AForm,
|
||||
FormItem as AFormItem,
|
||||
Input as AInput,
|
||||
InputNumber as AInputNumber,
|
||||
RadioGroup as ARadioGroup,
|
||||
Select as ASelect,
|
||||
Textarea as ATextarea,
|
||||
Typography,
|
||||
theme,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
const { Text: ATypographyText } = Typography;
|
||||
const { token } = theme.useToken();
|
||||
|
||||
const props = defineProps<{
|
||||
selected: 'trigger' | string;
|
||||
@@ -124,6 +142,87 @@ function toggleUser(step: AutomationStep, id: string, on: boolean) {
|
||||
step.assigneeUserIds = [...cur];
|
||||
}
|
||||
|
||||
function onUserCheck(step: AutomationStep, id: string, e: { target: { checked: boolean } }) {
|
||||
toggleUser(step, id, e.target.checked);
|
||||
}
|
||||
|
||||
function onConditionFieldChange(v: unknown) {
|
||||
if (typeof v === 'string' && selectedStep.value) {
|
||||
setConditionField(selectedStep.value, v as AutomationConditionField);
|
||||
}
|
||||
}
|
||||
|
||||
function onConditionKeyChange(v: unknown) {
|
||||
if (typeof v === 'string' && selectedStep.value) setConditionKey(selectedStep.value, v);
|
||||
}
|
||||
|
||||
function onActionChange(v: unknown) {
|
||||
if (typeof v === 'string' && selectedStep.value) {
|
||||
setAction(selectedStep.value, v as AutomationAction);
|
||||
}
|
||||
}
|
||||
|
||||
function onDueUnitChange(v: unknown) {
|
||||
if (!selectedStep.value || typeof v !== 'string') return;
|
||||
setDue(selectedStep.value, v as DueUnit, dueAmountOf(selectedStep.value) || 1);
|
||||
}
|
||||
|
||||
function onDueAmountChange(v: string | number | null) {
|
||||
if (!selectedStep.value) return;
|
||||
setDue(selectedStep.value, dueUnitOf(selectedStep.value), Number(v ?? 1));
|
||||
}
|
||||
|
||||
function onFormOptionValuesChange(vals: Array<string | number | boolean>) {
|
||||
if (!selectedStep.value) return;
|
||||
const next = vals.map(String);
|
||||
const order = conditionFormField.value?.options ?? [];
|
||||
next.sort((a, b) => order.indexOf(a) - order.indexOf(b));
|
||||
selectedStep.value.conditionValues = next;
|
||||
selectedStep.value.conditionValue = next[0] ?? '';
|
||||
}
|
||||
|
||||
const dealAmountValue = computed({
|
||||
get: () =>
|
||||
typeof selectedStep.value?.conditionValue === 'number'
|
||||
? selectedStep.value.conditionValue
|
||||
: Number(selectedStep.value?.conditionValue ?? 0),
|
||||
set: (v: number | null) => {
|
||||
if (selectedStep.value) selectedStep.value.conditionValue = Number(v ?? 0);
|
||||
},
|
||||
});
|
||||
|
||||
const formTextValue = computed({
|
||||
get: () => String(selectedStep.value?.conditionValue ?? ''),
|
||||
set: (v: string) => {
|
||||
if (selectedStep.value) selectedStep.value.conditionValue = v;
|
||||
},
|
||||
});
|
||||
|
||||
function nullableId(value: string | null | undefined) {
|
||||
return value ?? '';
|
||||
}
|
||||
|
||||
function setNullableId(
|
||||
key: 'activityTypeDefId' | 'assigneeId' | 'assigneeTeamId' | 'notifyUserId',
|
||||
v: unknown,
|
||||
) {
|
||||
if (!selectedStep.value) return;
|
||||
selectedStep.value[key] = typeof v === 'string' && v ? v : null;
|
||||
}
|
||||
|
||||
function onActivityTypeDefChange(v: unknown) {
|
||||
setNullableId('activityTypeDefId', v);
|
||||
}
|
||||
function onAssigneeIdChange(v: unknown) {
|
||||
setNullableId('assigneeId', v);
|
||||
}
|
||||
function onAssigneeTeamIdChange(v: unknown) {
|
||||
setNullableId('assigneeTeamId', v);
|
||||
}
|
||||
function onNotifyUserIdChange(v: unknown) {
|
||||
setNullableId('notifyUserId', v);
|
||||
}
|
||||
|
||||
function setConditionKey(step: AutomationStep, key: string) {
|
||||
step.conditionKey = key || null;
|
||||
const field = formFields.value.find((f) => f.key === key);
|
||||
@@ -131,15 +230,6 @@ function setConditionKey(step: AutomationStep, key: string) {
|
||||
step.conditionValues = step.conditionValue ? [step.conditionValue] : [];
|
||||
}
|
||||
|
||||
function toggleConditionValue(step: AutomationStep, option: string, on: boolean) {
|
||||
const cur = formConditionValues(step).filter((v) => v !== option);
|
||||
if (on) cur.push(option);
|
||||
const order = conditionFormField.value?.options ?? [];
|
||||
cur.sort((a, b) => order.indexOf(a) - order.indexOf(b));
|
||||
step.conditionValues = cur;
|
||||
step.conditionValue = cur[0] ?? '';
|
||||
}
|
||||
|
||||
function multiValueHint(op: AutomationConditionOp | undefined) {
|
||||
if (op === 'contains_any') return 'کافی است حداقل یکی از این گزینه‌ها انتخاب شده باشد.';
|
||||
if (op === 'not_contains') return 'هیچ‌کدام از این گزینه‌ها نباید انتخاب شده باشد.';
|
||||
@@ -162,6 +252,94 @@ const ticketPriorities: Array<{ value: TicketPriority; label: string }> = [
|
||||
{ value: 'urgent', label: 'فوری' },
|
||||
];
|
||||
|
||||
const triggerOptions = AUTOMATION_TRIGGER_GROUPS.map((group) => ({
|
||||
label: group.label,
|
||||
options: group.items.map((t) => ({
|
||||
value: t,
|
||||
label: AUTOMATION_TRIGGER_LABELS[t],
|
||||
})),
|
||||
}));
|
||||
|
||||
const formOptions = computed(() => [
|
||||
{ value: '', label: 'همه فرم‌ها' },
|
||||
...props.forms.map((f) => ({ value: f.id, label: f.name })),
|
||||
]);
|
||||
|
||||
const sourceIdSelect = computed({
|
||||
get: () => sourceId.value ?? '',
|
||||
set: (v: string) => {
|
||||
sourceId.value = v || null;
|
||||
},
|
||||
});
|
||||
|
||||
const chainModeOptions = [
|
||||
{ value: 'branches' as const, label: AUTOMATION_CHAIN_MODE_LABELS.branches },
|
||||
{ value: 'stop' as const, label: AUTOMATION_CHAIN_MODE_LABELS.stop },
|
||||
];
|
||||
|
||||
const conditionFieldOptions = computed(() =>
|
||||
conditionFields.value.map((f) => ({
|
||||
value: f,
|
||||
label: AUTOMATION_CONDITION_FIELD_LABELS[f],
|
||||
})),
|
||||
);
|
||||
|
||||
const conditionOpOptions = computed(() =>
|
||||
conditionOps.value.map((op) => ({
|
||||
value: op,
|
||||
label: AUTOMATION_CONDITION_OP_LABELS[op],
|
||||
})),
|
||||
);
|
||||
|
||||
const formFieldOptions = computed(() =>
|
||||
formFields.value.map((f) => ({ value: f.key, label: f.label })),
|
||||
);
|
||||
|
||||
const actionOptions = AUTOMATION_ACTIONS.map((a) => ({
|
||||
value: a,
|
||||
label: AUTOMATION_ACTION_LABELS[a],
|
||||
}));
|
||||
|
||||
const activityTypeOptions = activityTypes.map((t) => ({
|
||||
value: t.value,
|
||||
label: t.label,
|
||||
}));
|
||||
|
||||
const activityTypeDefOptions = computed(() => [
|
||||
{ value: '', label: '— بدون نوع سفارشی —' },
|
||||
...props.activityTypeDefs.map((t) => ({ value: t.id, label: t.name })),
|
||||
]);
|
||||
|
||||
const assignModeOptions = computed(() =>
|
||||
assignModes.value.map((m) => ({
|
||||
value: m,
|
||||
label: AUTOMATION_ASSIGN_MODE_LABELS[m],
|
||||
})),
|
||||
);
|
||||
|
||||
const userOptions = computed(() =>
|
||||
props.users.map((u) => ({ value: u.id, label: u.fullName })),
|
||||
);
|
||||
|
||||
const teamOptions = computed(() =>
|
||||
props.teams.map((t) => ({
|
||||
value: t.id,
|
||||
label: `${t.name} (${t.memberCount} نفر)`,
|
||||
})),
|
||||
);
|
||||
|
||||
const notifyUserOptions = computed(() => [
|
||||
{ value: '', label: 'مسئول معامله / تیکت' },
|
||||
...userOptions.value,
|
||||
]);
|
||||
|
||||
const notifyChannelOptions = AUTOMATION_NOTIFY_CHANNELS.map((ch) => ({
|
||||
value: ch,
|
||||
label: AUTOMATION_NOTIFY_CHANNEL_LABELS[ch],
|
||||
}));
|
||||
|
||||
const dueUnitOptions = dueUnits.map((u) => ({ value: u.value, label: u.label }));
|
||||
|
||||
function setAction(step: AutomationStep, action: AutomationAction) {
|
||||
step.kind = 'action';
|
||||
step.action = action;
|
||||
@@ -202,440 +380,273 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="inspector">
|
||||
<a-form layout="vertical" :style="{ marginBottom: 0 }">
|
||||
<template v-if="selected === 'trigger'">
|
||||
<h2>گره محرک</h2>
|
||||
<p class="hint">وقتی این اتفاق بیفتد، زنجیره از راست به چپ اجرا می‌شود.</p>
|
||||
<label>
|
||||
اگر
|
||||
<select v-model="trigger">
|
||||
<optgroup
|
||||
v-for="group in AUTOMATION_TRIGGER_GROUPS"
|
||||
:key="group.label"
|
||||
:label="group.label"
|
||||
>
|
||||
<option v-for="t in group.items" :key="t" :value="t">
|
||||
{{ AUTOMATION_TRIGGER_LABELS[t] }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</label>
|
||||
<label v-if="trigger === 'lead_submitted'">
|
||||
فرم
|
||||
<select v-model="sourceId">
|
||||
<option :value="null">همه فرم‌ها</option>
|
||||
<option v-for="f in forms" :key="f.id" :value="f.id">{{ f.name }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<p v-if="trigger === 'lead_submitted' && !sourceId" class="hint">
|
||||
برای شرط روی پاسخ‌های فرم، یک فرم مشخص را انتخاب کنید.
|
||||
</p>
|
||||
<label v-if="advanced || chainMode === 'branches'">
|
||||
رفتار شرط‌ها
|
||||
<select v-model="chainMode">
|
||||
<option value="branches">{{ AUTOMATION_CHAIN_MODE_LABELS.branches }}</option>
|
||||
<option value="stop">{{ AUTOMATION_CHAIN_MODE_LABELS.stop }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<p v-if="chainMode === 'branches'" class="hint">
|
||||
شاخه‌ها روی بوم موازی نمایش داده می‌شوند و هر کدام جدا بررسی می‌شود. شرط‌های یک شاخه با «و»
|
||||
ترکیب می‌شوند؛ مثلاً اگر دو گزینه تیک بخورد، هر دو شاخه اجرا می‌شود. برای شاخهٔ تازه از
|
||||
دکمهٔ «شاخهٔ جدید» زیر بوم استفاده کنید.
|
||||
</p>
|
||||
<p v-else-if="!advanced" class="hint">
|
||||
اتوماسیون ساده: شرط‌ها پشت‌سرهم بررسی می‌شوند و اولین شرط ناموفق بقیهٔ زنجیره را متوقف
|
||||
می‌کند. اتوماسیون چندشاخه در نسخهٔ حرفه‌ای فعال است.
|
||||
</p>
|
||||
<a-form-item label="اگر" :style="{ marginBottom: `${token.marginSM}px` }">
|
||||
<a-select v-model:value="trigger" :options="triggerOptions" style="width: 100%" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="trigger === 'lead_submitted'"
|
||||
label="فرم"
|
||||
:style="{ marginBottom: `${token.marginSM}px` }"
|
||||
>
|
||||
<a-select v-model:value="sourceIdSelect" :options="formOptions" style="width: 100%" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="advanced || chainMode === 'branches'"
|
||||
label="رفتار شرط‌ها"
|
||||
:style="{ marginBottom: `${token.marginSM}px` }"
|
||||
>
|
||||
<a-select v-model:value="chainMode" :options="chainModeOptions" style="width: 100%" />
|
||||
</a-form-item>
|
||||
<a-alert
|
||||
v-if="trigger === 'lead_submitted' && !sourceId"
|
||||
type="info"
|
||||
show-icon
|
||||
message="برای شرط روی پاسخ فرم، یک فرم مشخص انتخاب کنید."
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else-if="selectedStep && isCondition">
|
||||
<h2>گره شرط</h2>
|
||||
<p class="hint">
|
||||
{{
|
||||
chainMode === 'branches'
|
||||
? 'اگر شرط برقرار نباشد، فقط عمل‌های این شاخه (تا شرط بعدی) اجرا نمی‌شوند.'
|
||||
: 'اگر شرط برقرار نباشد، عمل‌های بعد از این گره اجرا نمی‌شوند.'
|
||||
}}
|
||||
</p>
|
||||
<label>
|
||||
فیلد
|
||||
<select
|
||||
<a-form-item label="فیلد" :style="{ marginBottom: `${token.marginSM}px` }">
|
||||
<a-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>
|
||||
<template v-if="selectedStep.conditionField === 'form_field'">
|
||||
<p v-if="!selectedForm" class="hint warn">
|
||||
ابتدا در گره محرک یک فرم مشخص انتخاب کنید.
|
||||
</p>
|
||||
<label v-else>
|
||||
فیلد فرم
|
||||
<select
|
||||
:value="selectedStep.conditionKey ?? ''"
|
||||
@change="setConditionKey(selectedStep, ($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option value="" disabled>انتخاب فیلد…</option>
|
||||
<option v-for="f in formFields" :key="f.key" :value="f.key">{{ f.label }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</template>
|
||||
<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>
|
||||
:options="conditionFieldOptions"
|
||||
style="width: 100%"
|
||||
@change="onConditionFieldChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="selectedStep.conditionField === 'form_field' && selectedForm"
|
||||
label="فیلد فرم"
|
||||
:style="{ marginBottom: `${token.marginSM}px` }"
|
||||
>
|
||||
<a-select
|
||||
:value="selectedStep.conditionKey ?? undefined"
|
||||
:options="formFieldOptions"
|
||||
placeholder="انتخاب فیلد…"
|
||||
style="width: 100%"
|
||||
@change="onConditionKeyChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="مقایسه" :style="{ marginBottom: `${token.marginSM}px` }">
|
||||
<a-select
|
||||
v-model:value="selectedStep.conditionOp"
|
||||
:options="conditionOpOptions"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="selectedStep.conditionField === 'deal_amount'"
|
||||
label="مبلغ"
|
||||
:style="{ marginBottom: `${token.marginSM}px` }"
|
||||
>
|
||||
<a-input-number v-model:value="dealAmountValue" :min="0" style="width: 100%" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="selectedStep.conditionField === 'ticket_priority'"
|
||||
label="اولویت"
|
||||
:style="{ marginBottom: `${token.marginSM}px` }"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="selectedStep.conditionValue"
|
||||
:options="ticketPriorities"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-alert
|
||||
v-if="selectedStep.conditionField === 'form_field' && !selectedForm"
|
||||
type="warning"
|
||||
show-icon
|
||||
message="ابتدا در گره محرک یک فرم مشخص انتخاب کنید."
|
||||
/>
|
||||
<template v-if="selectedStep.conditionField === 'form_field' && needsConditionValue">
|
||||
<div v-if="conditionFormField?.options?.length" class="user-picks">
|
||||
<p class="field-label">گزینه‌ها (یک یا چند مورد)</p>
|
||||
<label v-for="o in conditionFormField.options" :key="o" class="ch">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="formConditionValues(selectedStep).includes(o)"
|
||||
@change="toggleConditionValue(selectedStep, o, ($event.target as HTMLInputElement).checked)"
|
||||
/>
|
||||
{{ o }}
|
||||
</label>
|
||||
<p v-if="formConditionValues(selectedStep).length > 1" class="hint">
|
||||
<a-form-item
|
||||
v-if="conditionFormField?.options?.length"
|
||||
label="گزینه‌ها"
|
||||
:style="{ marginBottom: `${token.marginSM}px` }"
|
||||
>
|
||||
<a-checkbox-group
|
||||
:value="formConditionValues(selectedStep)"
|
||||
:options="conditionFormField.options.map((o) => ({ value: o, label: o }))"
|
||||
@change="onFormOptionValuesChange"
|
||||
/>
|
||||
<a-typography-text
|
||||
v-if="formConditionValues(selectedStep).length > 1"
|
||||
type="secondary"
|
||||
:style="{ display: 'block', marginTop: `${token.marginXXS}px` }"
|
||||
>
|
||||
{{ multiValueHint(selectedStep.conditionOp) }}
|
||||
</p>
|
||||
</div>
|
||||
<label v-else>
|
||||
مقدار
|
||||
<input v-model.trim="selectedStep.conditionValue" type="text" maxlength="200" />
|
||||
</label>
|
||||
</a-typography-text>
|
||||
</a-form-item>
|
||||
<a-form-item v-else label="مقدار" :style="{ marginBottom: `${token.marginSM}px` }">
|
||||
<a-input v-model:value="formTextValue" :maxlength="200" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-else-if="selectedStep">
|
||||
<h2>گره عمل</h2>
|
||||
<p class="hint">بعد از محرک (و شرط‌ها)، این کار به ترتیب انجام می‌شود.</p>
|
||||
<label>
|
||||
آنگاه
|
||||
<select
|
||||
<a-form-item label="آنگاه" :style="{ marginBottom: `${token.marginSM}px` }">
|
||||
<a-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"
|
||||
:options="actionOptions"
|
||||
style="width: 100%"
|
||||
@change="onActionChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="عنوان" :style="{ marginBottom: `${token.marginSM}px` }">
|
||||
<a-input
|
||||
v-model:value="selectedStep.title"
|
||||
:maxlength="200"
|
||||
placeholder="اختیاری"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
توضیح / متن پیام
|
||||
<textarea
|
||||
v-model="selectedStep.body"
|
||||
rows="3"
|
||||
maxlength="1000"
|
||||
</a-form-item>
|
||||
<a-form-item label="توضیح / متن" :style="{ marginBottom: `${token.marginSM}px` }">
|
||||
<a-textarea
|
||||
v-model:value="selectedStep.body"
|
||||
:rows="2"
|
||||
:maxlength="1000"
|
||||
placeholder="اختیاری"
|
||||
/>
|
||||
</label>
|
||||
</a-form-item>
|
||||
|
||||
<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>
|
||||
<template v-if="selectedStep.action === 'create_activity'">
|
||||
<label v-if="activityTypeDefs.length">
|
||||
نوع سفارشی (اختیاری)
|
||||
<select v-model="selectedStep.activityTypeDefId">
|
||||
<option :value="null">— بدون نوع سفارشی —</option>
|
||||
<option v-for="t in activityTypeDefs" :key="t.id" :value="t.id">{{ t.name }}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
تخصیص به
|
||||
<select v-model="selectedStep.assignMode">
|
||||
<option v-for="m in assignModes" :key="m" :value="m">
|
||||
{{ AUTOMATION_ASSIGN_MODE_LABELS[m] }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label v-if="selectedStep.assignMode === 'user'">
|
||||
کاربر
|
||||
<select v-model="selectedStep.assigneeId">
|
||||
<option :value="null" disabled>انتخاب کاربر…</option>
|
||||
<option v-for="u in users" :key="u.id" :value="u.id">{{ u.fullName }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<template v-else-if="selectedStep.assignMode === 'team_round_robin'">
|
||||
<label>
|
||||
تیم
|
||||
<select v-model="selectedStep.assigneeTeamId">
|
||||
<option :value="null" disabled>انتخاب تیم…</option>
|
||||
<option v-for="t in teams" :key="t.id" :value="t.id">
|
||||
{{ t.name }} ({{ t.memberCount }} نفر)
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<p v-if="!teams.length" class="hint warn">
|
||||
هنوز تیمی تعریف نشده؛ از «تنظیمات ← تیم‌ها و سطح دسترسی» بسازید.
|
||||
</p>
|
||||
</template>
|
||||
<div v-else-if="selectedStep.assignMode === 'users_round_robin'" class="user-picks">
|
||||
<p class="field-label">کاربران</p>
|
||||
<label v-for="u in users" :key="u.id" class="ch">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="(selectedStep.assigneeUserIds ?? []).includes(u.id)"
|
||||
@change="toggleUser(selectedStep, u.id, ($event.target as HTMLInputElement).checked)"
|
||||
/>
|
||||
{{ u.fullName }}
|
||||
</label>
|
||||
</div>
|
||||
<p
|
||||
v-if="selectedStep.assignMode === 'team_round_robin' || selectedStep.assignMode === 'users_round_robin'"
|
||||
class="hint"
|
||||
<a-form-item label="نوع فعالیت" :style="{ marginBottom: `${token.marginSM}px` }">
|
||||
<a-select
|
||||
v-model:value="selectedStep.activityType"
|
||||
:options="activityTypeOptions"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="activityTypeDefs.length"
|
||||
label="نوع سفارشی"
|
||||
:style="{ marginBottom: `${token.marginSM}px` }"
|
||||
>
|
||||
هر بار نفر بعدی به نوبت انتخاب می‌شود تا کارها مساوی تقسیم شوند.
|
||||
</p>
|
||||
|
||||
<div class="due">
|
||||
<label>
|
||||
موعد
|
||||
<select
|
||||
:value="dueUnitOf(selectedStep)"
|
||||
@change="
|
||||
setDue(
|
||||
selectedStep,
|
||||
($event.target as HTMLSelectElement).value as DueUnit,
|
||||
dueAmountOf(selectedStep) || 1,
|
||||
)
|
||||
"
|
||||
<a-select
|
||||
:value="nullableId(selectedStep.activityTypeDefId)"
|
||||
:options="activityTypeDefOptions"
|
||||
style="width: 100%"
|
||||
@change="onActivityTypeDefChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="تخصیص به" :style="{ marginBottom: `${token.marginSM}px` }">
|
||||
<a-select
|
||||
v-model:value="selectedStep.assignMode"
|
||||
:options="assignModeOptions"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="selectedStep.assignMode === 'user'"
|
||||
label="کاربر"
|
||||
:style="{ marginBottom: `${token.marginSM}px` }"
|
||||
>
|
||||
<a-select
|
||||
:value="nullableId(selectedStep.assigneeId)"
|
||||
:options="userOptions"
|
||||
placeholder="انتخاب کاربر…"
|
||||
style="width: 100%"
|
||||
@change="onAssigneeIdChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-else-if="selectedStep.assignMode === 'team_round_robin'"
|
||||
label="تیم"
|
||||
:style="{ marginBottom: `${token.marginSM}px` }"
|
||||
>
|
||||
<a-select
|
||||
:value="nullableId(selectedStep.assigneeTeamId)"
|
||||
:options="teamOptions"
|
||||
placeholder="انتخاب تیم…"
|
||||
style="width: 100%"
|
||||
@change="onAssigneeTeamIdChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="selectedStep.assignMode === 'users_round_robin'"
|
||||
label="کاربران"
|
||||
:style="{ marginBottom: `${token.marginSM}px` }"
|
||||
>
|
||||
<a-flex vertical :gap="token.marginXXS">
|
||||
<a-checkbox
|
||||
v-for="u in users"
|
||||
:key="u.id"
|
||||
:checked="(selectedStep.assigneeUserIds ?? []).includes(u.id)"
|
||||
@change="onUserCheck(selectedStep, u.id, $event)"
|
||||
>
|
||||
<option v-for="u in dueUnits" :key="u.value" :value="u.value">{{ u.label }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label v-if="dueUnitOf(selectedStep) !== 'now'">
|
||||
تعداد
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
:value="dueAmountOf(selectedStep)"
|
||||
@input="
|
||||
setDue(
|
||||
selectedStep,
|
||||
dueUnitOf(selectedStep),
|
||||
Number(($event.target as HTMLInputElement).value),
|
||||
)
|
||||
"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
{{ u.fullName }}
|
||||
</a-checkbox>
|
||||
</a-flex>
|
||||
</a-form-item>
|
||||
<a-form-item label="موعد" :style="{ marginBottom: `${token.marginSM}px` }">
|
||||
<a-select
|
||||
:value="dueUnitOf(selectedStep)"
|
||||
:options="dueUnitOptions"
|
||||
style="width: 100%"
|
||||
@change="onDueUnitChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="dueUnitOf(selectedStep) !== 'now'"
|
||||
label="تعداد"
|
||||
:style="{ marginBottom: `${token.marginSM}px` }"
|
||||
>
|
||||
<a-input-number
|
||||
:min="1"
|
||||
:value="dueAmountOf(selectedStep)"
|
||||
style="width: 100%"
|
||||
@change="onDueAmountChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-alert
|
||||
v-if="selectedStep.assignMode === 'team_round_robin' && !teams.length"
|
||||
type="warning"
|
||||
show-icon
|
||||
message="هنوز تیمی تعریف نشده."
|
||||
/>
|
||||
</template>
|
||||
<p v-if="selectedStep.action === 'create_activity' || selectedStep.action === 'create_notification'" class="hint">
|
||||
در عنوان و متن می‌توانید از
|
||||
<code v-pre>{{title}}</code>، <code v-pre>{{mobile}}</code>، <code v-pre>{{form}}</code> و
|
||||
<code v-pre>{{field.کلید}}</code> استفاده کنید.
|
||||
<template v-if="formFields.length">
|
||||
کلیدها:
|
||||
<span v-for="(f, i) in formFields" :key="f.key">
|
||||
<code>{{ f.key }}</code> ({{ f.label }})<template v-if="i < formFields.length - 1">، </template>
|
||||
</span>
|
||||
</template>
|
||||
</p>
|
||||
|
||||
<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"
|
||||
<a-form-item label="نحوه ارسال" :style="{ marginBottom: `${token.marginSM}px` }">
|
||||
<a-radio-group
|
||||
v-model:value="selectedStep.notifyChannel"
|
||||
:options="notifyChannelOptions"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="گیرنده" :style="{ marginBottom: `${token.marginSM}px` }">
|
||||
<a-select
|
||||
v-model:value="selectedStep.notifyTarget"
|
||||
:options="[
|
||||
{ value: 'staff', label: 'کاربر تیم' },
|
||||
{ value: 'person', label: 'مخاطب معامله / تیکت' },
|
||||
]"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="selectedStep.notifyTarget !== 'person'"
|
||||
label="کاربر"
|
||||
:style="{ marginBottom: `${token.marginSM}px` }"
|
||||
>
|
||||
پیامک به موبایل همان کاربر ارسال می‌شود.
|
||||
</p>
|
||||
<a-select
|
||||
:value="nullableId(selectedStep.notifyUserId)"
|
||||
:options="notifyUserOptions"
|
||||
style="width: 100%"
|
||||
@change="onNotifyUserIdChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<label v-if="selectedStep.action === 'add_loyalty_points'">
|
||||
امتیاز
|
||||
<input v-model.number="selectedStep.points" type="number" min="1" />
|
||||
</label>
|
||||
<a-form-item
|
||||
v-if="selectedStep.action === 'add_loyalty_points'"
|
||||
label="امتیاز"
|
||||
:style="{ marginBottom: `${token.marginSM}px` }"
|
||||
>
|
||||
<a-input-number v-model:value="selectedStep.points" :min="1" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<p v-else class="hint">یک گره را از بوم انتخاب کنید.</p>
|
||||
</aside>
|
||||
<a-typography-text v-else type="secondary">یک گره را از بوم انتخاب کنید.</a-typography-text>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.inspector {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
align-content: start;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: var(--radius);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.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;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.55rem 0.7rem;
|
||||
font: inherit;
|
||||
color: #0f172a;
|
||||
background: #fff;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.hint.warn {
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.hint code {
|
||||
font-size: 0.76rem;
|
||||
background: #f1f5f9;
|
||||
border-radius: 4px;
|
||||
padding: 0 0.25rem;
|
||||
direction: ltr;
|
||||
unicode-bidi: embed;
|
||||
}
|
||||
|
||||
.user-picks {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
max-height: 12rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.due {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.5rem;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.due input {
|
||||
width: 5.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import { computed, type Component } from 'vue';
|
||||
import {
|
||||
BellOutlined,
|
||||
DeleteOutlined,
|
||||
FilterOutlined,
|
||||
FlagOutlined,
|
||||
GiftOutlined,
|
||||
} from '@/icons/ant-bridge';
|
||||
import { isAutomationCondition, type AutomationStep } from '@mento/shared';
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -15,11 +21,11 @@ const emit = defineEmits<{ select: []; remove: [] }>();
|
||||
|
||||
const isCondition = computed(() => isAutomationCondition(props.step));
|
||||
|
||||
const icon = computed(() => {
|
||||
if (isCondition.value) return 'filter';
|
||||
if (props.step.action === 'create_notification') return 'bell';
|
||||
if (props.step.action === 'add_loyalty_points') return 'gift';
|
||||
return 'flag';
|
||||
const icon = computed((): Component => {
|
||||
if (isCondition.value) return FilterOutlined;
|
||||
if (props.step.action === 'create_notification') return BellOutlined;
|
||||
if (props.step.action === 'add_loyalty_points') return GiftOutlined;
|
||||
return FlagOutlined;
|
||||
});
|
||||
|
||||
const kindClass = computed(() =>
|
||||
@@ -36,7 +42,7 @@ const kindClass = computed(() =>
|
||||
@click="emit('select')"
|
||||
>
|
||||
<span class="icon">
|
||||
<UiIcon :name="icon" :size="18" />
|
||||
<component :is="icon" />
|
||||
</span>
|
||||
<span class="copy">
|
||||
<span class="kind">{{ isCondition ? 'شرط' : 'آنگاه' }}</span>
|
||||
@@ -51,7 +57,7 @@ const kindClass = computed(() =>
|
||||
title="حذف"
|
||||
@click.stop="emit('remove')"
|
||||
>
|
||||
<UiIcon name="trash" :size="14" />
|
||||
<DeleteOutlined />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -125,6 +131,7 @@ const kindClass = computed(() =>
|
||||
flex-shrink: 0;
|
||||
color: #0f766e;
|
||||
background: #ecfdf8;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.node.create_notification .icon {
|
||||
@@ -184,6 +191,7 @@ em {
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.node-wrap:hover .trash,
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Empty as AEmpty } from 'ant-design-vue';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
import type { HomeDashboardActivityTypeDto } from '@mento/shared';
|
||||
import UiChart, { type UiChartOption } from '@/components/ui/UiChart.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
items: HomeDashboardActivityTypeDto[];
|
||||
}>();
|
||||
|
||||
const rows = computed(() => props.items);
|
||||
const hasData = computed(() => rows.value.some((r) => r.count > 0));
|
||||
const total = computed(() => rows.value.reduce((a, r) => a + r.count, 0));
|
||||
|
||||
const option = computed<UiChartOption>(() => ({
|
||||
animationDuration: 400,
|
||||
grid: { top: 28, right: 8, bottom: 28, left: 8, containLabel: true },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: 'IRANSans, Tahoma, sans-serif' },
|
||||
formatter: (params) => {
|
||||
const row = Array.isArray(params) ? params[0] : params;
|
||||
const point = rows.value[row.dataIndex ?? 0];
|
||||
if (!point) return '';
|
||||
return `${point.label}<br/>${toFaDigits(point.count)} فعالیت باز`;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: rows.value.map((r) => r.label),
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#94a3b8',
|
||||
fontFamily: 'IRANSans, Tahoma, sans-serif',
|
||||
fontSize: 11,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
minInterval: 1,
|
||||
...(hasData.value ? {} : { max: 1 }),
|
||||
splitLine: { lineStyle: { color: '#e5e7eb', type: 'dashed' } },
|
||||
axisLabel: { show: false },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: rows.value.map((r) => r.count),
|
||||
barMaxWidth: 36,
|
||||
itemStyle: {
|
||||
color: '#14b8a6',
|
||||
borderRadius: [8, 8, 0, 0],
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#0f172a',
|
||||
fontWeight: 700,
|
||||
fontFamily: 'IRANSans, Tahoma, sans-serif',
|
||||
formatter: (p) => toFaDigits(Number(p.value ?? 0)),
|
||||
},
|
||||
},
|
||||
],
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm h-full">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="font-bold text-slate-800 text-base">ترکیب فعالیت‌های باز</h3>
|
||||
<span v-if="hasData" class="text-xs text-slate-400">{{ toFaDigits(total) }} مورد</span>
|
||||
</div>
|
||||
<a-empty v-if="!hasData" description="فعالیت بازی نیست" />
|
||||
<div v-else class="h-56">
|
||||
<UiChart :option="option" height="224px" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -2,13 +2,30 @@
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { RouterLink } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import {
|
||||
Alert as AAlert,
|
||||
Button as AButton,
|
||||
Card as ACard,
|
||||
Col as ACol,
|
||||
Divider as ADivider,
|
||||
Flex as AFlex,
|
||||
Form as AForm,
|
||||
Input as AInput,
|
||||
Modal as AModal,
|
||||
Row as ARow,
|
||||
Select as ASelect,
|
||||
Space as ASpace,
|
||||
Tag as ATag,
|
||||
Typography,
|
||||
theme,
|
||||
} from 'ant-design-vue';
|
||||
import MentoAiAvatar from '@/components/brand/MentoAiAvatar.vue';
|
||||
import VoiceToTextButton from '@/components/VoiceToTextButton.vue';
|
||||
import JalaliDateInput from '@/components/JalaliDateInput.vue';
|
||||
import { formatLocalDateTimeInput, rewriteGregorianDates } from '@/lib/jalali';
|
||||
import { UiButton, UiModal } from '@/components/ui';
|
||||
import { api } from '@/lib/api';
|
||||
import { brand, type ActivityType, type AskMentoSourceDto, type PersonDto, type VoiceCommandDraft } from '@mento/shared';
|
||||
import { brand, type AskMentoSourceDto, type PersonDto, type VoiceCommandDraft } from '@mento/shared';
|
||||
import { LinkOutlined } from '@/icons/ant-bridge';
|
||||
|
||||
const props = defineProps<{
|
||||
askQuery: string;
|
||||
@@ -26,11 +43,53 @@ const emit = defineEmits<{
|
||||
notice: [value: { error: string; done: string }];
|
||||
}>();
|
||||
|
||||
const { Text: ATypographyText, Paragraph: ATypographyParagraph, Title: ATypographyTitle } = Typography;
|
||||
const { token } = theme.useToken();
|
||||
|
||||
const AFormItem = AForm.Item;
|
||||
const ATextarea = AInput.TextArea;
|
||||
|
||||
type AnswerMetric = { label: string; value: string };
|
||||
|
||||
const answerText = computed(() => rewriteGregorianDates(props.answer || '').trim());
|
||||
|
||||
/** وقتی پاسخ شبیه «برچسب: مقدار» است، به‌صورت کارت متریک نشان بده */
|
||||
const answerMetrics = computed((): AnswerMetric[] | null => {
|
||||
const text = answerText.value;
|
||||
if (!text) return null;
|
||||
|
||||
const linePairs = text
|
||||
.split(/\n+/)
|
||||
.map((l) => l.trim())
|
||||
.filter(Boolean)
|
||||
.map((line) => {
|
||||
const m = line.match(/^([^:：]+)\s*[:：]\s*(.+)$/);
|
||||
return m ? { label: m[1].trim(), value: m[2].trim() } : null;
|
||||
});
|
||||
|
||||
if (linePairs.length >= 1 && linePairs.every(Boolean)) {
|
||||
return linePairs as AnswerMetric[];
|
||||
}
|
||||
|
||||
const inline = [...text.matchAll(/([^:：\n]+?)\s*[:：]\s*([۰-۹0-9٪%.,+\-]+)/g)].map((m) => ({
|
||||
label: m[1].trim(),
|
||||
value: m[2].trim(),
|
||||
}));
|
||||
return inline.length >= 2 ? inline : null;
|
||||
});
|
||||
|
||||
const shortcuts = [
|
||||
{ label: 'معاملات باز و در خطر را بگو', icon: 'warning' as const },
|
||||
{ label: 'فعالیت‌های عقب‌افتاده چیست؟', icon: 'calendar' as const },
|
||||
{ label: 'مهم‌ترین پیگیری امروز چیست؟', icon: 'send' as const },
|
||||
{ label: 'خلاصه وضعیت فروش را بده', icon: 'chart' as const },
|
||||
{ label: 'معاملات در خطر', prompt: 'معاملات باز و در خطر را بگو' },
|
||||
{ label: 'عقب‌افتاده‌ها', prompt: 'فعالیت‌های عقب‌افتاده چیست؟' },
|
||||
{ label: 'پیگیری امروز', prompt: 'مهم‌ترین پیگیری امروز چیست؟' },
|
||||
{ label: 'خلاصه فروش', prompt: 'خلاصه وضعیت فروش را بده' },
|
||||
];
|
||||
|
||||
const activityTypeOptions = [
|
||||
{ value: 'call', label: 'تماس' },
|
||||
{ value: 'meeting', label: 'جلسه' },
|
||||
{ value: 'task', label: 'کار' },
|
||||
{ value: 'note', label: 'یادداشت' },
|
||||
];
|
||||
|
||||
function sourceTo(source: AskMentoSourceDto) {
|
||||
@@ -45,13 +104,6 @@ function pick(label: string) {
|
||||
emit('ask', label);
|
||||
}
|
||||
|
||||
const ACTIVITY_LABEL: Record<ActivityType, string> = {
|
||||
call: 'تماس',
|
||||
meeting: 'جلسه',
|
||||
task: 'کار',
|
||||
note: 'یادداشت',
|
||||
};
|
||||
|
||||
const voiceBuf = ref('');
|
||||
const voiceBusy = ref(false);
|
||||
const voiceError = ref('');
|
||||
@@ -60,6 +112,13 @@ const draft = ref<VoiceCommandDraft | null>(null);
|
||||
const confirming = ref(false);
|
||||
const answerOpen = ref(false);
|
||||
|
||||
const draftOpen = computed({
|
||||
get: () => Boolean(draft.value && draft.value.intent !== 'none'),
|
||||
set: (open: boolean) => {
|
||||
if (!open) cancelDraft();
|
||||
},
|
||||
});
|
||||
|
||||
function apiMessage(e: unknown, fallback: string) {
|
||||
if (!axios.isAxiosError(e)) return fallback;
|
||||
const msg = (e.response?.data as { message?: string | string[] })?.message;
|
||||
@@ -272,12 +331,43 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article id="home-ai-assistant" class="panel">
|
||||
<header class="panel-head">
|
||||
<h2>
|
||||
<span class="spark"><UiIcon name="sparkle" :size="15" /></span>
|
||||
{{ brand.aiNameFa }}
|
||||
</h2>
|
||||
<section id="home-ai-assistant" class="home-ai">
|
||||
<div class="home-ai__pattern" aria-hidden="true" />
|
||||
<div class="home-ai__orb home-ai__orb--a" aria-hidden="true" />
|
||||
<div class="home-ai__orb home-ai__orb--b" aria-hidden="true" />
|
||||
|
||||
<header class="home-ai__head">
|
||||
<div class="home-ai__identity">
|
||||
<div class="home-ai__avatar">
|
||||
<MentoAiAvatar :size="42" :show-bubble="false" />
|
||||
</div>
|
||||
<div class="home-ai__titles min-w-0">
|
||||
<h3>{{ brand.aiNameFa }}</h3>
|
||||
<p>همراه هوشمند کسب‌وکار شما</p>
|
||||
</div>
|
||||
</div>
|
||||
<a-tag color="success" class="!m-0 shrink-0">هوش مصنوعی</a-tag>
|
||||
</header>
|
||||
|
||||
<div class="home-ai__tip">
|
||||
<template v-if="answer">{{ answer }}</template>
|
||||
<template v-else-if="error">{{ error }}</template>
|
||||
<template v-else>
|
||||
<strong>پیشنهاد هوشمند امروز:</strong>
|
||||
از پیشنهادهای سریع استفاده کنید یا پرسش خود را بنویسید.
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="home-ai__composer">
|
||||
<a-input
|
||||
:value="askQuery"
|
||||
:placeholder="brand.askPlaceholderFa"
|
||||
:bordered="false"
|
||||
:disabled="asking || voiceBusy || confirming"
|
||||
class="home-ai__input"
|
||||
@update:value="emit('update:askQuery', $event)"
|
||||
@press-enter="onTypedSubmit"
|
||||
/>
|
||||
<VoiceToTextButton
|
||||
variant="toolbar"
|
||||
hide-error
|
||||
@@ -286,322 +376,526 @@ watch(
|
||||
@recording="onVoiceRecording"
|
||||
@error="voiceError = $event"
|
||||
/>
|
||||
</header>
|
||||
|
||||
<p class="ai-lead">چه کمکی می‌تونم بکنم؟</p>
|
||||
|
||||
<div class="ai-shortcuts">
|
||||
<button
|
||||
v-for="item in shortcuts"
|
||||
:key="item.label"
|
||||
class="ai-chip"
|
||||
type="button"
|
||||
:disabled="asking"
|
||||
@click="pick(item.label)"
|
||||
>
|
||||
<span class="chip-ico"><UiIcon :name="item.icon" :size="14" /></span>
|
||||
<span>{{ item.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="voiceBusy" class="ai-answer"><p>در حال فهمیدن دستور…</p></div>
|
||||
<div v-else-if="confirming" class="ai-answer"><p>در حال ثبت…</p></div>
|
||||
<div v-else-if="voiceDone" class="ai-answer"><p>{{ voiceDone }}</p></div>
|
||||
<p v-else-if="voiceError" class="ai-error">{{ voiceError }}</p>
|
||||
<p v-else-if="error" class="ai-error">{{ error }}</p>
|
||||
<div v-else-if="asking" class="ai-answer">
|
||||
<p>در حال پاسخ…</p>
|
||||
</div>
|
||||
|
||||
<form class="ai-input" @submit.prevent="onTypedSubmit">
|
||||
<input
|
||||
:value="askQuery"
|
||||
type="search"
|
||||
:placeholder="brand.askPlaceholderFa"
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="asking || voiceBusy || confirming"
|
||||
@input="emit('update:askQuery', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<button type="submit" aria-label="ارسال" :disabled="asking || voiceBusy || confirming">
|
||||
<UiIcon name="send" :size="15" />
|
||||
</button>
|
||||
</form>
|
||||
:loading="asking || voiceBusy"
|
||||
aria-label="ارسال"
|
||||
@click="onTypedSubmit"
|
||||
>
|
||||
بپرس
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<UiModal
|
||||
:open="Boolean(draft && draft.intent !== 'none')"
|
||||
:title="draft?.intent === 'create_person' ? 'تأیید ساخت مشتری' : 'تأیید ثبت فعالیت'"
|
||||
@close="cancelDraft"
|
||||
>
|
||||
<p v-if="draft" class="modal-lead">{{ rewriteGregorianDates(draft.summary) }}</p>
|
||||
<p class="edit-hint">قبل از تأیید می‌توانید متن را اصلاح کنید.</p>
|
||||
<div v-if="draft?.person" class="modal-fields">
|
||||
<label>نام <input v-model="draft.person.firstName" @input="onPersonNameEdit" /></label>
|
||||
<label>نام خانوادگی <input v-model="draft.person.lastName" /></label>
|
||||
<label>موبایل <input v-model="draft.person.mobile" dir="ltr" /></label>
|
||||
<label>تلفن <input v-model="draft.person.phone" dir="ltr" /></label>
|
||||
<label>ایمیل <input v-model="draft.person.email" dir="ltr" /></label>
|
||||
<label>وب‌سایت <input v-model="draft.person.website" dir="ltr" /></label>
|
||||
<label>معرف <input v-model="draft.person.referrer" /></label>
|
||||
<label>سمت <input v-model="draft.person.position" /></label>
|
||||
<label>یادداشت <textarea v-model="draft.person.notes" rows="2" /></label>
|
||||
</div>
|
||||
<div v-else-if="draft?.activity" class="modal-fields">
|
||||
<label>عنوان <input v-model="draft.activity.title" @input="onActivityTitleEdit" /></label>
|
||||
<label>
|
||||
نوع
|
||||
<select v-model="draft.activity.type">
|
||||
<option v-for="(label, key) in ACTIVITY_LABEL" :key="key" :value="key">{{ label }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
زمان
|
||||
<JalaliDateInput :model-value="dueLocal" mode="datetime" @update:model-value="onDueLocal" />
|
||||
</label>
|
||||
<label>
|
||||
مشتری
|
||||
<input v-model="draft.activity.personName" @input="onActivityPersonEdit" @change="rematchActivityPerson" />
|
||||
</label>
|
||||
<p v-if="draft.activity.personName && !draft.activity.personId" class="warn">
|
||||
در فهرست مشتریان پرونده‌ای با این نام پیدا نشد. فعالیت ذخیره می‌شود، ولی داخل پروندهٔ آن شخص دیده نمی‌شود.
|
||||
</p>
|
||||
<label>توضیح <textarea v-model="draft.activity.description" rows="2" /></label>
|
||||
</div>
|
||||
<p v-if="draft?.missing.length" class="ai-error">ناقص است: {{ draft.missing.join('، ') }}</p>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" :disabled="confirming" @click="cancelDraft">انصراف</UiButton>
|
||||
<UiButton variant="primary" :disabled="!draft?.canConfirm || confirming" :loading="confirming" @click="confirmDraft">
|
||||
تأیید و انجام
|
||||
</UiButton>
|
||||
</template>
|
||||
</UiModal>
|
||||
|
||||
<UiModal :open="answerOpen && Boolean(answer)" title="پاسخ دستیار" @close="closeAnswer">
|
||||
<p class="modal-lead answer-body">{{ rewriteGregorianDates(answer || '') }}</p>
|
||||
<div v-if="sources?.length" class="sources">
|
||||
<RouterLink
|
||||
v-for="source in sources"
|
||||
:key="`${source.type}-${source.id}`"
|
||||
:to="sourceTo(source)"
|
||||
@click="closeAnswer"
|
||||
<div class="home-ai__chips">
|
||||
<span class="home-ai__chips-label">پیشنهادهای سریع</span>
|
||||
<div class="home-ai__chip-list">
|
||||
<button
|
||||
v-for="item in shortcuts"
|
||||
:key="item.label"
|
||||
type="button"
|
||||
class="home-ai__chip"
|
||||
:disabled="asking"
|
||||
@click="pick(item.prompt)"
|
||||
>
|
||||
{{ source.label }}
|
||||
</RouterLink>
|
||||
{{ item.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="voiceBusy || confirming || voiceDone || voiceError" class="home-ai__status">
|
||||
<a-alert v-if="voiceBusy" type="info" show-icon message="در حال فهمیدن دستور…" />
|
||||
<a-alert v-else-if="confirming" type="info" show-icon message="در حال ثبت…" />
|
||||
<a-alert v-else-if="voiceDone" type="success" show-icon :message="voiceDone" />
|
||||
<a-alert v-else-if="voiceError" type="error" show-icon :message="voiceError" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<a-modal
|
||||
v-model:open="draftOpen"
|
||||
:title="draft?.intent === 'create_person' ? 'تأیید ساخت مشتری' : 'تأیید ثبت فعالیت'"
|
||||
destroy-on-close
|
||||
@cancel="cancelDraft"
|
||||
>
|
||||
<a-typography-paragraph v-if="draft">
|
||||
{{ rewriteGregorianDates(draft.summary) }}
|
||||
</a-typography-paragraph>
|
||||
<a-typography-text type="secondary">قبل از تأیید می‌توانید متن را اصلاح کنید.</a-typography-text>
|
||||
|
||||
<a-form v-if="draft?.person" layout="vertical" style="margin-top: 16px">
|
||||
<a-row :gutter="[16, 0]">
|
||||
<a-col :xs="24" :md="12">
|
||||
<a-form-item label="نام">
|
||||
<a-input v-model:value="draft.person.firstName" @update:value="onPersonNameEdit" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="12">
|
||||
<a-form-item label="نام خانوادگی">
|
||||
<a-input v-model:value="draft.person.lastName" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="12">
|
||||
<a-form-item label="موبایل">
|
||||
<a-input v-model:value="draft.person.mobile" dir="ltr" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="12">
|
||||
<a-form-item label="تلفن">
|
||||
<a-input v-model:value="draft.person.phone" dir="ltr" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="12">
|
||||
<a-form-item label="ایمیل">
|
||||
<a-input v-model:value="draft.person.email" dir="ltr" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="12">
|
||||
<a-form-item label="وب‌سایت">
|
||||
<a-input v-model:value="draft.person.website" dir="ltr" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="12">
|
||||
<a-form-item label="معرف">
|
||||
<a-input v-model:value="draft.person.referrer" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="12">
|
||||
<a-form-item label="سمت">
|
||||
<a-input v-model:value="draft.person.position" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="یادداشت">
|
||||
<a-textarea v-model:value="draft.person.notes" :rows="2" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
|
||||
<a-form v-else-if="draft?.activity" layout="vertical" style="margin-top: 16px">
|
||||
<a-row :gutter="[16, 0]">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="عنوان">
|
||||
<a-input v-model:value="draft.activity.title" @update:value="onActivityTitleEdit" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="12">
|
||||
<a-form-item label="نوع">
|
||||
<a-select
|
||||
v-model:value="draft.activity.type"
|
||||
:options="activityTypeOptions"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="12">
|
||||
<a-form-item label="زمان">
|
||||
<JalaliDateInput :model-value="dueLocal" mode="datetime" @update:model-value="onDueLocal" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="مشتری">
|
||||
<a-input
|
||||
v-model:value="draft.activity.personName"
|
||||
@update:value="onActivityPersonEdit"
|
||||
@blur="rematchActivityPerson"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-alert
|
||||
v-if="draft.activity.personName && !draft.activity.personId"
|
||||
type="warning"
|
||||
show-icon
|
||||
message="در فهرست مشتریان پرونده‌ای با این نام پیدا نشد. فعالیت ذخیره می‌شود، ولی داخل پروندهٔ آن شخص دیده نمی‌شود."
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="توضیح">
|
||||
<a-textarea v-model:value="draft.activity.description" :rows="2" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
|
||||
<a-alert
|
||||
v-if="draft?.missing.length"
|
||||
type="error"
|
||||
show-icon
|
||||
:message="`ناقص است: ${draft.missing.join('، ')}`"
|
||||
style="margin-top: 12px"
|
||||
/>
|
||||
|
||||
<template #footer>
|
||||
<UiButton variant="primary" @click="closeAnswer">بستن</UiButton>
|
||||
<a-button :disabled="confirming" @click="cancelDraft">انصراف</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!draft?.canConfirm || confirming"
|
||||
:loading="confirming"
|
||||
@click="confirmDraft"
|
||||
>
|
||||
تأیید و انجام
|
||||
</a-button>
|
||||
</template>
|
||||
</UiModal>
|
||||
</article>
|
||||
</a-modal>
|
||||
|
||||
<a-modal
|
||||
v-model:open="answerOpen"
|
||||
:width="560"
|
||||
centered
|
||||
destroy-on-close
|
||||
:body-style="{ paddingTop: `${token.paddingSM}px` }"
|
||||
@cancel="closeAnswer"
|
||||
>
|
||||
<template #title>
|
||||
<a-flex align="center" :gap="token.marginSM">
|
||||
<div
|
||||
:style="{
|
||||
width: '44px',
|
||||
height: '44px',
|
||||
borderRadius: '999px',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: `linear-gradient(145deg, ${token.colorSuccessBg}, ${token.colorBgContainer})`,
|
||||
border: `1px solid ${token.colorBorderSecondary}`,
|
||||
overflow: 'hidden',
|
||||
flexShrink: 0,
|
||||
}"
|
||||
>
|
||||
<MentoAiAvatar :size="36" :show-bubble="false" />
|
||||
</div>
|
||||
<a-flex vertical :gap="0">
|
||||
<a-typography-text strong :style="{ fontSize: `${token.fontSizeLG}px`, lineHeight: 1.3 }">
|
||||
پاسخ دستیار
|
||||
</a-typography-text>
|
||||
<a-typography-text type="secondary" :style="{ fontSize: `${token.fontSizeSM}px` }">
|
||||
{{ brand.aiNameFa }}
|
||||
</a-typography-text>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</template>
|
||||
|
||||
<a-flex vertical :gap="token.margin">
|
||||
<a-row v-if="answerMetrics?.length" :gutter="[token.marginSM, token.marginSM]">
|
||||
<a-col
|
||||
v-for="(metric, idx) in answerMetrics"
|
||||
:key="`${metric.label}-${idx}`"
|
||||
:xs="24"
|
||||
:sm="answerMetrics.length === 1 ? 24 : 12"
|
||||
>
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:style="{
|
||||
background: token.colorFillAlter,
|
||||
borderRadius: `${token.borderRadiusLG}px`,
|
||||
boxShadow: `inset 0 0 0 1px ${token.colorBorderSecondary}`,
|
||||
}"
|
||||
>
|
||||
<a-flex vertical :gap="token.paddingXXS">
|
||||
<a-typography-text type="secondary" :style="{ fontSize: `${token.fontSizeSM}px` }">
|
||||
{{ metric.label }}
|
||||
</a-typography-text>
|
||||
<a-typography-title
|
||||
:level="3"
|
||||
:style="{
|
||||
margin: 0,
|
||||
color: token.colorPrimary,
|
||||
fontVariantNumeric: 'tabular-nums',
|
||||
}"
|
||||
>
|
||||
{{ metric.value }}
|
||||
</a-typography-title>
|
||||
</a-flex>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-card
|
||||
v-else
|
||||
:bordered="false"
|
||||
:style="{
|
||||
background: token.colorFillAlter,
|
||||
borderRadius: `${token.borderRadiusLG}px`,
|
||||
boxShadow: `inset 0 0 0 1px ${token.colorBorderSecondary}`,
|
||||
}"
|
||||
>
|
||||
<a-typography-paragraph
|
||||
:style="{
|
||||
marginBottom: 0,
|
||||
whiteSpace: 'pre-wrap',
|
||||
lineHeight: 1.85,
|
||||
color: token.colorText,
|
||||
}"
|
||||
>
|
||||
{{ answerText }}
|
||||
</a-typography-paragraph>
|
||||
</a-card>
|
||||
|
||||
<template v-if="sources?.length">
|
||||
<a-divider :style="{ margin: `${token.marginXS}px 0` }" />
|
||||
<a-flex vertical :gap="token.paddingXS">
|
||||
<a-flex align="center" :gap="token.paddingXXS">
|
||||
<LinkOutlined />
|
||||
<a-typography-text type="secondary" :style="{ fontSize: `${token.fontSizeSM}px` }">
|
||||
منابع مرتبط
|
||||
</a-typography-text>
|
||||
</a-flex>
|
||||
<a-space wrap :size="[8, 8]">
|
||||
<RouterLink
|
||||
v-for="source in sources"
|
||||
:key="`${source.type}-${source.id}`"
|
||||
:to="sourceTo(source)"
|
||||
@click="closeAnswer"
|
||||
>
|
||||
<a-tag
|
||||
color="processing"
|
||||
:bordered="false"
|
||||
:style="{ cursor: 'pointer', borderRadius: `${token.borderRadiusSM}px` }"
|
||||
>
|
||||
{{ source.label }}
|
||||
</a-tag>
|
||||
</RouterLink>
|
||||
</a-space>
|
||||
</a-flex>
|
||||
</template>
|
||||
</a-flex>
|
||||
|
||||
<template #footer>
|
||||
<a-flex justify="end" :gap="token.paddingXS">
|
||||
<a-button type="primary" @click="closeAnswer">متوجه شدم</a-button>
|
||||
</a-flex>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.panel {
|
||||
background: #fff;
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem 1rem 0.95rem;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
|
||||
border: 1px solid #eef2f7;
|
||||
min-width: 0;
|
||||
.home-ai {
|
||||
--home-ai-h: 330px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
margin-bottom: 0.55rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.modal-lead {
|
||||
margin: 0 0 0.85rem;
|
||||
color: #334155;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.answer-body {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.edit-hint {
|
||||
margin: -0.35rem 0 0.75rem;
|
||||
color: #64748b;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.modal-fields {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.modal-fields label {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
color: #64748b;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.modal-fields input,
|
||||
.modal-fields select,
|
||||
.modal-fields textarea {
|
||||
width: 100%;
|
||||
gap: 0.75rem;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
color: #0f172a;
|
||||
font: inherit;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 0.65rem;
|
||||
width: 100%;
|
||||
height: var(--home-ai-h);
|
||||
min-height: var(--home-ai-h);
|
||||
max-height: var(--home-ai-h);
|
||||
padding: 0.85rem;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgb(226 232 240 / 0.9);
|
||||
background:
|
||||
linear-gradient(165deg, #ffffff 0%, #f8fffc 48%, #ffffff 100%);
|
||||
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
|
||||
}
|
||||
|
||||
.modal-fields textarea {
|
||||
resize: vertical;
|
||||
.home-ai__pattern,
|
||||
.home-ai__orb {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.warn {
|
||||
display: inline-block;
|
||||
margin-inline-start: 0.35rem;
|
||||
color: #b45309;
|
||||
font-size: 0.75rem;
|
||||
.home-ai__pattern {
|
||||
inset: 0;
|
||||
opacity: 0.55;
|
||||
background-image:
|
||||
radial-gradient(circle at 1px 1px, rgba(16, 185, 129, 0.18) 1px, transparent 0),
|
||||
linear-gradient(
|
||||
125deg,
|
||||
rgba(45, 212, 191, 0.06) 0%,
|
||||
transparent 42%,
|
||||
rgba(16, 185, 129, 0.05) 100%
|
||||
);
|
||||
background-size:
|
||||
16px 16px,
|
||||
auto;
|
||||
mask-image: linear-gradient(140deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 0.92rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: #0f172a;
|
||||
.home-ai__orb {
|
||||
border-radius: 999px;
|
||||
filter: blur(28px);
|
||||
}
|
||||
|
||||
.spark {
|
||||
color: #eab308;
|
||||
display: grid;
|
||||
.home-ai__orb--a {
|
||||
top: -2.5rem;
|
||||
inset-inline-end: -1.5rem;
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
background: rgb(52 211 153 / 0.22);
|
||||
}
|
||||
|
||||
.ai-lead {
|
||||
margin: 0 0 0.75rem;
|
||||
padding: 0.55rem 0.75rem;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
background: #d1fae5;
|
||||
color: #115e59;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
border-radius: 14px 14px 4px 14px;
|
||||
.home-ai__orb--b {
|
||||
bottom: -2rem;
|
||||
inset-inline-start: -1.25rem;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
background: rgb(45 212 191 / 0.16);
|
||||
}
|
||||
|
||||
.ai-shortcuts {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.8rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ai-chip {
|
||||
.home-ai__head,
|
||||
.home-ai__identity,
|
||||
.home-ai__composer,
|
||||
.home-ai__chips,
|
||||
.home-ai__chip-list {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
padding: 0.58rem 0.7rem;
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
border: 1px solid #eef2f7;
|
||||
color: #334155;
|
||||
font-size: 0.76rem;
|
||||
text-align: start;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
|
||||
}
|
||||
|
||||
.ai-chip:hover:not(:disabled) {
|
||||
background: #f0fdfa;
|
||||
border-color: #99f6e4;
|
||||
}
|
||||
|
||||
.ai-chip:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.chip-ico {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: var(--radius);
|
||||
background: #ecfdf8;
|
||||
color: #14b8a6;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
.home-ai__head {
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ai-input {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
margin-top: auto;
|
||||
.home-ai__identity {
|
||||
gap: 0.7rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ai-input input {
|
||||
flex: 1;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.58rem 0.75rem;
|
||||
background: #f8fafc;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.ai-input button {
|
||||
width: 40px;
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
background: #14b8a6;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
.home-ai__avatar {
|
||||
flex-shrink: 0;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 0.9rem;
|
||||
background:
|
||||
radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.9), transparent 55%),
|
||||
linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
|
||||
border: 1px solid rgb(167 243 208 / 0.8);
|
||||
box-shadow: 0 4px 12px rgb(16 185 129 / 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ai-input button:disabled {
|
||||
opacity: 0.55;
|
||||
.home-ai__avatar :deep(.mento-bot) {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.ai-answer {
|
||||
background: #f0fdfa;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.7rem 0.8rem;
|
||||
margin-bottom: 0.75rem;
|
||||
.home-ai__avatar :deep(.bot-img) {
|
||||
filter: drop-shadow(0 4px 10px rgba(34, 211, 238, 0.28));
|
||||
}
|
||||
|
||||
.ai-answer p {
|
||||
.home-ai__titles {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.home-ai__titles h3 {
|
||||
margin: 0;
|
||||
color: #134e4a;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.7;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sources {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.sources a {
|
||||
.home-ai__titles p {
|
||||
margin: 0.1rem 0 0;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: #0f766e;
|
||||
background: #fff;
|
||||
border-radius: 999px;
|
||||
padding: 0.15rem 0.5rem;
|
||||
color: #64748b;
|
||||
line-height: 1.35;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ai-error {
|
||||
margin: 0 0 0.7rem;
|
||||
color: #b91c1c;
|
||||
font-size: 0.8rem;
|
||||
.home-ai__tip {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding: 0.75rem 0.85rem;
|
||||
border-radius: 0.85rem;
|
||||
border: 1px solid rgb(167 243 208 / 0.55);
|
||||
background: rgb(236 253 245 / 0.55);
|
||||
color: #475569;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.65;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.home-ai__tip strong {
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.home-ai__composer {
|
||||
flex-shrink: 0;
|
||||
gap: 0.45rem;
|
||||
padding: 0.3rem 0.35rem 0.3rem 0.55rem;
|
||||
border-radius: 0.85rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: rgb(248 250 252 / 0.92);
|
||||
}
|
||||
|
||||
.home-ai__input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.home-ai__chips {
|
||||
flex-shrink: 0;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem 0.65rem;
|
||||
padding-top: 0.55rem;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.home-ai__chips-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.home-ai__chip-list {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.home-ai__chip {
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
border: 1px solid rgb(167 243 208 / 0.7);
|
||||
background: rgb(236 253 245 / 0.75);
|
||||
color: #047857;
|
||||
border-radius: 0.45rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
font: inherit;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.15s ease,
|
||||
border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.home-ai__chip:hover:not(:disabled) {
|
||||
background: #d1fae5;
|
||||
border-color: #6ee7b7;
|
||||
}
|
||||
|
||||
.home-ai__chip:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.home-ai__status {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
inset-inline: 0.85rem;
|
||||
bottom: 0.7rem;
|
||||
max-height: 4.5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.home-ai__status :deep(.ant-alert) {
|
||||
padding-block: 0.35rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,200 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { RouterLink } from 'vue-router';
|
||||
import type { Component } from 'vue';
|
||||
import {
|
||||
AlertOutlined,
|
||||
CheckCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
InfoCircleOutlined,
|
||||
LeftOutlined,
|
||||
} from '@/icons/ant-bridge';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
import type { HomeDashboardAlertDto } from '@mento/shared';
|
||||
|
||||
const props = defineProps<{
|
||||
alerts: HomeDashboardAlertDto[];
|
||||
}>();
|
||||
|
||||
type Tone = HomeDashboardAlertDto['tone'];
|
||||
|
||||
type AlertRow = {
|
||||
key: string;
|
||||
tone: Tone;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
link: string;
|
||||
};
|
||||
|
||||
const TONE_ORDER: Record<Tone, number> = {
|
||||
urgent: 0,
|
||||
warning: 1,
|
||||
info: 2,
|
||||
success: 3,
|
||||
};
|
||||
|
||||
const rows = computed<AlertRow[]>(() =>
|
||||
[...(props.alerts ?? [])]
|
||||
.map((a) => {
|
||||
const parts = a.text.split(/\s*[—\-–]\s*|\n/);
|
||||
const title = parts[0]?.trim() || a.text;
|
||||
const subtitle = parts.slice(1).join(' ').trim() || undefined;
|
||||
return {
|
||||
key: a.key,
|
||||
tone: a.tone,
|
||||
title,
|
||||
subtitle,
|
||||
link: a.link || '/',
|
||||
};
|
||||
})
|
||||
.sort((a, b) => TONE_ORDER[a.tone] - TONE_ORDER[b.tone]),
|
||||
);
|
||||
|
||||
const urgentCount = computed(() => rows.value.filter((r) => r.tone === 'urgent').length);
|
||||
const warningCount = computed(() => rows.value.filter((r) => r.tone === 'warning').length);
|
||||
|
||||
function toneIcon(tone: Tone): Component {
|
||||
if (tone === 'urgent') return ExclamationCircleOutlined;
|
||||
if (tone === 'warning') return AlertOutlined;
|
||||
if (tone === 'success') return CheckCircleOutlined;
|
||||
return InfoCircleOutlined;
|
||||
}
|
||||
|
||||
function toneLabel(tone: Tone) {
|
||||
if (tone === 'urgent') return 'فوری';
|
||||
if (tone === 'warning') return 'هشدار';
|
||||
if (tone === 'success') return 'موفق';
|
||||
return 'اطلاع';
|
||||
}
|
||||
|
||||
function actionLabel(tone: Tone) {
|
||||
if (tone === 'urgent') return 'اقدام';
|
||||
if (tone === 'warning') return 'بررسی';
|
||||
return 'مشاهده';
|
||||
}
|
||||
|
||||
function rowClass(tone: Tone) {
|
||||
if (tone === 'urgent') return 'border-rose-200/80 bg-rose-50/50 hover:bg-rose-50';
|
||||
if (tone === 'warning') return 'border-amber-200/80 bg-amber-50/50 hover:bg-amber-50';
|
||||
if (tone === 'success') return 'border-emerald-200/70 bg-emerald-50/40 hover:bg-emerald-50/80';
|
||||
return 'border-slate-200/80 bg-slate-50/70 hover:bg-slate-100/80';
|
||||
}
|
||||
|
||||
function barClass(tone: Tone) {
|
||||
if (tone === 'urgent') return 'bg-rose-500';
|
||||
if (tone === 'warning') return 'bg-amber-500';
|
||||
if (tone === 'success') return 'bg-emerald-500';
|
||||
return 'bg-blue-500';
|
||||
}
|
||||
|
||||
function iconWrapClass(tone: Tone) {
|
||||
if (tone === 'urgent') return 'bg-rose-100 text-rose-600';
|
||||
if (tone === 'warning') return 'bg-amber-100 text-amber-600';
|
||||
if (tone === 'success') return 'bg-emerald-100 text-emerald-600';
|
||||
return 'bg-blue-100 text-blue-600';
|
||||
}
|
||||
|
||||
function badgeClass(tone: Tone) {
|
||||
if (tone === 'urgent') return 'bg-rose-100 text-rose-700';
|
||||
if (tone === 'warning') return 'bg-amber-100 text-amber-700';
|
||||
if (tone === 'success') return 'bg-emerald-100 text-emerald-700';
|
||||
return 'bg-blue-100 text-blue-700';
|
||||
}
|
||||
|
||||
function actionClass(tone: Tone) {
|
||||
if (tone === 'urgent') return 'text-rose-600 group-hover:text-rose-700';
|
||||
if (tone === 'warning') return 'text-amber-600 group-hover:text-amber-700';
|
||||
if (tone === 'success') return 'text-emerald-600 group-hover:text-emerald-700';
|
||||
return 'text-blue-600 group-hover:text-blue-700';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
v-if="rows.length"
|
||||
class="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-sm flex flex-col h-[330px]"
|
||||
>
|
||||
<header class="flex items-center justify-between gap-3 pb-3 mb-3 border-b border-slate-100 shrink-0">
|
||||
<div class="flex items-center gap-2.5 min-w-0">
|
||||
<span class="relative flex h-2.5 w-2.5 shrink-0" aria-hidden="true">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75" />
|
||||
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-rose-500" />
|
||||
</span>
|
||||
<div class="min-w-0">
|
||||
<h3 class="m-0 font-bold text-slate-800 text-base leading-6">نیازمند توجه</h3>
|
||||
<p class="m-0 mt-0.5 text-xs text-slate-400 truncate">
|
||||
موارد با اولویت بالاتر اول آمده‌اند
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 shrink-0">
|
||||
<span
|
||||
v-if="urgentCount"
|
||||
class="text-[11px] font-bold bg-rose-50 text-rose-600 border border-rose-200/70 px-2 py-0.5 rounded-full"
|
||||
>
|
||||
{{ toFaDigits(urgentCount) }} فوری
|
||||
</span>
|
||||
<span
|
||||
v-if="warningCount"
|
||||
class="text-[11px] font-bold bg-amber-50 text-amber-700 border border-amber-200/70 px-2 py-0.5 rounded-full"
|
||||
>
|
||||
{{ toFaDigits(warningCount) }} هشدار
|
||||
</span>
|
||||
<span class="text-[11px] font-semibold text-slate-500 bg-slate-100 px-2 py-0.5 rounded-full">
|
||||
{{ toFaDigits(rows.length) }} مورد
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex-1 overflow-y-auto space-y-2 pe-1 min-h-0">
|
||||
<RouterLink
|
||||
v-for="item in rows"
|
||||
:key="item.key"
|
||||
:to="item.link"
|
||||
class="group relative overflow-hidden rounded-xl border px-3 py-2.5 flex items-center gap-3 transition-all"
|
||||
:class="rowClass(item.tone)"
|
||||
>
|
||||
<span
|
||||
class="absolute inset-y-0 right-0 w-1 rounded-s-full"
|
||||
:class="barClass(item.tone)"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<span
|
||||
class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 text-sm"
|
||||
:class="iconWrapClass(item.tone)"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<component :is="toneIcon(item.tone)" />
|
||||
</span>
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<h4 class="m-0 font-bold text-[13px] text-slate-800 leading-5 truncate">
|
||||
{{ item.title }}
|
||||
</h4>
|
||||
<div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1">
|
||||
<span
|
||||
class="text-[10px] font-bold px-1.5 py-0.5 rounded shrink-0"
|
||||
:class="badgeClass(item.tone)"
|
||||
>
|
||||
{{ toneLabel(item.tone) }}
|
||||
</span>
|
||||
<span v-if="item.subtitle" class="text-[11px] text-slate-500 truncate">
|
||||
{{ item.subtitle }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="shrink-0 flex items-center gap-1 text-[11px] font-semibold"
|
||||
:class="actionClass(item.tone)"
|
||||
>
|
||||
<span class="opacity-0 group-hover:opacity-100 transition-opacity hidden sm:inline">
|
||||
{{ actionLabel(item.tone) }}
|
||||
</span>
|
||||
<LeftOutlined class="text-slate-400 group-hover:-translate-x-0.5 transition-transform" />
|
||||
</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,10 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { RouterLink } from 'vue-router';
|
||||
import { GiftOutlined } from '@/icons/ant-bridge';
|
||||
import {
|
||||
Button as AButton,
|
||||
Flex as AFlex,
|
||||
List as AList,
|
||||
Modal as AModal,
|
||||
Space as ASpace,
|
||||
Tag as ATag,
|
||||
Typography,
|
||||
} from 'ant-design-vue';
|
||||
import { api } from '@/lib/api';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import { UiModal } from '@/components/ui';
|
||||
import SmsComposeModal from '@/components/SmsComposeModal.vue';
|
||||
|
||||
type BirthdayItem = {
|
||||
@@ -28,6 +36,10 @@ type BirthdayMonth = {
|
||||
const data = ref<BirthdayMonth | null>(null);
|
||||
const listOpen = ref(false);
|
||||
const smsTarget = ref<BirthdayItem | null>(null);
|
||||
const { Text: ATypographyText } = Typography;
|
||||
|
||||
const AListItem = AList.Item;
|
||||
const AListItemMeta = AList.Item.Meta;
|
||||
|
||||
const groups = computed(() => {
|
||||
const map = new Map<number, BirthdayItem[]>();
|
||||
@@ -54,63 +66,78 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section v-if="data" class="birthdays">
|
||||
<div class="head">
|
||||
<span class="ico"><UiIcon name="gift" :size="18" /></span>
|
||||
<div>
|
||||
<strong>تولدهای {{ data.monthName }}</strong>
|
||||
<p>{{ toFaDigits(data.total) }} مشتری این ماه تولد دارند</p>
|
||||
</div>
|
||||
</div>
|
||||
<section v-if="data" class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm">
|
||||
<a-flex align="center" wrap="wrap" gap="middle" justify="space-between">
|
||||
<a-flex align="center" gap="middle">
|
||||
<a-typography-text type="secondary"><GiftOutlined /></a-typography-text>
|
||||
<div>
|
||||
<a-typography-text strong>تولدهای {{ data.monthName }}</a-typography-text>
|
||||
<br />
|
||||
<a-typography-text type="secondary">
|
||||
{{ toFaDigits(data.total) }} مشتری این ماه تولد دارند
|
||||
</a-typography-text>
|
||||
</div>
|
||||
</a-flex>
|
||||
|
||||
<div class="chips">
|
||||
<RouterLink
|
||||
v-for="person in data.preview"
|
||||
:key="person.id"
|
||||
class="chip"
|
||||
:title="person.fullName"
|
||||
:to="{ name: 'person-detail', params: { id: person.id } }"
|
||||
>
|
||||
<b>{{ toFaDigits(person.day) }}</b>
|
||||
<span>{{ person.fullName }}</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<button type="button" class="more" @click="listOpen = true">
|
||||
{{ data.total > data.preview.length ? 'همه' : 'فهرست' }}
|
||||
</button>
|
||||
|
||||
<UiModal :open="listOpen" :title="`تولدهای ${data.monthName}`" @close="listOpen = false">
|
||||
<div class="days">
|
||||
<section
|
||||
v-for="[day, people] in groups"
|
||||
:key="day"
|
||||
class="day"
|
||||
:class="{ past: day < data.today, today: day === data.today }"
|
||||
<a-space wrap>
|
||||
<RouterLink
|
||||
v-for="person in data.preview"
|
||||
:key="person.id"
|
||||
:to="{ name: 'person-detail', params: { id: person.id } }"
|
||||
>
|
||||
<h3>
|
||||
<b>{{ toFaDigits(day) }}</b>
|
||||
<span>{{ data.monthName }}</span>
|
||||
<em v-if="day < data.today">گذشته</em>
|
||||
<em v-else-if="day === data.today">امروز</em>
|
||||
</h3>
|
||||
<ul>
|
||||
<li v-for="person in people" :key="person.id">
|
||||
<RouterLink :to="{ name: 'person-detail', params: { id: person.id } }" @click="listOpen = false">
|
||||
{{ person.fullName }}
|
||||
</RouterLink>
|
||||
<button
|
||||
type="button"
|
||||
class="sms"
|
||||
:disabled="!person.mobile"
|
||||
@click="openSms(person)"
|
||||
>
|
||||
{{ person.mobile ? 'پیامک تبریک' : 'بدون شماره' }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</UiModal>
|
||||
<a-tag>
|
||||
{{ toFaDigits(person.day) }} — {{ person.fullName }}
|
||||
</a-tag>
|
||||
</RouterLink>
|
||||
<a-button type="link" @click="listOpen = true">
|
||||
{{ data.total > data.preview.length ? 'همه' : 'فهرست' }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-flex>
|
||||
|
||||
<a-modal
|
||||
v-model:open="listOpen"
|
||||
:title="`تولدهای ${data.monthName}`"
|
||||
:footer="null"
|
||||
destroy-on-close
|
||||
>
|
||||
<a-list item-layout="vertical" :data-source="groups">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<template #actions>
|
||||
<a-tag v-if="item[0] < data!.today">گذشته</a-tag>
|
||||
<a-tag v-else-if="item[0] === data!.today" color="processing">امروز</a-tag>
|
||||
</template>
|
||||
<a-list-item-meta>
|
||||
<template #title>
|
||||
{{ toFaDigits(item[0]) }} {{ data!.monthName }}
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
<a-list :data-source="item[1]">
|
||||
<template #renderItem="{ item: person }">
|
||||
<a-list-item>
|
||||
<RouterLink
|
||||
:to="{ name: 'person-detail', params: { id: person.id } }"
|
||||
@click="listOpen = false"
|
||||
>
|
||||
{{ person.fullName }}
|
||||
</RouterLink>
|
||||
<template #actions>
|
||||
<a-button
|
||||
type="link"
|
||||
:disabled="!person.mobile"
|
||||
@click="openSms(person)"
|
||||
>
|
||||
{{ person.mobile ? 'پیامک تبریک' : 'بدون شماره' }}
|
||||
</a-button>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-modal>
|
||||
|
||||
<SmsComposeModal
|
||||
nest
|
||||
@@ -126,289 +153,3 @@ onMounted(async () => {
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.birthdays {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent 42%),
|
||||
linear-gradient(100deg, var(--accent-subtle) 0%, #fff 58%, #fff7f4 100%);
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 6px 18px rgba(15, 118, 110, 0.05);
|
||||
padding: 0.55rem 0.75rem;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ico {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #fff;
|
||||
color: #e11d48;
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, #fff);
|
||||
}
|
||||
|
||||
.head strong {
|
||||
display: block;
|
||||
color: var(--accent-deep);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.head p {
|
||||
margin: 0.05rem 0 0;
|
||||
color: #64748b;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.chips {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.35rem;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
max-width: 11.5rem;
|
||||
min-width: 0;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 24%, #fff);
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
color: #134e4a;
|
||||
padding: 0.22rem 0.55rem 0.22rem 0.28rem;
|
||||
text-decoration: none;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.chip b {
|
||||
flex-shrink: 0;
|
||||
font-weight: 700;
|
||||
font-size: 0.72rem;
|
||||
color: var(--accent-deep);
|
||||
background: var(--accent-soft);
|
||||
border-radius: 999px;
|
||||
padding: 0.12rem 0.38rem;
|
||||
}
|
||||
|
||||
.chip span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.more {
|
||||
flex-shrink: 0;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
padding: 0.32rem 0.7rem;
|
||||
font: inherit;
|
||||
font-size: 0.78rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.more:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.days {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
max-height: 62vh;
|
||||
overflow: auto;
|
||||
padding-inline-end: 0.15rem;
|
||||
}
|
||||
|
||||
.day {
|
||||
background: #fff;
|
||||
border: 1px solid #e7eef2;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.day h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin: 0;
|
||||
padding: 0.55rem 0.8rem;
|
||||
background: var(--accent-subtle);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, #fff);
|
||||
font-size: 0.86rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
|
||||
.day h3 b {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
padding: 0 0.3rem;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.day em {
|
||||
margin-inline-start: auto;
|
||||
font-style: normal;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
background: #fff;
|
||||
border-radius: 999px;
|
||||
padding: 0.1rem 0.45rem;
|
||||
}
|
||||
|
||||
.day.today h3 {
|
||||
background: color-mix(in srgb, var(--accent-soft) 70%, #fff);
|
||||
}
|
||||
|
||||
.day.today em {
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
|
||||
.day.past {
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.day ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.day li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.62rem 0.85rem;
|
||||
border-top: 1px solid #eef2f6;
|
||||
}
|
||||
|
||||
.day li:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.day a {
|
||||
flex: 1 1 auto;
|
||||
color: #0f172a;
|
||||
text-decoration: none;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.day a:hover {
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
|
||||
.sms {
|
||||
flex-shrink: 0;
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 35%, #fff);
|
||||
background: #fff;
|
||||
color: var(--accent-deep);
|
||||
border-radius: 999px;
|
||||
padding: 0.28rem 0.65rem;
|
||||
font: inherit;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sms:hover:not(:disabled) {
|
||||
background: var(--accent-subtle);
|
||||
}
|
||||
|
||||
.sms:disabled {
|
||||
border-color: #e2e8f0;
|
||||
color: #94a3b8;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin: 0 0 0.6rem;
|
||||
}
|
||||
|
||||
.hint,
|
||||
.err,
|
||||
.ok {
|
||||
margin: 0.55rem 0 0;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.err {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.ok {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.birthdays {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.45rem 0.6rem;
|
||||
}
|
||||
|
||||
.head {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.head p {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.more {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.chips {
|
||||
grid-column: 1 / -1;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.chips::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.day li {
|
||||
gap: 0.45rem;
|
||||
padding-inline: 0.7rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
import type { HomeDashboardSeriesPointDto } from '@mento/shared';
|
||||
import UiChart, { type UiChartOption } from '@/components/ui/UiChart.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
series: HomeDashboardSeriesPointDto[];
|
||||
}>();
|
||||
|
||||
const points = computed(() => props.series);
|
||||
const hasData = computed(() => points.value.some((p) => p.value > 0));
|
||||
const total = computed(() => points.value.reduce((a, p) => a + p.value, 0));
|
||||
|
||||
const option = computed<UiChartOption>(() => ({
|
||||
animationDuration: 450,
|
||||
grid: { top: 36, right: 12, bottom: 28, left: 12, containLabel: true },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
textStyle: { fontFamily: 'IRANSans, Tahoma, sans-serif' },
|
||||
formatter: (params) => {
|
||||
const row = Array.isArray(params) ? params[0] : params;
|
||||
const point = points.value[row.dataIndex ?? 0];
|
||||
if (!point) return '';
|
||||
return `${point.monthLabel}<br/><strong>${toFaDigits(point.value)}</strong> مشتری جدید`;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: points.value.map((p) => p.monthLabel),
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#94a3b8',
|
||||
fontFamily: 'IRANSans, Tahoma, sans-serif',
|
||||
fontSize: 11,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
minInterval: 1,
|
||||
...(hasData.value ? {} : { max: 1 }),
|
||||
splitLine: { lineStyle: { color: '#e5e7eb', type: 'dashed' } },
|
||||
axisLabel: { show: false },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: points.value.map((p) => p.value),
|
||||
barMaxWidth: 32,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#34d399' },
|
||||
{ offset: 1, color: '#059669' },
|
||||
],
|
||||
},
|
||||
borderRadius: [8, 8, 0, 0],
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#64748b',
|
||||
fontFamily: 'IRANSans, Tahoma, sans-serif',
|
||||
fontSize: 11,
|
||||
formatter: (p) => toFaDigits(Number(p.value ?? 0)),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
data: points.value.map((p) => p.value),
|
||||
smooth: 0.35,
|
||||
symbol: 'none',
|
||||
lineStyle: { color: '#0f766e', width: 2, opacity: 0.55 },
|
||||
},
|
||||
],
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm h-full">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="font-bold text-slate-800 text-base">روند رشد مشتریان</h3>
|
||||
<span v-if="hasData" class="text-xs font-bold bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-lg">
|
||||
{{ toFaDigits(total) }} در ۱۲ ماه
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-56">
|
||||
<UiChart :option="option" height="224px" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,102 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
import type { HomeDashboardSalesSummaryDto } from '@mento/shared';
|
||||
import UiChart, { type UiChartOption } from '@/components/ui/UiChart.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
summary: HomeDashboardSalesSummaryDto;
|
||||
formatAmount: (value: number) => string;
|
||||
}>();
|
||||
|
||||
const slices = computed(() => [
|
||||
{ name: 'باز', value: props.summary.openCount, color: '#3b82f6' },
|
||||
{ name: 'برنده', value: props.summary.wonCount, color: '#10b981' },
|
||||
{ name: 'باخته', value: props.summary.lostCount, color: '#f43f5e' },
|
||||
]);
|
||||
|
||||
const total = computed(() => slices.value.reduce((a, s) => a + s.value, 0));
|
||||
const hasData = computed(() => total.value > 0);
|
||||
|
||||
const option = computed<UiChartOption>(() => ({
|
||||
animationDuration: 400,
|
||||
color: slices.value.map((s) => s.color),
|
||||
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%'],
|
||||
silent: !hasData.value,
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: hasData.value
|
||||
? slices.value.map((s) => ({ name: s.name, value: s.value }))
|
||||
: [{ name: '', value: 1, itemStyle: { color: '#e5e7eb' } }],
|
||||
},
|
||||
],
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm h-full flex flex-col">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="!m-0 !leading-6 font-bold text-slate-800 text-base">وضعیت معاملات</h3>
|
||||
<span class="text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-200/60 px-2.5 py-1 rounded-lg">
|
||||
نرخ برد {{ toFaDigits(summary.winRate) }}٪
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row items-center gap-4">
|
||||
<div class="w-full sm:w-[48%] sm:max-w-[240px] shrink-0">
|
||||
<div class="relative w-full aspect-square">
|
||||
<UiChart :option="option" height="100%" />
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
|
||||
<span class="text-2xl font-black text-slate-800 leading-none">{{ toFaDigits(total) }}</span>
|
||||
<span class="text-xs text-slate-400 mt-1">معامله کل</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full sm:flex-1 min-w-0 space-y-2.5">
|
||||
<div class="p-3 rounded-xl bg-slate-50/80 border border-slate-100 flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<div class="text-xs font-bold text-slate-700">باز</div>
|
||||
<div class="text-[11px] text-slate-400">در جریان</div>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="text-sm font-black text-slate-800">{{ toFaDigits(summary.openCount) }}</div>
|
||||
<div class="text-xs text-slate-500">{{ formatAmount(summary.openAmount) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 rounded-xl bg-emerald-50/50 border border-emerald-100 flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<div class="text-xs font-bold text-emerald-900">برنده (۱۲ ماه)</div>
|
||||
<div class="text-[11px] text-emerald-600/80">تکمیل موفق</div>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="text-sm font-black text-emerald-700">{{ toFaDigits(summary.wonCount) }}</div>
|
||||
<div class="text-xs text-emerald-600">{{ formatAmount(summary.wonAmount) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 rounded-xl bg-rose-50/40 border border-rose-100 flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<div class="text-xs font-bold text-rose-900">باخته (۱۲ ماه)</div>
|
||||
<div class="text-[11px] text-rose-500">لغو یا عدم توافق</div>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="text-sm font-black text-rose-600">{{ toFaDigits(summary.lostCount) }}</div>
|
||||
<div class="text-xs text-rose-500">{{ formatAmount(summary.lostAmount) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Empty as AEmpty, Progress as AProgress } from 'ant-design-vue';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
import type { HomeDashboardFunnelStageDto } from '@mento/shared';
|
||||
|
||||
const props = defineProps<{
|
||||
funnel: HomeDashboardFunnelStageDto[];
|
||||
formatAmount: (value: number) => string;
|
||||
}>();
|
||||
|
||||
const rows = computed(() => props.funnel);
|
||||
const hasData = computed(() => rows.value.some((r) => r.count > 0));
|
||||
const openTotal = computed(() => rows.value.reduce((a, r) => a + r.count, 0));
|
||||
|
||||
function share(count: number) {
|
||||
if (!openTotal.value) return 0;
|
||||
return Math.round((count / openTotal.value) * 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm h-full">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="font-bold text-slate-800 text-base">قیف فروش باز</h3>
|
||||
<span v-if="hasData" class="text-xs font-semibold text-slate-500">
|
||||
{{ toFaDigits(openTotal) }} معامله باز
|
||||
</span>
|
||||
</div>
|
||||
<a-empty v-if="!hasData" description="معاملهٔ بازی در مسیر فروش نیست" />
|
||||
<div v-else class="space-y-4">
|
||||
<div v-for="row in rows" :key="row.stageId ?? row.stageName">
|
||||
<div class="flex items-center justify-between gap-2 mb-1">
|
||||
<span class="text-xs font-bold text-slate-700">{{ row.stageName }}</span>
|
||||
<span class="text-xs font-semibold text-slate-500">
|
||||
{{ toFaDigits(row.count) }} · {{ toFaDigits(share(row.count)) }}٪
|
||||
</span>
|
||||
</div>
|
||||
<a-progress :percent="share(row.count)" :show-info="false" stroke-color="#10b981" />
|
||||
<div class="text-[11px] text-slate-400">{{ formatAmount(row.amount) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,16 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { RouterLink } from 'vue-router';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import MentoAiAvatar from '@/components/brand/MentoAiAvatar.vue';
|
||||
import { brand, type HomeDashboardAlertDto } from '@mento/shared';
|
||||
import { SendOutlined } from '@/icons/ant-bridge';
|
||||
import {
|
||||
Button as AButton,
|
||||
Input as AInput,
|
||||
Typography,
|
||||
} from 'ant-design-vue';
|
||||
import { brand } from '@mento/shared';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
|
||||
const props = defineProps<{
|
||||
greeting: string;
|
||||
firstName: string;
|
||||
userInitial: string;
|
||||
alerts: HomeDashboardAlertDto[];
|
||||
askQuery: string;
|
||||
asking?: boolean;
|
||||
askAnswer?: string;
|
||||
@@ -24,444 +26,368 @@ const emit = defineEmits<{
|
||||
}>();
|
||||
|
||||
const auth = useAuthStore();
|
||||
const { Title: ATypographyTitle, Text: ATypographyText, Paragraph: ATypographyParagraph } =
|
||||
Typography;
|
||||
|
||||
type HeroChip = {
|
||||
key: string;
|
||||
tone: HomeDashboardAlertDto['tone'];
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
link: string;
|
||||
};
|
||||
|
||||
const chips = computed<HeroChip[]>(() =>
|
||||
props.alerts.slice(0, 3).map((a) => {
|
||||
const parts = a.text.split(/\s*[—\-–]\s*|\n/);
|
||||
const title = parts[0]?.trim() || a.text;
|
||||
const subtitle = parts.slice(1).join(' ').trim() || undefined;
|
||||
return {
|
||||
key: a.key,
|
||||
tone: a.tone,
|
||||
title,
|
||||
subtitle,
|
||||
link: a.link || '/',
|
||||
};
|
||||
}),
|
||||
);
|
||||
|
||||
function alertIcon(tone: string) {
|
||||
if (tone === 'urgent') return 'fire' as const;
|
||||
if (tone === 'warning') return 'warning' as const;
|
||||
if (tone === 'success') return 'trend' as const;
|
||||
return 'sparkle' as const;
|
||||
}
|
||||
/** فقط عکس واقعی کاربر؛ پیش‌فرض عمومی را نشان نده */
|
||||
const hasCustomPhoto = computed(() => Boolean(auth.user?.hasAvatar));
|
||||
|
||||
const shortcutLabel = computed(() =>
|
||||
typeof navigator !== 'undefined' && /Mac|iPhone|iPad/i.test(navigator.platform)
|
||||
? '⌘K'
|
||||
: 'Ctrl+K',
|
||||
);
|
||||
|
||||
const statusMessage = computed(() => {
|
||||
if (props.asking) return props.statusText || 'در حال پاسخ…';
|
||||
if (props.askError) return props.askError;
|
||||
if (props.askAnswer) return props.askAnswer;
|
||||
return '';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="hero home-hero" style="position: relative">
|
||||
<div
|
||||
class="hero-surface"
|
||||
aria-hidden="true"
|
||||
style="position: absolute; inset: 0; overflow: hidden; pointer-events: none"
|
||||
>
|
||||
<div class="hero-glow" style="position: absolute" />
|
||||
<div class="hero-mist" style="position: absolute; inset: 0" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="home-hero">
|
||||
<div class="home-hero__gradient" aria-hidden="true" />
|
||||
<div class="home-hero__pattern" aria-hidden="true" />
|
||||
<div class="home-hero__orb home-hero__orb--start" aria-hidden="true" />
|
||||
<div class="home-hero__orb home-hero__orb--end" aria-hidden="true" />
|
||||
|
||||
<div class="hero-body">
|
||||
<div class="hero-greet">
|
||||
<span class="hero-avatar">
|
||||
<img :src="auth.avatarSrc" :alt="firstName" width="72" height="72" />
|
||||
<i class="online" />
|
||||
</span>
|
||||
<div class="greet-text">
|
||||
<h1>{{ greeting }} {{ firstName }} 👋</h1>
|
||||
<p v-if="chips.length">{{ brand.nameFa }} اینا رو برات پیدا کرده</p>
|
||||
<p v-else>از {{ brand.nameFa }} بپرس یا کار امروز را شروع کن</p>
|
||||
<div class="home-hero__row">
|
||||
<div class="home-hero__greet">
|
||||
<div class="home-hero__identity" :aria-label="firstName">
|
||||
<img
|
||||
v-if="hasCustomPhoto"
|
||||
:src="auth.avatarSrc"
|
||||
:alt="firstName"
|
||||
class="home-hero__photo"
|
||||
/>
|
||||
<span v-else class="home-hero__monogram" aria-hidden="true">
|
||||
{{ userInitial }}
|
||||
</span>
|
||||
<span class="home-hero__online" title="آنلاین" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="home-hero__copy">
|
||||
<p class="home-hero__brand">{{ brand.nameFa }}</p>
|
||||
<a-typography-title :level="4" class="home-hero__title">
|
||||
{{ greeting }}، {{ firstName }}
|
||||
</a-typography-title>
|
||||
<a-typography-text class="home-hero__subtitle">
|
||||
از داده‌ها بپرسید یا کار امروز را از همین‌جا شروع کنید
|
||||
</a-typography-text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="chips.length" class="hero-chips">
|
||||
<RouterLink
|
||||
v-for="chip in chips"
|
||||
:key="chip.key"
|
||||
class="chip"
|
||||
:class="`chip-${chip.tone}`"
|
||||
:to="chip.link"
|
||||
>
|
||||
<span class="chip-ico"><UiIcon :name="alertIcon(chip.tone)" :size="13" /></span>
|
||||
<span class="chip-text">
|
||||
<strong>{{ chip.title }}</strong>
|
||||
<small v-if="chip.subtitle">{{ chip.subtitle }}</small>
|
||||
</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<div class="hero-ask-wrap">
|
||||
<form class="hero-ask" @submit.prevent="emit('ask')">
|
||||
<UiIcon name="sparkle" :size="18" class="ask-ico" />
|
||||
<input
|
||||
<div class="home-hero__ask">
|
||||
<a-input
|
||||
id="home-hero-ask"
|
||||
:value="askQuery"
|
||||
type="search"
|
||||
:placeholder="brand.askPlaceholderFa"
|
||||
:disabled="asking"
|
||||
@input="emit('update:askQuery', ($event.target as HTMLInputElement).value)"
|
||||
:bordered="false"
|
||||
class="home-hero__ask-input"
|
||||
@update:value="emit('update:askQuery', $event)"
|
||||
@press-enter="emit('ask')"
|
||||
/>
|
||||
<kbd>{{ shortcutLabel }}</kbd>
|
||||
<button type="submit" class="ask-send" aria-label="ارسال" :disabled="asking">
|
||||
<UiIcon name="send" :size="15" />
|
||||
</button>
|
||||
</form>
|
||||
<p v-if="asking" class="hero-ask-status">{{ statusText || 'در حال پاسخ…' }}</p>
|
||||
<p v-else-if="askError" class="hero-ask-status err">{{ askError }}</p>
|
||||
<p v-else-if="askAnswer" class="hero-ask-status">{{ askAnswer }}</p>
|
||||
<kbd class="home-hero__ask-kbd">{{ shortcutLabel }}</kbd>
|
||||
<a-button
|
||||
type="primary"
|
||||
shape="round"
|
||||
class="home-hero__ask-btn"
|
||||
:disabled="asking"
|
||||
:loading="asking"
|
||||
aria-label="ارسال"
|
||||
@click="emit('ask')"
|
||||
>
|
||||
<span class="home-hero__ask-btn-inner">
|
||||
<SendOutlined />
|
||||
<span class="home-hero__ask-label">بپرس</span>
|
||||
</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MentoAiAvatar class="hero-bot" :size="156" />
|
||||
</header>
|
||||
<div
|
||||
v-if="statusMessage"
|
||||
class="rounded-xl border px-3.5 py-2.5"
|
||||
:class="
|
||||
askError
|
||||
? 'border-rose-200 bg-rose-50/70'
|
||||
: asking
|
||||
? 'border-emerald-200/70 bg-emerald-50/50'
|
||||
: 'border-slate-200 bg-slate-50/80'
|
||||
"
|
||||
>
|
||||
<a-typography-paragraph
|
||||
:type="askError ? 'danger' : 'secondary'"
|
||||
:ellipsis="{ rows: 3 }"
|
||||
class="!mb-0 !text-sm"
|
||||
>
|
||||
{{ statusMessage }}
|
||||
</a-typography-paragraph>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hero {
|
||||
.home-hero {
|
||||
position: relative;
|
||||
display: grid;
|
||||
/* RTL: body سمت راست، ربات سمت چپ — فضای اضافه برای پاپ‌آپ */
|
||||
grid-template-columns: minmax(0, 1fr) 210px;
|
||||
gap: 0.7rem 1rem;
|
||||
align-items: start;
|
||||
align-self: start;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
padding: 0.8rem 1.5rem 0.9rem;
|
||||
border-radius: var(--radius);
|
||||
overflow: visible;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.hero-surface {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
border-radius: var(--radius);
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background-color: #134e4a;
|
||||
background-image:
|
||||
radial-gradient(ellipse 55% 90% at 8% 55%, rgba(103, 232, 249, 0.55) 0%, rgba(45, 212, 191, 0.22) 35%, transparent 68%),
|
||||
radial-gradient(ellipse 50% 80% at 92% 40%, rgba(153, 246, 228, 0.28) 0%, transparent 55%),
|
||||
radial-gradient(ellipse 70% 60% at 45% 30%, rgba(45, 212, 191, 0.18) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 60% 85%, rgba(15, 23, 42, 0.28) 0%, transparent 55%),
|
||||
linear-gradient(
|
||||
105deg,
|
||||
#0b3d3a 0%,
|
||||
#115e59 22%,
|
||||
#0f766e 48%,
|
||||
#134e4a 72%,
|
||||
#0f3f3c 100%
|
||||
);
|
||||
box-shadow:
|
||||
0 16px 36px rgba(15, 118, 110, 0.22),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.18),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgb(16 137 125 / 0.28);
|
||||
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
|
||||
}
|
||||
|
||||
.hero-glow {
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
border-radius: 999px;
|
||||
inset-inline-end: -70px;
|
||||
top: 40%;
|
||||
transform: translateY(-50%);
|
||||
background:
|
||||
radial-gradient(circle, rgba(165, 243, 252, 0.65) 0%, rgba(34, 211, 238, 0.28) 32%, transparent 68%);
|
||||
filter: blur(8px);
|
||||
.home-hero__gradient,
|
||||
.home-hero__pattern,
|
||||
.home-hero__orb {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.hero-mist {
|
||||
position: absolute;
|
||||
.home-hero__gradient,
|
||||
.home-hero__pattern {
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 40% 35% at 25% 20%, rgba(255, 255, 255, 0.14) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 35% 40% at 70% 75%, rgba(204, 251, 241, 0.12) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 50% 45% at 50% 50%, rgba(15, 118, 110, 0.35) 0%, transparent 75%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-body,
|
||||
.hero-bot {
|
||||
.home-hero__gradient {
|
||||
background:
|
||||
linear-gradient(
|
||||
115deg,
|
||||
#eef8f7 0%,
|
||||
#d0ebe8 28%,
|
||||
#c5e6e2 55%,
|
||||
#eef8f7 78%,
|
||||
#ffffff 100%
|
||||
);
|
||||
}
|
||||
|
||||
.home-hero__pattern {
|
||||
opacity: 0.45;
|
||||
background-image:
|
||||
radial-gradient(circle at 1px 1px, rgba(16, 137, 125, 0.28) 1px, transparent 0),
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(16, 137, 125, 0.08) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(16, 137, 125, 0.08) 50%,
|
||||
rgba(16, 137, 125, 0.08) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-size:
|
||||
18px 18px,
|
||||
28px 28px;
|
||||
mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.home-hero__orb {
|
||||
border-radius: 999px;
|
||||
filter: blur(48px);
|
||||
}
|
||||
|
||||
.home-hero__orb--start {
|
||||
inset-inline-end: -5rem;
|
||||
top: -6rem;
|
||||
width: 13rem;
|
||||
height: 13rem;
|
||||
background: rgb(22 193 168 / 0.22);
|
||||
}
|
||||
|
||||
.home-hero__orb--end {
|
||||
inset-inline-start: -4rem;
|
||||
bottom: -5rem;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
background: rgb(16 137 125 / 0.16);
|
||||
}
|
||||
|
||||
.home-hero__row {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-top: 0;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.hero-greet {
|
||||
.home-hero__greet {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
gap: 0.875rem;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
max-width: 22rem;
|
||||
}
|
||||
|
||||
.greet-text {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.hero-avatar {
|
||||
.home-hero__identity {
|
||||
position: relative;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 999px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.hero-avatar img {
|
||||
.home-hero__photo,
|
||||
.home-hero__monogram {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.85rem;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
border-radius: 999px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.65);
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.online {
|
||||
.home-hero__monogram {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
color: #eef8f7;
|
||||
background: linear-gradient(160deg, #16c1a8 0%, #10897d 100%);
|
||||
letter-spacing: -0.02em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.home-hero__online {
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
inset-inline-start: 3px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
border-radius: 999px;
|
||||
background: #22c55e;
|
||||
background: #10897d;
|
||||
border: 2px solid #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.greet-text h1 {
|
||||
.home-hero__copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.home-hero__brand {
|
||||
margin: 0;
|
||||
font-size: clamp(1.35rem, 2vw, 1.75rem);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
color: #fff;
|
||||
letter-spacing: 0.02em;
|
||||
color: rgb(4 120 87 / 0.8);
|
||||
}
|
||||
|
||||
.greet-text p {
|
||||
margin: 0.25rem 0 0;
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-chips {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.4rem;
|
||||
max-width: min(580px, 100%);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
min-width: 0;
|
||||
padding: 0.4rem 0.5rem;
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
color: #0f172a;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.07);
|
||||
}
|
||||
|
||||
.chip-text {
|
||||
display: grid;
|
||||
gap: 0.04rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chip-text strong {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
.home-hero__title {
|
||||
margin: 0.125rem 0 0 !important;
|
||||
color: #1e293b !important;
|
||||
font-size: 1.125rem !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 1.75rem !important;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chip-text small {
|
||||
font-size: 0.6rem;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
.home-hero__subtitle {
|
||||
display: block !important;
|
||||
margin-top: 0.125rem !important;
|
||||
color: #64748b !important;
|
||||
font-size: 0.875rem !important;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chip-ico {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: var(--radius);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chip-urgent .chip-ico {
|
||||
background: #fee2e2;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.chip-warning .chip-ico {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.chip-success .chip-ico,
|
||||
.chip-info .chip-ico {
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.hero-ask-wrap {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
max-width: min(520px, 100%);
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.hero-ask {
|
||||
.home-hero__ask {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-block: 0.375rem;
|
||||
padding-inline: 0.75rem 0.5rem;
|
||||
background: #fff;
|
||||
color: #0f172a;
|
||||
border-radius: 999px;
|
||||
padding: 0.45rem 0.45rem 0.45rem 0.9rem;
|
||||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
|
||||
border: 1px solid rgb(255 255 255 / 0.8);
|
||||
border-radius: 1rem;
|
||||
box-shadow:
|
||||
0 4px 12px rgb(6 78 59 / 0.05),
|
||||
0 1px 2px rgb(15 23 42 / 0.04);
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.ask-ico {
|
||||
color: #14b8a6;
|
||||
flex-shrink: 0;
|
||||
.home-hero__ask:focus-within {
|
||||
border-color: #16c1a8;
|
||||
box-shadow:
|
||||
0 0 0 2px rgb(16 137 125 / 0.18),
|
||||
0 4px 12px rgb(10 92 84 / 0.06);
|
||||
}
|
||||
|
||||
.hero-ask input {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
flex: 1;
|
||||
outline: none;
|
||||
font-size: 0.9rem;
|
||||
.home-hero__ask-input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.hero-ask input::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.hero-ask kbd {
|
||||
font-size: 0.68rem;
|
||||
color: #94a3b8;
|
||||
background: #f1f5f9;
|
||||
.home-hero__ask-kbd {
|
||||
display: none;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.14rem 0.38rem;
|
||||
flex-shrink: 0;
|
||||
background: #f8fafc;
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.ask-send {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: #14b8a6;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
.home-hero__ask-btn {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ask-send:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: wait;
|
||||
.home-hero__ask-btn-inner {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hero-ask-status {
|
||||
margin: 0;
|
||||
padding: 0.55rem 0.85rem;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: #fff;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.7;
|
||||
max-height: 7.5rem;
|
||||
overflow: auto;
|
||||
.home-hero__ask-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-ask-status.err {
|
||||
background: rgba(185, 28, 28, 0.28);
|
||||
}
|
||||
|
||||
.hero-bot {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
/* در RTL ستون ربات سمت چپ است؛ end = لبه بیرونی چپ */
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0.35rem;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero {
|
||||
grid-template-columns: minmax(0, 1fr) 160px;
|
||||
@media (min-width: 640px) {
|
||||
.home-hero__ask-kbd {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.hero-chips {
|
||||
.home-hero__ask-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.home-hero__title {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.home-hero__row {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
max-width: min(420px, 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.hero {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
min-height: auto;
|
||||
padding-inline: 0.85rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-bot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-ask kbd {
|
||||
display: none;
|
||||
.home-hero__greet {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,125 +1,97 @@
|
||||
<script setup lang="ts">
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import {
|
||||
CalendarOutlined,
|
||||
CheckCircleOutlined,
|
||||
FundOutlined,
|
||||
RiseOutlined,
|
||||
TeamOutlined,
|
||||
WarningOutlined,
|
||||
} from '@/icons/ant-bridge';
|
||||
import type { Component } from 'vue';
|
||||
import type { HomeDashboardKpiDto } from '@mento/shared';
|
||||
import { currencySuffix } from '@/lib/money';
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
kpis: HomeDashboardKpiDto[];
|
||||
currency: string;
|
||||
formatValue: (key: string, value: number) => string;
|
||||
formatChange: (value: number | null) => string;
|
||||
}>();
|
||||
|
||||
const icons: Record<string, 'calendar' | 'users' | 'briefcase' | 'check'> = {
|
||||
sales: 'calendar',
|
||||
customers: 'users',
|
||||
'open-deals': 'briefcase',
|
||||
followups: 'check',
|
||||
function salesAmount(value: number) {
|
||||
return new Intl.NumberFormat('fa-IR').format(value);
|
||||
}
|
||||
|
||||
function salesUnit() {
|
||||
return currencySuffix(props.currency);
|
||||
}
|
||||
|
||||
const icons: Record<string, Component> = {
|
||||
sales: FundOutlined,
|
||||
customers: TeamOutlined,
|
||||
'open-deals': CalendarOutlined,
|
||||
followups: CheckCircleOutlined,
|
||||
'win-rate': RiseOutlined,
|
||||
overdue: WarningOutlined,
|
||||
};
|
||||
|
||||
const iconTones: Record<string, string> = {
|
||||
sales: '#14b8a6',
|
||||
customers: '#38bdf8',
|
||||
'open-deals': '#fb923c',
|
||||
followups: '#a78bfa',
|
||||
};
|
||||
function pillClass(kpi: HomeDashboardKpiDto) {
|
||||
if (kpi.key === 'overdue') return 'bg-rose-100/70 text-rose-600';
|
||||
if (kpi.changePercent == null) return 'text-slate-400';
|
||||
return kpi.changePercent < 0 ? 'bg-rose-50 text-rose-600' : 'bg-emerald-50 text-emerald-600';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kpi-row">
|
||||
<article v-for="kpi in kpis" :key="kpi.key" class="kpi-card">
|
||||
<div class="kpi-icon" :style="{ color: iconTones[kpi.key] ?? '#14b8a6' }">
|
||||
<UiIcon :name="icons[kpi.key] ?? 'chart'" :size="20" />
|
||||
</div>
|
||||
<div class="kpi-text">
|
||||
<p class="kpi-label">{{ kpi.label }}</p>
|
||||
<strong class="kpi-value">{{ formatValue(kpi.key, kpi.value) }}</strong>
|
||||
<section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
|
||||
<div
|
||||
v-for="kpi in kpis"
|
||||
:key="kpi.key"
|
||||
class="rounded-2xl p-4 border shadow-sm flex flex-col justify-between transition duration-200 hover:-translate-y-0.5"
|
||||
:class="
|
||||
kpi.key === 'overdue'
|
||||
? 'border-rose-200/70 bg-gradient-to-b from-white to-rose-50/20'
|
||||
: 'bg-white border-slate-200/80'
|
||||
"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-xs font-semibold" :class="kpi.key === 'overdue' ? 'text-rose-700' : 'text-slate-500'">
|
||||
{{ kpi.label }}
|
||||
</span>
|
||||
<span
|
||||
v-if="kpi.changePercent != null"
|
||||
class="kpi-change"
|
||||
:class="{ down: kpi.changePercent < 0 }"
|
||||
class="w-8 h-8 rounded-xl flex items-center justify-center"
|
||||
:class="kpi.key === 'overdue' ? 'bg-rose-100/80 text-rose-600' : 'bg-emerald-50 text-emerald-600'"
|
||||
>
|
||||
<span class="arrow">{{ kpi.changePercent >= 0 ? '↑' : '↓' }}</span>
|
||||
{{ formatChange(kpi.changePercent) }} {{ kpi.changeLabel }}
|
||||
<component :is="icons[kpi.key] ?? FundOutlined" />
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="!font-bold !text-[24px] !leading-8 tracking-tight"
|
||||
:class="kpi.key === 'overdue' ? 'text-rose-600' : 'text-slate-800'"
|
||||
>
|
||||
<template v-if="kpi.key === 'sales'">
|
||||
<span>{{ salesAmount(kpi.value) }}</span><span class="text-[16px] leading-6 font-semibold ms-1.5">{{ salesUnit() }}</span>
|
||||
</template>
|
||||
<template v-else>{{ formatValue(kpi.key, kpi.value) }}</template>
|
||||
</div>
|
||||
<div
|
||||
v-if="kpi.changePercent != null"
|
||||
class="mt-2.5 inline-flex text-[11px] font-semibold px-2 py-0.5 rounded-md"
|
||||
:class="pillClass(kpi)"
|
||||
>
|
||||
{{ formatChange(kpi.changePercent) }} {{ kpi.changeLabel }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="kpi.key === 'overdue'"
|
||||
class="mt-2.5 inline-flex text-[11px] font-semibold px-2 py-0.5 rounded-md bg-rose-100/70 text-rose-600"
|
||||
>
|
||||
نیازمند اقدام فوری
|
||||
</div>
|
||||
<div v-else class="mt-2.5 text-[11px] font-medium text-slate-400">
|
||||
{{ kpi.changeLabel || '—' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.kpi-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
display: flex;
|
||||
gap: 0.85rem;
|
||||
align-items: flex-start;
|
||||
background: #fff;
|
||||
border-radius: var(--radius);
|
||||
padding: 1.1rem 1.15rem;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
|
||||
border: 1px solid #eef2f7;
|
||||
}
|
||||
|
||||
.kpi-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: var(--radius);
|
||||
background: #f8fafc;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
margin: 0;
|
||||
color: #94a3b8;
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 1.18rem;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.kpi-change {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
margin-top: 0.45rem;
|
||||
padding: 0.18rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 0.82rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.kpi-change.down {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.kpi-row {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.kpi-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Empty as AEmpty } from 'ant-design-vue';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
import type { HomeDashboardSliceDto } from '@mento/shared';
|
||||
import UiChart, { CHART_PALETTE, type UiChartOption } from '@/components/ui/UiChart.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
reasons: HomeDashboardSliceDto[];
|
||||
formatAmount: (value: number) => string;
|
||||
}>();
|
||||
|
||||
const rows = computed(() => props.reasons);
|
||||
const hasData = computed(() => rows.value.some((r) => r.count > 0));
|
||||
const total = computed(() => rows.value.reduce((sum, row) => sum + row.count, 0));
|
||||
|
||||
function share(count: number) {
|
||||
if (!total.value) return 0;
|
||||
return Math.round((count / total.value) * 100);
|
||||
}
|
||||
|
||||
const option = computed<UiChartOption>(() => ({
|
||||
animationDuration: 400,
|
||||
color: CHART_PALETTE,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
textStyle: { fontFamily: 'IRANSans, Tahoma, sans-serif' },
|
||||
formatter: (p) => {
|
||||
const item = Array.isArray(p) ? p[0] : p;
|
||||
const row = rows.value.find((r) => r.label === item.name);
|
||||
const amount =
|
||||
row?.amount != null ? `<br/>${props.formatAmount(row.amount)}` : '';
|
||||
return `${item.name}<br/>${toFaDigits(Number(item.value ?? 0))} — ${toFaDigits(item.percent ?? 0)}٪${amount}`;
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['58%', '78%'],
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
|
||||
label: { show: false },
|
||||
data: rows.value.map((r) => ({ name: r.label, value: r.count })),
|
||||
},
|
||||
],
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm h-full flex flex-col">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="font-bold text-slate-800 text-base">دلایل باخت</h3>
|
||||
<span v-if="hasData" class="text-xs text-slate-400">۱۲ ماه اخیر</span>
|
||||
</div>
|
||||
<a-empty v-if="!hasData" description="معاملهٔ باخته‌ای ثبت نشده" />
|
||||
<template v-else>
|
||||
<div class="relative w-36 h-36 mx-auto">
|
||||
<UiChart :option="option" height="144px" />
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
|
||||
<span class="text-2xl font-black text-slate-800">{{ toFaDigits(total) }}</span>
|
||||
<span class="text-[11px] text-slate-400">معامله باخته</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2 mt-3">
|
||||
<div
|
||||
v-for="(item, index) in rows"
|
||||
:key="item.label"
|
||||
class="rounded-xl border border-slate-200/70 bg-slate-50 px-2.5 py-2"
|
||||
>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span
|
||||
class="w-2 h-2 rounded-full shrink-0"
|
||||
:style="{ background: CHART_PALETTE[index % CHART_PALETTE.length] }"
|
||||
></span>
|
||||
<span class="text-[11px] text-slate-600 truncate">{{ item.label }}</span>
|
||||
</div>
|
||||
<div class="text-sm font-black text-slate-800 mt-1">{{ toFaDigits(share(item.count)) }}٪</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user