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

100
002_source/cms/src/app/dashboard/customers/page.tsx
View File

@@ -70,6 +70,106 @@ const customers = [
status: 'active',
createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
},
{
id: 'USR-005',
name: 'Fran Perez',
avatar: '/assets/avatar-5.png',
email: 'fran.perez@domain.com',
phone: '(815) 704-0045',
quota: 50,
status: 'active',
createdAt: dayjs().subtract(1, 'hour').toDate(),
},
{
id: 'USR-004',
name: 'Penjani Inyene',
avatar: '/assets/avatar-4.png',
email: 'penjani.inyene@domain.com',
phone: '(803) 937-8925',
quota: 100,
status: 'active',
createdAt: dayjs().subtract(3, 'hour').toDate(),
},
{
id: 'USR-003',
name: 'Carson Darrin',
avatar: '/assets/avatar-3.png',
email: 'carson.darrin@domain.com',
phone: '(715) 278-5041',
quota: 10,
status: 'blocked',
createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
},
{
id: 'USR-002',
name: 'Siegbert Gottfried',
avatar: '/assets/avatar-2.png',
email: 'siegbert.gottfried@domain.com',
phone: '(603) 766-0431',
quota: 0,
status: 'pending',
createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
},
{
id: 'USR-001',
name: 'Miron Vitold',
avatar: '/assets/avatar-1.png',
email: 'miron.vitold@domain.com',
phone: '(425) 434-5535',
quota: 50,
status: 'active',
createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
},
{
id: 'USR-005',
name: 'Fran Perez',
avatar: '/assets/avatar-5.png',
email: 'fran.perez@domain.com',
phone: '(815) 704-0045',
quota: 50,
status: 'active',
createdAt: dayjs().subtract(1, 'hour').toDate(),
},
{
id: 'USR-004',
name: 'Penjani Inyene',
avatar: '/assets/avatar-4.png',
email: 'penjani.inyene@domain.com',
phone: '(803) 937-8925',
quota: 100,
status: 'active',
createdAt: dayjs().subtract(3, 'hour').toDate(),
},
{
id: 'USR-003',
name: 'Carson Darrin',
avatar: '/assets/avatar-3.png',
email: 'carson.darrin@domain.com',
phone: '(715) 278-5041',
quota: 10,
status: 'blocked',
createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
},
{
id: 'USR-002',
name: 'Siegbert Gottfried',
avatar: '/assets/avatar-2.png',
email: 'siegbert.gottfried@domain.com',
phone: '(603) 766-0431',
quota: 0,
status: 'pending',
createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
},
{
id: 'USR-001',
name: 'Miron Vitold',
avatar: '/assets/avatar-1.png',
email: 'miron.vitold@domain.com',
phone: '(425) 434-5535',
quota: 50,
status: 'active',
createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
},
] satisfies Customer[];
interface PageProps {

2
002_source/cms/src/app/dashboard/lesson_types/[type_id]/page.tsx
View File

@@ -47,7 +47,7 @@ import { ShippingAddress } from '@/components/dashboard/lesson_type/shipping-add
import FormLoading from '@/components/loading';
export default function Page(): React.JSX.Element {
const { t } = useTranslation(['common']);
const { t } = useTranslation(['common', 'lesson_type']);
const router = useRouter();
//
const { type_id: typeId } = useParams<{ type_id: string }>();

150
002_source/cms/src/app/dashboard/lesson_types/page.tsx
View File

@@ -19,7 +19,7 @@ import { pb } from '@/lib/pb';
import { toast } from '@/components/core/toaster';
import ErrorDisplay from '@/components/dashboard/error';
import type { LessonType } from '@/components/dashboard/lesson_type/ILessonType';
import { emptyLessonType, safeAssignment } from '@/components/dashboard/lesson_type/interfaces';
import { defaultLessonType, emptyLessonType, safeAssignment } from '@/components/dashboard/lesson_type/interfaces';
import { LessonTypesFilters } from '@/components/dashboard/lesson_type/lesson-types-filters';
import type { Filters } from '@/components/dashboard/lesson_type/lesson-types-filters';
import { LessonTypesPagination } from '@/components/dashboard/lesson_type/lesson-types-pagination';
@@ -27,81 +27,77 @@ import { LessonTypesSelectionProvider } from '@/components/dashboard/lesson_type
import { LessonTypesTable } from '@/components/dashboard/lesson_type/lesson-types-table';
import FormLoading from '@/components/loading';
interface PageProps {
searchParams: {
email?: string;
phone?: string;
sortDir?: 'asc' | 'desc';
spStatus?: string;
spName?: string;
spVisible?: string;
spType?: string;
//
};
}
export default function Page({ searchParams }: PageProps): React.JSX.Element {
const { t } = useTranslation();
const { email, phone, sortDir, spStatus, spName, spVisible, spType } = searchParams;
const { email, phone, sortDir, status, name, visible, type } = searchParams;
const router = useRouter();
const [lessonTypesData, setLessonTypesData] = React.useState<LessonType[]>([]);
const [recordCount, setRecordCount] = React.useState<number>(0);
const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
const [currentPage, setCurrentPage] = React.useState<number>(1);
//
const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
const [showLoading, setShowLoading] = React.useState<boolean>(true);
const [showError, setShowError] = React.useState<boolean>(false);
const [lessonTypesData, setLessonTypesData] = React.useState<LessonType[]>([]);
// const [recordModel, setRecordModel] = React.useState<RecordModel[]>([]);
const sortedLessonTypes = applySort(lessonTypesData, sortDir);
const filteredLessonTypesOld = applyFilters(sortedLessonTypes, {
email,
phone,
spStatus,
spName,
spType,
spVisible,
//
});
const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
const needToFill = 5 - filteredLessonTypesOld.length;
const [f, setF] = React.useState<LessonType[]>([]);
const [currentPage, setCurrentPage] = React.useState<number>(0);
const [recordCount, setRecordCount] = React.useState<number>(0);
const filteredLessonTypes: LessonType[] = filteredLessonTypesOld;
for (let i = 0; i < needToFill; i++) {
filteredLessonTypes.push(emptyLessonType);
}
const [listOption, setListOption] = React.useState({});
const [listSort, setListSort] = React.useState({});
const reloadRows = () => {
pb.collection(COL_LESSON_TYPES)
.getList(currentPage, rowsPerPage, {})
.then((lessonTypes: ListResult<RecordModel>) => {
// console.log(lessonTypes);
const { items, page, perPage, totalItems, totalPages } = lessonTypes;
const tempLessonTypes: LessonType[] = items.map((lt) => {
return safeAssignment(lt);
});
setLessonTypesData(tempLessonTypes);
setRecordCount(totalItems);
})
.catch((err) => {
logger.error(err);
toast(t('dashboard.lessonTypes.list.error'));
setShowError(true);
})
.finally(() => {
setShowLoading(false);
//
const reloadRows = async (): Promise<void> => {
try {
const models: ListResult<RecordModel> = await pb
.collection(COL_LESSON_TYPES)
.getList(currentPage + 1, rowsPerPage, listOption);
const { items, totalItems } = models;
const tempLessonTypes: LessonType[] = items.map((lt) => {
return { ...defaultLessonType, ...lt };
});
setLessonTypesData(tempLessonTypes);
setRecordCount(totalItems);
setF(tempLessonTypes);
} catch (error) {
//
} finally {
setShowLoading(false);
}
};
React.useEffect(() => {
reloadRows();
}, []);
void reloadRows();
}, [currentPage, rowsPerPage, listOption]);
if (showLoading) return <FormLoading />;
React.useEffect(() => {
let tempFilter = [],
tempSortDir = '';
if (visible) {
tempFilter.push(`visible = "${visible}"`);
}
if (sortDir) {
tempSortDir = `-created`;
}
if (name) {
tempFilter.push(`name ~ "%${name}%"`);
}
if (type) {
tempFilter.push(`type ~ "%${type}%"`);
}
setListOption({
filter: tempFilter.join(' && '),
sort: tempSortDir,
//
});
}, [visible, sortDir, name, type]);
if (f.length === 0 || showLoading) return <FormLoading />;
if (showError)
return (
@@ -137,24 +133,24 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
</LoadingButton>
</Box>
</Stack>
<LessonTypesSelectionProvider lessonTypes={filteredLessonTypes}>
<LessonTypesSelectionProvider lessonTypes={f}>
<Card>
<LessonTypesFilters
filters={{ email, phone, spStatus, spName, spVisible, spType }}
filters={{ email, phone, status, name, visible, type }}
fullData={lessonTypesData}
sortDir={sortDir}
/>
<Divider />
<Box sx={{ overflowX: 'auto' }}>
<LessonTypesTable reloadRows={reloadRows} rows={filteredLessonTypes} />
<LessonTypesTable reloadRows={reloadRows} rows={f} />
</Box>
<Divider />
<LessonTypesPagination
count={recordCount}
page={0}
page={currentPage}
rowsPerPage={rowsPerPage}
setPage={setCurrentPage}
setRowsPerPage={setRowsPerPage}
setCurrentPage={setCurrentPage}
/>
</Card>
</LessonTypesSelectionProvider>
@@ -175,10 +171,7 @@ function applySort(row: LessonType[], sortDir: 'asc' | 'desc' | undefined): Less
});
}
function applyFilters(
row: LessonType[],
{ email, phone, spStatus: status, spName: name, spVisible }: Filters
): LessonType[] {
function applyFilters(row: LessonType[], { email, phone, status, name, visible }: Filters): LessonType[] {
return row.filter((item) => {
if (email) {
if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
@@ -204,8 +197,8 @@ function applyFilters(
}
}
if (spVisible) {
if (!item.visible?.toLowerCase().includes(spVisible.toLowerCase())) {
if (visible) {
if (!item.visible?.toLowerCase().includes(visible.toLowerCase())) {
return false;
}
}
@@ -213,3 +206,16 @@ function applyFilters(
return true;
});
}
interface PageProps {
searchParams: {
email?: string;
phone?: string;
sortDir?: 'asc' | 'desc';
status?: string;
name?: string;
visible?: string;
type?: string;
//
};
}