From d4b14b049d228f9376c426326629b203500c0322 Mon Sep 17 00:00:00 2001 From: Eric Adams Date: Thu, 5 Dec 2024 14:06:59 -0300 Subject: [PATCH 01/11] make some updates to launch lessons page --- .../assets/stylesheets/pages/my_lessons.scss | 49 ++++++++++++------- .../assignment_flow/classroom_lessons.jsx | 15 +++--- .../assignment_flow/manage_units/unit.jsx | 4 +- 3 files changed, 42 insertions(+), 26 deletions(-) diff --git a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss index 3f3e626bc75..dcb1a67da5d 100644 --- a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss +++ b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss @@ -2,25 +2,28 @@ section:last-of-type { padding-bottom: 5px; } - .my-lessons-header { - margin-top: 30px; - margin-bottom: 30px; - h1 { - font-weight: 600; - font-size: 30px; - margin-bottom: 10px; - } - p { - margin: 7px 0px; - font-size: 16px; - } - span { - font-weight: 600; + .top-section { + display: flex; + margin: 32px 0px; + .my-lessons-header { + h1 { + @include display-xl; + margin-bottom: 10px; + } + p { + margin: 7px 0px; + @include text-s; + } + span { + font-weight: 600; + } + a { + color: #027360; + text-decoration: underline; + } } - a { - color: #027360; - font-weight: 600; - text-decoration: underline; + .dropdown-container { + min-width: 190px; } } #launch-lesson { @@ -71,6 +74,16 @@ display: none; } } + .lesson-unit-container { + border-radius: 8px; + border: 1px solid $quill-grey-15; + padding: 32px !important; + .unit-header-container { + .unit-name { + @include display-l; + } + } + } } .empty-lessons { diff --git a/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx index 77e8833344c..26a290c8504 100644 --- a/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx +++ b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx @@ -235,12 +235,15 @@ export default class ClassroomLessons extends React.Component { return (
- {this.renderHeader()} - classy.id === selectedClassroomId)} - /> +
+ {this.renderHeader()} + classy.id === selectedClassroomId)} + /> +
-
+
+
{this.showOrEditName()} From 7e69ac9262dca000c72711ef2219ef6e4ee72b2d Mon Sep 17 00:00:00 2001 From: Eric Adams Date: Thu, 5 Dec 2024 18:06:09 -0300 Subject: [PATCH 02/11] update empty state --- .../assets/stylesheets/pages/my_lessons.scss | 47 ++++++++++++++++++- .../stylesheets/shared/feedback-note.scss | 4 +- .../assignment_flow/classroom_lessons.jsx | 28 ++++++----- .../assignment_flow/manage_units/unit.jsx | 29 +++++++----- 4 files changed, 81 insertions(+), 27 deletions(-) diff --git a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss index dcb1a67da5d..571ee7ee5db 100644 --- a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss +++ b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss @@ -76,12 +76,57 @@ } .lesson-unit-container { border-radius: 8px; - border: 1px solid $quill-grey-15; + border: 1px solid $quill-grey-15 !important; padding: 32px !important; + margin-bottom: 32px; .unit-header-container { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 24px; .unit-name { @include display-l; } + .assigned-to { + display: flex; + @include text-s; + color: $quill-grey-50; + span:first-of-type { + margin: 0px 2px; + } + span:last-of-type { + margin-left: 2px; + } + span { + font-weight: 700; + } + } + } + } + .empty-lessons-content { + display: flex; + align-items: center; + flex-direction: column; + padding: 128px 0px; + + h2 { + font-size: 20px; + font-weight: 700; + line-height: normal; + } + + p { + margin-top: 8px; + font-size: 14px; + font-weight: 400; + line-height: normal; + color: $quill-grey-50; + } + .buttons { + margin-top: 24px; + .quill-button:first-of-type { + margin-right: 8px; + } } } } diff --git a/services/QuillLMS/app/assets/stylesheets/shared/feedback-note.scss b/services/QuillLMS/app/assets/stylesheets/shared/feedback-note.scss index 84e25a1d859..715f459b0cb 100644 --- a/services/QuillLMS/app/assets/stylesheets/shared/feedback-note.scss +++ b/services/QuillLMS/app/assets/stylesheets/shared/feedback-note.scss @@ -1,9 +1,7 @@ .feedback-note { - border-top: solid 1px #c0c0c0; - padding-top: 20px; + color: $quill-grey-50; a { color: #027360; - font-weight: 600; text-decoration: underline; } } diff --git a/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx index 26a290c8504..5f72ad5d24c 100644 --- a/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx +++ b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx @@ -187,20 +187,26 @@ export default class ClassroomLessons extends React.Component { } renderEmptyState() { - const assignLessonsLink = Assign Lessons // eslint-disable-line react/jsx-no-target-blank - const learnMoreLink = Learn More // eslint-disable-line react/jsx-no-target-blank + const assignLessonsLink = Assign Lessons + const learnMoreLink = Learn More return ( -
-
-

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} +
+
+
+
+

Launch Lessons

+
+
+
+

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} +
- cartoon of a teacher gesturing at a projector screen showing Quill Lessons content
); } 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 index ed48453fb5e..3811514c40e 100644 --- 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 @@ -26,15 +26,20 @@ export default class Unit extends React.Component { }; assignedToText = () => { - const dclassy = this.props.data.classrooms; + const { data } = this.props + const { classrooms, num_students_assigned, studentCount } = data // 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(', ')}).`}
- ); + 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(', ')})`} +
+ ) }; editUnit = () => { @@ -194,11 +199,11 @@ export default class Unit extends React.Component { {this.nameActionLink()} {this.deleteOrLockedInfo()} -
-
- {this.assignedToText()} - {this.editStudentsLink()} - {this.dueDate()} +
+ {this.assignedToText()} + {this.editStudentsLink()} + {this.dueDate()} +
{this.renderClassroomActivities()} From b736c48fbbf3afdd390b1595576a674af0d55aeb Mon Sep 17 00:00:00 2001 From: Eric Adams Date: Mon, 9 Dec 2024 14:38:30 -0300 Subject: [PATCH 03/11] refactor Unit component, add onClick to DataTableChip --- .../assets/stylesheets/pages/my_lessons.scss | 11 + .../components/shared/dataTableChip.tsx | 13 +- .../assignment_flow/classroom_lessons.jsx | 1 + .../assignment_flow/manage_units/unit.jsx | 354 +++++++++--------- 4 files changed, 193 insertions(+), 186 deletions(-) diff --git a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss index 571ee7ee5db..e44355f1b80 100644 --- a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss +++ b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss @@ -102,6 +102,17 @@ } } } + .lesson-activities-table { + .data-table-chip { + max-width: 300px; + width: max-content; + p { + text-overflow: unset; + white-space: break-spaces; + text-align: left; + } + } + } } .empty-lessons-content { display: flex; diff --git a/services/QuillLMS/client/app/bundles/Shared/components/shared/dataTableChip.tsx b/services/QuillLMS/client/app/bundles/Shared/components/shared/dataTableChip.tsx index 9bc61f49b06..d3f9d364b0a 100644 --- a/services/QuillLMS/client/app/bundles/Shared/components/shared/dataTableChip.tsx +++ b/services/QuillLMS/client/app/bundles/Shared/components/shared/dataTableChip.tsx @@ -7,10 +7,11 @@ interface DataTableChipProps { src: string }, label: string, - link?: string + link?: string, + onClick?: () => void } -export const DataTableChip = ({ color, icon, label, link }: DataTableChipProps) => { +export const DataTableChip = ({ color, icon, label, link, onClick }: DataTableChipProps) => { if(link) { return( @@ -19,6 +20,14 @@ export const DataTableChip = ({ color, icon, label, link }: DataTableChipProps) ) } + if (onClick) { + return ( + + ) + } return (
{icon && {icon.alt}} diff --git a/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx index 5f72ad5d24c..829011ccc57 100644 --- a/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx +++ b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx @@ -234,6 +234,7 @@ export default class ClassroomLessons extends React.Component { } render() { + console.log('classroom lessons component') const { empty, loaded, classrooms, lessons, selectedClassroomId, } = this.state if (empty) { return this.renderEmptyState(); 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 index 3811514c40e..d36aeffb216 100644 --- 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 @@ -1,38 +1,104 @@ 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 { data } = this.props - const { classrooms, num_students_assigned, studentCount } = data +import PreviewOrLaunchModal from '../../shared/preview_or_launch_modal'; +import { DataTable, DataTableChip, SMALL_ICON_BASE_SRC } from '../../../../Shared'; + +const headers = [ + { + name: 'Tool', + attribute: 'tool', + width: '42px', + isSortable: false, + noTooltip: true + }, + { + name: 'Activity', + attribute: 'activity', + width: '678px', + isSortable: false, + noTooltip: true + }, + { + name: 'Launch Lesson', + attribute: 'launchLesson', + width: '118px', + isSortable: false, + noTooltip: true + }, + { + name: 'Customize', + attribute: 'customize', + width: '92px', + isSortable: false, + noTooltip: true + }, + { + name: 'Download', + attribute: 'download', + width: '46px', + isSortable: false, + noTooltip: true + }, +] + +// 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; +// }; + +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( + return (

Assigned to

{`${studentCountData} ${Pluralize('Student', studentCountData)}`} @@ -42,174 +108,94 @@ export default class Unit extends React.Component { ) }; - 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}; + function deleteOrLockedInfo () { + const firstCa = classroomActivities.values().next().value; + const ownedByCurrentUser = firstCa?.ownedByCurrentUser; + 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}; - } - }; + function handleDataTableChipClick(e, id) { + setLessonActivityId(id) + handleToggleModal() + } - submitName = () => { - return Submit; - }; + function handleToggleModal() { + setShowModal(!showModal) + } - dueDate = () => { - if (!this.props.report && !this.props.lesson) { - return Due Date; + function getClassroomActivities() { + if (Object.keys(classroomActivities)) { + return classroomActivities } - }; - - 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; + if (Object.keys(classroom_activities)) { + return classroom_activities } - return this.editName(); - - // return this.state.edit ? this.submitName() : this.editName() - }; + } - getUnitId = () => { - return this.props.data.unitId || this.props.data.unit.id; - }; + function renderModal() { + const activities = getClassroomActivities() + const lessonActivityData = activities.get(lessonActivityId) - addClassroomActivityRow = () => { - if (this.props.data.classroomActivities.values().next().value.ownedByCurrentUser) { - return this.props.report || this.props.lesson ? null : ; - } - }; + if (!showModal || !(Object.keys(lessonActivityData).length)) { return } - 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; - }; + const { cuId, classroom_unit_id, completed, activity, activityId, activityUid } = lessonActivityData + return ( + + ); + } - render() { - if (this.props.data.classroomActivities.size === 0) { - return null; - } + function renderActivityCell(name, id) { + return handleDataTableChipClick(e, id)} /> + } + function renderClassroomActivities() { + const lessonsIcon = lessons icon + const rows = []; + const activities = getClassroomActivities() + activities.forEach((ca) => { + const { name, activityId, activityUid, activity } = ca + const id = activityId || activityUid || activity?.uid + rows.push({ + id, + tool: lessonsIcon, + activity: renderActivityCell(name, id), + launchLessons: '', + customize: '', + download: '' + }) + }) return ( -
-
- - {this.showOrEditName()} - - {this.nameActionLink()} - {this.deleteOrLockedInfo()} -
- {this.assignedToText()} - {this.editStudentsLink()} - {this.dueDate()} -
-
-
- {this.renderClassroomActivities()} - {this.addClassroomActivityRow()} + + ) + }; + return ( +
+ {renderModal()} +
+ + {unitName || name} + + {deleteOrLockedInfo()} +
+ {assignedToText()}
-
- ); - } +
+
+ {renderClassroomActivities()} +
+
+ ); } + +export default Unit From f713e251725a82f51aca034f9bf32997e2b685f7 Mon Sep 17 00:00:00 2001 From: Eric Adams Date: Tue, 10 Dec 2024 12:38:59 -0300 Subject: [PATCH 04/11] fix classroom unit id --- .../assets/stylesheets/pages/my_lessons.scss | 71 +++++++++++++---- .../assignment_flow/manage_units/unit.jsx | 77 +++++++++++++++---- 2 files changed, 118 insertions(+), 30 deletions(-) diff --git a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss index e44355f1b80..98f1c3b99fe 100644 --- a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss +++ b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss @@ -87,31 +87,72 @@ .unit-name { @include display-l; } - .assigned-to { + .assigned-student-info { display: flex; + color: $quill-grey-90; @include text-s; - color: $quill-grey-50; - span:first-of-type { - margin: 0px 2px; + .locked-info { + display: flex; + border-right: 1px solid $quill-grey-15; + padding-right: 16px; + img { + margin-right: 4px; + } } - span:last-of-type { - margin-left: 2px; + .assigned-to { + display: flex; + @include text-s; + color: $quill-grey-50; + span:first-of-type { + margin: 0px 2px; + } + span:last-of-type { + margin-left: 2px; + } + span { + font-weight: 700; + } } - span { - font-weight: 700; + } + .assigned-student-info:has(.locked-info) { + .assigned-to { + padding-left: 16px; } } } .lesson-activities-table { - .data-table-chip { - max-width: 300px; - width: max-content; - p { - text-overflow: unset; - white-space: break-spaces; - text-align: left; + .data-table-body .data-table-row .data-table-row-section { + &:has(.quill-tooltip) { + overflow: visible; + } + } + .activity-cell-container { + display: flex; + justify-content: space-between; + width: 100%; + .data-table-chip { + max-width: 480px; + width: max-content; + p { + text-overflow: unset; + white-space: break-spaces; + text-align: left; + } + } + .lesson-complete { + display: flex; + align-items: center; + p { + color: $quill-green-vibrant; + font-size: 13px; + font-weight: 700; + margin-right: 8px; + } } } + .launch-lesson a { + color: $quill-white; + } } } .empty-lessons-content { 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 index d36aeffb216..3b6f7f30bdc 100644 --- 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 @@ -2,7 +2,7 @@ import Pluralize from 'pluralize'; import React from 'react'; import PreviewOrLaunchModal from '../../shared/preview_or_launch_modal'; -import { DataTable, DataTableChip, SMALL_ICON_BASE_SRC } from '../../../../Shared'; +import { DataTable, DataTableChip, EXTRA_SMALL_ICON_BASE_SRC, SMALL_ICON_BASE_SRC, Tooltip } from '../../../../Shared'; const headers = [ { @@ -15,16 +15,17 @@ const headers = [ { name: 'Activity', attribute: 'activity', - width: '678px', + width: '646px', isSortable: false, noTooltip: true }, { name: 'Launch Lesson', attribute: 'launchLesson', - width: '118px', + width: '150px', isSortable: false, - noTooltip: true + noTooltip: true, + rowSectionClassName: 'launch-lesson' }, { name: 'Customize', @@ -108,11 +109,16 @@ export const Unit = ({ data }) => { ) }; - function deleteOrLockedInfo () { + function lockedInfo () { const firstCa = classroomActivities.values().next().value; const ownedByCurrentUser = firstCa?.ownedByCurrentUser; if (!ownedByCurrentUser) { - return Created By {firstCa.ownerName}; + return( + + + Created By {firstCa.ownerName} + + ); } }; @@ -134,6 +140,11 @@ export const Unit = ({ data }) => { } } + function getActivityId(lessonActivity) { + const { activityId, activityUid, activity } = lessonActivity + return activityId || activityUid || activity?.uid + } + function renderModal() { const activities = getClassroomActivities() const lessonActivityData = activities.get(lessonActivityId) @@ -151,23 +162,59 @@ export const Unit = ({ data }) => { ); } - function renderActivityCell(name, id) { - return handleDataTableChipClick(e, id)} /> + function renderActivityCell(lessonActivity, id) { + const { name, completed } = lessonActivity + return( +
+ handleDataTableChipClick(e, id)} /> + {completed &&

Lesson Complete

} +
+ ) + } + + function handleLaunchLessonWithNoStudents(e, activityId, classroomUnitId) { + if (window.confirm("You have no students in this class. Quill Lessons is a collaborative tool for teachers and students to work together. If you'd like to launch this lesson anyway, click OK below. Otherwise, click Cancel.")) { + window.location.href = `${process.env.DEFAULT_URL}/teachers/classroom_units/${classroomUnitId}/launch_lesson/${activityId}`; + } + } + + function renderLaunchLessonCell(lessonActivity) { + const { completed, studentCount, started, cuId, classroom_unit_id } = lessonActivity + const activityId = getActivityId(lessonActivity) + const classroomUnitId = cuId || classroom_unit_id + const className = "quill-button contained extra-small green focus-on-light" + if (completed) { + return View Report; + } + if (studentCount === 0) { + return handleLaunchLessonWithNoStudents(e, activityId, classroomUnitId)}>{started ? 'Resume Lesson' : 'Launch Lesson'}; + } + if (started) { + return Resume Lesson; + } + return Launch Lesson; + } + + function renderCustomizeCell(id) { + return( + + } /> + + ) } function renderClassroomActivities() { const lessonsIcon = lessons icon const rows = []; const activities = getClassroomActivities() - activities.forEach((ca) => { - const { name, activityId, activityUid, activity } = ca - const id = activityId || activityUid || activity?.uid + activities.forEach((lessonActivity) => { + const id = getActivityId(lessonActivity) rows.push({ id, tool: lessonsIcon, - activity: renderActivityCell(name, id), - launchLessons: '', - customize: '', + activity: renderActivityCell(lessonActivity, id), + launchLesson: renderLaunchLessonCell(lessonActivity), + customize: renderCustomizeCell(id), download: '' }) }) @@ -186,8 +233,8 @@ export const Unit = ({ data }) => { {unitName || name} - {deleteOrLockedInfo()}
+ {lockedInfo()} {assignedToText()}
From 1bb2cd34eda8ff256b256af8a4aa799a505ad583 Mon Sep 17 00:00:00 2001 From: Eric Adams Date: Tue, 10 Dec 2024 14:02:39 -0300 Subject: [PATCH 05/11] add download icon --- .../assets/images/icons/xs/arrow-down.svg | 3 + .../assets/images/icons/xs/pencil.svg | 3 + .../assets/images/icons/xs/tool-connect.svg | 3 + .../assets/stylesheets/pages/my_lessons.scss | 49 ++++------- .../assignment_flow/manage_units/unit.jsx | 83 ++++++++----------- 5 files changed, 57 insertions(+), 84 deletions(-) create mode 100644 packages/quill-cdn/assets/images/icons/xs/arrow-down.svg create mode 100644 packages/quill-cdn/assets/images/icons/xs/pencil.svg create mode 100644 packages/quill-cdn/assets/images/icons/xs/tool-connect.svg diff --git a/packages/quill-cdn/assets/images/icons/xs/arrow-down.svg b/packages/quill-cdn/assets/images/icons/xs/arrow-down.svg new file mode 100644 index 00000000000..1ff9dae0340 --- /dev/null +++ b/packages/quill-cdn/assets/images/icons/xs/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/quill-cdn/assets/images/icons/xs/pencil.svg b/packages/quill-cdn/assets/images/icons/xs/pencil.svg new file mode 100644 index 00000000000..ec1a469a707 --- /dev/null +++ b/packages/quill-cdn/assets/images/icons/xs/pencil.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/quill-cdn/assets/images/icons/xs/tool-connect.svg b/packages/quill-cdn/assets/images/icons/xs/tool-connect.svg new file mode 100644 index 00000000000..bad7ca41da0 --- /dev/null +++ b/packages/quill-cdn/assets/images/icons/xs/tool-connect.svg @@ -0,0 +1,3 @@ + + + diff --git a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss index 98f1c3b99fe..20fc197e65d 100644 --- a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss +++ b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss @@ -26,37 +26,6 @@ min-width: 190px; } } - #launch-lesson { - height: 40px; - color: white; - font-size: 14px; - font-weight: bold; - width: 145px; - border-radius: 3px; - background-color: #00c2a2; - display: flex; - align-items: center; - justify-content: center; - } - .lesson-completed { - margin-right: 8px; - color: #82bf3c; - font-weight: 600; - width: 160px; - } - .resume-lesson { - width: 145px; - height: 40px; - border-radius: 3px; - background-color: $quill-white; - border: solid 1px #00c2a2; - font-weight: bold; - color: #00c2a2 !important; - margin-right: 30px; - display: flex; - justify-content: center; - align-items: center; - } .customized-editions-tag { width: 90px; height: 23px; @@ -121,9 +90,21 @@ } } .lesson-activities-table { + .data-table-headers .data-table-header { + &.lesson-activity-header, &.launch-lesson-header { + span { + margin-left: 8px; + } + } + } .data-table-body .data-table-row .data-table-row-section { - &:has(.quill-tooltip) { - overflow: visible; + .customize-link, .download-link { + margin-left: 22px; + } + &.launch-lesson, &.lesson-activity { + a, .activity-cell-container { + margin-left: 8px; + } } } .activity-cell-container { @@ -150,7 +131,7 @@ } } } - .launch-lesson a { + a { color: $quill-white; } } 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 index 3b6f7f30bdc..1bd99071c8d 100644 --- 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 @@ -2,7 +2,7 @@ import Pluralize from 'pluralize'; import React from 'react'; import PreviewOrLaunchModal from '../../shared/preview_or_launch_modal'; -import { DataTable, DataTableChip, EXTRA_SMALL_ICON_BASE_SRC, SMALL_ICON_BASE_SRC, Tooltip } from '../../../../Shared'; +import { DataTable, DataTableChip, EXTRA_SMALL_ICON_BASE_SRC, SMALL_ICON_BASE_SRC } from '../../../../Shared'; const headers = [ { @@ -17,7 +17,9 @@ const headers = [ attribute: 'activity', width: '646px', isSortable: false, - noTooltip: true + noTooltip: true, + rowSectionClassName: 'lesson-activity', + headerClassName: 'lesson-activity-header' }, { name: 'Launch Lesson', @@ -25,7 +27,8 @@ const headers = [ width: '150px', isSortable: false, noTooltip: true, - rowSectionClassName: 'launch-lesson' + rowSectionClassName: 'launch-lesson', + headerClassName: 'launch-lesson-header' }, { name: 'Customize', @@ -43,41 +46,7 @@ const headers = [ }, ] -// 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; -// }; +const sharedButtonClassName = "quill-button contained extra-small green focus-on-light" export const Unit = ({ data }) => { const { @@ -145,6 +114,11 @@ export const Unit = ({ data }) => { 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) @@ -163,11 +137,13 @@ export const Unit = ({ data }) => { } function renderActivityCell(lessonActivity, id) { - const { name, completed } = lessonActivity + const { name, completed, started } = lessonActivity + const href = `/teachers/classroom_units/${getClassroomUnitId(lessonActivity)}/mark_lesson_as_completed/${id}`; return(
handleDataTableChipClick(e, id)} /> {completed &&

Lesson Complete

} + {started && Mark As Complete}
) } @@ -179,32 +155,39 @@ export const Unit = ({ data }) => { } function renderLaunchLessonCell(lessonActivity) { - const { completed, studentCount, started, cuId, classroom_unit_id } = lessonActivity + const { completed, studentCount, started } = lessonActivity const activityId = getActivityId(lessonActivity) - const classroomUnitId = cuId || classroom_unit_id - const className = "quill-button contained extra-small green focus-on-light" + const classroomUnitId = getClassroomUnitId(lessonActivity) if (completed) { - return View Report; + return View Report; } if (studentCount === 0) { - return handleLaunchLessonWithNoStudents(e, activityId, classroomUnitId)}>{started ? 'Resume Lesson' : 'Launch Lesson'}; + return handleLaunchLessonWithNoStudents(e, activityId, classroomUnitId)}>{started ? 'Resume Lesson' : 'Launch Lesson'}; } if (started) { - return Resume Lesson; + return Resume Lesson; } - return Launch Lesson; + return Launch Lesson; } function renderCustomizeCell(id) { return( - - } /> + + extra small pencil icon + + ) + } + + function renderDownloadCell(id) { + return( + + extra small pencil icon ) } function renderClassroomActivities() { - const lessonsIcon = lessons icon + const lessonsIcon = lessons icon const rows = []; const activities = getClassroomActivities() activities.forEach((lessonActivity) => { @@ -215,7 +198,7 @@ export const Unit = ({ data }) => { activity: renderActivityCell(lessonActivity, id), launchLesson: renderLaunchLessonCell(lessonActivity), customize: renderCustomizeCell(id), - download: '' + download: renderDownloadCell(id) }) }) return ( From f61779d3598f9f43e031c0aea48cd3eaaa4a899c Mon Sep 17 00:00:00 2001 From: Eric Adams Date: Tue, 10 Dec 2024 18:46:48 -0300 Subject: [PATCH 06/11] add tests --- .../assets/images/icons/xs/tool-lessons.svg | 3 + .../components/shared/dataTableChip.tsx | 2 +- .../assignment_flow/classroom_lessons.jsx | 1 - .../manage_units/__tests__/unit.test.tsx | 79 +++++++++++++++++++ .../manage_units/{unit.jsx => unit.tsx} | 6 +- 5 files changed, 86 insertions(+), 5 deletions(-) create mode 100644 packages/quill-cdn/assets/images/icons/xs/tool-lessons.svg create mode 100644 services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/__tests__/unit.test.tsx rename services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/{unit.jsx => unit.tsx} (97%) diff --git a/packages/quill-cdn/assets/images/icons/xs/tool-lessons.svg b/packages/quill-cdn/assets/images/icons/xs/tool-lessons.svg new file mode 100644 index 00000000000..daeded04bb9 --- /dev/null +++ b/packages/quill-cdn/assets/images/icons/xs/tool-lessons.svg @@ -0,0 +1,3 @@ + + + diff --git a/services/QuillLMS/client/app/bundles/Shared/components/shared/dataTableChip.tsx b/services/QuillLMS/client/app/bundles/Shared/components/shared/dataTableChip.tsx index d3f9d364b0a..08ba6b0cef3 100644 --- a/services/QuillLMS/client/app/bundles/Shared/components/shared/dataTableChip.tsx +++ b/services/QuillLMS/client/app/bundles/Shared/components/shared/dataTableChip.tsx @@ -8,7 +8,7 @@ interface DataTableChipProps { }, label: string, link?: string, - onClick?: () => void + onClick?: (e: any) => void } export const DataTableChip = ({ color, icon, label, link, onClick }: DataTableChipProps) => { diff --git a/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx index 829011ccc57..5f72ad5d24c 100644 --- a/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx +++ b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx @@ -234,7 +234,6 @@ export default class ClassroomLessons extends React.Component { } render() { - console.log('classroom lessons component') const { empty, loaded, classrooms, lessons, selectedClassroomId, } = this.state if (empty) { return this.renderEmptyState(); diff --git a/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/__tests__/unit.test.tsx b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/__tests__/unit.test.tsx new file mode 100644 index 00000000000..f430be44978 --- /dev/null +++ b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/__tests__/unit.test.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import Unit from '../unit'; + +const mockData = { + classroomActivities: new Map([ + [ + '1', + { + name: 'Activity 1', + completed: false, + started: false, + studentCount: 10, + ownedByCurrentUser: true, + ownerName: 'Teacher A', + activityId: 'a1', + classroom_unit_id: 'cu1', + }, + ], + [ + '2', + { + name: 'Activity 2', + completed: true, + started: true, + studentCount: 0, + ownedByCurrentUser: false, + ownerName: 'Teacher B', + activityId: 'a2', + classroom_unit_id: 'cu2', + }, + ], + ]), + classrooms: ['Class 1', 'Class 2'], + num_students_assigned: 20, + unitName: 'Sample Unit', + unitId: 'unit1', +}; + +describe('Unit Component', () => { + it('renders the unit name and assigned information', () => { + render(); + + 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.getAllByAltText('extra small pencil icon'); + expect(customizeIcons[0]).toBeInTheDocument(); + expect(customizeIcons[1]).toBeInTheDocument(); + + const downloadIcons = screen.getAllByAltText('extra small arrow down icon'); + 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.tsx similarity index 97% rename from services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/unit.jsx rename to services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/unit.tsx index 1bd99071c8d..7ac0e18fdf3 100644 --- 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.tsx @@ -2,7 +2,7 @@ import Pluralize from 'pluralize'; import React from 'react'; import PreviewOrLaunchModal from '../../shared/preview_or_launch_modal'; -import { DataTable, DataTableChip, EXTRA_SMALL_ICON_BASE_SRC, SMALL_ICON_BASE_SRC } from '../../../../Shared'; +import { DataTable, DataTableChip, EXTRA_SMALL_ICON_BASE_SRC } from '../../../../Shared'; const headers = [ { @@ -60,7 +60,7 @@ export const Unit = ({ data }) => { unitId, unitName } = data - const [lessonActivityId, setLessonActivityId] = React.useState(null) + const [lessonActivityId, setLessonActivityId] = React.useState(null) const [showModal, setShowModal] = React.useState(false) function assignedToText () { @@ -181,7 +181,7 @@ export const Unit = ({ data }) => { function renderDownloadCell(id) { return( - extra small pencil icon + extra small arrow down icon ) } From 2d43d4d38b7a57568b6e876d67b91430a8b5a1f8 Mon Sep 17 00:00:00 2001 From: Eric Adams Date: Tue, 10 Dec 2024 18:55:15 -0300 Subject: [PATCH 07/11] fix linter errors --- .../components/assignment_flow/manage_units/unit.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) 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 index 7ac0e18fdf3..df3389c1b6c 100644 --- 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 @@ -125,13 +125,12 @@ export const Unit = ({ data }) => { if (!showModal || !(Object.keys(lessonActivityData).length)) { return } - const { cuId, classroom_unit_id, completed, activity, activityId, activityUid } = lessonActivityData return ( ); } From 32fe205f015c8b8b56dbab4dffad419c4224a0ae Mon Sep 17 00:00:00 2001 From: Eric Adams Date: Tue, 10 Dec 2024 18:59:00 -0300 Subject: [PATCH 08/11] early return --- .../assignment_flow/manage_units/unit.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) 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 index df3389c1b6c..2d60412fa26 100644 --- 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 @@ -81,14 +81,13 @@ export const Unit = ({ data }) => { function lockedInfo () { const firstCa = classroomActivities.values().next().value; const ownedByCurrentUser = firstCa?.ownedByCurrentUser; - if (!ownedByCurrentUser) { - return( - - - Created By {firstCa.ownerName} - - ); - } + if(ownedByCurrentUser) { return } + return( + + + Created By {firstCa.ownerName} + + ); }; function handleDataTableChipClick(e, id) { From 1868360682c3882e1fce729892c48acc805cab96 Mon Sep 17 00:00:00 2001 From: Eric Adams Date: Wed, 11 Dec 2024 19:25:50 -0300 Subject: [PATCH 09/11] suggested refactors and small CSS tweaks --- .../assets/stylesheets/pages/my_lessons.scss | 25 +++++++++++-------- .../stylesheets/shared/table/react-table.scss | 4 +-- .../__snapshots__/dataTableChip.test.tsx.snap | 4 +-- .../components/shared/dataTableChip.tsx | 8 +++--- .../app/bundles/Shared/styles/data_table.scss | 4 +-- .../manage_units/__tests__/unit.test.tsx | 5 ++-- .../assignment_flow/manage_units/unit.tsx | 11 ++++---- 7 files changed, 34 insertions(+), 27 deletions(-) diff --git a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss index 20fc197e65d..07beb972709 100644 --- a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss +++ b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss @@ -4,7 +4,7 @@ } .top-section { display: flex; - margin: 32px 0px; + margin: 32px 0px 64px 0px; .my-lessons-header { h1 { @include display-xl; @@ -18,7 +18,7 @@ font-weight: 600; } a { - color: #027360; + color: $quill-green-dark; text-decoration: underline; } } @@ -71,7 +71,7 @@ .assigned-to { display: flex; @include text-s; - color: $quill-grey-50; + color: $quill-grey-90; span:first-of-type { margin: 0px 2px; } @@ -89,12 +89,18 @@ } } } + .table { + &.assigned-activities { + margin-bottom: 0px; + } + } .lesson-activities-table { .data-table-headers .data-table-header { - &.lesson-activity-header, &.launch-lesson-header { - span { - margin-left: 8px; - } + &.lesson-activity-header span { + margin-left: 8px; + } + &.launch-lesson-header span { + margin-left: 18px; } } .data-table-body .data-table-row .data-table-row-section { @@ -114,7 +120,7 @@ .data-table-chip { max-width: 480px; width: max-content; - p { + span { text-overflow: unset; white-space: break-spaces; text-align: left; @@ -149,9 +155,8 @@ } p { + @include text-s; margin-top: 8px; - font-size: 14px; - font-weight: 400; line-height: normal; color: $quill-grey-50; } diff --git a/services/QuillLMS/app/assets/stylesheets/shared/table/react-table.scss b/services/QuillLMS/app/assets/stylesheets/shared/table/react-table.scss index ca2dd174538..97efcf4e745 100644 --- a/services/QuillLMS/app/assets/stylesheets/shared/table/react-table.scss +++ b/services/QuillLMS/app/assets/stylesheets/shared/table/react-table.scss @@ -26,11 +26,11 @@ &.grey { background-color: $quill-grey-1; border: 1px solid $quill-grey-15; - p { + span { color: $quill-grey-90; } } - p { + span { @include display-xs; color: $quill-green; margin-left: 4px; diff --git a/services/QuillLMS/client/app/bundles/Shared/components/shared/__tests__/__snapshots__/dataTableChip.test.tsx.snap b/services/QuillLMS/client/app/bundles/Shared/components/shared/__tests__/__snapshots__/dataTableChip.test.tsx.snap index 05124a565b9..9be58d46c3a 100644 --- a/services/QuillLMS/client/app/bundles/Shared/components/shared/__tests__/__snapshots__/dataTableChip.test.tsx.snap +++ b/services/QuillLMS/client/app/bundles/Shared/components/shared/__tests__/__snapshots__/dataTableChip.test.tsx.snap @@ -5,9 +5,9 @@ exports[`DataTableChip it should render 1`] = `
-

+ test label -

+
`; diff --git a/services/QuillLMS/client/app/bundles/Shared/components/shared/dataTableChip.tsx b/services/QuillLMS/client/app/bundles/Shared/components/shared/dataTableChip.tsx index 08ba6b0cef3..4e6f72738f8 100644 --- a/services/QuillLMS/client/app/bundles/Shared/components/shared/dataTableChip.tsx +++ b/services/QuillLMS/client/app/bundles/Shared/components/shared/dataTableChip.tsx @@ -16,22 +16,22 @@ export const DataTableChip = ({ color, icon, label, link, onClick }: DataTableCh return( {icon && {icon.alt}} -

{label}

+ {label} ) } if (onClick) { return ( - ) } return (
{icon && {icon.alt}} -

{label}

+ {label}
) } diff --git a/services/QuillLMS/client/app/bundles/Shared/styles/data_table.scss b/services/QuillLMS/client/app/bundles/Shared/styles/data_table.scss index 76751b1545c..4024bfdfe3c 100644 --- a/services/QuillLMS/client/app/bundles/Shared/styles/data_table.scss +++ b/services/QuillLMS/client/app/bundles/Shared/styles/data_table.scss @@ -162,12 +162,12 @@ table.data-table { background-color: $quill-grey-1; border: 1px solid $quill-grey-15; - p { + span { color: $quill-grey-90; } } - p { + span { @include display-xs; color: $quill-green; margin-left: 4px; diff --git a/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/__tests__/unit.test.tsx b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/__tests__/unit.test.tsx index f430be44978..43852752b5e 100644 --- a/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/__tests__/unit.test.tsx +++ b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/__tests__/unit.test.tsx @@ -41,6 +41,7 @@ const mockData = { describe('Unit Component', () => { 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(); @@ -68,11 +69,11 @@ describe('Unit Component', () => { it('renders the customize and download links', () => { render(); - const customizeIcons = screen.getAllByAltText('extra small pencil icon'); + const customizeIcons = screen.getAllByLabelText('Customize lesson'); expect(customizeIcons[0]).toBeInTheDocument(); expect(customizeIcons[1]).toBeInTheDocument(); - const downloadIcons = screen.getAllByAltText('extra small arrow down icon'); + 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.tsx b/services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/manage_units/unit.tsx index 2d60412fa26..869042f03c7 100644 --- 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 @@ -79,13 +79,13 @@ export const Unit = ({ data }) => { }; function lockedInfo () { - const firstCa = classroomActivities.values().next().value; - const ownedByCurrentUser = firstCa?.ownedByCurrentUser; + const firstClassroomActivity = classroomActivities.values().next().value; + const ownedByCurrentUser = firstClassroomActivity?.ownedByCurrentUser; if(ownedByCurrentUser) { return } return( - Created By {firstCa.ownerName} + Created By {firstClassroomActivity.ownerName} ); }; @@ -170,7 +170,7 @@ export const Unit = ({ data }) => { function renderCustomizeCell(id) { return( - + extra small pencil icon ) @@ -178,7 +178,7 @@ export const Unit = ({ data }) => { function renderDownloadCell(id) { return( - + extra small arrow down icon ) @@ -186,6 +186,7 @@ export const Unit = ({ data }) => { function renderClassroomActivities() { const lessonsIcon = lessons icon + // 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) => { From 555d7058b1955a14c9de0dbcf86cc40fd1a08765 Mon Sep 17 00:00:00 2001 From: Eric Adams Date: Thu, 12 Dec 2024 17:48:24 -0300 Subject: [PATCH 10/11] small tweaks --- .../QuillLMS/app/assets/stylesheets/pages/my_lessons.scss | 6 ++++++ .../components/assignment_flow/manage_units/unit.tsx | 4 ++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss index 07beb972709..c114f523c08 100644 --- a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss +++ b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss @@ -111,6 +111,12 @@ a, .activity-cell-container { margin-left: 8px; } + .quill-button { + min-width: 118px; + } + } + .lessons-icon { + margin-left: 4px; } } .activity-cell-container { 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 index 869042f03c7..3872c3f5541 100644 --- 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 @@ -141,7 +141,7 @@ export const Unit = ({ data }) => {
handleDataTableChipClick(e, id)} /> {completed &&

Lesson Complete

} - {started && Mark As Complete} + {started && Mark As Complete}
) } @@ -185,7 +185,7 @@ export const Unit = ({ data }) => { } function renderClassroomActivities() { - const lessonsIcon = lessons icon + const lessonsIcon = lessons icon // 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() From 4d97cd4d6e6ee8a66a3ece63ace72780f83f4dbd Mon Sep 17 00:00:00 2001 From: Eric Adams Date: Thu, 12 Dec 2024 17:50:27 -0300 Subject: [PATCH 11/11] tweak min width --- services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss index c114f523c08..066b357914e 100644 --- a/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss +++ b/services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss @@ -112,7 +112,7 @@ margin-left: 8px; } .quill-button { - min-width: 118px; + min-width: 120px; } } .lessons-icon {