feat(Authoring Tool): Drag and drop lessons and steps (#2288)

Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>

Author: hirokiterashima

src/assets/wise5/authoringTool/choose-node-location/node-icon-and-title/node-icon-and-title.component.html

@@ -1,7 +1,7 @@
 <div class="flex flex-row justify-start items-center gap-1">
   <node-icon [nodeId]="nodeId" size="18" />&nbsp;
   @if (showPosition) {
-    <span class="step-number">{{ getNodePosition(nodeId) }}: </span>
+    <span class="step-number">{{ nodePosition }}: </span>
   }
-  <span class="step-title">{{ getNodeTitle(nodeId) }}</span>
+  <span class="step-title">{{ nodeTitle }}</span>
 </div>

src/assets/wise5/authoringTool/choose-node-location/node-icon-and-title/node-icon-and-title.component.ts

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { NodeIconComponent } from '../../../vle/node-icon/node-icon.component';
 import { TeacherProjectTranslationService } from '../../../services/teacherProjectTranslationService';
+import { Subscription } from 'rxjs';
 
 @Component({
   imports: [NodeIconComponent],
@@ -11,18 +12,34 @@ import { TeacherProjectTranslationService } from '../../../services/teacherProje
 })
 export class NodeIconAndTitleComponent {
   @Input() protected nodeId: string;
+  protected nodePosition: string;
+  protected nodeTitle: string;
   @Input() protected showPosition: boolean;
+  private subscriptions: Subscription;
 
   constructor(
     private projectService: TeacherProjectService,
     private projectTranslationService: TeacherProjectTranslationService
   ) {}
 
-  protected getNodePosition(nodeId: string): string {
+  ngOnInit(): void {
+    this.nodePosition = this.getNodePosition(this.nodeId);
+    this.nodeTitle = this.getNodeTitle(this.nodeId);
+    this.subscriptions = this.projectService.projectParsed$.subscribe(() => {
+      this.nodePosition = this.getNodePosition(this.nodeId);
+      this.nodeTitle = this.getNodeTitle(this.nodeId);
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
+
+  private getNodePosition(nodeId: string): string {
     return this.projectService.getNodePositionById(nodeId);
   }
 
-  protected getNodeTitle(nodeId: string): string {
+  private getNodeTitle(nodeId: string): string {
     return this.projectService.isDefaultLocale()
       ? this.projectService.getNodeTitle(nodeId)
       : this.translateNodeTitle(nodeId);

src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.html

@@ -3,18 +3,34 @@
   class="lesson flex grow"
   (opened)="toggleExpanded(true)"
   (closed)="toggleExpanded(false)"
+  cdkDrag
+  [cdkDragData]="{ type: 'group', id: lesson.id }"
+  (cdkDragStarted)="drag(true)"
+  (cdkDragEnded)="drag(false)"
+  [id]="lesson.id"
 >
   <mat-expansion-panel-header aria-label="Expand/collapse lesson" i18n-aria-label>
     <mat-panel-title>
-      <mat-checkbox
-        color="primary"
-        (change)="selectNode($event.checked)"
-        (click)="$event.stopPropagation()"
-        (keydown)="$event.stopPropagation()"
-        [disabled]="nodeTypeSelected() === 'step'"
-        aria-label="Select lesson"
-        i18n-aria-label
-      />
+      @if (batchEditMode) {
+        <mat-checkbox
+          color="primary"
+          (change)="selectNode($event.checked)"
+          (click)="$event.stopPropagation()"
+          (keydown)="$event.stopPropagation()"
+          [disabled]="nodeTypeSelected() === 'step'"
+          aria-label="Select lesson"
+          i18n-aria-label
+        />
+      } @else {
+        <mat-icon
+          cdkDragHandle
+          class="cursor-move me-2"
+          (click)="$event.stopPropagation()"
+          title="Drag to reorder"
+          i18n-title
+          >drag_indicator</mat-icon
+        >
+      }
       <node-icon-and-title [nodeId]="lesson.id" [showPosition]="showPosition" />
     </mat-panel-title>
     <mat-panel-description class="text flex justify-end items-center gap-1">
@@ -51,21 +67,33 @@
       </button>
     </mat-panel-description>
   </mat-expansion-panel-header>
-  <div>
+  <div
+    class="ps-6 flex flex-col gap-1"
+    cdkDropList
+    [id]="lesson.id"
+    [cdkDropListData]="{ groupId: lesson.id, nodes: lesson.ids, idToNode: idToNode }"
+    cdkDropListLockAxis="y"
+    [cdkDropListConnectedTo]="allGroupIds"
+    [cdkDropListSortPredicate]="notAfterBranchingNode"
+    (cdkDropListDropped)="dropNode($event)"
+  >
     @for (childId of lesson.ids; track childId) {
       <div class="flex flex-row flex-wrap justify-start items-center">
         <project-authoring-step
+          [batchEditMode]="batchEditMode"
           [step]="idToNode[childId]"
           (selectNodeEvent)="selectNodeEvent.emit($event)"
           [showPosition]="showPosition"
           [projectId]="projectId"
-          class="flex grow"
+          class="grow"
+          (dragStarted)="drag(true)"
+          (dragEnded)="drag(false)"
         />
-        <add-step-button [nodeId]="childId" />
+        <add-step-button [nodeId]="childId" [class.hidden]="isDragging()" />
       </div>
     }
     @if (lesson.ids.length === 0) {
-      <div class="no-steps-message flex justify-start items-center">
+      <div class="px-2 flex justify-start items-center">
         <div i18n>This lesson has no steps</div>
         <button
           mat-icon-button
@@ -80,4 +108,5 @@
       </div>
     }
   </div>
+  <div class="drag-placeholder" *cdkDragPlaceholder></div>
 </mat-expansion-panel>

src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.scss

@@ -1,3 +1,5 @@
+@reference "tailwindcss";
+
 .lesson {
   .mat-expansion-panel-header {
     padding-inline-start: 8px;
@@ -19,8 +21,22 @@
   .full-width {
     width: 100%;
   }
+}
+
+.drag-placeholder {
+  @apply rounded border-2 border-dashed border-gray-300 bg-gray-100 flex grow;
+  min-height: 48px;
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.branch-path-step {
+  @apply ps-6;
+}
+
+.cdk-drag-preview {
+  height: auto !important;
 
-  .no-steps-message {
-    padding: 0 8px;
+  .mat-expansion-panel-content-wrapper {
+    display: none;
   }
 }

src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.spec.ts

@@ -16,6 +16,8 @@ import { CopyTranslationsService } from '../../services/copyTranslationsService'
 import { ConstraintService } from '../../services/constraintService';
 import { Node } from '../../common/Node';
 import { NodeIconAndTitleComponent } from '../choose-node-location/node-icon-and-title/node-icon-and-title.component';
+import { MoveNodesService } from '../../services/moveNodesService';
+import { of } from 'rxjs';
 
 let component: ProjectAuthoringLessonComponent;
 let fixture: ComponentFixture<ProjectAuthoringLessonComponent>;
@@ -49,8 +51,12 @@ describe('ProjectAuthoringLessonComponent', () => {
           TeacherDataService,
           TeacherProjectTranslationService
         ),
+        MockProvider(MoveNodesService, {
+          getIsDragging: () => signal<boolean>(false)
+        }),
         MockProvider(TeacherProjectService, {
-          getNodeTypeSelected: () => signal<NodeTypeSelected>(NodeTypeSelected.lesson)
+          getNodeTypeSelected: () => signal<NodeTypeSelected>(NodeTypeSelected.lesson),
+          projectParsed$: of()
         }),
         provideRouter([])
       ]

src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.ts

@@ -1,4 +1,11 @@
 import { Component, EventEmitter, Input, Output, Signal, ViewEncapsulation } from '@angular/core';
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDropList,
+  DragDropModule,
+  moveItemInArray
+} from '@angular/cdk/drag-drop';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
@@ -17,11 +24,13 @@ import { DeleteNodeService } from '../../services/deleteNodeService';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DeleteTranslationsService } from '../../services/deleteTranslationsService';
 import { AddStepTarget } from '../../../../app/domain/addStepTarget';
+import { MoveNodesService } from '../../services/moveNodesService';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   imports: [
     FormsModule,
+    DragDropModule,
     MatExpansionModule,
     MatCheckboxModule,
     MatIconModule,
@@ -36,9 +45,12 @@ import { AddStepTarget } from '../../../../app/domain/addStepTarget';
   templateUrl: './project-authoring-lesson.component.html'
 })
 export class ProjectAuthoringLessonComponent {
+  allGroupIds: string[];
+  @Input() batchEditMode: boolean;
   @Input() expanded: boolean = true;
   @Output() onExpandedChanged: EventEmitter<ExpandEvent> = new EventEmitter<ExpandEvent>();
   protected idToNode: any = {};
+  protected isDragging: Signal<boolean>;
   @Input() lesson: any;
   protected nodeTypeSelected: Signal<NodeTypeSelected>;
   @Input() projectId: number;
@@ -49,14 +61,17 @@ export class ProjectAuthoringLessonComponent {
     private dataService: TeacherDataService,
     private deleteNodeService: DeleteNodeService,
     private deleteTranslationsService: DeleteTranslationsService,
+    private moveNodesService: MoveNodesService,
     private projectService: TeacherProjectService,
     private route: ActivatedRoute,
     private router: Router
   ) {}
 
   ngOnInit(): void {
+    this.allGroupIds = this.projectService.getAllGroupIds();
     this.idToNode = this.projectService.idToNode;
     this.nodeTypeSelected = this.projectService.getNodeTypeSelected();
+    this.isDragging = this.moveNodesService.getIsDragging();
   }
 
   protected selectNode(checked: boolean): void {
@@ -100,4 +115,38 @@ export class ProjectAuthoringLessonComponent {
     this.projectService.saveProject();
     this.projectService.refreshProject();
   }
+
+  protected dropNode(event: CdkDragDrop<any>): void {
+    const { container, currentIndex, item, previousContainer, previousIndex } = event;
+    if (previousContainer === container) {
+      moveItemInArray(container.data.nodes, previousIndex, currentIndex);
+    } else {
+      // do nothing. the UI will be updated by moveNodesAfter() and refreshProject() calls
+    }
+    if (currentIndex == 0) {
+      this.moveNodesService.moveNodesInsideGroup([item.data.id], container.data.groupId);
+    } else {
+      this.moveNodesService.moveNodesAfter([item.data.id], container.data.nodes[currentIndex - 1]);
+    }
+    this.projectService.checkPotentialStartNodeIdChangeThenSaveProject().then(() => {
+      this.projectService.refreshProject();
+    });
+  }
+
+  // allow a step to drop anywhere except the first step in a first path of a branch activity
+  // otherwise, the step will be placed after a node that has multiple transitions, which is not allowed
+  protected notAfterBranchingNode(
+    index: number,
+    item: CdkDrag<any>,
+    drop: CdkDropList<any>
+  ): boolean {
+    if (index === 0) return true;
+    const nodesExceptItem = drop.data.nodes.filter((nodeId) => nodeId !== item.data.id);
+    const nodeBefore = drop.data.idToNode[nodesExceptItem[index - 1]];
+    return nodeBefore.transitionLogic.transitions.length <= 1;
+  }
+
+  protected drag(isDragging: boolean): void {
+    this.moveNodesService.setIsDragging(isDragging);
+  }
 }

src/assets/wise5/authoringTool/project-authoring-step/project-authoring-step.component.html

@@ -1,28 +1,43 @@
 <div
   id="{{ step.id }}"
   class="step flex justify-start items-center gap-2 grow"
-  [ngClass]="{ 'branch-path-step': isNodeInAnyBranchPath(step.id) }"
   [ngStyle]="{ 'background-color': getStepBackgroundColor(step.id) }"
   (click)="setCurrentNode(step.id)"
   (keyup.enter)="setCurrentNode(step.id)"
   role="button"
   tabindex="0"
+  cdkDrag
+  [cdkDragDisabled]="branchPoint"
+  [cdkDragData]="{ type: 'step', id: step.id }"
+  (cdkDragStarted)="drag(true)"
+  (cdkDragEnded)="drag(false)"
   aria-label="Edit step"
   i18n-aria-label
 >
-  <mat-checkbox
-    color="primary"
-    (change)="selectNode($event.checked)"
-    (click)="$event.stopPropagation()"
-    [disabled]="nodeTypeSelected() === 'lesson'"
-    aria-label="Select step"
-    i18n-aria-label
-  />
+  @if (batchEditMode) {
+    <mat-checkbox
+      color="primary"
+      (change)="selectNode($event.checked)"
+      (click)="$event.stopPropagation()"
+      [disabled]="nodeTypeSelected() === 'lesson'"
+      aria-label="Select step"
+      i18n-aria-label
+    />
+  } @else if (!branchPoint) {
+    <mat-icon
+      cdkDragHandle
+      class="cursor-move"
+      (click)="$event.stopPropagation()"
+      title="Drag to reorder"
+      i18n-title
+      >drag_indicator</mat-icon
+    >
+  }
   <strong>
     <node-icon-and-title [nodeId]="step.id" [showPosition]="showPosition" />
   </strong>
   <div class="flex justify-start items-center gap-2">
-    @if (isBranchPoint(step.id)) {
+    @if (branchPoint) {
       <button
         mat-icon-button
         (click)="goToEditBranch(step.id); $event.stopPropagation()"
@@ -64,18 +79,19 @@
     matTooltipPosition="above"
     i18n-matTooltip
   ></div>
-  <!-- <div class="dynamic-step-buttons"> -->
   <div class="flex justify-start items-center">
-    <button
-      class="step-action"
-      mat-icon-button
-      (click)="move(); $event.stopPropagation()"
-      matTooltip="Move step"
-      matTooltipPosition="above"
-      i18n-matTooltip
-    >
-      <mat-icon>redo</mat-icon>
-    </button>
+    @if (!branchPoint) {
+      <button
+        class="step-action"
+        mat-icon-button
+        (click)="move(); $event.stopPropagation()"
+        matTooltip="Move step"
+        matTooltipPosition="above"
+        i18n-matTooltip
+      >
+        <mat-icon>redo</mat-icon>
+      </button>
+    }
     <button
       class="step-action"
       mat-icon-button
@@ -97,5 +113,5 @@
       <mat-icon>delete</mat-icon>
     </button>
   </div>
-  <!-- </div> -->
+  <div class="drag-placeholder" *cdkDragPlaceholder></div>
 </div>