@selfcommunity/react-ui 0.10.2-courses.151 → 0.10.2-courses.152
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.
|
@@ -17,6 +17,7 @@ const constants_1 = require("./constants");
|
|
|
17
17
|
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
|
|
18
18
|
const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
|
|
19
19
|
const course_2 = require("../../utils/course");
|
|
20
|
+
const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
|
|
20
21
|
const classes = {
|
|
21
22
|
root: `${constants_1.PREFIX}-root`,
|
|
22
23
|
chip: `${constants_1.PREFIX}-chip`,
|
|
@@ -112,7 +113,7 @@ function Course(inProps) {
|
|
|
112
113
|
});
|
|
113
114
|
const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = null, course = null, className = null, template = course_1.SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps"]);
|
|
114
115
|
// STATE
|
|
115
|
-
const { scCourse
|
|
116
|
+
const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course });
|
|
116
117
|
// CONTEXT
|
|
117
118
|
const scRoutingContext = (0, react_core_1.useSCRouting)();
|
|
118
119
|
const isCourseAdmin = (0, react_1.useMemo)(() => scCourse && (scCourse.join_status === types_1.SCCourseJoinStatusType.CREATOR || scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER), [scCourse]);
|
|
@@ -154,14 +155,20 @@ function Course(inProps) {
|
|
|
154
155
|
? 'primary'
|
|
155
156
|
: isCourseAdmin && !scCourse.privacy
|
|
156
157
|
? 'default'
|
|
157
|
-
: 'secondary', label: chipLabel, className: classes.chip })), (0, jsx_runtime_1.jsx)(
|
|
158
|
+
: 'secondary', label: chipLabel, className: classes.chip })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!scCourse.created_by.deleted && {
|
|
159
|
+
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
160
|
+
}), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !scCourse.created_by.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCourse.name, src: scCourse.created_by.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 }, (!scCourse.created_by.deleted && {
|
|
161
|
+
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
162
|
+
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: scCourse.created_by.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.preview", id: "ui.course.see.preview" }) })) })))] })));
|
|
158
163
|
}
|
|
159
164
|
else {
|
|
160
165
|
contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { 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: classes.snippetAvatar }), (isCourseAdmin || (0, course_2.isCourseCompleted)(scCourse) || (0, course_2.isCourseNew)(scCourse)) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", color: (0, course_2.isCourseCompleted)(scCourse) || (isCourseAdmin && scCourse.privacy)
|
|
161
166
|
? 'primary'
|
|
162
167
|
: isCourseAdmin && !scCourse.privacy
|
|
163
168
|
? 'default'
|
|
164
|
-
: 'secondary', label: chipLabel, className: classes.chip }))] })), primary: (0, jsx_runtime_1.jsxs)(
|
|
169
|
+
: 'secondary', label: chipLabel, className: classes.chip }))] })), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!scCourse.created_by.deleted && {
|
|
170
|
+
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
171
|
+
}), { className: classes.snippetPrimary }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: scCourse.created_by.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.snippetPrimary }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.name })) }))] }), secondary: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.snippetSecondary }, { 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.Box, Object.assign({ className: classes.snippetActions }, { children: (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" }) })) }))) }));
|
|
165
172
|
}
|
|
166
173
|
/**
|
|
167
174
|
* Renders root object
|
|
@@ -18,6 +18,7 @@ const utils_1 = require("@selfcommunity/utils");
|
|
|
18
18
|
const Errors_1 = require("../../constants/Errors");
|
|
19
19
|
const notistack_1 = require("notistack");
|
|
20
20
|
const Skeleton_1 = tslib_1.__importDefault(require("./Student/Skeleton"));
|
|
21
|
+
const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
|
|
21
22
|
const messages = {
|
|
22
23
|
dashboard: 'ui.course.dashboard.student.button.dashboard',
|
|
23
24
|
request: 'ui.course.dashboard.student.button.request',
|
|
@@ -129,7 +130,11 @@ function Student(inProps) {
|
|
|
129
130
|
if (!scCourse) {
|
|
130
131
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
|
|
131
132
|
}
|
|
132
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, classes.studentContainer, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { course: scCourse }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.user }, { children: [(0, jsx_runtime_1.jsx)(
|
|
133
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, classes.studentContainer, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { course: scCourse }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.user }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!scCourse.created_by.deleted && {
|
|
134
|
+
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
135
|
+
}), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !scCourse.created_by.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, src: scCourse.created_by.avatar, alt: scCourse.created_by.username }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!scCourse.created_by.deleted && {
|
|
136
|
+
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
137
|
+
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.created_by.username })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.header.user.creator", defaultMessage: "ui.course.dashboard.header.user.creator" }) }))] })] })), actionButton] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (scCourse.join_status === types_1.SCCourseJoinStatusType.CREATOR ||
|
|
133
138
|
scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER ||
|
|
134
139
|
scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED ||
|
|
135
140
|
scCourse.privacy !== types_1.SCCoursePrivacyType.PRIVATE) && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.margin }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.description", defaultMessage: "ui.course.dashboard.student.description" }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.box }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.description })) }))] })), (scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER || scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED) && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.margin }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.progress", defaultMessage: "ui.course.dashboard.student.description" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.box }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.percentageWrapper }, { 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.course.dashboard.student.progress.described", defaultMessage: "ui.course.dashboard.student.progress.described", values: { progress: scCourse.num_lessons_completed, end: scCourse.num_lessons } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.progress.percentage", defaultMessage: "ui.course.dashboard.student.progress.percentage", values: { percentage: scCourse.user_completion_rate } }) }))] })), (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.progress, variant: "determinate", value: scCourse === null || scCourse === void 0 ? void 0 : scCourse.user_completion_rate })] })), scCourse.user_completion_rate === 100 && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.completedWrapper, classes.margin) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.completed", defaultMessage: "ui.course.dashboard.student.completed" }) })), (0, jsx_runtime_1.jsx)("img", { src: clapping_1.CLAPPING, alt: intl.formatMessage({ id: 'ui.course.dashboard.student.completed', defaultMessage: 'ui.course.dashboard.student.completed' }), width: 32, height: 32 })] }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.margin }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.contents", defaultMessage: "ui.course.dashboard.student.contents" }) })), (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" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
|
|
@@ -15,6 +15,7 @@ import { PREFIX } from './constants';
|
|
|
15
15
|
import CourseSkeleton from './Skeleton';
|
|
16
16
|
import BaseItem from '../../shared/BaseItem';
|
|
17
17
|
import { isCourseCompleted, isCourseNew } from '../../utils/course';
|
|
18
|
+
import UserAvatar from '../../shared/UserAvatar';
|
|
18
19
|
const classes = {
|
|
19
20
|
root: `${PREFIX}-root`,
|
|
20
21
|
chip: `${PREFIX}-chip`,
|
|
@@ -110,7 +111,7 @@ export default function Course(inProps) {
|
|
|
110
111
|
});
|
|
111
112
|
const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = null, course = null, className = null, template = SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {} } = props, rest = __rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps"]);
|
|
112
113
|
// STATE
|
|
113
|
-
const { scCourse
|
|
114
|
+
const { scCourse } = useSCFetchCourse({ id: courseId, course });
|
|
114
115
|
// CONTEXT
|
|
115
116
|
const scRoutingContext = useSCRouting();
|
|
116
117
|
const isCourseAdmin = useMemo(() => scCourse && (scCourse.join_status === SCCourseJoinStatusType.CREATOR || scCourse.join_status === SCCourseJoinStatusType.MANAGER), [scCourse]);
|
|
@@ -152,14 +153,20 @@ export default function Course(inProps) {
|
|
|
152
153
|
? 'primary'
|
|
153
154
|
: isCourseAdmin && !scCourse.privacy
|
|
154
155
|
? 'default'
|
|
155
|
-
: 'secondary', label: chipLabel, className: classes.chip })), _jsx(
|
|
156
|
+
: 'secondary', label: chipLabel, className: classes.chip })), _jsx(Link, Object.assign({}, (!scCourse.created_by.deleted && {
|
|
157
|
+
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
158
|
+
}), { children: _jsx(UserAvatar, Object.assign({ hide: !scCourse.created_by.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: scCourse.name, src: scCourse.created_by.avatar, className: classes.previewAvatar }) })) }))] })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(Link, Object.assign({ className: classes.previewCreator }, (!scCourse.created_by.deleted && {
|
|
159
|
+
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
160
|
+
}), { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: scCourse.created_by.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.preview", id: "ui.course.see.preview" }) })) })))] })));
|
|
156
161
|
}
|
|
157
162
|
else {
|
|
158
163
|
contentObj = (_jsx(SnippetRoot, { 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: classes.snippetAvatar }), (isCourseAdmin || isCourseCompleted(scCourse) || isCourseNew(scCourse)) && (_jsx(Chip, { size: "small", component: "div", color: isCourseCompleted(scCourse) || (isCourseAdmin && scCourse.privacy)
|
|
159
164
|
? 'primary'
|
|
160
165
|
: isCourseAdmin && !scCourse.privacy
|
|
161
166
|
? 'default'
|
|
162
|
-
: 'secondary', label: chipLabel, className: classes.chip }))] })), primary: _jsxs(
|
|
167
|
+
: 'secondary', label: chipLabel, className: classes.chip }))] })), primary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!scCourse.created_by.deleted && {
|
|
168
|
+
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
169
|
+
}), { className: classes.snippetPrimary }, { children: _jsx(Typography, Object.assign({ component: "span" }, { children: scCourse.created_by.username })) })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.snippetPrimary }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.name })) }))] }), secondary: _jsxs(Typography, Object.assign({ component: "p", variant: "body2", className: classes.snippetSecondary }, { 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(Box, Object.assign({ className: classes.snippetActions }, { children: _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" }) })) }))) }));
|
|
163
170
|
}
|
|
164
171
|
/**
|
|
165
172
|
* Renders root object
|
|
@@ -9,13 +9,14 @@ import { SCCourseJoinStatusType, SCCourseLessonCompletionStatusType, SCCoursePri
|
|
|
9
9
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
10
10
|
import ActionButton from './Student/ActionButton';
|
|
11
11
|
import { CLAPPING } from '../../assets/courses/clapping';
|
|
12
|
-
import { SCRoutes, useSCFetchCourse, useSCRouting } from '@selfcommunity/react-core';
|
|
12
|
+
import { SCRoutes, useSCFetchCourse, useSCRouting, Link } from '@selfcommunity/react-core';
|
|
13
13
|
import AccordionLessons from '../../shared/AccordionLessons';
|
|
14
14
|
import { CourseService } from '@selfcommunity/api-services';
|
|
15
15
|
import { Logger } from '@selfcommunity/utils';
|
|
16
16
|
import { SCOPE_SC_UI } from '../../constants/Errors';
|
|
17
17
|
import { useSnackbar } from 'notistack';
|
|
18
18
|
import StudentSkeleton from './Student/Skeleton';
|
|
19
|
+
import UserAvatar from '../../shared/UserAvatar';
|
|
19
20
|
const messages = {
|
|
20
21
|
dashboard: 'ui.course.dashboard.student.button.dashboard',
|
|
21
22
|
request: 'ui.course.dashboard.student.button.request',
|
|
@@ -127,7 +128,11 @@ function Student(inProps) {
|
|
|
127
128
|
if (!scCourse) {
|
|
128
129
|
return _jsx(StudentSkeleton, {});
|
|
129
130
|
}
|
|
130
|
-
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, classes.studentContainer, className) }, rest, { children: [_jsx(HeaderCourseDashboard, { course: scCourse }), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.user }, { children: [_jsx(
|
|
131
|
+
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, classes.studentContainer, className) }, rest, { children: [_jsx(HeaderCourseDashboard, { course: scCourse }), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.user }, { children: [_jsx(Link, Object.assign({}, (!scCourse.created_by.deleted && {
|
|
132
|
+
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
133
|
+
}), { children: _jsx(UserAvatar, Object.assign({ hide: !scCourse.created_by.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, src: scCourse.created_by.avatar, alt: scCourse.created_by.username }) })) })), _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!scCourse.created_by.deleted && {
|
|
134
|
+
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
135
|
+
}), { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.created_by.username })) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.header.user.creator", defaultMessage: "ui.course.dashboard.header.user.creator" }) }))] })] })), actionButton] })), _jsx(Divider, {}), (scCourse.join_status === SCCourseJoinStatusType.CREATOR ||
|
|
131
136
|
scCourse.join_status === SCCourseJoinStatusType.MANAGER ||
|
|
132
137
|
scCourse.join_status === SCCourseJoinStatusType.JOINED ||
|
|
133
138
|
scCourse.privacy !== SCCoursePrivacyType.PRIVATE) && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classes.margin }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.description", defaultMessage: "ui.course.dashboard.student.description" }) })), _jsx(Stack, Object.assign({ className: classes.box }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.description })) }))] })), (scCourse.join_status === SCCourseJoinStatusType.MANAGER || scCourse.join_status === SCCourseJoinStatusType.JOINED) && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classes.margin }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress", defaultMessage: "ui.course.dashboard.student.description" }) })), _jsxs(Stack, Object.assign({ className: classes.box }, { children: [_jsxs(Stack, Object.assign({ className: classes.percentageWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress.described", defaultMessage: "ui.course.dashboard.student.progress.described", values: { progress: scCourse.num_lessons_completed, end: scCourse.num_lessons } }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress.percentage", defaultMessage: "ui.course.dashboard.student.progress.percentage", values: { percentage: scCourse.user_completion_rate } }) }))] })), _jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: scCourse === null || scCourse === void 0 ? void 0 : scCourse.user_completion_rate })] })), scCourse.user_completion_rate === 100 && (_jsxs(Stack, Object.assign({ className: classNames(classes.completedWrapper, classes.margin) }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.completed", defaultMessage: "ui.course.dashboard.student.completed" }) })), _jsx("img", { src: CLAPPING, alt: intl.formatMessage({ id: 'ui.course.dashboard.student.completed', defaultMessage: 'ui.course.dashboard.student.completed' }), width: 32, height: 32 })] }))), _jsx(Typography, Object.assign({ variant: "h6", className: classes.margin }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.contents", defaultMessage: "ui.course.dashboard.student.contents" }) })), _jsxs(Stack, Object.assign({ className: classes.lessonsSections }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
|