Merge branch 'main' of http://113.45.157.195:3003/insiinc/re-mooc
This commit is contained in:
commit
287bf31d0e
|
@ -69,7 +69,7 @@ export class TermRouter {
|
||||||
const { staff } = ctx;
|
const { staff } = ctx;
|
||||||
return await this.termService.getParentSimpleTree(staff, input);
|
return await this.termService.getParentSimpleTree(staff, input);
|
||||||
}),
|
}),
|
||||||
getTreeData: this.trpc.protectProcedure
|
getTreeData: this.trpc.procedure
|
||||||
.input(TermMethodSchema.getTreeData)
|
.input(TermMethodSchema.getTreeData)
|
||||||
.query(async ({ input }) => {
|
.query(async ({ input }) => {
|
||||||
return await this.termService.getTreeData(input);
|
return await this.termService.getTreeData(input);
|
||||||
|
|
|
@ -5,86 +5,26 @@ import { TaxonomySlug, TermDto } from "@nice/common";
|
||||||
import { useEffect, useMemo } from "react";
|
import { useEffect, useMemo } from "react";
|
||||||
import { api } from "@nice/client";
|
import { api } from "@nice/client";
|
||||||
import { useSearchParams } from "react-router-dom";
|
import { useSearchParams } from "react-router-dom";
|
||||||
import TermTree from "@web/src/components/models/term/term-tree";
|
|
||||||
import TermSelect from "@web/src/components/models/term/term-select";
|
import TermSelect from "@web/src/components/models/term/term-select";
|
||||||
|
|
||||||
interface FilterSectionProps {
|
export default function FilterSection() {
|
||||||
selectedCategory: string;
|
|
||||||
selectedLevel: string;
|
|
||||||
onCategoryChange: (category: string) => void;
|
|
||||||
onLevelChange: (level: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface GetTaxonomyProps {
|
|
||||||
categories: string[];
|
|
||||||
isLoading: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
function useGetTaxonomy({ type }): GetTaxonomyProps {
|
|
||||||
const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
|
|
||||||
api.term.findMany.useQuery({
|
|
||||||
where: {
|
|
||||||
taxonomy: {
|
|
||||||
//TaxonomySlug.CATEGORY
|
|
||||||
slug: type,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
include: {
|
|
||||||
children: true,
|
|
||||||
},
|
|
||||||
take: 10, // 只取前10个
|
|
||||||
orderBy: {
|
|
||||||
createdAt: "desc", // 按创建时间降序排列
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const categories = useMemo(() => {
|
|
||||||
const allCategories = isLoading
|
|
||||||
? []
|
|
||||||
: data?.map((course) => course.name);
|
|
||||||
return [...Array.from(new Set(allCategories))];
|
|
||||||
}, [data]);
|
|
||||||
return { categories, isLoading };
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function FilterSection({
|
|
||||||
selectedCategory,
|
|
||||||
selectedLevel,
|
|
||||||
onCategoryChange,
|
|
||||||
onLevelChange,
|
|
||||||
}: FilterSectionProps) {
|
|
||||||
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
|
||||||
type: TaxonomySlug.CATEGORY,
|
|
||||||
});
|
|
||||||
const levels: GetTaxonomyProps = useGetTaxonomy({
|
|
||||||
type: TaxonomySlug.LEVEL,
|
|
||||||
});
|
|
||||||
|
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
|
||||||
useEffect(() => {
|
|
||||||
if (searchParams.get("category"))
|
|
||||||
onCategoryChange(searchParams.get("category"));
|
|
||||||
}, [searchParams.get("category")]);
|
|
||||||
|
|
||||||
const { data: taxonomies } = api.taxonomy.getAll.useQuery({});
|
const { data: taxonomies } = api.taxonomy.getAll.useQuery({});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
|
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6 h-full">
|
||||||
{taxonomies?.map((tax) => {
|
{taxonomies?.map((tax, index) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<div key={index}>
|
||||||
<div>
|
<h3 className="text-lg font-medium mb-4">
|
||||||
<h3 className="text-lg font-medium mb-4">
|
{tax?.name}
|
||||||
{tax?.name}
|
</h3>
|
||||||
</h3>
|
<TermSelect multiple taxonomyId={tax?.id}></TermSelect>
|
||||||
<TermSelect
|
{index < taxonomies.length - 1 && (
|
||||||
multiple
|
<Divider className="my-6" />
|
||||||
taxonomyId={tax?.id}></TermSelect>
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
||||||
<Divider className="my-6" />
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { useMainContext } from "../../layout/MainProvider";
|
||||||
|
import CourseList from "../components/CourseList";
|
||||||
|
import FilterSection from "../components/FilterSection";
|
||||||
|
|
||||||
|
export function AllCoursesLayout() {
|
||||||
|
const { searchValue, setSearchValue } = useMainContext();
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
<div className=" flex">
|
||||||
|
<div className="w-1/6">
|
||||||
|
<FilterSection></FilterSection>
|
||||||
|
</div>
|
||||||
|
<div className="w-5/6 p-4">
|
||||||
|
<CourseList
|
||||||
|
cols={4}
|
||||||
|
params={{
|
||||||
|
page: 1,
|
||||||
|
pageSize: 12,
|
||||||
|
}}></CourseList>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default AllCoursesLayout;
|
|
@ -11,24 +11,16 @@ import {
|
||||||
import { useSearchParams } from "react-router-dom";
|
import { useSearchParams } from "react-router-dom";
|
||||||
import { set } from "idb-keyval";
|
import { set } from "idb-keyval";
|
||||||
import { useMainContext } from "../layout/MainProvider";
|
import { useMainContext } from "../layout/MainProvider";
|
||||||
|
import AllCoursesLayout from "./layout/AllCoursesLayout";
|
||||||
|
|
||||||
interface paginationData {
|
interface paginationData {
|
||||||
items: CourseDto[];
|
items: CourseDto[];
|
||||||
totalPages: number;
|
totalPages: number;
|
||||||
}
|
}
|
||||||
export default function CoursesPage() {
|
export default function CoursesPage() {
|
||||||
const { searchValue, setSearchValue } = useMainContext();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="min-h-screen bg-gray-50">
|
<AllCoursesLayout></AllCoursesLayout>
|
||||||
<div>{searchValue}</div>
|
|
||||||
<CourseList
|
|
||||||
params={{
|
|
||||||
page: 1,
|
|
||||||
pageSize: 12,
|
|
||||||
}}></CourseList>
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,8 +10,6 @@ interface TermSelectProps {
|
||||||
onChange?: (value: string | string[]) => void;
|
onChange?: (value: string | string[]) => void;
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
multiple?: boolean;
|
multiple?: boolean;
|
||||||
// rootId?: string;
|
|
||||||
// domain?: boolean;
|
|
||||||
taxonomyId?: string;
|
taxonomyId?: string;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -27,9 +25,7 @@ export default function TermSelect({
|
||||||
multiple = false,
|
multiple = false,
|
||||||
taxonomyId,
|
taxonomyId,
|
||||||
domainId,
|
domainId,
|
||||||
// rootId = null,
|
|
||||||
disabled = false,
|
disabled = false,
|
||||||
// domain = undefined,
|
|
||||||
}: TermSelectProps) {
|
}: TermSelectProps) {
|
||||||
const utils = api.useUtils();
|
const utils = api.useUtils();
|
||||||
const [listTreeData, setListTreeData] = useState<
|
const [listTreeData, setListTreeData] = useState<
|
||||||
|
@ -125,20 +121,9 @@ export default function TermSelect({
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleExpand = async (keys: React.Key[]) => {
|
const handleExpand = async (keys: React.Key[]) => {
|
||||||
// console.log(keys);
|
|
||||||
try {
|
try {
|
||||||
const allKeyIds =
|
const allKeyIds =
|
||||||
keys.map((key) => key.toString()).filter(Boolean) || [];
|
keys.map((key) => key.toString()).filter(Boolean) || [];
|
||||||
// const expandedNodes = await Promise.all(
|
|
||||||
// keys.map(async (key) => {
|
|
||||||
// return await utils.department.getChildSimpleTree.fetch({
|
|
||||||
// deptId: key.toString(),
|
|
||||||
// domain,
|
|
||||||
// });
|
|
||||||
// })
|
|
||||||
// );
|
|
||||||
//
|
|
||||||
//上面那样一个个拉会拉爆,必须直接拉deptIds
|
|
||||||
const expandedNodes = await utils.term.getChildSimpleTree.fetch({
|
const expandedNodes = await utils.term.getChildSimpleTree.fetch({
|
||||||
termIds: allKeyIds,
|
termIds: allKeyIds,
|
||||||
taxonomyId,
|
taxonomyId,
|
||||||
|
@ -154,7 +139,6 @@ export default function TermSelect({
|
||||||
console.error("Error expanding nodes with keys", keys, ":", error);
|
console.error("Error expanding nodes with keys", keys, ":", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDropdownVisibleChange = async (open: boolean) => {
|
const handleDropdownVisibleChange = async (open: boolean) => {
|
||||||
if (open) {
|
if (open) {
|
||||||
// This will attempt to expand all nodes and fetch their children when the dropdown opens
|
// This will attempt to expand all nodes and fetch their children when the dropdown opens
|
||||||
|
@ -162,7 +146,6 @@ export default function TermSelect({
|
||||||
await handleExpand(allKeys);
|
await handleExpand(allKeys);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TreeSelect
|
<TreeSelect
|
||||||
treeDataSimpleMode
|
treeDataSimpleMode
|
||||||
|
|
Loading…
Reference in New Issue