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

Jump to bottom

feat: Add support for showing and hiding parts of the progress page #36

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

feat: Add support for showing and hiding parts of the progress page #36

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a9b9f5b
feat: Add support for showing and hiding parts of the progress page
xitij2000 Oct 8, 2024
25622ee
fixup! feat: Add support for showing and hiding parts of the progress…
xitij2000 Oct 10, 2024
3ae0bee
fixup! fixup! feat: Add support for showing and hiding parts of the p…
xitij2000 Oct 15, 2024
2765200
fix: make progress graph respect course settings (#1194)
RafayGhafoor Oct 11, 2023
ed5b603
fixup! fix: make progress graph respect course settings (#1194)
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
42 changes: 31 additions & 11 deletions src/course-home/progress-tab/ProgressTab.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { breakpoints, useWindowSize } from '@edx/paragon';

import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { getConfig } from '@edx/frontend-platform';
import CertificateStatus from './certificate-status/CertificateStatus';
import CourseCompletion from './course-completion/CourseCompletion';
import CourseGrade from './grades/course-grade/CourseGrade';
Expand All @@ -18,10 +20,26 @@ const ProgressTab = () => {
} = useSelector(state => state.courseHome);

const {
gradesFeatureIsFullyLocked,
gradesFeatureIsFullyLocked, disableProgressGraph,
} = useModel('progress', courseId);

const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
const [visibility, setVisibility] = useState({});
const [isLoaded, setIsLoaded] = useState(false);
// If the visibility is undefined before loading is complete, then hide the component,
// however if it's still false after loading is complete that means the visibility just
// isn't configured, in which case default to being visible.
const isVisible = (component) => visibility?.[`show${component}`] ?? isLoaded;
useEffect(async () => {
const authenticatedUser = getAuthenticatedUser();
const url = new URL(`${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/`);
url.searchParams.append('course_id', courseId);
url.searchParams.append('username', authenticatedUser ? authenticatedUser.username : '');
url.searchParams.append('requested_fields', 'other_course_settings');
const { data } = await getAuthenticatedHttpClient().get(url.href, {});
setVisibility(data.blocks[data.root]?.other_course_settings?.progressPage ?? {});
setIsLoaded(true);
}, [courseId]);

const windowWidth = useWindowSize().width;
if (windowWidth === undefined) {
Expand All @@ -38,19 +56,21 @@ const ProgressTab = () => {
<div className="row w-100 m-0">
{/* Main body */}
<div className="col-12 col-md-8 p-0">
<CourseCompletion />
{!wideScreen && <CertificateStatus />}
<CourseGrade />
<div className={`grades my-4 p-4 rounded raised-card ${applyLockedOverlay}`} aria-hidden={gradesFeatureIsFullyLocked}>
<GradeSummary />
<DetailedGrades />
</div>
{!disableProgressGraph && <CourseCompletion />}
{!wideScreen && isVisible('CertificateStatus') && <CertificateStatus />}
{isVisible('Grades') && <CourseGrade />}
{(isVisible('GradeSummary') || isVisible('GradeDetails')) && (
<div className={`grades my-4 p-4 rounded raised-card ${applyLockedOverlay}`} aria-hidden={gradesFeatureIsFullyLocked}>
{isVisible('GradeSummary') && <GradeSummary />}
{isVisible('GradeDetails') && <DetailedGrades />}
</div>
)}
</div>

{/* Side panel */}
<div className="col-12 col-md-4 p-0 px-md-4">
{wideScreen && <CertificateStatus />}
<RelatedLinks />
{wideScreen && isVisible('CertificateStatus') && <CertificateStatus />}
{isVisible('RelatedLinks') && <RelatedLinks />}
</div>
</div>
</>
Expand Down
Loading