@selfcommunity/react-ui 0.10.2-courses.183 → 0.10.2-courses.185
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/CourseDashboard/Header.js +29 -24
- package/lib/cjs/components/EditCourse/Lessons/LessonRow.d.ts +4 -4
- package/lib/cjs/components/EditCourse/Lessons/LessonRow.js +11 -13
- package/lib/cjs/components/EditCourse/Lessons/SectionRow.d.ts +4 -4
- package/lib/cjs/components/EditCourse/Lessons/SectionRow.js +14 -15
- package/lib/cjs/components/EditCourse/Lessons.js +18 -1
- package/lib/cjs/components/EditCourse/types.d.ts +14 -0
- package/lib/cjs/components/EditCourse/types.js +6 -1
- package/lib/cjs/components/LessonCommentObjects/LessonCommentObjects.js +3 -1
- package/lib/cjs/shared/AccordionLessons/AccordionLessons.js +12 -2
- package/lib/esm/components/CourseDashboard/Header.js +31 -26
- package/lib/esm/components/EditCourse/Lessons/LessonRow.d.ts +4 -4
- package/lib/esm/components/EditCourse/Lessons/LessonRow.js +12 -14
- package/lib/esm/components/EditCourse/Lessons/SectionRow.d.ts +4 -4
- package/lib/esm/components/EditCourse/Lessons/SectionRow.js +16 -17
- package/lib/esm/components/EditCourse/Lessons.js +20 -3
- package/lib/esm/components/EditCourse/types.d.ts +14 -0
- package/lib/esm/components/EditCourse/types.js +5 -0
- package/lib/esm/components/LessonCommentObjects/LessonCommentObjects.js +5 -3
- package/lib/esm/shared/AccordionLessons/AccordionLessons.js +15 -5
- package/lib/umd/react-ui.js +1 -1
- package/package.json +8 -8
|
@@ -16,6 +16,7 @@ const classes = {
|
|
|
16
16
|
outerWrapper: `${constants_1.PREFIX}-header-outer-wrapper`,
|
|
17
17
|
innerWrapper: `${constants_1.PREFIX}-header-inner-wrapper`,
|
|
18
18
|
iconWrapper: `${constants_1.PREFIX}-header-icon-wrapper`,
|
|
19
|
+
buttonPopover: `${constants_1.PREFIX}-header-button-popover`,
|
|
19
20
|
contrastColor: `${constants_1.PREFIX}-contrast-color`
|
|
20
21
|
};
|
|
21
22
|
function getUrlEditDashboard(course) {
|
|
@@ -28,32 +29,36 @@ function getUrlEditDashboard(course) {
|
|
|
28
29
|
function HeaderCourseDashboard(props) {
|
|
29
30
|
// PROPS
|
|
30
31
|
const { course, hasAction = false } = props;
|
|
32
|
+
// STATES
|
|
33
|
+
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
|
|
34
|
+
const open = Boolean(anchorEl);
|
|
31
35
|
// CONTEXTS
|
|
32
36
|
const scRoutingContext = (0, react_core_1.useSCRouting)();
|
|
33
|
-
//
|
|
37
|
+
// INTL
|
|
34
38
|
const intl = (0, react_intl_1.useIntl)();
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
39
|
+
// HANDLERS
|
|
40
|
+
const handleOpenPopover = (0, react_1.useCallback)((e) => {
|
|
41
|
+
setAnchorEl(e.currentTarget);
|
|
42
|
+
}, [setAnchorEl]);
|
|
43
|
+
const handlePopoverClose = (0, react_1.useCallback)(() => {
|
|
44
|
+
setAnchorEl(null);
|
|
45
|
+
}, [setAnchorEl]);
|
|
46
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)("img", { src: course.image_bigger, alt: course.image_bigger, className: classes.img }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: course.name })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.iconWrapper, classes.contrastColor) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "public" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.label", defaultMessage: "ui.course.label", values: {
|
|
47
|
+
privacy: intl.formatMessage({
|
|
48
|
+
id: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
|
|
49
|
+
defaultMessage: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
|
|
50
|
+
})
|
|
51
|
+
} }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.iconWrapper, classes.contrastColor) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "courses" })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", color: "inherit", size: "small", className: classes.buttonPopover, onClick: handleOpenPopover }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.type", defaultMessage: "ui.course.type", values: {
|
|
52
|
+
typeOfCourse: intl.formatMessage({
|
|
53
|
+
id: `ui.course.type.${course.type}`,
|
|
54
|
+
defaultMessage: `ui.course.type.${course.type}`
|
|
55
|
+
})
|
|
56
|
+
} }) })) })), open && ((0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: true, anchorEl: anchorEl, anchorOrigin: {
|
|
57
|
+
vertical: 'bottom',
|
|
58
|
+
horizontal: 'left'
|
|
59
|
+
}, transformOrigin: {
|
|
60
|
+
vertical: 'top',
|
|
61
|
+
horizontal: 'left'
|
|
62
|
+
}, onClose: handlePopoverClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { padding: '10px' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body2", sx: { whiteSpace: 'pre-line' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${course.type}.info`, defaultMessage: `ui.courseForm.${course.type}.info` }) })) })) })))] }))] })), hasAction && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
|
|
58
63
|
}
|
|
59
64
|
exports.default = (0, react_1.memo)(HeaderCourseDashboard);
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DraggableProvided } from '@hello-pangea/dnd';
|
|
3
3
|
import { SCCourseLessonType, SCCourseSectionType, SCCourseType } from '@selfcommunity/types';
|
|
4
|
-
import { ActionLessonType } from '../types';
|
|
4
|
+
import { ActionLessonType, DeleteRowRef } from '../types';
|
|
5
5
|
interface LessonRowProps {
|
|
6
6
|
provider: DraggableProvided;
|
|
7
|
-
course: SCCourseType
|
|
7
|
+
course: SCCourseType;
|
|
8
8
|
section: SCCourseSectionType;
|
|
9
9
|
lesson: SCCourseLessonType;
|
|
10
10
|
isNewRow: boolean;
|
|
11
11
|
handleManageLesson: (lesson: SCCourseLessonType, type: ActionLessonType, newRow?: boolean) => void;
|
|
12
|
+
handleOpenDialog: () => void;
|
|
12
13
|
}
|
|
13
|
-
declare
|
|
14
|
-
declare const _default: import("react").MemoExoticComponent<typeof LessonRow>;
|
|
14
|
+
declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<LessonRowProps & import("react").RefAttributes<DeleteRowRef>>>;
|
|
15
15
|
export default _default;
|
|
@@ -16,7 +16,6 @@ const notistack_1 = require("notistack");
|
|
|
16
16
|
const react_core_1 = require("@selfcommunity/react-core");
|
|
17
17
|
const Errors_1 = require("../../../constants/Errors");
|
|
18
18
|
const types_1 = require("../types");
|
|
19
|
-
const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
|
|
20
19
|
const hooks_1 = require("../hooks");
|
|
21
20
|
const classes = {
|
|
22
21
|
cellWidth: `${constants_1.PREFIX}-cell-width`,
|
|
@@ -33,12 +32,11 @@ function getUrlLesson(course, section, lesson) {
|
|
|
33
32
|
lesson_id: lesson.id
|
|
34
33
|
};
|
|
35
34
|
}
|
|
36
|
-
function LessonRow(props) {
|
|
35
|
+
function LessonRow(props, ref) {
|
|
37
36
|
// PROPS
|
|
38
|
-
const { provider, course, section, lesson, isNewRow, handleManageLesson } = props;
|
|
37
|
+
const { provider, course, section, lesson, isNewRow, handleManageLesson, handleOpenDialog } = props;
|
|
39
38
|
// STATES
|
|
40
39
|
const [editMode, setEditMode] = (0, react_1.useState)(false);
|
|
41
|
-
const [open, setOpen] = (0, react_1.useState)(false);
|
|
42
40
|
// CONTEXTS
|
|
43
41
|
const scRoutingContext = (0, react_core_1.useSCRouting)();
|
|
44
42
|
// HOOKS
|
|
@@ -47,10 +45,10 @@ function LessonRow(props) {
|
|
|
47
45
|
// HANDLERS
|
|
48
46
|
const handleAbleEditMode = (0, react_1.useCallback)(() => setTimeout(() => setEditMode(true)), [setEditMode]);
|
|
49
47
|
const handleDisableEditMode = (0, react_1.useCallback)(() => setEditMode(false), [setEditMode]);
|
|
50
|
-
const handleDeleteLesson = (0, react_1.useCallback)(() => {
|
|
51
|
-
api_services_1.CourseService.deleteCourseLesson(course.id,
|
|
48
|
+
const handleDeleteLesson = (0, react_1.useCallback)((deleteSection, deleteLesson) => {
|
|
49
|
+
api_services_1.CourseService.deleteCourseLesson(course.id, deleteSection.id, deleteLesson.id)
|
|
52
50
|
.then(() => {
|
|
53
|
-
handleManageLesson(
|
|
51
|
+
handleManageLesson(deleteLesson, types_1.ActionLessonType.DELETE);
|
|
54
52
|
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.delete", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.delete" }), {
|
|
55
53
|
variant: 'success',
|
|
56
54
|
autoHideDuration: 3000
|
|
@@ -63,15 +61,15 @@ function LessonRow(props) {
|
|
|
63
61
|
autoHideDuration: 3000
|
|
64
62
|
});
|
|
65
63
|
});
|
|
66
|
-
}, [course,
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}, [
|
|
64
|
+
}, [course, handleManageLesson]);
|
|
65
|
+
(0, react_1.useImperativeHandle)(ref, () => ({
|
|
66
|
+
handleDeleteLesson: (deleteSection, deleteLesson) => handleDeleteLesson(deleteSection, deleteLesson)
|
|
67
|
+
}), [handleDeleteLesson]);
|
|
70
68
|
return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, Object.assign({}, provider.draggableProps, { ref: provider.innerRef }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "4%" }), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, provider.dragHandleProps, { className: (0, classnames_1.default)(classes.cellWidth, classes.cellPadding) }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.tableBodyIconWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled" }, { children: "drag" })) })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(FieldName_1.default, { endpoint: {
|
|
71
69
|
url: () => isNewRow
|
|
72
70
|
? api_services_1.Endpoints.CreateCourseLesson.url({ id: course.id, section_id: section.id })
|
|
73
71
|
: api_services_1.Endpoints.PatchCourseLesson.url({ id: course.id, section_id: section.id, lesson_id: lesson.id }),
|
|
74
72
|
method: isNewRow ? api_services_1.Endpoints.CreateCourseLesson.method : api_services_1.Endpoints.PatchCourseLesson.method
|
|
75
|
-
}, row: lesson, isNewRow: isNewRow, handleManageRow: handleManageLesson, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (0, jsx_runtime_1.
|
|
73
|
+
}, row: lesson, isNewRow: isNewRow, handleManageRow: handleManageLesson, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(ChangeLessonStatus_1.default, { course: course, section: section, lesson: lesson, disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, getUrlLesson(course, section, lesson)) }, { 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.editCourse.tab.lessons.table.menu.edit", defaultMessage: "ui.editCourse.tab.lessons.table.menu.edit" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_PREVIEW_ROUTE_NAME, getUrlLesson(course, section, lesson)) }, { 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.editCourse.tab.lessons.table.menu.preview", defaultMessage: "ui.editCourse.tab.lessons.table.menu.preview" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { 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.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleOpenDialog }, { 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.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })));
|
|
76
74
|
}
|
|
77
|
-
exports.default = (0, react_1.memo)(LessonRow);
|
|
75
|
+
exports.default = (0, react_1.memo)((0, react_1.forwardRef)(LessonRow));
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DraggableProvided } from '@hello-pangea/dnd';
|
|
3
3
|
import { SCCourseSectionType, SCCourseType } from '@selfcommunity/types';
|
|
4
|
-
import { ActionLessonType } from '../types';
|
|
4
|
+
import { ActionLessonType, DeleteRowProps, DeleteRowRef } from '../types';
|
|
5
5
|
interface SectionRowProps {
|
|
6
|
-
course: SCCourseType
|
|
6
|
+
course: SCCourseType;
|
|
7
7
|
provider: DraggableProvided;
|
|
8
8
|
section: SCCourseSectionType;
|
|
9
9
|
isNewRow: boolean;
|
|
10
10
|
handleManageSection: (section: SCCourseSectionType, type: ActionLessonType, newRow?: boolean) => void;
|
|
11
|
+
handleOpenDialog: (row: DeleteRowProps) => void;
|
|
11
12
|
}
|
|
12
|
-
declare
|
|
13
|
-
declare const _default: import("react").MemoExoticComponent<typeof SectionRow>;
|
|
13
|
+
declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<SectionRowProps & import("react").RefAttributes<DeleteRowRef>>>;
|
|
14
14
|
export default _default;
|
|
@@ -20,7 +20,6 @@ const types_1 = require("@selfcommunity/types");
|
|
|
20
20
|
const api_services_1 = require("@selfcommunity/api-services");
|
|
21
21
|
const types_2 = require("../types");
|
|
22
22
|
const hooks_1 = require("../hooks");
|
|
23
|
-
const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
|
|
24
23
|
const classes = {
|
|
25
24
|
tableBodyIconWrapper: `${constants_1.PREFIX}-table-body-icon-wrapper`,
|
|
26
25
|
tableBodyAccordion: `${constants_1.PREFIX}-table-body-accordion`,
|
|
@@ -31,14 +30,15 @@ const classes = {
|
|
|
31
30
|
cellAlignCenter: `${constants_1.PREFIX}-cell-align-center`,
|
|
32
31
|
cellPadding: `${constants_1.PREFIX}-cell-padding`
|
|
33
32
|
};
|
|
34
|
-
function SectionRow(props) {
|
|
33
|
+
function SectionRow(props, ref) {
|
|
35
34
|
// PROPS
|
|
36
|
-
const { course, provider, section, isNewRow, handleManageSection } = props;
|
|
35
|
+
const { course, provider, section, isNewRow, handleManageSection, handleOpenDialog } = props;
|
|
37
36
|
// STATES
|
|
38
37
|
const [expand, setExpand] = (0, react_1.useState)(true);
|
|
39
|
-
const [open, setOpen] = (0, react_1.useState)(false);
|
|
40
38
|
const [editMode, setEditMode] = (0, react_1.useState)(false);
|
|
41
39
|
const [lessons, setLessons] = (0, react_1.useState)([]);
|
|
40
|
+
// REFS
|
|
41
|
+
const innerRef = (0, react_1.useRef)(null);
|
|
42
42
|
// HOOKS
|
|
43
43
|
const { isDisabled } = (0, hooks_1.useIsDisabled)();
|
|
44
44
|
const intl = (0, react_intl_1.useIntl)();
|
|
@@ -59,10 +59,6 @@ function SectionRow(props) {
|
|
|
59
59
|
name: intl.formatMessage({ id: 'ui.editCourse.tab.lessons.table.newLesson', defaultMessage: 'ui.editCourse.tab.lessons.table.newLesson' }, { num: id })
|
|
60
60
|
};
|
|
61
61
|
}, []);
|
|
62
|
-
// HANDLERS
|
|
63
|
-
const handleOpenDialog = (0, react_1.useCallback)(() => {
|
|
64
|
-
setOpen((prev) => !prev);
|
|
65
|
-
}, [setOpen]);
|
|
66
62
|
const handleExpandAccordion = (0, react_1.useCallback)(() => setExpand((prev) => !prev), [setExpand]);
|
|
67
63
|
const handleDragEnd = (0, react_1.useCallback)((e) => {
|
|
68
64
|
if (!e.destination || e.destination.index === e.source.index) {
|
|
@@ -96,13 +92,12 @@ function SectionRow(props) {
|
|
|
96
92
|
}, [setLessons, getLesson]);
|
|
97
93
|
const handleAbleEditMode = (0, react_1.useCallback)(() => setTimeout(() => setEditMode(true)), [setEditMode]);
|
|
98
94
|
const handleDisableEditMode = (0, react_1.useCallback)(() => setEditMode(false), [setEditMode]);
|
|
99
|
-
const handleDeleteSection = (0, react_1.useCallback)(() => {
|
|
100
|
-
api_services_1.CourseService.deleteCourseSection(course.id,
|
|
95
|
+
const handleDeleteSection = (0, react_1.useCallback)((deleteSection) => {
|
|
96
|
+
api_services_1.CourseService.deleteCourseSection(course.id, deleteSection.id)
|
|
101
97
|
.then(() => {
|
|
102
98
|
var _a;
|
|
103
|
-
const tempSection = Object.assign(Object.assign({},
|
|
99
|
+
const tempSection = Object.assign(Object.assign({}, deleteSection), { num_lessons: ((_a = deleteSection.lessons) === null || _a === void 0 ? void 0 : _a.length) || 0 });
|
|
104
100
|
handleManageSection(tempSection, types_2.ActionLessonType.DELETE);
|
|
105
|
-
handleOpenDialog();
|
|
106
101
|
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.delete", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.delete" }), {
|
|
107
102
|
variant: 'success',
|
|
108
103
|
autoHideDuration: 3000
|
|
@@ -115,7 +110,7 @@ function SectionRow(props) {
|
|
|
115
110
|
autoHideDuration: 3000
|
|
116
111
|
});
|
|
117
112
|
});
|
|
118
|
-
}, [course,
|
|
113
|
+
}, [course, handleManageSection]);
|
|
119
114
|
const handleManageLesson = (0, react_1.useCallback)((lesson, type, newRow) => {
|
|
120
115
|
switch (type) {
|
|
121
116
|
case types_2.ActionLessonType.ADD: {
|
|
@@ -139,11 +134,15 @@ function SectionRow(props) {
|
|
|
139
134
|
}
|
|
140
135
|
}
|
|
141
136
|
}, [section, handleManageSection]);
|
|
137
|
+
(0, react_1.useImperativeHandle)(ref, () => ({
|
|
138
|
+
handleDeleteSection: (deleteSection) => handleDeleteSection(deleteSection),
|
|
139
|
+
handleDeleteLesson: (deleteSection, deleteLesson) => innerRef.current.handleDeleteLesson(deleteSection, deleteLesson)
|
|
140
|
+
}), [handleDeleteSection]);
|
|
142
141
|
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableRow, Object.assign({}, provider.draggableProps, { ref: provider.innerRef, className: classes.tableBodyAccordion }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, provider.dragHandleProps, { className: (0, classnames_1.default)(classes.cellWidth, classes.cellPadding) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tableBodyIconWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "expand row", size: "small", onClick: handleExpandAccordion }, { children: expand ? (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.Icon, Object.assign({ color: "disabled" }, { children: "drag" }))] })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(FieldName_1.default, { endpoint: {
|
|
143
142
|
url: () => isNewRow
|
|
144
143
|
? api_services_1.Endpoints.CreateCourseSection.url({ id: course.id })
|
|
145
144
|
: api_services_1.Endpoints.PatchCourseSection.url({ id: course.id, section_id: section.id }),
|
|
146
145
|
method: isNewRow ? api_services_1.Endpoints.CreateCourseSection.method : api_services_1.Endpoints.PatchCourseSection.method
|
|
147
|
-
}, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: (0, jsx_runtime_1.jsx)(LessonReleaseMenu_1.default, { course: course, section: section }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { 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.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleOpenDialog }, { 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.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.
|
|
146
|
+
}, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: (0, jsx_runtime_1.jsx)(LessonReleaseMenu_1.default, { course: course, section: section }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { 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.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: () => handleOpenDialog({ row: types_2.RowType.SECTION, section }) }, { 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.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.Table, { children: (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(LessonRow_1.default, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson, handleOpenDialog: () => handleOpenDialog({ row: types_2.RowType.LESSON, section, lesson }), ref: innerRef }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })) })) })] }));
|
|
148
147
|
}
|
|
149
|
-
exports.default = (0, react_1.memo)(SectionRow);
|
|
148
|
+
exports.default = (0, react_1.memo)((0, react_1.forwardRef)(SectionRow));
|
|
@@ -18,6 +18,7 @@ const SectionRow_1 = tslib_1.__importDefault(require("./Lessons/SectionRow"));
|
|
|
18
18
|
const types_1 = require("./types");
|
|
19
19
|
const hooks_1 = require("./hooks");
|
|
20
20
|
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
21
|
+
const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
|
|
21
22
|
const classes = {
|
|
22
23
|
lessonTitle: `${constants_1.PREFIX}-lesson-title`,
|
|
23
24
|
lessonInfoWrapper: `${constants_1.PREFIX}-lesson-info-wrapper`,
|
|
@@ -57,6 +58,9 @@ function Lessons(props) {
|
|
|
57
58
|
const { course, setCourse } = props;
|
|
58
59
|
// STATES
|
|
59
60
|
const [sections, setSections] = (0, react_1.useState)([]);
|
|
61
|
+
const [dialog, setDialog] = (0, react_1.useState)(null);
|
|
62
|
+
// REFS
|
|
63
|
+
const ref = (0, react_1.useRef)(null);
|
|
60
64
|
// HOOKS
|
|
61
65
|
const { isDisabled } = (0, hooks_1.useIsDisabled)();
|
|
62
66
|
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
|
|
@@ -165,6 +169,19 @@ function Lessons(props) {
|
|
|
165
169
|
}
|
|
166
170
|
}
|
|
167
171
|
}, [course]);
|
|
172
|
+
const handleOpenDialog = (0, react_1.useCallback)((row) => {
|
|
173
|
+
setDialog(row);
|
|
174
|
+
}, [setDialog]);
|
|
175
|
+
const handleDeleteRow = (0, react_1.useCallback)(() => {
|
|
176
|
+
switch (dialog.row) {
|
|
177
|
+
case types_1.RowType.SECTION:
|
|
178
|
+
ref.current.handleDeleteSection(dialog.section);
|
|
179
|
+
break;
|
|
180
|
+
case types_1.RowType.LESSON:
|
|
181
|
+
ref.current.handleDeleteLesson(dialog.section, dialog.lesson);
|
|
182
|
+
}
|
|
183
|
+
handleOpenDialog(null);
|
|
184
|
+
}, [dialog, handleOpenDialog]);
|
|
168
185
|
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.lessonTitle, classes.contrastColor), variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons", defaultMessage: "ui.editCourse.tab.lessons" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.contrastColor }, { children: "courses" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.type", defaultMessage: "ui.course.type", values: {
|
|
169
186
|
typeOfCourse: intl.formatMessage({
|
|
170
187
|
id: `ui.course.type.${course.type}`,
|
|
@@ -174,6 +191,6 @@ function Lessons(props) {
|
|
|
174
191
|
sectionsNumber: course.num_sections
|
|
175
192
|
} }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
|
|
176
193
|
lessonsNumber: course.num_lessons
|
|
177
|
-
} }) }))] })), (0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "primary", variant: "contained", disabled: isDisabled })] })), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ className: (0, classnames_1.default)(classes.tableContainer, classes.contrastBgColor) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ className: classes.table }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, Object.assign({ className: classes.tableHeader }, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { className: classes.cellWidth }), headerCells.map((cell, i) => ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: cell.className }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.tableHeaderTypography, variant: "overline" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i)))] }) })), (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-1" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { className: classes.tableBody }, { children: [sections.map((section, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(SectionRow_1.default, { course: course, provider: innerProvider, section: section, isNewRow: isNewRow && i + 1 === array.length, handleManageSection: handleManageSection }, i)) }), i))), outerProvider.placeholder] }))) }))] })) })) }))] }))] }));
|
|
194
|
+
} }) }))] })), (0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "primary", variant: "contained", disabled: isDisabled })] })), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ className: (0, classnames_1.default)(classes.tableContainer, classes.contrastBgColor) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ className: classes.table }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, Object.assign({ className: classes.tableHeader }, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { className: classes.cellWidth }), headerCells.map((cell, i) => ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: cell.className }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.tableHeaderTypography, variant: "overline" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i)))] }) })), (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-1" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { className: classes.tableBody }, { children: [sections.map((section, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(SectionRow_1.default, { course: course, provider: innerProvider, section: section, isNewRow: isNewRow && i + 1 === array.length, handleManageSection: handleManageSection, handleOpenDialog: handleOpenDialog, ref: ref }, i)) }), i))), outerProvider.placeholder] }))) }))] })) })) })), dialog && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleDeleteRow })] }))] }));
|
|
178
195
|
}
|
|
179
196
|
exports.default = (0, react_1.memo)(Lessons);
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { SCCourseLessonType, SCCourseSectionType } from '@selfcommunity/types';
|
|
1
2
|
export declare enum ActionLessonType {
|
|
2
3
|
ADD = "add",
|
|
3
4
|
RENAME = "rename",
|
|
@@ -12,3 +13,16 @@ export interface OptionsData {
|
|
|
12
13
|
new_comment_notification_enabled: boolean;
|
|
13
14
|
hide_member_count: boolean;
|
|
14
15
|
}
|
|
16
|
+
export declare enum RowType {
|
|
17
|
+
SECTION = "section",
|
|
18
|
+
LESSON = "lesson"
|
|
19
|
+
}
|
|
20
|
+
export interface DeleteRowProps {
|
|
21
|
+
row: RowType;
|
|
22
|
+
section: SCCourseSectionType;
|
|
23
|
+
lesson?: SCCourseLessonType;
|
|
24
|
+
}
|
|
25
|
+
export interface DeleteRowRef {
|
|
26
|
+
handleDeleteSection?: (section: SCCourseSectionType) => void;
|
|
27
|
+
handleDeleteLesson: (section: SCCourseSectionType, lesson: SCCourseLessonType) => void;
|
|
28
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ActionLessonType = void 0;
|
|
3
|
+
exports.RowType = exports.ActionLessonType = void 0;
|
|
4
4
|
var ActionLessonType;
|
|
5
5
|
(function (ActionLessonType) {
|
|
6
6
|
ActionLessonType["ADD"] = "add";
|
|
@@ -11,3 +11,8 @@ var ActionLessonType;
|
|
|
11
11
|
ActionLessonType["RENAME_UPDATE"] = "rename_update";
|
|
12
12
|
ActionLessonType["DELETE_UPDATE"] = "delete_update";
|
|
13
13
|
})(ActionLessonType = exports.ActionLessonType || (exports.ActionLessonType = {}));
|
|
14
|
+
var RowType;
|
|
15
|
+
(function (RowType) {
|
|
16
|
+
RowType["SECTION"] = "section";
|
|
17
|
+
RowType["LESSON"] = "lesson";
|
|
18
|
+
})(RowType = exports.RowType || (exports.RowType = {}));
|
|
@@ -164,6 +164,8 @@ function LessonCommentObjects(inProps) {
|
|
|
164
164
|
updated = [...commentsObject.comments, comment];
|
|
165
165
|
}
|
|
166
166
|
commentsObject.updateLessonComments([...updated]);
|
|
167
|
+
utils_1.LRUCache.set(react_core_1.SCCache.getLessonCommentCacheKey(lessonObject.id), updated);
|
|
168
|
+
utils_1.LRUCache.deleteKeysWithPrefix(react_core_1.SCCache.getLessonCommentsCachePrefixKeys(lessonObject.id));
|
|
167
169
|
};
|
|
168
170
|
/**
|
|
169
171
|
* Renders root object(if obj)
|
|
@@ -174,6 +176,6 @@ function LessonCommentObjects(inProps) {
|
|
|
174
176
|
if (!commentsObject.comments.length && commentsObject.isLoadingNext) {
|
|
175
177
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ count: 5 }, CommentsObjectSkeletonProps));
|
|
176
178
|
}
|
|
177
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: commentsObject.comments.length > 0 ? ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ height: '100%', dataLength: commentsObject.comments.length, next: handleNext, hasMoreNext: Boolean(commentsObject.next), loaderNext: (0, jsx_runtime_1.jsx)(LessonCommentObject_1.LessonCommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ ref: commentsEndRef }, { children: commentsObject.comments.map((c, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(LessonCommentObject_1.default, Object.assign({ commentObject: c, lessonObject: commentsObject.lessonObject, onDelete: (comment) => handleCommentsUpdate(comment, true), isEditing: (editing) => setIsEditing(editing) }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps }), c.id) }, index))) })) }))) : null }), !editing && ((0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, { id: `reply-lessonCommentObjects`, showAvatar: false, replyIcon:
|
|
179
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: commentsObject.comments.length > 0 ? ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ height: '100%', dataLength: commentsObject.comments.length, next: handleNext, hasMoreNext: Boolean(commentsObject.next), loaderNext: (0, jsx_runtime_1.jsx)(LessonCommentObject_1.LessonCommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ ref: commentsEndRef }, { children: commentsObject.comments.map((c, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(LessonCommentObject_1.default, Object.assign({ commentObject: c, lessonObject: commentsObject.lessonObject, onDelete: (comment) => handleCommentsUpdate(comment, true), isEditing: (editing) => setIsEditing(editing) }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps }), c.id) }, index))) })) }))) : null }), !editing && ((0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, { id: `reply-lessonCommentObjects`, showAvatar: false, replyIcon: true, editable: !commenting, onReply: handleCommentAction, EditorProps: { placeholder: intl.formatMessage(messages.commentEditorPlaceholder), uploadFile: true, uploadImage: false } }, replyKey))] }) })));
|
|
178
180
|
}
|
|
179
181
|
exports.default = LessonCommentObjects;
|
|
@@ -11,11 +11,13 @@ const react_core_1 = require("@selfcommunity/react-core");
|
|
|
11
11
|
const constants_1 = require("./constants");
|
|
12
12
|
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
|
|
13
13
|
const react_core_2 = require("@selfcommunity/react-core");
|
|
14
|
+
const Bullet_1 = tslib_1.__importDefault(require("../Bullet"));
|
|
14
15
|
const classes = {
|
|
15
16
|
root: `${constants_1.PREFIX}-root`,
|
|
16
17
|
empty: `${constants_1.PREFIX}-empty`,
|
|
17
18
|
accordion: `${constants_1.PREFIX}-accordion`,
|
|
18
19
|
summary: `${constants_1.PREFIX}-summary`,
|
|
20
|
+
nameWrapper: `${constants_1.PREFIX}-name-wrapper`,
|
|
19
21
|
details: `${constants_1.PREFIX}-details`,
|
|
20
22
|
circle: `${constants_1.PREFIX}-circle`,
|
|
21
23
|
link: `${constants_1.PREFIX}-link`
|
|
@@ -48,6 +50,8 @@ function AccordionLessons(inProps) {
|
|
|
48
50
|
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
|
|
49
51
|
// CONTEXTS
|
|
50
52
|
const scRoutingContext = (0, react_core_1.useSCRouting)();
|
|
53
|
+
// INTL
|
|
54
|
+
const intl = (0, react_intl_1.useIntl)();
|
|
51
55
|
// HANDLERS
|
|
52
56
|
const handleChange = (0, react_1.useCallback)((panel) => (_, newExpanded) => {
|
|
53
57
|
setExpanded(newExpanded ? panel : false);
|
|
@@ -55,8 +59,14 @@ function AccordionLessons(inProps) {
|
|
|
55
59
|
if (!course) {
|
|
56
60
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
|
|
57
61
|
}
|
|
58
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => ((0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.AccordionSummary, Object.assign({ className: classes.summary, expandIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })),
|
|
62
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => ((0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.AccordionSummary, Object.assign({ className: classes.summary, expandIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.nameWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), viewerJoinStatus !== types_1.SCCourseJoinStatusType.CREATOR && viewerJoinStatus !== types_1.SCCourseJoinStatusType.MANAGER && section.locked && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.accordionLessons.date", defaultMessage: "ui.course.accordionLessons.date", values: {
|
|
63
|
+
date: intl.formatDate(section.available_date, { day: 'numeric', month: 'numeric', year: 'numeric' }),
|
|
64
|
+
hour: intl.formatDate(section.available_date, { hour: 'numeric', minute: 'numeric' })
|
|
65
|
+
} }) }))] }))] })), !isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
|
|
59
66
|
lessonsNumber: section.lessons.length
|
|
60
|
-
} }) })))] })), section.lessons.map((lesson) => ((0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle })), course.join_status === null ||
|
|
67
|
+
} }) })))] })), section.lessons.map((lesson) => ((0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle })), course.join_status === null ||
|
|
68
|
+
viewerJoinStatus === types_1.SCCourseJoinStatusType.CREATOR ||
|
|
69
|
+
viewerJoinStatus === types_1.SCCourseJoinStatusType.MANAGER ||
|
|
70
|
+
lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: lesson.name })) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_2.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlLesson(course, section, lesson)), variant: "text", color: "inherit", className: classes.link }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: lesson.name }) })))] }), lesson.id)))] }), section.id)))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.empty }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
|
|
61
71
|
}
|
|
62
72
|
exports.default = AccordionLessons;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Box, Button, Icon, Stack, Typography } from '@mui/material';
|
|
2
|
+
import { Box, Button, Icon, Popover, Stack, Typography } from '@mui/material';
|
|
3
3
|
import { SCCoursePrivacyType } from '@selfcommunity/types';
|
|
4
4
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
5
5
|
import { PREFIX } from './constants';
|
|
6
|
-
import { memo,
|
|
6
|
+
import { memo, useCallback, useState } from 'react';
|
|
7
7
|
import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
|
|
8
8
|
import { SCCourseEditTabType } from '../../types';
|
|
9
9
|
import classNames from 'classnames';
|
|
@@ -13,6 +13,7 @@ const classes = {
|
|
|
13
13
|
outerWrapper: `${PREFIX}-header-outer-wrapper`,
|
|
14
14
|
innerWrapper: `${PREFIX}-header-inner-wrapper`,
|
|
15
15
|
iconWrapper: `${PREFIX}-header-icon-wrapper`,
|
|
16
|
+
buttonPopover: `${PREFIX}-header-button-popover`,
|
|
16
17
|
contrastColor: `${PREFIX}-contrast-color`
|
|
17
18
|
};
|
|
18
19
|
function getUrlEditDashboard(course) {
|
|
@@ -25,32 +26,36 @@ function getUrlEditDashboard(course) {
|
|
|
25
26
|
function HeaderCourseDashboard(props) {
|
|
26
27
|
// PROPS
|
|
27
28
|
const { course, hasAction = false } = props;
|
|
29
|
+
// STATES
|
|
30
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
31
|
+
const open = Boolean(anchorEl);
|
|
28
32
|
// CONTEXTS
|
|
29
33
|
const scRoutingContext = useSCRouting();
|
|
30
|
-
//
|
|
34
|
+
// INTL
|
|
31
35
|
const intl = useIntl();
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
36
|
+
// HANDLERS
|
|
37
|
+
const handleOpenPopover = useCallback((e) => {
|
|
38
|
+
setAnchorEl(e.currentTarget);
|
|
39
|
+
}, [setAnchorEl]);
|
|
40
|
+
const handlePopoverClose = useCallback(() => {
|
|
41
|
+
setAnchorEl(null);
|
|
42
|
+
}, [setAnchorEl]);
|
|
43
|
+
return (_jsxs(Box, Object.assign({ className: classes.header }, { children: [_jsx("img", { src: course.image_bigger, alt: course.image_bigger, className: classes.img }), _jsx(Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: course.name })), _jsxs(Stack, Object.assign({ className: classes.outerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classNames(classes.iconWrapper, classes.contrastColor) }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "public" })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.label", defaultMessage: "ui.course.label", values: {
|
|
44
|
+
privacy: intl.formatMessage({
|
|
45
|
+
id: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
|
|
46
|
+
defaultMessage: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
|
|
47
|
+
})
|
|
48
|
+
} }) }))] })), _jsxs(Stack, Object.assign({ className: classNames(classes.iconWrapper, classes.contrastColor) }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "courses" })), _jsx(Button, Object.assign({ variant: "text", color: "inherit", size: "small", className: classes.buttonPopover, onClick: handleOpenPopover }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.type", defaultMessage: "ui.course.type", values: {
|
|
49
|
+
typeOfCourse: intl.formatMessage({
|
|
50
|
+
id: `ui.course.type.${course.type}`,
|
|
51
|
+
defaultMessage: `ui.course.type.${course.type}`
|
|
52
|
+
})
|
|
53
|
+
} }) })) })), open && (_jsx(Popover, Object.assign({ open: true, anchorEl: anchorEl, anchorOrigin: {
|
|
54
|
+
vertical: 'bottom',
|
|
55
|
+
horizontal: 'left'
|
|
56
|
+
}, transformOrigin: {
|
|
57
|
+
vertical: 'top',
|
|
58
|
+
horizontal: 'left'
|
|
59
|
+
}, onClose: handlePopoverClose }, { children: _jsx(Box, Object.assign({ sx: { padding: '10px' } }, { children: _jsx(Typography, Object.assign({ component: "span", variant: "body2", sx: { whiteSpace: 'pre-line' } }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${course.type}.info`, defaultMessage: `ui.courseForm.${course.type}.info` }) })) })) })))] }))] })), hasAction && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
|
|
55
60
|
}
|
|
56
61
|
export default memo(HeaderCourseDashboard);
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DraggableProvided } from '@hello-pangea/dnd';
|
|
3
3
|
import { SCCourseLessonType, SCCourseSectionType, SCCourseType } from '@selfcommunity/types';
|
|
4
|
-
import { ActionLessonType } from '../types';
|
|
4
|
+
import { ActionLessonType, DeleteRowRef } from '../types';
|
|
5
5
|
interface LessonRowProps {
|
|
6
6
|
provider: DraggableProvided;
|
|
7
|
-
course: SCCourseType
|
|
7
|
+
course: SCCourseType;
|
|
8
8
|
section: SCCourseSectionType;
|
|
9
9
|
lesson: SCCourseLessonType;
|
|
10
10
|
isNewRow: boolean;
|
|
11
11
|
handleManageLesson: (lesson: SCCourseLessonType, type: ActionLessonType, newRow?: boolean) => void;
|
|
12
|
+
handleOpenDialog: () => void;
|
|
12
13
|
}
|
|
13
|
-
declare
|
|
14
|
-
declare const _default: import("react").MemoExoticComponent<typeof LessonRow>;
|
|
14
|
+
declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<LessonRowProps & import("react").RefAttributes<DeleteRowRef>>>;
|
|
15
15
|
export default _default;
|