From c4504c0aec88f8bbb3a9726bbb4bdb754b63166e Mon Sep 17 00:00:00 2001 From: Ben Warzeski Date: Mon, 25 Sep 2023 14:28:09 +0000 Subject: [PATCH] chore: progress bar and data updates --- src/components/ProgressBar/index.jsx | 137 +++++++++++++++++- src/components/ProgressBar/index.scss | 26 ++++ src/components/ProgressBar/messages.js | 31 ++++ src/data/services/lms/fakeData/oraConfig.js | 20 +-- .../lms/fakeData/pageData/submission.js | 2 +- src/data/services/lms/hooks/data.ts | 7 +- src/data/services/lms/hooks/selectors.ts | 6 +- 7 files changed, 210 insertions(+), 19 deletions(-) create mode 100644 src/components/ProgressBar/index.scss create mode 100644 src/components/ProgressBar/messages.js diff --git a/src/components/ProgressBar/index.jsx b/src/components/ProgressBar/index.jsx index 9f057173..fa9348b3 100644 --- a/src/components/ProgressBar/index.jsx +++ b/src/components/ProgressBar/index.jsx @@ -1,7 +1,138 @@ import React from 'react'; +import PropTypes from 'prop-types'; +import { useLocation } from 'react-router-dom'; +import classNames from 'classnames'; -export const ProgressBar = () => ( -

Progress Bar

-); +import { useIntl } from '@edx/frontend-platform/i18n'; +import { Navbar, Nav, Icon } from '@edx/paragon'; +import { Locked, CheckCircle, Error } from '@edx/paragon/icons'; + +import { + useAssessmentStepConfig, + useProgressData, + useIsPageDataLoaded, +} from 'data/services/lms/hooks/selectors'; + +import messages from './messages'; +import './index.scss'; + +export const ProgressStep = ({ + children, + href, + isActive, + isEnabled, + isComplete, + isError, + number, +}) => { + let icon = ; + if (isComplete) { + icon = ; + } else if (isError) { + icon = ; + } else if (number) { + icon = {number}; + } + return ( + + {icon} + {children} + + ); +}; +ProgressStep.defaultProps = { + href: '#', + isActive: false, + isEnabled: false, + isComplete: false, + isError: false, + number: null, +}; +ProgressStep.propTypes = { + children: PropTypes.node.isRequired, + href: PropTypes.string, + isActive: PropTypes.bool, + isEnabled: PropTypes.bool, + isError: PropTypes.bool, + isComplete: PropTypes.bool, + number: PropTypes.number, +}; + +export const SubmissionStep = () => { + const { formatMessage } = useIntl(); + return ( + {formatMessage(messages.createSubmission)} + ); +}; + +export const TrainingStep = () => { + const { formatMessage } = useIntl(); + return ( + {formatMessage(messages.practice)} + ); +}; + +export const SelfAssessStep = () => { + const { formatMessage } = useIntl(); + return ( + {formatMessage(messages.selfAssess)} + ); +}; + +export const PeerAssessStep = () => { + const { formatMessage } = useIntl(); + return ( + {formatMessage(messages.peerAssess)} + ); +}; + +export const MyGradeStep = () => { + const { formatMessage } = useIntl(); + return ( + {formatMessage(messages.myGrade)} + ); +}; + +export const ProgressBar = () => { + const stepConfig = useAssessmentStepConfig(); + const progress = useProgressData(); + const isLoaded = useIsPageDataLoaded(); + const location = useLocation(); + if (!isLoaded) { + return null; + } + console.log({ + stepConfig, progress, location, + }); + return ( + + +
+ + {stepConfig.order.map(step => { + if (step === 'peer') { + return ; + } + if (step === 'training') { + return ; + } + if (step === 'self') { + return ; + } + return null; + })} + + + + ); +}; export default ProgressBar; diff --git a/src/components/ProgressBar/index.scss b/src/components/ProgressBar/index.scss new file mode 100644 index 00000000..6379705d --- /dev/null +++ b/src/components/ProgressBar/index.scss @@ -0,0 +1,26 @@ +.ora-progress-nav-group { + display: flex; + justify-content: space-between; + .ora-progress-divider { + position: absolute; + width: 95%; + } + .ora-progress-nav { + background-color: white; + z-index: 5; + font-size: 1.125rem; + &.is-active { + border-bottom: 2px solid black; + } + } + .nav-icon { + display: inline-block; + margin-inline-end: 0.5rem; + margin-left: -0.25rem; + } + .number-icon { + background-color: black; + color: white; + border-radius: 100%; + } +} diff --git a/src/components/ProgressBar/messages.js b/src/components/ProgressBar/messages.js new file mode 100644 index 00000000..b596acf8 --- /dev/null +++ b/src/components/ProgressBar/messages.js @@ -0,0 +1,31 @@ +import { defineMessages } from '@edx/frontend-platform/i18n'; + +const messages = defineMessages({ + createSubmission: { + id: 'ora-grading.ProgressBar.createSubmission', + defaultMessage: 'Create your response', + description: 'Create response progress indicator', + }, + practice: { + id: 'ora-grading.ProgressBar.practice', + defaultMessage: 'Practice grading', + description: 'Student training step progress indicator', + }, + selfAssess: { + id: 'ora-grading.ProgressBar.selfAssess', + defaultMessage: 'Grade yourself', + description: 'Self assessment step progress indicator', + }, + peerAssess: { + id: 'ora-grading.ProgressBar.peerAssess', + defaultMessage: 'Grade peers', + description: 'Peer assessment step progress indicator', + }, + myGrade: { + id: 'ora-grading.ProgressBar.myGrade', + defaultMessage: 'My grade', + description: 'My Grade step progress indicator', + }, +}); + +export default messages; diff --git a/src/data/services/lms/fakeData/oraConfig.js b/src/data/services/lms/fakeData/oraConfig.js index 8c6d4c8a..9bcb6297 100644 --- a/src/data/services/lms/fakeData/oraConfig.js +++ b/src/data/services/lms/fakeData/oraConfig.js @@ -135,15 +135,17 @@ export const createORAConfig = ({ leaderboard_config, }); +export const tinyMCEConfig = { + submission_config: { + ...submissionConfig, + text_response_config: { + ...submissionConfig.text_response_config, + editor_type: 'tinymce', + }, + }, +}; + export default { assessmentText: createORAConfig(), - assessmentTinyMCE: createORAConfig({ - submission_config: { - ...submissionConfig, - text_response_config: { - ...submissionConfig.text_response_config, - editor_type: 'tinymce', - }, - }, - }), + assessmentTinyMCE: createORAConfig(tinyMCEConfig), }; diff --git a/src/data/services/lms/fakeData/pageData/submission.js b/src/data/services/lms/fakeData/pageData/submission.js index 78d80d13..d20591c3 100644 --- a/src/data/services/lms/fakeData/pageData/submission.js +++ b/src/data/services/lms/fakeData/pageData/submission.js @@ -62,7 +62,7 @@ export default { has_received_grade: false, }), response: createSubmissionResponse({ - text_responses: ['', ''], + text_responses: ['response 1', 'response 2'], uploaded_files: [], }), }), diff --git a/src/data/services/lms/hooks/data.ts b/src/data/services/lms/hooks/data.ts index c217c5ce..9796c2b6 100644 --- a/src/data/services/lms/hooks/data.ts +++ b/src/data/services/lms/hooks/data.ts @@ -40,12 +40,11 @@ export const usePageData = (): types.QueryData => { const returnData = assessmentData ? { ...camelCaseObject(assessmentData), rubric: { - optionsSelected: {...assessmentData.rubric.options_selected}, - criterionFeedback: {...assessmentData.rubric.criterion_feedback}, + optionsSelected: { ...assessmentData.rubric.options_selected }, + criterionFeedback: { ...assessmentData.rubric.criterion_feedback }, overallFeedback: assessmentData.rubric.overall_feedback, }, - }: {}; - + } : {}; return Promise.resolve(returnData as any); }, }); diff --git a/src/data/services/lms/hooks/selectors.ts b/src/data/services/lms/hooks/selectors.ts index 99272791..30011dc2 100644 --- a/src/data/services/lms/hooks/selectors.ts +++ b/src/data/services/lms/hooks/selectors.ts @@ -47,9 +47,11 @@ export const useIsPageDataLoaded = (): boolean => ( data.usePageData().status === 'success' ); -export const usePageData = (): types.PageData => data.usePageData().data; +export const usePageData = (): types.PageData => data.usePageData()?.data; -export const useSubmissionTeamInfo = (): types.SubmissionTeamData => usePageData().submission.teamInfo; +export const useProgressData = (): types.ProgressData => usePageData()?.progress; + +export const useSubmissionTeamInfo = (): types.SubmissionTeamData => usePageData()?.submission.teamInfo; export const useSubmissionStatus = (): types.SubmissionStatusData => { const {