feat(Home Page): Admin news on home

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

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

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,26 @@
+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({
+  selector: 'admin-latest-news',
+  imports: [LatestNewsComponent],
+  templateUrl: './admin-latest-news.component.html',
+  styleUrl: './admin-latest-news.component.scss'
+})
+export class AdminLatestNewsComponent {
+  protected topics: News[] = [];
+  protected isLoaded: boolean = false;
+
+  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.isLoaded = 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"
+  [isLoaded]="isLoaded"
+/>

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

@@ -1,61 +0,0 @@
-@use 'style/abstracts/functions';
-
-.latest-news {
-  padding: 8px;
-  background-color: rgba(0,0,0,0.8);
-  border-style: solid;
-  border-width: 0 0 0 8px;
-  display: none;
-
-  [dir=rtl] & {
-    border-width: 0 8px 0 0;
-  }
-
-  @media (min-width: functions.breakpoint('md.min')) {
-    padding: 24px;
-  }
-
-  &.loaded {
-    display: block;
-  }
-
-  > * {
-    @media (max-width: functions.breakpoint('sm.max')) {
-      display: inline;
-    }
-  }
-}
-
-.mat-icon {
-  vertical-align: sub;
-}
-
-ul {
-  padding: 0;
-
-  @media (min-width: functions.breakpoint('md.min')) {
-    padding: 0 0 0 16px;
-  }
-}
-
-li {
-  &:not(:last-of-type) {
-    margin-bottom: 4px;
-  }
-
-  @media (max-width: functions.breakpoint('sm.max')) {
-    display: inline;
-    list-style-type: none;
-  }
-
-  @media (min-width: functions.breakpoint('md.min')) {
-    a {
-      max-width: 100%;
-      vertical-align: middle;
-      display: inline-block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-}

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,11 @@
-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

@@ -13,12 +13,14 @@ import { HomePageProjectLibraryComponent } from '../modules/library/home-page-pr
 import { MatButton } from '@angular/material/button';
 import { RouterLink } from '@angular/router';
 import { CallToActionComponent } from '../modules/shared/call-to-action/call-to-action.component';
+import { AdminLatestNewsComponent } from './admin-latest-news/admin-latest-news.component';
 
 @Component({
   animations: [bounceIn, flipInX, flipInY, jackInTheBox, rotateIn, zoomIn],
   imports: [
     HeroSectionComponent,
     MatIcon,
+    AdminLatestNewsComponent,
     DiscourseLatestNewsComponent,
     NgClass,
     BlurbComponent,

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: 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 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>
+}