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

View File

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

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 { 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>
</> </>
); );
} }

View File

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