fix(admin-dashboard): refine filter reset controls
This commit is contained in:
@@ -213,13 +213,17 @@ function DateRangeFilter({
|
|||||||
value,
|
value,
|
||||||
onChange,
|
onChange,
|
||||||
onReset,
|
onReset,
|
||||||
|
resetDisabled,
|
||||||
|
showReset = true,
|
||||||
}: {
|
}: {
|
||||||
value: DateRangeState;
|
value: DateRangeState;
|
||||||
onChange: (next: DateRangeState) => void;
|
onChange: (next: DateRangeState) => void;
|
||||||
onReset: () => void;
|
onReset: () => void;
|
||||||
|
resetDisabled?: boolean;
|
||||||
|
showReset?: boolean;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="grid gap-3 md:grid-cols-[1fr_1fr_auto]">
|
<div className={cn("grid gap-3", showReset ? "md:grid-cols-[1fr_1fr_auto]" : "md:grid-cols-2")}>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label>از تاریخ</Label>
|
<Label>از تاریخ</Label>
|
||||||
<DatePicker
|
<DatePicker
|
||||||
@@ -248,13 +252,28 @@ function DateRangeFilter({
|
|||||||
containerClassName="w-full"
|
containerClassName="w-full"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
{showReset ? (
|
||||||
<div className="flex items-end">
|
<div className="flex items-end">
|
||||||
<Button variant="destructive" className="w-full gap-2 md:w-auto" onClick={onReset}>
|
<FilterResetButton disabled={resetDisabled ?? (!value.from && !value.to)} onClick={onReset} />
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FilterResetButton({ disabled, onClick }: { disabled: boolean; onClick: () => void }) {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
className="w-full gap-2 md:w-10 md:px-0"
|
||||||
|
onClick={onClick}
|
||||||
|
disabled={disabled}
|
||||||
|
title="پاککردن"
|
||||||
|
aria-label="پاککردن فیلترها"
|
||||||
|
>
|
||||||
<Eraser className="h-4 w-4" />
|
<Eraser className="h-4 w-4" />
|
||||||
پاککردن
|
<span className="md:sr-only">پاککردن</span>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1047,7 +1066,6 @@ function TopPostsCard({ posts }: { posts: BlogAnalyticsSchema["top_posts"] }) {
|
|||||||
{formatNumberPersian(post.comments)} کامنت
|
{formatNumberPersian(post.comments)} کامنت
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Badge variant="secondary">{toPersianDigits(index + 1)}</Badge>
|
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
@@ -1073,7 +1091,12 @@ function UsersSection({
|
|||||||
return (
|
return (
|
||||||
<div className="space-y-6" dir="rtl">
|
<div className="space-y-6" dir="rtl">
|
||||||
<FilterCard title="فیلتر کاربران" description="این فیلتر فقط روی کاربران و تاریخ عضویت آنها اعمال میشود.">
|
<FilterCard title="فیلتر کاربران" description="این فیلتر فقط روی کاربران و تاریخ عضویت آنها اعمال میشود.">
|
||||||
<DateRangeFilter value={filters} onChange={onFiltersChange} onReset={() => onFiltersChange({ from: "", to: "" })} />
|
<DateRangeFilter
|
||||||
|
value={filters}
|
||||||
|
onChange={onFiltersChange}
|
||||||
|
onReset={() => onFiltersChange({ from: "", to: "" })}
|
||||||
|
resetDisabled={!filters.from && !filters.to}
|
||||||
|
/>
|
||||||
</FilterCard>
|
</FilterCard>
|
||||||
{query.isLoading ? <SectionLoading /> : null}
|
{query.isLoading ? <SectionLoading /> : null}
|
||||||
{query.isError ? <SectionError error={query.error} /> : null}
|
{query.isError ? <SectionError error={query.error} /> : null}
|
||||||
@@ -1131,12 +1154,13 @@ function EventsSection({
|
|||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<FilterCard title="فیلتر رویدادها" description="این فیلتر فقط روی آمار رویداد، ثبتنام، درآمد و تنوع شرکتکنندگان اعمال میشود.">
|
<FilterCard title="فیلتر رویدادها" description="این فیلتر فقط روی آمار رویداد، ثبتنام، درآمد و تنوع شرکتکنندگان اعمال میشود.">
|
||||||
<div className="grid gap-3 xl:grid-cols-[2fr_1.2fr]">
|
<div className="grid gap-3 xl:grid-cols-[2fr_1.2fr_auto]">
|
||||||
<div>
|
<div>
|
||||||
<DateRangeFilter
|
<DateRangeFilter
|
||||||
value={filters}
|
value={filters}
|
||||||
onChange={(next) => onFiltersChange({ ...filters, ...next })}
|
onChange={(next) => onFiltersChange({ ...filters, ...next })}
|
||||||
onReset={reset}
|
onReset={reset}
|
||||||
|
showReset={false}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
@@ -1159,6 +1183,9 @@ function EventsSection({
|
|||||||
emptyText="رویدادی پیدا نشد."
|
emptyText="رویدادی پیدا نشد."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex items-end">
|
||||||
|
<FilterResetButton disabled={!filters.from && !filters.to && !filters.eventId} onClick={reset} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</FilterCard>
|
</FilterCard>
|
||||||
{query.isLoading ? <SectionLoading /> : null}
|
{query.isLoading ? <SectionLoading /> : null}
|
||||||
@@ -1222,7 +1249,12 @@ function BlogSection({
|
|||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<FilterCard title="فیلتر بلاگ" description="این فیلتر فقط روی نوشتهها و تعاملات بلاگ اعمال میشود و به رویدادها وابسته نیست.">
|
<FilterCard title="فیلتر بلاگ" description="این فیلتر فقط روی نوشتهها و تعاملات بلاگ اعمال میشود و به رویدادها وابسته نیست.">
|
||||||
<DateRangeFilter value={filters} onChange={onFiltersChange} onReset={() => onFiltersChange({ from: "", to: "" })} />
|
<DateRangeFilter
|
||||||
|
value={filters}
|
||||||
|
onChange={onFiltersChange}
|
||||||
|
onReset={() => onFiltersChange({ from: "", to: "" })}
|
||||||
|
resetDisabled={!filters.from && !filters.to}
|
||||||
|
/>
|
||||||
</FilterCard>
|
</FilterCard>
|
||||||
{query.isLoading ? <SectionLoading /> : null}
|
{query.isLoading ? <SectionLoading /> : null}
|
||||||
{query.isError ? <SectionError error={query.error} /> : null}
|
{query.isError ? <SectionError error={query.error} /> : null}
|
||||||
|
|||||||
Reference in New Issue
Block a user