Merge pull request #2054 from visuddhinanda/agile

支持招生人数

dashboard/src/components/api/Course.ts

@@ -27,10 +27,21 @@ export interface ICourseDataRequest {
   sign_up_end_at: string | null; //报名结束时间
   join: string;
   request_exp: string;
-}
-export type TCourseRole = "teacher" | "manager" | "assistant" | "student";
+  number: number;
+}
+export type TCourseRole =
+  | "owner"
+  | "teacher"
+  | "manager"
+  | "assistant"
+  | "student";
 export type TCourseJoinMode = "invite" | "manual" | "open";
 export type TCourseExpRequest = "none" | "begin-end" | "daily";
+
+export interface IMember {
+  role: TCourseRole;
+  status: TCourseMemberStatus;
+}
 export interface ICourseDataResponse {
   id: string; //课程ID
   title: string; //标题
@@ -58,6 +69,8 @@ export interface ICourseDataResponse {
   my_status?: TCourseMemberStatus;
   my_status_id?: string;
   count_progressing?: number;
+  number: number;
+  members?: IMember[];
   created_at: string; //创建时间
   updated_at: string; //修改时间
 }
@@ -153,7 +166,7 @@ export interface ICourseMemberData {
   course_id: string;
   channel_id?: string;
   channel?: IChannel;
-  role?: string;
+  role?: TCourseRole;
   operating?: "invite" | "sign_up";
   user?: IUser;
   editor?: IUser;
@@ -171,7 +184,7 @@ export interface ICourseMemberListResponse {
   message: string;
   data: {
     rows: ICourseMemberData[];
-    role: TRole;
+    role: TCourseRole;
     count: number;
   };
 }

dashboard/src/components/course/AddMember.tsx

@@ -6,11 +6,15 @@ import { UserAddOutlined } from "@ant-design/icons";
 import { get, post } from "../../request";
 import { IUserListResponse } from "../api/Auth";
 import { useState } from "react";
-import { ICourseMemberData, ICourseMemberResponse } from "../api/Course";
+import {
+  ICourseMemberData,
+  ICourseMemberResponse,
+  TCourseRole,
+} from "../api/Course";
 
 interface IFormData {
   userId: string;
-  role: string;
+  role: TCourseRole;
 }
 
 interface IWidget {

dashboard/src/components/course/CourseHead.tsx

@@ -4,10 +4,9 @@ import { Image, Space, Col, Row, Breadcrumb, Tag } from "antd";
 import { Typography } from "antd";
 import { HomeOutlined } from "@ant-design/icons";
 
-import { IUser } from "../auth/User";
 import { API_HOST } from "../../request";
 import UserName from "../auth/UserName";
-import { TCourseJoinMode } from "../api/Course";
+import { ICourseDataResponse } from "../api/Course";
 import { useIntl } from "react-intl";
 import Status from "./Status";
 import moment from "moment";
@@ -27,37 +26,22 @@ const courseDuration = (startAt?: string, endAt?: string) => {
 };
 
 interface IWidget {
-  id?: string;
-  title?: string;
-  subtitle?: string;
-  coverUrl?: string[];
-  startAt?: string;
-  endAt?: string;
-  signUpStartAt?: string;
-  signUpEndAt?: string;
-  teacher?: IUser;
-  join?: TCourseJoinMode;
+  data?: ICourseDataResponse;
 }
-const CourseHeadWidget = ({
-  id,
-  title,
-  subtitle,
-  coverUrl,
-  teacher,
-  startAt,
-  endAt,
-  signUpStartAt,
-  signUpEndAt,
-  join,
-}: IWidget) => {
+const CourseHeadWidget = ({ data }: IWidget) => {
   const intl = useIntl();
-  const duration = courseDuration(startAt, endAt);
+  const duration = courseDuration(data?.start_at, data?.end_at);
   let signUp = "";
-  if (moment().isBefore(moment(signUpStartAt))) {
+  if (moment().isBefore(moment(data?.sign_up_start_at))) {
     signUp = "未开始";
-  } else if (moment().isBetween(moment(signUpStartAt), moment(signUpEndAt))) {
+  } else if (
+    moment().isBetween(
+      moment(data?.sign_up_start_at),
+      moment(data?.sign_up_end_at)
+    )
+  ) {
     signUp = "可报名";
-  } else if (moment().isAfter(moment(signUpEndAt))) {
+  } else if (moment().isAfter(moment(data?.sign_up_end_at))) {
     signUp = "已结束";
   }
   return (
@@ -75,62 +59,60 @@ const CourseHeadWidget = ({
                   <Text>课程</Text>
                 </Link>
               </Breadcrumb.Item>
-              <Breadcrumb.Item>{title}</Breadcrumb.Item>
+              <Breadcrumb.Item>{data?.title}</Breadcrumb.Item>
             </Breadcrumb>
             <Space>
               <Image
                 width={200}
                 style={{ borderRadius: 12 }}
-                src={coverUrl && coverUrl.length > 1 ? coverUrl[1] : undefined}
+                src={
+                  data?.cover_url && data?.cover_url.length > 1
+                    ? data?.cover_url[1]
+                    : undefined
+                }
                 preview={{
                   src:
-                    coverUrl && coverUrl.length > 0 ? coverUrl[0] : undefined,
+                    data?.cover_url && data?.cover_url.length > 0
+                      ? data?.cover_url[0]
+                      : undefined,
                 }}
                 fallback={`${API_HOST}/app/course/img/default.jpg`}
               />
               <Space direction="vertical">
-                <Title level={3}>{title}</Title>
-                <Title level={5}>{subtitle}</Title>
+                <Title level={3}>{data?.title}</Title>
+                <Title level={5}>{data?.subtitle}</Title>
                 <Text>
                   <Space>
                     {"报名时间:"}
-                    {moment(signUpStartAt).format("YYYY-MM-DD")}——
-                    {moment(signUpEndAt).format("YYYY-MM-DD")}
+                    {moment(data?.sign_up_start_at).format("YYYY-MM-DD")}——
+                    {moment(data?.sign_up_end_at).format("YYYY-MM-DD")}
                     <Tag>{signUp}</Tag>
                   </Space>
                 </Text>
                 <Text>
                   <Space>
                     {"课程时间:"}
-                    {moment(startAt).format("YYYY-MM-DD")}——
-                    {moment(endAt).format("YYYY-MM-DD")}
+                    {moment(data?.start_at).format("YYYY-MM-DD")}——
+                    {moment(data?.end_at).format("YYYY-MM-DD")}
                     {duration}
                   </Space>
                 </Text>
                 <Text>
-                  {join
+                  {data?.join
                     ? intl.formatMessage({
-                        id: `course.join.mode.${join}.message`,
+                        id: `course.join.mode.${data.join}.message`,
                       })
                     : undefined}
                 </Text>
 
-                <Status
-                  courseId={id}
-                  courseName={title}
-                  joinMode={join}
-                  startAt={startAt}
-                  endAt={endAt}
-                  signUpStartAt={signUpStartAt}
-                  signUpEndAt={signUpEndAt}
-                />
+                <Status data={data} />
               </Space>
             </Space>
 
             <Space>
               <Text>主讲人：</Text>{" "}
               <Text>
-                <UserName {...teacher} />
+                <UserName {...data?.teacher} />
               </Text>
             </Space>
           </Space>

dashboard/src/components/course/CourseInfoEdit.tsx

@@ -8,6 +8,7 @@ import {
   ProFormUploadButton,
   RequestOptionsType,
   ProFormDependency,
+  ProFormDigit,
 } from "@ant-design/pro-components";
 
 import { message, Form } from "antd";
@@ -44,6 +45,7 @@ interface IFormData {
   status: number;
   join: string;
   exp: string;
+  number: number;
 }
 
 interface IWidget {
@@ -104,6 +106,7 @@ const CourseInfoEditWidget = ({
             sign_up_end_at: signUpEndAt,
             join: values.join,
             request_exp: values.exp,
+            number: values.number,
           };
           console.debug("course info edit put", url, postData);
           const res = await put<ICourseDataRequest, ICourseResponse>(
@@ -175,6 +178,7 @@ const CourseInfoEditWidget = ({
             status: res.data.publicity,
             join: res.data.join,
             exp: res.data.request_exp,
+            number: res.data.number,
           };
         }}
       >
@@ -252,6 +256,7 @@ const CourseInfoEditWidget = ({
               id: "forms.fields.teacher.label",
             })}
           />
+          <ProFormDigit label="招生数量" name="number" min={0} />
         </ProForm.Group>
         <ProForm.Group>
           <ProFormDateRangePicker width="md" name="signUp" label="报名时间" />

dashboard/src/components/course/CourseList.tsx

@@ -1,10 +1,9 @@
 //课程列表
 import { Link } from "react-router-dom";
 import { useEffect, useState } from "react";
-
 import { Avatar, List, message, Typography, Image } from "antd";
-import { ICourse } from "../../pages/library/course/course";
-import { ICourseListResponse } from "../api/Course";
+
+import { ICourseDataResponse, ICourseListResponse } from "../api/Course";
 import { API_HOST, get } from "../../request";
 
 const { Paragraph } = Typography;
@@ -13,23 +12,13 @@ interface IWidget {
   type: "open" | "close";
 }
 const CourseListWidget = ({ type }: IWidget) => {
-  const [data, setData] = useState<ICourse[]>();
+  const [data, setData] = useState<ICourseDataResponse[]>();
 
   useEffect(() => {
     get<ICourseListResponse>(`/v2/course?view=${type}`).then((json) => {
       if (json.ok) {
         console.log(json.data);
-        const course: ICourse[] = json.data.rows.map((item) => {
-          return {
-            id: item.id,
-            title: item.title,
-            subtitle: item.subtitle,
-            teacher: item.teacher,
-            intro: item.content,
-            coverUrl: item.cover_url,
-          };
-        });
-        setData(course);
+        setData(json.data.rows);
       } else {
         message.error(json.message);
       }
@@ -55,14 +44,14 @@ const CourseListWidget = ({ type }: IWidget) => {
               width={128}
               style={{ borderRadius: 12 }}
               src={
-                item.coverUrl && item.coverUrl.length > 1
-                  ? item.coverUrl[1]
+                item.cover_url && item.cover_url.length > 1
+                  ? item.cover_url[1]
                   : undefined
               }
               preview={{
                 src:
-                  item.coverUrl && item.coverUrl.length > 0
-                    ? item.coverUrl[0]
+                  item.cover_url && item.cover_url.length > 0
+                    ? item.cover_url[0]
                     : undefined,
               }}
               fallback={`${API_HOST}/app/course/img/default.jpg`}
@@ -75,7 +64,7 @@ const CourseListWidget = ({ type }: IWidget) => {
             description={<div>主讲：{item.teacher?.nickName}</div>}
           />
           <Paragraph ellipsis={{ rows: 2, expandable: false }}>
-            {item.intro}
+            {item.summary}
           </Paragraph>
         </List.Item>
       )}

dashboard/src/components/course/LecturerList.tsx

@@ -3,8 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { Card, List, message, Typography, Image } from "antd";
 
-import { ICourse } from "../../pages/library/course/course";
-import { ICourseListResponse } from "../api/Course";
+import { ICourseDataResponse, ICourseListResponse } from "../api/Course";
 import { API_HOST, get } from "../../request";
 import CourseNewLoading from "./CourseNewLoading";
 
@@ -12,7 +11,7 @@ const { Meta } = Card;
 const { Paragraph } = Typography;
 
 const LecturerListWidget = () => {
-  const [data, setData] = useState<ICourse[]>();
+  const [data, setData] = useState<ICourseDataResponse[]>();
   const [loading, setLoading] = useState(false);
 
   const navigate = useNavigate();
@@ -25,17 +24,7 @@ const LecturerListWidget = () => {
       .then((json) => {
         if (json.ok) {
           console.log(json.data);
-          const course: ICourse[] = json.data.rows.map((item) => {
-            return {
-              id: item.id,
-              title: item.title,
-              subtitle: item.subtitle,
-              teacher: item.teacher,
-              intro: item.content,
-              coverUrl: item.cover_url,
-            };
-          });
-          setData(course);
+          setData(json.data.rows);
         } else {
           message.error(json.message);
         }
@@ -57,14 +46,14 @@ const LecturerListWidget = () => {
               <Image
                 alt="example"
                 src={
-                  item.coverUrl && item.coverUrl.length > 1
-                    ? item.coverUrl[1]
+                  item.cover_url && item.cover_url.length > 1
+                    ? item.cover_url[1]
                     : undefined
                 }
                 preview={{
                   src:
-                    item.coverUrl && item.coverUrl.length > 0
-                      ? item.coverUrl[0]
+                    item.cover_url && item.cover_url.length > 0
+                      ? item.cover_url[0]
                       : undefined,
                 }}
                 width="240"
@@ -80,7 +69,7 @@ const LecturerListWidget = () => {
               title={item.title}
               description={
                 <Paragraph ellipsis={{ rows: 2, expandable: false }}>
-                  {item.intro}
+                  {item.summary}
                 </Paragraph>
               }
             />

dashboard/src/components/course/Status.tsx

@@ -10,9 +10,9 @@ import { Link } from "react-router-dom";
 
 import { get } from "../../request";
 import {
+  ICourseDataResponse,
   ICourseMemberData,
   ICourseMemberResponse,
-  TCourseJoinMode,
   TCourseMemberStatus,
 } from "../api/Course";
 
@@ -21,39 +21,30 @@ import { currentUser } from "../../reducers/current-user";
 import UserAction from "./UserAction";
 import { getStatusColor, getStudentActionsByStatus } from "./RolePower";
 
-const { Paragraph } = Typography;
+const { Paragraph, Text } = Typography;
 
 interface IWidget {
-  courseId?: string;
-  courseName?: string;
-  startAt?: string;
-  endAt?: string;
-  signUpStartAt?: string;
-  signUpEndAt?: string;
-  joinMode?: TCourseJoinMode;
+  data?: ICourseDataResponse;
 }
-const StatusWidget = ({
-  courseId,
-  courseName,
-  startAt,
-  endAt,
-  signUpStartAt,
-  signUpEndAt,
-  joinMode,
-}: IWidget) => {
+const StatusWidget = ({ data }: IWidget) => {
   const intl = useIntl();
   const [currMember, setCurrMember] = useState<ICourseMemberData>();
   const user = useAppSelector(currentUser);
 
-  console.debug("course status", signUpStartAt, signUpEndAt);
+  const numberOfStudent = data?.members?.filter(
+    (value) =>
+      value.role === "student" &&
+      (value.status === "accepted" || value.status === "applied")
+  ).length;
+
   useEffect(() => {
     /**
      * 获取该课程我的报名状态
      */
-    if (typeof courseId === "undefined") {
+    if (typeof data?.id === "undefined") {
       return;
     }
-    const url = `/v2/course-member/${courseId}`;
+    const url = `/v2/course-member/${data?.id}`;
     console.info("api request", url);
     get<ICourseMemberResponse>(url).then((json) => {
       console.debug("course member", json);
@@ -61,7 +52,7 @@ const StatusWidget = ({
         setCurrMember(json.data);
       }
     });
-  }, [courseId]);
+  }, [data?.id]);
 
   let labelStatus = "";
 
@@ -73,13 +64,13 @@ const StatusWidget = ({
   }
   const actions = getStudentActionsByStatus(
     currStatus,
-    joinMode,
-    startAt,
-    endAt,
-    signUpStartAt,
-    signUpEndAt
+    data?.join,
+    data?.start_at,
+    data?.end_at,
+    data?.sign_up_start_at,
+    data?.sign_up_end_at
   );
-  console.debug("getStudentActionsByStatus", currStatus, joinMode, actions);
+  console.debug("getStudentActionsByStatus", currStatus, data?.join, actions);
   if (user) {
     labelStatus = intl.formatMessage({
       id: `course.member.status.${currStatus}.label`,
@@ -87,13 +78,22 @@ const StatusWidget = ({
     operation = (
       <Space>
         {actions?.map((item, id) => {
+          if (item === "apply") {
+            if (
+              numberOfStudent &&
+              data?.number &&
+              numberOfStudent >= data?.number
+            ) {
+              return <Text type="danger">{"名额已满"}</Text>;
+            }
+          }
           return (
             <UserAction
               key={id}
               action={item}
               currUser={currMember}
-              courseId={courseId}
-              courseName={courseName}
+              courseId={data?.id}
+              courseName={data?.title}
               user={{
                 id: user.id,
                 nickName: user.nickName,
@@ -117,7 +117,7 @@ const StatusWidget = ({
     );
   }
 
-  return courseId ? (
+  return data?.id ? (
     <Paragraph>
       <div style={{ color: getStatusColor(currStatus) }}>{labelStatus}</div>
       {operation}

dashboard/src/components/home/CourseNewList.tsx

@@ -3,31 +3,20 @@ import { useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { Card, List, message, Typography } from "antd";
 
-import { ICourse } from "../../pages/library/course/course";
-import { ICourseListResponse } from "../api/Course";
+import { ICourseDataResponse, ICourseListResponse } from "../api/Course";
 import { API_HOST, get } from "../../request";
 
 const { Paragraph } = Typography;
 
 const CourseNewListWidget = () => {
-  const [data, setData] = useState<ICourse[]>();
+  const [data, setData] = useState<ICourseDataResponse[]>();
   const navigate = useNavigate();
 
   useEffect(() => {
     get<ICourseListResponse>(`/v2/course?view=new&limit=4`).then((json) => {
       if (json.ok) {
         console.log(json.data);
-        const course: ICourse[] = json.data.rows.map((item) => {
-          return {
-            id: item.id,
-            title: item.title,
-            subtitle: item.subtitle,
-            teacher: item.teacher,
-            intro: item.content,
-            coverUrl: item.cover_url,
-          };
-        });
-        setData(course);
+        setData(json.data.rows);
       } else {
         message.error(json.message);
       }
@@ -51,7 +40,7 @@ const CourseNewListWidget = () => {
               <div style={{ flex: 3 }}>
                 <img
                   alt="example"
-                  src={API_HOST + "/" + item.coverUrl}
+                  src={API_HOST + "/" + item.cover_url}
                   width="150"
                   height="150"
                 />
@@ -59,7 +48,7 @@ const CourseNewListWidget = () => {
               <div style={{ flex: 7 }}>
                 <h3>{item.title}</h3>
                 <Paragraph ellipsis={{ rows: 2, expandable: false }}>
-                  {item.intro}
+                  {item.summary}
                 </Paragraph>
               </div>
             </div>

dashboard/src/components/template/Wbw/WbwPali.tsx

@@ -320,7 +320,7 @@ const WbwPaliWidget = ({
           ) : (
             <></>
           )}
-          {mode === "edit" ? paliWord : ""}
+
           <Popover
             content={wbwDialog}
             placement={toDivRight > 200 ? "bottom" : "bottomRight"}
@@ -347,6 +347,7 @@ const WbwPaliWidget = ({
               )}
             </span>
           </Popover>
+          {mode === "edit" ? paliWord : ""}
         </span>
         <Space>
           <VideoIcon attachments={data.attachments} />

dashboard/src/components/template/Wbw/wbw.css

@@ -100,6 +100,7 @@
   position: absolute;
   border: 1px solid gray;
   background-color: wheat;
+  margin-top: -1.2em;
 }
 .pali_shell:hover .edit_icon {
   display: inline-block;

dashboard/src/pages/library/course/course.tsx

@@ -5,40 +5,18 @@ import { Divider, message } from "antd";
 
 import CourseIntro from "../../../components/course/CourseIntro";
 import TextBook from "../../../components/course/TextBook";
-import { IUser } from "../../../components/auth/User";
 import { get } from "../../../request";
 import {
+  ICourseDataResponse,
   ICourseResponse,
-  TCourseExpRequest,
-  TCourseJoinMode,
 } from "../../../components/api/Course";
 import CourseHead from "../../../components/course/CourseHead";
 import ArticleSkeleton from "../../../components/article/ArticleSkeleton";
 import ErrorResult from "../../../components/general/ErrorResult";
 
-export interface ICourse {
-  id: string; //课程ID
-  title: string; //标题
-  subtitle?: string; //副标题
-  summary?: string;
-  teacher?: IUser; //UserID
-  privacy?: number; //公开性-公开/内部
-  createdAt?: string; //创建时间
-  updatedAt?: string; //修改时间
-  anthologyId?: string; //文集ID
-  channelId?: string;
-  startAt?: string; //课程开始时间
-  endAt?: string; //课程结束时间
-  signUpStartAt?: string; //报名开始时间
-  signUpEndAt?: string; //报名结束时间
-  intro?: string; //简介
-  coverUrl?: string[]; //封面图片文件名
-  join?: TCourseJoinMode;
-  exp?: TCourseExpRequest;
-}
 const Widget = () => {
   const { id } = useParams(); //url 参数
-  const [courseInfo, setCourseInfo] = useState<ICourse>();
+  const [courseInfo, setCourseInfo] = useState<ICourseDataResponse>();
   const [loading, setLoading] = useState(false);
   const [errorCode, setErrorCode] = useState<number>();
 
@@ -50,26 +28,7 @@ const Widget = () => {
       .then((json) => {
         if (json.ok) {
           console.log("api response", json.data);
-          const course: ICourse = {
-            id: json.data.id,
-            title: json.data.title,
-            subtitle: json.data.subtitle,
-            teacher: json.data.teacher,
-            privacy: json.data.publicity,
-            createdAt: json.data.created_at,
-            updatedAt: json.data.updated_at,
-            anthologyId: json.data.anthology_id,
-            channelId: json.data.channel_id,
-            startAt: json.data.start_at,
-            endAt: json.data.end_at,
-            signUpStartAt: json.data.sign_up_start_at,
-            signUpEndAt: json.data.sign_up_end_at,
-            intro: json.data.content,
-            coverUrl: json.data.cover_url,
-            join: json.data.join,
-            exp: json.data.request_exp,
-          };
-          setCourseInfo(course);
+          setCourseInfo(json.data);
         } else {
           message.error(json.message);
         }
@@ -88,12 +47,12 @@ const Widget = () => {
         <ErrorResult code={errorCode} />
       ) : (
         <div>
-          <CourseHead {...courseInfo} />
+          <CourseHead data={courseInfo} />
           <Divider />
-          <CourseIntro {...courseInfo} />
+          <CourseIntro intro={courseInfo?.summary} />
           <Divider />
           <TextBook
-            anthologyId={courseInfo?.anthologyId}
+            anthologyId={courseInfo?.anthology_id}
             courseId={courseInfo?.id}
           />
         </div>