@selfcommunity/react-ui 0.10.2-courses.190 → 0.10.2-courses.191
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/Course/Course.js +2 -2
- package/lib/cjs/components/CourseForm/CourseForm.d.ts +5 -0
- package/lib/cjs/components/CourseForm/CourseForm.js +10 -5
- package/lib/cjs/components/CourseFormDialog/CourseFormDialog.js +12 -2
- package/lib/cjs/components/Courses/Courses.js +3 -9
- package/lib/cjs/components/EditCourse/Lessons/SectionRow.js +1 -1
- package/lib/cjs/components/EditCourse/Lessons.js +29 -24
- package/lib/esm/components/Course/Course.js +2 -2
- package/lib/esm/components/CourseForm/CourseForm.d.ts +5 -0
- package/lib/esm/components/CourseForm/CourseForm.js +12 -7
- package/lib/esm/components/CourseFormDialog/CourseFormDialog.js +13 -3
- package/lib/esm/components/Courses/Courses.js +3 -9
- package/lib/esm/components/EditCourse/Lessons/SectionRow.js +2 -2
- package/lib/esm/components/EditCourse/Lessons.js +19 -14
- package/lib/umd/react-ui.js +1 -1
- package/package.json +8 -8
|
@@ -160,7 +160,7 @@ function Course(inProps) {
|
|
|
160
160
|
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
161
161
|
}), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !((_b = scCourse.created_by) === null || _b === void 0 ? void 0 : _b.community_badge), smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCourse.name, src: (_c = scCourse.created_by) === null || _c === void 0 ? void 0 : _c.avatar, className: classes.previewAvatar }) })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.previewCreator }, (!((_d = scCourse.created_by) === null || _d === void 0 ? void 0 : _d.deleted) && {
|
|
162
162
|
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
163
|
-
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.previewInfo }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }),
|
|
163
|
+
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.previewInfo }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), ' - ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.previewCategory }, { children: scCourse.categories.map((category) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: category.name }, category.id))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.previewProgress }, { children: renderProgress() }))] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) })) })))] })));
|
|
164
164
|
}
|
|
165
165
|
else {
|
|
166
166
|
contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, elevation: 0, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet &&
|
|
@@ -172,7 +172,7 @@ function Course(inProps) {
|
|
|
172
172
|
? 'warning'
|
|
173
173
|
: 'secondary', label: chipLabel, className: classes.chip }))] })), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!userProfileSnippet && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!((_f = scCourse.created_by) === null || _f === void 0 ? void 0 : _f.deleted) && {
|
|
174
174
|
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
175
|
-
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: (_g = scCourse.created_by) === null || _g === void 0 ? void 0 : _g.username })) }))), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.name })) }))] }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: userProfileSnippet ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !scCourse.hide_member_count && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.userProfileSnippet.students", defaultMessage: "ui.course.userProfileSnippet.students", values: { students: scCourse.member_count } })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }),
|
|
175
|
+
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: (_g = scCourse.created_by) === null || _g === void 0 ? void 0 : _g.username })) }))), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.name })) }))] }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: userProfileSnippet ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !scCourse.hide_member_count && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.userProfileSnippet.students", defaultMessage: "ui.course.userProfileSnippet.students", values: { students: scCourse.member_count } })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), ' - ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })) }), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) }))) }));
|
|
176
176
|
}
|
|
177
177
|
/**
|
|
178
178
|
* Renders root object
|
|
@@ -22,6 +22,11 @@ export interface CourseFormProps extends BoxProps {
|
|
|
22
22
|
* @default `SCCourseFormStepType.GENERAL`
|
|
23
23
|
*/
|
|
24
24
|
step?: SCCourseFormStepType;
|
|
25
|
+
/**
|
|
26
|
+
* On step change callback function
|
|
27
|
+
* @default null
|
|
28
|
+
*/
|
|
29
|
+
onStepChange?: (step: SCCourseFormStepType, type: SCCourseType) => void;
|
|
25
30
|
/**
|
|
26
31
|
* On error callback function
|
|
27
32
|
* @default null
|
|
@@ -54,8 +54,11 @@ const classes = {
|
|
|
54
54
|
privacySection: `${constants_1.PREFIX}-privacy-section`,
|
|
55
55
|
privacySectionInfo: `${constants_1.PREFIX}-privacy-section-info`,
|
|
56
56
|
selected: `${constants_1.PREFIX}-selected`,
|
|
57
|
+
disabled: `${constants_1.PREFIX}-disabled`,
|
|
57
58
|
stepOne: `${constants_1.PREFIX}-step-one`,
|
|
58
59
|
stepTwo: `${constants_1.PREFIX}-step-two`,
|
|
60
|
+
stepCustomization: `${constants_1.PREFIX}-step-customization`,
|
|
61
|
+
cardTitle: `${constants_1.PREFIX}-card-title`,
|
|
59
62
|
title: `${constants_1.PREFIX}-title`,
|
|
60
63
|
contrastColor: `${constants_1.PREFIX}-contrast-color`
|
|
61
64
|
};
|
|
@@ -104,7 +107,7 @@ function CourseForm(inProps) {
|
|
|
104
107
|
props: inProps,
|
|
105
108
|
name: constants_1.PREFIX
|
|
106
109
|
});
|
|
107
|
-
const { className, onSuccess, onError, course = null, step = Course_1.SCCourseFormStepType.GENERAL } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "course", "step"]);
|
|
110
|
+
const { className, onSuccess, onError, course = null, step = Course_1.SCCourseFormStepType.GENERAL, onStepChange } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "course", "step", "onStepChange"]);
|
|
108
111
|
// INTL
|
|
109
112
|
const intl = (0, react_intl_1.useIntl)();
|
|
110
113
|
const initialFieldState = {
|
|
@@ -123,10 +126,11 @@ function CourseForm(inProps) {
|
|
|
123
126
|
const [error, setError] = (0, react_1.useState)({});
|
|
124
127
|
const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
|
|
125
128
|
// PREFERENCES
|
|
126
|
-
const
|
|
129
|
+
const { preferences } = (0, react_core_1.useSCPreferences)();
|
|
130
|
+
const courseAdvancedEnabled = (0, react_1.useMemo)(() => preferences[react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ADVANCED_ENABLED].value, [preferences]);
|
|
127
131
|
const _backgroundCover = Object.assign({}, (field.imageOriginal
|
|
128
132
|
? { background: `url('${field.imageOriginal}') center / cover` }
|
|
129
|
-
: { background: `url('${
|
|
133
|
+
: { background: `url('${preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
|
|
130
134
|
const handleChangeCover = (0, react_1.useCallback)((cover) => {
|
|
131
135
|
setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginalFile']: cover })));
|
|
132
136
|
const reader = new FileReader();
|
|
@@ -145,6 +149,7 @@ function CourseForm(inProps) {
|
|
|
145
149
|
*/
|
|
146
150
|
const handleChangeStep = (newStep) => {
|
|
147
151
|
setStep(newStep);
|
|
152
|
+
onStepChange(newStep, field.type);
|
|
148
153
|
};
|
|
149
154
|
/**
|
|
150
155
|
* Formats categories object to a specific format needed in the form body
|
|
@@ -249,11 +254,11 @@ function CourseForm(inProps) {
|
|
|
249
254
|
/**
|
|
250
255
|
* Renders root object
|
|
251
256
|
*/
|
|
252
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === Course_1.SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === Course_1.SCCourseFormStepType.GENERAL && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.
|
|
257
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === Course_1.SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === Course_1.SCCourseFormStepType.GENERAL && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }, { [classes.disabled]: !courseAdvancedEnabled && option !== types_1.SCCourseTypologyType.SELF }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "subtitle2", className: classes.cardTitle }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }), !courseAdvancedEnabled && option !== types_1.SCCourseTypologyType.SELF && ((0, jsx_runtime_1.jsx)(material_1.Chip, { variant: "outlined", color: "warning", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.comingSoon.chip", defaultMessage: "ui.courseForm.comingSoon.chip" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [course && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: (0, classnames_1.default)(classes.form, _step === Course_1.SCCourseFormStepType.CUSTOMIZATION ? classes.stepCustomization : undefined) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadCourseCover_1.default, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
|
|
253
258
|
endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Course_1.COURSE_TITLE_MAX_LENGTH - field.name.length }))
|
|
254
259
|
}, error: Boolean(field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
|
|
255
260
|
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Course_1.COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : Course_1.COURSE_DESCRIPTION_MAX_LENGTH })))
|
|
256
|
-
}, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && (0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === Course_1.SCCourseFormStepType.GENERAL
|
|
261
|
+
}, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && (0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.actions, _step === Course_1.SCCourseFormStepType.CUSTOMIZATION ? classes.stepCustomization : undefined) }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === Course_1.SCCourseFormStepType.GENERAL
|
|
257
262
|
? !field.type || Object.keys(error).length !== 0
|
|
258
263
|
: _step === Course_1.SCCourseFormStepType.CUSTOMIZATION &&
|
|
259
264
|
(!field.name ||
|
|
@@ -43,7 +43,15 @@ function CourseFormDialog(inProps) {
|
|
|
43
43
|
props: inProps,
|
|
44
44
|
name: constants_1.PREFIX
|
|
45
45
|
});
|
|
46
|
-
const { className, open = true, onClose, CourseFormComponentProps = {
|
|
46
|
+
const { className, open = true, onClose, CourseFormComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "CourseFormComponentProps"]);
|
|
47
|
+
// STATE
|
|
48
|
+
const [step, setStep] = (0, react_1.useState)(Course_1.SCCourseFormStepType.GENERAL);
|
|
49
|
+
const [type, setType] = (0, react_1.useState)('');
|
|
50
|
+
//HANDLERS
|
|
51
|
+
const handleStepTypeChange = (step, type) => {
|
|
52
|
+
setStep(step);
|
|
53
|
+
setType(type);
|
|
54
|
+
};
|
|
47
55
|
const handleSuccess = (0, react_1.useCallback)((course) => {
|
|
48
56
|
var _a;
|
|
49
57
|
(_a = CourseFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(CourseFormComponentProps, course);
|
|
@@ -52,6 +60,8 @@ function CourseFormDialog(inProps) {
|
|
|
52
60
|
/**
|
|
53
61
|
* Renders root object
|
|
54
62
|
*/
|
|
55
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (CourseFormComponentProps === null || CourseFormComponentProps === void 0 ? void 0 : CourseFormComponentProps.course) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.title.edit", defaultMessage: "ui.courseForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id:
|
|
63
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (CourseFormComponentProps === null || CourseFormComponentProps === void 0 ? void 0 : CourseFormComponentProps.course) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.title.edit", defaultMessage: "ui.courseForm.title.edit" })) : step === Course_1.SCCourseFormStepType.GENERAL ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.title.general", defaultMessage: "ui.courseForm.title.general" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.title.customization", defaultMessage: "ui.courseForm.title.customization", values: {
|
|
64
|
+
courseType: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${type}.title`, defaultMessage: `ui.courseForm.${type}.title` })
|
|
65
|
+
} })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(CourseForm_1.default, Object.assign({}, CourseFormComponentProps, { onStepChange: handleStepTypeChange, onSuccess: handleSuccess })) })));
|
|
56
66
|
}
|
|
57
67
|
exports.default = CourseFormDialog;
|
|
@@ -105,12 +105,6 @@ function Courses(inProps) {
|
|
|
105
105
|
const contentAvailability = react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY in preferences && preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
|
|
106
106
|
const onlyStaffEnabled = (0, react_1.useMemo)(() => { var _a; return (_a = preferences[react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ONLY_STAFF_ENABLED]) === null || _a === void 0 ? void 0 : _a.value; }, [preferences]);
|
|
107
107
|
const canCreateCourse = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_course; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
|
|
108
|
-
const endpoint = (0, react_1.useMemo)(() => {
|
|
109
|
-
if (showManagedCourses) {
|
|
110
|
-
return api_services_1.Endpoints.GetJoinedCourses;
|
|
111
|
-
}
|
|
112
|
-
return api_services_1.Endpoints.SearchCourses;
|
|
113
|
-
}, [showManagedCourses]);
|
|
114
108
|
// CONST
|
|
115
109
|
const authUserId = scUserContext.user ? scUserContext.user.id : null;
|
|
116
110
|
const theme = (0, material_1.useTheme)();
|
|
@@ -130,8 +124,8 @@ function Courses(inProps) {
|
|
|
130
124
|
const fetchCourses = () => {
|
|
131
125
|
return api_services_1.http
|
|
132
126
|
.request({
|
|
133
|
-
url:
|
|
134
|
-
method:
|
|
127
|
+
url: api_services_1.Endpoints.SearchCourses.url({}),
|
|
128
|
+
method: api_services_1.Endpoints.SearchCourses.method,
|
|
135
129
|
params: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (_categories.length && { categories: JSON.stringify(_categories) })), (query && { search: query })), (showManagedCourses && { statuses: JSON.stringify(['creator', 'manager']) })), (showMine && { statuses: JSON.stringify(['joined', 'manager']) }))
|
|
136
130
|
})
|
|
137
131
|
.then((res) => {
|
|
@@ -183,7 +177,7 @@ function Courses(inProps) {
|
|
|
183
177
|
return api_services_1.http
|
|
184
178
|
.request({
|
|
185
179
|
url: next,
|
|
186
|
-
method:
|
|
180
|
+
method: api_services_1.Endpoints.SearchCourses.method
|
|
187
181
|
})
|
|
188
182
|
.then((res) => {
|
|
189
183
|
setCourses([...courses, ...res.data.results]);
|
|
@@ -143,6 +143,6 @@ function SectionRow(props, ref) {
|
|
|
143
143
|
? api_services_1.Endpoints.CreateCourseSection.url({ id: course.id })
|
|
144
144
|
: api_services_1.Endpoints.PatchCourseSection.url({ id: course.id, section_id: section.id }),
|
|
145
145
|
method: isNewRow ? api_services_1.Endpoints.CreateCourseSection.method : api_services_1.Endpoints.PatchCourseSection.method
|
|
146
|
-
}, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: (0, jsx_runtime_1.jsx)(LessonReleaseMenu_1.default, { course: course, section: section }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: () => handleOpenDialog({ row: types_2.RowType.SECTION, section }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.Table, { children: (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(LessonRow_1.default, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson, handleOpenDialog: () => handleOpenDialog({ row: types_2.RowType.LESSON, section, lesson }), ref: innerRef }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })) })) })] }));
|
|
146
|
+
}, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), course.type !== types_1.SCCourseTypologyType.SELF && ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: (0, jsx_runtime_1.jsx)(LessonReleaseMenu_1.default, { course: course, section: section }) }))), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: () => handleOpenDialog({ row: types_2.RowType.SECTION, section }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.Table, { children: (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(LessonRow_1.default, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson, handleOpenDialog: () => handleOpenDialog({ row: types_2.RowType.LESSON, section, lesson }), ref: innerRef }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })) })) })] }));
|
|
147
147
|
}
|
|
148
148
|
exports.default = (0, react_1.memo)((0, react_1.forwardRef)(SectionRow));
|
|
@@ -6,6 +6,7 @@ const react_intl_1 = require("react-intl");
|
|
|
6
6
|
const constants_1 = require("./constants");
|
|
7
7
|
const react_1 = require("react");
|
|
8
8
|
const dnd_1 = require("@hello-pangea/dnd");
|
|
9
|
+
const types_1 = require("@selfcommunity/types");
|
|
9
10
|
const api_services_1 = require("@selfcommunity/api-services");
|
|
10
11
|
const utils_1 = require("@selfcommunity/utils");
|
|
11
12
|
const Errors_1 = require("../../constants/Errors");
|
|
@@ -15,7 +16,7 @@ const Status_1 = tslib_1.__importDefault(require("./Status"));
|
|
|
15
16
|
const EmptyStatus_1 = tslib_1.__importDefault(require("../../shared/EmptyStatus"));
|
|
16
17
|
const AddButton_1 = tslib_1.__importDefault(require("./Lessons/AddButton"));
|
|
17
18
|
const SectionRow_1 = tslib_1.__importDefault(require("./Lessons/SectionRow"));
|
|
18
|
-
const
|
|
19
|
+
const types_2 = require("./types");
|
|
19
20
|
const hooks_1 = require("./hooks");
|
|
20
21
|
const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
|
|
21
22
|
const CourseTypePopover_1 = tslib_1.__importDefault(require("../../shared/CourseTypePopover"));
|
|
@@ -39,20 +40,6 @@ const classes = {
|
|
|
39
40
|
emptyStatusButton: `${constants_1.PREFIX}-empty-status-button`,
|
|
40
41
|
contrastColor: `${constants_1.PREFIX}-contrast-color`
|
|
41
42
|
};
|
|
42
|
-
const headerCells = [
|
|
43
|
-
{
|
|
44
|
-
className: undefined,
|
|
45
|
-
id: 'ui.editCourse.tab.lessons.table.header.lessonName'
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
className: classes.cellAlignCenter,
|
|
49
|
-
id: 'ui.editCourse.tab.lessons.table.header.calendar'
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
className: classes.cellAlignRight,
|
|
53
|
-
id: 'ui.editCourse.tab.lessons.table.header.actions'
|
|
54
|
-
}
|
|
55
|
-
];
|
|
56
43
|
function Lessons(props) {
|
|
57
44
|
// PROPS
|
|
58
45
|
const { course, setCourse, handleTabChange } = props;
|
|
@@ -73,6 +60,24 @@ function Lessons(props) {
|
|
|
73
60
|
}, [course]);
|
|
74
61
|
// MEMOS
|
|
75
62
|
const isNewRow = (0, react_1.useMemo)(() => { var _a; return sections.length > ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length); }, [course, sections]);
|
|
63
|
+
const headerCells = (0, react_1.useMemo)(() => [
|
|
64
|
+
{
|
|
65
|
+
className: undefined,
|
|
66
|
+
id: 'ui.editCourse.tab.lessons.table.header.lessonName'
|
|
67
|
+
},
|
|
68
|
+
...(course.type !== types_1.SCCourseTypologyType.SELF
|
|
69
|
+
? [
|
|
70
|
+
{
|
|
71
|
+
className: classes.cellAlignCenter,
|
|
72
|
+
id: 'ui.editCourse.tab.lessons.table.header.calendar'
|
|
73
|
+
}
|
|
74
|
+
]
|
|
75
|
+
: []),
|
|
76
|
+
{
|
|
77
|
+
className: classes.cellAlignRight,
|
|
78
|
+
id: 'ui.editCourse.tab.lessons.table.header.actions'
|
|
79
|
+
}
|
|
80
|
+
], [course]);
|
|
76
81
|
// FUNCTIONS
|
|
77
82
|
const getSection = (0, react_1.useCallback)((id) => {
|
|
78
83
|
return {
|
|
@@ -112,12 +117,12 @@ function Lessons(props) {
|
|
|
112
117
|
}, [setSections]);
|
|
113
118
|
const handleManageSection = (0, react_1.useCallback)((section, type, newRow = false) => {
|
|
114
119
|
switch (type) {
|
|
115
|
-
case
|
|
120
|
+
case types_2.ActionLessonType.ADD: {
|
|
116
121
|
const newSection = Object.assign(Object.assign({}, section), { lessons: [] });
|
|
117
122
|
setCourse(Object.assign(Object.assign({}, course), { num_sections: course.num_sections + 1, sections: [...course.sections, newSection] }));
|
|
118
123
|
break;
|
|
119
124
|
}
|
|
120
|
-
case
|
|
125
|
+
case types_2.ActionLessonType.RENAME:
|
|
121
126
|
setCourse(Object.assign(Object.assign({}, course), { sections: course.sections.map((prevSection) => {
|
|
122
127
|
if (prevSection.id === section.id) {
|
|
123
128
|
return Object.assign(Object.assign({}, prevSection), { name: section.name });
|
|
@@ -125,7 +130,7 @@ function Lessons(props) {
|
|
|
125
130
|
return prevSection;
|
|
126
131
|
}) }));
|
|
127
132
|
break;
|
|
128
|
-
case
|
|
133
|
+
case types_2.ActionLessonType.DELETE: {
|
|
129
134
|
if (newRow) {
|
|
130
135
|
setCourse(Object.assign(Object.assign({}, course), { sections: course.sections.filter((prevSection) => prevSection.id !== section.id) }));
|
|
131
136
|
}
|
|
@@ -134,7 +139,7 @@ function Lessons(props) {
|
|
|
134
139
|
}
|
|
135
140
|
break;
|
|
136
141
|
}
|
|
137
|
-
case
|
|
142
|
+
case types_2.ActionLessonType.UPDATE:
|
|
138
143
|
setCourse(Object.assign(Object.assign({}, course), { sections: course.sections.map((prevSection) => {
|
|
139
144
|
if (prevSection.id === section.id) {
|
|
140
145
|
return Object.assign(Object.assign({}, prevSection), { lessons: section.lessons });
|
|
@@ -142,7 +147,7 @@ function Lessons(props) {
|
|
|
142
147
|
return prevSection;
|
|
143
148
|
}) }));
|
|
144
149
|
break;
|
|
145
|
-
case type.endsWith(
|
|
150
|
+
case type.endsWith(types_2.ActionLessonType.UPDATE) && type: {
|
|
146
151
|
if (newRow) {
|
|
147
152
|
setCourse(Object.assign(Object.assign({}, course), { sections: course.sections.map((prevSection) => {
|
|
148
153
|
if (prevSection.id === section.id) {
|
|
@@ -153,10 +158,10 @@ function Lessons(props) {
|
|
|
153
158
|
}
|
|
154
159
|
else {
|
|
155
160
|
let numLessons = course.num_lessons;
|
|
156
|
-
if (type ===
|
|
161
|
+
if (type === types_2.ActionLessonType.ADD_UPDATE) {
|
|
157
162
|
numLessons = course.num_lessons + 1;
|
|
158
163
|
}
|
|
159
|
-
else if (type ===
|
|
164
|
+
else if (type === types_2.ActionLessonType.DELETE_UPDATE) {
|
|
160
165
|
numLessons = course.num_lessons - 1;
|
|
161
166
|
}
|
|
162
167
|
setCourse(Object.assign(Object.assign({}, course), { num_lessons: numLessons, sections: course.sections.map((prevSection) => {
|
|
@@ -174,10 +179,10 @@ function Lessons(props) {
|
|
|
174
179
|
}, [setDialog]);
|
|
175
180
|
const handleDeleteRow = (0, react_1.useCallback)(() => {
|
|
176
181
|
switch (dialog.row) {
|
|
177
|
-
case
|
|
182
|
+
case types_2.RowType.SECTION:
|
|
178
183
|
ref.current.handleDeleteSection(dialog.section);
|
|
179
184
|
break;
|
|
180
|
-
case
|
|
185
|
+
case types_2.RowType.LESSON:
|
|
181
186
|
ref.current.handleDeleteLesson(dialog.section, dialog.lesson);
|
|
182
187
|
}
|
|
183
188
|
handleOpenDialog(null);
|
|
@@ -158,7 +158,7 @@ export default function Course(inProps) {
|
|
|
158
158
|
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
159
159
|
}), { children: _jsx(UserAvatar, Object.assign({ hide: !((_b = scCourse.created_by) === null || _b === void 0 ? void 0 : _b.community_badge), smaller: true }, { children: _jsx(Avatar, { alt: scCourse.name, src: (_c = scCourse.created_by) === null || _c === void 0 ? void 0 : _c.avatar, className: classes.previewAvatar }) })) }))] })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(Link, Object.assign({ className: classes.previewCreator }, (!((_d = scCourse.created_by) === null || _d === void 0 ? void 0 : _d.deleted) && {
|
|
160
160
|
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
161
|
-
}), { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), _jsxs(Typography, Object.assign({ className: classes.previewInfo }, { children: [_jsx(FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }),
|
|
161
|
+
}), { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), _jsxs(Typography, Object.assign({ className: classes.previewInfo }, { children: [_jsx(FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), ' - ', _jsx(FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })), _jsx(Box, Object.assign({ className: classes.previewCategory }, { children: scCourse.categories.map((category) => (_jsx(Chip, { size: "small", label: category.name }, category.id))) })), _jsx(Box, Object.assign({ className: classes.previewProgress }, { children: renderProgress() }))] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ variant: "outlined", size: "small", component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) })) })))] })));
|
|
162
162
|
}
|
|
163
163
|
else {
|
|
164
164
|
contentObj = (_jsx(SnippetRoot, { ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, elevation: 0, className: classes.snippetRoot, image: _jsxs(Box, Object.assign({ className: classes.snippetImage }, { children: [_jsx(Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet &&
|
|
@@ -170,7 +170,7 @@ export default function Course(inProps) {
|
|
|
170
170
|
? 'warning'
|
|
171
171
|
: 'secondary', label: chipLabel, className: classes.chip }))] })), primary: _jsxs(_Fragment, { children: [!userProfileSnippet && (_jsx(Link, Object.assign({}, (!((_f = scCourse.created_by) === null || _f === void 0 ? void 0 : _f.deleted) && {
|
|
172
172
|
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
173
|
-
}), { children: _jsx(Typography, Object.assign({ component: "span" }, { children: (_g = scCourse.created_by) === null || _g === void 0 ? void 0 : _g.username })) }))), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.name })) }))] }), secondary: _jsx(_Fragment, { children: userProfileSnippet ? (_jsx(_Fragment, { children: !scCourse.hide_member_count && (_jsx(FormattedMessage, { id: "ui.course.userProfileSnippet.students", defaultMessage: "ui.course.userProfileSnippet.students", values: { students: scCourse.member_count } })) })) : (_jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }),
|
|
173
|
+
}), { children: _jsx(Typography, Object.assign({ component: "span" }, { children: (_g = scCourse.created_by) === null || _g === void 0 ? void 0 : _g.username })) }))), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.name })) }))] }), secondary: _jsx(_Fragment, { children: userProfileSnippet ? (_jsx(_Fragment, { children: !scCourse.hide_member_count && (_jsx(FormattedMessage, { id: "ui.course.userProfileSnippet.students", defaultMessage: "ui.course.userProfileSnippet.students", values: { students: scCourse.member_count } })) })) : (_jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), ' - ', _jsx(FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })) }), actions: actions !== null && actions !== void 0 ? actions : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) }))) }));
|
|
174
174
|
}
|
|
175
175
|
/**
|
|
176
176
|
* Renders root object
|
|
@@ -22,6 +22,11 @@ export interface CourseFormProps extends BoxProps {
|
|
|
22
22
|
* @default `SCCourseFormStepType.GENERAL`
|
|
23
23
|
*/
|
|
24
24
|
step?: SCCourseFormStepType;
|
|
25
|
+
/**
|
|
26
|
+
* On step change callback function
|
|
27
|
+
* @default null
|
|
28
|
+
*/
|
|
29
|
+
onStepChange?: (step: SCCourseFormStepType, type: SCCourseType) => void;
|
|
25
30
|
/**
|
|
26
31
|
* On error callback function
|
|
27
32
|
* @default null
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { LoadingButton } from '@mui/lab';
|
|
4
|
-
import { Box, CardActionArea, Card, CardContent, FormGroup, Paper, TextField, Typography } from '@mui/material';
|
|
4
|
+
import { Box, CardActionArea, Card, CardContent, FormGroup, Paper, TextField, Typography, Chip } from '@mui/material';
|
|
5
5
|
import { styled } from '@mui/material/styles';
|
|
6
6
|
import { useThemeProps } from '@mui/system';
|
|
7
7
|
import { CourseService, formatHttpErrorCode } from '@selfcommunity/api-services';
|
|
@@ -10,7 +10,7 @@ import { SCCoursePrivacyType, SCCourseTypologyType } from '@selfcommunity/types'
|
|
|
10
10
|
import { Logger } from '@selfcommunity/utils';
|
|
11
11
|
import classNames from 'classnames';
|
|
12
12
|
import PubSub from 'pubsub-js';
|
|
13
|
-
import { Fragment, useCallback, useState } from 'react';
|
|
13
|
+
import { Fragment, useCallback, useMemo, useState } from 'react';
|
|
14
14
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
15
15
|
import { SCOPE_SC_UI } from '../../constants/Errors';
|
|
16
16
|
import { SCCourseEventType, SCTopicType } from '../../constants/PubSub';
|
|
@@ -52,8 +52,11 @@ const classes = {
|
|
|
52
52
|
privacySection: `${PREFIX}-privacy-section`,
|
|
53
53
|
privacySectionInfo: `${PREFIX}-privacy-section-info`,
|
|
54
54
|
selected: `${PREFIX}-selected`,
|
|
55
|
+
disabled: `${PREFIX}-disabled`,
|
|
55
56
|
stepOne: `${PREFIX}-step-one`,
|
|
56
57
|
stepTwo: `${PREFIX}-step-two`,
|
|
58
|
+
stepCustomization: `${PREFIX}-step-customization`,
|
|
59
|
+
cardTitle: `${PREFIX}-card-title`,
|
|
57
60
|
title: `${PREFIX}-title`,
|
|
58
61
|
contrastColor: `${PREFIX}-contrast-color`
|
|
59
62
|
};
|
|
@@ -102,7 +105,7 @@ export default function CourseForm(inProps) {
|
|
|
102
105
|
props: inProps,
|
|
103
106
|
name: PREFIX
|
|
104
107
|
});
|
|
105
|
-
const { className, onSuccess, onError, course = null, step = SCCourseFormStepType.GENERAL } = props, rest = __rest(props, ["className", "onSuccess", "onError", "course", "step"]);
|
|
108
|
+
const { className, onSuccess, onError, course = null, step = SCCourseFormStepType.GENERAL, onStepChange } = props, rest = __rest(props, ["className", "onSuccess", "onError", "course", "step", "onStepChange"]);
|
|
106
109
|
// INTL
|
|
107
110
|
const intl = useIntl();
|
|
108
111
|
const initialFieldState = {
|
|
@@ -121,10 +124,11 @@ export default function CourseForm(inProps) {
|
|
|
121
124
|
const [error, setError] = useState({});
|
|
122
125
|
const [openDialog, setOpenDialog] = useState(false);
|
|
123
126
|
// PREFERENCES
|
|
124
|
-
const
|
|
127
|
+
const { preferences } = useSCPreferences();
|
|
128
|
+
const courseAdvancedEnabled = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_COURSES_ADVANCED_ENABLED].value, [preferences]);
|
|
125
129
|
const _backgroundCover = Object.assign({}, (field.imageOriginal
|
|
126
130
|
? { background: `url('${field.imageOriginal}') center / cover` }
|
|
127
|
-
: { background: `url('${
|
|
131
|
+
: { background: `url('${preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
|
|
128
132
|
const handleChangeCover = useCallback((cover) => {
|
|
129
133
|
setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginalFile']: cover })));
|
|
130
134
|
const reader = new FileReader();
|
|
@@ -143,6 +147,7 @@ export default function CourseForm(inProps) {
|
|
|
143
147
|
*/
|
|
144
148
|
const handleChangeStep = (newStep) => {
|
|
145
149
|
setStep(newStep);
|
|
150
|
+
onStepChange(newStep, field.type);
|
|
146
151
|
};
|
|
147
152
|
/**
|
|
148
153
|
* Formats categories object to a specific format needed in the form body
|
|
@@ -247,11 +252,11 @@ export default function CourseForm(inProps) {
|
|
|
247
252
|
/**
|
|
248
253
|
* Renders root object
|
|
249
254
|
*/
|
|
250
|
-
return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, Object.assign({ className: _step === SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.GENERAL && (_jsx(_Fragment, { children: Object.values(SCCourseTypologyType).map((option, index) => (_jsx(Card, Object.assign({ className: classNames(classes.card, { [classes.selected]: option === field.type }) }, { children: _jsx(CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: _jsxs(CardContent, { children: [
|
|
255
|
+
return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, Object.assign({ className: _step === SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.GENERAL && (_jsx(_Fragment, { children: Object.values(SCCourseTypologyType).map((option, index) => (_jsx(Card, Object.assign({ className: classNames(classes.card, { [classes.selected]: option === field.type }, { [classes.disabled]: !courseAdvancedEnabled && option !== SCCourseTypologyType.SELF }) }, { children: _jsx(CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: _jsxs(CardContent, { children: [_jsxs(Typography, Object.assign({ variant: "subtitle2", className: classes.cardTitle }, { children: [_jsx(FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }), !courseAdvancedEnabled && option !== SCCourseTypologyType.SELF && (_jsx(Chip, { variant: "outlined", color: "warning", size: "small", label: _jsx(FormattedMessage, { id: "ui.courseForm.comingSoon.chip", defaultMessage: "ui.courseForm.comingSoon.chip" }) }))] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === SCCourseFormStepType.CUSTOMIZATION && (_jsxs(Fragment, { children: [course && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), _jsxs(FormGroup, Object.assign({ className: classNames(classes.form, _step === SCCourseFormStepType.CUSTOMIZATION ? classes.stepCustomization : undefined) }, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadCourseCover, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), _jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
|
|
251
256
|
endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COURSE_TITLE_MAX_LENGTH - field.name.length }))
|
|
252
257
|
}, error: Boolean(field.name.length > COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > COURSE_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
|
|
253
258
|
endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : COURSE_DESCRIPTION_MAX_LENGTH })))
|
|
254
|
-
}, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > COURSE_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), _jsx(CategoryAutocomplete, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && _jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))] })), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
|
|
259
|
+
}, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > COURSE_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), _jsx(CategoryAutocomplete, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && _jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))] })), _jsx(Box, Object.assign({ className: classNames(classes.actions, _step === SCCourseFormStepType.CUSTOMIZATION ? classes.stepCustomization : undefined) }, { children: _jsx(LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
|
|
255
260
|
? !field.type || Object.keys(error).length !== 0
|
|
256
261
|
: _step === SCCourseFormStepType.CUSTOMIZATION &&
|
|
257
262
|
(!field.name ||
|
|
@@ -7,7 +7,7 @@ import { FormattedMessage } from 'react-intl';
|
|
|
7
7
|
import BaseDialog from '../../shared/BaseDialog';
|
|
8
8
|
import { PREFIX } from './constants';
|
|
9
9
|
import CourseForm from '../CourseForm';
|
|
10
|
-
import { useCallback } from 'react';
|
|
10
|
+
import { useCallback, useState } from 'react';
|
|
11
11
|
import { SCCourseFormStepType } from '../../constants/Course';
|
|
12
12
|
const classes = {
|
|
13
13
|
root: `${PREFIX}-root`
|
|
@@ -41,7 +41,15 @@ export default function CourseFormDialog(inProps) {
|
|
|
41
41
|
props: inProps,
|
|
42
42
|
name: PREFIX
|
|
43
43
|
});
|
|
44
|
-
const { className, open = true, onClose, CourseFormComponentProps = {
|
|
44
|
+
const { className, open = true, onClose, CourseFormComponentProps = {} } = props, rest = __rest(props, ["className", "open", "onClose", "CourseFormComponentProps"]);
|
|
45
|
+
// STATE
|
|
46
|
+
const [step, setStep] = useState(SCCourseFormStepType.GENERAL);
|
|
47
|
+
const [type, setType] = useState('');
|
|
48
|
+
//HANDLERS
|
|
49
|
+
const handleStepTypeChange = (step, type) => {
|
|
50
|
+
setStep(step);
|
|
51
|
+
setType(type);
|
|
52
|
+
};
|
|
45
53
|
const handleSuccess = useCallback((course) => {
|
|
46
54
|
var _a;
|
|
47
55
|
(_a = CourseFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(CourseFormComponentProps, course);
|
|
@@ -50,5 +58,7 @@ export default function CourseFormDialog(inProps) {
|
|
|
50
58
|
/**
|
|
51
59
|
* Renders root object
|
|
52
60
|
*/
|
|
53
|
-
return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (CourseFormComponentProps === null || CourseFormComponentProps === void 0 ? void 0 : CourseFormComponentProps.course) ? (_jsx(FormattedMessage, { id: "ui.courseForm.title.edit", defaultMessage: "ui.courseForm.title.edit" })) : (_jsx(FormattedMessage, { id:
|
|
61
|
+
return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (CourseFormComponentProps === null || CourseFormComponentProps === void 0 ? void 0 : CourseFormComponentProps.course) ? (_jsx(FormattedMessage, { id: "ui.courseForm.title.edit", defaultMessage: "ui.courseForm.title.edit" })) : step === SCCourseFormStepType.GENERAL ? (_jsx(FormattedMessage, { id: "ui.courseForm.title.general", defaultMessage: "ui.courseForm.title.general" })) : (_jsx(FormattedMessage, { id: "ui.courseForm.title.customization", defaultMessage: "ui.courseForm.title.customization", values: {
|
|
62
|
+
courseType: _jsx(FormattedMessage, { id: `ui.courseForm.${type}.title`, defaultMessage: `ui.courseForm.${type}.title` })
|
|
63
|
+
} })), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: _jsx(CourseForm, Object.assign({}, CourseFormComponentProps, { onStepChange: handleStepTypeChange, onSuccess: handleSuccess })) })));
|
|
54
64
|
}
|
|
@@ -102,12 +102,6 @@ export default function Courses(inProps) {
|
|
|
102
102
|
const contentAvailability = SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY in preferences && preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
|
|
103
103
|
const onlyStaffEnabled = useMemo(() => { var _a; return (_a = preferences[SCPreferences.CONFIGURATIONS_COURSES_ONLY_STAFF_ENABLED]) === null || _a === void 0 ? void 0 : _a.value; }, [preferences]);
|
|
104
104
|
const canCreateCourse = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_course; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
|
|
105
|
-
const endpoint = useMemo(() => {
|
|
106
|
-
if (showManagedCourses) {
|
|
107
|
-
return Endpoints.GetJoinedCourses;
|
|
108
|
-
}
|
|
109
|
-
return Endpoints.SearchCourses;
|
|
110
|
-
}, [showManagedCourses]);
|
|
111
105
|
// CONST
|
|
112
106
|
const authUserId = scUserContext.user ? scUserContext.user.id : null;
|
|
113
107
|
const theme = useTheme();
|
|
@@ -127,8 +121,8 @@ export default function Courses(inProps) {
|
|
|
127
121
|
const fetchCourses = () => {
|
|
128
122
|
return http
|
|
129
123
|
.request({
|
|
130
|
-
url:
|
|
131
|
-
method:
|
|
124
|
+
url: Endpoints.SearchCourses.url({}),
|
|
125
|
+
method: Endpoints.SearchCourses.method,
|
|
132
126
|
params: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (_categories.length && { categories: JSON.stringify(_categories) })), (query && { search: query })), (showManagedCourses && { statuses: JSON.stringify(['creator', 'manager']) })), (showMine && { statuses: JSON.stringify(['joined', 'manager']) }))
|
|
133
127
|
})
|
|
134
128
|
.then((res) => {
|
|
@@ -180,7 +174,7 @@ export default function Courses(inProps) {
|
|
|
180
174
|
return http
|
|
181
175
|
.request({
|
|
182
176
|
url: next,
|
|
183
|
-
method:
|
|
177
|
+
method: Endpoints.SearchCourses.method
|
|
184
178
|
})
|
|
185
179
|
.then((res) => {
|
|
186
180
|
setCourses([...courses, ...res.data.results]);
|
|
@@ -13,7 +13,7 @@ import { Logger } from '@selfcommunity/utils';
|
|
|
13
13
|
import { SCOPE_SC_UI } from '../../../constants/Errors';
|
|
14
14
|
import { useSnackbar } from 'notistack';
|
|
15
15
|
import LessonReleaseMenu from '../../LessonReleaseMenu';
|
|
16
|
-
import { SCCourseLessonTypologyType } from '@selfcommunity/types';
|
|
16
|
+
import { SCCourseLessonTypologyType, SCCourseTypologyType } from '@selfcommunity/types';
|
|
17
17
|
import { CourseService, Endpoints } from '@selfcommunity/api-services';
|
|
18
18
|
import { ActionLessonType, RowType } from '../types';
|
|
19
19
|
import { useIsDisabled } from '../hooks';
|
|
@@ -140,6 +140,6 @@ function SectionRow(props, ref) {
|
|
|
140
140
|
? Endpoints.CreateCourseSection.url({ id: course.id })
|
|
141
141
|
: Endpoints.PatchCourseSection.url({ id: course.id, section_id: section.id }),
|
|
142
142
|
method: isNewRow ? Endpoints.CreateCourseSection.method : Endpoints.PatchCourseSection.method
|
|
143
|
-
}, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), _jsx(TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: _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({ row: RowType.SECTION, section }) }, { 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: _jsx(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, handleOpenDialog: () => handleOpenDialog({ row: RowType.LESSON, section, lesson }), ref: innerRef }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })) })) })] }));
|
|
143
|
+
}, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), course.type !== SCCourseTypologyType.SELF && (_jsx(TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: _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({ row: RowType.SECTION, section }) }, { 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: _jsx(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, handleOpenDialog: () => handleOpenDialog({ row: RowType.LESSON, section, lesson }), ref: innerRef }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })) })) })] }));
|
|
144
144
|
}
|
|
145
145
|
export default memo(forwardRef(SectionRow));
|