louiscklaw/lettersoup-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update table filter, it should be how working,gst

Browse Source
This commit is contained in:
louiscklaw
2025-04-18 02:43:51 +08:00
parent 243b3f1856
commit d863d6d469
8 changed files with 255 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
002_source/cms/src/components/dashboard/customer/customers-pagination.tsx
View File

@@ -25,6 +25,7 @@ export function CustomersPagination({ count, page }: CustomersPaginationProps):
page={page}
rowsPerPage={5}
rowsPerPageOptions={[5, 10, 25]}
//
/>
);
}

80
002_source/cms/src/components/dashboard/lesson_type/lesson-types-filters.tsx
View File

@@ -2,6 +2,7 @@
import * as React from 'react';
import { useRouter } from 'next/navigation';
import { COL_LESSON_TYPES } from '@/constants';
import Button from '@mui/material/Button';
import Chip from '@mui/material/Chip';
import Divider from '@mui/material/Divider';
@@ -16,6 +17,7 @@ import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';
import { paths } from '@/paths';
import { pb } from '@/lib/pb';
import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
import { Option } from '@/components/core/option';
@@ -25,10 +27,10 @@ import { useLessonTypesSelection } from './lesson-types-selection-context';
export interface Filters {
email?: string;
phone?: string;
spStatus?: string;
spName?: string;
spVisible?: string;
spType?: string;
status?: string;
name?: string;
visible?: string;
type?: string;
}
export type SortDir = 'asc' | 'desc';
@@ -45,7 +47,11 @@ export function LessonTypesFilters({
fullData,
}: LessonTypesFiltersProps): React.JSX.Element {
const { t } = useTranslation();
const { email, phone, spStatus: status, spName, spVisible, spType } = filters;
const { email, phone, status, name, visible, type } = filters;
const [totalCount, setTotalCount] = React.useState<number>(0);
const [visibleCount, setVisibleCount] = React.useState<number>(0);
const [hiddenCount, setHiddenCount] = React.useState<number>(0);
const router = useRouter();
@@ -65,12 +71,12 @@ export function LessonTypesFilters({
// The tabs should be generated using API data.
const tabs = [
{ label: 'All', value: '', count: fullData.length },
{ label: t('All'), value: '', count: totalCount },
// { label: 'Active', value: 'active', count: 3 },
// { label: 'Pending', value: 'pending', count: 1 },
// { label: 'Blocked', value: 'blocked', count: 1 },
{ label: t('visible'), value: 'visible', count: getVisible() },
{ label: t('hidden'), value: 'hidden', count: getHidden() },
{ label: t('visible'), value: 'visible', count: visibleCount },
{ label: t('hidden'), value: 'hidden', count: hiddenCount },
] as const;
const updateSearchParams = React.useCallback(
@@ -81,8 +87,8 @@ export function LessonTypesFilters({
searchParams.set('sortDir', newSortDir);
}
if (newFilters.spStatus) {
searchParams.set('status', newFilters.spStatus);
if (newFilters.status) {
searchParams.set('status', newFilters.status);
}
if (newFilters.email) {
@@ -93,16 +99,16 @@ export function LessonTypesFilters({
searchParams.set('phone', newFilters.phone);
}
if (newFilters.spName) {
searchParams.set('name', newFilters.spName);
if (newFilters.name) {
searchParams.set('name', newFilters.name);
}
if (newFilters.spType) {
searchParams.set('type', newFilters.spType);
if (newFilters.type) {
searchParams.set('type', newFilters.type);
}
if (newFilters.spVisible) {
searchParams.set('visible', newFilters.spVisible);
if (newFilters.visible) {
searchParams.set('visible', newFilters.visible);
}
router.push(`${paths.dashboard.lesson_types.list}?${searchParams.toString()}`);
@@ -116,28 +122,28 @@ export function LessonTypesFilters({
const handleStatusChange = React.useCallback(
(_: React.SyntheticEvent, value: string) => {
updateSearchParams({ ...filters, spStatus: value }, sortDir);
updateSearchParams({ ...filters, status: value }, sortDir);
},
[updateSearchParams, filters, sortDir]
);
const handleVisibleChange = React.useCallback(
(_: React.SyntheticEvent, value: string) => {
updateSearchParams({ ...filters, spVisible: value }, sortDir);
updateSearchParams({ ...filters, visible: value }, sortDir);
},
[updateSearchParams, filters, sortDir]
);
const handleNameChange = React.useCallback(
(value?: string) => {
updateSearchParams({ ...filters, spName: value }, sortDir);
updateSearchParams({ ...filters, name: value }, sortDir);
},
[updateSearchParams, filters, sortDir]
);
const handleTypeChange = React.useCallback(
(value?: string) => {
updateSearchParams({ ...filters, spType: value }, sortDir);
updateSearchParams({ ...filters, type: value }, sortDir);
},
[updateSearchParams, filters, sortDir]
);
@@ -163,11 +169,33 @@ export function LessonTypesFilters({
[updateSearchParams, filters]
);
const hasFilters = status || email || phone || spVisible || spName || spType;
React.useEffect(() => {
const fetchCount = async (): Promise<void> => {
try {
const { totalItems: tc } = await pb.collection(COL_LESSON_TYPES).getList(1, 9999);
setTotalCount(tc);
const { totalItems: vc } = await pb
.collection(COL_LESSON_TYPES)
.getList(1, 9999, { filter: 'visible = "visible"' });
setVisibleCount(vc);
const { totalItems: hc } = await pb
.collection(COL_LESSON_TYPES)
.getList(1, 9999, { filter: 'visible = "hidden"' });
setHiddenCount(hc);
} catch (error) {
//
}
};
void fetchCount();
}, []);
const hasFilters = status || email || phone || visible || name || type;
return (
<div>
<Tabs onChange={handleVisibleChange} sx={{ px: 3 }} value={spVisible ?? ''} variant="scrollable">
<Tabs onChange={handleVisibleChange} sx={{ px: 3 }} value={visible ?? ''} variant="scrollable">
{tabs.map((tab) => (
<Tab
icon={<Chip label={tab.count} size="small" variant="soft" />}
@@ -184,7 +212,7 @@ export function LessonTypesFilters({
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap', px: 3, py: 2 }}>
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto', flexWrap: 'wrap' }}>
<FilterButton
displayValue={spName}
displayValue={name}
label={t('Name')}
onFilterApply={(value) => {
handleNameChange(value as string);
@@ -193,11 +221,11 @@ export function LessonTypesFilters({
handleNameChange();
}}
popover={<NameFilterPopover />}
value={spName}
value={name}
/>
<FilterButton
displayValue={spType}
displayValue={type}
label={t('Type')}
onFilterApply={(value) => {
handleTypeChange(value as string);
@@ -206,7 +234,7 @@ export function LessonTypesFilters({
handleTypeChange();
}}
popover={<TypeFilterPopover />}
value={spType}
value={type}
/>
{/*

35
002_source/cms/src/components/dashboard/lesson_type/lesson-types-pagination.tsx
View File

@@ -10,48 +10,39 @@ function noop(): void {
interface LessonTypesPaginationProps {
count: number;
page: number;
setPage: (page: number) => void;
setRowsPerPage: (page: number) => void;
rowsPerPage: number;
setRowsPerPage: React.Dispatch<React.SetStateAction<number>>;
setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
}
export function LessonTypesPagination({
count,
page,
rowsPerPage,
setPage,
setRowsPerPage,
setCurrentPage,
rowsPerPage,
}: LessonTypesPaginationProps): React.JSX.Element {
// You should implement the pagination using a similar logic as the filters.
// Note that when page change, you should keep the filter search params.
const handleChangePage = (event: unknown, newPage: number) => {
setPage(newPage);
};
function handleRowsPerPageChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void {
console.log(e.target.value);
console.log(parseInt(e.target.value));
setRowsPerPage(parseInt(e.target.value));
}
function handlePageChange(e: React.MouseEvent<HTMLButtonElement> | null): void {
// console.log(e.target.value);
// console.log(parseInt(e.target.value));
// setCurrentPage(parseInt(e.target.value));
}
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
setRowsPerPage(parseInt(event.target.value));
// console.log(parseInt(event.target.value));
};
return (
<TablePagination
component="div"
count={count}
page={page}
//
rowsPerPage={rowsPerPage}
rowsPerPageOptions={[5, 10, 25]}
//
onPageChange={(e) => {
handlePageChange(e);
}}
onRowsPerPageChange={(e) => {
handleRowsPerPageChange(e);
}}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
);
}

12
002_source/cms/src/components/dashboard/lesson_type/lesson-types-table.tsx
View File

@@ -83,27 +83,27 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonT
</Stack>
),
name: 'Lesson position',
width: '150px',
width: '50px',
},
{
formatter: (row): React.JSX.Element => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const { t } = useTranslation();
// const { t } = useTranslation();
const mapping = {
active: { label: 'Active', icon: <CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" /> },
blocked: { label: 'Blocked', icon: <MinusIcon color="var(--mui-palette-error-main)" /> },
pending: { label: 'Pending', icon: <ClockIcon color="var(--mui-palette-warning-main)" weight="fill" /> },
visible: {
label: t('visible'),
label: 'visible',
icon: <ClockIcon color="var(--mui-palette-success-main)" weight="fill" />,
},
hidden: {
label: t('hidden'),
label: 'hidden',
icon: <ClockIcon color="var(--mui-palette-warning-main)" weight="fill" />,
},
no_value: {
label: t('no_value'),
label: 'no_value',
icon: <ClockIcon color="var(--mui-palette-warning-main)" weight="fill" />,
},
} as const;
@@ -123,7 +123,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonT
);
},
name: 'visible',
width: '150px',
width: '100px',
},
{
formatter(row) {