feat: improve filters and class pricing controls in dashboard
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:
@@ -54,7 +54,7 @@ const severity = computed(() => {
|
|||||||
|
|
||||||
if (props.type === 'payment') {
|
if (props.type === 'payment') {
|
||||||
if (val === 'paid' || val === 'تسویه شده' || val === 'تسویهشده') return 'success';
|
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 === 'pending' || val === 'در انتظار پرداخت') return 'info';
|
||||||
if (val === 'overdue' || val === 'معوق شده' || val === 'معوق') return 'danger';
|
if (val === 'overdue' || val === 'معوق شده' || val === 'معوق') return 'danger';
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -40,6 +40,31 @@
|
|||||||
<InputNumber v-model="form.tuitionFee" :min="0" class="w-full text-sm" suffix=" تومان" />
|
<InputNumber v-model="form.tuitionFee" :min="0" class="w-full text-sm" suffix=" تومان" />
|
||||||
</div>
|
</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">
|
<div class="col-12 md:col-4 flex flex-column gap-2">
|
||||||
<label class="font-semibold text-sm">تاریخ شروع</label>
|
<label class="font-semibold text-sm">تاریخ شروع</label>
|
||||||
<DatePicker v-model="form.startDate" class="w-full text-sm" placeholder="1403/01/01" />
|
<DatePicker v-model="form.startDate" class="w-full text-sm" placeholder="1403/01/01" />
|
||||||
@@ -50,10 +75,20 @@
|
|||||||
<DatePicker v-model="form.endDate" class="w-full text-sm" placeholder="1403/03/01" />
|
<DatePicker v-model="form.endDate" class="w-full text-sm" placeholder="1403/03/01" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-4 flex align-items-center gap-2 mt-4">
|
<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" />
|
<InputSwitch v-model="form.isActive" />
|
||||||
<label class="font-semibold text-sm">کلاس فعال است</label>
|
<label class="font-semibold text-sm">کلاس فعال است</label>
|
||||||
</div>
|
</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">
|
<div class="col-12">
|
||||||
<div class="class-schedule-fields p-3 border-1 border-color border-round">
|
<div class="class-schedule-fields p-3 border-1 border-color border-round">
|
||||||
@@ -259,6 +294,10 @@ const form = reactive({
|
|||||||
professor: null,
|
professor: null,
|
||||||
capacity: 20,
|
capacity: 20,
|
||||||
tuitionFee: 0,
|
tuitionFee: 0,
|
||||||
|
hasDiscount: false,
|
||||||
|
discount: 0,
|
||||||
|
freeSpots: null,
|
||||||
|
showOnFrontend: true,
|
||||||
startDate: '',
|
startDate: '',
|
||||||
endDate: '',
|
endDate: '',
|
||||||
days: [],
|
days: [],
|
||||||
@@ -269,6 +308,12 @@ const form = reactive({
|
|||||||
});
|
});
|
||||||
const weekdays = WEEKDAYS;
|
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 removeDialogMessage = computed(() => {
|
||||||
const name = studentToRemove.value?.name;
|
const name = studentToRemove.value?.name;
|
||||||
return name
|
return name
|
||||||
@@ -346,6 +391,10 @@ const fetchData = async () => {
|
|||||||
professor: data.professor?._id || data.professor || null,
|
professor: data.professor?._id || data.professor || null,
|
||||||
capacity: data.capacity || 20,
|
capacity: data.capacity || 20,
|
||||||
tuitionFee: data.tuitionFee || 0,
|
tuitionFee: data.tuitionFee || 0,
|
||||||
|
hasDiscount: Boolean(data.hasDiscount),
|
||||||
|
discount: data.discount || 0,
|
||||||
|
freeSpots: data.freeSpots ?? null,
|
||||||
|
showOnFrontend: data.showOnFrontend !== false,
|
||||||
startDate: toJalaliDisplay(data.startDate),
|
startDate: toJalaliDisplay(data.startDate),
|
||||||
endDate: toJalaliDisplay(data.endDate),
|
endDate: toJalaliDisplay(data.endDate),
|
||||||
days: Array.isArray(data.days) ? data.days.map(Number).filter((day) => day >= 0 && day <= 6) : [],
|
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,
|
professor: form.professor || undefined,
|
||||||
capacity: form.capacity,
|
capacity: form.capacity,
|
||||||
tuitionFee: form.tuitionFee,
|
tuitionFee: form.tuitionFee,
|
||||||
|
hasDiscount: form.hasDiscount,
|
||||||
|
discount: form.hasDiscount ? form.discount : 0,
|
||||||
|
freeSpots: form.freeSpots,
|
||||||
|
showOnFrontend: form.showOnFrontend,
|
||||||
startDate: toGregorianIso(form.startDate),
|
startDate: toGregorianIso(form.startDate),
|
||||||
endDate: toGregorianIso(form.endDate),
|
endDate: toGregorianIso(form.endDate),
|
||||||
days: form.days || [],
|
days: form.days || [],
|
||||||
|
|||||||
@@ -45,13 +45,6 @@
|
|||||||
</template>
|
</template>
|
||||||
</Column>
|
</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">
|
<Column header="عملیات" style="width: 130px">
|
||||||
<template #body="{ data }">
|
<template #body="{ data }">
|
||||||
<div class="flex align-items-center gap-1">
|
<div class="flex align-items-center gap-1">
|
||||||
|
|||||||
@@ -22,29 +22,62 @@
|
|||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
|
|
||||||
<Column field="channel" header="کانال ارسال">
|
<Column field="channel" header="کانال">
|
||||||
<template #body="{ data }">
|
<template #body="{ data }">
|
||||||
<Tag :value="getChannelLabel(data.channel)" :severity="getChannelSeverity(data.channel)" />
|
<Tag :value="getChannelLabel(data.channel)" :severity="getChannelSeverity(data.channel)" />
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
|
|
||||||
<Column field="subject" header="موضوع / متن">
|
<Column field="subject" header="موضوع">
|
||||||
<template #body="{ data }">
|
<template #body="{ data }">
|
||||||
<span class="text-sm truncate max-w-20rem block" :title="data.subject || data.content">
|
<span class="text-sm font-semibold">{{ data.subject || '—' }}</span>
|
||||||
{{ data.subject || data.content || '-' }}
|
</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>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
|
|
||||||
<Column field="status" header="وضعیت تحویل">
|
<Column field="relatedEvent" header="رویداد مرتبط">
|
||||||
<template #body="{ data }">
|
<template #body="{ data }">
|
||||||
<StatusTag :status="data.status || 'delivered'" type="notification" />
|
<span class="text-xs text-muted">{{ data.relatedEvent || '—' }}</span>
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
|
|
||||||
<Column field="retryCount" header="تعداد تلاش">
|
<Column field="status" header="وضعیت">
|
||||||
<template #body="{ data }">
|
<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>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
|
|
||||||
@@ -52,7 +85,7 @@
|
|||||||
<template #body="{ data }">
|
<template #body="{ data }">
|
||||||
<PermissionGate permission="notifications:retry">
|
<PermissionGate permission="notifications:retry">
|
||||||
<Button
|
<Button
|
||||||
v-if="data.status === 'failed' || data.status === 'ناموفق'"
|
v-if="data.status === 'failed'"
|
||||||
icon="pi pi-refresh"
|
icon="pi pi-refresh"
|
||||||
label="تلاش مجدد"
|
label="تلاش مجدد"
|
||||||
size="small"
|
size="small"
|
||||||
@@ -81,7 +114,7 @@ import Button from 'primevue/button';
|
|||||||
import Column from 'primevue/column';
|
import Column from 'primevue/column';
|
||||||
import Tag from 'primevue/tag';
|
import Tag from 'primevue/tag';
|
||||||
|
|
||||||
const { toPersianDigits } = usePersianDate();
|
const { toPersianDigits, formatJalali } = usePersianDate();
|
||||||
const { showSuccess, showError } = useToast();
|
const { showSuccess, showError } = useToast();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@@ -97,15 +130,23 @@ const {
|
|||||||
|
|
||||||
const retryingId = ref(null);
|
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) => {
|
const getChannelLabel = (ch) => {
|
||||||
if (ch === 'bale') return 'پیامرسان بله';
|
if (ch === 'baleBot' || ch === 'bale') return 'پیامرسان بله';
|
||||||
if (ch === 'sms') return 'پیامک SMS';
|
if (ch === 'sms') return 'پیامک SMS';
|
||||||
if (ch === 'email') return 'ایمیل';
|
if (ch === 'email') return 'ایمیل';
|
||||||
return ch || 'بله';
|
return ch || '—';
|
||||||
};
|
};
|
||||||
|
|
||||||
const getChannelSeverity = (ch) => {
|
const getChannelSeverity = (ch) => {
|
||||||
if (ch === 'bale') return 'success';
|
if (ch === 'baleBot' || ch === 'bale') return 'success';
|
||||||
if (ch === 'sms') return 'info';
|
if (ch === 'sms') return 'info';
|
||||||
if (ch === 'email') return 'warning';
|
if (ch === 'email') return 'warning';
|
||||||
return 'secondary';
|
return 'secondary';
|
||||||
|
|||||||
@@ -2,9 +2,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="session-list-view">
|
<div class="session-list-view">
|
||||||
<PageHeader :title="$t('sessions.title')" :subtitle="$t('sessions.subtitle')">
|
<PageHeader :title="$t('sessions.title')" :subtitle="$t('sessions.subtitle')">
|
||||||
|
<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">
|
<PermissionGate permission="sessions:create">
|
||||||
<Button :label="$t('sessions.addSession')" icon="pi pi-plus" @click="$router.push('/sessions/create')" />
|
<Button :label="$t('sessions.addSession')" icon="pi pi-plus" @click="$router.push('/sessions/create')" />
|
||||||
</PermissionGate>
|
</PermissionGate>
|
||||||
|
</div>
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
|
|
||||||
<DataTableWrapper
|
<DataTableWrapper
|
||||||
@@ -146,6 +159,7 @@ import { useDataTable } from '@/composables/useDataTable';
|
|||||||
import { usePersianDate } from '@/composables/usePersianDate';
|
import { usePersianDate } from '@/composables/usePersianDate';
|
||||||
import { useToast } from '@/composables/useToast';
|
import { useToast } from '@/composables/useToast';
|
||||||
import { sessionApi } from '@/api/sessionApi';
|
import { sessionApi } from '@/api/sessionApi';
|
||||||
|
import { classApi } from '@/api/classApi';
|
||||||
import PageHeader from '@/components/common/PageHeader.vue';
|
import PageHeader from '@/components/common/PageHeader.vue';
|
||||||
import DataTableWrapper from '@/components/common/DataTableWrapper.vue';
|
import DataTableWrapper from '@/components/common/DataTableWrapper.vue';
|
||||||
import ConfirmDeleteDialog from '@/components/common/ConfirmDeleteDialog.vue';
|
import ConfirmDeleteDialog from '@/components/common/ConfirmDeleteDialog.vue';
|
||||||
@@ -155,10 +169,14 @@ import Button from 'primevue/button';
|
|||||||
import Column from 'primevue/column';
|
import Column from 'primevue/column';
|
||||||
import Tag from 'primevue/tag';
|
import Tag from 'primevue/tag';
|
||||||
import Select from 'primevue/select';
|
import Select from 'primevue/select';
|
||||||
|
import Dropdown from 'primevue/select';
|
||||||
|
|
||||||
const { formatJalali, toPersianDigits } = usePersianDate();
|
const { formatJalali, toPersianDigits } = usePersianDate();
|
||||||
const { showSuccess, showError } = useToast();
|
const { showSuccess, showError } = useToast();
|
||||||
|
|
||||||
|
const classesList = ref([]);
|
||||||
|
const selectedClassId = ref(null);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
items,
|
items,
|
||||||
totalCount,
|
totalCount,
|
||||||
@@ -167,7 +185,8 @@ const {
|
|||||||
loadData,
|
loadData,
|
||||||
onPageChange,
|
onPageChange,
|
||||||
onSort,
|
onSort,
|
||||||
onSearch
|
onSearch,
|
||||||
|
setFilter
|
||||||
} = useDataTable(sessionApi.getAll, {
|
} = useDataTable(sessionApi.getAll, {
|
||||||
sortBy: 'day',
|
sortBy: 'day',
|
||||||
sortOrder: 'asc'
|
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(() => {
|
onMounted(() => {
|
||||||
|
fetchClasses();
|
||||||
loadData();
|
loadData();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user