@selfcommunity/react-templates 0.4.5-courses.180 → 0.4.5-courses.181
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.
|
@@ -20,6 +20,7 @@ const classes = {
|
|
|
20
20
|
containerRoot: `${constants_1.PREFIX}-container-root`,
|
|
21
21
|
navigation: `${constants_1.PREFIX}-navigation`,
|
|
22
22
|
navigationTitle: `${constants_1.PREFIX}-navigation-title`,
|
|
23
|
+
previewInfo: `${constants_1.PREFIX}-preview-info`,
|
|
23
24
|
button: `${constants_1.PREFIX}-button`
|
|
24
25
|
};
|
|
25
26
|
const Root = (0, styles_1.styled)(material_1.Box, {
|
|
@@ -33,6 +34,14 @@ const Container = (0, styles_1.styled)(material_1.Box, {
|
|
|
33
34
|
overridesResolver: (props, styles) => styles.containerRoot,
|
|
34
35
|
shouldForwardProp: (prop) => prop !== 'open'
|
|
35
36
|
})(() => ({}));
|
|
37
|
+
function getUrlLesson(course, lesson) {
|
|
38
|
+
return {
|
|
39
|
+
id: course.id,
|
|
40
|
+
slug: course.slug,
|
|
41
|
+
section_id: lesson.section_id,
|
|
42
|
+
lesson_id: lesson.id
|
|
43
|
+
};
|
|
44
|
+
}
|
|
36
45
|
function Lesson(inProps) {
|
|
37
46
|
var _a, _b, _c;
|
|
38
47
|
// PROPS
|
|
@@ -40,15 +49,19 @@ function Lesson(inProps) {
|
|
|
40
49
|
props: inProps,
|
|
41
50
|
name: constants_1.PREFIX
|
|
42
51
|
});
|
|
43
|
-
const { className = null, courseId, sectionId, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, editMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = tslib_1.__rest(props, ["className", "courseId", "sectionId", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "editMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
|
|
52
|
+
const { className = null, courseId, sectionId, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, editMode = false, previewMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = tslib_1.__rest(props, ["className", "courseId", "sectionId", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "editMode", "previewMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
|
|
44
53
|
// HOOKS
|
|
45
54
|
const theme = (0, material_1.useTheme)();
|
|
46
55
|
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
|
|
47
56
|
const [_lessonId, setLessonId] = (0, react_1.useState)(lessonId);
|
|
48
57
|
const [_sectionId, setSectionId] = (0, react_1.useState)(sectionId);
|
|
49
58
|
const { scLesson, setSCLesson } = (0, react_core_1.useSCFetchLesson)({ id: _lessonId, courseId, sectionId: _sectionId });
|
|
50
|
-
const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({
|
|
59
|
+
const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({
|
|
60
|
+
id: courseId,
|
|
61
|
+
params: { view: editMode || previewMode ? api_services_1.CourseInfoViewType.EDIT : api_services_1.CourseInfoViewType.USER }
|
|
62
|
+
});
|
|
51
63
|
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
|
|
64
|
+
const scRoutingContext = (0, react_core_1.useSCRouting)();
|
|
52
65
|
// STATE
|
|
53
66
|
const [activePanel, setActivePanel] = (0, react_1.useState)(null);
|
|
54
67
|
const [settings, setSettings] = (0, react_1.useState)(null);
|
|
@@ -198,6 +211,9 @@ function Lesson(inProps) {
|
|
|
198
211
|
if (!scLesson || !scCourse) {
|
|
199
212
|
return (0, jsx_runtime_1.jsx)(react_ui_1.HiddenPlaceholder, {});
|
|
200
213
|
}
|
|
201
|
-
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: [
|
|
214
|
+
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: [previewMode && ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "info", className: classes.previewInfo }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.previewMode", defaultMessage: "templates.lesson.previewMode", values: {
|
|
215
|
+
link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, getUrlLesson(scCourse, scLesson)) }, { children: chunks }))),
|
|
216
|
+
linkBack: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse) }, { children: chunks }))
|
|
217
|
+
} }) })) }))), (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: availableLessons.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 }), !isCourseAdmin && !editMode && !previewMode && ((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 }, { 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, previewMode: previewMode, 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 })] }));
|
|
202
218
|
}
|
|
203
219
|
exports.default = Lesson;
|
|
@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
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
|
-
import { Box, Icon, IconButton, Typography, useMediaQuery, useTheme } from '@mui/material';
|
|
6
|
+
import { Box, Icon, IconButton, Typography, useMediaQuery, useTheme, Alert } from '@mui/material';
|
|
7
7
|
import { PREFIX } from './constants';
|
|
8
8
|
import { SCCourseJoinStatusType, SCCourseLessonCompletionStatusType } from '@selfcommunity/types';
|
|
9
|
-
import { useSCFetchCourse, useSCFetchLesson } from '@selfcommunity/react-core';
|
|
9
|
+
import { SCRoutes, useSCFetchCourse, useSCFetchLesson, useSCRouting, Link } from '@selfcommunity/react-core';
|
|
10
10
|
import classNames from 'classnames';
|
|
11
11
|
import { CourseCompletedDialog, HiddenPlaceholder, LessonAppbar, LessonDrawer, LessonObject, SCLessonActionsType } from '@selfcommunity/react-ui';
|
|
12
12
|
import { CourseInfoViewType, CourseService } from '@selfcommunity/api-services';
|
|
@@ -18,6 +18,7 @@ const classes = {
|
|
|
18
18
|
containerRoot: `${PREFIX}-container-root`,
|
|
19
19
|
navigation: `${PREFIX}-navigation`,
|
|
20
20
|
navigationTitle: `${PREFIX}-navigation-title`,
|
|
21
|
+
previewInfo: `${PREFIX}-preview-info`,
|
|
21
22
|
button: `${PREFIX}-button`
|
|
22
23
|
};
|
|
23
24
|
const Root = styled(Box, {
|
|
@@ -31,6 +32,14 @@ const Container = styled(Box, {
|
|
|
31
32
|
overridesResolver: (props, styles) => styles.containerRoot,
|
|
32
33
|
shouldForwardProp: (prop) => prop !== 'open'
|
|
33
34
|
})(() => ({}));
|
|
35
|
+
function getUrlLesson(course, lesson) {
|
|
36
|
+
return {
|
|
37
|
+
id: course.id,
|
|
38
|
+
slug: course.slug,
|
|
39
|
+
section_id: lesson.section_id,
|
|
40
|
+
lesson_id: lesson.id
|
|
41
|
+
};
|
|
42
|
+
}
|
|
34
43
|
export default function Lesson(inProps) {
|
|
35
44
|
var _a, _b, _c;
|
|
36
45
|
// PROPS
|
|
@@ -38,15 +47,19 @@ export default function Lesson(inProps) {
|
|
|
38
47
|
props: inProps,
|
|
39
48
|
name: PREFIX
|
|
40
49
|
});
|
|
41
|
-
const { className = null, courseId, sectionId, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, editMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = __rest(props, ["className", "courseId", "sectionId", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "editMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
|
|
50
|
+
const { className = null, courseId, sectionId, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, editMode = false, previewMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = __rest(props, ["className", "courseId", "sectionId", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "editMode", "previewMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
|
|
42
51
|
// HOOKS
|
|
43
52
|
const theme = useTheme();
|
|
44
53
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
45
54
|
const [_lessonId, setLessonId] = useState(lessonId);
|
|
46
55
|
const [_sectionId, setSectionId] = useState(sectionId);
|
|
47
56
|
const { scLesson, setSCLesson } = useSCFetchLesson({ id: _lessonId, courseId, sectionId: _sectionId });
|
|
48
|
-
const { scCourse, setSCCourse } = useSCFetchCourse({
|
|
57
|
+
const { scCourse, setSCCourse } = useSCFetchCourse({
|
|
58
|
+
id: courseId,
|
|
59
|
+
params: { view: editMode || previewMode ? CourseInfoViewType.EDIT : CourseInfoViewType.USER }
|
|
60
|
+
});
|
|
49
61
|
const { enqueueSnackbar } = useSnackbar();
|
|
62
|
+
const scRoutingContext = useSCRouting();
|
|
50
63
|
// STATE
|
|
51
64
|
const [activePanel, setActivePanel] = useState(null);
|
|
52
65
|
const [settings, setSettings] = useState(null);
|
|
@@ -196,5 +209,8 @@ export default function Lesson(inProps) {
|
|
|
196
209
|
if (!scLesson || !scCourse) {
|
|
197
210
|
return _jsx(HiddenPlaceholder, {});
|
|
198
211
|
}
|
|
199
|
-
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: [
|
|
212
|
+
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: [previewMode && (_jsx(Alert, Object.assign({ severity: "info", className: classes.previewInfo }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "templates.lesson.previewMode", defaultMessage: "templates.lesson.previewMode", values: {
|
|
213
|
+
link: (...chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, getUrlLesson(scCourse, scLesson)) }, { children: chunks }))),
|
|
214
|
+
linkBack: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse) }, { children: chunks }))
|
|
215
|
+
} }) })) }))), _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: availableLessons.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 }), !isCourseAdmin && !editMode && !previewMode && (_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 }, { 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, previewMode: previewMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })), openDialog && _jsx(CourseCompletedDialog, { course: scCourse, onClose: handleCloseDialog })] }));
|
|
200
216
|
}
|