fix(Unit Library): Redesign 2025 Part 2

src/app/modules/library/library-project-details/library-project-details.component.html

@@ -68,6 +68,16 @@
           >
         </p>
       }
+      @if (project.metadata.resources?.length > 0) {
+        <p>
+          <strong i18n>Resources:</strong>
+          {{ first ? ' ' : '' }}
+          @for (resource of project.metadata.resources; track resource.name; let last = $last) {
+            <a href="{{ resource.url }}" target="_blank">{{ resource.name }}</a
+            >{{ last ? '' : ' • ' }}
+          }
+        </p>
+      }
       @if (project.metadata.summary) {
         <div [innerHTML]="project.metadata.summary"></div>
       }
@@ -128,16 +138,6 @@
           }
         </p>
       }
-      @if (project.metadata.resources?.length > 0) {
-        <p>
-          <strong i18n>Resources:</strong>
-          {{ first ? ' ' : '' }}
-          @for (resource of project.metadata.resources; track resource.name; let last = $last) {
-            <a href="{{ resource.url }}" target="_blank">{{ resource.name }}</a
-            >{{ last ? '' : ' • ' }}
-          }
-        </p>
-      }
       @if (project.tags) {
         <unit-tags [tags]="project.tags" />
       }
@@ -208,7 +208,7 @@
       >
     </button>
   }
-  @if (project.metadata.unitType === 'Platform') {
+  @if (canPreview) {
     <button mat-flat-button color="primary" (click)="previewProject()">
       <mat-icon>preview</mat-icon>&nbsp;<ng-container i18n>Preview</ng-container>
     </button>

src/app/modules/library/library-project-details/library-project-details.component.spec.ts

@@ -13,22 +13,17 @@ let component: LibraryProjectDetailsComponent;
 let fixture: ComponentFixture<LibraryProjectDetailsComponent>;
 describe('LibraryProjectDetailsComponent', () => {
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [MockComponent(LibraryProjectMenuComponent)],
-      imports: [LibraryProjectDetailsComponent],
-      providers: [
-        MockProviders(ConfigService, MatDialog, MatDialogRef, UserService),
-        { provide: MAT_DIALOG_DATA, useValue: {} }
-      ]
-    });
-    fixture = TestBed.createComponent(LibraryProjectDetailsComponent);
-    component = fixture.componentInstance;
     const project: Project = new Project();
     project.id = 1;
     project.name = 'Photosynthesis & Cellular Respiration';
     project.projectThumb = 'photo.png';
     project.metadata = {
       grades: ['7'],
+      standards: {
+        ngss: [{ id: 'MS-LS1-6', name: 'MS-LS1-6', url: 'http://ngss.com' }],
+        commonCore: [],
+        learningForJustice: []
+      },
       title: 'Photosynthesis & Cellular Respiration',
       summary: 'A really great unit.',
       unitType: 'Platform',
@@ -39,14 +34,18 @@ describe('LibraryProjectDetailsComponent', () => {
       ],
       resources: [{ name: 'Resource 1', uri: 'http://example.com/resource1' }]
     };
-    component['standards'] = {
-      ngss: [{ id: 'MS-LS1-6', name: 'MS-LS1-6', url: 'http://ngss.com' }],
-      commonCore: [],
-      learningForJustice: []
-    };
-    component['project'] = new Project(project);
+    TestBed.configureTestingModule({
+      declarations: [MockComponent(LibraryProjectMenuComponent)],
+      imports: [LibraryProjectDetailsComponent],
+      providers: [
+        MockProviders(ConfigService, MatDialog, MatDialogRef, UserService),
+        { provide: MAT_DIALOG_DATA, useValue: { project: project } }
+      ]
+    });
+
+    fixture = TestBed.createComponent(LibraryProjectDetailsComponent);
+    component = fixture.componentInstance;
     component['parentProject'] = new ParentProject();
-    component['setLicenseInfo']();
     fixture.detectChanges();
   });
 
@@ -106,8 +105,14 @@ function isResourceUnitType_HideButtons() {
       fixture.detectChanges();
     });
 
-    it('should hide buttons when unit type is Resource', () => {
+    it('should hide Use with Class button when unit type is Resource', () => {
+      expect(getButtonWithText('Use with Class')).toBeFalsy();
+    });
+
+    it('should hide Preview button when unit type is Resource and it has no resources', () => {
       expect(getButtonWithText('Use with Class')).toBeFalsy();
+      component['canPreview'] = false;
+      fixture.detectChanges();
       expect(getButtonWithText('Preview')).toBeFalsy();
     });
   });

src/app/modules/library/library-project-details/library-project-details.component.ts

@@ -37,6 +37,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 })
 export class LibraryProjectDetailsComponent implements OnInit {
   protected authorsString: string = '';
+  protected canPreview: boolean;
   protected isCopy: boolean;
   protected isTeacher: boolean;
   protected isRunProject: false;
@@ -73,6 +74,9 @@ export class LibraryProjectDetailsComponent implements OnInit {
       }
       this.standards = this.project.metadata.standards;
       this.setLicenseInfo();
+      this.canPreview = !(
+        this.project.metadata.unitType === 'Other' && this.project.metadata.resources.length === 0
+      );
     }
   }
 
@@ -104,11 +108,21 @@ export class LibraryProjectDetailsComponent implements OnInit {
   }
 
   protected previewProject(): void {
-    window.open(
-      this.project.wiseVersion === 4
-        ? `${this.configService.getWISE4Hostname()}` +
-            `/previewproject.html?projectId=${this.project.id}`
-        : `/preview/unit/${this.project.id}`
-    );
+    if (this.project.wiseVersion === 4) {
+      window.open(
+        `${this.configService.getWISE4Hostname()}` +
+          `/previewproject.html?projectId=${this.project.id}`
+      );
+    } else {
+      this.previewProjectV5();
+    }
+  }
+
+  private previewProjectV5(): void {
+    if (this.project.metadata.unitType === 'Platform') {
+      window.open(`/preview/unit/${this.project.id}`);
+    } else {
+      window.open(this.project.metadata.resources[0].url);
+    }
   }
 }

src/app/modules/library/library-project-disciplines/library-project-disciplines.component.ts

@@ -20,7 +20,9 @@ export class LibraryProjectDisciplinesComponent implements OnInit {
         ESS: '#2E7D32',
         ETS: '#1565C0',
         LS: '#D81B60',
-        PS: '#8E24AA'
+        Math: '#444444',
+        PS: '#8E24AA',
+        SJ: '#F57C00'
       };
       this.disciplines.forEach((discipline) => {
         discipline.color = colors[discipline.id] ?? '#000000';

src/app/modules/library/library/library.component.ts

@@ -73,7 +73,7 @@ export abstract class LibraryComponent implements OnInit {
         return project;
       })
       .filter((project) => project.visible)
-      .sort((a, b) => a.metadata.title.localeCompare(b.metadata.title));
+      .sort((a, b) => b.id - a.id);
     this.emitNumberOfProjectsVisible(this.countVisibleProjects(this.filteredProjects));
     this.pageIndex = 0;
     this.setPagination();

src/app/modules/library/personal-library/personal-library.component.spec.ts

@@ -142,7 +142,7 @@ function showArchivedProjects() {
   describe('archived units view', () => {
     it('only shows archived units', async () => {
       await harness.showArchivedView();
-      expect(await harness.getProjectIdsInView()).toEqual([projectId1, projectId2]);
+      expect(await harness.getProjectIdsInView()).toEqual([projectId2, projectId1]);
     });
   });
 }

src/app/modules/shared/select-menu/select-menu.component.html

@@ -6,16 +6,20 @@
     [(value)]="value"
     [multiple]="multiple"
   >
-    <mat-select-trigger *ngIf="multiple">
-      {{ selectField.value ? selectField.value[0] : '' }}
-      @if (selectField.value?.length > 1) {
-      <span> (+{{ selectField.value.length - 1 }} <ng-container i18n>more</ng-container>) </span>
-      }
-    </mat-select-trigger>
+    @if (multiple) {
+      <mat-select-trigger>
+        {{ selectField.value ? selectField.value[0] : '' }}
+        @if (selectField.value?.length > 1) {
+          <span>
+            (+{{ selectField.value.length - 1 }} <ng-container i18n>more</ng-container>)
+          </span>
+        }
+      </mat-select-trigger>
+    }
     @for (option of options; track option.id) {
-    <mat-option [value]="option[valueProp]">
-      {{ option[viewValueProp] }}
-    </mat-option>
+      <mat-option [value]="option[valueProp]">
+        {{ option[viewValueProp] }}
+      </mat-option>
     }
   </mat-select>
 </mat-form-field>

src/app/modules/shared/select-menu/select-menu.component.ts

@@ -12,11 +12,11 @@ import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSelectModule } from '@angular/material/select';
 
 @Component({
-    encapsulation: ViewEncapsulation.None,
-    imports: [CommonModule, FormsModule, MatSelectModule, ReactiveFormsModule],
-    selector: 'app-select-menu',
-    styleUrl: './select-menu.component.scss',
-    templateUrl: './select-menu.component.html'
+  encapsulation: ViewEncapsulation.None,
+  imports: [CommonModule, FormsModule, MatSelectModule, ReactiveFormsModule],
+  selector: 'app-select-menu',
+  styleUrl: './select-menu.component.scss',
+  templateUrl: './select-menu.component.html'
 })
 export class SelectMenuComponent implements OnInit {
   @Output('update') change: EventEmitter<string> = new EventEmitter<string>();

src/messages.xlf

@@ -5834,7 +5834,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.ts</context>
-          <context context-type="linenumber">51</context>
+          <context context-type="linenumber">52</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3785094524839933600" datatype="html">
@@ -5845,7 +5845,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.ts</context>
-          <context context-type="linenumber">49</context>
+          <context context-type="linenumber">50</context>
         </context-group>
       </trans-unit>
       <trans-unit id="9120263586696781927" datatype="html">
@@ -5856,7 +5856,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.ts</context>
-          <context context-type="linenumber">50</context>
+          <context context-type="linenumber">51</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2247270192251966992" datatype="html">
@@ -5909,32 +5909,32 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">38,40</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="4849120309760741886" datatype="html">
+        <source>Resources:</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
+          <context context-type="linenumber">73,75</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="5615583660036576020" datatype="html">
         <source>Discipline:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
-          <context context-type="linenumber">76,78</context>
+          <context context-type="linenumber">86,88</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3217999400450328473" datatype="html">
         <source>Features:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
-          <context context-type="linenumber">88,89</context>
+          <context context-type="linenumber">98,99</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1135894126071086314" datatype="html">
         <source>Standards Addressed:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
-          <context context-type="linenumber">101,103</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="4849120309760741886" datatype="html">
-        <source>Resources:</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
-          <context context-type="linenumber">133,135</context>
+          <context context-type="linenumber">111,113</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8316240444829030702" datatype="html">
@@ -5983,7 +5983,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Use with Class</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
-          <context context-type="linenumber">207,211</context>
+          <context context-type="linenumber">207,212</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/create-run-dialog/create-run-dialog.component.html</context>
@@ -6029,7 +6029,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>License pertains to original content created by the author(s). Authors are responsible for the usage and attribution of any third-party content linked to or included in this work.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.ts</context>
-          <context context-type="linenumber">43</context>
+          <context context-type="linenumber">44</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3538004306368214541" datatype="html">
@@ -6625,7 +6625,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>more</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/shared/select-menu/select-menu.component.html</context>
-          <context context-type="linenumber">12,15</context>
+          <context context-type="linenumber">14,18</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/shared/standards-select-menu/standards-select-menu.component.html</context>