kavehhn/gameno-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve filters and class pricing controls in dashboard

Browse Source 
Add session class filter, distinct partial payment tag, richer notifications list, class discount/frontend toggles, and remove unused course discount column.
This commit is contained in:
kavehhn
2026-08-16 08:11:42 +03:30
parent 9496587128
commit 2aa99119e2
5 changed files with 147 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/StatusTag.vue
+1 -1
View File
@@ -54,7 +54,7 @@ const severity = computed(() => {
if (props.type === 'payment') {
if (val === 'paid' || val === 'تسویه شده' || val === 'تسویه‌شده') return 'success';
if (val === 'partial' || val === 'پرداخت جزئی') return 'warning';
if (val === 'partial' || val === 'پرداخت جزئی') return 'contrast';
if (val === 'pending' || val === 'در انتظار پرداخت') return 'info';
if (val === 'overdue' || val === 'معوق شده' || val === 'معوق') return 'danger';
}
src/views/classes/ClassFormView.vue
+56 -3
View File
@@ -40,6 +40,31 @@
<InputNumber v-model="form.tuitionFee" :min="0" class="w-full text-sm" suffix=" تومان" />
</div>
<div class="col-12 md:col-3 flex flex-column gap-2">
<label class="font-semibold text-sm">ظرفیت آزاد (نمایش در وب)</label>
<InputNumber v-model="form.freeSpots" :min="0" class="w-full text-sm" placeholder="دستی" />
</div>
<div class="col-12">
<div class="flex flex-column gap-2 p-3 border-1 border-color border-round">
<div class="flex align-items-center gap-2">
<Checkbox v-model="form.hasDiscount" binary inputId="class-has-discount" />
<label for="class-has-discount" class="font-semibold text-sm cursor-pointer">تخفیف روی شهریه</label>
</div>
<div v-if="form.hasDiscount" class="grid mt-1">
<div class="col-12 md:col-4 flex flex-column gap-2">
<label class="font-semibold text-sm">مبلغ تخفیف (تومان)</label>
<InputNumber v-model="form.discount" :min="0" :max="form.tuitionFee || 0" class="w-full text-sm" suffix=" تومان" />
</div>
<div class="col-12 md:col-8 flex align-items-end">
<span class="font-semibold text-color text-sm">
شهریه نهایی: {{ toPersianDigits(finalTuitionFee.toLocaleString()) }} تومان
</span>
</div>
</div>
</div>
</div>
<div class="col-12 md:col-4 flex flex-column gap-2">
<label class="font-semibold text-sm">تاریخ شروع</label>
<DatePicker v-model="form.startDate" class="w-full text-sm" placeholder="1403/01/01" />
@@ -50,9 +75,19 @@
<DatePicker v-model="form.endDate" class="w-full text-sm" placeholder="1403/03/01" />
</div>
<div class="col-12 md:col-4 flex align-items-center gap-2 mt-4">
<InputSwitch v-model="form.isActive" />
<label class="font-semibold text-sm">کلاس فعال است</label>
<div class="col-12 md:col-4 flex flex-column gap-2">
<div class="flex align-items-center gap-2 mt-4">
<InputSwitch v-model="form.isActive" />
<label class="font-semibold text-sm">کلاس فعال است</label>
</div>
</div>
<div class="col-12 md:col-8 flex flex-column gap-1 mt-4">
<div class="flex align-items-center gap-2">
<InputSwitch v-model="form.showOnFrontend" />
<label class="font-semibold text-sm">نمایش در وب‌سایت</label>
</div>
<small class="text-muted text-xs">مستقل از «فعال بودن» — کلاس غیرفعال می‌تواند در سایت پنهان یا نمایش داده شود.</small>
</div>
<div class="col-12">
@@ -259,6 +294,10 @@ const form = reactive({
professor: null,
capacity: 20,
tuitionFee: 0,
hasDiscount: false,
discount: 0,
freeSpots: null,
showOnFrontend: true,
startDate: '',
endDate: '',
days: [],
@@ -269,6 +308,12 @@ const form = reactive({
});
const weekdays = WEEKDAYS;
const finalTuitionFee = computed(() => {
const tuition = Number(form.tuitionFee) || 0;
if (!form.hasDiscount) return tuition;
return Math.max(0, tuition - (Number(form.discount) || 0));
});
const removeDialogMessage = computed(() => {
const name = studentToRemove.value?.name;
return name
@@ -346,6 +391,10 @@ const fetchData = async () => {
professor: data.professor?._id || data.professor || null,
capacity: data.capacity || 20,
tuitionFee: data.tuitionFee || 0,
hasDiscount: Boolean(data.hasDiscount),
discount: data.discount || 0,
freeSpots: data.freeSpots ?? null,
showOnFrontend: data.showOnFrontend !== false,
startDate: toJalaliDisplay(data.startDate),
endDate: toJalaliDisplay(data.endDate),
days: Array.isArray(data.days) ? data.days.map(Number).filter((day) => day >= 0 && day <= 6) : [],
@@ -385,6 +434,10 @@ const handleSubmit = async () => {
professor: form.professor || undefined,
capacity: form.capacity,
tuitionFee: form.tuitionFee,
hasDiscount: form.hasDiscount,
discount: form.hasDiscount ? form.discount : 0,
freeSpots: form.freeSpots,
showOnFrontend: form.showOnFrontend,
startDate: toGregorianIso(form.startDate),
endDate: toGregorianIso(form.endDate),
days: form.days || [],
src/views/courses/CourseListView.vue
-7
View File
@@ -45,13 +45,6 @@
</template>
</Column>
<Column header="تخفیف فعال">
<template #body="{ data }">
<Tag v-if="data.activeDiscount" value="دارای تخفیف" severity="danger" />
<span v-else class="text-muted text-xs">-</span>
</template>
</Column>
<Column header="عملیات" style="width: 130px">
<template #body="{ data }">
<div class="flex align-items-center gap-1">
src/views/notifications/NotificationListView.vue
+54 -13
View File
@@ -22,29 +22,62 @@
</template>
</Column>
<Column field="channel" header="کانال ارسال">
<Column field="channel" header="کانال">
<template #body="{ data }">
<Tag :value="getChannelLabel(data.channel)" :severity="getChannelSeverity(data.channel)" />
</template>
</Column>
<Column field="subject" header="موضوع / متن">
<Column field="subject" header="موضوع">
<template #body="{ data }">
<span class="text-sm truncate max-w-20rem block" :title="data.subject || data.content">
{{ data.subject || data.content || '-' }}
<span class="text-sm font-semibold">{{ data.subject || '—' }}</span>
</template>
</Column>
<Column field="body" header="متن پیام">
<template #body="{ data }">
<span class="text-sm white-space-pre-wrap line-height-3" :title="getBodyText(data)">
{{ truncateText(getBodyText(data), 120) }}
</span>
</template>
</Column>
<Column field="status" header="وضعیت تحویل">
<Column field="relatedEvent" header="رویداد مرتبط">
<template #body="{ data }">
<StatusTag :status="data.status || 'delivered'" type="notification" />
<span class="text-xs text-muted">{{ data.relatedEvent || '—' }}</span>
</template>
</Column>
<Column field="retryCount" header="تعداد تلاش">
<Column field="status" header="وضعیت">
<template #body="{ data }">
{{ toPersianDigits(data.retryCount || 0) }}
<StatusTag :status="data.status || 'pending'" type="notification" />
</template>
</Column>
<Column field="retryCount" header="تلاش">
<template #body="{ data }">
{{ toPersianDigits(data.retryCount || 0) }} / {{ toPersianDigits(data.maxRetries ?? 3) }}
</template>
</Column>
<Column field="sentAt" header="زمان ارسال">
<template #body="{ data }">
{{ data.sentAt ? formatJalali(data.sentAt, 'jYYYY/jMM/jDD HH:mm') : '—' }}
</template>
</Column>
<Column field="createdAt" header="ایجاد">
<template #body="{ data }">
{{ data.createdAt ? formatJalali(data.createdAt, 'jYYYY/jMM/jDD HH:mm') : '—' }}
</template>
</Column>
<Column field="lastError" header="خطا">
<template #body="{ data }">
<span v-if="data.lastError" class="text-xs text-red-500 white-space-pre-wrap" :title="data.lastError">
{{ truncateText(data.lastError, 80) }}
</span>
<span v-else class="text-muted text-xs">—</span>
</template>
</Column>
@@ -52,7 +85,7 @@
<template #body="{ data }">
<PermissionGate permission="notifications:retry">
<Button
v-if="data.status === 'failed' || data.status === 'ناموفق'"
v-if="data.status === 'failed'"
icon="pi pi-refresh"
label="تلاش مجدد"
size="small"
@@ -81,7 +114,7 @@ import Button from 'primevue/button';
import Column from 'primevue/column';
import Tag from 'primevue/tag';
const { toPersianDigits } = usePersianDate();
const { toPersianDigits, formatJalali } = usePersianDate();
const { showSuccess, showError } = useToast();
const {
@@ -97,15 +130,23 @@ const {
const retryingId = ref(null);
const getBodyText = (data) => data.body || data.content || '';
const truncateText = (value, max = 100) => {
const text = String(value || '').trim();
if (!text) return '—';
return text.length > max ? `${text.slice(0, max)}…` : text;
};
const getChannelLabel = (ch) => {
if (ch === 'bale') return 'پیام‌رسان بله';
if (ch === 'baleBot' || ch === 'bale') return 'پیام‌رسان بله';
if (ch === 'sms') return 'پیامک SMS';
if (ch === 'email') return 'ایمیل';
return ch || 'بله';
return ch || '—';
};
const getChannelSeverity = (ch) => {
if (ch === 'bale') return 'success';
if (ch === 'baleBot' || ch === 'bale') return 'success';
if (ch === 'sms') return 'info';
if (ch === 'email') return 'warning';
return 'secondary';
src/views/sessions/SessionListView.vue
+36 -4
View File
@@ -2,9 +2,22 @@
<template>
<div class="session-list-view">
<PageHeader :title="$t('sessions.title')" :subtitle="$t('sessions.subtitle')">
<PermissionGate permission="sessions:create">
<Button :label="$t('sessions.addSession')" icon="pi pi-plus" @click="$router.push('/sessions/create')" />
</PermissionGate>
<div class="flex flex-wrap gap-2 align-items-center">
<Dropdown
v-model="selectedClassId"
:options="classesList"
optionLabel="name"
optionValue="_id"
placeholder="فیلتر کلاس"
showClear
filter
class="w-16rem text-sm"
@change="onClassFilter"
/>
<PermissionGate permission="sessions:create">
<Button :label="$t('sessions.addSession')" icon="pi pi-plus" @click="$router.push('/sessions/create')" />
</PermissionGate>
</div>
</PageHeader>
<DataTableWrapper
@@ -146,6 +159,7 @@ import { useDataTable } from '@/composables/useDataTable';
import { usePersianDate } from '@/composables/usePersianDate';
import { useToast } from '@/composables/useToast';
import { sessionApi } from '@/api/sessionApi';
import { classApi } from '@/api/classApi';
import PageHeader from '@/components/common/PageHeader.vue';
import DataTableWrapper from '@/components/common/DataTableWrapper.vue';
import ConfirmDeleteDialog from '@/components/common/ConfirmDeleteDialog.vue';
@@ -155,10 +169,14 @@ import Button from 'primevue/button';
import Column from 'primevue/column';
import Tag from 'primevue/tag';
import Select from 'primevue/select';
import Dropdown from 'primevue/select';
const { formatJalali, toPersianDigits } = usePersianDate();
const { showSuccess, showError } = useToast();
const classesList = ref([]);
const selectedClassId = ref(null);
const {
items,
totalCount,
@@ -167,7 +185,8 @@ const {
loadData,
onPageChange,
onSort,
onSearch
onSearch,
setFilter
} = useDataTable(sessionApi.getAll, {
sortBy: 'day',
sortOrder: 'asc'
@@ -249,7 +268,20 @@ const applyBulkStatus = async () => {
}
};
const onClassFilter = () => setFilter('classId', selectedClassId.value || '');
const fetchClasses = async () => {
try {
const res = await classApi.getAll({ limit: 200, sortBy: 'name', sortOrder: 'asc' });
const data = res.data || res;
classesList.value = Array.isArray(data) ? data : (data.data || []);
} catch (err) {
console.warn('Failed to load classes for filter:', err);
}
};
onMounted(() => {
fetchClasses();
loadData();
});
</script>