Updated news functionality

apps/mina-sidor-fa/src/app/pages/start/components/news/news.component.html

@@ -0,0 +1,4 @@
+<digi-layout-container class="news" *ngIf="news" af-no-gutter>
+  <h2>{{news.title}}</h2>
+  <div class="news__content" [innerHtml]="news.body"></div>
+</digi-layout-container>

apps/mina-sidor-fa/src/app/pages/start/components/news/news.component.scss

@@ -0,0 +1,7 @@
+@import 'variables/gutters';
+
+.news {
+  &__content {
+    max-width: var(--digi--typography--text--max-width);
+  }
+}

apps/mina-sidor-fa/src/app/pages/start/components/news/news.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { News } from '@msfa-models/news.model';
+
+@Component({
+  selector: 'msfa-news',
+  templateUrl: 'news.component.html',
+  styleUrls: ['news.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NewsComponent {
+  @Input() news: News;
+}

apps/mina-sidor-fa/src/app/pages/start/components/news/news.module.ts

@@ -1,14 +1,11 @@
 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],
+  imports: [CommonModule],
-  exports: [NewsComponent]
+  exports: [NewsComponent],
 })
-export class NewsModule {
+export class NewsModule {}
-
-}

apps/mina-sidor-fa/src/app/pages/start/start.component.html

@@ -1,5 +1,5 @@
 <msfa-layout [showBreadCrumbs]="false">
-  <ng-container *ngIf="userRoles$ | async as userRoles; else loadingRef">
+  <ng-container *ngIf="userRoles$ | async as userRoles; else fullscreenLoadingRef">
     <digi-typography>
       <section class="start">
         <header class="start__header">
@@ -26,7 +26,9 @@
             </p>
             <p>Målet är helt enkelt att underlätta ditt dagliga arbete!</p>
 
-            <msfa-news></msfa-news>
+            <div class="start__news">
+              <msfa-news *ngIf="news$ | async as news; else loadingRef" [news]="news"></msfa-news>
+            </div>
           </ng-container>
           <ng-template #unauthorizedRef>
             <p>
@@ -40,6 +42,9 @@
   </ng-container>
 </msfa-layout>
 
-<ng-template #loadingRef>
+<ng-template #fullscreenLoadingRef>
   <ui-loader uiType="full-screen"></ui-loader>
 </ng-template>
+<ng-template #loadingRef>
+  <ui-loader uiType="padded"></ui-loader>
+</ng-template>

apps/mina-sidor-fa/src/app/pages/start/start.component.ts

@@ -1,8 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { News } from '@msfa-models/news.model';
 import { Role } from '@msfa-models/role.model';
 import { UserService } from '@msfa-services/api/user.service';
 import { Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
+import { StartService } from './start.service';
 
 @Component({
   selector: 'msfa-start',
@@ -16,8 +18,10 @@ export class StartComponent {
     map(userName => userName.fullName)
   );
   userRoles$: Observable<Role[]> = this.userService.userRoles$;
+  news$: Observable<News> = this.startService.fetchNews$();
+  newsLoading$: Observable<boolean> = this.startService.newsLoading$;
 
-  constructor(private userService: UserService) {}
+  constructor(private userService: UserService, private startService: StartService) {}
 
   isAuthorizedUser(userRoles: Role[]): boolean {
     return !!userRoles.length;

apps/mina-sidor-fa/src/app/pages/start/start.module.ts

@@ -3,9 +3,10 @@ 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 { NewsModule } from './components/news/news.module';
 import { StartComponent } from './start.component';
+import { StartService } from './start.service';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -16,7 +17,8 @@ import { StartComponent } from './start.component';
     LayoutModule,
     DigiNgCardModule,
     UiLoaderModule,
-    NewsModule
+    NewsModule,
   ],
+  providers: [StartService],
 })
 export class StartModule {}

apps/mina-sidor-fa/src/app/pages/start/start.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { mapNewsResponseToNews, News } from '@msfa-models/news.model';
+import { NewsApiService } from '@msfa-services/api/news.api.service';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable()
+export class StartService {
+  private _newsLoading$ = new BehaviorSubject<boolean>(false);
+  public newsLoading$: Observable<boolean> = this._newsLoading$.asObservable();
+
+  constructor(private newsApiService: NewsApiService) {}
+
+  public fetchNews$(): Observable<News> {
+    this._newsLoading$.next(true);
+
+    return this.newsApiService.fetchNews$().pipe(
+      map(response => {
+        this._newsLoading$.next(false);
+        return mapNewsResponseToNews(response);
+      })
+    );
+  }
+}

apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.html

@@ -1,6 +0,0 @@
-<ng-container *ngIf="newsData$ | async as news">
-  <h1>{{news.title}}</h1>
-  <hr />
-  <div [innerHtml]="news.body"></div>
-</ng-container>
-<ui-loader *ngIf="newsLoading$ | async" uiType="padded"></ui-loader>

apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.scss

@@ -1,5 +0,0 @@
-@import 'variables/gutters';
-
-h1 {
-  margin-top: $digi--layout--gutter--xl;
-}

apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.ts

@@ -1,17 +0,0 @@
-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<News> = this.newsApiService.fetchNews$();
-  newsLoading$: Observable<boolean> = this.newsApiService.newsLoading$;
-
-  constructor(private newsApiService: NewsApiService) { }
-
-}

apps/mina-sidor-fa/src/app/shared/enums/feature.enum.ts

@@ -16,4 +16,5 @@ export enum Feature {
   REPORTING_PERIODISK_REDOVISNING,
   REPORTING_INFORMATIV_RAPPORT,
   EXPORTS,
+  NEWS,
 }

apps/mina-sidor-fa/src/app/shared/services/api/news.api.service.ts

@@ -1,37 +1,37 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { ErrorType } from '@msfa-enums/error-type.enum';
 import { environment } from '@msfa-environment';
 import { NewsResponse } from '@msfa-models/api/news.response.model';
-import { errorToCustomError } from '@msfa-models/error/custom-error';
+import { CustomError } 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 { BehaviorSubject, Observable } from 'rxjs';
-import { catchError, filter, map } from 'rxjs/operators';
+import { catchError, map } from 'rxjs/operators';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class NewsApiService {
   private _apiBaseUrl = `${environment.api.url}/confluence/nyheter`;
   private _newsLoading$ = new BehaviorSubject<boolean>(false);
   public newsLoading$: Observable<boolean> = this._newsLoading$.asObservable();
 
-  constructor(private http: HttpClient, private errorService: ErrorService) { }
+  constructor(private http: HttpClient, private errorService: ErrorService) {}
 
-  public fetchNews$(): Observable<News> {
+  public fetchNews$(): Observable<NewsResponse> {
     this._newsLoading$.next(true);
 
-    return this.http.get<NewsResponse>(this._apiBaseUrl).pipe(
+    return this.http.get<{ data: NewsResponse }>(this._apiBaseUrl).pipe(
-      filter(response => !!response),
+      map(({ data }) => data),
-      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}` }));
+        const customError = new CustomError({
-        return throwError(errorToCustomError(error));
+          error,
+          message: `Kunde inte hämta nyheter.\n\n${error.message}`,
+          type: ErrorType.API,
+        });
+        this.errorService.add(customError);
+        throw customError;
       })
     );
   }
-
 }

apps/mina-sidor-fa/src/environments/active-features.ts

@@ -10,6 +10,8 @@ export const ACTIVE_FEATURES_PROD: Feature[] = [
   Feature.REPORTING,
   Feature.LOGGING,
   Feature.REPORTING_PERIODISK_REDOVISNING,
+  Feature.REPORTING_INFORMATIV_RAPPORT,
+  Feature.EXPORTS,
 ];
 
 export const ACTIVE_FEATURES_TEST: Feature[] = [
@@ -27,4 +29,5 @@ export const ACTIVE_FEATURES_TEST: Feature[] = [
   Feature.REPORTING_PERIODISK_REDOVISNING,
   Feature.REPORTING_INFORMATIV_RAPPORT,
   Feature.EXPORTS,
+  Feature.NEWS,
 ];