add
This commit is contained in:
ditiqi
parent
3b497fed63
commit
83c9b80b20
|
|
@ -28,7 +28,7 @@ export default function FilterSection() {
|
|||
</h3>
|
||||
<TermParentSelector
|
||||
value={items}
|
||||
slug={tax?.slug}
|
||||
// slug={tax?.slug}
|
||||
className="w-70 max-h-[400px] overscroll-contain overflow-x-hidden"
|
||||
onChange={(selected) =>
|
||||
handleTermChange(
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import { Tag } from "antd";
|
||||
import { PostDto, TaxonomySlug } from "@nice/common";
|
||||
import { PostDto, TaxonomySlug, TermDto } from "@nice/common";
|
||||
|
||||
const TermInfo = ({ post }: { post: PostDto }) => {
|
||||
const TermInfo = ({ terms = [] }: { terms?: TermDto[] }) => {
|
||||
return (
|
||||
<div>
|
||||
{post?.terms && post?.terms?.length > 0 ? (
|
||||
{terms && terms?.length > 0 ? (
|
||||
<div className="flex gap-2 mb-4">
|
||||
{post?.terms?.map((term: any) => {
|
||||
{terms?.map((term: any) => {
|
||||
return (
|
||||
<Tag
|
||||
key={term.id}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export const CourseDetailDescription: React.FC = () => {
|
|||
<div className="flex flex-col gap-2">
|
||||
<div className="flex gap-2 flex-wrap items-center float-start">
|
||||
{course?.subTitle && <div>{course?.subTitle}</div>}
|
||||
<TermInfo post={course}></TermInfo>
|
||||
<TermInfo terms={course.terms}></TermInfo>
|
||||
</div>
|
||||
</div>
|
||||
<Paragraph
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default function PostCard({ post, onClick }: PostCardProps) {
|
|||
<div className="px-4 ">
|
||||
<div className="overflow-hidden hover:overflow-auto">
|
||||
<div className="flex gap-2 h-7 whiteSpace-nowrap">
|
||||
<TermInfo post={post}></TermInfo>
|
||||
<TermInfo terms={post.terms}></TermInfo>
|
||||
</div>
|
||||
</div>
|
||||
<Title
|
||||
|
|
@ -65,4 +65,3 @@ export default function PostCard({ post, onClick }: PostCardProps) {
|
|||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,50 +1,56 @@
|
|||
import { api } from "@nice/client/";
|
||||
import { Checkbox, Form } from "antd";
|
||||
import { Checkbox, Skeleton } from "antd";
|
||||
import { TermDto } from "@nice/common";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import React from "react";
|
||||
export default function TermParentSelector({
|
||||
value,
|
||||
onChange,
|
||||
className,
|
||||
placeholder = "选择分类",
|
||||
multiple = true,
|
||||
taxonomyId,
|
||||
domainId,
|
||||
style,
|
||||
}: any) {
|
||||
const [selectedValues, setSelectedValues] = useState<string[]>([]); // 用于存储选中的值
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
}: { data: TermDto[]; isLoading: boolean } = api.term.findMany.useQuery({
|
||||
where: {
|
||||
taxonomy: {
|
||||
id: taxonomyId,
|
||||
},
|
||||
parentId: null
|
||||
},
|
||||
});
|
||||
const handleCheckboxChange = (checkedValues: string[]) => {
|
||||
setSelectedValues(checkedValues); // 更新选中的值
|
||||
if (onChange) {
|
||||
onChange(checkedValues); // 调用外部传入的 onChange 回调
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className={className} style={style}>
|
||||
<Form onFinish={null}>
|
||||
<Form.Item name="categories">
|
||||
<Checkbox.Group onChange={handleCheckboxChange}>
|
||||
{data?.map((category) => (
|
||||
<div className="w-full h-9 p-2 my-1">
|
||||
<Checkbox checked={value?.includes(category.id)} className="text-base text-slate-700" key={category.id} value={category.id}>
|
||||
{category.name}
|
||||
</Checkbox>
|
||||
</div>
|
||||
))}
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
value,
|
||||
onChange,
|
||||
className,
|
||||
taxonomyId,
|
||||
domainId = undefined,
|
||||
style,
|
||||
}: {
|
||||
value?: string[];
|
||||
onChange?: (value: string[]) => void;
|
||||
className?: string;
|
||||
taxonomyId: string;
|
||||
domainId?: string;
|
||||
style?: React.CSSProperties;
|
||||
}) {
|
||||
const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
|
||||
api.term.findMany.useQuery({
|
||||
where: {
|
||||
taxonomyId: taxonomyId,
|
||||
parentId: null,
|
||||
domainId,
|
||||
},
|
||||
});
|
||||
const handleCheckboxChange = (checkedValues: string[]) => {
|
||||
// setSelectedValues(checkedValues); // 更新选中的值
|
||||
if (onChange) {
|
||||
onChange(checkedValues); // 调用外部传入的 onChange 回调
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className={className} style={style}>
|
||||
{isLoading ? (
|
||||
<Skeleton
|
||||
paragraph={{
|
||||
rows: 4,
|
||||
}}></Skeleton>
|
||||
) : (
|
||||
<Checkbox.Group value={value} onChange={handleCheckboxChange}>
|
||||
{data?.map((category) => (
|
||||
<div className="w-full h-9 p-2 my-1" key={category.id}>
|
||||
<Checkbox
|
||||
className="text-base text-slate-700"
|
||||
value={category.id}>
|
||||
{category.name}
|
||||
</Checkbox>
|
||||
</div>
|
||||
))}
|
||||
</Checkbox.Group>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue