feat(ProjectInfo): Let authors change the order of resources

src/assets/wise5/authoringTool/edit-unit-resources/edit-unit-resources.component.html

@@ -16,17 +16,18 @@ <h5 class="flex flex-row items-center gap-1 !text-xl">
     <ng-container *ngTemplateOutlet="addButton; context: { addToTop: true }" />
     <span class="flex-1"></span>
   </h5>
-  <ul>
+  <ul cdkDropList [cdkDropListData]="resources" (cdkDropListDropped)="drop($event)" cdkScrollable>
     @for (
       resource of resources;
       track $index;
       let resourceIndex = $index, first = $first, last = $last
     ) {
-      <li class="resource">
+      <li class="resource" cdkDrag>
         <mat-card appearance="outlined" class="resource-content">
           <div class="flex flex-row flex-wrap gap-2">
             <div class="text-secondary flex flex-col items-center">
               <span class="mat-subtitle-1">{{ resourceIndex + 1 }}</span>
+              <mat-icon cdkDragHandle title="Drag to reorder" i18n-title>drag_indicator</mat-icon>
             </div>
             <div class="flex flex-col items-start gap-2 flex-1">
               <mat-form-field class="resource-input form-field-no-hint" appearance="fill">
@@ -58,6 +59,28 @@ <h5 class="flex flex-row items-center gap-1 !text-xl">
               >
                 <mat-icon>clear</mat-icon>
               </button>
+              @if (resources.length > 1) {
+                <button
+                  [disabled]="first"
+                  mat-icon-button
+                  i18n-matTooltip
+                  matTooltip="Move up"
+                  matTooltipPosition="before"
+                  (click)="moveUp(resourceIndex)"
+                >
+                  <mat-icon>arrow_upward</mat-icon>
+                </button>
+                <button
+                  [disabled]="last"
+                  mat-icon-button
+                  i18n-matTooltip
+                  matTooltip="Move down"
+                  matTooltipPosition="before"
+                  (click)="moveDown(resourceIndex)"
+                >
+                  <mat-icon>arrow_downward</mat-icon>
+                </button>
+              }
             </div>
           </div>
         </mat-card>

src/assets/wise5/authoringTool/edit-unit-resources/edit-unit-resources.component.scss

@@ -35,3 +35,13 @@ li {
 .mat-subtitle-1 {
   margin: 0;
 }
+
+.cdk-drag-handle {
+  cursor: move;
+  margin-top: 25px;
+}
+
+.cdk-drag-placeholder {
+  opacity: .4;
+}
+

src/assets/wise5/authoringTool/edit-unit-resources/edit-unit-resources.component.ts

@@ -1,6 +1,8 @@
+import { CdkDragDrop, CdkDropList, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
+import { debounceTime, distinctUntilChanged, Subject, Subscription } from 'rxjs';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -10,7 +12,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TeacherProjectService } from '../../services/teacherProjectService';
-import { debounceTime, distinctUntilChanged, Subject, Subscription } from 'rxjs';
 
 class UnitResource {
   name: string;
@@ -24,7 +25,9 @@ class UnitResource {
 @Component({
   imports: [
     CommonModule,
+    CdkDropList,
     CdkTextareaAutosize,
+    DragDropModule,
     FlexLayoutModule,
     FormsModule,
     MatCardModule,
@@ -57,6 +60,23 @@ export class EditUnitResourcesComponent {
     this.subscriptions.unsubscribe();
   }
 
+  protected drop(event: CdkDragDrop<string[]>): void {
+    this.moveRuleItem(event.previousIndex, event.currentIndex);
+  }
+
+  protected moveUp(ruleIndex: number): void {
+    this.moveRuleItem(ruleIndex, ruleIndex - 1);
+  }
+
+  protected moveDown(ruleIndex: number): void {
+    this.moveRuleItem(ruleIndex, ruleIndex + 1);
+  }
+
+  protected moveRuleItem(previousIndex: number, currentIndex: number): void {
+    moveItemInArray(this.resources, previousIndex, currentIndex);
+    this.projectService.saveProject();
+  }
+
   protected addNewResource(addToTop: boolean): void {
     const location = addToTop ? 0 : this.resources.length;
     this.resources.splice(location, 0, new UnitResource('', ''));

src/messages.xlf

@@ -1185,6 +1185,10 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html</context>
           <context context-type="linenumber">35,37</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/edit-unit-resources/edit-unit-resources.component.html</context>
+          <context context-type="linenumber">30,32</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
           <context context-type="linenumber">54,56</context>
@@ -1234,6 +1238,10 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html</context>
           <context context-type="linenumber">139,140</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/edit-unit-resources/edit-unit-resources.component.html</context>
+          <context context-type="linenumber">68,69</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
           <context context-type="linenumber">98,100</context>
@@ -1261,6 +1269,10 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html</context>
           <context context-type="linenumber">148,150</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/edit-unit-resources/edit-unit-resources.component.html</context>
+          <context context-type="linenumber">77,79</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
           <context context-type="linenumber">109,112</context>
@@ -11290,28 +11302,28 @@ The branches will be removed but the steps will remain in the unit.</source>
         <source>Resource Name</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/edit-unit-resources/edit-unit-resources.component.html</context>
-          <context context-type="linenumber">33,36</context>
+          <context context-type="linenumber">34,37</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5646644722959423444" datatype="html">
         <source>Resource URL</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/edit-unit-resources/edit-unit-resources.component.html</context>
-          <context context-type="linenumber">41,44</context>
+          <context context-type="linenumber">42,45</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4749936818577754995" datatype="html">
         <source>Delete resource</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/edit-unit-resources/edit-unit-resources.component.html</context>
-          <context context-type="linenumber">55,57</context>
+          <context context-type="linenumber">56,58</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8736780065388669223" datatype="html">
         <source>Are you sure you want to delete this resource?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/edit-unit-resources/edit-unit-resources.component.ts</context>
-          <context context-type="linenumber">79</context>
+          <context context-type="linenumber">99</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3323880774610969171" datatype="html">