This commit is contained in:
ditiqi 2025-02-25 19:50:36 +08:00
parent 4eebb49c7f
commit 5686a337f3
5 changed files with 42 additions and 100 deletions

View File

@ -69,7 +69,7 @@ export class TermRouter {
const { staff } = ctx;
return await this.termService.getParentSimpleTree(staff, input);
}),
getTreeData: this.trpc.protectProcedure
getTreeData: this.trpc.procedure
.input(TermMethodSchema.getTreeData)
.query(async ({ input }) => {
return await this.termService.getTreeData(input);

View File

@ -5,86 +5,26 @@ import { TaxonomySlug, TermDto } from "@nice/common";
import { useEffect, useMemo } from "react";
import { api } from "@nice/client";
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";
interface FilterSectionProps {
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")]);
export default function FilterSection() {
const { data: taxonomies } = api.taxonomy.getAll.useQuery({});
return (
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
{taxonomies?.map((tax) => {
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6 h-full">
{taxonomies?.map((tax, index) => {
return (
<>
<div>
<h3 className="text-lg font-medium mb-4">
{tax?.name}
</h3>
<TermSelect
multiple
taxonomyId={tax?.id}></TermSelect>
</div>
</>
<div key={index}>
<h3 className="text-lg font-medium mb-4">
{tax?.name}
</h3>
<TermSelect multiple taxonomyId={tax?.id}></TermSelect>
{index < taxonomies.length - 1 && (
<Divider className="my-6" />
)}
</div>
);
})}
<Divider className="my-6" />
</div>
);
}

View File

@ -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;

View File

@ -11,24 +11,16 @@ import {
import { useSearchParams } from "react-router-dom";
import { set } from "idb-keyval";
import { useMainContext } from "../layout/MainProvider";
import AllCoursesLayout from "./layout/AllCoursesLayout";
interface paginationData {
items: CourseDto[];
totalPages: number;
}
export default function CoursesPage() {
const { searchValue, setSearchValue } = useMainContext();
return (
<>
<div className="min-h-screen bg-gray-50">
<div>{searchValue}</div>
<CourseList
params={{
page: 1,
pageSize: 12,
}}></CourseList>
</div>
<AllCoursesLayout></AllCoursesLayout>
</>
);
}

View File

@ -10,8 +10,6 @@ interface TermSelectProps {
onChange?: (value: string | string[]) => void;
placeholder?: string;
multiple?: boolean;
// rootId?: string;
// domain?: boolean;
taxonomyId?: string;
disabled?: boolean;
className?: string;
@ -27,9 +25,7 @@ export default function TermSelect({
multiple = false,
taxonomyId,
domainId,
// rootId = null,
disabled = false,
// domain = undefined,
}: TermSelectProps) {
const utils = api.useUtils();
const [listTreeData, setListTreeData] = useState<
@ -125,20 +121,9 @@ export default function TermSelect({
};
const handleExpand = async (keys: React.Key[]) => {
// console.log(keys);
try {
const allKeyIds =
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({
termIds: allKeyIds,
taxonomyId,
@ -154,7 +139,6 @@ export default function TermSelect({
console.error("Error expanding nodes with keys", keys, ":", error);
}
};
const handleDropdownVisibleChange = async (open: boolean) => {
if (open) {
// 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);
}
};
return (
<TreeSelect
treeDataSimpleMode