Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add support for toggling more parts of the progress page on or off #71

Open
wants to merge 3 commits into
base: opencraft-release/palm.1
Choose a base branch
from
Open

feat: Add support for toggling more parts of the progress page on or off #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
373955f
feat: Add support for toggling more parts of the progress page on or …
xitij2000 Oct 8, 2024
45a4cf4
fixup! feat: Add support for toggling more parts of the progress page…
xitij2000 Oct 15, 2024
6a4d495
fixup! fixup! feat: Add support for toggling more parts of the progre…
xitij2000 Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 97 additions & 22 deletions src/pages-and-resources/progress/Settings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,34 @@
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { getConfig } from '@edx/frontend-platform';
import { useIntl } from '@edx/frontend-platform/i18n';
import PropTypes from 'prop-types';
import React from 'react';
import * as Yup from 'yup';
import { getConfig } from '@edx/frontend-platform';
import messages from './messages';
import FormSwitchGroup from '../../generic/FormSwitchGroup';
import { useAppSetting } from '../../utils';
import AppSettingsModal from '../app-settings-modal/AppSettingsModal';
import messages from './messages';

const ProgressSettings = ({ intl, onClose }) => {
const ProgressSettings = ({ onClose }) => {
const intl = useIntl();
const [disableProgressGraph, saveSetting] = useAppSetting('disableProgressGraph');
const showProgressGraphSetting = getConfig().ENABLE_PROGRESS_GRAPH_SETTINGS.toLowerCase() === 'true';
const [otherCourseSettings, saveOtherCourseSettings] = useAppSetting('otherCourseSettings');
const showProgressGraphSetting = getConfig().ENABLE_PROGRESS_GRAPH_SETTINGS.toString().toLowerCase() === 'true';

const handleSettingsSave = (values) => {
if (showProgressGraphSetting) { saveSetting(!values.enableProgressGraph); }
const handleSettingsSave = async (values) => {
if (showProgressGraphSetting) {
await saveSetting(!values.enableProgressGraph);
}
const updatedOtherCourseSettings = {
...otherCourseSettings,
progressPage: {
showGrades: values.showGrades,
showGradeSummary: values.showGradeSummary,
showGradeDetails: values.showGradeDetails,
showRelatedLinks: values.showRelatedLinks,
showCertificateStatus: values.showCertificateStatus,
},
};
await saveOtherCourseSettings(updatedOtherCourseSettings);
};

return (
Expand All @@ -24,32 +39,92 @@ const ProgressSettings = ({ intl, onClose }) => {
enableAppLabel={intl.formatMessage(messages.enableProgressLabel)}
learnMoreText={intl.formatMessage(messages.enableProgressLink)}
onClose={onClose}
initialValues={{ enableProgressGraph: !disableProgressGraph }}
validationSchema={{ enableProgressGraph: Yup.boolean() }}
initialValues={{
enableProgressGraph: !disableProgressGraph,
showGrades: otherCourseSettings?.progressPage?.showGrades ?? true,
showGradeSummary: otherCourseSettings?.progressPage?.showGradeSummary ?? true,
showGradeDetails: otherCourseSettings?.progressPage?.showGradeDetails ?? true,
showRelatedLinks: otherCourseSettings?.progressPage?.showRelatedLinks ?? true,
showCertificateStatus: otherCourseSettings?.progressPage?.showCertificateStatus ?? true,
}}
validationSchema={{
enableProgressGraph: Yup.boolean(),
showGrades: Yup.boolean(),
showGradeSummary: Yup.boolean(),
showGradeDetails: Yup.boolean(),
showRelatedLinks: Yup.boolean(),
showCertificateStatus: Yup.boolean(),
}}
onSettingsSave={handleSettingsSave}
>
{
({ handleChange, handleBlur, values }) => (
showProgressGraphSetting && (
<FormSwitchGroup
id="enable-progress-graph"
name="enableProgressGraph"
label={intl.formatMessage(messages.enableGraphLabel)}
helpText={intl.formatMessage(messages.enableGraphHelp)}
onChange={handleChange}
onBlur={handleBlur}
checked={values.enableProgressGraph}
/>
)
<>
{showProgressGraphSetting && (
<FormSwitchGroup
id="enable-progress-graph"
name="enableProgressGraph"
label={intl.formatMessage(messages.enableGraphLabel)}
helpText={intl.formatMessage(messages.enableGraphHelp)}
onChange={handleChange}
onBlur={handleBlur}
checked={values.enableProgressGraph}
/>
)}
<FormSwitchGroup
id="show-grades"
name="showGrades"
label={intl.formatMessage(messages.showGradesLabel)}
helpText={intl.formatMessage(messages.showGradesHelp)}
onChange={handleChange}
onBlur={handleBlur}
checked={values.showGrades}
/>
<FormSwitchGroup
id="show-grade-summary"
name="showGradeSummary"
label={intl.formatMessage(messages.showGradeSummaryLabel)}
helpText={intl.formatMessage(messages.showGradeSummaryHelp)}
onChange={handleChange}
onBlur={handleBlur}
checked={values.showGradeSummary}
/>
<FormSwitchGroup
id="show-grade-details"
name="showGradeDetails"
label={intl.formatMessage(messages.showGradeDetailsLabel)}
helpText={intl.formatMessage(messages.showGradeDetailsHelp)}
onChange={handleChange}
onBlur={handleBlur}
checked={values.showGradeDetails}
/>
<FormSwitchGroup
id="show-related-links"
name="showRelatedLinks"
label={intl.formatMessage(messages.showRelatedLinksLabel)}
helpText={intl.formatMessage(messages.showRelatedLinksHelp)}
onChange={handleChange}
onBlur={handleBlur}
checked={values.showRelatedLinks}
/>
<FormSwitchGroup
id="show-certificate-status"
name="showCertificateStatus"
label={intl.formatMessage(messages.showCertificateStatusLabel)}
helpText={intl.formatMessage(messages.showCertificateStatusHelp)}
onChange={handleChange}
onBlur={handleBlur}
checked={values.showCertificateStatus}
/>
</>
)
}
</AppSettingsModal>
);
};

ProgressSettings.propTypes = {
intl: intlShape.isRequired,
onClose: PropTypes.func.isRequired,
};

export default injectIntl(ProgressSettings);
export default ProgressSettings;
40 changes: 40 additions & 0 deletions src/pages-and-resources/progress/messages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,46 @@ const messages = defineMessages({
id: 'course-authoring.pages-resources.progress.enable-graph.help',
defaultMessage: 'If enabled, students can view the progress graph',
},
showGradesLabel: {
id: 'course-authoring.pages-resources.progress.show-grades.label',
defaultMessage: 'Show grades',
},
showGradesHelp: {
id: 'course-authoring.pages-resources.progress.show-grades.help',
defaultMessage: 'If enabled, students can see their grades on the progress page.',
},
showGradeSummaryLabel: {
id: 'course-authoring.pages-resources.progress.show-grade-summary.label',
defaultMessage: 'Show Grade Summary',
},
showGradeSummaryHelp: {
id: 'course-authoring.pages-resources.progress.show-grade-summary.help',
defaultMessage: 'If enabled, students can see a summary of their grades on the progress page.',
},
showGradeDetailsLabel: {
id: 'course-authoring.pages-resources.progress.show-grade-details.label',
defaultMessage: 'Show Grade Details',
},
showGradeDetailsHelp: {
id: 'course-authoring.pages-resources.progress.show-grade-details.help',
defaultMessage: 'If enabled, students can see details of their grades on the progress page.',
},
showRelatedLinksLabel: {
id: 'course-authoring.pages-resources.progress.show-related-links.label',
defaultMessage: 'Show Related Links',
},
showRelatedLinksHelp: {
id: 'course-authoring.pages-resources.progress.show-related-links.help',
defaultMessage: 'If enabled, students can see related links in the sidebar on the progress page.',
},
showCertificateStatusLabel: {
id: 'course-authoring.pages-resources.progress.show-certificate-status.label',
defaultMessage: 'Show Certificate Status',
},
showCertificateStatusHelp: {
id: 'course-authoring.pages-resources.progress.show-certificate-status.help',
defaultMessage: 'If enabled, students can see the status of their certificates on the progress page.',
},
});

export default messages;
Loading