update,
This commit is contained in:
@@ -58,3 +58,4 @@ NEXT_PUBLIC_MAPBOX_API_KEY=
|
||||
# Google Tag Manager
|
||||
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=
|
||||
|
||||
NEXT_PUBLIC_POCKETBASE_URL=http://localhost:8090
|
@@ -38,3 +38,5 @@ NEXT_PUBLIC_MAPBOX_API_KEY=
|
||||
|
||||
# Google Tag Manager
|
||||
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=
|
||||
|
||||
NEXT_PUBLIC_POCKETBASE_URL=http://localhost:8090
|
5
002_source/cms/src/app/dashboard/lesson_types/db.ts
Normal file
5
002_source/cms/src/app/dashboard/lesson_types/db.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import PocketBase, { RecordModel } from 'pocketbase';
|
||||
|
||||
export function Helloworld(): string {
|
||||
return 'helloworld';
|
||||
}
|
@@ -9,12 +9,15 @@ import Divider from '@mui/material/Divider';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
import PocketBase from 'pocketbase';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { paths } from '@/paths';
|
||||
import { logger } from '@/lib/default-logger';
|
||||
import { toast } from '@/components/core/toaster';
|
||||
import type { LessonType } from '@/components/dashboard/lesson_type/ILessonType';
|
||||
import { 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';
|
||||
@@ -22,46 +25,55 @@ import { LessonTypesSelectionProvider } from '@/components/dashboard/lesson_type
|
||||
import { LessonTypesTable } from '@/components/dashboard/lesson_type/lesson-types-table';
|
||||
import FormLoading from '@/components/loading';
|
||||
|
||||
import { Helloworld } from './db';
|
||||
|
||||
const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
|
||||
|
||||
interface PageProps {
|
||||
searchParams: {
|
||||
email?: string;
|
||||
phone?: string;
|
||||
sortDir?: 'asc' | 'desc';
|
||||
status?: string;
|
||||
name?: string;
|
||||
visible?: string;
|
||||
type?: string;
|
||||
spStatus?: string;
|
||||
spName?: string;
|
||||
spVisible?: string;
|
||||
spType?: string;
|
||||
//
|
||||
};
|
||||
}
|
||||
|
||||
export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
const { email, phone, sortDir, status, name, visible, type } = searchParams;
|
||||
const { email, phone, sortDir, spStatus, spName, spVisible, spType } = searchParams;
|
||||
const router = useRouter();
|
||||
|
||||
const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
|
||||
const [lessonTypesData, setLessonTypesData] = React.useState<LessonType[]>([]);
|
||||
// const [recordModel, setRecordModel] = React.useState<RecordModel[]>([]);
|
||||
const sortedLessonTypes = applySort(lessonTypesData, sortDir);
|
||||
const filteredLessonTypes = applyFilters(sortedLessonTypes, {
|
||||
email,
|
||||
phone,
|
||||
status,
|
||||
name,
|
||||
type,
|
||||
visible,
|
||||
spStatus,
|
||||
spName,
|
||||
spType,
|
||||
spVisible,
|
||||
//
|
||||
});
|
||||
|
||||
const reloadRows = () => {
|
||||
// listLessonTypes()
|
||||
// .then((lessonTypes: LessonType[]) => {
|
||||
// setLessonTypesData(lessonTypes);
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// logger.error(err);
|
||||
// toast(t('dashboard.lessonTypes.list.error'));
|
||||
// });
|
||||
pb.collection('LessonsTypes')
|
||||
.getFullList()
|
||||
.then((lessonTypes: RecordModel[]) => {
|
||||
const tempLessonTypes: LessonType[] = lessonTypes.map((lt) => {
|
||||
return safeAssignment(lt);
|
||||
});
|
||||
setLessonTypesData(tempLessonTypes);
|
||||
})
|
||||
.catch((err) => {
|
||||
logger.error(err);
|
||||
toast(t('dashboard.lessonTypes.list.error'));
|
||||
});
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
@@ -102,7 +114,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
<LessonTypesSelectionProvider lessonTypes={filteredLessonTypes}>
|
||||
<Card>
|
||||
<LessonTypesFilters
|
||||
filters={{ email, phone, status, name, visible, type }}
|
||||
filters={{ email, phone, spStatus, spName, spVisible, spType }}
|
||||
fullData={lessonTypesData}
|
||||
sortDir={sortDir}
|
||||
/>
|
||||
@@ -131,7 +143,10 @@ function applySort(row: LessonType[], sortDir: 'asc' | 'desc' | undefined): Less
|
||||
});
|
||||
}
|
||||
|
||||
function applyFilters(row: LessonType[], { email, phone, status, name, visible }: Filters): LessonType[] {
|
||||
function applyFilters(
|
||||
row: LessonType[],
|
||||
{ email, phone, spStatus: status, spName: name, spVisible: visible }: Filters
|
||||
): LessonType[] {
|
||||
return row.filter((item) => {
|
||||
if (email) {
|
||||
if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
|
||||
|
@@ -1,3 +1,9 @@
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
|
||||
import type { LessonType } from './ILessonType';
|
||||
|
||||
export interface LessonTypeEditFormProps {
|
||||
name: string;
|
||||
type: string;
|
||||
@@ -23,3 +29,41 @@ export const LessonTypeCreateFormDefault: LessonTypeCreateForm = {
|
||||
pos: 1,
|
||||
visible: 'visible',
|
||||
};
|
||||
|
||||
export const defaultLessonType: LessonType = {
|
||||
id: 'string',
|
||||
name: 'string',
|
||||
type: 'string',
|
||||
pos: 1,
|
||||
visible: 'visible',
|
||||
createdAt: dayjs().toDate(),
|
||||
//
|
||||
// original
|
||||
// id: 'string',
|
||||
// name: 'string',
|
||||
//
|
||||
avatar: 'string',
|
||||
email: 'string',
|
||||
phone: 'string',
|
||||
quota: 1,
|
||||
status: 'pending',
|
||||
// createdAt: Date;
|
||||
};
|
||||
|
||||
export function safeAssignment(inTemp: LessonType | RecordModel): LessonType {
|
||||
const { id, name, type, pos, visible, createdAt, email, quota, status } = { ...defaultLessonType, ...inTemp };
|
||||
const oCreatedAt = dayjs(createdAt).toDate();
|
||||
|
||||
const output: LessonType = {
|
||||
id,
|
||||
name,
|
||||
type,
|
||||
pos,
|
||||
visible,
|
||||
createdAt: oCreatedAt,
|
||||
email,
|
||||
quota,
|
||||
status,
|
||||
};
|
||||
return output;
|
||||
}
|
||||
|
@@ -19,16 +19,16 @@ import { paths } from '@/paths';
|
||||
import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
|
||||
import { Option } from '@/components/core/option';
|
||||
|
||||
import { LessonType } from './ILessonType';
|
||||
import type { LessonType } from './ILessonType';
|
||||
import { useLessonTypesSelection } from './lesson-types-selection-context';
|
||||
|
||||
export interface Filters {
|
||||
email?: string;
|
||||
phone?: string;
|
||||
status?: string;
|
||||
name?: string;
|
||||
visible?: string;
|
||||
type?: string;
|
||||
spStatus?: string;
|
||||
spName?: string;
|
||||
spVisible?: string;
|
||||
spType?: string;
|
||||
}
|
||||
|
||||
export type SortDir = 'asc' | 'desc';
|
||||
@@ -45,7 +45,7 @@ export function LessonTypesFilters({
|
||||
fullData,
|
||||
}: LessonTypesFiltersProps): React.JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
const { email, phone, status, name, visible, type } = filters;
|
||||
const { email, phone, spStatus: status, spName, spVisible, spType } = filters;
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
@@ -81,8 +81,8 @@ export function LessonTypesFilters({
|
||||
searchParams.set('sortDir', newSortDir);
|
||||
}
|
||||
|
||||
if (newFilters.status) {
|
||||
searchParams.set('status', newFilters.status);
|
||||
if (newFilters.spStatus) {
|
||||
searchParams.set('status', newFilters.spStatus);
|
||||
}
|
||||
|
||||
if (newFilters.email) {
|
||||
@@ -93,16 +93,16 @@ export function LessonTypesFilters({
|
||||
searchParams.set('phone', newFilters.phone);
|
||||
}
|
||||
|
||||
if (newFilters.name) {
|
||||
searchParams.set('name', newFilters.name);
|
||||
if (newFilters.spName) {
|
||||
searchParams.set('name', newFilters.spName);
|
||||
}
|
||||
|
||||
if (newFilters.type) {
|
||||
searchParams.set('type', newFilters.type);
|
||||
if (newFilters.spType) {
|
||||
searchParams.set('type', newFilters.spType);
|
||||
}
|
||||
|
||||
if (newFilters.visible) {
|
||||
searchParams.set('visible', newFilters.visible);
|
||||
if (newFilters.spVisible) {
|
||||
searchParams.set('visible', newFilters.spVisible);
|
||||
}
|
||||
|
||||
router.push(`${paths.dashboard.lesson_types.list}?${searchParams.toString()}`);
|
||||
@@ -116,28 +116,28 @@ export function LessonTypesFilters({
|
||||
|
||||
const handleStatusChange = React.useCallback(
|
||||
(_: React.SyntheticEvent, value: string) => {
|
||||
updateSearchParams({ ...filters, status: value }, sortDir);
|
||||
updateSearchParams({ ...filters, spStatus: value }, sortDir);
|
||||
},
|
||||
[updateSearchParams, filters, sortDir]
|
||||
);
|
||||
|
||||
const handleVisibleChange = React.useCallback(
|
||||
(_: React.SyntheticEvent, value: string) => {
|
||||
updateSearchParams({ ...filters, visible: value }, sortDir);
|
||||
updateSearchParams({ ...filters, spVisible: value }, sortDir);
|
||||
},
|
||||
[updateSearchParams, filters, sortDir]
|
||||
);
|
||||
|
||||
const handleNameChange = React.useCallback(
|
||||
(value?: string) => {
|
||||
updateSearchParams({ ...filters, name: value }, sortDir);
|
||||
updateSearchParams({ ...filters, spName: value }, sortDir);
|
||||
},
|
||||
[updateSearchParams, filters, sortDir]
|
||||
);
|
||||
|
||||
const handleTypeChange = React.useCallback(
|
||||
(value?: string) => {
|
||||
updateSearchParams({ ...filters, type: value }, sortDir);
|
||||
updateSearchParams({ ...filters, spType: value }, sortDir);
|
||||
},
|
||||
[updateSearchParams, filters, sortDir]
|
||||
);
|
||||
@@ -163,11 +163,11 @@ export function LessonTypesFilters({
|
||||
[updateSearchParams, filters]
|
||||
);
|
||||
|
||||
const hasFilters = status || email || phone || visible || name || type;
|
||||
const hasFilters = status || email || phone || spVisible || spName || spType;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Tabs onChange={handleVisibleChange} sx={{ px: 3 }} value={visible ?? ''} variant="scrollable">
|
||||
<Tabs onChange={handleVisibleChange} sx={{ px: 3 }} value={spVisible ?? ''} variant="scrollable">
|
||||
{tabs.map((tab) => (
|
||||
<Tab
|
||||
icon={<Chip label={tab.count} size="small" variant="soft" />}
|
||||
@@ -184,7 +184,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={name}
|
||||
displayValue={spName}
|
||||
label={t('Name')}
|
||||
onFilterApply={(value) => {
|
||||
handleNameChange(value as string);
|
||||
@@ -193,11 +193,11 @@ export function LessonTypesFilters({
|
||||
handleNameChange();
|
||||
}}
|
||||
popover={<NameFilterPopover />}
|
||||
value={name}
|
||||
value={spName}
|
||||
/>
|
||||
|
||||
<FilterButton
|
||||
displayValue={type}
|
||||
displayValue={spType}
|
||||
label={t('Type')}
|
||||
onFilterApply={(value) => {
|
||||
handleTypeChange(value as string);
|
||||
@@ -206,7 +206,7 @@ export function LessonTypesFilters({
|
||||
handleTypeChange();
|
||||
}}
|
||||
popover={<TypeFilterPopover />}
|
||||
value={type}
|
||||
value={spType}
|
||||
/>
|
||||
|
||||
{/*
|
||||
|
3
002_source/cms/src/lib/pb.ts
Normal file
3
002_source/cms/src/lib/pb.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import PocketBase from 'pocketbase';
|
||||
|
||||
export const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
|
Reference in New Issue
Block a user