From bfb4f6e15be6985b0f8ec0dae4b0b07c27db1257 Mon Sep 17 00:00:00 2001 From: Nicolas Fuentes Maturana Date: Thu, 11 Nov 2021 14:12:32 +0100 Subject: [PATCH] feat(startsida): show news and info on home page ([TV-778-FE] (https://jira.arbetsformedlingen.se/browse/TV-778)) Squashed commit of the following: commit 3c4f404f8e6530b24661987142c5cc0780a48023 Author: fueno Date: Thu Nov 11 12:04:19 2021 +0100 TV-778-FE added loader, refactoring models, changed file name commit 0a9d373e0ea5a02fa026c603d28e7c3a9dee52c6 Author: fueno Date: Thu Nov 11 09:46:38 2021 +0100 TV-778-FE updated endpoint commit 90b73d9d1ff294828c1e65204a61789bca01ec86 Merge: 027bc82c f332dd41 Author: fueno Date: Wed Nov 10 16:35:17 2021 +0100 Merge branch 'develop' into feature/TV-778-FE commit 027bc82ceb98355ec804d2dda57234730ee5b142 Author: fueno Date: Wed Nov 10 13:40:56 2021 +0100 TV-778 rename commit 09f6b9cacb8fffa7c55db1866483460736184e77 Author: fueno Date: Wed Nov 10 13:11:37 2021 +0100 TV-778-FE implemented endpoint for news commit 2b3b354a568b73aa9eff364f516a9486c12bec17 Author: fueno Date: Mon Nov 8 14:38:59 2021 +0100 TV-778 refactoring commit ac2547415ad379e90bc7e4979f4dfa52153453f5 Author: fueno Date: Mon Nov 8 13:09:07 2021 +0100 TV-778 ready for news api commit e541c9e0570f6551f3f565978e23a208892672e5 Author: fueno Date: Mon Nov 8 11:46:28 2021 +0100 TV-778 news component created --- .../src/app/pages/start/start.component.html | 2 + .../src/app/pages/start/start.module.ts | 2 + .../components/nyheter/news.component.html | 6 +++ .../components/nyheter/news.component.scss | 5 +++ .../components/nyheter/news.component.spec.ts | 22 +++++++++++ .../components/nyheter/news.component.ts | 17 +++++++++ .../shared/components/nyheter/news.module.ts | 14 +++++++ .../shared/models/api/news.response.model.ts | 8 ++++ .../src/app/shared/models/news.model.ts | 15 ++++++++ .../shared/services/api/news.api.service.ts | 37 +++++++++++++++++++ 10 files changed, 128 insertions(+) create mode 100644 apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.html create mode 100644 apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.scss create mode 100644 apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.spec.ts create mode 100644 apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.ts create mode 100644 apps/mina-sidor-fa/src/app/shared/components/nyheter/news.module.ts create mode 100644 apps/mina-sidor-fa/src/app/shared/models/api/news.response.model.ts create mode 100644 apps/mina-sidor-fa/src/app/shared/models/news.model.ts create mode 100644 apps/mina-sidor-fa/src/app/shared/services/api/news.api.service.ts diff --git a/apps/mina-sidor-fa/src/app/pages/start/start.component.html b/apps/mina-sidor-fa/src/app/pages/start/start.component.html index af66658..dfe6c20 100644 --- a/apps/mina-sidor-fa/src/app/pages/start/start.component.html +++ b/apps/mina-sidor-fa/src/app/pages/start/start.component.html @@ -25,6 +25,8 @@ innehåll, förbättringar och uppdateringar.

Målet är helt enkelt att underlätta ditt dagliga arbete!

+ +

diff --git a/apps/mina-sidor-fa/src/app/pages/start/start.module.ts b/apps/mina-sidor-fa/src/app/pages/start/start.module.ts index 81a2bbe..3c7d87c 100644 --- a/apps/mina-sidor-fa/src/app/pages/start/start.module.ts +++ b/apps/mina-sidor-fa/src/app/pages/start/start.module.ts @@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { LayoutModule } from '@msfa-shared/components/layout/layout.module'; +import { NewsModule } from '@msfa-shared/components/nyheter/news.module'; import { UiLoaderModule } from '@ui/loader/loader.module'; import { StartComponent } from './start.component'; @@ -15,6 +16,7 @@ import { StartComponent } from './start.component'; LayoutModule, DigiNgCardModule, UiLoaderModule, + NewsModule ], }) export class StartModule {} diff --git a/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.html b/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.html new file mode 100644 index 0000000..081f728 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.html @@ -0,0 +1,6 @@ + +

{{news.title}}

+
+
+ + diff --git a/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.scss b/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.scss new file mode 100644 index 0000000..6a3f6d8 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.scss @@ -0,0 +1,5 @@ +@import 'variables/gutters'; + +h1 { + margin-top: $digi--layout--gutter--xl; +} diff --git a/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.spec.ts b/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.spec.ts new file mode 100644 index 0000000..aa0159b --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.spec.ts @@ -0,0 +1,22 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NewsComponent } from './news.component'; +describe('NewsComponent', () => { + let component: NewsComponent; + let fixture: ComponentFixture; + beforeEach(async () => { + await TestBed.configureTestingModule({ + schemas: [CUSTOM_ELEMENTS_SCHEMA], + declarations: [NewsComponent] + }) + .compileComponents(); + }); + beforeEach(() => { + fixture = TestBed.createComponent(NewsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.ts b/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.ts new file mode 100644 index 0000000..82dc79b --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import { News } from '@msfa-models/news.model'; +import { NewsApiService } from '@msfa-services/api/news.api.service'; +import { Observable } from 'rxjs'; + +@Component({ + selector: 'msfa-news', + templateUrl: 'news.component.html', + styleUrls: ['news.component.scss'] +}) +export class NewsComponent { + newsData$: Observable = this.newsApiService.fetchNews$(); + newsLoading$: Observable = this.newsApiService.newsLoading$; + + constructor(private newsApiService: NewsApiService) { } + +} diff --git a/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.module.ts b/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.module.ts new file mode 100644 index 0000000..caa9ace --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/components/nyheter/news.module.ts @@ -0,0 +1,14 @@ +import { CommonModule } from '@angular/common'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { UiLoaderModule } from '@ui/loader/loader.module'; +import { NewsComponent } from './news.component'; + +@NgModule({ + schemas: [CUSTOM_ELEMENTS_SCHEMA], + declarations: [NewsComponent], + imports: [CommonModule, UiLoaderModule], + exports: [NewsComponent] +}) +export class NewsModule { + +} diff --git a/apps/mina-sidor-fa/src/app/shared/models/api/news.response.model.ts b/apps/mina-sidor-fa/src/app/shared/models/api/news.response.model.ts new file mode 100644 index 0000000..4aa81a4 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/models/api/news.response.model.ts @@ -0,0 +1,8 @@ +export interface NewsResponse { + body: { + view: { + value: string; + } + }; + title: string; +} diff --git a/apps/mina-sidor-fa/src/app/shared/models/news.model.ts b/apps/mina-sidor-fa/src/app/shared/models/news.model.ts new file mode 100644 index 0000000..013b845 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/models/news.model.ts @@ -0,0 +1,15 @@ +import { NewsResponse } from './api/news.response.model'; + +export interface News { + title: string; + body: string; +} + +export function mapNewsResponseToNews(data: NewsResponse): News { + const { body, title } = data; + + return { + title: title, + body: body.view.value + } +} diff --git a/apps/mina-sidor-fa/src/app/shared/services/api/news.api.service.ts b/apps/mina-sidor-fa/src/app/shared/services/api/news.api.service.ts new file mode 100644 index 0000000..d216ccc --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/services/api/news.api.service.ts @@ -0,0 +1,37 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { environment } from '@msfa-environment'; +import { NewsResponse } from '@msfa-models/api/news.response.model'; +import { errorToCustomError } from '@msfa-models/error/custom-error'; +import { mapNewsResponseToNews, News } from '@msfa-models/news.model'; +import { ErrorService } from '@msfa-services/error.service'; +import { BehaviorSubject, Observable, throwError } from 'rxjs'; +import { catchError, filter, map } from 'rxjs/operators'; + +@Injectable({ + providedIn: 'root' +}) +export class NewsApiService { + private _apiBaseUrl = `${environment.api.url}/confluence/nyheter`; + private _newsLoading$ = new BehaviorSubject(false); + public newsLoading$: Observable = this._newsLoading$.asObservable(); + + constructor(private http: HttpClient, private errorService: ErrorService) { } + + public fetchNews$(): Observable { + this._newsLoading$.next(true); + + return this.http.get(this._apiBaseUrl).pipe( + filter(response => !!response), + map(response => { + this._newsLoading$.next(false); + return mapNewsResponseToNews(response['data']); + }), + catchError((error: Error) => { + this.errorService.add(errorToCustomError({ ...error, message: `Kunde inte hämta nyheter.\n\n${error.message}` })); + return throwError(errorToCustomError(error)); + }) + ); + } + +}