@selfcommunity/react-ui 0.10.2-courses.164 → 0.10.2-courses.166
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/EditCourse/Lessons/LessonRow.js +7 -2
- package/lib/cjs/components/EditCourse/Lessons/SectionRow.js +9 -4
- package/lib/cjs/components/UserCreatedCoursesWidget/UserCreatedCoursesWidget.d.ts +0 -5
- package/lib/cjs/components/UserCreatedCoursesWidget/UserCreatedCoursesWidget.js +2 -2
- package/lib/esm/components/EditCourse/Lessons/LessonRow.js +7 -2
- package/lib/esm/components/EditCourse/Lessons/SectionRow.js +9 -4
- package/lib/esm/components/UserCreatedCoursesWidget/UserCreatedCoursesWidget.d.ts +0 -5
- package/lib/esm/components/UserCreatedCoursesWidget/UserCreatedCoursesWidget.js +2 -2
- package/lib/umd/react-ui.js +1 -1
- package/package.json +8 -8
|
@@ -17,6 +17,7 @@ const react_core_1 = require("@selfcommunity/react-core");
|
|
|
17
17
|
const Errors_1 = require("../../../constants/Errors");
|
|
18
18
|
const types_1 = require("../types");
|
|
19
19
|
const hooks_1 = require("../hooks");
|
|
20
|
+
const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
|
|
20
21
|
const classes = {
|
|
21
22
|
cellWidth: `${constants_1.PREFIX}-cell-width`,
|
|
22
23
|
cellAlignRight: `${constants_1.PREFIX}-cell-align-right`,
|
|
@@ -37,13 +38,14 @@ function LessonRow(props) {
|
|
|
37
38
|
const { provider, course, section, lesson, isNewRow, handleManageLesson } = props;
|
|
38
39
|
// STATES
|
|
39
40
|
const [editMode, setEditMode] = (0, react_1.useState)(false);
|
|
41
|
+
const [open, setOpen] = (0, react_1.useState)(false);
|
|
40
42
|
// CONTEXTS
|
|
41
43
|
const scRoutingContext = (0, react_core_1.useSCRouting)();
|
|
42
44
|
// HOOKS
|
|
43
45
|
const { isDisabled } = (0, hooks_1.useDisabled)();
|
|
44
46
|
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
|
|
45
47
|
// HANDLERS
|
|
46
|
-
const handleAbleEditMode = (0, react_1.useCallback)(() => setTimeout(() => setEditMode(true)), [setEditMode]);
|
|
48
|
+
const handleAbleEditMode = (0, react_1.useCallback)(() => setTimeout(() => setEditMode(true), 100), [setEditMode]);
|
|
47
49
|
const handleDisableEditMode = (0, react_1.useCallback)(() => setEditMode(false), [setEditMode]);
|
|
48
50
|
const handleDeleteLesson = (0, react_1.useCallback)(() => {
|
|
49
51
|
api_services_1.CourseService.deleteCourseLesson(course.id, section.id, lesson.id)
|
|
@@ -62,11 +64,14 @@ function LessonRow(props) {
|
|
|
62
64
|
});
|
|
63
65
|
});
|
|
64
66
|
}, [course, section, lesson, handleManageLesson]);
|
|
67
|
+
const handleOpenDialog = (0, react_1.useCallback)(() => {
|
|
68
|
+
setOpen((prev) => !prev);
|
|
69
|
+
}, [setOpen]);
|
|
65
70
|
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: {
|
|
66
71
|
url: () => isNewRow
|
|
67
72
|
? api_services_1.Endpoints.CreateCourseLesson.url({ id: course.id, section_id: section.id })
|
|
68
73
|
: api_services_1.Endpoints.PatchCourseLesson.url({ id: course.id, section_id: section.id, lesson_id: lesson.id }),
|
|
69
74
|
method: isNewRow ? api_services_1.Endpoints.CreateCourseLesson.method : api_services_1.Endpoints.PatchCourseLesson.method
|
|
70
|
-
}, row: lesson, isNewRow: isNewRow, handleManageRow: handleManageLesson, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (0, jsx_runtime_1.
|
|
75
|
+
}, row: lesson, isNewRow: isNewRow, handleManageRow: handleManageLesson, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (0, jsx_runtime_1.jsxs)(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_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.view", defaultMessage: "ui.editCourse.tab.lessons.table.menu.view" }) })) })), (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" }) })) }))] }))] })), open && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: handleOpenDialog, onConfirm: handleDeleteLesson })] }))] })));
|
|
71
76
|
}
|
|
72
77
|
exports.default = (0, react_1.memo)(LessonRow);
|
|
@@ -20,6 +20,7 @@ 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"));
|
|
23
24
|
const classes = {
|
|
24
25
|
tableBodyIconWrapper: `${constants_1.PREFIX}-table-body-icon-wrapper`,
|
|
25
26
|
tableBodyAccordion: `${constants_1.PREFIX}-table-body-accordion`,
|
|
@@ -34,7 +35,8 @@ function SectionRow(props) {
|
|
|
34
35
|
// PROPS
|
|
35
36
|
const { course, provider, section, isNewRow, handleManageSection } = props;
|
|
36
37
|
// STATES
|
|
37
|
-
const [
|
|
38
|
+
const [expand, setExpand] = (0, react_1.useState)(true);
|
|
39
|
+
const [open, setOpen] = (0, react_1.useState)(false);
|
|
38
40
|
const [editMode, setEditMode] = (0, react_1.useState)(false);
|
|
39
41
|
const [lessons, setLessons] = (0, react_1.useState)([]);
|
|
40
42
|
// HOOKS
|
|
@@ -58,7 +60,7 @@ function SectionRow(props) {
|
|
|
58
60
|
};
|
|
59
61
|
}, []);
|
|
60
62
|
// HANDLERS
|
|
61
|
-
const handleExpandAccordion = (0, react_1.useCallback)(() =>
|
|
63
|
+
const handleExpandAccordion = (0, react_1.useCallback)(() => setExpand((prev) => !prev), [setExpand]);
|
|
62
64
|
const handleDragEnd = (0, react_1.useCallback)((e) => {
|
|
63
65
|
if (!e.destination || e.destination.index === e.source.index) {
|
|
64
66
|
return;
|
|
@@ -133,11 +135,14 @@ function SectionRow(props) {
|
|
|
133
135
|
}
|
|
134
136
|
}
|
|
135
137
|
}, [section, handleManageSection]);
|
|
136
|
-
|
|
138
|
+
const handleOpenDialog = (0, react_1.useCallback)(() => {
|
|
139
|
+
setOpen((prev) => !prev);
|
|
140
|
+
}, [setOpen]);
|
|
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: {
|
|
137
142
|
url: () => isNewRow
|
|
138
143
|
? api_services_1.Endpoints.CreateCourseSection.url({ id: course.id })
|
|
139
144
|
: api_services_1.Endpoints.PatchCourseSection.url({ id: course.id, section_id: section.id }),
|
|
140
145
|
method: isNewRow ? api_services_1.Endpoints.CreateCourseSection.method : api_services_1.Endpoints.PatchCourseSection.method
|
|
141
|
-
}, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: isDisabled ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: false, variant: "rectangular", width: "250px", height: "53px", sx: { margin: 'auto', borderRadius: '5px' } })) : ((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:
|
|
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: isDisabled ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: false, variant: "rectangular", width: "250px", height: "53px", sx: { margin: 'auto', borderRadius: '5px' } })) : ((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.jsxs)(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 }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })), open && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: handleOpenDialog, onConfirm: handleDeleteSection })] })) })] }));
|
|
142
147
|
}
|
|
143
148
|
exports.default = (0, react_1.memo)(SectionRow);
|
|
@@ -9,11 +9,6 @@ export interface UserCreatedCoursesWidgetProps extends VirtualScrollerItemProps,
|
|
|
9
9
|
* @default null
|
|
10
10
|
*/
|
|
11
11
|
userId: number;
|
|
12
|
-
/**
|
|
13
|
-
* Hides this component
|
|
14
|
-
* @default false
|
|
15
|
-
*/
|
|
16
|
-
autoHide?: boolean;
|
|
17
12
|
/**
|
|
18
13
|
* Limit the number of courses to show
|
|
19
14
|
* @default false
|
|
@@ -70,7 +70,7 @@ function UserCreatedCoursesWidget(inProps) {
|
|
|
70
70
|
props: inProps,
|
|
71
71
|
name: constants_1.PREFIX
|
|
72
72
|
});
|
|
73
|
-
const { userId,
|
|
73
|
+
const { userId, limit = 3, className, CourseProps = {}, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, DialogProps = {} } = props, rest = tslib_1.__rest(props, ["userId", "limit", "className", "CourseProps", "cacheStrategy", "onHeightChange", "onStateChange", "DialogProps"]);
|
|
74
74
|
// CONTEXT
|
|
75
75
|
const scUserContext = (0, react_core_1.useSCUser)();
|
|
76
76
|
const { preferences, features } = (0, react_core_1.useSCPreferences)();
|
|
@@ -140,7 +140,7 @@ function UserCreatedCoursesWidget(inProps) {
|
|
|
140
140
|
setOpenDialog((prev) => !prev);
|
|
141
141
|
};
|
|
142
142
|
// RENDER
|
|
143
|
-
if (!coursesEnabled || (
|
|
143
|
+
if (!coursesEnabled || (!state.count && state.initialized) || !userId) {
|
|
144
144
|
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
145
145
|
}
|
|
146
146
|
if (!state.initialized) {
|
|
@@ -14,6 +14,7 @@ import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
|
|
|
14
14
|
import { SCOPE_SC_UI } from '../../../constants/Errors';
|
|
15
15
|
import { ActionLessonType } from '../types';
|
|
16
16
|
import { useDisabled } from '../hooks';
|
|
17
|
+
import ConfirmDialog from '../../../shared/ConfirmDialog/ConfirmDialog';
|
|
17
18
|
const classes = {
|
|
18
19
|
cellWidth: `${PREFIX}-cell-width`,
|
|
19
20
|
cellAlignRight: `${PREFIX}-cell-align-right`,
|
|
@@ -34,13 +35,14 @@ function LessonRow(props) {
|
|
|
34
35
|
const { provider, course, section, lesson, isNewRow, handleManageLesson } = props;
|
|
35
36
|
// STATES
|
|
36
37
|
const [editMode, setEditMode] = useState(false);
|
|
38
|
+
const [open, setOpen] = useState(false);
|
|
37
39
|
// CONTEXTS
|
|
38
40
|
const scRoutingContext = useSCRouting();
|
|
39
41
|
// HOOKS
|
|
40
42
|
const { isDisabled } = useDisabled();
|
|
41
43
|
const { enqueueSnackbar } = useSnackbar();
|
|
42
44
|
// HANDLERS
|
|
43
|
-
const handleAbleEditMode = useCallback(() => setTimeout(() => setEditMode(true)), [setEditMode]);
|
|
45
|
+
const handleAbleEditMode = useCallback(() => setTimeout(() => setEditMode(true), 100), [setEditMode]);
|
|
44
46
|
const handleDisableEditMode = useCallback(() => setEditMode(false), [setEditMode]);
|
|
45
47
|
const handleDeleteLesson = useCallback(() => {
|
|
46
48
|
CourseService.deleteCourseLesson(course.id, section.id, lesson.id)
|
|
@@ -59,11 +61,14 @@ function LessonRow(props) {
|
|
|
59
61
|
});
|
|
60
62
|
});
|
|
61
63
|
}, [course, section, lesson, handleManageLesson]);
|
|
64
|
+
const handleOpenDialog = useCallback(() => {
|
|
65
|
+
setOpen((prev) => !prev);
|
|
66
|
+
}, [setOpen]);
|
|
62
67
|
return (_jsxs(TableRow, Object.assign({}, provider.draggableProps, { ref: provider.innerRef }, { children: [_jsx(TableCell, { width: "4%" }), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, provider.dragHandleProps, { className: classNames(classes.cellWidth, classes.cellPadding) }, { children: _jsx(Stack, Object.assign({ className: classes.tableBodyIconWrapper }, { children: _jsx(Icon, Object.assign({ color: "disabled" }, { children: "drag" })) })) })), _jsx(TableCell, { children: _jsx(FieldName, { endpoint: {
|
|
63
68
|
url: () => isNewRow
|
|
64
69
|
? Endpoints.CreateCourseLesson.url({ id: course.id, section_id: section.id })
|
|
65
70
|
: Endpoints.PatchCourseLesson.url({ id: course.id, section_id: section.id, lesson_id: lesson.id }),
|
|
66
71
|
method: isNewRow ? Endpoints.CreateCourseLesson.method : Endpoints.PatchCourseLesson.method
|
|
67
|
-
}, row: lesson, isNewRow: isNewRow, handleManageRow: handleManageLesson, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), _jsx(TableCell, {}),
|
|
72
|
+
}, row: lesson, isNewRow: isNewRow, handleManageRow: handleManageLesson, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), _jsx(TableCell, {}), _jsxs(TableCell, Object.assign({ className: classes.cellAlignRight }, { children: [_jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(ChangeLessonStatus, { course: course, section: section, lesson: lesson, disabled: isDisabled }), _jsxs(MenuRow, Object.assign({ disabled: isDisabled }, { children: [_jsx(MenuItem, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, getUrlLesson(course, section, lesson)) }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.edit", defaultMessage: "ui.editCourse.tab.lessons.table.menu.edit" }) })) })), _jsx(MenuItem, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlLesson(course, section, lesson)) }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.view", defaultMessage: "ui.editCourse.tab.lessons.table.menu.view" }) })) })), _jsx(MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), _jsx(MenuItem, Object.assign({ onClick: handleOpenDialog }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })), open && _jsx(ConfirmDialog, { open: true, onClose: handleOpenDialog, onConfirm: handleDeleteLesson })] }))] })));
|
|
68
73
|
}
|
|
69
74
|
export default memo(LessonRow);
|
|
@@ -17,6 +17,7 @@ import { SCCourseLessonTypologyType } from '@selfcommunity/types';
|
|
|
17
17
|
import { CourseService, Endpoints } from '@selfcommunity/api-services';
|
|
18
18
|
import { ActionLessonType } from '../types';
|
|
19
19
|
import { useDisabled } from '../hooks';
|
|
20
|
+
import ConfirmDialog from '../../../shared/ConfirmDialog/ConfirmDialog';
|
|
20
21
|
const classes = {
|
|
21
22
|
tableBodyIconWrapper: `${PREFIX}-table-body-icon-wrapper`,
|
|
22
23
|
tableBodyAccordion: `${PREFIX}-table-body-accordion`,
|
|
@@ -31,7 +32,8 @@ function SectionRow(props) {
|
|
|
31
32
|
// PROPS
|
|
32
33
|
const { course, provider, section, isNewRow, handleManageSection } = props;
|
|
33
34
|
// STATES
|
|
34
|
-
const [
|
|
35
|
+
const [expand, setExpand] = useState(true);
|
|
36
|
+
const [open, setOpen] = useState(false);
|
|
35
37
|
const [editMode, setEditMode] = useState(false);
|
|
36
38
|
const [lessons, setLessons] = useState([]);
|
|
37
39
|
// HOOKS
|
|
@@ -55,7 +57,7 @@ function SectionRow(props) {
|
|
|
55
57
|
};
|
|
56
58
|
}, []);
|
|
57
59
|
// HANDLERS
|
|
58
|
-
const handleExpandAccordion = useCallback(() =>
|
|
60
|
+
const handleExpandAccordion = useCallback(() => setExpand((prev) => !prev), [setExpand]);
|
|
59
61
|
const handleDragEnd = useCallback((e) => {
|
|
60
62
|
if (!e.destination || e.destination.index === e.source.index) {
|
|
61
63
|
return;
|
|
@@ -130,11 +132,14 @@ function SectionRow(props) {
|
|
|
130
132
|
}
|
|
131
133
|
}
|
|
132
134
|
}, [section, handleManageSection]);
|
|
133
|
-
|
|
135
|
+
const handleOpenDialog = useCallback(() => {
|
|
136
|
+
setOpen((prev) => !prev);
|
|
137
|
+
}, [setOpen]);
|
|
138
|
+
return (_jsxs(Fragment, { children: [_jsxs(TableRow, Object.assign({}, provider.draggableProps, { ref: provider.innerRef, className: classes.tableBodyAccordion }, { children: [_jsx(TableCell, Object.assign({ component: "th", scope: "row" }, provider.dragHandleProps, { className: classNames(classes.cellWidth, classes.cellPadding) }, { children: _jsxs(Stack, Object.assign({ className: classes.tableBodyIconWrapper }, { children: [_jsx(IconButton, Object.assign({ "aria-label": "expand row", size: "small", onClick: handleExpandAccordion }, { children: expand ? _jsx(Icon, { children: "expand_less" }) : _jsx(Icon, { children: "expand_more" }) })), _jsx(Icon, Object.assign({ color: "disabled" }, { children: "drag" }))] })) })), _jsx(TableCell, { children: _jsx(FieldName, { endpoint: {
|
|
134
139
|
url: () => isNewRow
|
|
135
140
|
? Endpoints.CreateCourseSection.url({ id: course.id })
|
|
136
141
|
: Endpoints.PatchCourseSection.url({ id: course.id, section_id: section.id }),
|
|
137
142
|
method: isNewRow ? Endpoints.CreateCourseSection.method : Endpoints.PatchCourseSection.method
|
|
138
|
-
}, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), _jsx(TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: isDisabled ? (_jsx(Skeleton, { animation: false, variant: "rectangular", width: "250px", height: "53px", sx: { margin: 'auto', borderRadius: '5px' } })) : (_jsx(LessonReleaseMenu, { course: course, section: section })) })), _jsx(TableCell, Object.assign({ className: classes.cellAlignRight }, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), _jsxs(MenuRow, Object.assign({ disabled: isDisabled }, { children: [_jsx(MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), _jsx(MenuItem, Object.assign({ onClick:
|
|
143
|
+
}, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), _jsx(TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: isDisabled ? (_jsx(Skeleton, { animation: false, variant: "rectangular", width: "250px", height: "53px", sx: { margin: 'auto', borderRadius: '5px' } })) : (_jsx(LessonReleaseMenu, { course: course, section: section })) })), _jsx(TableCell, Object.assign({ className: classes.cellAlignRight }, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), _jsxs(MenuRow, Object.assign({ disabled: isDisabled }, { children: [_jsx(MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), _jsx(MenuItem, Object.assign({ onClick: handleOpenDialog }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), _jsx(TableRow, { children: _jsxs(TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: [_jsx(Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(Table, { children: _jsx(Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(LessonRow, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })), open && _jsx(ConfirmDialog, { open: true, onClose: handleOpenDialog, onConfirm: handleDeleteSection })] })) })] }));
|
|
139
144
|
}
|
|
140
145
|
export default memo(SectionRow);
|
|
@@ -9,11 +9,6 @@ export interface UserCreatedCoursesWidgetProps extends VirtualScrollerItemProps,
|
|
|
9
9
|
* @default null
|
|
10
10
|
*/
|
|
11
11
|
userId: number;
|
|
12
|
-
/**
|
|
13
|
-
* Hides this component
|
|
14
|
-
* @default false
|
|
15
|
-
*/
|
|
16
|
-
autoHide?: boolean;
|
|
17
12
|
/**
|
|
18
13
|
* Limit the number of courses to show
|
|
19
14
|
* @default false
|
|
@@ -68,7 +68,7 @@ export default function UserCreatedCoursesWidget(inProps) {
|
|
|
68
68
|
props: inProps,
|
|
69
69
|
name: PREFIX
|
|
70
70
|
});
|
|
71
|
-
const { userId,
|
|
71
|
+
const { userId, limit = 3, className, CourseProps = {}, cacheStrategy = CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, DialogProps = {} } = props, rest = __rest(props, ["userId", "limit", "className", "CourseProps", "cacheStrategy", "onHeightChange", "onStateChange", "DialogProps"]);
|
|
72
72
|
// CONTEXT
|
|
73
73
|
const scUserContext = useSCUser();
|
|
74
74
|
const { preferences, features } = useSCPreferences();
|
|
@@ -138,7 +138,7 @@ export default function UserCreatedCoursesWidget(inProps) {
|
|
|
138
138
|
setOpenDialog((prev) => !prev);
|
|
139
139
|
};
|
|
140
140
|
// RENDER
|
|
141
|
-
if (!coursesEnabled || (
|
|
141
|
+
if (!coursesEnabled || (!state.count && state.initialized) || !userId) {
|
|
142
142
|
return _jsx(HiddenPlaceholder, {});
|
|
143
143
|
}
|
|
144
144
|
if (!state.initialized) {
|