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.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<NewsComponent>;
+  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();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { NewsComponent } from './news.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [NewsComponent],
+  imports: [CommonModule],
+  exports: [NewsComponent],
+})
+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);
+      })
+    );
+  }
+}