feat(Home Page): Admin news on home

src/app/discourse-feed/discourse-feed.component.ts

@@ -1,11 +1,11 @@
-import { HttpClient } from '@angular/common/http';
 import { Directive, Input } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 @Directive()
 export abstract class DiscourseFeedComponent {
   @Input() baseUrl: string;
   @Input() category: string;
-  protected isLoaded: boolean;
+  protected loaded: boolean;
   @Input() queryString: string;
   protected topics: any;
 
@@ -18,7 +18,7 @@ export abstract class DiscourseFeedComponent {
           return !topic.pinned_globally;
         })
         .slice(0, 3);
-      this.isLoaded = true;
+      this.loaded = true;
     });
   }
 

src/app/home/admin-latest-news/admin-latest-news.component.html

@@ -0,0 +1 @@
+<latest-news [isDiscourseNewsAvailable]="false" [topics]="topics" [loaded]="loaded" />

src/app/home/admin-latest-news/admin-latest-news.component.spec.ts

@@ -0,0 +1,64 @@
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+
+import { AdminLatestNewsComponent } from './admin-latest-news.component';
+import { NewsService } from '../../services/news.service';
+import { News } from '../../domain/news';
+import { of } from 'rxjs';
+import { MockProvider } from 'ng-mocks';
+import { ActivatedRoute } from '@angular/router';
+
+describe('AdminLatestNewsComponent', () => {
+  let component: AdminLatestNewsComponent;
+  let fixture: ComponentFixture<AdminLatestNewsComponent>;
+
+  beforeEach(async () => {
+    const newsServiceSpy = jasmine.createSpyObj<NewsService>(['getAllNews']);
+    const news1 = new News({
+      id: 1,
+      date: '2026-02-01 19:14:23.0',
+      type: 'public',
+      title: 'Test News',
+      news: 'news content',
+      owner: undefined
+    });
+    const news2 = new News({
+      id: 2,
+      date: '2026-01-02 19:14:23.0',
+      type: 'teacherOnly',
+      title: 'Test News 2',
+      news: 'news content 2',
+      owner: undefined
+    });
+    const news3 = new News({
+      id: 3,
+      date: '2026-02-01 19:15:00.0',
+      type: 'public',
+      title: 'Test News 3',
+      news: 'news content 3',
+      owner: undefined
+    });
+
+    newsServiceSpy.getAllNews.and.callFake(() => of<News[]>([news1, news2, news3]));
+
+    await TestBed.configureTestingModule({
+      imports: [AdminLatestNewsComponent],
+      providers: [{ provide: NewsService, useValue: newsServiceSpy }, MockProvider(ActivatedRoute)]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AdminLatestNewsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should filter and sort topics', fakeAsync(() => {
+    component.ngOnInit();
+    tick();
+    expect(component['topics']).toBeTruthy();
+    expect(component['topics'].length).toBe(2);
+    expect(component['topics'][0].title).toBe('Test News 3');
+  }));
+});

src/app/home/admin-latest-news/admin-latest-news.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { LatestNewsComponent } from '../latest-news/latest-news.component';
+import { News } from '../../domain/news';
+import { NewsService } from '../../services/news.service';
+
+@Component({
+  imports: [LatestNewsComponent],
+  selector: 'admin-latest-news',
+  templateUrl: './admin-latest-news.component.html'
+})
+export class AdminLatestNewsComponent {
+  protected loaded: boolean = false;
+  protected topics: News[] = [];
+
+  constructor(private newsService: NewsService) {}
+
+  ngOnInit(): void {
+    this.newsService.getAllNews().subscribe((news) => {
+      this.topics = news
+        .filter((news) => news.type === 'public')
+        .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+      this.loaded = true;
+    });
+  }
+}

src/app/home/discourse-latest-news/discourse-latest-news.component.html

@@ -1,26 +1,7 @@
-<div class="latest-news dark-theme primary-border" [ngClass]="{ loaded: isLoaded }">
-  <h2
-    class="flex items-center"
-    [ngClass]="{ 'mat-small': xsScreen, 'mat-body-1': smallScreen && !xsScreen }"
-  >
-    <mat-icon>rss_feed</mat-icon>
-    <ng-container i18n>What's New?</ng-container>&nbsp;
-  </h2>
-  <ul>
-    @for (topic of topics; track topic; let index = $index) {
-      @if (!xsScreen || index === 0) {
-        <li [ngClass]="{ 'mat-small': smallScreen, 'mat-body-1': !smallScreen }">
-          <a href="{{ baseUrl }}/t/{{ topic.slug }}/{{ topic.id }}">
-            {{ topic.title }}
-          </a>
-          @if (smallScreen) {
-            •
-          }
-        </li>
-      }
-    }
-  </ul>
-  <div [ngClass]="{ 'mat-small': smallScreen, 'mat-body-1': !smallScreen }">
-    <a href="{{ baseUrl }}/{{ category }}" i18n>More news</a>
-  </div>
-</div>
+<latest-news
+  [isDiscourseNewsAvailable]="true"
+  [topics]="topics"
+  [baseUrl]="baseUrl"
+  [category]="category"
+  [loaded]="loaded"
+/>

src/app/home/discourse-latest-news/discourse-latest-news.component.spec.ts

@@ -17,9 +17,13 @@ describe('DiscourseLatestNewsComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-    imports: [],
-    providers: [DiscourseLatestNewsComponent, provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-});
+      imports: [],
+      providers: [
+        DiscourseLatestNewsComponent,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting()
+      ]
+    });
     http = TestBed.inject(HttpTestingController);
     fixture = TestBed.createComponent(DiscourseLatestNewsComponent);
     component = fixture.componentInstance;

src/app/home/discourse-latest-news/discourse-latest-news.component.ts

@@ -1,32 +1,10 @@
-import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
-import { BreakpointObserver } from '@angular/cdk/layout';
 import { DiscourseFeedComponent } from '../../discourse-feed/discourse-feed.component';
-import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
+import { LatestNewsComponent } from '../latest-news/latest-news.component';
 
 @Component({
-  imports: [CommonModule, MatIconModule],
+  imports: [LatestNewsComponent],
   selector: 'discourse-latest-news',
-  styleUrl: 'discourse-latest-news.component.scss',
   templateUrl: 'discourse-latest-news.component.html'
 })
-export class DiscourseLatestNewsComponent extends DiscourseFeedComponent {
-  protected smallScreen: boolean;
-  protected xsScreen: boolean;
-
-  constructor(
-    protected http: HttpClient,
-    private breakpointObserver: BreakpointObserver
-  ) {
-    super(http);
-    this.breakpointObserver
-      .observe(['(max-width: 40rem)', '(max-width: 48rem)'])
-      .subscribe((result) => {
-        this.smallScreen = result.matches;
-      });
-    this.breakpointObserver.observe(['(max-width: 40rem)']).subscribe((result) => {
-      this.xsScreen = result.matches;
-    });
-  }
-}
+export class DiscourseLatestNewsComponent extends DiscourseFeedComponent {}

src/app/home/home.component.html

@@ -37,16 +37,18 @@
         Integrated science learning and teaching with technology
       </div>
     </ng-template>
-    @if (isDiscourseNewsAvailable) {
-      <ng-template #sideTemplate>
+    <ng-template #sideTemplate>
+      @if (isDiscourseNewsAvailable) {
         <discourse-latest-news
           [@bounceIn]="{ value: '*', params: { duration: '1.25s', delay: '3500ms' } }"
           [baseUrl]="discourseUrl"
           [category]="discourseNewsCategory"
           queryString="order=latest"
         />
-      </ng-template>
-    }
+      } @else {
+        <admin-latest-news />
+      }
+    </ng-template>
   </app-hero-section>
   <section class="section">
     <div class="section--fullwidth section--slant mat-app-background">

src/app/home/home.component.spec.ts

@@ -2,9 +2,10 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { HomeComponent } from './home.component';
 import { ConfigService } from '../services/config.service';
 import { provideHttpClient } from '@angular/common/http';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockProvider } from 'ng-mocks';
 import { CallToActionComponent } from '../modules/shared/call-to-action/call-to-action.component';
 import { provideAnimations } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
@@ -13,7 +14,12 @@ describe('HomeComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [HomeComponent, MockComponent(CallToActionComponent)],
-      providers: [ConfigService, provideAnimations(), provideHttpClient()]
+      providers: [
+        ConfigService,
+        provideAnimations(),
+        provideHttpClient(),
+        MockProvider(ActivatedRoute)
+      ]
     }).compileComponents();
   }));
 

src/app/home/home.component.ts

@@ -1,31 +1,33 @@
-import { Component, OnInit, SecurityContext } from '@angular/core';
+import { AdminLatestNewsComponent } from './admin-latest-news/admin-latest-news.component';
+import { BlurbComponent } from '../modules/shared/blurb/blurb.component';
 import { bounceIn, flipInX, flipInY, jackInTheBox, rotateIn, zoomIn } from '../animations';
-import { DomSanitizer } from '@angular/platform-browser';
-import { ConfigService } from '../services/config.service';
-import { Config } from '../domain/config';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { HeroSectionComponent } from '../modules/shared/hero-section/hero-section.component';
-import { MatIcon } from '@angular/material/icon';
+import { CallToActionComponent } from '../modules/shared/call-to-action/call-to-action.component';
+import { Component, OnInit, SecurityContext } from '@angular/core';
+import { Config } from '../domain/config';
+import { ConfigService } from '../services/config.service';
 import { DiscourseLatestNewsComponent } from './discourse-latest-news/discourse-latest-news.component';
-import { NgClass } from '@angular/common';
-import { BlurbComponent } from '../modules/shared/blurb/blurb.component';
+import { DomSanitizer } from '@angular/platform-browser';
+import { HeroSectionComponent } from '../modules/shared/hero-section/hero-section.component';
 import { HomePageProjectLibraryComponent } from '../modules/library/home-page-project-library/home-page-project-library.component';
 import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { NgClass } from '@angular/common';
 import { RouterLink } from '@angular/router';
-import { CallToActionComponent } from '../modules/shared/call-to-action/call-to-action.component';
 
 @Component({
   animations: [bounceIn, flipInX, flipInY, jackInTheBox, rotateIn, zoomIn],
   imports: [
-    HeroSectionComponent,
-    MatIcon,
-    DiscourseLatestNewsComponent,
-    NgClass,
+    AdminLatestNewsComponent,
     BlurbComponent,
+    CallToActionComponent,
+    DiscourseLatestNewsComponent,
+    HeroSectionComponent,
     HomePageProjectLibraryComponent,
     MatButton,
-    RouterLink,
-    CallToActionComponent
+    MatIcon,
+    NgClass,
+    RouterLink
   ],
   selector: 'app-home',
   styleUrl: './home.component.scss',

src/app/home/latest-news/latest-news.component.html

@@ -0,0 +1,36 @@
+@if (topics) {
+  <div class="latest-news dark-theme primary-border" [ngClass]="{ loaded: loaded }">
+    <h2
+      class="flex items-center"
+      [ngClass]="{ 'mat-small': xsScreen, 'mat-body-1': smallScreen && !xsScreen }"
+    >
+      <mat-icon>rss_feed</mat-icon>
+      <ng-container i18n>What's New?</ng-container>&nbsp;
+    </h2>
+    <ul>
+      @for (topic of threeTopics; track topic; let index = $index) {
+        @if (!xsScreen || index === 0) {
+          <li [ngClass]="{ 'mat-small': smallScreen, 'mat-body-1': !smallScreen }">
+            @if (isDiscourseNewsAvailable) {
+              <a href="{{ baseUrl }}/t/{{ topic.slug }}/{{ topic.id }}">
+                {{ topic.title }}
+              </a>
+            } @else {
+              <a routerLink="/news" fragment="{{ topic.id }}" i18n>
+                {{ topic.title }}
+              </a>
+            }
+            <span class="divider"> • </span>
+          </li>
+        }
+      }
+    </ul>
+    <div [ngClass]="{ 'mat-small': smallScreen, 'mat-body-1': !smallScreen }">
+      @if (isDiscourseNewsAvailable) {
+        <a href="{{ baseUrl }}/{{ category }}" i18n>More news</a>
+      } @else {
+        <a routerLink="/news" i18n>More news</a>
+      }
+    </div>
+  </div>
+}