feat(Authoring): Allow expanding and collapsing lessons (#1622)

WISE-Community · Feb 12, 2024 · 6af15b1 · 6af15b1
1 parent 6228412
commit 6af15b1
Show file tree

Hide file tree

Showing 15 changed files with 424 additions and 70 deletions.
diff --git a/src/assets/wise5/authoringTool/domain/expand-event.ts b/src/assets/wise5/authoringTool/domain/expand-event.ts
@@ -0,0 +1,4 @@
+export interface ExpandEvent {
+  expanded: boolean;
+  id: string;
+}
diff --git a/...sets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.html b/...sets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.html
@@ -1,26 +1,60 @@
-<div id="{{ lesson.id }}" fxLayoutAlign="start center" class="pointer groupHeader projectItem">
-  <mat-checkbox
-    color="primary"
-    (change)="selectNode($event.checked)"
-    [disabled]="nodeTypeSelected() === 'step'"
-    aria-label="Select lesson"
-    i18n-aria-label
-  >
-  </mat-checkbox>
-  <div
-    class="projectItemTitleDiv"
-    fxLayoutAlign="start center"
-    fxLayoutGap="10px"
-    (click)="setCurrentNode(lesson.id)"
-  >
-    <node-icon-and-title [nodeId]="lesson.id" [showPosition]="showPosition"></node-icon-and-title>
+<div id="{{ lesson.id }}" class="lesson">
+  <div class="lesson-bar full-width pointer" fxLayoutAlign="start center">
+    <mat-checkbox
+      color="primary"
+      (change)="selectNode($event.checked)"
+      [disabled]="nodeTypeSelected() === 'step'"
+      aria-label="Select lesson"
+      i18n-aria-label
+    >
+    </mat-checkbox>
+    <div class="full-width" fxLayoutAlign="start center" fxLayoutGap="10px">
+      <div
+        (click)="setCurrentNode(lesson.id)"
+        fxFlex
+        matTooltip="Click to enter lesson"
+        matTooltipPosition="above"
+        i18n-matTooltip
+      >
+        <node-icon-and-title
+          [nodeId]="lesson.id"
+          [showPosition]="showPosition"
+        ></node-icon-and-title>
+      </div>
+      <div *ngIf="lesson.ids.length > 0" fxLayout="row" fxLayoutAlign="end center">
+        <button
+          mat-icon-button
+          *ngIf="!expanded"
+          (click)="toggleExpanded()"
+          fxLayoutAlign="end center"
+          matTooltip="Click to expand"
+          matTooltipPosition="above"
+          i18n-matTooltip
+        >
+          <mat-icon>expand_more</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          *ngIf="expanded"
+          (click)="toggleExpanded()"
+          fxLayoutAlign="end center"
+          matTooltip="Click to collapse"
+          matTooltipPosition="above"
+          i18n-matTooltip
+        >
+          <mat-icon>expand_less</mat-icon>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div *ngIf="expanded" fxLayout="column">
+    <ng-container *ngFor="let childId of lesson.ids">
+      <project-authoring-step
+        [step]="idToNode[childId]"
+        (selectNodeEvent)="selectNodeEvent.emit($event)"
+        [showPosition]="showPosition"
+        [projectId]="projectId"
+      ></project-authoring-step>
+    </ng-container>
   </div>
-</div>
-<div *ngFor="let childId of lesson.ids">
-  <project-authoring-step
-    [step]="idToNode[childId]"
-    (selectNodeEvent)="selectNodeEvent.emit($event)"
-    [showPosition]="showPosition"
-    [projectId]="projectId"
-  ></project-authoring-step>
 </div>
diff --git a/...sets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.scss b/...sets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.scss
@@ -1,20 +1,19 @@
-.groupHeader {
-  margin-left: 5px !important;
+.lesson {
+  padding: 8px;
+  margin: 16px 0px;
+  border: 2px solid #dddddd;
+  border-radius: 6px;
+  position: relative;
 }
 
-.pointer {
-  cursor: pointer;
-}
-
-.projectItem:hover {
+.lesson-bar:hover {
   background-color: #add8e6;
 }
 
-.projectItemTitleDiv:hover {
-  background-color: #add8e6;
+.full-width {
+  width: 100%;
 }
 
-.projectItemTitleDiv {
-  width: 100%;
-  font-weight: initial;
+.pointer {
+  cursor: pointer;
 }
diff --git a/...s/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.spec.ts b/...s/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.spec.ts
@@ -12,14 +12,27 @@ import { NodeIconAndTitleComponent } from '../choose-node-location/node-icon-and
 import { NodeIconComponent } from '../../vle/node-icon/node-icon.component';
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
+import { ProjectAuthoringStepComponent } from '../project-authoring-step/project-authoring-step.component';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { ProjectAuthoringLessonHarness } from './project-authoring-lesson.harness';
 
-describe('ProjectAuthoringLessonComponent', () => {
-  let component: ProjectAuthoringLessonComponent;
-  let fixture: ComponentFixture<ProjectAuthoringLessonComponent>;
+let component: ProjectAuthoringLessonComponent;
+let fixture: ComponentFixture<ProjectAuthoringLessonComponent>;
+const groupId1 = 'group1';
+let harness: ProjectAuthoringLessonHarness;
+const nodeId1 = 'node1';
+const nodeId2 = 'node2';
+let teacherProjectService: TeacherProjectService;
 
-  beforeEach(() => {
+describe('ProjectAuthoringLessonComponent', () => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [NodeIconComponent, NodeIconAndTitleComponent, ProjectAuthoringLessonComponent],
+      declarations: [
+        NodeIconComponent,
+        NodeIconAndTitleComponent,
+        ProjectAuthoringLessonComponent,
+        ProjectAuthoringStepComponent
+      ],
       imports: [
         FormsModule,
         HttpClientTestingModule,
@@ -35,13 +48,59 @@ describe('ProjectAuthoringLessonComponent', () => {
         TeacherWebSocketService
       ]
     });
+    teacherProjectService = TestBed.inject(TeacherProjectService);
+    teacherProjectService.idToNode = {
+      node1: {
+        id: nodeId1,
+        title: 'Step 1'
+      },
+      node2: {
+        id: nodeId2,
+        title: 'Step 2'
+      }
+    };
     fixture = TestBed.createComponent(ProjectAuthoringLessonComponent);
     component = fixture.componentInstance;
-    component.lesson = {};
+    component.lesson = {
+      id: groupId1,
+      ids: [nodeId1, nodeId2],
+      type: 'group'
+    };
     fixture.detectChanges();
+    harness = await TestbedHarnessEnvironment.harnessForFixture(
+      fixture,
+      ProjectAuthoringLessonHarness
+    );
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+  lessonIsExpanded_clickCollapseButton_hideSteps();
+  lessonIsCollapsed_clickExpandButton_showSteps();
 });
+
+function lessonIsExpanded_clickCollapseButton_hideSteps() {
+  describe('lesson is expanded', () => {
+    describe('collapse button is clicked', () => {
+      it('hides steps', async () => {
+        component.expanded = true;
+        await (await harness.getCollapseButton()).click();
+        expect(component.expanded).toBeFalse();
+        const steps = await harness.getSteps();
+        expect(steps.length).toEqual(0);
+      });
+    });
+  });
+}
+
+function lessonIsCollapsed_clickExpandButton_showSteps() {
+  describe('lesson is collapsed', () => {
+    describe('expand button is clicked', () => {
+      it('shows steps', async () => {
+        component.expanded = false;
+        await (await harness.getExpandButton()).click();
+        expect(component.expanded).toBeTrue();
+        const steps = await harness.getSteps();
+        expect(steps.length).toEqual(2);
+      });
+    });
+  });
+}
diff --git a/...assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.ts b/...assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.ts
@@ -3,13 +3,16 @@ import { TeacherDataService } from '../../services/teacherDataService';
 import { TeacherProjectService } from '../../services/teacherProjectService';
 import { SelectNodeEvent } from '../domain/select-node-event';
 import { NodeTypeSelected } from '../domain/node-type-selected';
+import { ExpandEvent } from '../domain/expand-event';
 
 @Component({
   selector: 'project-authoring-lesson',
   templateUrl: './project-authoring-lesson.component.html',
   styleUrls: ['./project-authoring-lesson.component.scss']
 })
 export class ProjectAuthoringLessonComponent {
+  @Input() expanded: boolean = true;
+  @Output() onExpandedChanged: EventEmitter<ExpandEvent> = new EventEmitter<ExpandEvent>();
   protected idToNode: any = {};
   @Input() lesson: any;
   protected nodeTypeSelected: Signal<NodeTypeSelected>;
@@ -35,4 +38,9 @@ export class ProjectAuthoringLessonComponent {
   protected setCurrentNode(nodeId: string): void {
     this.dataService.setCurrentNodeByNodeId(nodeId);
   }
+
+  protected toggleExpanded(): void {
+    this.expanded = !this.expanded;
+    this.onExpandedChanged.emit({ id: this.lesson.id, expanded: this.expanded });
+  }
 }
diff --git a/src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.harness.ts b/src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.harness.ts
@@ -0,0 +1,22 @@
+import { ComponentHarness } from '@angular/cdk/testing';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { ProjectAuthoringStepHarness } from '../project-authoring-step/project-authoring-step.harness';
+
+export class ProjectAuthoringLessonHarness extends ComponentHarness {
+  static hostSelector = 'project-authoring-lesson';
+  getExpandButton = this.locatorForOptional(
+    MatButtonHarness.with({ selector: '[matTooltip="Click to expand"]' })
+  );
+  getCollapseButton = this.locatorForOptional(
+    MatButtonHarness.with({ selector: '[matTooltip="Click to collapse"]' })
+  );
+  getSteps = this.locatorForAll(ProjectAuthoringStepHarness);
+
+  async isExpanded(): Promise<boolean> {
+    return (await this.getExpandButton()) == null;
+  }
+
+  async isCollapsed(): Promise<boolean> {
+    return (await this.getCollapseButton()) == null;
+  }
+}
diff --git a/src/assets/wise5/authoringTool/project-authoring-step/project-authoring-step.component.html b/src/assets/wise5/authoringTool/project-authoring-step/project-authoring-step.component.html
@@ -18,6 +18,9 @@
     fxLayoutAlign="start center"
     fxLayoutGap="10px"
     (click)="setCurrentNode(step.id)"
+    matTooltip="Click to enter step"
+    matTooltipPosition="above"
+    i18n-matTooltip
   >
     <node-icon-and-title [nodeId]="step.id" [showPosition]="showPosition"></node-icon-and-title>
     <p fxLayoutAlign="start center" fxLayoutGap="10px">

diff --git a/src/assets/wise5/authoringTool/project-authoring-step/project-authoring-step.harness.ts b/src/assets/wise5/authoringTool/project-authoring-step/project-authoring-step.harness.ts
@@ -0,0 +1,5 @@
+import { ComponentHarness } from '@angular/cdk/testing';
+
+export class ProjectAuthoringStepHarness extends ComponentHarness {
+  static hostSelector = 'project-authoring-step';
+}
diff --git a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html
@@ -54,6 +54,25 @@
   >
     <mat-icon>delete</mat-icon>
   </button>
+  <div fxFlex></div>
+  <button
+    (click)="expandAllLessons()"
+    [disabled]="allLessonsExpanded()"
+    mat-raised-button
+    color="primary"
+    i18n
+  >
+    + Expand All
+  </button>
+  <button
+    (click)="collapseAllLessons()"
+    [disabled]="allLessonsCollapsed()"
+    mat-raised-button
+    color="primary"
+    i18n
+  >
+    - Collapse All
+  </button>
 </div>
 <div class="all-nodes-div">
   <div *ngFor="let lesson of lessons">
@@ -62,6 +81,8 @@
       (selectNodeEvent)="selectNode($event)"
       [showPosition]="true"
       [projectId]="projectId"
+      [expanded]="lessonIdToExpanded()[lesson.id]"
+      (onExpandedChanged)="onExpandedChanged($event)"
     ></project-authoring-lesson>
   </div>
   <div>
@@ -73,6 +94,8 @@ <h6 class="unused-header" i18n>Unused Lessons</h6>
         (selectNodeEvent)="selectNode($event)"
         [showPosition]="false"
         [projectId]="projectId"
+        [expanded]="lessonIdToExpanded()[inactiveGroupNode.id]"
+        (onExpandedChanged)="onExpandedChanged($event)"
       ></project-authoring-lesson>
     </div>
     <div>

diff --git a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.scss b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.scss
@@ -8,7 +8,6 @@
 
 .all-nodes-div {
   margin-top: 20px;
-  margin-left: 20px;
 }
 
 .componentHeader {