@selfcommunity/react-ui 1.2.0-alpha.3 → 1.2.0-alpha.5
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/CategoryAutocomplete/CategoryAutocomplete.js +6 -5
- package/lib/cjs/components/CourseDashboard/Header.d.ts +2 -2
- package/lib/cjs/components/CourseDashboard/Header.js +4 -10
- package/lib/cjs/components/CourseDashboard/Student/ActionButton.js +6 -2
- package/lib/cjs/components/CourseDashboard/Student.js +6 -5
- package/lib/cjs/components/CourseDashboard/Teacher/Comments.js +3 -3
- package/lib/cjs/components/CourseDashboard/Teacher/Info.js +2 -2
- package/lib/cjs/components/CourseDashboard/Teacher.js +2 -2
- package/lib/cjs/components/CourseForm/CourseForm.js +11 -6
- package/lib/cjs/components/CourseForm/Edit.js +4 -4
- package/lib/cjs/components/CourseParticipantsButton/CourseParticipantsButton.js +3 -2
- package/lib/cjs/components/EditCourse/EditCourse.js +2 -2
- package/lib/cjs/components/EditCourse/Lessons/ChangeLessonStatus.js +10 -5
- package/lib/cjs/components/EditCourse/Lessons/FieldName.js +2 -2
- package/lib/cjs/components/EditCourse/Lessons/LessonRow.js +3 -3
- package/lib/cjs/components/EditCourse/Lessons/SectionRow.js +3 -3
- package/lib/cjs/components/EditCourse/Lessons.js +5 -4
- package/lib/cjs/components/EditCourse/Options/Skeleton.js +2 -2
- package/lib/cjs/components/EditCourse/Options/SwitchForm.js +2 -2
- package/lib/cjs/components/EditCourse/Options.js +2 -2
- package/lib/cjs/components/EditCourse/Status.js +3 -5
- package/lib/cjs/components/EditCourse/Users.js +2 -2
- package/lib/cjs/components/FeedObject/Contributors/Contributors.js +1 -1
- package/lib/cjs/components/PaywallsConfigurator/PaywallsConfigurator.js +1 -1
- package/lib/cjs/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js +2 -1
- package/lib/cjs/components/User/User.js +2 -2
- package/lib/cjs/shared/AccordionLessons/AccordionLessons.js +4 -4
- package/lib/cjs/shared/AddUsersButton/AddUsersButton.js +14 -6
- package/lib/cjs/shared/ConfirmDialog/ConfirmDialog.js +11 -7
- package/lib/cjs/shared/CourseUsersTable/ChangeUsersStatus.js +3 -5
- package/lib/cjs/shared/CourseUsersTable/CourseUsersTable.js +6 -4
- package/lib/cjs/shared/CourseUsersTable/SeeProgressButton.js +4 -3
- package/lib/cjs/types/course.d.ts +5 -0
- package/lib/cjs/utils/course.d.ts +2 -1
- package/lib/cjs/utils/course.js +9 -1
- package/lib/esm/components/CategoryAutocomplete/CategoryAutocomplete.js +7 -6
- package/lib/esm/components/CourseDashboard/Header.d.ts +2 -2
- package/lib/esm/components/CourseDashboard/Header.js +4 -10
- package/lib/esm/components/CourseDashboard/Student/ActionButton.js +6 -2
- package/lib/esm/components/CourseDashboard/Student.js +6 -5
- package/lib/esm/components/CourseDashboard/Teacher/Comments.js +3 -3
- package/lib/esm/components/CourseDashboard/Teacher/Info.js +2 -2
- package/lib/esm/components/CourseDashboard/Teacher.js +2 -2
- package/lib/esm/components/CourseForm/CourseForm.js +12 -7
- package/lib/esm/components/CourseForm/Edit.js +4 -4
- package/lib/esm/components/CourseParticipantsButton/CourseParticipantsButton.js +3 -2
- package/lib/esm/components/EditCourse/EditCourse.js +2 -2
- package/lib/esm/components/EditCourse/Lessons/ChangeLessonStatus.js +10 -5
- package/lib/esm/components/EditCourse/Lessons/FieldName.js +2 -2
- package/lib/esm/components/EditCourse/Lessons/LessonRow.js +4 -4
- package/lib/esm/components/EditCourse/Lessons/SectionRow.js +4 -4
- package/lib/esm/components/EditCourse/Lessons.js +5 -4
- package/lib/esm/components/EditCourse/Options/Skeleton.js +3 -3
- package/lib/esm/components/EditCourse/Options/SwitchForm.js +2 -2
- package/lib/esm/components/EditCourse/Options.js +2 -2
- package/lib/esm/components/EditCourse/Status.js +3 -4
- package/lib/esm/components/EditCourse/Users.js +2 -2
- package/lib/esm/components/FeedObject/Contributors/Contributors.js +1 -1
- package/lib/esm/components/PaywallsConfigurator/PaywallsConfigurator.js +1 -1
- package/lib/esm/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js +2 -1
- package/lib/esm/components/User/User.js +3 -3
- package/lib/esm/shared/AccordionLessons/AccordionLessons.js +4 -4
- package/lib/esm/shared/AddUsersButton/AddUsersButton.js +15 -7
- package/lib/esm/shared/ConfirmDialog/ConfirmDialog.js +12 -8
- package/lib/esm/shared/CourseUsersTable/ChangeUsersStatus.js +4 -6
- package/lib/esm/shared/CourseUsersTable/CourseUsersTable.js +7 -5
- package/lib/esm/shared/CourseUsersTable/SeeProgressButton.js +4 -3
- package/lib/esm/types/course.d.ts +5 -0
- package/lib/esm/utils/course.d.ts +2 -1
- package/lib/esm/utils/course.js +7 -0
- package/lib/umd/react-ui.js +1 -1
- package/package.json +5 -5
|
@@ -38,7 +38,8 @@ const classes = {
|
|
|
38
38
|
cellAlignCenter: `${constants_1.PREFIX}-cell-align-center`,
|
|
39
39
|
lessonEmptyStatus: `${constants_1.PREFIX}-lesson-empty-status`,
|
|
40
40
|
emptyStatusButton: `${constants_1.PREFIX}-empty-status-button`,
|
|
41
|
-
|
|
41
|
+
defaultContrastColor: `${constants_1.PREFIX}-default-contrast-color`,
|
|
42
|
+
paperContrastColor: `${constants_1.PREFIX}-paper-contrast-color`
|
|
42
43
|
};
|
|
43
44
|
function Lessons(props) {
|
|
44
45
|
// PROPS
|
|
@@ -187,10 +188,10 @@ function Lessons(props) {
|
|
|
187
188
|
}
|
|
188
189
|
handleOpenDialog(null);
|
|
189
190
|
}, [dialog, handleOpenDialog]);
|
|
190
|
-
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.
|
|
191
|
+
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.defaultContrastColor), 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.jsx)(CourseTypePopover_1.default, { course: course }), (0, jsx_runtime_1.jsx)(Status_1.default, { course: course, handleTabChange: handleTabChange })] })), sections.length === 0 && ((0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "courses", title: "ui.editCourse.tab.lessons.table.empty.title", description: "ui.editCourse.tab.lessons.table.empty.description", actions: (0, jsx_runtime_1.jsx)(AddButton_1.default, { className: classes.emptyStatusButton, label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "inherit", variant: "outlined" }), className: classes.lessonEmptyStatus })), sections.length > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.lessonsInnerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonsSections }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.paperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
|
|
191
192
|
sectionsNumber: course.num_sections
|
|
192
|
-
} }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.
|
|
193
|
+
} }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.paperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
|
|
193
194
|
lessonsNumber: course.num_lessons
|
|
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: classes.tableContainer }, { 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: (0, classnames_1.default)(classes.tableHeaderTypography, classes.
|
|
195
|
+
} }) }))] })), (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: classes.tableContainer }, { 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: (0, classnames_1.default)(classes.tableHeaderTypography, classes.paperContrastColor), 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 })] })))] }));
|
|
195
196
|
}
|
|
196
197
|
exports.default = (0, react_1.memo)(Lessons);
|
|
@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
4
|
const material_1 = require("@mui/material");
|
|
5
5
|
const constants_1 = require("../constants");
|
|
6
|
-
const react_1 = require("react");
|
|
7
6
|
const classes = {
|
|
7
|
+
optionsContainer: `${constants_1.PREFIX}-options-container`,
|
|
8
8
|
optionsWrapper: `${constants_1.PREFIX}-options-wrapper`,
|
|
9
9
|
optionsDivider: `${constants_1.PREFIX}-options-divider`,
|
|
10
10
|
optionsButtonWrapper: `${constants_1.PREFIX}-options-button-wrapper`
|
|
11
11
|
};
|
|
12
12
|
function OptionsSkeleton() {
|
|
13
|
-
return ((0, jsx_runtime_1.jsxs)(
|
|
13
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.optionsContainer }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsWrapper }, { children: Array.from(Array(3)).map((_, i) => ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ component: "fieldset", variant: "standard" }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, Object.assign({ component: "legend" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "52px", height: "21px" }) })), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Switch, {}), label: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "215px", height: "38px" }) })] }), i))) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.optionsDivider }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rounded", width: "133px", height: "33px" }) }))] })));
|
|
14
14
|
}
|
|
15
15
|
exports.default = OptionsSkeleton;
|
|
@@ -6,7 +6,7 @@ const react_1 = require("react");
|
|
|
6
6
|
const react_intl_1 = require("react-intl");
|
|
7
7
|
const constants_1 = require("../constants");
|
|
8
8
|
const classes = {
|
|
9
|
-
|
|
9
|
+
paperContrastColor: `${constants_1.PREFIX}-paper-contrast-color`
|
|
10
10
|
};
|
|
11
11
|
function SwitchForm(props) {
|
|
12
12
|
// PROPS
|
|
@@ -19,6 +19,6 @@ function SwitchForm(props) {
|
|
|
19
19
|
setValue(_checked);
|
|
20
20
|
handleChangeOptions(name, _checked);
|
|
21
21
|
}, [setValue]);
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ component: "fieldset", variant: "standard" }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, Object.assign({ component: "legend" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: title, defaultMessage: title }) })) })), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Switch, { color: "primary", checked: value, name: name, onChange: handleChange }), label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ component: "fieldset", variant: "standard" }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, Object.assign({ component: "legend" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.paperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: title, defaultMessage: title }) })) })), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Switch, { color: "primary", checked: value, name: name, onChange: handleChange }), label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.paperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: description, defaultMessage: description }) })) })] })));
|
|
23
23
|
}
|
|
24
24
|
exports.default = (0, react_1.memo)(SwitchForm);
|
|
@@ -17,7 +17,7 @@ const classes = {
|
|
|
17
17
|
optionsWrapper: `${constants_1.PREFIX}-options-wrapper`,
|
|
18
18
|
optionsDivider: `${constants_1.PREFIX}-options-divider`,
|
|
19
19
|
optionsButtonWrapper: `${constants_1.PREFIX}-options-button-wrapper`,
|
|
20
|
-
|
|
20
|
+
paperContrastColor: `${constants_1.PREFIX}-paper-contrast-color`
|
|
21
21
|
};
|
|
22
22
|
const OPTIONS = {
|
|
23
23
|
enforce_lessons_order: {
|
|
@@ -91,6 +91,6 @@ function Options(props) {
|
|
|
91
91
|
});
|
|
92
92
|
});
|
|
93
93
|
}, [course, tempOptions, setCanSave, setLoading]);
|
|
94
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.optionsContainer }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsWrapper }, { children: Object.entries(OPTIONS).map(([key, value], i) => ((0, jsx_runtime_1.jsx)(SwitchForm_1.default, { name: key, title: value.title, description: value.description, checked: course[key], handleChangeOptions: handleChange }, i))) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", disabled: !canSave, onClick: handleSubmit, loading: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1"
|
|
94
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.optionsContainer }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsWrapper }, { children: Object.entries(OPTIONS).map(([key, value], i) => ((0, jsx_runtime_1.jsx)(SwitchForm_1.default, { name: key, title: value.title, description: value.description, checked: course[key], handleChangeOptions: handleChange }, i))) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", disabled: !canSave, onClick: handleSubmit, loading: loading }, { 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.options.button.save", defaultMessage: "ui.editCourse.tab.options.button.save" }) })) })) }))] })));
|
|
95
95
|
}
|
|
96
96
|
exports.default = (0, react_1.memo)(Options);
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const tslib_1 = require("tslib");
|
|
4
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
4
|
const material_1 = require("@mui/material");
|
|
6
5
|
const react_intl_1 = require("react-intl");
|
|
7
6
|
const constants_1 = require("./constants");
|
|
8
7
|
const types_1 = require("@selfcommunity/types");
|
|
9
|
-
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
10
8
|
const react_1 = require("react");
|
|
11
9
|
const types_2 = require("../../types");
|
|
12
10
|
const classes = {
|
|
13
11
|
status: `${constants_1.PREFIX}-status`,
|
|
14
|
-
|
|
12
|
+
defaultContrastColor: `${constants_1.PREFIX}-default-contrast-color`
|
|
15
13
|
};
|
|
16
14
|
function Status(props) {
|
|
17
15
|
// STATES
|
|
@@ -22,12 +20,12 @@ function Status(props) {
|
|
|
22
20
|
const handleClick = (0, react_1.useCallback)(() => {
|
|
23
21
|
handleTabChange(null, types_2.SCCourseEditTabType.CUSTOMIZE);
|
|
24
22
|
}, [handleTabChange]);
|
|
25
|
-
return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "text", color: "inherit", onClick: handleClick }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: intl.formatMessage({ id: 'ui.editCourse.tab.lessons.status', defaultMessage: 'ui.editCourse.tab.lessons.status' }, {
|
|
23
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "text", color: "inherit", onClick: handleClick }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.defaultContrastColor }, { children: intl.formatMessage({ id: 'ui.editCourse.tab.lessons.status', defaultMessage: 'ui.editCourse.tab.lessons.status' }, {
|
|
26
24
|
status: intl.formatMessage({
|
|
27
25
|
id: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
|
|
28
26
|
defaultMessage: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
|
|
29
27
|
}),
|
|
30
28
|
b: (chunks) => ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "b", fontWeight: "bold" }, { children: chunks }), "ui.editCourse.tab.lessons.status.b"))
|
|
31
|
-
}) })) })), className:
|
|
29
|
+
}) })) })), className: classes.status }));
|
|
32
30
|
}
|
|
33
31
|
exports.default = Status;
|
|
@@ -22,7 +22,7 @@ const PubSub_1 = require("../../constants/PubSub");
|
|
|
22
22
|
const course_1 = require("../../types/course");
|
|
23
23
|
const classes = {
|
|
24
24
|
usersStatusWrapper: `${constants_1.PREFIX}-users-status-wrapper`,
|
|
25
|
-
|
|
25
|
+
defaultContrastColor: `${constants_1.PREFIX}-default-contrast-color`
|
|
26
26
|
};
|
|
27
27
|
const headerCells = [
|
|
28
28
|
{
|
|
@@ -127,7 +127,7 @@ function Users(props) {
|
|
|
127
127
|
});
|
|
128
128
|
});
|
|
129
129
|
}, [course, dispatch]);
|
|
130
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.
|
|
130
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.defaultContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.users.title", defaultMessage: "ui.editCourse.tab.users.title", values: { usersNumber: state.count } }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: [(0, jsx_runtime_1.jsx)(Status_1.default, { course: course, handleTabChange: handleTabChange }), (0, jsx_runtime_1.jsx)(AddUsersButton_1.default, { label: "ui.editCourse.tab.users.addUsersButton.label", endpoint: {
|
|
131
131
|
url: () => api_services_1.Endpoints.GetCourseSuggestedUsers.url({ id: course.id }),
|
|
132
132
|
method: api_services_1.Endpoints.GetCourseSuggestedUsers.method
|
|
133
133
|
}, onConfirm: handleConfirm })] })), (0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { state: state, dispatch: dispatch, course: course, endpointSearch: {
|
|
@@ -49,6 +49,6 @@ function ContributorsFeedObject(props) {
|
|
|
49
49
|
if (!contributorsObject.feedObject) {
|
|
50
50
|
return null;
|
|
51
51
|
}
|
|
52
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: contributorsObject.isLoadingNext && !openContributorsDialog ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, ContributorsSkeletonProps))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: contributorsObject.contributors.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "text", onClick: () => setOpenContributorsDialog(true), classes: { root: classes.btnParticipants }, color: "inherit" }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.contributors.participants", defaultMessage: "ui.feedObject.contributors.participants" }), ":", (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, Object.assign({}, rest, { children: [contributorsObject.contributors.map((c, i) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, i))), [...Array(Math.max(contributorsObject.total - contributorsObject.contributors.length, 0))].map((
|
|
52
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: contributorsObject.isLoadingNext && !openContributorsDialog ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, ContributorsSkeletonProps))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: contributorsObject.contributors.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "text", onClick: () => setOpenContributorsDialog(true), classes: { root: classes.btnParticipants }, color: "inherit" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "span", sx: { '&': { all: 'unset' } } }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.contributors.participants", defaultMessage: "ui.feedObject.contributors.participants" }), ":"] })), (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, Object.assign({}, rest, { children: [contributorsObject.contributors.map((c, i) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, i))), [...Array(Math.max(contributorsObject.total - contributorsObject.contributors.length, 0))].map((_x, i) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, {}, i)))] }))] })), openContributorsDialog && ((0, jsx_runtime_1.jsx)(BaseDialog_1.default, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.feedObject.contributors.title", id: "ui.feedObject.contributors.title", values: { total: contributorsObject.total } }), onClose: () => setOpenContributorsDialog(false), open: openContributorsDialog }, { children: contributorsObject.isLoadingNext ? ((0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 50 })) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: contributorsObject.contributors.length, next: contributorsObject.getNextPage(), hasMoreNext: Boolean(contributorsObject.next), loaderNext: (0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 30 }), height: 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.contributors.noOtherContributors", defaultMessage: "ui.feedObject.contributors.noOtherContributors" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: contributorsObject.contributors.map((c, i) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: c, sx: { m: 0 }, onClick: () => setOpenContributorsDialog(false) }, c.id) }, i))) }) }))) })))] })) : null })) }) })));
|
|
53
53
|
}
|
|
54
54
|
exports.default = ContributorsFeedObject;
|
|
@@ -244,7 +244,7 @@ function PaywallsConfigurator(inProps) {
|
|
|
244
244
|
setPendingValue(newValue);
|
|
245
245
|
}, disableCloseOnSelect: true, slots: {
|
|
246
246
|
popper: PopperComponent
|
|
247
|
-
},
|
|
247
|
+
}, renderValue: () => null, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.noProducts", defaultMessage: "ui.paywallsConfigurator.noProducts" }), renderOption: renderOption, options: getOptions, isOptionEqualToValue: (option, value) => option.id === value.id, getOptionLabel: (option) => option.name.toString(), renderInput: (params) => ((0, jsx_runtime_1.jsx)(FilterInputRoot, { disabled: loadingProducts || loading, ref: params.InputProps.ref, inputProps: params.inputProps, autoFocus: true, placeholder: intl.formatMessage({
|
|
248
248
|
id: 'ui.paywallsConfigurator.filterByName',
|
|
249
249
|
defaultMessage: 'ui.paywallsConfigurator.filterByName'
|
|
250
250
|
}) })) }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.paymentProductsPopperFooter }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", disableRipple: true, onClick: handleClose, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.popper.btnConfirm", defaultMessage: "ui.paywallsConfigurator.popper.btnConfirm" }) })) }))] }) })) })))] })] }))] }))) })));
|
|
@@ -30,6 +30,7 @@ const classes = {
|
|
|
30
30
|
messageTime: `${constants_1.PREFIX}-message-time`,
|
|
31
31
|
menuItem: `${constants_1.PREFIX}-menu-item`,
|
|
32
32
|
downloadButton: `${constants_1.PREFIX}-download-button`,
|
|
33
|
+
paperContrastColor: `${constants_1.PREFIX}-paper-contrast-color`,
|
|
33
34
|
dialogRoot: `${constants_1.PREFIX}-dialog-root`
|
|
34
35
|
};
|
|
35
36
|
const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
|
|
@@ -158,7 +159,7 @@ function PrivateMessageThreadItem(inProps) {
|
|
|
158
159
|
*/
|
|
159
160
|
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, getMouseEvents(mouseEvents.onMouseEnter, mouseEvents.onMouseLeave), rest, { secondaryAction: (isHovering || isMobile) &&
|
|
160
161
|
showMenuIcon &&
|
|
161
|
-
message.status !== types_1.SCPrivateMessageStatusType.HIDDEN && (0, jsx_runtime_1.jsx)(PrivateMessageSettingsIconButton_1.default, { onMenuItemDeleteClick: handleMenuItemClick }) }, { children: [message.group && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) !== message.sender.username && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "secondary", variant: "h4", className: classes.username }, { children: message.sender.username }))), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasFile && message.status !== types_1.SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.text }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message } }) }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.messageTime, color: "text.secondary" }, { children: `${intl.formatDate(message.created_at, {
|
|
162
|
+
message.status !== types_1.SCPrivateMessageStatusType.HIDDEN && (0, jsx_runtime_1.jsx)(PrivateMessageSettingsIconButton_1.default, { onMenuItemDeleteClick: handleMenuItemClick }) }, { children: [message.group && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) !== message.sender.username && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "secondary", variant: "h4", className: classes.username }, { children: message.sender.username }))), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasFile && message.status !== types_1.SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.text }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message }, className: classes.paperContrastColor }) }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.messageTime, classes.paperContrastColor), color: "text.secondary" }, { children: `${intl.formatDate(message.created_at, {
|
|
162
163
|
hour: 'numeric',
|
|
163
164
|
minute: 'numeric'
|
|
164
165
|
})}` }))] }), openDialog && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(types_1.SCMessageFileType.VIDEO)) ? ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ open: openDialog, onClose: () => setOpenDialog(false), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsx)(AutoPlayer_1.default, { url: message === null || message === void 0 ? void 0 : message.file.url, width: "100%" }) }))) : ((0, jsx_runtime_1.jsx)(Lightbox_1.default, { images: [{ src: message === null || message === void 0 ? void 0 : message.file.url, key: message.file.uuid }], onClose: () => setOpenDialog(false), toolbarButtons: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleDownload(message === null || message === void 0 ? void 0 : message.file), className: classes.downloadButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }), "download") })) }))] })));
|
|
@@ -25,7 +25,7 @@ const classes = {
|
|
|
25
25
|
avatar: `${constants_1.PREFIX}-avatar`,
|
|
26
26
|
staffBadgeLabel: `${constants_1.PREFIX}-staff-badge-label`,
|
|
27
27
|
groupAdminBadgeLabel: `${constants_1.PREFIX}-group-admin-badge-label`,
|
|
28
|
-
|
|
28
|
+
paperContrastColor: `${constants_1.PREFIX}-paper-contrast-color`
|
|
29
29
|
};
|
|
30
30
|
const Root = (0, material_1.styled)(BaseItemButton_1.default, {
|
|
31
31
|
name: constants_1.PREFIX,
|
|
@@ -102,6 +102,6 @@ function User(inProps) {
|
|
|
102
102
|
*/
|
|
103
103
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ elevation: elevation }, rest, { className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: buttonProps !== null && buttonProps !== void 0 ? buttonProps : (scUser.deleted
|
|
104
104
|
? { onClick: () => setOpenAlert(true) }
|
|
105
|
-
: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUser) }), image: badgeContent ? ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: badgeContent }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }) }))) : ((0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !hasBadge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }) }))), primary: (hasBadge && preferences) || isGroupAdmin ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [scUser.username, (0, jsx_runtime_1.jsx)(material_1.Chip, { component: "span", className: (0, classnames_1.default)(
|
|
105
|
+
: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUser) }), image: badgeContent ? ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: badgeContent }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }) }))) : ((0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !hasBadge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }) }))), primary: (hasBadge && preferences) || isGroupAdmin ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", className: classes.paperContrastColor }, { children: scUser.username })), (0, jsx_runtime_1.jsx)(material_1.Chip, { component: "span", className: (0, classnames_1.default)(isGroupAdmin ? classes.groupAdminBadgeLabel : classes.staffBadgeLabel), size: "small", label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", sx: { '&': { all: 'unset' } }, className: classes.paperContrastColor }, { children: isGroupAdmin ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.user.group.admin", id: "ui.user.group.admin" })) : (preferences[react_core_1.SCPreferences.STAFF_STAFF_BADGE_LABEL]) })) })] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", className: classes.paperContrastColor }, { children: scUser.username }))), secondary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", className: classes.paperContrastColor }, { children: secondary || (showFollowers ? `${intl.formatMessage(messages.userFollowers, { total: scUser.followers_counter })}` : scUser.description) })), actions: actions !== null && actions !== void 0 ? actions : renderAuthenticatedActions() })), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
|
|
106
106
|
}
|
|
107
107
|
exports.default = User;
|
|
@@ -22,7 +22,7 @@ const classes = {
|
|
|
22
22
|
details: `${constants_1.PREFIX}-details`,
|
|
23
23
|
circle: `${constants_1.PREFIX}-circle`,
|
|
24
24
|
link: `${constants_1.PREFIX}-link`,
|
|
25
|
-
|
|
25
|
+
paperContrastColor: `${constants_1.PREFIX}-paper-contrast-color`
|
|
26
26
|
};
|
|
27
27
|
const Root = (0, material_1.styled)(material_1.Box, {
|
|
28
28
|
name: constants_1.PREFIX,
|
|
@@ -53,14 +53,14 @@ function AccordionLessons(inProps) {
|
|
|
53
53
|
if (!course) {
|
|
54
54
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
|
|
55
55
|
}
|
|
56
|
-
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_more" }) }, { 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", className: classes.
|
|
56
|
+
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_more" }) }, { 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", className: classes.paperContrastColor }, { 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", className: classes.paperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.accordionLessons.date", defaultMessage: "ui.course.accordionLessons.date", values: {
|
|
57
57
|
date: intl.formatDate(section.available_date, { day: 'numeric', month: 'numeric', year: 'numeric' }),
|
|
58
58
|
hour: intl.formatDate(section.available_date, { hour: 'numeric', minute: 'numeric' })
|
|
59
|
-
} }) }))] }))] })), !isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1", className: classes.
|
|
59
|
+
} }) }))] }))] })), !isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1", className: classes.paperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
|
|
60
60
|
lessonsNumber: section.lessons.length
|
|
61
61
|
} }) })))] })), 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 ||
|
|
62
62
|
viewerJoinStatus === types_1.SCCourseJoinStatusType.CREATOR ||
|
|
63
63
|
viewerJoinStatus === types_1.SCCourseJoinStatusType.MANAGER ||
|
|
64
|
-
lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.
|
|
64
|
+
lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.paperContrastColor }, { 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, (0, course_1.getUrlLesson)(course, lesson, section)), variant: "text", color: "inherit", className: classes.link }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.paperContrastColor }, { children: lesson.name })) })))] }), lesson.id)))] }), section.id)))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: (0, classnames_1.default)(classes.empty, classes.paperContrastColor) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
|
|
65
65
|
}
|
|
66
66
|
exports.default = AccordionLessons;
|
|
@@ -15,11 +15,12 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
|
15
15
|
const PREFIX = 'SCAddUsersButton';
|
|
16
16
|
const classes = {
|
|
17
17
|
root: `${PREFIX}-root`,
|
|
18
|
+
defaultContrastColor: `${PREFIX}-default-contrast-color`,
|
|
18
19
|
dialogRoot: `${PREFIX}-dialog-root`,
|
|
19
20
|
dialogAutocompleteWrapper: `${PREFIX}-dialog-autocomplete-wrapper`,
|
|
20
21
|
dialogUserWrapper: `${PREFIX}-dialog-user-wrapper`,
|
|
21
22
|
dialogChipWrapper: `${PREFIX}-dialog-chip-wrapper`,
|
|
22
|
-
|
|
23
|
+
dialogPaperContrastColor: `${PREFIX}-dialog-paper-contrast-color`
|
|
23
24
|
};
|
|
24
25
|
const messages = (0, react_intl_1.defineMessages)({
|
|
25
26
|
placeholder: {
|
|
@@ -43,16 +44,18 @@ function AddUsersButton(inProps) {
|
|
|
43
44
|
props: inProps,
|
|
44
45
|
name: PREFIX
|
|
45
46
|
});
|
|
46
|
-
const { label, variant = '
|
|
47
|
+
const { label, variant = 'contained', color = 'inherit', size = 'small', endpoint = api_services_1.Endpoints.GetCourseSuggestedUsers, endpointQueryParams = { limit: Pagination_1.DEFAULT_PAGINATION_LIMIT, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET, search: '' }, onConfirm, className } = props, rest = tslib_1.__rest(props, ["label", "variant", "color", "size", "endpoint", "endpointQueryParams", "onConfirm", "className"]);
|
|
47
48
|
// STATES
|
|
48
49
|
const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
|
|
49
50
|
const [invited, setInvited] = (0, react_1.useState)([]);
|
|
50
51
|
const [suggested, setSuggested] = (0, react_1.useState)([]);
|
|
51
52
|
const [value, setValue] = (0, react_1.useState)('');
|
|
52
53
|
const [loading, setLoading] = (0, react_1.useState)(false);
|
|
54
|
+
// CONTEXTS
|
|
55
|
+
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
|
|
53
56
|
// HOOKS
|
|
54
57
|
const intl = (0, react_intl_1.useIntl)();
|
|
55
|
-
const
|
|
58
|
+
const theme = (0, material_1.useTheme)();
|
|
56
59
|
// CALLBACKS
|
|
57
60
|
const fetchUsers = (0, react_1.useCallback)((newValue) => {
|
|
58
61
|
setLoading(true);
|
|
@@ -128,9 +131,14 @@ function AddUsersButton(inProps) {
|
|
|
128
131
|
const handleDelete = (0, react_1.useCallback)((userToDelete) => {
|
|
129
132
|
setInvited((prev) => prev.filter((user) => user.id !== userToDelete.id));
|
|
130
133
|
}, [setInvited]);
|
|
131
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ onClick: handleToggleDialogOpen, variant: variant, color: color, size: size, className: (0, classnames_1.default)(classes.root, classes.
|
|
132
|
-
input: Object.assign({}, params.InputProps)
|
|
133
|
-
|
|
134
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ onClick: handleToggleDialogOpen, variant: variant, color: color, size: size, className: (0, classnames_1.default)(classes.root, classes.defaultContrastColor, className) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: label, defaultMessage: label }) })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: handleToggleDialogOpen, title: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.dialogPaperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.dialog.title", defaultMessage: "ui.addUserButton.dialog.title" }) })), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleConfirm, size: "medium", variant: "contained", autoFocus: true, disabled: !invited.length }, { 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.addUserButton.dialog.confirm", defaultMessage: "ui.addUserButton.dialog.confirm" }) })) })), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.dialogAutocompleteWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Autocomplete, { loading: loading, size: "small", multiple: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.username) || '...', isOptionEqualToValue: (option, value) => (option === null || option === void 0 ? void 0 : option.id) === value.id, loadingText: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.autocomplete.loading", defaultMessage: "ui.addUserButton.autocomplete.loading" }) })), noOptionsText: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.autocomplete.noResults", defaultMessage: "ui.addUserButton.autocomplete.noResults" }) })), renderValue: () => null, popupIcon: null, disableClearable: true, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ component: "li", flexDirection: "row", gap: "5px" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { children: option.username }))] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, slotProps: {
|
|
135
|
+
input: Object.assign(Object.assign({}, params.InputProps), { sx: {
|
|
136
|
+
'&::placeholder': {
|
|
137
|
+
color: theme.palette.getContrastText(theme.palette.background.paper)
|
|
138
|
+
},
|
|
139
|
+
color: theme.palette.getContrastText(theme.palette.background.paper)
|
|
140
|
+
} })
|
|
141
|
+
} }))) }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.dialogChipWrapper }, { children: invited.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { children: option.username })), onDelete: () => {
|
|
134
142
|
handleDelete(option);
|
|
135
143
|
} }, index))) }))] })) })))] }));
|
|
136
144
|
}
|
|
@@ -6,7 +6,7 @@ const material_1 = require("@mui/material");
|
|
|
6
6
|
const react_intl_1 = require("react-intl");
|
|
7
7
|
const PREFIX = 'SCConfirmDialog';
|
|
8
8
|
const classes = {
|
|
9
|
-
|
|
9
|
+
paperContrastColor: `${PREFIX}-paper-contrast-color`
|
|
10
10
|
};
|
|
11
11
|
const Root = (0, material_1.styled)(material_1.Card, {
|
|
12
12
|
name: PREFIX,
|
|
@@ -14,11 +14,15 @@ const Root = (0, material_1.styled)(material_1.Card, {
|
|
|
14
14
|
overridesResolver: (_props, styles) => styles.root
|
|
15
15
|
})(({ theme }) => ({
|
|
16
16
|
maxWidth: 800,
|
|
17
|
-
marginBottom: theme.spacing(2)
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
marginBottom: theme.spacing(2)
|
|
18
|
+
}));
|
|
19
|
+
const DialogRoot = (0, material_1.styled)(material_1.Dialog, {
|
|
20
|
+
name: PREFIX,
|
|
21
|
+
slot: 'DialogRoot',
|
|
22
|
+
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
23
|
+
})(({ theme }) => ({
|
|
24
|
+
[`& .${classes.paperContrastColor}`]: {
|
|
25
|
+
color: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? (0, material_1.lighten)(theme.palette.common.white, 0.5) : undefined
|
|
22
26
|
}
|
|
23
27
|
}));
|
|
24
28
|
function ConfirmDialog(props) {
|
|
@@ -45,6 +49,6 @@ function ConfirmDialog(props) {
|
|
|
45
49
|
/**
|
|
46
50
|
* Renders root object
|
|
47
51
|
*/
|
|
48
|
-
return ((0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsxs)(
|
|
52
|
+
return ((0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsxs)(DialogRoot, Object.assign({ open: open, onClose: handleClose }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, Object.assign({ className: classes.paperContrastColor }, { children: title || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) })), content && ((0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, Object.assign({ component: "div", className: classes.paperContrastColor }, { children: content })) })), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleClose }, { children: btnCancel || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.btnCancel", defaultMessage: "ui.confirmDialog.btnCancel" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleConfirm, variant: "contained", autoFocus: true, loading: isUpdating }, { children: btnConfirm || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.btnConfirm", defaultMessage: "ui.confirmDialog.btnConfirm" }) }))] })] })) }));
|
|
49
53
|
}
|
|
50
54
|
exports.default = ConfirmDialog;
|
|
@@ -9,11 +9,7 @@ const api_services_1 = require("@selfcommunity/api-services");
|
|
|
9
9
|
const utils_1 = require("@selfcommunity/utils");
|
|
10
10
|
const Errors_1 = require("../../constants/Errors");
|
|
11
11
|
const notistack_1 = require("notistack");
|
|
12
|
-
const constants_1 = require("./constants");
|
|
13
12
|
const OPTIONS = ['ui.editCourse.tab.users.table.select.joined', 'ui.editCourse.tab.users.table.select.manager'];
|
|
14
|
-
const classes = {
|
|
15
|
-
contrastColor: `${constants_1.PREFIX}-contrast-color`
|
|
16
|
-
};
|
|
17
13
|
function ChangeUserStatus(props) {
|
|
18
14
|
// PROPS
|
|
19
15
|
const { course, user } = props;
|
|
@@ -22,6 +18,8 @@ function ChangeUserStatus(props) {
|
|
|
22
18
|
const [loading, setLoading] = (0, react_1.useState)(false);
|
|
23
19
|
// CONTEXTS
|
|
24
20
|
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
|
|
21
|
+
// HOOKS
|
|
22
|
+
const theme = (0, material_1.useTheme)();
|
|
25
23
|
// EFFECTS
|
|
26
24
|
(0, react_1.useEffect)(() => {
|
|
27
25
|
setValue(`ui.editCourse.tab.users.table.select.${user.join_status || 'joined'}`);
|
|
@@ -56,6 +54,6 @@ function ChangeUserStatus(props) {
|
|
|
56
54
|
':hover': {
|
|
57
55
|
backgroundColor: 'unset'
|
|
58
56
|
}
|
|
59
|
-
} }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1",
|
|
57
|
+
} }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: option, defaultMessage: option }) })) })) }), i))) })));
|
|
60
58
|
}
|
|
61
59
|
exports.default = (0, react_1.memo)(ChangeUserStatus);
|
|
@@ -22,6 +22,7 @@ const course_1 = require("../../types/course");
|
|
|
22
22
|
const RemoveButton_1 = tslib_1.__importDefault(require("./RemoveButton"));
|
|
23
23
|
const ConfirmDialog_1 = tslib_1.__importDefault(require("../ConfirmDialog/ConfirmDialog"));
|
|
24
24
|
const course_2 = require("../../types/course");
|
|
25
|
+
const course_3 = require("../../utils/course");
|
|
25
26
|
const classes = {
|
|
26
27
|
root: `${constants_1.PREFIX}-root`,
|
|
27
28
|
search: `${constants_1.PREFIX}-search`,
|
|
@@ -31,7 +32,7 @@ const classes = {
|
|
|
31
32
|
progressWrapper: `${constants_1.PREFIX}-progress-wrapper`,
|
|
32
33
|
progress: `${constants_1.PREFIX}-progress`,
|
|
33
34
|
loadingButton: `${constants_1.PREFIX}-loading-button`,
|
|
34
|
-
|
|
35
|
+
paperContrastColor: `${constants_1.PREFIX}-paper-contrast-color`
|
|
35
36
|
};
|
|
36
37
|
const Root = (0, material_1.styled)(material_1.Box, {
|
|
37
38
|
name: constants_1.PREFIX,
|
|
@@ -55,6 +56,7 @@ function CourseUsersTable(inProps) {
|
|
|
55
56
|
const inputRef = (0, react_1.useRef)(null);
|
|
56
57
|
// CONTEXTS
|
|
57
58
|
const scUserContext = (0, react_core_1.useSCUser)();
|
|
59
|
+
const scRoutingContext = (0, react_core_1.useSCRouting)();
|
|
58
60
|
// INTL
|
|
59
61
|
const intl = (0, react_intl_1.useIntl)();
|
|
60
62
|
// HANDLERS
|
|
@@ -148,10 +150,10 @@ function CourseUsersTable(inProps) {
|
|
|
148
150
|
if (i === array.length - 1) {
|
|
149
151
|
return (0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "14%" }, i);
|
|
150
152
|
}
|
|
151
|
-
return ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: mode === course_1.SCCourseUsersTableModeType.DASHBOARD ? '20%' : '25%' }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.
|
|
153
|
+
return ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: mode === course_1.SCCourseUsersTableModeType.DASHBOARD ? '20%' : '25%' }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i));
|
|
152
154
|
}) }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [users.length > 0 &&
|
|
153
|
-
users.map((user, i) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: user.username, src: user.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.
|
|
155
|
+
users.map((user, i) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: user.username, src: user.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { children: user.username }))] })) }), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.progressWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.paperContrastColor }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === course_1.SCCourseUsersTableModeType.EDIT && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: user.join_status !== types_1.SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(ChangeUsersStatus_1.default, { course: course, user: user })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedDate, { value: mode === course_1.SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date() }) })) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedDate, { value: mode === course_1.SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date() }) })) }), mode === course_1.SCCourseUsersTableModeType.EDIT &&
|
|
154
156
|
user.join_status !== types_1.SCCourseJoinStatusType.CREATOR &&
|
|
155
|
-
scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RemoveButton_1.default, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === course_1.SCCourseUsersTableModeType.EDIT && (0, jsx_runtime_1.jsx)(material_1.TableCell, {})), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(SeeProgressButton_1.default, { course: course, user: user }) })), mode === course_1.SCCourseUsersTableModeType.REQUESTS && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RequestButton_1.default, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { editMode: mode !== course_1.SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0
|
|
157
|
+
scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RemoveButton_1.default, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === course_1.SCCourseUsersTableModeType.EDIT && (0, jsx_runtime_1.jsx)(material_1.TableCell, {})), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(SeeProgressButton_1.default, { course: course, user: user }) })), mode === course_1.SCCourseUsersTableModeType.REQUESTS && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RequestButton_1.default, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { editMode: mode !== course_1.SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && state.next && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0, className: classes.loadingButton, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && ((0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "face", title: value.length > 0 ? 'ui.courseUsersTable.empty.search.title' : emptyStatusTitle, description: value.length > 0 ? 'ui.courseUsersTable.empty.search.description' : emptyStatusDescription, actions: value.length === 0 && ((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, (0, course_3.getUrlEditDashboard)(course, course_2.SCCourseEditTabType.USERS)), size: "small", variant: "contained", color: "primary" }, { 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.courseUsersTable.empty.btn.label", defaultMessage: "ui.courseUsersTable.empty.btn.label" }) })) }))) })), dialog && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
|
|
156
158
|
}
|
|
157
159
|
exports.default = (0, react_1.memo)(CourseUsersTable);
|
|
@@ -20,7 +20,8 @@ const classes = {
|
|
|
20
20
|
infoInnerWrapper: `${constants_1.PREFIX}-info-inner-wrapper`,
|
|
21
21
|
avatarWrapper: `${constants_1.PREFIX}-avatar-wrapper`,
|
|
22
22
|
avatar: `${constants_1.PREFIX}-avatar`,
|
|
23
|
-
|
|
23
|
+
paperContrastColor: `${constants_1.PREFIX}-paper-contrast-color`,
|
|
24
|
+
dialogPaperContrastColor: `${constants_1.PREFIX}-dialog-paper-contrast-color`
|
|
24
25
|
};
|
|
25
26
|
const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
|
|
26
27
|
name: constants_1.PREFIX,
|
|
@@ -53,8 +54,8 @@ function SeeProgressButton(props) {
|
|
|
53
54
|
const handleToggleOpen = (0, react_1.useCallback)(() => {
|
|
54
55
|
setOpen((prev) => !prev);
|
|
55
56
|
}, [setOpen]);
|
|
56
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", color: "inherit", onClick: handleToggleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chevron_right" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", color: "inherit", onClick: handleToggleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.
|
|
57
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", color: "inherit", onClick: handleToggleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chevron_right" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", color: "inherit", onClick: handleToggleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.action.btn.label", defaultMessage: "ui.courseUsersTable.action.btn.label" }) })) }))), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: isMobile }, open: true, scroll: "paper", onClose: handleToggleOpen, title: intl.formatMessage({ id: 'ui.courseUsersTable.dialog.title', defaultMessage: 'ui.courseUsersTable.dialog.title' }), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.contentWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.infoOuterWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.infoInnerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!course.created_by.deleted && {
|
|
57
58
|
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, course.created_by)
|
|
58
|
-
}), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !course.created_by.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.
|
|
59
|
+
}), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !course.created_by.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.dialogPaperContrastColor }, { children: user.username }))] })), privateMessagingEnabled && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), variant: "contained", size: "small", color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.dialogPaperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.btn.label", defaultMessage: "ui.courseUsersTable.dialog.btn.label" }) })) })))] })), student ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.dialogPaperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text1", defaultMessage: "ui.courseUsersTable.dialog.info.text1", values: { lessonsCompleted: student.num_lessons_completed } }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" })), student ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.dialogPaperContrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text2", defaultMessage: "ui.courseUsersTable.dialog.info.text2", values: { courseCompleted: student.user_completion_rate } }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" }))] })), (0, jsx_runtime_1.jsx)(AccordionLessons_1.default, { course: student, viewerJoinStatus: course.join_status })] })) })))] }));
|
|
59
60
|
}
|
|
60
61
|
exports.default = (0, react_1.memo)(SeeProgressButton);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SCCourseLessonType, SCCourseSectionType, SCCourseType } from '@selfcommunity/types';
|
|
2
|
-
import { SCCourseGetUrlLessonData } from '../types/course';
|
|
2
|
+
import { SCCourseEditTabType, SCCourseGetUrlLessonData, SCDataUrlEditDashboard } from '../types/course';
|
|
3
3
|
export declare function isCourseNew(course: SCCourseType | null): boolean;
|
|
4
4
|
export declare function isCourseCompleted(course: SCCourseType | null): boolean;
|
|
5
5
|
declare enum unitType {
|
|
@@ -11,4 +11,5 @@ export declare function getDripDelayAndUnit(value: number): {
|
|
|
11
11
|
_unit: unitType;
|
|
12
12
|
};
|
|
13
13
|
export declare function getUrlLesson(course: SCCourseType, lesson: Partial<SCCourseLessonType>, section?: SCCourseSectionType): SCCourseGetUrlLessonData;
|
|
14
|
+
export declare function getUrlEditDashboard(course: SCCourseType, tab: SCCourseEditTabType): SCDataUrlEditDashboard;
|
|
14
15
|
export {};
|
package/lib/cjs/utils/course.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getUrlLesson = exports.getDripDelayAndUnit = exports.isCourseCompleted = exports.isCourseNew = void 0;
|
|
3
|
+
exports.getUrlEditDashboard = exports.getUrlLesson = exports.getDripDelayAndUnit = exports.isCourseCompleted = exports.isCourseNew = void 0;
|
|
4
4
|
const types_1 = require("@selfcommunity/types");
|
|
5
5
|
function isCourseNew(course) {
|
|
6
6
|
if (course && course.join_status === types_1.SCCourseJoinStatusType.JOINED) {
|
|
@@ -37,3 +37,11 @@ function getUrlLesson(course, lesson, section) {
|
|
|
37
37
|
};
|
|
38
38
|
}
|
|
39
39
|
exports.getUrlLesson = getUrlLesson;
|
|
40
|
+
function getUrlEditDashboard(course, tab) {
|
|
41
|
+
return {
|
|
42
|
+
id: course.id,
|
|
43
|
+
slug: course.slug,
|
|
44
|
+
tab
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
exports.getUrlEditDashboard = getUrlEditDashboard;
|