chore(): update frontend to get data from backend

Author: inpercima

frontend/angular.json

@@ -92,6 +92,9 @@
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "proxyConfig": "src/proxy.conf.json"
+          },
           "configurations": {
             "production": {
               "buildTarget": "lvz-viz:build:production"

frontend/src/app/features/search/paged-response.model.ts

@@ -0,0 +1,4 @@
+export interface PagedResponse<T> {
+  content: T[];
+  totalElements: number;
+}

frontend/src/app/features/search/search.component.html

@@ -14,7 +14,7 @@
           <input matInput placeholder="Suchphrase eingeben" #input />
         </mat-form-field>
         <div id="filter-article">
-          {{ length }} Artikel <span *ngIf="length > 0 && query()"> für Filter mit '{{ query() }}'</span>
+          {{ totalElements }} Artikel <span *ngIf="totalElements > 0 && query()"> für Filter mit '{{ query() }}'</span>
         </div>
       </div>
 
@@ -59,7 +59,7 @@
         <tr mat-row *matRowDef="let row; columns: ['article']" class="article-detail-row"></tr>
       </table>
 
-      <mat-paginator [length]="length" [pageSizeOptions]="[5]" aria-label="Select page of articles"></mat-paginator>
+      <mat-paginator [length]="totalElements" [pageSizeOptions]="[5]" aria-label="Select page of articles"></mat-paginator>
     </as-split-area>
   </as-split>
 </div>

frontend/src/app/features/search/search.component.ts

@@ -1,14 +1,15 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { DatePipe, NgIf } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, DestroyRef, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { AngularSplitModule, SplitComponent } from 'angular-split';
 import * as L from 'leaflet';
-import { debounceTime, distinctUntilChanged, fromEvent, map, merge, startWith, Subject, switchMap, takeUntil, tap } from 'rxjs';
+import { debounceTime, distinctUntilChanged, fromEvent } from 'rxjs';
 import { Content } from './content.model';
 import { SearchService } from './search.service';
 
@@ -28,21 +29,23 @@ import { SearchService } from './search.service';
     // { provide: SearchService, useClass: SearchServiceMock }
   ],
 })
-export class SearchComponent implements AfterViewInit, OnInit, OnDestroy {
+export class SearchComponent implements AfterViewInit, OnInit {
   private breakpointObserver = inject(BreakpointObserver);
   private searchService = inject(SearchService);
 
   displayedColumns: string[] = ['title', 'publication'];
   dataSource = new MatTableDataSource<Content>();
 
-  destroyed = new Subject<void>();
   isSmallSize = false;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   expandedElement: any;
 
-  length = 0;
+  totalElements = 0;
   author = '';
+  searchTerm = '';
+
+  destroyRef = inject(DestroyRef);
 
   private map!: L.Map;
   private markers!: L.FeatureGroup;
@@ -54,7 +57,7 @@ export class SearchComponent implements AfterViewInit, OnInit, OnDestroy {
   constructor() {
     this.breakpointObserver
       .observe([Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
-      .pipe(takeUntil(this.destroyed))
+      .pipe(takeUntilDestroyed())
       .subscribe((result) => {
         for (const query of Object.keys(result.breakpoints)) {
           if (result.breakpoints[query]) {
@@ -76,12 +79,23 @@ export class SearchComponent implements AfterViewInit, OnInit, OnDestroy {
   ngAfterViewInit(): void {
     this.initMap();
     this.initSplit();
-    this.loadContent();
+    this.initInput();
+
+    this.loadPage(0, 5);
+    this.paginator.page.subscribe(() => {
+      this.loadPage(this.paginator.pageIndex, this.paginator.pageSize);
+    });
   }
 
-  ngOnDestroy() {
-    this.destroyed.next();
-    this.destroyed.complete();
+  /**
+   * Loads content from backend with parameters which contains much more information and extract the content of articles.
+   */
+  loadPage(pageIndex: number, pageSize: number) {
+    this.searchService.fetch(pageIndex, pageSize, 'datePublished,desc', this.searchTerm).subscribe((response) => {
+      this.totalElements = response.totalElements;
+      this.dataSource = new MatTableDataSource(response.content);
+      this.addToMap(response.content);
+    });
   }
 
   /**
@@ -93,37 +107,6 @@ export class SearchComponent implements AfterViewInit, OnInit, OnDestroy {
     });
   }
 
-  /**
-   * Loads content from backend with parameters which contains much more information and extract the content of articles.
-   */
-  private loadContent(): void {
-    const filter = fromEvent(this.input.nativeElement, 'keyup').pipe(
-      debounceTime(500),
-      distinctUntilChanged(),
-      tap(() => this.paginator.firstPage())
-    );
-
-    merge(filter, this.paginator.page)
-      .pipe(
-        takeUntil(this.destroyed),
-        startWith({}),
-        switchMap(() => {
-          return this.searchService
-            .fetch(this.paginator.pageIndex, this.paginator.pageSize, 'datePublished,desc', this.input.nativeElement.value)
-            .pipe(
-              map((data) => {
-                this.length = data.length;
-                return data;
-              })
-            );
-        })
-      )
-      .subscribe((content) => {
-        this.addToMap(content);
-        this.dataSource = new MatTableDataSource(content);
-      });
-  }
-
   /**
    * Returns the query from the input field or undefined if the value is empty.
    *
@@ -145,6 +128,19 @@ export class SearchComponent implements AfterViewInit, OnInit, OnDestroy {
     }).addTo(this.map);
   }
 
+  /**
+   * Initialize search field.
+   */
+  initInput(): void {
+    fromEvent(this.input.nativeElement, 'keyup')
+      .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(500), distinctUntilChanged())
+      .subscribe((_) => {
+        this.searchTerm = this.input.nativeElement.value;
+        this.paginator.firstPage();
+        this.loadPage(0, this.paginator.pageSize);
+      });
+  }
+
   /**
    * Integrates content as marker and popup information returned from the server into the initialized map.
    *

frontend/src/app/features/search/search.service.ts

@@ -1,21 +1,20 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
 import { Observable } from 'rxjs';
-
 import { environment } from '../../../environments/environment';
+import { Content } from './content.model';
+import { PagedResponse } from './paged-response.model';
 
 @Injectable({
   providedIn: 'root',
 })
 export class SearchService {
   private httpClient = inject(HttpClient);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  fetch(page: number, size: number, sort: string, query?: string): Observable<any> {
+  fetch(page: number, size: number, sort: string, query?: string): Observable<PagedResponse<Content>> {
     const collected = { page, size, sort };
     const params = new HttpParams({ fromObject: query ? { ...collected, query } : collected });
     const url = query ? 'search' : 'getx';
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return this.httpClient.get<any>(environment.api + url, { params });
+    return this.httpClient.get<PagedResponse<Content>>(environment.api + url, { params });
   }
 }

frontend/src/proxy.conf.json

@@ -0,0 +1,6 @@
+{
+  "/api": {
+    "target": "http://localhost:8080",
+    "secure": false
+  }
+}