132 lines
4.2 KiB
JavaScript
132 lines
4.2 KiB
JavaScript
/* global gettext */
|
|
/* eslint react/no-array-index-key: 0 */
|
|
|
|
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
|
|
function CourseOrLibraryListing(props) {
|
|
const allowReruns = props.allowReruns;
|
|
const linkClass = props.linkClass;
|
|
const idBase = props.idBase;
|
|
|
|
return (
|
|
<ul className="list-courses">
|
|
{
|
|
props.items.map((item, i) =>
|
|
(
|
|
<li key={i} className="course-item" data-course-key={item.course_key}>
|
|
<a className={linkClass} href={item.url}>
|
|
<h3 className="course-title" id={`title-${idBase}-${i}`}>{item.display_name}</h3>
|
|
<div className="course-metadata">
|
|
<span className="course-org metadata-item">
|
|
<span className="label">{gettext('Organization:')}</span>
|
|
<span className="value">{item.org}</span>
|
|
</span>
|
|
<span className="course-num metadata-item">
|
|
<span className="label">{gettext('Course Number:')}</span>
|
|
<span className="value">{item.number}</span>
|
|
</span>
|
|
{ item.run &&
|
|
<span className="course-run metadata-item">
|
|
<span className="label">{gettext('Course Run:')}</span>
|
|
<span className="value">{item.run}</span>
|
|
</span>
|
|
}
|
|
{ item.can_edit === false &&
|
|
<span className="extra-metadata">{gettext('(Read-only)')}</span>
|
|
}
|
|
</div>
|
|
</a>
|
|
{ item.lms_link && item.rerun_link &&
|
|
<ul className="item-actions course-actions">
|
|
{ allowReruns &&
|
|
<li className="action action-rerun">
|
|
<a
|
|
href={item.rerun_link}
|
|
className="button rerun-button"
|
|
aria-labelledby={`re-run-${idBase}-${i} title-${idBase}-${i}`}
|
|
id={`re-run-${idBase}-${i}`}
|
|
>{gettext('Re-run Course')}</a>
|
|
</li>
|
|
}
|
|
<li className="action action-view">
|
|
<a
|
|
href={item.lms_link}
|
|
rel="external"
|
|
className="button view-button"
|
|
aria-labelledby={`view-live-${idBase}-${i} title-${idBase}-${i}`}
|
|
id={`view-live-${idBase}-${i}`}
|
|
>{gettext('View Live')}</a>
|
|
</li>
|
|
</ul>
|
|
}
|
|
</li>
|
|
),
|
|
)
|
|
}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
CourseOrLibraryListing.propTypes = {
|
|
allowReruns: PropTypes.bool.isRequired,
|
|
idBase: PropTypes.string.isRequired,
|
|
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
linkClass: PropTypes.string.isRequired,
|
|
};
|
|
|
|
export class StudioCourseIndex {
|
|
constructor(selector, context, allowReruns) {
|
|
// The HTML element is only conditionally shown, based on number of courses.
|
|
const element = document.querySelector(selector);
|
|
if (element) {
|
|
ReactDOM.render(
|
|
<CourseOrLibraryListing
|
|
items={context}
|
|
linkClass="course-link"
|
|
idBase="course"
|
|
allowReruns={allowReruns}
|
|
/>,
|
|
element,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
export class StudioArchivedIndex {
|
|
constructor(selector, context, allowReruns) {
|
|
// The HTML element is only conditionally shown, based on number of archived courses.
|
|
const element = document.querySelector(selector);
|
|
if (element) {
|
|
ReactDOM.render(
|
|
<CourseOrLibraryListing
|
|
items={context}
|
|
linkClass="course-link"
|
|
idBase="archived"
|
|
allowReruns={allowReruns}
|
|
/>,
|
|
element,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
export class StudioLibraryIndex {
|
|
constructor(selector, context) {
|
|
// The HTML element is only conditionally shown, based on number of libraries.
|
|
const element = document.querySelector(selector);
|
|
if (element) {
|
|
ReactDOM.render(
|
|
<CourseOrLibraryListing
|
|
items={context}
|
|
linkClass="library-link"
|
|
idBase="library"
|
|
allowReruns={false}
|
|
/>,
|
|
document.querySelector(selector),
|
|
);
|
|
}
|
|
}
|
|
}
|