@selfcommunity/react-templates 0.4.5-courses.145 → 0.4.5-courses.147
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.
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { SCCourseLessonType, SCCourseType } from '@selfcommunity/types';
|
|
2
1
|
import { LessonAppbarProps, LessonDrawerProps } from '@selfcommunity/react-ui';
|
|
3
2
|
export interface LessonProps {
|
|
4
3
|
/**
|
|
@@ -6,27 +5,18 @@ export interface LessonProps {
|
|
|
6
5
|
* @default null
|
|
7
6
|
*/
|
|
8
7
|
className?: string;
|
|
9
|
-
/**
|
|
10
|
-
* The course object
|
|
11
|
-
*/
|
|
12
|
-
course?: SCCourseType;
|
|
13
8
|
/**
|
|
14
9
|
* The course id
|
|
15
10
|
*/
|
|
16
|
-
courseId
|
|
11
|
+
courseId: string | number;
|
|
17
12
|
/**
|
|
18
13
|
* The section id
|
|
19
14
|
*/
|
|
20
15
|
sectionId: string | number;
|
|
21
|
-
/**
|
|
22
|
-
* The lesson object
|
|
23
|
-
* @default null
|
|
24
|
-
*/
|
|
25
|
-
lesson?: SCCourseLessonType;
|
|
26
16
|
/**
|
|
27
17
|
* The lesson id
|
|
28
18
|
*/
|
|
29
|
-
lessonId
|
|
19
|
+
lessonId: string | number;
|
|
30
20
|
/**
|
|
31
21
|
* Props to spread to LessonAppbar Component
|
|
32
22
|
* @default {}
|
|
@@ -33,24 +33,20 @@ const Container = (0, styles_1.styled)(material_1.Box, {
|
|
|
33
33
|
shouldForwardProp: (prop) => prop !== 'open'
|
|
34
34
|
})(() => ({}));
|
|
35
35
|
function Lesson(inProps) {
|
|
36
|
-
var _a, _b, _c, _d, _e, _f, _g
|
|
36
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
37
37
|
// PROPS
|
|
38
38
|
const props = (0, system_1.useThemeProps)({
|
|
39
39
|
props: inProps,
|
|
40
40
|
name: constants_1.PREFIX
|
|
41
41
|
});
|
|
42
|
-
const { className = null,
|
|
42
|
+
const { className = null, courseId, sectionId, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, isEditor = false, editMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = tslib_1.__rest(props, ["className", "courseId", "sectionId", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "isEditor", "editMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
|
|
43
43
|
// HOOKS
|
|
44
44
|
const theme = (0, material_1.useTheme)();
|
|
45
45
|
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
|
|
46
46
|
const [_lessonId, setLessonId] = (0, react_1.useState)(lessonId);
|
|
47
47
|
const [_sectionId, setSectionId] = (0, react_1.useState)(sectionId);
|
|
48
|
-
const { scLesson, setSCLesson } = (0, react_core_1.useSCFetchLesson)({ id: _lessonId,
|
|
49
|
-
const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({
|
|
50
|
-
id: courseId !== null && courseId !== void 0 ? courseId : lesson.course_id,
|
|
51
|
-
course,
|
|
52
|
-
params: { view: isEditor ? api_services_1.CourseInfoViewType.EDIT : api_services_1.CourseInfoViewType.USER }
|
|
53
|
-
});
|
|
48
|
+
const { scLesson, setSCLesson } = (0, react_core_1.useSCFetchLesson)({ id: _lessonId, courseId, sectionId: _sectionId });
|
|
49
|
+
const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, params: { view: isEditor ? api_services_1.CourseInfoViewType.EDIT : api_services_1.CourseInfoViewType.USER } });
|
|
54
50
|
// STATE
|
|
55
51
|
const [activePanel, setActivePanel] = (0, react_1.useState)(null);
|
|
56
52
|
const [settings, setSettings] = (0, react_1.useState)(null);
|
|
@@ -62,18 +58,23 @@ function Lesson(inProps) {
|
|
|
62
58
|
const currentData = (0, react_1.useMemo)(() => {
|
|
63
59
|
if (!scCourse || !scLesson)
|
|
64
60
|
return null;
|
|
65
|
-
return (0, react_ui_1.getCurrentSectionAndLessonIndex)(scCourse,
|
|
66
|
-
}, [scCourse,
|
|
61
|
+
return (0, react_ui_1.getCurrentSectionAndLessonIndex)(scCourse, sectionId, lessonId);
|
|
62
|
+
}, [scCourse, sectionId, lessonId]);
|
|
67
63
|
const [currentSectionIndex, setCurrentSectionIndex] = (0, react_1.useState)((currentData === null || currentData === void 0 ? void 0 : currentData.currentSectionIndex) || 0);
|
|
68
64
|
const [currentLessonIndex, setCurrentLessonIndex] = (0, react_1.useState)((currentData === null || currentData === void 0 ? void 0 : currentData.currentLessonIndex) || 0);
|
|
69
|
-
const [currentSection, setCurrentSection] = (0, react_1.useState)(
|
|
65
|
+
const [currentSection, setCurrentSection] = (0, react_1.useState)(null);
|
|
70
66
|
const isPrevDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) || (currentSectionIndex === 0 && currentLessonIndex === 0);
|
|
71
67
|
const isNextDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) ||
|
|
72
|
-
(currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((
|
|
73
|
-
(currentLessonIndex < ((
|
|
74
|
-
? (
|
|
75
|
-
: (
|
|
68
|
+
(currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((_b = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _b === void 0 ? void 0 : _b.length) - 1) ||
|
|
69
|
+
(currentLessonIndex < ((_c = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _c === void 0 ? void 0 : _c.length) - 1
|
|
70
|
+
? (_d = currentSection.lessons[currentLessonIndex + 1]) === null || _d === void 0 ? void 0 : _d.locked
|
|
71
|
+
: (_f = (_e = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[currentSectionIndex + 1]) === null || _e === void 0 ? void 0 : _e.lessons[0]) === null || _f === void 0 ? void 0 : _f.locked);
|
|
76
72
|
const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
|
|
73
|
+
(0, react_1.useEffect)(() => {
|
|
74
|
+
if ((scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) && currentData) {
|
|
75
|
+
setCurrentSection(scCourse.sections[currentData.currentSectionIndex] || null);
|
|
76
|
+
}
|
|
77
|
+
}, [scCourse, currentData]);
|
|
77
78
|
// HANDLERS
|
|
78
79
|
/**
|
|
79
80
|
* Handles lesson settings change
|
|
@@ -169,8 +170,7 @@ function Lesson(inProps) {
|
|
|
169
170
|
const updatedCourse = Object.assign(Object.assign({}, scCourse), { sections: scCourse.sections.map((section) => (Object.assign(Object.assign({}, section), { lessons: section.lessons.map((lesson) => lesson.id === scLesson.id
|
|
170
171
|
? Object.assign(Object.assign({}, lesson), { completion_status: c ? types_1.SCCourseLessonCompletionStatusType.UNCOMPLETED : types_1.SCCourseLessonCompletionStatusType.COMPLETED }) : lesson) }))), num_lessons_completed: c ? scCourse.num_lessons_completed - 1 : scCourse.num_lessons_completed + 1 });
|
|
171
172
|
setSCCourse(updatedCourse);
|
|
172
|
-
|
|
173
|
-
if (scCourse.num_lessons - scCourse.num_lessons_completed === 1) {
|
|
173
|
+
if (updatedCourse.num_lessons === updatedCourse.num_lessons_completed) {
|
|
174
174
|
setOpenDialog(true);
|
|
175
175
|
}
|
|
176
176
|
})
|
|
@@ -191,6 +191,6 @@ function Lesson(inProps) {
|
|
|
191
191
|
if (!scLesson || !scCourse) {
|
|
192
192
|
return (0, jsx_runtime_1.jsx)(react_ui_1.HiddenPlaceholder, {});
|
|
193
193
|
}
|
|
194
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), (0, jsx_runtime_1.jsxs)(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.navigation }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: (
|
|
194
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), (0, jsx_runtime_1.jsxs)(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.navigation }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: (_g = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _g === void 0 ? void 0 : _g.length } }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.navigationTitle }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }) }))] })] })), (0, jsx_runtime_1.jsx)(react_ui_1.LessonObject, { course: scCourse, lesson: scLesson, editMode: editMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit }), !isEditor && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }), endIcon: completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "circle_checked" }), onClick: () => toggleLessonCompletion(completed) }, { children: completed ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.button.completed", defaultMessage: "templates.lesson.button.completed" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.button.complete", defaultMessage: "templates.lesson.button.complete" })) })))] })), (0, jsx_runtime_1.jsx)(react_ui_1.LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === react_ui_1.SCLessonActionsType.SETTINGS : editMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })), openDialog && (0, jsx_runtime_1.jsx)(react_ui_1.CourseCompletedDialog, { course: scCourse, onClose: handleCloseDialog })] }));
|
|
195
195
|
}
|
|
196
196
|
exports.default = Lesson;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { SCCourseLessonType, SCCourseType } from '@selfcommunity/types';
|
|
2
1
|
import { LessonAppbarProps, LessonDrawerProps } from '@selfcommunity/react-ui';
|
|
3
2
|
export interface LessonProps {
|
|
4
3
|
/**
|
|
@@ -6,27 +5,18 @@ export interface LessonProps {
|
|
|
6
5
|
* @default null
|
|
7
6
|
*/
|
|
8
7
|
className?: string;
|
|
9
|
-
/**
|
|
10
|
-
* The course object
|
|
11
|
-
*/
|
|
12
|
-
course?: SCCourseType;
|
|
13
8
|
/**
|
|
14
9
|
* The course id
|
|
15
10
|
*/
|
|
16
|
-
courseId
|
|
11
|
+
courseId: string | number;
|
|
17
12
|
/**
|
|
18
13
|
* The section id
|
|
19
14
|
*/
|
|
20
15
|
sectionId: string | number;
|
|
21
|
-
/**
|
|
22
|
-
* The lesson object
|
|
23
|
-
* @default null
|
|
24
|
-
*/
|
|
25
|
-
lesson?: SCCourseLessonType;
|
|
26
16
|
/**
|
|
27
17
|
* The lesson id
|
|
28
18
|
*/
|
|
29
|
-
lessonId
|
|
19
|
+
lessonId: string | number;
|
|
30
20
|
/**
|
|
31
21
|
* Props to spread to LessonAppbar Component
|
|
32
22
|
* @default {}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Fragment, useCallback, useMemo, useState } from 'react';
|
|
3
|
+
import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
5
|
import { useThemeProps } from '@mui/system';
|
|
6
6
|
import { Box, Icon, IconButton, Typography, useMediaQuery, useTheme } from '@mui/material';
|
|
@@ -31,24 +31,20 @@ const Container = styled(Box, {
|
|
|
31
31
|
shouldForwardProp: (prop) => prop !== 'open'
|
|
32
32
|
})(() => ({}));
|
|
33
33
|
export default function Lesson(inProps) {
|
|
34
|
-
var _a, _b, _c, _d, _e, _f, _g
|
|
34
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
35
35
|
// PROPS
|
|
36
36
|
const props = useThemeProps({
|
|
37
37
|
props: inProps,
|
|
38
38
|
name: PREFIX
|
|
39
39
|
});
|
|
40
|
-
const { className = null,
|
|
40
|
+
const { className = null, courseId, sectionId, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, isEditor = false, editMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = __rest(props, ["className", "courseId", "sectionId", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "isEditor", "editMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
|
|
41
41
|
// HOOKS
|
|
42
42
|
const theme = useTheme();
|
|
43
43
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
44
44
|
const [_lessonId, setLessonId] = useState(lessonId);
|
|
45
45
|
const [_sectionId, setSectionId] = useState(sectionId);
|
|
46
|
-
const { scLesson, setSCLesson } = useSCFetchLesson({ id: _lessonId,
|
|
47
|
-
const { scCourse, setSCCourse } = useSCFetchCourse({
|
|
48
|
-
id: courseId !== null && courseId !== void 0 ? courseId : lesson.course_id,
|
|
49
|
-
course,
|
|
50
|
-
params: { view: isEditor ? CourseInfoViewType.EDIT : CourseInfoViewType.USER }
|
|
51
|
-
});
|
|
46
|
+
const { scLesson, setSCLesson } = useSCFetchLesson({ id: _lessonId, courseId, sectionId: _sectionId });
|
|
47
|
+
const { scCourse, setSCCourse } = useSCFetchCourse({ id: courseId, params: { view: isEditor ? CourseInfoViewType.EDIT : CourseInfoViewType.USER } });
|
|
52
48
|
// STATE
|
|
53
49
|
const [activePanel, setActivePanel] = useState(null);
|
|
54
50
|
const [settings, setSettings] = useState(null);
|
|
@@ -60,18 +56,23 @@ export default function Lesson(inProps) {
|
|
|
60
56
|
const currentData = useMemo(() => {
|
|
61
57
|
if (!scCourse || !scLesson)
|
|
62
58
|
return null;
|
|
63
|
-
return getCurrentSectionAndLessonIndex(scCourse,
|
|
64
|
-
}, [scCourse,
|
|
59
|
+
return getCurrentSectionAndLessonIndex(scCourse, sectionId, lessonId);
|
|
60
|
+
}, [scCourse, sectionId, lessonId]);
|
|
65
61
|
const [currentSectionIndex, setCurrentSectionIndex] = useState((currentData === null || currentData === void 0 ? void 0 : currentData.currentSectionIndex) || 0);
|
|
66
62
|
const [currentLessonIndex, setCurrentLessonIndex] = useState((currentData === null || currentData === void 0 ? void 0 : currentData.currentLessonIndex) || 0);
|
|
67
|
-
const [currentSection, setCurrentSection] = useState(
|
|
63
|
+
const [currentSection, setCurrentSection] = useState(null);
|
|
68
64
|
const isPrevDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) || (currentSectionIndex === 0 && currentLessonIndex === 0);
|
|
69
65
|
const isNextDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) ||
|
|
70
|
-
(currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((
|
|
71
|
-
(currentLessonIndex < ((
|
|
72
|
-
? (
|
|
73
|
-
: (
|
|
66
|
+
(currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((_b = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _b === void 0 ? void 0 : _b.length) - 1) ||
|
|
67
|
+
(currentLessonIndex < ((_c = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _c === void 0 ? void 0 : _c.length) - 1
|
|
68
|
+
? (_d = currentSection.lessons[currentLessonIndex + 1]) === null || _d === void 0 ? void 0 : _d.locked
|
|
69
|
+
: (_f = (_e = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[currentSectionIndex + 1]) === null || _e === void 0 ? void 0 : _e.lessons[0]) === null || _f === void 0 ? void 0 : _f.locked);
|
|
74
70
|
const [openDialog, setOpenDialog] = useState(false);
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
if ((scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) && currentData) {
|
|
73
|
+
setCurrentSection(scCourse.sections[currentData.currentSectionIndex] || null);
|
|
74
|
+
}
|
|
75
|
+
}, [scCourse, currentData]);
|
|
75
76
|
// HANDLERS
|
|
76
77
|
/**
|
|
77
78
|
* Handles lesson settings change
|
|
@@ -167,8 +168,7 @@ export default function Lesson(inProps) {
|
|
|
167
168
|
const updatedCourse = Object.assign(Object.assign({}, scCourse), { sections: scCourse.sections.map((section) => (Object.assign(Object.assign({}, section), { lessons: section.lessons.map((lesson) => lesson.id === scLesson.id
|
|
168
169
|
? Object.assign(Object.assign({}, lesson), { completion_status: c ? SCCourseLessonCompletionStatusType.UNCOMPLETED : SCCourseLessonCompletionStatusType.COMPLETED }) : lesson) }))), num_lessons_completed: c ? scCourse.num_lessons_completed - 1 : scCourse.num_lessons_completed + 1 });
|
|
169
170
|
setSCCourse(updatedCourse);
|
|
170
|
-
|
|
171
|
-
if (scCourse.num_lessons - scCourse.num_lessons_completed === 1) {
|
|
171
|
+
if (updatedCourse.num_lessons === updatedCourse.num_lessons_completed) {
|
|
172
172
|
setOpenDialog(true);
|
|
173
173
|
}
|
|
174
174
|
})
|
|
@@ -189,5 +189,5 @@ export default function Lesson(inProps) {
|
|
|
189
189
|
if (!scLesson || !scCourse) {
|
|
190
190
|
return _jsx(HiddenPlaceholder, {});
|
|
191
191
|
}
|
|
192
|
-
return (_jsxs(Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), _jsxs(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [_jsx(Box, Object.assign({ className: classes.navigation }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: _jsx(FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: (
|
|
192
|
+
return (_jsxs(Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), _jsxs(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [_jsx(Box, Object.assign({ className: classes.navigation }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: _jsx(FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: (_g = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _g === void 0 ? void 0 : _g.length } }) })) })), _jsxs(Box, Object.assign({ className: classes.navigationTitle }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), _jsxs(Box, { children: [_jsx(IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: _jsx(Icon, { children: "arrow_next" }) }))] })] })), _jsx(LessonObject, { course: scCourse, lesson: scLesson, editMode: editMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit }), !isEditor && (_jsx(LoadingButton, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && _jsx(Icon, { children: "arrow_next" }), endIcon: completed && _jsx(Icon, { children: "circle_checked" }), onClick: () => toggleLessonCompletion(completed) }, { children: completed ? (_jsx(FormattedMessage, { id: "templates.lesson.button.completed", defaultMessage: "templates.lesson.button.completed" })) : (_jsx(FormattedMessage, { id: "templates.lesson.button.complete", defaultMessage: "templates.lesson.button.complete" })) })))] })), _jsx(LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === SCLessonActionsType.SETTINGS : editMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })), openDialog && _jsx(CourseCompletedDialog, { course: scCourse, onClose: handleCloseDialog })] }));
|
|
193
193
|
}
|