add

apps/web/src/components/models/course/editor/form/CourseContentForm/LectureList.tsx

@@ -0,0 +1,150 @@
+import {
+	PlusOutlined,
+	DragOutlined,
+	DeleteOutlined,
+	CaretRightOutlined,
+	SaveOutlined,
+} from "@ant-design/icons";
+import {
+	Form,
+	Alert,
+	Button,
+	Input,
+	Select,
+	Space,
+	Collapse,
+	message,
+} from "antd";
+import React, { useCallback, useEffect, useState } from "react";
+import {
+	DndContext,
+	closestCenter,
+	KeyboardSensor,
+	PointerSensor,
+	useSensor,
+	useSensors,
+	DragEndEvent,
+} from "@dnd-kit/core";
+import { api, emitDataChange } from "@nice/client";
+import {
+	arrayMove,
+	SortableContext,
+	sortableKeyboardCoordinates,
+	useSortable,
+	verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import QuillEditor from "@web/src/components/common/editor/quill/QuillEditor";
+import { TusUploader } from "@web/src/components/common/uploader/TusUploader";
+import { Lecture, LectureType, PostType } from "@nice/common";
+import { useCourseEditor } from "../../context/CourseEditorContext";
+import { usePost } from "@nice/client";
+import toast from "react-hot-toast";
+import { CourseContentFormHeader } from "./CourseContentFormHeader";
+import { CourseSectionEmpty } from "./CourseSectionEmpty";
+import { LectureData, SectionData } from "./interface";
+import { SortableLecture } from "./SortableLecture";
+
+interface LectureListProps {
+	field: SectionData;
+	sectionId: string;
+}
+
+export const LectureList: React.FC<LectureListProps> = ({
+	field,
+	sectionId,
+}) => {
+	const { softDeleteByIds } = usePost();
+	const { data: lectures = [], isLoading } = (
+		api.post.findMany as any
+	).useQuery(
+		{
+			where: {
+				parentId: sectionId,
+				type: PostType.LECTURE,
+				deletedAt: null,
+			},
+		},
+		{
+			enabled: !!sectionId,
+		}
+	);
+	useEffect(() => {
+		if (lectures && !isLoading) {
+			setItems(lectures);
+		}
+	}, [lectures, isLoading]);
+	const [items, setItems] = useState<LectureData[]>(lectures);
+
+	const sensors = useSensors(
+		useSensor(PointerSensor),
+		useSensor(KeyboardSensor, {
+			coordinateGetter: sortableKeyboardCoordinates,
+		})
+	);
+
+	const handleDragEnd = (event: DragEndEvent) => {
+		const { active, over } = event;
+		if (!over || active.id === over.id) return;
+
+		setItems((items) => {
+			const oldIndex = items.findIndex((item) => item.id === active.id);
+			const newIndex = items.findIndex((item) => item.id === over.id);
+			return arrayMove(items, oldIndex, newIndex);
+		});
+	};
+
+	return (
+		<div className="pl-8">
+			<div
+				onClick={() => {
+					console.log(lectures);
+				}}>
+				123
+			</div>
+			<DndContext
+				sensors={sensors}
+				collisionDetection={closestCenter}
+				onDragEnd={handleDragEnd}>
+				<SortableContext
+					items={items}
+					strategy={verticalListSortingStrategy}>
+					{items.map((lecture) => (
+						<SortableLecture
+							key={lecture.id}
+							field={lecture}
+							remove={async () => {
+								if (lecture?.id) {
+									await softDeleteByIds.mutateAsync({
+										ids: [lecture.id],
+									});
+								}
+								setItems(lectures);
+							}}
+							sectionFieldKey={sectionId}
+						/>
+					))}
+				</SortableContext>
+			</DndContext>
+			<Button
+				type="dashed"
+				block
+				icon={<PlusOutlined />}
+				className="mt-4"
+				onClick={() => {
+					setItems([
+						...items.filter((item) => !!item.id),
+						{
+							id: null,
+							title: "",
+							meta: {
+								type: LectureType.ARTICLE,
+							},
+						},
+					]);
+				}}>
+				添加课时
+			</Button>
+		</div>
+	);
+};