@selfcommunity/react-ui 0.10.2-courses.186 → 0.10.2-courses.187
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/Course/Course.js +12 -4
- package/lib/cjs/components/CourseDashboard/Header.js +2 -22
- package/lib/cjs/components/CourseDashboard/Student.js +4 -5
- package/lib/cjs/components/CourseDashboard/Teacher/Comments.js +7 -10
- package/lib/cjs/components/CourseDashboard/Teacher/Info.js +2 -4
- package/lib/cjs/components/CourseDashboard/Teacher/Students.js +2 -1
- package/lib/cjs/components/CourseForm/CourseForm.js +6 -7
- package/lib/cjs/components/Courses/Courses.js +16 -19
- package/lib/cjs/components/EditCourse/EditCourse.js +27 -26
- package/lib/cjs/components/EditCourse/Lessons/Skeleton.js +1 -2
- package/lib/cjs/components/EditCourse/Lessons.d.ts +3 -1
- package/lib/cjs/components/EditCourse/Lessons.js +6 -12
- package/lib/cjs/components/EditCourse/Options.js +3 -4
- package/lib/cjs/components/EditCourse/Requests.d.ts +3 -1
- package/lib/cjs/components/EditCourse/Requests.js +5 -3
- package/lib/cjs/components/EditCourse/Status.d.ts +3 -0
- package/lib/cjs/components/EditCourse/Status.js +15 -9
- package/lib/cjs/components/EditCourse/Users.d.ts +3 -1
- package/lib/cjs/components/EditCourse/Users.js +5 -5
- package/lib/cjs/index.d.ts +2 -1
- package/lib/cjs/index.js +8 -6
- package/lib/cjs/shared/AddUsersButton/AddUsersButton.js +3 -2
- package/lib/cjs/shared/CourseTypePopover/CourseTypePopover.d.ts +9 -0
- package/lib/cjs/shared/CourseTypePopover/CourseTypePopover.js +48 -0
- package/lib/cjs/shared/CourseTypePopover/index.d.ts +3 -0
- package/lib/cjs/shared/CourseTypePopover/index.js +5 -0
- package/lib/cjs/shared/CourseUsersTable/CourseUsersTable.d.ts +2 -1
- package/lib/cjs/shared/CourseUsersTable/CourseUsersTable.js +6 -7
- package/lib/cjs/types/course.d.ts +5 -0
- package/lib/cjs/types/course.js +7 -1
- package/lib/cjs/utils/course.js +2 -1
- package/lib/esm/components/Course/Course.js +12 -4
- package/lib/esm/components/CourseDashboard/Header.js +4 -24
- package/lib/esm/components/CourseDashboard/Student.js +4 -5
- package/lib/esm/components/CourseDashboard/Teacher/Comments.js +7 -9
- package/lib/esm/components/CourseDashboard/Teacher/Info.js +2 -4
- package/lib/esm/components/CourseDashboard/Teacher/Students.js +2 -1
- package/lib/esm/components/CourseForm/CourseForm.js +6 -7
- package/lib/esm/components/Courses/Courses.js +16 -19
- package/lib/esm/components/EditCourse/EditCourse.js +28 -27
- package/lib/esm/components/EditCourse/Lessons/Skeleton.js +2 -3
- package/lib/esm/components/EditCourse/Lessons.d.ts +3 -1
- package/lib/esm/components/EditCourse/Lessons.js +7 -13
- package/lib/esm/components/EditCourse/Options.js +5 -6
- package/lib/esm/components/EditCourse/Requests.d.ts +3 -1
- package/lib/esm/components/EditCourse/Requests.js +5 -3
- package/lib/esm/components/EditCourse/Status.d.ts +3 -0
- package/lib/esm/components/EditCourse/Status.js +16 -10
- package/lib/esm/components/EditCourse/Users.d.ts +3 -1
- package/lib/esm/components/EditCourse/Users.js +5 -5
- package/lib/esm/index.d.ts +2 -1
- package/lib/esm/index.js +2 -1
- package/lib/esm/shared/AddUsersButton/AddUsersButton.js +3 -2
- package/lib/esm/shared/CourseTypePopover/CourseTypePopover.d.ts +9 -0
- package/lib/esm/shared/CourseTypePopover/CourseTypePopover.js +45 -0
- package/lib/esm/shared/CourseTypePopover/index.d.ts +3 -0
- package/lib/esm/shared/CourseTypePopover/index.js +2 -0
- package/lib/esm/shared/CourseUsersTable/CourseUsersTable.d.ts +2 -1
- package/lib/esm/shared/CourseUsersTable/CourseUsersTable.js +6 -7
- package/lib/esm/types/course.d.ts +5 -0
- package/lib/esm/types/course.js +6 -0
- package/lib/esm/utils/course.js +2 -1
- package/lib/umd/react-ui.js +1 -1
- package/package.json +8 -8
|
@@ -137,6 +137,9 @@ function Course(inProps) {
|
|
|
137
137
|
else if ((0, course_2.isCourseCompleted)(scCourse)) {
|
|
138
138
|
return (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.status.completed", id: "ui.course.status.completed" });
|
|
139
139
|
}
|
|
140
|
+
else if (scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED) {
|
|
141
|
+
return (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.status.joined", id: "ui.course.status.joined" });
|
|
142
|
+
}
|
|
140
143
|
else if ((0, course_2.isCourseNew)(scCourse)) {
|
|
141
144
|
return (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.status.new", id: "ui.course.status.new" });
|
|
142
145
|
}
|
|
@@ -147,22 +150,27 @@ function Course(inProps) {
|
|
|
147
150
|
*/
|
|
148
151
|
let contentObj;
|
|
149
152
|
if (template === course_1.SCCourseTemplateType.PREVIEW) {
|
|
150
|
-
contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.previewImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scCourse.image_medium, alt: scCourse.name, className: classes.previewImage }), (isCourseAdmin || (0, course_2.isCourseCompleted)(scCourse) || (0, course_2.isCourseNew)(scCourse)) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", color: (0, course_2.isCourseCompleted)(scCourse) || (isCourseAdmin && scCourse.privacy)
|
|
153
|
+
contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.previewImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scCourse.image_medium, alt: scCourse.name, className: classes.previewImage }), (isCourseAdmin || (0, course_2.isCourseCompleted)(scCourse) || (0, course_2.isCourseNew)(scCourse) || scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", color: (0, course_2.isCourseCompleted)(scCourse) || (isCourseAdmin && scCourse.privacy)
|
|
151
154
|
? 'primary'
|
|
152
155
|
: isCourseAdmin && !scCourse.privacy
|
|
153
156
|
? 'default'
|
|
154
|
-
:
|
|
157
|
+
: scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED
|
|
158
|
+
? 'warning'
|
|
159
|
+
: 'secondary', label: chipLabel, className: classes.chip })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!((_a = scCourse.created_by) === null || _a === void 0 ? void 0 : _a.deleted) && {
|
|
155
160
|
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
156
161
|
}), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !((_b = scCourse.created_by) === null || _b === void 0 ? void 0 : _b.community_badge), smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCourse.name, src: (_c = scCourse.created_by) === null || _c === void 0 ? void 0 : _c.avatar, className: classes.previewAvatar }) })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.previewCreator }, (!((_d = scCourse.created_by) === null || _d === void 0 ? void 0 : _d.deleted) && {
|
|
157
162
|
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
158
163
|
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.previewInfo }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), "-", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.previewCategory }, { children: scCourse.categories.map((category) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: category.name }, category.id))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.previewProgress }, { children: renderProgress() }))] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) })) })))] })));
|
|
159
164
|
}
|
|
160
165
|
else {
|
|
161
|
-
contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, elevation: 0, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet &&
|
|
166
|
+
contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, elevation: 0, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet &&
|
|
167
|
+
(isCourseAdmin || (0, course_2.isCourseCompleted)(scCourse) || (0, course_2.isCourseNew)(scCourse) || scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", color: (0, course_2.isCourseCompleted)(scCourse) || (isCourseAdmin && scCourse.privacy)
|
|
162
168
|
? 'primary'
|
|
163
169
|
: isCourseAdmin && !scCourse.privacy
|
|
164
170
|
? 'default'
|
|
165
|
-
:
|
|
171
|
+
: scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED
|
|
172
|
+
? 'warning'
|
|
173
|
+
: 'secondary', label: chipLabel, className: classes.chip }))] })), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!userProfileSnippet && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!((_f = scCourse.created_by) === null || _f === void 0 ? void 0 : _f.deleted) && {
|
|
166
174
|
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
167
175
|
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: (_g = scCourse.created_by) === null || _g === void 0 ? void 0 : _g.username })) }))), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.name })) }))] }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: userProfileSnippet ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !scCourse.hide_member_count && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.userProfileSnippet.students", defaultMessage: "ui.course.userProfileSnippet.students", values: { students: scCourse.member_count } })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), "-", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })) }), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) }))) }));
|
|
168
176
|
}
|
|
@@ -10,6 +10,7 @@ const react_1 = require("react");
|
|
|
10
10
|
const react_core_1 = require("@selfcommunity/react-core");
|
|
11
11
|
const types_2 = require("../../types");
|
|
12
12
|
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
13
|
+
const CourseTypePopover_1 = tslib_1.__importDefault(require("../../shared/CourseTypePopover"));
|
|
13
14
|
const classes = {
|
|
14
15
|
header: `${constants_1.PREFIX}-header`,
|
|
15
16
|
img: `${constants_1.PREFIX}-header-img`,
|
|
@@ -29,36 +30,15 @@ function getUrlEditDashboard(course) {
|
|
|
29
30
|
function HeaderCourseDashboard(props) {
|
|
30
31
|
// PROPS
|
|
31
32
|
const { course, hasAction = false } = props;
|
|
32
|
-
// STATES
|
|
33
|
-
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
|
|
34
|
-
const open = Boolean(anchorEl);
|
|
35
33
|
// CONTEXTS
|
|
36
34
|
const scRoutingContext = (0, react_core_1.useSCRouting)();
|
|
37
35
|
// INTL
|
|
38
36
|
const intl = (0, react_intl_1.useIntl)();
|
|
39
|
-
// HANDLERS
|
|
40
|
-
const handleOpenPopover = (0, react_1.useCallback)((e) => {
|
|
41
|
-
setAnchorEl(e.currentTarget);
|
|
42
|
-
}, [setAnchorEl]);
|
|
43
|
-
const handlePopoverClose = (0, react_1.useCallback)(() => {
|
|
44
|
-
setAnchorEl(null);
|
|
45
|
-
}, [setAnchorEl]);
|
|
46
37
|
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)("img", { src: course.image_bigger, alt: course.image_bigger, className: classes.img }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: course.name })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.iconWrapper, classes.contrastColor) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "public" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.label", defaultMessage: "ui.course.label", values: {
|
|
47
38
|
privacy: intl.formatMessage({
|
|
48
39
|
id: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
|
|
49
40
|
defaultMessage: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
|
|
50
41
|
})
|
|
51
|
-
} }) }))] })), (0, jsx_runtime_1.
|
|
52
|
-
typeOfCourse: intl.formatMessage({
|
|
53
|
-
id: `ui.course.type.${course.type}`,
|
|
54
|
-
defaultMessage: `ui.course.type.${course.type}`
|
|
55
|
-
})
|
|
56
|
-
} }) })) })), open && ((0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: true, anchorEl: anchorEl, anchorOrigin: {
|
|
57
|
-
vertical: 'bottom',
|
|
58
|
-
horizontal: 'left'
|
|
59
|
-
}, transformOrigin: {
|
|
60
|
-
vertical: 'top',
|
|
61
|
-
horizontal: 'left'
|
|
62
|
-
}, onClose: handlePopoverClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { padding: '10px' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body2", sx: { whiteSpace: 'pre-line' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${course.type}.info`, defaultMessage: `ui.courseForm.${course.type}.info` }) })) })) })))] }))] })), hasAction && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
|
|
42
|
+
} }) }))] })), (0, jsx_runtime_1.jsx)(CourseTypePopover_1.default, { course: course })] })), hasAction && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
|
|
63
43
|
}
|
|
64
44
|
exports.default = (0, react_1.memo)(HeaderCourseDashboard);
|
|
@@ -49,8 +49,7 @@ const classes = {
|
|
|
49
49
|
box: `${constants_1.PREFIX}-box`,
|
|
50
50
|
percentageWrapper: `${constants_1.PREFIX}-percentage-wrapper`,
|
|
51
51
|
completedWrapper: `${constants_1.PREFIX}-completed-wrapper`,
|
|
52
|
-
contrastColor: `${constants_1.PREFIX}-contrast-color
|
|
53
|
-
contrastBgColor: `${constants_1.PREFIX}-contrast-bg-color`
|
|
52
|
+
contrastColor: `${constants_1.PREFIX}-contrast-color`
|
|
54
53
|
};
|
|
55
54
|
function getUrlNextLesson(course) {
|
|
56
55
|
var _a;
|
|
@@ -180,7 +179,7 @@ function Student(inProps) {
|
|
|
180
179
|
if (!scCourse) {
|
|
181
180
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
|
|
182
181
|
}
|
|
183
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, classes.studentContainer, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { course: scCourse }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className:
|
|
182
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, classes.studentContainer, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { course: scCourse }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.user }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!scCourse.created_by.deleted && {
|
|
184
183
|
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
185
184
|
}), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !scCourse.created_by.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, src: scCourse.created_by.avatar, alt: scCourse.created_by.username }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!scCourse.created_by.deleted && {
|
|
186
185
|
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
@@ -190,9 +189,9 @@ function Student(inProps) {
|
|
|
190
189
|
scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED)) ||
|
|
191
190
|
scCourse.privacy === types_1.SCCoursePrivacyType.OPEN ||
|
|
192
191
|
scCourse.privacy === types_1.SCCoursePrivacyType.DRAFT) &&
|
|
193
|
-
scCourse.description && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: (0, classnames_1.default)(classes.margin, classes.contrastColor) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.description", defaultMessage: "ui.course.dashboard.student.description" }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className:
|
|
192
|
+
scCourse.description && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: (0, classnames_1.default)(classes.margin, classes.contrastColor) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.description", defaultMessage: "ui.course.dashboard.student.description" }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.box }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.description }, { children: scCourse.description })) }))] })), (((scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE || scCourse.privacy === types_1.SCCoursePrivacyType.SECRET) &&
|
|
194
193
|
(scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER || scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED)) ||
|
|
195
|
-
(scCourse.privacy === types_1.SCCoursePrivacyType.OPEN && scCourse.join_status !== types_1.SCCourseJoinStatusType.CREATOR)) && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: (0, classnames_1.default)(classes.margin, classes.contrastColor) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.progress", defaultMessage: "ui.course.dashboard.student.
|
|
194
|
+
(scCourse.privacy === types_1.SCCoursePrivacyType.OPEN && scCourse.join_status !== types_1.SCCourseJoinStatusType.CREATOR)) && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [scCourse.join_status !== null && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: (0, classnames_1.default)(classes.margin, classes.contrastColor) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.progress", defaultMessage: "ui.course.dashboard.student.progress" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.box }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.percentageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.progress.described", defaultMessage: "ui.course.dashboard.student.progress.described", values: { progress: scCourse.num_lessons_completed, end: scCourse.num_lessons } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.progress.percentage", defaultMessage: "ui.course.dashboard.student.progress.percentage", values: { percentage: scCourse.user_completion_rate } }) }))] })), (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.progress, variant: "determinate", value: scCourse.user_completion_rate })] }))] })), scCourse.user_completion_rate === 100 && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.completedWrapper, classes.margin) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.completed", defaultMessage: "ui.course.dashboard.student.completed" }) })), (0, jsx_runtime_1.jsx)("img", { src: clapping_1.CLAPPING, alt: intl.formatMessage({ id: 'ui.course.dashboard.student.completed', defaultMessage: 'ui.course.dashboard.student.completed' }), width: 32, height: 32 })] }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: (0, classnames_1.default)(classes.margin, classes.contrastColor) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.contents", defaultMessage: "ui.course.dashboard.student.contents" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonsSections }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
|
|
196
195
|
sectionsNumber: scCourse.num_sections
|
|
197
196
|
} }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
|
|
198
197
|
lessonsNumber: scCourse.num_lessons
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const tslib_1 = require("tslib");
|
|
4
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
4
|
const material_1 = require("@mui/material");
|
|
6
5
|
const react_1 = require("react");
|
|
@@ -13,7 +12,6 @@ const Pagination_1 = require("../../../constants/Pagination");
|
|
|
13
12
|
const widget_1 = require("../../../utils/widget");
|
|
14
13
|
const react_core_1 = require("@selfcommunity/react-core");
|
|
15
14
|
const api_services_1 = require("@selfcommunity/api-services");
|
|
16
|
-
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
17
15
|
const classes = {
|
|
18
16
|
container: `${constants_1.PREFIX}-comments-container`,
|
|
19
17
|
outerWrapper: `${constants_1.PREFIX}-outer-wrapper`,
|
|
@@ -23,8 +21,7 @@ const classes = {
|
|
|
23
21
|
userInfo: `${constants_1.PREFIX}-user-info`,
|
|
24
22
|
circle: `${constants_1.PREFIX}-circle`,
|
|
25
23
|
button: `${constants_1.PREFIX}-button`,
|
|
26
|
-
contrastColor: `${constants_1.PREFIX}-contrast-color
|
|
27
|
-
contrastBgColor: `${constants_1.PREFIX}-contrast-bg-color`
|
|
24
|
+
contrastColor: `${constants_1.PREFIX}-contrast-color`
|
|
28
25
|
};
|
|
29
26
|
function CommentSkeleton({ id }) {
|
|
30
27
|
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [Array.from(new Array(id)).map((_, i) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", className: classes.avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" })] })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "180px", height: "21px" })] })] }), i))), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rounded", width: "112px", height: "36px", className: classes.button })] }))] })));
|
|
@@ -43,7 +40,7 @@ function Comments(props) {
|
|
|
43
40
|
cacheStrategy: utils_1.CacheStrategies.CACHE_FIRST,
|
|
44
41
|
visibleItems: endpointQueryParams.limit
|
|
45
42
|
}, widget_1.stateWidgetInitializer);
|
|
46
|
-
const [
|
|
43
|
+
const [isLoading, setIsLoading] = (0, react_1.useState)(false);
|
|
47
44
|
// CONTEXTS
|
|
48
45
|
const scUserContext = (0, react_core_1.useSCUser)();
|
|
49
46
|
const scRoutingContext = (0, react_core_1.useSCRouting)();
|
|
@@ -73,7 +70,7 @@ function Comments(props) {
|
|
|
73
70
|
}, [scUserContext.user, _init]);
|
|
74
71
|
// HANDLERS
|
|
75
72
|
const handleNext = (0, react_1.useCallback)(() => {
|
|
76
|
-
|
|
73
|
+
setIsLoading(true);
|
|
77
74
|
dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
|
|
78
75
|
api_services_1.http
|
|
79
76
|
.request({
|
|
@@ -82,12 +79,12 @@ function Comments(props) {
|
|
|
82
79
|
})
|
|
83
80
|
.then((res) => {
|
|
84
81
|
dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
|
|
85
|
-
|
|
82
|
+
setIsLoading(false);
|
|
86
83
|
})
|
|
87
84
|
.catch((error) => {
|
|
88
85
|
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
|
|
89
86
|
});
|
|
90
|
-
}, [state.next, dispatch,
|
|
87
|
+
}, [state.next, dispatch, setIsLoading]);
|
|
91
88
|
// MEMOS
|
|
92
89
|
const renderComments = (0, react_1.useMemo)(() => {
|
|
93
90
|
const map = new Map();
|
|
@@ -100,11 +97,11 @@ function Comments(props) {
|
|
|
100
97
|
map.set(name, [...map.get(name), comment]);
|
|
101
98
|
}
|
|
102
99
|
});
|
|
103
|
-
return Array.from(map.entries()).map(([name, comments]) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className:
|
|
100
|
+
return Array.from(map.entries()).map(([name, comments]) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: name })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(comment.created_at).toLocaleDateString() }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html } })] })] }), comment.id))), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, course), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label" }) })) }))] }))] }), name)));
|
|
104
101
|
}, [state.results]);
|
|
105
102
|
if (!state.initialized) {
|
|
106
103
|
return (0, jsx_runtime_1.jsx)(CommentsSkeleton, {});
|
|
107
104
|
}
|
|
108
|
-
return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.container }, { children: state.count > 0 ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1"
|
|
105
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.container }, { children: state.count > 0 ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.number", defaultMessage: "ui.course.dashboard.teacher.tab.comments.number", values: { commentsNumber: state.count } }) })), renderComments, isLoading && (0, jsx_runtime_1.jsx)(CommentSkeleton, { id: 1 }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: isLoading, disabled: !state.next, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.btn.label" }) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.empty", defaultMessage: "ui.course.dashboard.teacher.tab.comments.empty" }) }))) })));
|
|
109
106
|
}
|
|
110
107
|
exports.default = (0, react_1.memo)(Comments);
|
|
@@ -8,14 +8,12 @@ const constants_1 = require("../constants");
|
|
|
8
8
|
const CourseParticipantsButton_1 = tslib_1.__importDefault(require("../../CourseParticipantsButton"));
|
|
9
9
|
const react_1 = require("react");
|
|
10
10
|
const types_1 = require("../types");
|
|
11
|
-
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
12
11
|
const classes = {
|
|
13
|
-
info: `${constants_1.PREFIX}-info
|
|
14
|
-
contrastBgColor: `${constants_1.PREFIX}-contrast-bg-color`
|
|
12
|
+
info: `${constants_1.PREFIX}-info`
|
|
15
13
|
};
|
|
16
14
|
function InfoCourseDashboard(props) {
|
|
17
15
|
// PROPS
|
|
18
16
|
const { title, course, position } = props;
|
|
19
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className:
|
|
17
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: title, defaultMessage: title }) })), position === types_1.InfoPositionType.FIRST && (0, jsx_runtime_1.jsx)(CourseParticipantsButton_1.default, { course: course }), position === types_1.InfoPositionType.SECOND && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "h5" }, { children: [course.avg_completion_rate, "%"] }))] })));
|
|
20
18
|
}
|
|
21
19
|
exports.default = (0, react_1.memo)(InfoCourseDashboard);
|
|
@@ -10,6 +10,7 @@ const api_services_1 = require("@selfcommunity/api-services");
|
|
|
10
10
|
const react_core_1 = require("@selfcommunity/react-core");
|
|
11
11
|
const widget_1 = require("../../../utils/widget");
|
|
12
12
|
const Pagination_1 = require("../../../constants/Pagination");
|
|
13
|
+
const course_1 = require("../../../types/course");
|
|
13
14
|
const headerCells = [
|
|
14
15
|
{
|
|
15
16
|
id: 'ui.course.dashboard.teacher.tab.students.table.header.name'
|
|
@@ -62,6 +63,6 @@ function Students(props) {
|
|
|
62
63
|
};
|
|
63
64
|
}
|
|
64
65
|
}, [scUserContext.user, _init]);
|
|
65
|
-
return ((0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode:
|
|
66
|
+
return ((0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: course_1.SCCourseUsersTableModeType.DASHBOARD, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" }));
|
|
66
67
|
}
|
|
67
68
|
exports.default = (0, react_1.memo)(Students);
|
|
@@ -57,8 +57,7 @@ const classes = {
|
|
|
57
57
|
stepOne: `${constants_1.PREFIX}-step-one`,
|
|
58
58
|
stepTwo: `${constants_1.PREFIX}-step-two`,
|
|
59
59
|
title: `${constants_1.PREFIX}-title`,
|
|
60
|
-
contrastColor: `${constants_1.PREFIX}-contrast-color
|
|
61
|
-
contrastBgColor: `${constants_1.PREFIX}-contrast-bg-color`
|
|
60
|
+
contrastColor: `${constants_1.PREFIX}-contrast-color`
|
|
62
61
|
};
|
|
63
62
|
const Root = (0, styles_1.styled)(material_1.Box, {
|
|
64
63
|
name: constants_1.PREFIX,
|
|
@@ -250,11 +249,11 @@ function CourseForm(inProps) {
|
|
|
250
249
|
/**
|
|
251
250
|
* Renders root object
|
|
252
251
|
*/
|
|
253
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === Course_1.SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === Course_1.SCCourseFormStepType.GENERAL && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && ((0, jsx_runtime_1.jsxs)(
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
252
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === Course_1.SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === Course_1.SCCourseFormStepType.GENERAL && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [course && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadCourseCover_1.default, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
|
|
253
|
+
endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Course_1.COURSE_TITLE_MAX_LENGTH - field.name.length }))
|
|
254
|
+
}, error: Boolean(field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
|
|
255
|
+
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Course_1.COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : Course_1.COURSE_DESCRIPTION_MAX_LENGTH })))
|
|
256
|
+
}, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && (0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === Course_1.SCCourseFormStepType.GENERAL
|
|
258
257
|
? !field.type || Object.keys(error).length !== 0
|
|
259
258
|
: _step === Course_1.SCCourseFormStepType.CUSTOMIZATION &&
|
|
260
259
|
(!field.name ||
|
|
@@ -45,7 +45,7 @@ const Root = (0, material_1.styled)(material_1.Box, {
|
|
|
45
45
|
exports.CoursesChipRoot = (0, material_1.styled)(material_1.Chip, {
|
|
46
46
|
name: constants_1.PREFIX,
|
|
47
47
|
slot: 'CoursesChipRoot',
|
|
48
|
-
shouldForwardProp: (prop) => prop !== '
|
|
48
|
+
shouldForwardProp: (prop) => prop !== 'showMine' && prop !== 'showManagedCourses'
|
|
49
49
|
})(() => ({}));
|
|
50
50
|
/**
|
|
51
51
|
* > API documentation for the Community-JS Courses component. Learn about the available props and the CSS API.
|
|
@@ -96,8 +96,8 @@ function Courses(inProps) {
|
|
|
96
96
|
const [next, setNext] = (0, react_1.useState)(null);
|
|
97
97
|
const [query, setQuery] = (0, react_1.useState)('');
|
|
98
98
|
const [_categories, setCategories] = (0, react_1.useState)([]);
|
|
99
|
-
const [
|
|
100
|
-
const [
|
|
99
|
+
const [showMine, setShowMine] = (0, react_1.useState)(false);
|
|
100
|
+
const [showManagedCourses, setShowManagedCourses] = (0, react_1.useState)(false);
|
|
101
101
|
// CONTEXT
|
|
102
102
|
const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
|
|
103
103
|
const { preferences } = (0, react_core_1.useSCPreferences)();
|
|
@@ -106,14 +106,11 @@ function Courses(inProps) {
|
|
|
106
106
|
const onlyStaffEnabled = (0, react_1.useMemo)(() => { var _a; return (_a = preferences[react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ONLY_STAFF_ENABLED]) === null || _a === void 0 ? void 0 : _a.value; }, [preferences]);
|
|
107
107
|
const canCreateCourse = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_course; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
|
|
108
108
|
const endpoint = (0, react_1.useMemo)(() => {
|
|
109
|
-
if (
|
|
109
|
+
if (showManagedCourses) {
|
|
110
110
|
return api_services_1.Endpoints.GetJoinedCourses;
|
|
111
111
|
}
|
|
112
|
-
else if (showForMe) {
|
|
113
|
-
return api_services_1.Endpoints.CourseSuggestion;
|
|
114
|
-
}
|
|
115
112
|
return api_services_1.Endpoints.SearchCourses;
|
|
116
|
-
}, [
|
|
113
|
+
}, [showManagedCourses]);
|
|
117
114
|
// CONST
|
|
118
115
|
const authUserId = scUserContext.user ? scUserContext.user.id : null;
|
|
119
116
|
const theme = (0, material_1.useTheme)();
|
|
@@ -122,10 +119,10 @@ function Courses(inProps) {
|
|
|
122
119
|
const updatesSubscription = (0, react_1.useRef)(null);
|
|
123
120
|
// HANDLERS
|
|
124
121
|
const handleChipClick = () => {
|
|
125
|
-
|
|
122
|
+
setShowMine(!showMine);
|
|
126
123
|
};
|
|
127
124
|
const handleDeleteClick = () => {
|
|
128
|
-
|
|
125
|
+
setShowMine(false);
|
|
129
126
|
};
|
|
130
127
|
/**
|
|
131
128
|
* Fetches courses list
|
|
@@ -135,7 +132,7 @@ function Courses(inProps) {
|
|
|
135
132
|
.request({
|
|
136
133
|
url: endpoint.url({}),
|
|
137
134
|
method: endpoint.method,
|
|
138
|
-
params: Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (_categories.length && { categories: JSON.stringify(_categories) })), (query && { search: query })), (
|
|
135
|
+
params: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (_categories.length && { categories: JSON.stringify(_categories) })), (query && { search: query })), (showManagedCourses && { statuses: JSON.stringify(['creator', 'manager']) })), (showMine && { statuses: JSON.stringify(['joined', 'manager']) }))
|
|
139
136
|
})
|
|
140
137
|
.then((res) => {
|
|
141
138
|
setCourses(res.data.results);
|
|
@@ -156,7 +153,7 @@ function Courses(inProps) {
|
|
|
156
153
|
else {
|
|
157
154
|
fetchCourses();
|
|
158
155
|
}
|
|
159
|
-
}, [contentAvailability, authUserId,
|
|
156
|
+
}, [contentAvailability, authUserId, showMine, showManagedCourses, _categories]);
|
|
160
157
|
/**
|
|
161
158
|
* Subscriber for pubsub callback
|
|
162
159
|
*/
|
|
@@ -186,7 +183,7 @@ function Courses(inProps) {
|
|
|
186
183
|
return api_services_1.http
|
|
187
184
|
.request({
|
|
188
185
|
url: next,
|
|
189
|
-
method:
|
|
186
|
+
method: showManagedCourses ? api_services_1.Endpoints.GetJoinedCourses.method : api_services_1.Endpoints.SearchCourses.method
|
|
190
187
|
})
|
|
191
188
|
.then((res) => {
|
|
192
189
|
setCourses([...courses, ...res.data.results]);
|
|
@@ -223,15 +220,15 @@ function Courses(inProps) {
|
|
|
223
220
|
}
|
|
224
221
|
}, InputProps: {
|
|
225
222
|
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchCourses(), disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchCourses(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading })) })))
|
|
226
|
-
} }) })), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color:
|
|
227
|
-
// @ts-expect-error this is needed to use
|
|
228
|
-
|
|
229
|
-
// @ts-expect-error this is needed to use
|
|
230
|
-
|
|
223
|
+
} }) })), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showManagedCourses ? 'primary' : 'default', variant: showManagedCourses ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByManagedByMe", defaultMessage: "ui.courses.filterByManagedByMe" }), onClick: () => setShowManagedCourses(!showManagedCourses),
|
|
224
|
+
// @ts-expect-error this is needed to use showMine into SCCourses
|
|
225
|
+
showManagedCourses: showManagedCourses, deleteIcon: showManagedCourses ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showManagedCourses ? () => setShowManagedCourses(false) : null, disabled: loading || showMine }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showMine ? 'primary' : 'default', variant: showMine ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByMine", defaultMessage: "ui.courses.filterByMine" }), onClick: handleChipClick,
|
|
226
|
+
// @ts-expect-error this is needed to use showMine into SCCourses
|
|
227
|
+
showMine: showMine, deleteIcon: showMine ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMine ? handleDeleteClick : null, disabled: loading || showManagedCourses }) })))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !courses.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.studentEmptyView }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.teacherEmptyView }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: courses.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? ((0, jsx_runtime_1.jsx)(Course_1.CourseSkeleton, { template: course_1.SCCourseTemplateType.PREVIEW })) : ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))), endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.endMessage", defaultMessage: "ui.courses.endMessage", values: {
|
|
231
228
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
232
229
|
// @ts-ignore
|
|
233
230
|
button: (chunk) => ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
|
|
234
|
-
} }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [courses.map((course) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Course_1.default, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && courses.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(CreatePlaceholder_1.default, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
|
|
231
|
+
} }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [courses.map((course) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Course_1.default, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && courses.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(CreatePlaceholder_1.default, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
|
|
235
232
|
/**
|
|
236
233
|
* Renders root object (if content availability community option is false and user is anonymous, component is hidden)
|
|
237
234
|
*/
|
|
@@ -47,30 +47,6 @@ const TAB_DATA = [
|
|
|
47
47
|
value: course_1.SCCourseEditTabType.OPTIONS
|
|
48
48
|
}
|
|
49
49
|
];
|
|
50
|
-
function getPanelData(course, setCourse) {
|
|
51
|
-
return [
|
|
52
|
-
{
|
|
53
|
-
value: course_1.SCCourseEditTabType.LESSONS,
|
|
54
|
-
children: (0, jsx_runtime_1.jsx)(Lessons_1.default, { course: course, setCourse: setCourse })
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
value: course_1.SCCourseEditTabType.CUSTOMIZE,
|
|
58
|
-
children: (0, jsx_runtime_1.jsx)(Customize_1.default, { course: course, setCourse: setCourse })
|
|
59
|
-
},
|
|
60
|
-
{
|
|
61
|
-
value: course_1.SCCourseEditTabType.USERS,
|
|
62
|
-
children: (0, jsx_runtime_1.jsx)(Users_1.default, { course: course })
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
value: course_1.SCCourseEditTabType.REQUESTS,
|
|
66
|
-
children: (0, jsx_runtime_1.jsx)(Requests_1.default, { course: course })
|
|
67
|
-
},
|
|
68
|
-
{
|
|
69
|
-
value: course_1.SCCourseEditTabType.OPTIONS,
|
|
70
|
-
children: (0, jsx_runtime_1.jsx)(Options_1.default, { course: course, setCourse: setCourse })
|
|
71
|
-
}
|
|
72
|
-
];
|
|
73
|
-
}
|
|
74
50
|
const Root = (0, material_1.styled)(material_1.Box, {
|
|
75
51
|
name: constants_1.PREFIX,
|
|
76
52
|
slot: 'Root',
|
|
@@ -92,7 +68,7 @@ function EditCourse(inProps) {
|
|
|
92
68
|
const theme = (0, material_1.useTheme)();
|
|
93
69
|
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
|
|
94
70
|
// HANDLERS
|
|
95
|
-
const handleTabChange = (0, react_1.useCallback)((
|
|
71
|
+
const handleTabChange = (0, react_1.useCallback)((_e, newTabValue) => {
|
|
96
72
|
if (onTabSelect) {
|
|
97
73
|
onTabSelect(newTabValue);
|
|
98
74
|
}
|
|
@@ -101,9 +77,34 @@ function EditCourse(inProps) {
|
|
|
101
77
|
onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(newTabValue);
|
|
102
78
|
}
|
|
103
79
|
}, [setTabValue, onTabChange, onTabSelect]);
|
|
80
|
+
// MEMOS
|
|
81
|
+
const panelData = (0, react_1.useMemo)(() => {
|
|
82
|
+
return [
|
|
83
|
+
{
|
|
84
|
+
value: course_1.SCCourseEditTabType.LESSONS,
|
|
85
|
+
children: (0, jsx_runtime_1.jsx)(Lessons_1.default, { course: scCourse, setCourse: setSCCourse, handleTabChange: handleTabChange })
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
value: course_1.SCCourseEditTabType.CUSTOMIZE,
|
|
89
|
+
children: (0, jsx_runtime_1.jsx)(Customize_1.default, { course: scCourse, setCourse: setSCCourse })
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
value: course_1.SCCourseEditTabType.USERS,
|
|
93
|
+
children: (0, jsx_runtime_1.jsx)(Users_1.default, { course: scCourse, handleTabChange: handleTabChange })
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
value: course_1.SCCourseEditTabType.REQUESTS,
|
|
97
|
+
children: (0, jsx_runtime_1.jsx)(Requests_1.default, { course: scCourse, handleTabChange: handleTabChange })
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
value: course_1.SCCourseEditTabType.OPTIONS,
|
|
101
|
+
children: (0, jsx_runtime_1.jsx)(Options_1.default, { course: scCourse, setCourse: setSCCourse })
|
|
102
|
+
}
|
|
103
|
+
];
|
|
104
|
+
}, [scCourse, handleTabChange]);
|
|
104
105
|
if (!scCourse) {
|
|
105
106
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { tab: tab });
|
|
106
107
|
}
|
|
107
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ href: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.contrastColor }, { children: "arrow_back" })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: scCourse.name }))] })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsx)(lab_1.TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: isMobile ? 'scrollable' : 'standard', scrollButtons: isMobile, centered: !isMobile }, { children: TAB_DATA.map((data, i) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: (0, classnames_1.default)(classes.tab, classes.contrastColor) }, i))) })),
|
|
108
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ href: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.contrastColor }, { children: "arrow_back" })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: scCourse.name }))] })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsx)(lab_1.TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: isMobile ? 'scrollable' : 'standard', scrollButtons: isMobile, centered: !isMobile }, { children: TAB_DATA.map((data, i) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: (0, classnames_1.default)(classes.tab, classes.contrastColor) }, i))) })), panelData.map((data, i) => ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ className: classes.tabPanel, value: data.value }, { children: data.children }), i)))] }))] })));
|
|
108
109
|
}
|
|
109
110
|
exports.default = EditCourse;
|
|
@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
4
|
const material_1 = require("@mui/material");
|
|
5
5
|
const constants_1 = require("../constants");
|
|
6
|
-
const react_1 = require("react");
|
|
7
6
|
const classes = {
|
|
8
7
|
lessonTitle: `${constants_1.PREFIX}-lesson-title`,
|
|
9
8
|
lessonInfoWrapper: `${constants_1.PREFIX}-lesson-info-wrapper`,
|
|
@@ -16,6 +15,6 @@ const classes = {
|
|
|
16
15
|
actionsWrapper: `${constants_1.PREFIX}-actions-wrapper`
|
|
17
16
|
};
|
|
18
17
|
function LessonsSkeleton() {
|
|
19
|
-
return ((0, jsx_runtime_1.jsxs)(
|
|
18
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "150px", height: "21px", className: classes.lessonTitle }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "14px", height: "14px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "150px", height: "21px" })] })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "105px", height: "32px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "159px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "100px", height: "32px" })] })), (0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ className: classes.tableContainer }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "102px", height: "32px" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "87px", height: "32px", className: classes.margin }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "48px", height: "32px", className: classes.marginLeft }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "102px", height: "21px" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "250px", height: "54px", className: classes.margin }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rounded", width: "105px", height: "37px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: "36px", height: "36px" })] })) })] }) })] }) }))] }));
|
|
20
19
|
}
|
|
21
20
|
exports.default = LessonsSkeleton;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
import { SyntheticEvent } from 'react';
|
|
2
2
|
import { SCCourseType } from '@selfcommunity/types';
|
|
3
|
+
import { SCCourseEditTabType } from '../../types';
|
|
3
4
|
interface LessonsProps {
|
|
4
5
|
course: SCCourseType;
|
|
5
6
|
setCourse: (course: SCCourseType) => void;
|
|
7
|
+
handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
|
|
6
8
|
}
|
|
7
9
|
declare function Lessons(props: LessonsProps): JSX.Element;
|
|
8
10
|
declare const _default: import("react").MemoExoticComponent<typeof Lessons>;
|