the data from app component is now passed correctly from app to dialo…

…g, which opens correctly

NewsfeedFrontend/src/app/ArticleService.ts

@@ -1,5 +1,5 @@
 import {Injectable} from "@angular/core";
-import {NewsFeedItem} from "./Interfaces";
+import {Article, NewsFeedItem} from "./Interfaces";
 import {HttpClient} from "@angular/common/http";
 import {firstValueFrom} from "rxjs";
 
@@ -18,4 +18,11 @@ export class ArticleService {
     const call = this.http.get<NewsFeedItem[]>("http://localhost:5000/api/feed");
     this.articles = await firstValueFrom<NewsFeedItem[]>(call);
   }
+
+  async getArticle(id: number) {
+    const call = this.http.get<Article>("http://localhost:5000/api/articles/" + id);
+    const article = await firstValueFrom<Article>(call);
+    console.log(article);
+    return article;
+  }
 }

NewsfeedFrontend/src/app/app.component.ts

@@ -1,22 +1,63 @@
-import { Component } from '@angular/core';
+import {Component, OnDestroy} from '@angular/core';
 import {ArticleService} from "./ArticleService";
+import {ArticleDialogComponent} from "./article-dialog/aricle-dialog.component";
+import {DialogService, DynamicDialogRef} from "primeng/dynamicdialog";
+import {ArticleDisplayComponent} from "./article-display/article-display.component";
+import {Article} from "./Interfaces";
 
 @Component({
   selector: 'app-root',
   template: `
-    <p-dataView [value]="articleService.articles">
+    <p-dataView #dv [value]="articleService.articles">
       <ng-template let-article pTemplate="listItem">
         <div class="col-12">
-          <p>{{article.headline}}</p>
+          <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+
+            <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round"
+                 [src]="article.articleImgUrl" [alt]="article.headline"/>
+
+            <div
+              class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+              <div class="flex flex-column align-items-center sm:align-items-start gap-3">
+                <div class="text-2xl font-bold text-900">{{ article.headline }}</div>
+                <div class="flex align-items-center gap-3"> {{ article.body }}</div>
+              </div>
+              <div class="flex flex-column align-items-center sm:align-items-start gap-3">
+                <p-button (onClick)="showArticleDialog(article.articleId)">Show more</p-button>
+              </div>
+            </div>
+
+          </div>
         </div>
       </ng-template>
     </p-dataView>`,
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnDestroy {
   title = 'NewsfeedFrontend';
+  ref: DynamicDialogRef | undefined;
+  article: Article | undefined;
+
+  constructor(public articleService: ArticleService, private dialogService: DialogService) {
 
-  constructor(public articleService: ArticleService) {
+  }
+
+  ngOnDestroy(): void {
+    if (this.ref) {
+      this.ref.close();
+    }
+  }
 
+  async showArticleDialog(articleId: number) {
+    this.article = await this.articleService.getArticle(articleId);
+    this.ref = this.dialogService.open( ArticleDisplayComponent, {
+      data: {
+        articleId: this.article.articleId,
+      },
+      header: 'Article',
+      width: '70%',
+      contentStyle: {'max-height': '70%', 'overflow': 'auto'},
+      baseZIndex: 10000,
+    });
   }
 }

NewsfeedFrontend/src/app/app.module.ts

@@ -6,19 +6,27 @@ import { AppComponent } from './app.component';
 import { ArticleDisplayComponent } from './article-display/article-display.component';
 import {HttpClient, HttpClientModule} from "@angular/common/http";
 import {DataViewModule} from "primeng/dataview";
+import {ButtonModule} from "primeng/button";
+import {ArticleDialogComponent} from "./article-dialog/aricle-dialog.component";
+import {ArticleService} from "./ArticleService";
+import {DialogService} from "primeng/dynamicdialog";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 
 @NgModule({
   declarations: [
     AppComponent,
     ArticleDisplayComponent,
+    ArticleDialogComponent,
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    DataViewModule,
-    HttpClientModule
-  ],
-  providers: [],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        DataViewModule,
+        HttpClientModule,
+        ButtonModule,
+      BrowserAnimationsModule
+    ],
+  providers: [ArticleService, DialogService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

NewsfeedFrontend/src/app/article-dialog/aricle-dialog.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnDestroy } from '@angular/core';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import {ArticleService} from "../ArticleService";
+import {Article} from "../Interfaces";
+import {ArticleDisplayComponent} from "../article-display/article-display.component";
+
+@Component({
+  template: `<p>{{article?.headline}}</p>`,
+  providers: [DialogService, ArticleService]
+})
+export class ArticleDialogComponent implements OnDestroy {
+  article: Article | undefined;
+  ref: DynamicDialogRef | undefined;
+
+  constructor(private dialogService: DialogService, private articleService : ArticleService) {
+    //TODO: figure out how to call this from the parent component
+
+
+  }
+
+  ngOnDestroy(): void {
+    if (this.ref) {
+      this.ref.close();
+    }
+  }
+
+  async show(articleId: number) {
+    this.article = await this.articleService.getArticle(articleId);
+    this.ref = this.dialogService.open( ArticleDisplayComponent, { header: 'Article', width: '70%', contentStyle: {'max-height': '500px', 'overflow': 'auto'}, baseZIndex: 10000 });
+  }
+}

NewsfeedFrontend/src/app/article-dialog/article-dialog.component.specs.ts

@@ -0,0 +1,20 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+import {ArticleDialogComponent} from "./aricle-dialog.component";
+
+describe('ArticleDialogComponent', () => {
+  let component: ArticleDialogComponent;
+  let fixture: ComponentFixture<ArticleDialogComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ArticleDialogComponent]
+    });
+    fixture = TestBed.createComponent(ArticleDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

NewsfeedFrontend/src/app/article-display/article-display.component.ts

@@ -1,21 +1,31 @@
-import { Component } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {ArticleService} from "../ArticleService";
+import {Article} from "../Interfaces";
+import {DynamicDialogConfig} from "primeng/dynamicdialog";
 
 @Component({
   selector: 'app-article-display',
   template: `
-    <p-dataView [value]="articleService.articles">
-      <ng-template let-article pTemplate="listItem">
-        <div class="col-12">
-          <p>IDK what im doing</p>
-        </div>
-      </ng-template>
-    </p-dataView>
-    `,
+    <h2>{{article?.headline || "Headline"}}</h2>
+    <h4>By {{article?.author || "Author"}}</h4>
+    <img style="width: 50%; height: auto" [src]="article?.articleImgUrl" [alt]="article?.headline">
+    <p>{{article?.body}}</p>
+  `,
   styleUrls: ['./article-display.component.css']
 })
-export class ArticleDisplayComponent {
-  constructor(public articleService: ArticleService) {
-    articleService.getArticles().then(r => console.log(r));
+
+export class ArticleDisplayComponent implements OnInit {
+  articleId: number = 0;
+  article: Article | undefined;
+
+  constructor(public articleService: ArticleService, public config: DynamicDialogConfig) {
+  }
+
+  ngOnInit() {
+    this.articleId = this.config.data.articleId;
+
+    this.articleService.getArticle(this.articleId).then((article) => {
+      this.article = article;
+    });
   }
 }

NewsfeedFrontend/src/styles.css

@@ -1,6 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 @import "primeng/resources/themes/lara-light-blue/theme.css";
 @import "primeng/resources/primeng.css";
+@import "/node_modules/primeflex/primeflex.css";
 
 body {
   font-family: var(--font-family);