-
You have no lessons assigned!
-
In order to launch a lesson, you need to assign a lesson to one of your classes.
-
With Quill Lessons, teachers can use Quill to lead whole-class lessons and to see and display student responses in real-time.
-
- {assignLessonsLink}
- {learnMoreLink}
+
+
+
+
+
You have no lessons assigned
+
In order to launch a lesson, you need to assign a lesson to one of your classes.
+
With Quill Lessons, teachers can use Quill to lead whole-class lessons and to see and display student responses in real-time.
+
+ {assignLessonsLink}
+ {learnMoreLink}
+
-
);
}
@@ -235,12 +241,15 @@ export default class ClassroomLessons extends React.Component {
return (
- {this.renderHeader()}
-
classy.id === selectedClassroomId)}
- />
+
+ {this.renderHeader()}
+ classy.id === selectedClassroomId)}
+ />
+
{
+ it('renders the unit name and assigned information', () => {
+ render();
+ const unitNameSpan = screen.getByText('Sample Unit')
+
+ expect(screen.getByText('Sample Unit')).toBeInTheDocument();
+ expect(screen.getByText('Assigned to')).toBeInTheDocument();
+ expect(screen.getByText('20 Students')).toBeInTheDocument();
+ expect(screen.getByText('2 classes (Class 1, Class 2)')).toBeInTheDocument();
+ });
+
+ it('renders classroom activities as rows in the DataTable', () => {
+ render();
+
+ expect(screen.getByText('Activity 1')).toBeInTheDocument();
+ expect(screen.getByText('Activity 2')).toBeInTheDocument();
+ });
+
+ it('renders launch lesson options based on activity state', () => {
+ render();
+
+ const launchButtons = screen.getAllByText('Launch Lesson');
+ expect(launchButtons.length).toBeGreaterThan(0);
+
+ const viewReportButtons = screen.getAllByText('View Report');
+ expect(viewReportButtons.length).toBeGreaterThan(0);
+ });
+
+ it('renders the customize and download links', () => {
+ render();
+
+ const customizeIcons = screen.getAllByLabelText('Customize lesson');
+ expect(customizeIcons[0]).toBeInTheDocument();
+ expect(customizeIcons[1]).toBeInTheDocument();
+
+ const downloadIcons = screen.getAllByLabelText('Download lesson');
+ expect(downloadIcons[0]).toBeInTheDocument();
+ expect(downloadIcons[1]).toBeInTheDocument();
+ });
+});
diff --git a/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/unit.jsx b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/unit.jsx
deleted file mode 100644
index 312aca9c7f0..00000000000
--- a/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/unit.jsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import Pluralize from 'pluralize';
-import React from 'react';
-
-import { requestPut, } from '../../../../../modules/request/index';
-import AddClassroomActivityRow from './add_classroom_activity_row.jsx';
-import ClassroomActivity from './classroom_activity';
-
-export default class Unit extends React.Component {
- constructor(props) {
- super(props)
-
- this.state = {
- edit: false,
- unitName: (this.props.data.unitName || this.props.data.unit.name),
- savedUnitName: (this.props.data.unitName || this.props.data.unit.name),
- error: false,
- };
-
- }
-
- hideUnit = () => {
- const x = confirm('Are you sure you want to delete this Activity Pack? \n \nIt will delete all assignments given to students associated with this pack, even if those assignments have already been completed.');
- if (x) {
- this.props.hideUnit(this.getUnitId());
- }
- };
-
- assignedToText = () => {
- const dclassy = this.props.data.classrooms;
- // ensure classrooms is always an array as sometimes it is passed a set
- // and we need to do a number of things with it that are better with an array
- const classrooms = Array.isArray(dclassy) ? dclassy : Array.from(dclassy);
- const studentCount = this.props.data.num_students_assigned || this.props.data.studentCount;
- return (
- {`Assigned to ${studentCount} ${Pluralize('Student', studentCount)} in
- ${classrooms.length} ${Pluralize('class', classrooms.length)} (${classrooms.join(', ')}).`}
- );
- };
-
- editUnit = () => {
- this.props.editUnit(this.getUnitId());
- };
-
- deleteOrLockedInfo = () => {
- const firstCa = this.props.data.classroomActivities.values().next().value;
- const ownedByCurrentUser = firstCa.ownedByCurrentUser;
- if (!this.props.report && !this.props.lesson && ownedByCurrentUser) {
- return Delete;
- } else if (!ownedByCurrentUser) {
- return 
Created By {firstCa.ownerName};
- }
- };
-
- editName = () => {
- if (this.props.data.classroomActivities.values().next().value.ownedByCurrentUser) {
- let text,
- classy,
- inlineStyle;
- if (this.state.errors) {
- text = `${this.state.errors}. Click here to try again.`;
- classy = 'errors h-pointer';
- inlineStyle = { paddingTop: '4px', };
- } else {
- classy = 'edit-unit';
- text = 'Edit Name';
- }
- return {text};
- }
- };
-
- submitName = () => {
- return Submit;
- };
-
- dueDate = () => {
- if (!this.props.report && !this.props.lesson) {
- return Due Date;
- }
- };
-
- changeToEdit = () => {
- this.setState({ edit: true, });
- };
-
- handleNameChange = (e) => {
- this.setState({ unitName: e.target.value, });
- };
-
- editUnitName = () => {
- return ;
- };
-
- editStudentsLink = () => {
- return this.props.report || this.props.lesson ? null : Edit Classes & Students;
- };
-
- handleSubmit = () => {
- requestPut(
- `${process.env.DEFAULT_URL}/teachers/units/${this.props.data.unitId}`,
- { unit: { name: this.state.unitName, }, },
- (body) => {
- this.setState({
- edit: false,
- errors: undefined,
- savedUnitName: this.state.unitName,
- });
- },
- (body) => {
- this.setState({
- errors: body.errors,
- edit: false,
- unitName: this.state.savedUnitName,
- });
- }
- )
-
- };
-
- showUnitName = () => {
- return {this.state.unitName};
- };
-
- showOrEditName = () => {
- return this.state.edit ? this.editUnitName() : this.showUnitName();
- };
-
- nameActionLink = () => {
- if (this.state.edit) {
- return this.submitName();
- } else if (this.props.report || this.props.lesson) {
- return null;
- }
- return this.editName();
-
- // return this.state.edit ? this.submitName() : this.editName()
- };
-
- getUnitId = () => {
- return this.props.data.unitId || this.props.data.unit.id;
- };
-
- addClassroomActivityRow = () => {
- if (this.props.data.classroomActivities.values().next().value.ownedByCurrentUser) {
- return this.props.report || this.props.lesson ? null : ;
- }
- };
-
- renderClassroomActivities = () => {
- const classroomActivitiesArr = [];
- if (this.props.data.classroom_activities) {
- this.props.data.classroom_activities.forEach((ca) => {
- classroomActivitiesArr.push(
-
- );
- });
- } else if (this.props.data.classroomActivities) {
- this.props.data.classroomActivities.forEach((ca, key) => {
- classroomActivitiesArr.push(
-
- );
- })
- }
- return classroomActivitiesArr;
- };
-
- render() {
- if (this.props.data.classroomActivities.size === 0) {
- return null;
- }
-
- return (
-
-
-
- {this.showOrEditName()}
-
- {this.nameActionLink()}
- {this.deleteOrLockedInfo()}
-
-
- {this.assignedToText()}
- {this.editStudentsLink()}
- {this.dueDate()}
-
-
- {this.renderClassroomActivities()}
- {this.addClassroomActivityRow()}
-
-
- );
- }
-}
diff --git a/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/unit.tsx b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/unit.tsx
new file mode 100644
index 00000000000..869042f03c7
--- /dev/null
+++ b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/unit.tsx
@@ -0,0 +1,230 @@
+import Pluralize from 'pluralize';
+import React from 'react';
+
+import PreviewOrLaunchModal from '../../shared/preview_or_launch_modal';
+import { DataTable, DataTableChip, EXTRA_SMALL_ICON_BASE_SRC } from '../../../../Shared';
+
+const headers = [
+ {
+ name: 'Tool',
+ attribute: 'tool',
+ width: '42px',
+ isSortable: false,
+ noTooltip: true
+ },
+ {
+ name: 'Activity',
+ attribute: 'activity',
+ width: '646px',
+ isSortable: false,
+ noTooltip: true,
+ rowSectionClassName: 'lesson-activity',
+ headerClassName: 'lesson-activity-header'
+ },
+ {
+ name: 'Launch Lesson',
+ attribute: 'launchLesson',
+ width: '150px',
+ isSortable: false,
+ noTooltip: true,
+ rowSectionClassName: 'launch-lesson',
+ headerClassName: 'launch-lesson-header'
+ },
+ {
+ name: 'Customize',
+ attribute: 'customize',
+ width: '92px',
+ isSortable: false,
+ noTooltip: true
+ },
+ {
+ name: 'Download',
+ attribute: 'download',
+ width: '46px',
+ isSortable: false,
+ noTooltip: true
+ },
+]
+
+const sharedButtonClassName = "quill-button contained extra-small green focus-on-light"
+
+export const Unit = ({ data }) => {
+ const {
+ classroomActivities,
+ classroom_activities,
+ classrooms,
+ name,
+ num_students_assigned,
+ studentCount,
+ unit,
+ unitId,
+ unitName
+ } = data
+ const [lessonActivityId, setLessonActivityId] = React.useState(null)
+ const [showModal, setShowModal] = React.useState(false)
+
+ function assignedToText () {
+ // ensure classrooms is always an array as sometimes it is passed a set
+ // and we need to do a number of things with it that are better with an array
+ const classroomsArray = Array.isArray(classrooms) ? classrooms : Array.from(classrooms);
+ const studentCountData = num_students_assigned || studentCount;
+ return (
+
+
Assigned to
+
{`${studentCountData} ${Pluralize('Student', studentCountData)}`}
+
in
+
{`${classroomsArray.length} ${Pluralize('class', classroomsArray.length)} (${classroomsArray.join(', ')})`}
+
+ Created By {firstClassroomActivity.ownerName}
+
+ );
+ };
+
+ function handleDataTableChipClick(e, id) {
+ setLessonActivityId(id)
+ handleToggleModal()
+ }
+
+ function handleToggleModal() {
+ setShowModal(!showModal)
+ }
+
+ function getClassroomActivities() {
+ if (Object.keys(classroomActivities)) {
+ return classroomActivities
+ }
+ if (Object.keys(classroom_activities)) {
+ return classroom_activities
+ }
+ }
+
+ function getActivityId(lessonActivity) {
+ const { activityId, activityUid, activity } = lessonActivity
+ return activityId || activityUid || activity?.uid
+ }
+
+ function getClassroomUnitId(lessonActivity) {
+ const { cuId, classroom_unit_id } = lessonActivity
+ return cuId || classroom_unit_id
+ }
+
+ function renderModal() {
+ const activities = getClassroomActivities()
+ const lessonActivityData = activities.get(lessonActivityId)
+
+ if (!showModal || !(Object.keys(lessonActivityData).length)) { return }
+
+ return (
+
+ );
+ }
+
+ function renderActivityCell(lessonActivity, id) {
+ const { name, completed, started } = lessonActivity
+ const href = `/teachers/classroom_units/${getClassroomUnitId(lessonActivity)}/mark_lesson_as_completed/${id}`;
+ return(
+
+
handleDataTableChipClick(e, id)} />
+ {completed && Lesson Complete
+
+ )
+ }
+
+ function renderDownloadCell(id) {
+ return(
+
+ 
+
+ )
+ }
+
+ function renderClassroomActivities() {
+ const lessonsIcon = 
+ // this data is passed as a Map type so we need to use forEach to iterate through it and push the relevant data into an empty array to pass as the DataTable rows prop
+ const rows = [];
+ const activities = getClassroomActivities()
+ activities.forEach((lessonActivity) => {
+ const id = getActivityId(lessonActivity)
+ rows.push({
+ id,
+ tool: lessonsIcon,
+ activity: renderActivityCell(lessonActivity, id),
+ launchLesson: renderLaunchLessonCell(lessonActivity),
+ customize: renderCustomizeCell(id),
+ download: renderDownloadCell(id)
+ })
+ })
+ return (
+
+ )
+ };
+ return (
+
+ {renderModal()}
+
+
+ {unitName || name}
+
+
+ {lockedInfo()}
+ {assignedToText()}
+
+
+ {renderClassroomActivities()}
+
+
+ );
+}
+
+export default Unit