Skip to content

Commit

Permalink
feat(unit-links): Updated Course UI
Browse files Browse the repository at this point in the history
Updated course UI for indention and removed link for sequentials.
  • Loading branch information
JackSteele24 authored and becdavid committed Jun 13, 2024
1 parent d8f1984 commit f285147
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 78 deletions.
154 changes: 84 additions & 70 deletions src/course-home/outline-tab/SequenceLink.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import { getConfig } from '@edx/frontend-platform';
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Link } from 'react-router-dom';
import { Collapsible, Hyperlink, IconButton } from '@edx/paragon';
import {
Expand All @@ -11,10 +8,8 @@ import {
injectIntl,
intlShape,
} from '@edx/frontend-platform/i18n';
// import { faCheckCircle as fasCheckCircle } from '@fortawesome/free-solid-svg-icons';
import { faCheckCircle as fasCheckCircle, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import UnitLink from './UnitLink';
Expand All @@ -40,8 +35,8 @@ function SequenceLink({
complete,
description,
due,
legacyWebUrl,
showLink,
// legacyWebUrl,
// showLink,
title,
unitIds,
} = sequence;
Expand All @@ -54,80 +49,99 @@ function SequenceLink({
const {
userTimezone,
} = useModel('outline', courseId);
const {
course
} = useModel('outline', courseId);
const {
canLoadCourseware,
} = useModel('courseHomeMeta', courseId);

// const {
// canLoadCourseware,
// } = useModel('courseHomeMeta', courseId);

const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};


const [open, setOpen] = useState(defaultOpen);


useEffect(() => {
setOpen(defaultOpen);
}, []);
setOpen(expand);
}, [expand]);



// canLoadCourseware is true if the Courseware MFE is enabled, false otherwise
const coursewareUrl = (
canLoadCourseware
? <Link to={`/course/${courseId}/${id}`}>{title}</Link>
: <Hyperlink destination={legacyWebUrl}>{title}</Hyperlink>
);
const displayTitle = showLink ? coursewareUrl : title;
// const coursewareUrl = (
// canLoadCourseware
// ? <Link to={`/course/${courseId}/${id}`}>{title}</Link>
// : <Hyperlink destination={legacyWebUrl}>{title}</Hyperlink>
// );
// const displayTitle = showLink ? coursewareUrl : title;
const sequenceTitle = (
<div className="row w-100 m-0">
<div className="col-auto p-0">
{complete ? (
<FontAwesomeIcon
icon={fasCheckCircle}
fixedWidth
className="float-left mt-1 text-success"
aria-hidden="true"
title={intl.formatMessage(messages.completedSection)}
/>
) : (
<FontAwesomeIcon
icon={farCheckCircle}
fixedWidth
className="float-left mt-1 text-gray-400"
aria-hidden="true"
title={intl.formatMessage(messages.incompleteSection)}
/>
)}
</div>
<div className="col-10 ml-3 p-0 font-weight-bold text-dark-500">
<span className="align-middle">{displayTitle}</span>
<span className="sr-only">
, {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
</span>
<EffortEstimate className="ml-3 align-middle" block={sequence} />
</div>
{due && (
<div className="row w-100 m-0 ml-3 pl-3">
<small className="text-body pl-2">
<FormattedMessage
id="learning.outline.sequence-due"
defaultMessage="{description} due {assignmentDue}"
description="Used below an assignment title"
values={{
assignmentDue: (
<FormattedTime
key={`${id}-due`}
day="numeric"
month="short"
year="numeric"
timeZoneName="short"
value={due}
{...timezoneFormatArgs}
/>
),
description: description || '',
}}
{ unitIds.length > 0 ? (
<div className="row w-100 m-0">
<div className="col-auto p-0">
{complete ? (
<FontAwesomeIcon
icon={fasCheckCircle}
fixedWidth
className="float-left mt-1 text-success"
aria-hidden="true"
title={intl.formatMessage(messages.completedSection)}
/>
</small>
) : (
<FontAwesomeIcon
icon={farCheckCircle}
fixedWidth
className="float-left mt-1 text-gray-400"
aria-hidden="true"
title={intl.formatMessage(messages.incompleteSection)}
/>
)}
</div>
<div className="col-10 ml-3 p-0 font-weight-bold text-dark-500">
<span className="align-middle">{title}</span>
<span className="sr-only">
, {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
</span>
<EffortEstimate className="ml-3 align-middle" block={sequence} />
</div>
{due && (
<div className="row w-100 m-0 ml-3 pl-3">
<small className="text-body pl-2">
<FormattedMessage
id="learning.outline.sequence-due"
defaultMessage="{description} due {assignmentDue}"
description="Used below an assignment title"
values={{
assignmentDue: (
<FormattedTime
key={`${id}-due`}
day="numeric"
month="short"
year="numeric"
timeZoneName="short"
value={due}
{...timezoneFormatArgs}
/>
),
description: description || '',
}}
/>
</small>
</div>
)}
</div>
) : (
<div className="row w-100 m-0">
<div className="col-auto p-0">
<FontAwesomeIcon
icon={farCheckCircle}
fixedWidth
className="float-left mt-1 text-gray-400"
aria-hidden="true"
title={intl.formatMessage(messages.incompleteSection)}
/>
</div>
<div className="col-10 ml-3 p-0 font-weight-bold text-muted-500">
<span className="align-middle">{title} (No Units)</span>
</div>
</div>
)}
</div>
Expand Down
8 changes: 1 addition & 7 deletions src/course-home/outline-tab/UnitLink.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function UnitLink({

return (
<li>
<div className={classNames('', { 'mt-2 pt-2 border-top border-light': !first })}>
<div className={classNames('pl-3', { 'mt-2 pt-2 border-top border-light': !first })}>
<div className="row w-100 m-0">
<div className="col-auto p-0">
{complete ? (
Expand Down Expand Up @@ -107,14 +107,8 @@ function UnitLink({
</div>
)}
</div>

</li>




)

}

UnitLink.propTypes = {
Expand Down
3 changes: 2 additions & 1 deletion src/courseware/data/api.js
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,7 @@ export async function getCourseMetadata(courseId) {
return normalizeMetadata(metadata);
}


function normalizeSequenceMetadata(sequence) {
return {
sequence: {
Expand Down Expand Up @@ -180,7 +181,7 @@ export async function getSequenceMetadata(sequenceId) {
.get(`${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceId}`, {});

return normalizeSequenceMetadata(data);
}
}

const getSequenceHandlerUrl = (courseId, sequenceId) => `${getConfig().LMS_BASE_URL}/courses/${courseId}/xblock/${sequenceId}/handler`;

Expand Down

0 comments on commit f285147

Please sign in to comment.