feat(Authoring): Remove add lesson before option on lessons after fir…

…st (#1714)
WISE-Community · Apr 4, 2024 · b695ce0 · b695ce0
1 parent ff46a0e
commit b695ce0
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 165 deletions.
diff --git a/src/app/teacher/authoring-tool.module.ts b/src/app/teacher/authoring-tool.module.ts
@@ -65,7 +65,6 @@ import { AddStepButtonComponent } from '../../assets/wise5/authoringTool/add-ste
 @NgModule({
   declarations: [
     AddComponentButtonComponent,
-    AddLessonButtonComponent,
     AddLessonChooseLocationComponent,
     AddLessonChooseTemplateComponent,
     AddLessonConfigureComponent,
@@ -113,6 +112,7 @@ import { AddStepButtonComponent } from '../../assets/wise5/authoringTool/add-ste
     ProjectListComponent
   ],
   imports: [
+    AddLessonButtonComponent,
     AddStepButtonComponent,
     StudentTeacherCommonModule,
     ComponentAuthoringModule,

diff --git a/src/assets/wise5/authoringTool/add-lesson-button/add-lesson-button.component.html b/src/assets/wise5/authoringTool/add-lesson-button/add-lesson-button.component.html
@@ -1,20 +1,47 @@
-<button
-  mat-icon-button
-  color="primary"
-  (click)="addLesson()"
-  [matMenuTriggerFor]="lessonId == null ? null : lessonMenu"
-  #menuTrigger
-  matTooltip="Add lesson"
-  matTooltipPosition="above"
-  i18n-matTooltip
->
-  <mat-icon>add_circle</mat-icon>
-</button>
-<mat-menu #lessonMenu="matMenu">
-  <button mat-menu-item (click)="addLessonBefore()">
-    <mat-icon>add_circle</mat-icon><span i18n>Add Lesson Before</span>
+<ng-container *ngIf="lessonId == null">
+  <button
+    mat-icon-button
+    color="primary"
+    (click)="addFirstLesson()"
+    matTooltip="Add lesson"
+    matTooltipPosition="above"
+    i18n-matTooltip
+  >
+    <mat-icon>add_circle</mat-icon>
   </button>
-  <button mat-menu-item (click)="addLessonAfter()">
-    <mat-icon>add_circle</mat-icon><span i18n>Add Lesson After</span>
-  </button>
-</mat-menu>
+</ng-container>
+<ng-container *ngIf="lessonId != null">
+  <ng-container *ngIf="first">
+    <button
+      mat-icon-button
+      color="primary"
+      [matMenuTriggerFor]="lessonMenu"
+      #menuTrigger
+      matTooltip="Add lesson"
+      matTooltipPosition="above"
+      i18n-matTooltip
+    >
+      <mat-icon>add_circle</mat-icon>
+    </button>
+    <mat-menu #lessonMenu="matMenu">
+      <button mat-menu-item (click)="addLessonBefore()">
+        <mat-icon>add_circle</mat-icon><span i18n>Add lesson before</span>
+      </button>
+      <button mat-menu-item (click)="addLessonAfter()">
+        <mat-icon>add_circle</mat-icon><span i18n>Add lesson after</span>
+      </button>
+    </mat-menu>
+  </ng-container>
+  <ng-container *ngIf="!first">
+    <button
+      mat-icon-button
+      color="primary"
+      (click)="addLessonAfter()"
+      matTooltip="Add lesson after"
+      matTooltipPosition="above"
+      i18n-matTooltip
+    >
+      <mat-icon>add_circle</mat-icon>
+    </button>
+  </ng-container>
+</ng-container>
diff --git a/src/assets/wise5/authoringTool/add-lesson-button/add-lesson-button.component.scss b/src/assets/wise5/authoringTool/add-lesson-button/add-lesson-button.component.scss
diff --git a/src/assets/wise5/authoringTool/add-lesson-button/add-lesson-button.component.spec.ts b/src/assets/wise5/authoringTool/add-lesson-button/add-lesson-button.component.spec.ts
@@ -12,8 +12,8 @@ describe('AddLessonButtonComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [AddLessonButtonComponent],
       imports: [
+        AddLessonButtonComponent,
         HttpClientTestingModule,
         StudentTeacherCommonServicesModule,
         MatIconModule,

diff --git a/src/assets/wise5/authoringTool/add-lesson-button/add-lesson-button.component.ts b/src/assets/wise5/authoringTool/add-lesson-button/add-lesson-button.component.ts
@@ -1,26 +1,31 @@
 import { Component, Input, ViewChild } from '@angular/core';
 import { TeacherProjectService } from '../../services/teacherProjectService';
 import { temporarilyHighlightElement } from '../../common/dom/dom';
-import { MatMenuTrigger } from '@angular/material/menu';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'add-lesson-button',
   templateUrl: './add-lesson-button.component.html',
-  styleUrls: ['./add-lesson-button.component.scss']
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule]
 })
 export class AddLessonButtonComponent {
   @Input() active: boolean;
+  @Input() first: boolean;
   @Input() lessonId: string;
   @ViewChild(MatMenuTrigger) menuTrigger: MatMenuTrigger;
 
   constructor(private projectService: TeacherProjectService) {}
 
-  protected addLesson(): void {
-    if (this.lessonId == null) {
-      this.addFirstLesson();
-    } else {
-      this.menuTrigger.openMenu();
-    }
+  protected addFirstLesson(): void {
+    const newLesson = this.createNewLesson();
+    const insertLocation = this.active ? 'group0' : 'inactiveGroups';
+    this.projectService.createNodeInside(newLesson, insertLocation);
+    this.updateProject(newLesson.id);
   }
 
   protected addLessonBefore(): void {
@@ -34,13 +39,6 @@ export class AddLessonButtonComponent {
     }
   }
 
-  private addFirstLesson(): void {
-    const newLesson = this.createNewLesson();
-    const insertLocation = this.active ? 'group0' : 'inactiveGroups';
-    this.projectService.createNodeInside(newLesson, insertLocation);
-    this.updateProject(newLesson.id);
-  }
-
   protected addLessonAfter(): void {
     const newLesson = this.createNewLesson();
     this.projectService.createNodeAfter(newLesson, this.lessonId);

diff --git a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html
@@ -68,7 +68,7 @@
     <div i18n>There are no lessons</div>
     <add-lesson-button [active]="true"></add-lesson-button>
   </div>
-  <div *ngFor="let lesson of lessons" fxLayout="row">
+  <div *ngFor="let lesson of lessons; let first = first" fxLayout="row">
     <project-authoring-lesson
       [lesson]="lesson"
       (selectNodeEvent)="selectNode($event)"
@@ -81,6 +81,7 @@
     <add-lesson-button
       class="add-lesson-button-next-to-lesson"
       [active]="true"
+      [first]="first"
       [lessonId]="lesson.id"
     ></add-lesson-button>
   </div>
@@ -90,7 +91,7 @@ <h6 class="unused-header" i18n>Unused Lessons</h6>
       <div i18n>There are no unused lessons</div>
       <add-lesson-button></add-lesson-button>
     </div>
-    <div *ngFor="let inactiveGroupNode of inactiveGroupNodes" fxLayout="row">
+    <div *ngFor="let inactiveGroupNode of inactiveGroupNodes; let first = first" fxLayout="row">
       <project-authoring-lesson
         [lesson]="inactiveGroupNode"
         (selectNodeEvent)="selectNode($event)"
@@ -102,6 +103,7 @@ <h6 class="unused-header" i18n>Unused Lessons</h6>
       ></project-authoring-lesson>
       <add-lesson-button
         class="add-lesson-button-next-to-lesson"
+        [first]="first"
         [lessonId]="inactiveGroupNode.id"
       ></add-lesson-button>
     </div>

diff --git a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.spec.ts b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.spec.ts
@@ -39,8 +39,6 @@ import { HttpClient } from '@angular/common/http';
 import { AddLessonButtonComponent } from '../add-lesson-button/add-lesson-button.component';
 import { AddStepButtonComponent } from '../add-step-button/add-step-button.component';
 
-const addLessonAfterRegex = /Add Lesson After/;
-const addLessonBeforeRegex = /Add Lesson Before/;
 let configService: ConfigService;
 let component: ProjectAuthoringComponent;
 let getConfigParamSpy: jasmine.Spy;
@@ -55,7 +53,6 @@ describe('ProjectAuthoringComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
-        AddLessonButtonComponent,
         ConcurrentAuthorsMessageComponent,
         NodeAuthoringComponent,
         NodeIconComponent,
@@ -66,6 +63,7 @@ describe('ProjectAuthoringComponent', () => {
         TeacherNodeIconComponent
       ],
       imports: [
+        AddLessonButtonComponent,
         AddStepButtonComponent,
         BrowserAnimationsModule,
         FormsModule,
@@ -122,7 +120,6 @@ describe('ProjectAuthoringComponent', () => {
   moveSpecificStep();
   deleteSpecificLesson();
   moveSpecificLesson();
-  addLesson();
 });
 
 function collapseAllButtonClicked() {
@@ -245,114 +242,3 @@ function moveSpecificLesson() {
     });
   });
 }
-
-function addLesson() {
-  addLessonBefore();
-  addLessonBeforeFirstLesson();
-  addLessonAfter();
-  addInactiveLessonBefore();
-  addInactiveLessonBeforeFirstLesson();
-  addInactiveLessonAfter();
-}
-
-function addLessonBeforeFirstLesson() {
-  describe('add lesson button is clicked on a lesson that is the first lesson', () => {
-    describe('add lesson before is chosen on the menu', () => {
-      it('adds a lesson before the chosen lesson', async () => {
-        const addLessonButtons = await harness.getAddLessonButtons();
-        addLessonButtons[0].click();
-        const addLessonMenu = await harness.getOpenedAddStepMenu();
-        await addLessonMenu.clickItem({ text: addLessonBeforeRegex });
-        const newLesson = await harness.getLesson('1: New Lesson');
-        expect(newLesson).not.toEqual(null);
-      });
-    });
-  });
-}
-
-function addLessonBefore() {
-  describe('add lesson button is clicked on a lesson that is not the first lesson', () => {
-    describe('add lesson before is chosen on the menu', () => {
-      it('adds a lesson before the chosen lesson', async () => {
-        const addLessonButtons = await harness.getAddLessonButtons();
-        addLessonButtons[1].click();
-        const addLessonMenu = await harness.getOpenedAddStepMenu();
-        await addLessonMenu.clickItem({ text: addLessonBeforeRegex });
-        const newLesson = await harness.getLesson('2: New Lesson');
-        expect(newLesson).not.toEqual(null);
-      });
-    });
-  });
-}
-
-function addLessonAfter() {
-  describe('add lesson button is clicked', () => {
-    describe('add lesson after is chosen on the menu', () => {
-      it('adds a lesson after the chosen lesson', async () => {
-        const addLessonButtons = await harness.getAddLessonButtons();
-        addLessonButtons[0].click();
-        const addLessonMenu = await harness.getOpenedAddStepMenu();
-        await addLessonMenu.clickItem({ text: addLessonAfterRegex });
-        const newLesson = await harness.getLesson('2: New Lesson');
-        expect(newLesson).not.toEqual(null);
-      });
-    });
-  });
-}
-
-function addInactiveLessonBeforeFirstLesson() {
-  describe('add lesson button is clicked on an inactive lesson that is the first inactive lesson', () => {
-    describe('add lesson before is chosen on the menu', () => {
-      it('adds a lesson before the chosen lesson', async () => {
-        const addLessonButtons = await harness.getAddLessonButtons();
-        addLessonButtons[5].click();
-        const addLessonMenu = await harness.getOpenedAddStepMenu();
-        await addLessonMenu.clickItem({ text: addLessonBeforeRegex });
-        const unusedLessonTitles = await harness.getUnusedLessonTitles();
-        expect(unusedLessonTitles).toEqual([
-          'New Lesson',
-          'Inactive Lesson One',
-          'Inactive Lesson Two'
-        ]);
-      });
-    });
-  });
-}
-
-function addInactiveLessonBefore() {
-  describe('add lesson button is clicked on an inactive lesson that is not the first inactive lesson', () => {
-    describe('add lesson before is chosen on the menu', () => {
-      it('adds a lesson before the chosen lesson', async () => {
-        const addLessonButtons = await harness.getAddLessonButtons();
-        addLessonButtons[6].click();
-        const addLessonMenu = await harness.getOpenedAddStepMenu();
-        await addLessonMenu.clickItem({ text: addLessonBeforeRegex });
-        const unusedLessonTitles = await harness.getUnusedLessonTitles();
-        expect(unusedLessonTitles).toEqual([
-          'Inactive Lesson One',
-          'New Lesson',
-          'Inactive Lesson Two'
-        ]);
-      });
-    });
-  });
-}
-
-function addInactiveLessonAfter() {
-  describe('add lesson button is clicked next to an inactive lesson', () => {
-    describe('add lesson after is chosen on the menu', () => {
-      it('adds a lesson after the chosen lesson', async () => {
-        const addLessonButtons = await harness.getAddLessonButtons();
-        addLessonButtons[6].click();
-        const addLessonMenu = await harness.getOpenedAddStepMenu();
-        await addLessonMenu.clickItem({ text: addLessonAfterRegex });
-        const unusedLessonTitles = await harness.getUnusedLessonTitles();
-        expect(unusedLessonTitles).toEqual([
-          'Inactive Lesson One',
-          'Inactive Lesson Two',
-          'New Lesson'
-        ]);
-      });
-    });
-  });
-}