@selfcommunity/react-ui 0.10.2-courses.174 → 0.10.2-courses.176

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.
Files changed (22) hide show
  1. package/lib/cjs/components/CourseContentMenu/CourseContentMenu.js +1 -1
  2. package/lib/cjs/components/CourseDashboard/Student.js +3 -1
  3. package/lib/cjs/components/CourseForm/CourseForm.js +2 -1
  4. package/lib/cjs/components/CourseForm/Edit.js +6 -3
  5. package/lib/cjs/components/Courses/Courses.d.ts +0 -1
  6. package/lib/cjs/components/Courses/Courses.js +18 -8
  7. package/lib/cjs/components/LessonCommentObjects/LessonCommentObjects.js +2 -2
  8. package/lib/cjs/components/LessonReleaseMenu/LessonReleaseMenu.js +17 -4
  9. package/lib/cjs/constants/Course.d.ts +1 -1
  10. package/lib/cjs/constants/Course.js +1 -1
  11. package/lib/esm/components/CourseContentMenu/CourseContentMenu.js +1 -1
  12. package/lib/esm/components/CourseDashboard/Student.js +3 -1
  13. package/lib/esm/components/CourseForm/CourseForm.js +2 -1
  14. package/lib/esm/components/CourseForm/Edit.js +7 -4
  15. package/lib/esm/components/Courses/Courses.d.ts +0 -1
  16. package/lib/esm/components/Courses/Courses.js +18 -8
  17. package/lib/esm/components/LessonCommentObjects/LessonCommentObjects.js +2 -2
  18. package/lib/esm/components/LessonReleaseMenu/LessonReleaseMenu.js +17 -4
  19. package/lib/esm/constants/Course.d.ts +1 -1
  20. package/lib/esm/constants/Course.js +1 -1
  21. package/lib/umd/react-ui.js +1 -1
  22. package/package.json +8 -8
package/lib/cjs/components/CourseContentMenu/CourseContentMenu.js CHANGED
@@ -42,6 +42,6 @@ function CourseContentMenu(inProps) {
42
42
  if (!course) {
43
43
  return null;
44
44
  }
45
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: course.sections.map((section) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: () => handleToggle(section.id), className: classes.listItem, disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, Object.assign({ className: classes.listItemIcon }, { children: expandedSections.includes(section.id) ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) })), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: section.name })] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expandedSections.includes(section.id), timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ component: "div", disablePadding: true }, { children: section.lessons.map((_lesson) => ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ className: classes.item, onClick: () => onLessonClick(_lesson, section), selected: _lesson.name === lesson.name, disabled: _lesson.locked }, { children: [course.join_status !== types_1.SCCourseJoinStatusType.MANAGER && ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, Object.assign({ className: classes.itemIcon }, { children: _lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.iconComplete }, { children: "circle_checked" }))) : _lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" })) : ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.iconIncomplete }, { children: "fiber_manual_record" }))) }))), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: _lesson.name })] }), _lesson.id))) })) }))] }, section.id))) })));
45
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: course.sections.map((section) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: () => handleToggle(section.id), className: classes.listItem, disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, Object.assign({ className: classes.listItemIcon }, { children: expandedSections.includes(section.id) ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) })), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: section.name })] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expandedSections.includes(section.id), timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ component: "div", disablePadding: true }, { children: section.lessons.map((_lesson) => ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ className: classes.item, onClick: () => onLessonClick(_lesson, section), selected: _lesson.id === lesson.id, disabled: _lesson.locked }, { children: [course.join_status !== types_1.SCCourseJoinStatusType.MANAGER && ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, Object.assign({ className: classes.itemIcon }, { children: _lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.iconComplete }, { children: "circle_checked" }))) : _lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" })) : ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.iconIncomplete }, { children: "fiber_manual_record" }))) }))), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: _lesson.name })] }), _lesson.id))) })) }))] }, section.id))) })));
46
46
  }
47
47
  exports.default = CourseContentMenu;
package/lib/cjs/components/CourseDashboard/Student.js CHANGED
@@ -40,6 +40,7 @@ const classes = {
40
40
  actionsWrapper: `${constants_1.PREFIX}-actions-wrapper`,
41
41
  user: `${constants_1.PREFIX}-user`,
42
42
  avatar: `${constants_1.PREFIX}-avatar`,
43
+ description: `${constants_1.PREFIX}-description`,
43
44
  progress: `${constants_1.PREFIX}-progress`,
44
45
  lessonsSections: `${constants_1.PREFIX}-lessons-sections`,
45
46
  circle: `${constants_1.PREFIX}-circle`,
@@ -175,7 +176,8 @@ function Student(inProps) {
175
176
  scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER ||
176
177
  scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED)) ||
177
178
  scCourse.privacy === types_1.SCCoursePrivacyType.OPEN ||
178
- scCourse.privacy === types_1.SCCoursePrivacyType.DRAFT) && ((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: (0, classnames_1.default)(classes.box, classes.contrastBgColor) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.description })) }))] })), (((scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE || scCourse.privacy === types_1.SCCoursePrivacyType.SECRET) &&
179
+ scCourse.privacy === types_1.SCCoursePrivacyType.DRAFT) &&
180
+ 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: (0, classnames_1.default)(classes.box, classes.contrastBgColor) }, { 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) &&
179
181
  (scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER || scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED)) ||
180
182
  (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.description" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.box, classes.contrastBgColor) }, { 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 === null || scCourse === void 0 ? void 0 : 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: (0, classnames_1.default)(classes.lessonsSections, classes.contrastBgColor) }, { 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: {
181
183
  sectionsNumber: scCourse.num_sections
package/lib/cjs/components/CourseForm/CourseForm.js CHANGED
@@ -260,7 +260,8 @@ function CourseForm(inProps) {
260
260
  (!field.name ||
261
261
  Object.keys(error).length !== 0 ||
262
262
  field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH ||
263
- field.description.length > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), variant: "contained", onClick: _step === Course_1.SCCourseFormStepType.GENERAL
263
+ field.description.length > Course_1.COURSE_DESCRIPTION_MAX_LENGTH ||
264
+ (!!field.privacy && (!field.description || course.num_sections === 0 || course.num_lessons === 0))), variant: "contained", onClick: _step === Course_1.SCCourseFormStepType.GENERAL
264
265
  ? () => handleChangeStep(Course_1.SCCourseFormStepType.CUSTOMIZATION)
265
266
  : field.privacy !== types_1.SCCoursePrivacyType.DRAFT && course.privacy === types_1.SCCoursePrivacyType.DRAFT
266
267
  ? () => setOpenDialog(true)
package/lib/cjs/components/CourseForm/Edit.js CHANGED
@@ -19,7 +19,8 @@ const classes = {
19
19
  publish: `${constants_1.PREFIX}-edit-publish`,
20
20
  publishInfo: `${constants_1.PREFIX}-edit-publish-info`,
21
21
  privacyItem: `${constants_1.PREFIX}-edit-privacy-item`,
22
- privacyItemInfo: `${constants_1.PREFIX}-edit-privacy-item-info`
22
+ privacyItemInfo: `${constants_1.PREFIX}-edit-privacy-item-info`,
23
+ disabled: `${constants_1.PREFIX}-disabled`
23
24
  };
24
25
  const Root = (0, styles_1.styled)(material_1.Box, {
25
26
  name: constants_1.PREFIX,
@@ -34,6 +35,8 @@ function CourseEdit(inProps) {
34
35
  const { className, onPrivacyChange, course } = props, rest = tslib_1.__rest(props, ["className", "onPrivacyChange", "course"]);
35
36
  // STATE
36
37
  const [privacy, setPrivacy] = (0, react_1.useState)(course.privacy);
38
+ const notPublishable = course.num_lessons === 0 ||
39
+ !course.sections.some((section) => section.lessons.some((lesson) => lesson.status === types_1.SCCourseLessonStatusType.PUBLISHED));
37
40
  //HANDLERS
38
41
  const handleChange = (event) => {
39
42
  setPrivacy(event.target.value);
@@ -42,8 +45,8 @@ function CourseEdit(inProps) {
42
45
  /**
43
46
  * Renders root object
44
47
  */
45
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [course.privacy === types_1.SCCoursePrivacyType.DRAFT && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.access }, { 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.courseForm.edit.access.section.title", defaultMessage: "ui.courseForm.edit.access.section.title" }) })), (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: classes.card }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium", color: "warning" }, { children: "error" })), (0, jsx_runtime_1.jsxs)(material_1.Box, { 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.courseForm.edit.access.info.title", defaultMessage: "ui.courseForm.edit.access.info.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.access.info.subtitle", defaultMessage: "ui.courseForm.edit.access.info.subtitle" }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.accessInfo }, { 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.courseForm.edit.access.info.access", defaultMessage: "ui.courseForm.edit.access.info.access", values: { icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }) } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.access.info.visibility", defaultMessage: "ui.courseForm.edit.access.info.visibility", values: { icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }) } }) }))] }))] })] }))] }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.publish }, { 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.courseForm.edit.publication.title", defaultMessage: "ui.courseForm.edit.publication.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.publishInfo }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.publication.subtitle", defaultMessage: "ui.courseForm.edit.publication.subtitle" }) })), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { children: Object.values(types_1.SCCoursePrivacyType)
48
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [course.privacy === types_1.SCCoursePrivacyType.DRAFT && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.access }, { 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.courseForm.edit.access.section.title", defaultMessage: "ui.courseForm.edit.access.section.title" }) })), (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: classes.card }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium", color: "warning" }, { children: "error" })), (0, jsx_runtime_1.jsxs)(material_1.Box, { 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.courseForm.edit.access.info.title", defaultMessage: "ui.courseForm.edit.access.info.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.access.info.subtitle", defaultMessage: "ui.courseForm.edit.access.info.subtitle" }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.accessInfo }, { 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.courseForm.edit.access.info.access", defaultMessage: "ui.courseForm.edit.access.info.access", values: { icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }) } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.access.info.visibility", defaultMessage: "ui.courseForm.edit.access.info.visibility", values: { icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }) } }) }))] }))] })] }))] }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.publish }, { 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.courseForm.edit.publication.title", defaultMessage: "ui.courseForm.edit.publication.title" }) })), notPublishable ? ((0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: classes.card }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium", color: "warning" }, { children: "error" })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.publication.subtitle.info", defaultMessage: "ui.courseForm.edit.publication.subtitle.info" }) })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.publishInfo }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.publication.subtitle", defaultMessage: "ui.courseForm.edit.publication.subtitle" }) }))), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { children: Object.values(types_1.SCCoursePrivacyType)
46
49
  .filter((option) => option !== types_1.SCCoursePrivacyType.DRAFT)
47
- .map((option, index) => ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ className: classes.privacyItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Radio, { size: "small", value: option, checked: option === privacy, onChange: handleChange }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.title`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.title` }) }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.privacyItemInfo }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.access`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.access`, values: { icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }) } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.privacyItemInfo }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.visibility`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.visibility`, values: { icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }) } }) }))] })] }), index))) })] }))] })));
50
+ .map((option, index) => ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ className: classes.privacyItem, disabled: notPublishable }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Radio, { size: "small", value: option, checked: option === privacy, onChange: handleChange, disabled: notPublishable }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.title`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.title` }) }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: (0, classnames_1.default)(classes.privacyItemInfo, { [classes.disabled]: notPublishable }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.access`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.access`, values: { icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }) } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: (0, classnames_1.default)(classes.privacyItemInfo, { [classes.disabled]: notPublishable }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.visibility`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.visibility`, values: { icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }) } }) }))] })] }), index))) })] }))] })));
48
51
  }
49
52
  exports.default = CourseEdit;
package/lib/cjs/components/Courses/Courses.d.ts CHANGED
@@ -91,7 +91,6 @@ export interface CoursesProps {
91
91
  |itemPlaceholder|.SCCourses-item-placeholder|Styles applied to the placeholder for an item.|
92
92
  |noResults|.SCCourses-no-results|Styles applied when there are no results.|
93
93
  |search|.SCCourses-search|Styles applied to the search element.|
94
- |showMore|.SCCourses-show-more|Styles applied to the show more button or section.|
95
94
  |studentEmptyView|.SCCourses-student-empty-view|Styles applied to the student empty view.|
96
95
  |teacherEmptyView|.SCCourses-teacher-empty-view|Styles applied to the teacher empty view.|
97
96
 
package/lib/cjs/components/Courses/Courses.js CHANGED
@@ -14,12 +14,14 @@ const react_intl_1 = require("react-intl");
14
14
  const Errors_1 = require("../../constants/Errors");
15
15
  const Pagination_1 = require("../../constants/Pagination");
16
16
  const PubSub_1 = require("../../constants/PubSub");
17
- const Course_1 = tslib_1.__importDefault(require("../Course"));
17
+ const Course_1 = tslib_1.__importStar(require("../Course"));
18
18
  const Skeleton_1 = tslib_1.__importDefault(require("../Courses/Skeleton"));
19
19
  const constants_1 = require("./constants");
20
20
  const course_1 = require("../../types/course");
21
21
  const CategoryAutocomplete_1 = tslib_1.__importDefault(require("../CategoryAutocomplete"));
22
22
  const CreatePlaceholder_1 = tslib_1.__importDefault(require("../Course/CreatePlaceholder"));
23
+ const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
24
+ const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
23
25
  const classes = {
24
26
  root: `${constants_1.PREFIX}-root`,
25
27
  category: `${constants_1.PREFIX}-category`,
@@ -32,9 +34,9 @@ const classes = {
32
34
  itemPlaceholder: `${constants_1.PREFIX}-item-placeholder`,
33
35
  noResults: `${constants_1.PREFIX}-no-results`,
34
36
  search: `${constants_1.PREFIX}-search`,
35
- showMore: `${constants_1.PREFIX}-show-more`,
36
37
  studentEmptyView: `${constants_1.PREFIX}-student-empty-view`,
37
- teacherEmptyView: `${constants_1.PREFIX}-teacher-empty-view`
38
+ teacherEmptyView: `${constants_1.PREFIX}-teacher-empty-view`,
39
+ endMessage: `${constants_1.PREFIX}-end-message`
38
40
  };
39
41
  const Root = (0, material_1.styled)(material_1.Box, {
40
42
  name: constants_1.PREFIX,
@@ -74,7 +76,6 @@ exports.CoursesChipRoot = (0, material_1.styled)(material_1.Chip, {
74
76
  |itemPlaceholder|.SCCourses-item-placeholder|Styles applied to the placeholder for an item.|
75
77
  |noResults|.SCCourses-no-results|Styles applied when there are no results.|
76
78
  |search|.SCCourses-search|Styles applied to the search element.|
77
- |showMore|.SCCourses-show-more|Styles applied to the show more button or section.|
78
79
  |studentEmptyView|.SCCourses-student-empty-view|Styles applied to the student empty view.|
79
80
  |teacherEmptyView|.SCCourses-teacher-empty-view|Styles applied to the teacher empty view.|
80
81
 
@@ -130,7 +131,6 @@ function Courses(inProps) {
130
131
  * Fetches courses list
131
132
  */
132
133
  const fetchCourses = () => {
133
- setLoading(true);
134
134
  return api_services_1.http
135
135
  .request({
136
136
  url: endpoint.url({}),
@@ -186,7 +186,7 @@ function Courses(inProps) {
186
186
  return api_services_1.http
187
187
  .request({
188
188
  url: next,
189
- method: showMyCourses ? api_services_1.Endpoints.GetJoinedCourses.method : api_services_1.Endpoints.SearchCourses.method
189
+ method: showMyCourses ? api_services_1.Endpoints.GetJoinedCourses.method : showForMe ? api_services_1.Endpoints.CourseSuggestion : api_services_1.Endpoints.SearchCourses.method
190
190
  })
191
191
  .then((res) => {
192
192
  setCourses([...courses, ...res.data.results]);
@@ -210,6 +210,9 @@ function Courses(inProps) {
210
210
  const categoriesIds = categories.map((item) => item.id);
211
211
  setCategories(categoriesIds);
212
212
  };
213
+ const handleScrollUp = () => {
214
+ window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
215
+ };
213
216
  /**
214
217
  * Renders courses list
215
218
  */
@@ -224,12 +227,19 @@ function Courses(inProps) {
224
227
  // @ts-expect-error this is needed to use showForMe into SCCourses
225
228
  showForMe: showMyCourses, deleteIcon: showMyCourses ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyCourses ? () => setShowMyCourses(false) : null, disabled: loading || showForMe }) }))), (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: showForMe ? 'primary' : 'default', variant: showForMe ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByCoursesForMe", defaultMessage: "ui.courses.filterByCoursesForMe" }), onClick: handleChipClick,
226
229
  // @ts-expect-error this is needed to use showForMe into SCCourses
227
- showForMe: showForMe, deleteIcon: showForMe ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading || showMyCourses }) })))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))) : ((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" }) })), !isMobile && ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })))] }))) : ((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.jsxs)(jsx_runtime_1.Fragment, { 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"))] }) })), Boolean(next) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.button.seeMore", defaultMessage: "ui.courses.button.seeMore" }) })))] })) })) })] }));
230
+ showForMe: showForMe, deleteIcon: showForMe ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading || showMyCourses }) })))] })) }))), (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" }) })), !isMobile && (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))] }))) : ((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
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
232
+ // @ts-ignore
233
+ 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"))] }) })) }))) })] }));
228
235
  /**
229
236
  * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
230
237
  */
231
238
  if (!contentAvailability && !scUserContext.user) {
232
- return null;
239
+ return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
240
+ }
241
+ if (loading) {
242
+ return (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }));
233
243
  }
234
244
  return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: c })));
235
245
  }
package/lib/cjs/components/LessonCommentObjects/LessonCommentObjects.js CHANGED
@@ -72,7 +72,7 @@ function LessonCommentObjects(inProps) {
72
72
  name: constants_1.PREFIX
73
73
  });
74
74
  // PROPS
75
- const { id = `lesson_comment_objects_lesson_${props.lessonObjectId ? props.lessonObjectId : props.lessonObject ? props.lessonObject.id : ''}`, className, lessonObjectId, lessonObject, CommentComponentProps = {}, CommentObjectSkeletonProps = { elevation: 0 }, CommentsObjectSkeletonProps = {}, cacheStrategy = utils_1.CacheStrategies.CACHE_FIRST } = props, rest = tslib_1.__rest(props, ["id", "className", "lessonObjectId", "lessonObject", "CommentComponentProps", "CommentObjectSkeletonProps", "CommentsObjectSkeletonProps", "cacheStrategy"]);
75
+ const { id = `lesson_comment_objects_lesson_${props.lessonObjectId ? props.lessonObjectId : props.lessonObject ? props.lessonObject.id : ''}`, className, lessonObjectId, lessonObject, CommentComponentProps = {}, CommentObjectSkeletonProps = { elevation: 0 }, CommentsObjectSkeletonProps = {}, cacheStrategy = utils_1.CacheStrategies.STALE_WHILE_REVALIDATE } = props, rest = tslib_1.__rest(props, ["id", "className", "lessonObjectId", "lessonObject", "CommentComponentProps", "CommentObjectSkeletonProps", "CommentsObjectSkeletonProps", "cacheStrategy"]);
76
76
  //STATE
77
77
  const [commenting, setIsCommenting] = (0, react_1.useState)(false);
78
78
  const [editing, setIsEditing] = (0, react_1.useState)(false);
@@ -103,7 +103,7 @@ function LessonCommentObjects(inProps) {
103
103
  }
104
104
  const scrollToBottom = () => {
105
105
  var _a;
106
- (_a = commentsEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'end', behavior: 'instant' });
106
+ (_a = commentsEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'end', behavior: 'smooth' });
107
107
  };
108
108
  (0, react_1.useEffect)(() => {
109
109
  if (commentsObject.comments.length > 0) {
package/lib/cjs/components/LessonReleaseMenu/LessonReleaseMenu.js CHANGED
@@ -27,6 +27,14 @@ const messages = (0, react_intl_1.defineMessages)({
27
27
  pickerCancelMessage: {
28
28
  id: 'ui.lessonReleaseMenu.scheduled.picker.cancel',
29
29
  defaultMessage: 'ui.lessonReleaseMenu.scheduled.picker.cancel'
30
+ },
31
+ pickerClearMessage: {
32
+ id: 'ui.lessonReleaseMenu.scheduled.picker.clear',
33
+ defaultMessage: 'ui.lessonReleaseMenu.scheduled.picker.clear'
34
+ },
35
+ pickerOkMessage: {
36
+ id: 'ui.lessonReleaseMenu.scheduled.picker.ok',
37
+ defaultMessage: 'ui.lessonReleaseMenu.scheduled.picker.ok'
30
38
  }
31
39
  });
32
40
  const classes = {
@@ -92,7 +100,7 @@ function LessonReleaseMenu(inProps) {
92
100
  });
93
101
  };
94
102
  const handleUpdate = (value) => {
95
- api_services_1.CourseService.patchCourseSection(course.id, section.id, { dripped_at: value.toISOString() })
103
+ api_services_1.CourseService.patchCourseSection(course.id, section.id, { dripped_at: value ? value.toISOString() : null })
96
104
  .then((data) => {
97
105
  setOpen(false);
98
106
  onSuccess(data);
@@ -111,11 +119,13 @@ function LessonReleaseMenu(inProps) {
111
119
  defaultMessage: 'ui.lessonReleaseMenu.now.label'
112
120
  });
113
121
  return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: course && course.type === types_1.SCCourseTypologyType.SCHEDULED ? ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default, localeText: {
114
- cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelMessage)}`
122
+ okButtonLabel: `${intl.formatMessage(messages.pickerOkMessage)}`,
123
+ cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelMessage)}`,
124
+ clearButtonLabel: `${intl.formatMessage(messages.pickerClearMessage)}`
115
125
  } }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDateTimePicker, { className: classes.picker, disablePast: true, label: drippedAt && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" })), defaultValue: drippedAt, slots: {
116
126
  //actionBar: PickerActionBar,
117
127
  tabs: (props) => (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePickerTabs, Object.assign({}, props)),
118
- textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.pickerPlaceholder)}`, endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) }) }))) }) })))
128
+ textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { error: false, InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.pickerPlaceholder)}`, endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) }) }))) }) })))
119
129
  }, slotProps: {
120
130
  tabs: {
121
131
  hidden: false
@@ -124,8 +134,11 @@ function LessonReleaseMenu(inProps) {
124
134
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
125
135
  // @ts-ignore
126
136
  toolbarTitle: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" }))
137
+ },
138
+ actionBar: {
139
+ actions: ['cancel', 'clear', 'accept']
127
140
  }
128
- }, onChange: (value) => setDrippedAt(value), onAccept: handleUpdate }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", placeholder: placeholderStructured, defaultValue: null, onClick: handleClick, InputProps: {
141
+ }, onChange: (value) => setDrippedAt(value), onAccept: handleUpdate, onClear: () => setDrippedAt(null) }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", placeholder: placeholderStructured, defaultValue: null, onClick: handleClick, InputProps: {
129
142
  endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClick }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) })) })))
130
143
  } }), (0, jsx_runtime_1.jsxs)(PopoverRoot, Object.assign({ className: classes.popoverRoot, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
131
144
  vertical: 'bottom',
package/lib/cjs/constants/Course.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare const COURSE_TITLE_MAX_LENGTH = 50;
2
- export declare const COURSE_DESCRIPTION_MAX_LENGTH = 150;
2
+ export declare const COURSE_DESCRIPTION_MAX_LENGTH = 500;
3
3
  export declare enum SCCourseFormStepType {
4
4
  GENERAL = "general",
5
5
  CUSTOMIZATION = "customization"
package/lib/cjs/constants/Course.js CHANGED
@@ -2,7 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.SCCourseFormStepType = exports.COURSE_DESCRIPTION_MAX_LENGTH = exports.COURSE_TITLE_MAX_LENGTH = void 0;
4
4
  exports.COURSE_TITLE_MAX_LENGTH = 50;
5
- exports.COURSE_DESCRIPTION_MAX_LENGTH = 150;
5
+ exports.COURSE_DESCRIPTION_MAX_LENGTH = 500;
6
6
  var SCCourseFormStepType;
7
7
  (function (SCCourseFormStepType) {
8
8
  SCCourseFormStepType["GENERAL"] = "general";
package/lib/esm/components/CourseContentMenu/CourseContentMenu.js CHANGED
@@ -40,5 +40,5 @@ export default function CourseContentMenu(inProps) {
40
40
  if (!course) {
41
41
  return null;
42
42
  }
43
- return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: course.sections.map((section) => (_jsxs(React.Fragment, { children: [_jsxs(ListItemButton, Object.assign({ onClick: () => handleToggle(section.id), className: classes.listItem, disableRipple: true }, { children: [_jsx(ListItemIcon, Object.assign({ className: classes.listItemIcon }, { children: expandedSections.includes(section.id) ? _jsx(Icon, { children: "expand_less" }) : _jsx(Icon, { children: "expand_more" }) })), _jsx(ListItemText, { primary: section.name })] })), _jsx(Collapse, Object.assign({ in: expandedSections.includes(section.id), timeout: "auto", unmountOnExit: true }, { children: _jsx(List, Object.assign({ component: "div", disablePadding: true }, { children: section.lessons.map((_lesson) => (_jsxs(ListItemButton, Object.assign({ className: classes.item, onClick: () => onLessonClick(_lesson, section), selected: _lesson.name === lesson.name, disabled: _lesson.locked }, { children: [course.join_status !== SCCourseJoinStatusType.MANAGER && (_jsx(ListItemIcon, Object.assign({ className: classes.itemIcon }, { children: _lesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED ? (_jsx(Icon, Object.assign({ className: classes.iconComplete }, { children: "circle_checked" }))) : _lesson.locked ? (_jsx(Icon, { children: "private" })) : (_jsx(Icon, Object.assign({ className: classes.iconIncomplete }, { children: "fiber_manual_record" }))) }))), _jsx(ListItemText, { primary: _lesson.name })] }), _lesson.id))) })) }))] }, section.id))) })));
43
+ return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: course.sections.map((section) => (_jsxs(React.Fragment, { children: [_jsxs(ListItemButton, Object.assign({ onClick: () => handleToggle(section.id), className: classes.listItem, disableRipple: true }, { children: [_jsx(ListItemIcon, Object.assign({ className: classes.listItemIcon }, { children: expandedSections.includes(section.id) ? _jsx(Icon, { children: "expand_less" }) : _jsx(Icon, { children: "expand_more" }) })), _jsx(ListItemText, { primary: section.name })] })), _jsx(Collapse, Object.assign({ in: expandedSections.includes(section.id), timeout: "auto", unmountOnExit: true }, { children: _jsx(List, Object.assign({ component: "div", disablePadding: true }, { children: section.lessons.map((_lesson) => (_jsxs(ListItemButton, Object.assign({ className: classes.item, onClick: () => onLessonClick(_lesson, section), selected: _lesson.id === lesson.id, disabled: _lesson.locked }, { children: [course.join_status !== SCCourseJoinStatusType.MANAGER && (_jsx(ListItemIcon, Object.assign({ className: classes.itemIcon }, { children: _lesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED ? (_jsx(Icon, Object.assign({ className: classes.iconComplete }, { children: "circle_checked" }))) : _lesson.locked ? (_jsx(Icon, { children: "private" })) : (_jsx(Icon, Object.assign({ className: classes.iconIncomplete }, { children: "fiber_manual_record" }))) }))), _jsx(ListItemText, { primary: _lesson.name })] }), _lesson.id))) })) }))] }, section.id))) })));
44
44
  }
package/lib/esm/components/CourseDashboard/Student.js CHANGED
@@ -38,6 +38,7 @@ const classes = {
38
38
  actionsWrapper: `${PREFIX}-actions-wrapper`,
39
39
  user: `${PREFIX}-user`,
40
40
  avatar: `${PREFIX}-avatar`,
41
+ description: `${PREFIX}-description`,
41
42
  progress: `${PREFIX}-progress`,
42
43
  lessonsSections: `${PREFIX}-lessons-sections`,
43
44
  circle: `${PREFIX}-circle`,
@@ -173,7 +174,8 @@ function Student(inProps) {
173
174
  scCourse.join_status === SCCourseJoinStatusType.MANAGER ||
174
175
  scCourse.join_status === SCCourseJoinStatusType.JOINED)) ||
175
176
  scCourse.privacy === SCCoursePrivacyType.OPEN ||
176
- scCourse.privacy === SCCoursePrivacyType.DRAFT) && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.description", defaultMessage: "ui.course.dashboard.student.description" }) })), _jsx(Stack, Object.assign({ className: classNames(classes.box, classes.contrastBgColor) }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.description })) }))] })), (((scCourse.privacy === SCCoursePrivacyType.PRIVATE || scCourse.privacy === SCCoursePrivacyType.SECRET) &&
177
+ scCourse.privacy === SCCoursePrivacyType.DRAFT) &&
178
+ scCourse.description && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.description", defaultMessage: "ui.course.dashboard.student.description" }) })), _jsx(Stack, Object.assign({ className: classNames(classes.box, classes.contrastBgColor) }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.description }, { children: scCourse.description })) }))] })), (((scCourse.privacy === SCCoursePrivacyType.PRIVATE || scCourse.privacy === SCCoursePrivacyType.SECRET) &&
177
179
  (scCourse.join_status === SCCourseJoinStatusType.MANAGER || scCourse.join_status === SCCourseJoinStatusType.JOINED)) ||
178
180
  (scCourse.privacy === SCCoursePrivacyType.OPEN && scCourse.join_status !== SCCourseJoinStatusType.CREATOR)) && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress", defaultMessage: "ui.course.dashboard.student.description" }) })), _jsxs(Stack, Object.assign({ className: classNames(classes.box, classes.contrastBgColor) }, { children: [_jsxs(Stack, Object.assign({ className: classes.percentageWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(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 } }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress.percentage", defaultMessage: "ui.course.dashboard.student.progress.percentage", values: { percentage: scCourse.user_completion_rate } }) }))] })), _jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: scCourse === null || scCourse === void 0 ? void 0 : scCourse.user_completion_rate })] })), scCourse.user_completion_rate === 100 && (_jsxs(Stack, Object.assign({ className: classNames(classes.completedWrapper, classes.margin) }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.completed", defaultMessage: "ui.course.dashboard.student.completed" }) })), _jsx("img", { src: CLAPPING, alt: intl.formatMessage({ id: 'ui.course.dashboard.student.completed', defaultMessage: 'ui.course.dashboard.student.completed' }), width: 32, height: 32 })] }))), _jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.contents", defaultMessage: "ui.course.dashboard.student.contents" }) })), _jsxs(Stack, Object.assign({ className: classNames(classes.lessonsSections, classes.contrastBgColor) }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
179
181
  sectionsNumber: scCourse.num_sections
package/lib/esm/components/CourseForm/CourseForm.js CHANGED
@@ -258,7 +258,8 @@ export default function CourseForm(inProps) {
258
258
  (!field.name ||
259
259
  Object.keys(error).length !== 0 ||
260
260
  field.name.length > COURSE_TITLE_MAX_LENGTH ||
261
- field.description.length > COURSE_DESCRIPTION_MAX_LENGTH), variant: "contained", onClick: _step === SCCourseFormStepType.GENERAL
261
+ field.description.length > COURSE_DESCRIPTION_MAX_LENGTH ||
262
+ (!!field.privacy && (!field.description || course.num_sections === 0 || course.num_lessons === 0))), variant: "contained", onClick: _step === SCCourseFormStepType.GENERAL
262
263
  ? () => handleChangeStep(SCCourseFormStepType.CUSTOMIZATION)
263
264
  : field.privacy !== SCCoursePrivacyType.DRAFT && course.privacy === SCCoursePrivacyType.DRAFT
264
265
  ? () => setOpenDialog(true)
package/lib/esm/components/CourseForm/Edit.js CHANGED
@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
3
3
  import { Box, FormControl, FormControlLabel, Icon, Radio, RadioGroup, Typography } from '@mui/material';
4
4
  import { styled } from '@mui/material/styles';
5
5
  import { useThemeProps } from '@mui/system';
6
- import { SCCoursePrivacyType } from '@selfcommunity/types';
6
+ import { SCCourseLessonStatusType, SCCoursePrivacyType } from '@selfcommunity/types';
7
7
  import classNames from 'classnames';
8
8
  import { FormattedMessage } from 'react-intl';
9
9
  import { PREFIX } from './constants';
@@ -17,7 +17,8 @@ const classes = {
17
17
  publish: `${PREFIX}-edit-publish`,
18
18
  publishInfo: `${PREFIX}-edit-publish-info`,
19
19
  privacyItem: `${PREFIX}-edit-privacy-item`,
20
- privacyItemInfo: `${PREFIX}-edit-privacy-item-info`
20
+ privacyItemInfo: `${PREFIX}-edit-privacy-item-info`,
21
+ disabled: `${PREFIX}-disabled`
21
22
  };
22
23
  const Root = styled(Box, {
23
24
  name: PREFIX,
@@ -32,6 +33,8 @@ export default function CourseEdit(inProps) {
32
33
  const { className, onPrivacyChange, course } = props, rest = __rest(props, ["className", "onPrivacyChange", "course"]);
33
34
  // STATE
34
35
  const [privacy, setPrivacy] = useState(course.privacy);
36
+ const notPublishable = course.num_lessons === 0 ||
37
+ !course.sections.some((section) => section.lessons.some((lesson) => lesson.status === SCCourseLessonStatusType.PUBLISHED));
35
38
  //HANDLERS
36
39
  const handleChange = (event) => {
37
40
  setPrivacy(event.target.value);
@@ -40,7 +43,7 @@ export default function CourseEdit(inProps) {
40
43
  /**
41
44
  * Renders root object
42
45
  */
43
- return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [course.privacy === SCCoursePrivacyType.DRAFT && (_jsxs(Box, Object.assign({ className: classes.access }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.section.title", defaultMessage: "ui.courseForm.edit.access.section.title" }) })), _jsxs(Widget, Object.assign({ className: classes.card }, { children: [_jsx(Icon, Object.assign({ fontSize: "medium", color: "warning" }, { children: "error" })), _jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.title", defaultMessage: "ui.courseForm.edit.access.info.title" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.subtitle", defaultMessage: "ui.courseForm.edit.access.info.subtitle" }) })), _jsxs(Box, Object.assign({ className: classes.accessInfo }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.access", defaultMessage: "ui.courseForm.edit.access.info.access", values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.visibility", defaultMessage: "ui.courseForm.edit.access.info.visibility", values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) }))] }))] })] }))] }))), _jsxs(Box, Object.assign({ className: classes.publish }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.title", defaultMessage: "ui.courseForm.edit.publication.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.publishInfo }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.subtitle", defaultMessage: "ui.courseForm.edit.publication.subtitle" }) })), _jsx(RadioGroup, { children: Object.values(SCCoursePrivacyType)
46
+ return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [course.privacy === SCCoursePrivacyType.DRAFT && (_jsxs(Box, Object.assign({ className: classes.access }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.section.title", defaultMessage: "ui.courseForm.edit.access.section.title" }) })), _jsxs(Widget, Object.assign({ className: classes.card }, { children: [_jsx(Icon, Object.assign({ fontSize: "medium", color: "warning" }, { children: "error" })), _jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.title", defaultMessage: "ui.courseForm.edit.access.info.title" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.subtitle", defaultMessage: "ui.courseForm.edit.access.info.subtitle" }) })), _jsxs(Box, Object.assign({ className: classes.accessInfo }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.access", defaultMessage: "ui.courseForm.edit.access.info.access", values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.visibility", defaultMessage: "ui.courseForm.edit.access.info.visibility", values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) }))] }))] })] }))] }))), _jsxs(Box, Object.assign({ className: classes.publish }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.title", defaultMessage: "ui.courseForm.edit.publication.title" }) })), notPublishable ? (_jsxs(Widget, Object.assign({ className: classes.card }, { children: [_jsx(Icon, Object.assign({ fontSize: "medium", color: "warning" }, { children: "error" })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.subtitle.info", defaultMessage: "ui.courseForm.edit.publication.subtitle.info" }) })] }))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.publishInfo }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.subtitle", defaultMessage: "ui.courseForm.edit.publication.subtitle" }) }))), _jsx(RadioGroup, { children: Object.values(SCCoursePrivacyType)
44
47
  .filter((option) => option !== SCCoursePrivacyType.DRAFT)
45
- .map((option, index) => (_jsxs(FormControl, Object.assign({ className: classes.privacyItem }, { children: [_jsx(FormControlLabel, { control: _jsx(Radio, { size: "small", value: option, checked: option === privacy, onChange: handleChange }), label: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.title`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.title` }) }), _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.privacyItemInfo }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.access`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.access`, values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.privacyItemInfo }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.visibility`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.visibility`, values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) }))] })] }), index))) })] }))] })));
48
+ .map((option, index) => (_jsxs(FormControl, Object.assign({ className: classes.privacyItem, disabled: notPublishable }, { children: [_jsx(FormControlLabel, { control: _jsx(Radio, { size: "small", value: option, checked: option === privacy, onChange: handleChange, disabled: notPublishable }), label: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.title`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.title` }) }), _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classNames(classes.privacyItemInfo, { [classes.disabled]: notPublishable }) }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.access`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.access`, values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classNames(classes.privacyItemInfo, { [classes.disabled]: notPublishable }) }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.visibility`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.visibility`, values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) }))] })] }), index))) })] }))] })));
46
49
  }
package/lib/esm/components/Courses/Courses.d.ts CHANGED
@@ -91,7 +91,6 @@ export interface CoursesProps {
91
91
  |itemPlaceholder|.SCCourses-item-placeholder|Styles applied to the placeholder for an item.|
92
92
  |noResults|.SCCourses-no-results|Styles applied when there are no results.|
93
93
  |search|.SCCourses-search|Styles applied to the search element.|
94
- |showMore|.SCCourses-show-more|Styles applied to the show more button or section.|
95
94
  |studentEmptyView|.SCCourses-student-empty-view|Styles applied to the student empty view.|
96
95
  |teacherEmptyView|.SCCourses-teacher-empty-view|Styles applied to the teacher empty view.|
97
96
 
package/lib/esm/components/Courses/Courses.js CHANGED
@@ -11,12 +11,14 @@ import { FormattedMessage } from 'react-intl';
11
11
  import { SCOPE_SC_UI } from '../../constants/Errors';
12
12
  import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
13
13
  import { SCCourseEventType, SCTopicType } from '../../constants/PubSub';
14
- import Course from '../Course';
14
+ import Course, { CourseSkeleton } from '../Course';
15
15
  import Skeleton from '../Courses/Skeleton';
16
16
  import { PREFIX } from './constants';
17
17
  import { SCCourseTemplateType } from '../../types/course';
18
18
  import CategoryAutocomplete from '../CategoryAutocomplete';
19
19
  import CourseCreatePlaceholder from '../Course/CreatePlaceholder';
20
+ import InfiniteScroll from '../../shared/InfiniteScroll';
21
+ import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
20
22
  const classes = {
21
23
  root: `${PREFIX}-root`,
22
24
  category: `${PREFIX}-category`,
@@ -29,9 +31,9 @@ const classes = {
29
31
  itemPlaceholder: `${PREFIX}-item-placeholder`,
30
32
  noResults: `${PREFIX}-no-results`,
31
33
  search: `${PREFIX}-search`,
32
- showMore: `${PREFIX}-show-more`,
33
34
  studentEmptyView: `${PREFIX}-student-empty-view`,
34
- teacherEmptyView: `${PREFIX}-teacher-empty-view`
35
+ teacherEmptyView: `${PREFIX}-teacher-empty-view`,
36
+ endMessage: `${PREFIX}-end-message`
35
37
  };
36
38
  const Root = styled(Box, {
37
39
  name: PREFIX,
@@ -71,7 +73,6 @@ export const CoursesChipRoot = styled(Chip, {
71
73
  |itemPlaceholder|.SCCourses-item-placeholder|Styles applied to the placeholder for an item.|
72
74
  |noResults|.SCCourses-no-results|Styles applied when there are no results.|
73
75
  |search|.SCCourses-search|Styles applied to the search element.|
74
- |showMore|.SCCourses-show-more|Styles applied to the show more button or section.|
75
76
  |studentEmptyView|.SCCourses-student-empty-view|Styles applied to the student empty view.|
76
77
  |teacherEmptyView|.SCCourses-teacher-empty-view|Styles applied to the teacher empty view.|
77
78
 
@@ -127,7 +128,6 @@ export default function Courses(inProps) {
127
128
  * Fetches courses list
128
129
  */
129
130
  const fetchCourses = () => {
130
- setLoading(true);
131
131
  return http
132
132
  .request({
133
133
  url: endpoint.url({}),
@@ -183,7 +183,7 @@ export default function Courses(inProps) {
183
183
  return http
184
184
  .request({
185
185
  url: next,
186
- method: showMyCourses ? Endpoints.GetJoinedCourses.method : Endpoints.SearchCourses.method
186
+ method: showMyCourses ? Endpoints.GetJoinedCourses.method : showForMe ? Endpoints.CourseSuggestion : Endpoints.SearchCourses.method
187
187
  })
188
188
  .then((res) => {
189
189
  setCourses([...courses, ...res.data.results]);
@@ -207,6 +207,9 @@ export default function Courses(inProps) {
207
207
  const categoriesIds = categories.map((item) => item.id);
208
208
  setCategories(categoriesIds);
209
209
  };
210
+ const handleScrollUp = () => {
211
+ window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
212
+ };
210
213
  /**
211
214
  * Renders courses list
212
215
  */
@@ -221,12 +224,19 @@ export default function Courses(inProps) {
221
224
  // @ts-expect-error this is needed to use showForMe into SCCourses
222
225
  showForMe: showMyCourses, deleteIcon: showMyCourses ? _jsx(Icon, { children: "close" }) : null, onDelete: showMyCourses ? () => setShowMyCourses(false) : null, disabled: loading || showForMe }) }))), _jsx(Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(CategoryAutocomplete, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(CoursesChipRoot, { color: showForMe ? 'primary' : 'default', variant: showForMe ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByCoursesForMe", defaultMessage: "ui.courses.filterByCoursesForMe" }), onClick: handleChipClick,
223
226
  // @ts-expect-error this is needed to use showForMe into SCCourses
224
- showForMe: showForMe, deleteIcon: showForMe ? _jsx(Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading || showMyCourses }) })))] })) }))), _jsx(_Fragment, { children: loading ? (_jsx(Skeleton, Object.assign({}, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))) : (_jsx(_Fragment, { children: !courses.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? (_jsxs(Stack, Object.assign({ className: classes.studentEmptyView }, { children: [_jsx(Stack, Object.assign({ className: classes.emptyBox }, { children: _jsx(Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: _jsx(Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), _jsx(Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) })), !isMobile && (_jsx(Skeleton, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })))] }))) : (_jsx(Box, Object.assign({ className: classes.teacherEmptyView }, { children: _jsx(Skeleton, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [courses.map((course) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: _jsx(Course, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && courses.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: _jsx(CourseCreatePlaceholder, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })), Boolean(next) && (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: _jsx(FormattedMessage, { id: "ui.courses.button.seeMore", defaultMessage: "ui.courses.button.seeMore" }) })))] })) })) })] }));
227
+ showForMe: showForMe, deleteIcon: showForMe ? _jsx(Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading || showMyCourses }) })))] })) }))), _jsx(_Fragment, { children: !courses.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? (_jsxs(Stack, Object.assign({ className: classes.studentEmptyView }, { children: [_jsx(Stack, Object.assign({ className: classes.emptyBox }, { children: _jsx(Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: _jsx(Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), _jsx(Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) })), !isMobile && _jsx(Skeleton, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))] }))) : (_jsx(Box, Object.assign({ className: classes.teacherEmptyView }, { children: _jsx(Skeleton, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: courses.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? (_jsx(CourseSkeleton, { template: SCCourseTemplateType.PREVIEW })) : (_jsx(Skeleton, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.courses.endMessage", defaultMessage: "ui.courses.endMessage", values: {
228
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
229
+ // @ts-ignore
230
+ button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
231
+ } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [courses.map((course) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: _jsx(Course, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && courses.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: _jsx(CourseCreatePlaceholder, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
225
232
  /**
226
233
  * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
227
234
  */
228
235
  if (!contentAvailability && !scUserContext.user) {
229
- return null;
236
+ return _jsx(HiddenPlaceholder, {});
237
+ }
238
+ if (loading) {
239
+ return _jsx(Skeleton, Object.assign({}, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }));
230
240
  }
231
241
  return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: c })));
232
242
  }
package/lib/esm/components/LessonCommentObjects/LessonCommentObjects.js CHANGED
@@ -70,7 +70,7 @@ export default function LessonCommentObjects(inProps) {
70
70
  name: PREFIX
71
71
  });
72
72
  // PROPS
73
- const { id = `lesson_comment_objects_lesson_${props.lessonObjectId ? props.lessonObjectId : props.lessonObject ? props.lessonObject.id : ''}`, className, lessonObjectId, lessonObject, CommentComponentProps = {}, CommentObjectSkeletonProps = { elevation: 0 }, CommentsObjectSkeletonProps = {}, cacheStrategy = CacheStrategies.CACHE_FIRST } = props, rest = __rest(props, ["id", "className", "lessonObjectId", "lessonObject", "CommentComponentProps", "CommentObjectSkeletonProps", "CommentsObjectSkeletonProps", "cacheStrategy"]);
73
+ const { id = `lesson_comment_objects_lesson_${props.lessonObjectId ? props.lessonObjectId : props.lessonObject ? props.lessonObject.id : ''}`, className, lessonObjectId, lessonObject, CommentComponentProps = {}, CommentObjectSkeletonProps = { elevation: 0 }, CommentsObjectSkeletonProps = {}, cacheStrategy = CacheStrategies.STALE_WHILE_REVALIDATE } = props, rest = __rest(props, ["id", "className", "lessonObjectId", "lessonObject", "CommentComponentProps", "CommentObjectSkeletonProps", "CommentsObjectSkeletonProps", "cacheStrategy"]);
74
74
  //STATE
75
75
  const [commenting, setIsCommenting] = useState(false);
76
76
  const [editing, setIsEditing] = useState(false);
@@ -101,7 +101,7 @@ export default function LessonCommentObjects(inProps) {
101
101
  }
102
102
  const scrollToBottom = () => {
103
103
  var _a;
104
- (_a = commentsEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'end', behavior: 'instant' });
104
+ (_a = commentsEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'end', behavior: 'smooth' });
105
105
  };
106
106
  useEffect(() => {
107
107
  if (commentsObject.comments.length > 0) {
package/lib/esm/components/LessonReleaseMenu/LessonReleaseMenu.js CHANGED
@@ -25,6 +25,14 @@ const messages = defineMessages({
25
25
  pickerCancelMessage: {
26
26
  id: 'ui.lessonReleaseMenu.scheduled.picker.cancel',
27
27
  defaultMessage: 'ui.lessonReleaseMenu.scheduled.picker.cancel'
28
+ },
29
+ pickerClearMessage: {
30
+ id: 'ui.lessonReleaseMenu.scheduled.picker.clear',
31
+ defaultMessage: 'ui.lessonReleaseMenu.scheduled.picker.clear'
32
+ },
33
+ pickerOkMessage: {
34
+ id: 'ui.lessonReleaseMenu.scheduled.picker.ok',
35
+ defaultMessage: 'ui.lessonReleaseMenu.scheduled.picker.ok'
28
36
  }
29
37
  });
30
38
  const classes = {
@@ -90,7 +98,7 @@ export default function LessonReleaseMenu(inProps) {
90
98
  });
91
99
  };
92
100
  const handleUpdate = (value) => {
93
- CourseService.patchCourseSection(course.id, section.id, { dripped_at: value.toISOString() })
101
+ CourseService.patchCourseSection(course.id, section.id, { dripped_at: value ? value.toISOString() : null })
94
102
  .then((data) => {
95
103
  setOpen(false);
96
104
  onSuccess(data);
@@ -109,11 +117,13 @@ export default function LessonReleaseMenu(inProps) {
109
117
  defaultMessage: 'ui.lessonReleaseMenu.now.label'
110
118
  });
111
119
  return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: course && course.type === SCCourseTypologyType.SCHEDULED ? (_jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale, localeText: {
112
- cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelMessage)}`
120
+ okButtonLabel: `${intl.formatMessage(messages.pickerOkMessage)}`,
121
+ cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelMessage)}`,
122
+ clearButtonLabel: `${intl.formatMessage(messages.pickerClearMessage)}`
113
123
  } }, { children: _jsx(MobileDateTimePicker, { className: classes.picker, disablePast: true, label: drippedAt && (_jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" })), defaultValue: drippedAt, slots: {
114
124
  //actionBar: PickerActionBar,
115
125
  tabs: (props) => _jsx(DateTimePickerTabs, Object.assign({}, props)),
116
- textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.pickerPlaceholder)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "expand_more" }) }) }))) }) })))
126
+ textField: (params) => (_jsx(TextField, Object.assign({}, params, { error: false, InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.pickerPlaceholder)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "expand_more" }) }) }))) }) })))
117
127
  }, slotProps: {
118
128
  tabs: {
119
129
  hidden: false
@@ -122,8 +132,11 @@ export default function LessonReleaseMenu(inProps) {
122
132
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
123
133
  // @ts-ignore
124
134
  toolbarTitle: (_jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" }))
135
+ },
136
+ actionBar: {
137
+ actions: ['cancel', 'clear', 'accept']
125
138
  }
126
- }, onChange: (value) => setDrippedAt(value), onAccept: handleUpdate }) }))) : (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", placeholder: placeholderStructured, defaultValue: null, onClick: handleClick, InputProps: {
139
+ }, onChange: (value) => setDrippedAt(value), onAccept: handleUpdate, onClear: () => setDrippedAt(null) }) }))) : (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", placeholder: placeholderStructured, defaultValue: null, onClick: handleClick, InputProps: {
127
140
  endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ onClick: handleClick }, { children: _jsx(Icon, { children: "expand_more" }) })) })))
128
141
  } }), _jsxs(PopoverRoot, Object.assign({ className: classes.popoverRoot, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
129
142
  vertical: 'bottom',