Mahdi/CRM_Montzar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

club home redesign; deal card menu: delete with confirmation

Browse Source
This commit is contained in:
Mahdi
2026-10-12 12:39:52 +03:30
parent b43ed68e82
commit 8af78047d9
17 changed files with 569 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/gamification/ClubLeaderboard.vue
+156 -179
View File
@@ -1,14 +1,17 @@
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import type { GamificationLeaderboardDto, GamificationLeaderEntryDto, GamificationPeriod } from '@mento/shared';
import { GAMIFICATION_PERIOD_LABELS } from '@mento/shared';
import UiIcon from '@/components/UiIcon.vue';
import UserAvatar from '@/components/UserAvatar.vue';
import { api } from '@/lib/api';
import { toFaDigits } from '@/lib/jalali';
import { apiError, faNum } from '@/lib/gamification';
import crownImg from '@/assets/club/crown.png';
const PERIODS: GamificationPeriod[] = ['today', 'week', 'month', 'quarter', 'year', 'all'];
const PERIODS: Array<{ value: GamificationPeriod; label: string }> = [
{ value: 'today', label: 'امروز' },
{ value: 'month', label: 'این ماه' },
{ value: 'all', label: 'همه زمان‌ها' },
];
const period = ref<GamificationPeriod>('month');
const board = ref<GamificationLeaderboardDto | null>(null);
@@ -38,90 +41,82 @@ onMounted(() => {
onBeforeUnmount(() => window.removeEventListener('gamification:updated', load));
const top3 = computed(() => (board.value?.items ?? []).slice(0, 3).filter((x) => x.score > 0));
/** ترتیب نمایش از راست: سوم، اول، دوم */
const podium = computed(() => {
const [a, b, c] = top3.value;
return [c, a, b].filter((x): x is GamificationLeaderEntryDto => !!x);
});
const rest = computed(() => {
const items = board.value?.items ?? [];
return top3.value.length ? items.slice(top3.value.length) : items;
});
function chgClass(change: number | null) {
return change && change > 0 ? 'up' : change && change < 0 ? 'down' : '';
}
const meOutside = computed(() => {
const b = board.value;
if (!b?.me) return null;
return b.items.some((i) => i.userId === b.me!.userId) ? null : b.me;
});
function changeLabel(e: GamificationLeaderEntryDto) {
if (!e.change) return '';
return `${toFaDigits(Math.abs(e.change))}`;
}
const MEDALS = ['#f59e0b', '#94a3b8', '#c2410c'];
</script>
<template>
<section class="board">
<header class="b-head">
<div>
<h3><UiIcon name="trophy" :size="18" /> جدول امتیازات</h3>
<small v-if="board">{{ toFaDigits(board.totalUsers) }} همکار در رقابت</small>
</div>
<div class="periods" role="tablist">
<button
v-for="p in PERIODS"
:key="p"
type="button"
role="tab"
:aria-selected="period === p"
:class="{ on: period === p }"
@click="period = p"
>
{{ GAMIFICATION_PERIOD_LABELS[p] }}
</button>
</div>
</header>
<div class="periods" role="tablist" aria-label="بازهٔ جدول امتیازات">
<button
v-for="p in PERIODS"
:key="p.value"
type="button"
role="tab"
:aria-selected="period === p.value"
:class="{ on: period === p.value }"
@click="period = p.value"
>
{{ p.label }}
</button>
</div>
<p v-if="error" class="err">{{ error }}</p>
<div v-if="top3.length" class="top3" :class="{ loading }">
<div v-if="podium.length" class="top3" :class="{ loading }">
<div
v-for="(e, i) in top3"
v-for="e in podium"
:key="e.userId"
class="t-card"
:class="{ me: e.isMe }"
:style="{ '--m': MEDALS[i] }"
:class="[`r${e.rank}`, { me: e.isMe }]"
>
<span class="t-rank">{{ toFaDigits(e.rank) }}</span>
<UserAvatar :user-id="e.userId" :has-avatar="e.hasAvatar" :name="e.fullName" :size="46" />
<img v-if="e.rank === 1" :src="crownImg" alt="" class="t-crown" />
<span class="t-ava">
<UserAvatar :user-id="e.userId" :has-avatar="e.hasAvatar" :name="e.fullName" :size="e.rank === 1 ? 50 : 46" />
</span>
<strong>{{ e.isMe ? 'شما' : e.fullName }}</strong>
<small>{{ e.levelName }}</small>
<b>{{ faNum(e.score) }} <span>امتیاز</span></b>
<small>{{ faNum(e.score) }} امتیاز</small>
</div>
</div>
<ol class="rows" :class="{ loading }">
<li v-for="e in rest" :key="e.userId" :class="{ me: e.isMe }">
<span class="rank">{{ toFaDigits(e.rank) }}</span>
<UserAvatar :user-id="e.userId" :has-avatar="e.hasAvatar" :name="e.fullName" :size="32" />
<span class="who">
<b>{{ e.isMe ? 'شما' : e.fullName }}</b>
<small>{{ e.levelName }}</small>
</span>
<span v-if="e.change" class="chg" :class="e.change > 0 ? 'up' : 'down'">
{{ e.change > 0 ? '▲' : '▼' }}{{ changeLabel(e) }}
<span class="chg" :class="chgClass(e.change)">
<template v-if="e.change">{{ e.change > 0 ? '▲' : '▼' }} {{ toFaDigits(Math.abs(e.change)) }}</template>
</span>
<span class="score">{{ faNum(e.score) }}</span>
<b class="who">{{ e.isMe ? 'شما' : e.fullName }}</b>
<UserAvatar :user-id="e.userId" :has-avatar="e.hasAvatar" :name="e.fullName" :size="28" />
<span class="rank">{{ toFaDigits(e.rank) }}</span>
</li>
<template v-if="meOutside">
<li class="sep" aria-hidden="true">⋯</li>
<li class="me">
<span class="rank">{{ toFaDigits(meOutside.rank) }}</span>
<UserAvatar :user-id="meOutside.userId" :has-avatar="meOutside.hasAvatar" :name="meOutside.fullName" :size="32" />
<span class="who">
<b>شما</b>
<small>{{ meOutside.levelName }}</small>
</span>
<span v-if="meOutside.change" class="chg" :class="meOutside.change > 0 ? 'up' : 'down'">
{{ meOutside.change > 0 ? '▲' : '▼' }}{{ changeLabel(meOutside) }}
<span class="chg" :class="chgClass(meOutside.change)">
<template v-if="meOutside.change">
{{ meOutside.change > 0 ? '▲' : '▼' }} {{ toFaDigits(Math.abs(meOutside.change)) }}
</template>
</span>
<span class="score">{{ faNum(meOutside.score) }}</span>
<b class="who">شما</b>
<UserAvatar :user-id="meOutside.userId" :has-avatar="meOutside.hasAvatar" :name="meOutside.fullName" :size="28" />
<span class="rank">{{ toFaDigits(meOutside.rank) }}</span>
</li>
</template>
<li v-if="board && !board.items.length" class="empty">هنوز کسی در این بازه امتیاز نگرفته است.</li>
@@ -133,73 +128,40 @@ const MEDALS = ['#f59e0b', '#94a3b8', '#c2410c'];
.board {
background: var(--surface);
border: 1px solid var(--line);
border-radius: calc(var(--radius) + 4px);
padding: var(--sp-4);
border-radius: 16px;
padding: 0.75rem 0.9rem 0.5rem;
box-shadow: var(--shadow-xs);
display: grid;
gap: var(--sp-3);
grid-template-columns: minmax(0, 1fr);
gap: 0.9rem;
min-width: 0;
}
.b-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
flex-wrap: wrap;
}
.b-head h3 {
margin: 0;
display: flex;
align-items: center;
gap: 6px;
font-size: var(--fs-md);
color: var(--ink);
}
.b-head h3 :deep(svg) {
color: #f59e0b;
}
.b-head small {
font-size: var(--fs-xs);
color: var(--muted);
}
.periods {
display: flex;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
background: var(--surface-subtle);
border-radius: 999px;
padding: 3px;
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.periods::-webkit-scrollbar {
display: none;
border-radius: 12px;
background: #f8fafc;
}
.periods button {
border: 0;
background: none;
border-radius: 999px;
padding: 0.3rem 0.7rem;
border-radius: 10px;
padding: 0.5rem 0.6rem;
font: inherit;
font-size: var(--fs-xs);
font-size: 0.82rem;
font-weight: 700;
color: var(--muted);
color: #64748b;
cursor: pointer;
white-space: nowrap;
flex: 0 0 auto;
}
.periods button.on {
background: var(--surface);
color: var(--accent-deep);
box-shadow: var(--shadow-xs);
background: #e0e7ff;
color: #1e1b4b;
}
.err {
@@ -211,45 +173,69 @@ const MEDALS = ['#f59e0b', '#94a3b8', '#c2410c'];
.top3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-2);
gap: 0.6rem;
align-items: end;
padding-top: 0.8rem;
}
.t-card {
--m: #f59e0b;
--bg: #e0e7ff;
--ring: #a5b4fc;
position: relative;
display: grid;
justify-items: center;
gap: 3px;
padding: var(--sp-3) var(--sp-2);
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--m) 35%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--m) 12%, var(--surface)), var(--surface));
gap: 4px;
padding: 0 0.4rem 0.7rem;
border-radius: 14px;
background: var(--bg);
text-align: center;
min-width: 0;
margin-top: 1.6rem;
}
.t-card.r1 {
--bg: #fef3c7;
--ring: #f59e0b;
padding-bottom: 1rem;
margin-top: 0;
}
.t-card.r3 {
--bg: #ffedd5;
--ring: #fb923c;
}
.t-card.me {
box-shadow: 0 0 0 2px var(--accent);
}
.t-rank {
.t-crown {
position: absolute;
top: 8px;
inset-inline-start: 8px;
width: 22px;
height: 22px;
border-radius: 50%;
top: -1.55rem;
width: 30px;
height: 30px;
object-fit: contain;
z-index: 1;
}
.t-ava {
margin-top: -1.4rem;
padding: 3px;
border-radius: 999px;
background: #fff;
box-shadow: 0 0 0 3px var(--ring);
display: grid;
place-items: center;
background: var(--m);
color: #fff;
font-size: 0.75rem;
font-weight: 800;
}
.t-card.r1 .t-ava {
margin-top: -0.4rem;
}
.t-card strong {
font-size: var(--fs-sm);
color: var(--ink);
margin-top: 0.3rem;
font-size: 0.92rem;
font-weight: 800;
color: #0f172a;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
@@ -257,20 +243,13 @@ const MEDALS = ['#f59e0b', '#94a3b8', '#c2410c'];
}
.t-card small {
font-size: 0.7rem;
color: var(--muted);
font-size: 0.76rem;
color: #475569;
}
.t-card b {
font-size: var(--fs-md);
font-weight: 800;
color: var(--ink);
}
.t-card b span {
font-size: 0.68rem;
font-weight: 600;
color: var(--muted);
.t-card.r1 small {
color: #b45309;
font-weight: 700;
}
.rows {
@@ -278,81 +257,78 @@ const MEDALS = ['#f59e0b', '#94a3b8', '#c2410c'];
margin: 0;
padding: 0;
display: grid;
gap: 4px;
}
.rows li {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 7px var(--sp-2);
border-radius: 10px;
transition: background 0.15s ease;
gap: 0.6rem;
padding: 0.6rem 0.7rem;
border-bottom: 1px solid #f1f5f9;
}
.rows li:hover {
background: var(--surface-hover);
.rows li:last-child {
border-bottom: 0;
}
.rows li.me {
background: var(--accent-subtle);
box-shadow: inset 0 0 0 1px var(--accent-soft);
background: #fef9e7;
border-radius: 10px;
border-bottom-color: transparent;
}
.rows li.me .score,
.rows li.me .who {
font-weight: 800;
}
.rows li.sep {
justify-content: center;
color: var(--muted-light);
padding: 0;
border: 0;
}
.rank {
width: 26px;
text-align: center;
.chg {
min-width: 1.8rem;
font-size: 0.74rem;
font-weight: 800;
color: var(--muted);
font-size: var(--fs-sm);
flex: 0 0 auto;
}
.chg.up {
color: #16a34a;
}
.chg.down {
color: #ef4444;
}
.score {
min-width: 2.8rem;
font-size: 0.84rem;
font-weight: 600;
color: #0f172a;
flex: 0 0 auto;
}
.who {
flex: 1;
min-width: 0;
display: grid;
}
.who b {
font-size: var(--fs-sm);
color: var(--ink);
text-align: end;
font-size: 0.84rem;
font-weight: 600;
color: #0f172a;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.who small {
font-size: 0.68rem;
color: var(--muted);
}
.chg {
font-size: 0.7rem;
font-weight: 800;
flex: 0 0 auto;
}
.chg.up {
color: var(--success-deep);
}
.chg.down {
color: var(--muted-light);
}
.score {
font-weight: 800;
color: var(--ink);
font-size: var(--fs-sm);
min-width: 52px;
text-align: end;
.rank {
width: 1.6rem;
text-align: center;
font-size: 0.82rem;
color: #64748b;
flex: 0 0 auto;
}
@@ -364,6 +340,7 @@ const MEDALS = ['#f59e0b', '#94a3b8', '#c2410c'];
justify-content: center;
color: var(--muted);
font-size: var(--fs-sm);
border: 0 !important;
}
@media (max-width: 520px) {
@@ -371,8 +348,8 @@ const MEDALS = ['#f59e0b', '#94a3b8', '#c2410c'];
gap: 6px;
}
.t-card {
padding: var(--sp-2) 4px;
.t-card strong {
font-size: 0.8rem;
}
}
</style>